add variable and builder pages

This commit is contained in:
Simon Larsen
2023-02-07 20:07:02 +00:00
parent 5326237b42
commit 563f20bde6
9 changed files with 439 additions and 3 deletions

View File

@@ -17,6 +17,7 @@ enum IconProp {
Public = 'Public',
Home = 'Home',
Graph = 'Graph',
Variable = 'Variable',
Image = 'Image',
Grid = 'Grid',
More = 'More',

View File

@@ -154,6 +154,12 @@ const Icon: FunctionComponent<ComponentProps> = ({
d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
/>
);
} else if (icon === IconProp.Variable) {
return getSvgWrapper(
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
);
} else if (icon === IconProp.Workflow) {
return getSvgWrapper(
<path

View File

@@ -0,0 +1,83 @@
import Route from 'Common/Types/API/Route';
import Page from 'CommonUI/src/Components/Page/Page';
import React, { FunctionComponent, ReactElement } from 'react';
import PageMap from '../../Utils/PageMap';
import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
import PageComponentProps from '../PageComponentProps';
import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import WorkflowLogs from 'Model/Models/WorkflowLog';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { IconProp } from 'CommonUI/src/Components/Icon/Icon';
import Navigation from 'CommonUI/src/Utils/Navigation';
const Workflows: FunctionComponent<PageComponentProps> = (
_props: PageComponentProps
): ReactElement => {
return (
<Page
title={'Workflow Logs'}
breadcrumbLinks={[
{
title: 'Project',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.HOME] as Route
),
},
{
title: 'Workflows',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOWS] as Route
),
},
{
title: 'Logs',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOWS_LOGS] as Route
),
},
]}
>
<ModelTable<WorkflowLogs>
modelType={WorkflowLogs}
id="workflow-logs-table"
isDeleteable={false}
isEditable={false}
isCreateable={false}
name="Workflow Logs"
isViewable={false}
cardProps={{
icon: IconProp.Logs,
title: 'Workflow Logs',
description:
'List of logs in the last 30 days for all your workflows',
}}
noItemsMessage={'Looks like no workflow ran so far in the last 30 days.'}
showRefreshButton={true}
showFilterButton={true}
viewPageRoute={Navigation.getCurrentRoute()}
columns={[
{
field: {
workflow: {
name: true
},
},
title: 'Workflow Name',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
createdAt: true,
},
title: 'Logs Created At',
type: FieldType.DateTime,
isFilterable: true,
},
]}
/>
</Page>
);
};
export default Workflows;

View File

@@ -0,0 +1,135 @@
import Route from 'Common/Types/API/Route';
import Page from 'CommonUI/src/Components/Page/Page';
import React, { FunctionComponent, ReactElement } from 'react';
import PageMap from '../../Utils/PageMap';
import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
import PageComponentProps from '../PageComponentProps';
import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import WorkflowVariable from 'Model/Models/WorkflowVariable';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
import { IconProp } from 'CommonUI/src/Components/Icon/Icon';
import Navigation from 'CommonUI/src/Utils/Navigation';
import DashboardNavigation from '../../Utils/Navigation';
const Workflows: FunctionComponent<PageComponentProps> = (
_props: PageComponentProps
): ReactElement => {
return (
<Page
title={'Workflows'}
breadcrumbLinks={[
{
title: 'Project',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.HOME] as Route
),
},
{
title: 'Workflows',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOWS] as Route
),
},
{
title: 'Variables',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOWS_VARIABLES] as Route
),
},
]}
>
<ModelTable<WorkflowVariable>
modelType={WorkflowVariable}
id="status-page-table"
isDeleteable={false}
isEditable={false}
isCreateable={true}
name="Workflows"
isViewable={false}
cardProps={{
icon: IconProp.Variable,
title: 'Global Variables',
description:
'Here is a list of global secrets and variables for this project.',
}}
query={{
workflowId: null,
projectId: DashboardNavigation.getProjectId()?.toString(),
}}
noItemsMessage={'No workflows found.'}
formFields={[
{
field: {
name: true,
},
title: 'Name',
fieldType: FormFieldSchemaType.Text,
required: true,
placeholder: 'Workflow Name',
validation: {
minLength: 2,
},
},
{
field: {
description: true,
},
title: 'Description',
fieldType: FormFieldSchemaType.LongText,
required: true,
placeholder: 'Description',
},
{
field: {
isSecret: true,
},
title: 'Secret',
description: "Is this variable secret or secure? Should this be encrypted in the Database?",
fieldType: FormFieldSchemaType.Checkbox,
required: true,
},
{
field: {
content: true,
},
title: 'Content',
description: "Is this variable secret or secure? Should this be encrypted in the Database?",
fieldType: FormFieldSchemaType.Checkbox,
required: true,
},
]}
showRefreshButton={true}
showFilterButton={true}
columns={[
{
field: {
name: true,
},
title: 'Name',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
description: true,
},
title: 'Description',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
createdAt: true,
},
title: 'Created At',
type: FieldType.DateTime,
isFilterable: true,
},
]}
/>
</Page>
);
};
export default Workflows;

View File

@@ -7,6 +7,11 @@ import PageComponentProps from '../../PageComponentProps';
import SideMenu from './SideMenu';
import Navigation from 'CommonUI/src/Utils/Navigation';
import ObjectID from 'Common/Types/ObjectID';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { IconProp } from 'CommonUI/src/Components/Icon/Icon';
import WorkflowLogs from 'Model/Models/WorkflowLog';
import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import DashboardNavigation from '../../../Utils/Navigation';
const Delete: FunctionComponent<PageComponentProps> = (
_props: PageComponentProps
@@ -48,7 +53,49 @@ const Delete: FunctionComponent<PageComponentProps> = (
]}
sideMenu={<SideMenu modelId={modelId} />}
>
<div></div>
<ModelTable<WorkflowLogs>
modelType={WorkflowLogs}
id="workflow-logs-table"
isDeleteable={false}
isEditable={false}
isCreateable={false}
name="Workflow Logs"
query={{
workflowId: modelId,
projectId: DashboardNavigation.getProjectId()?.toString(),
}}
isViewable={false}
cardProps={{
icon: IconProp.Logs,
title: 'Workflow Logs',
description:
'List of logs in the last 30 days for this workflow',
}}
noItemsMessage={'Looks like this workflow did not run so far in the last 30 days.'}
showRefreshButton={true}
showFilterButton={true}
viewPageRoute={Navigation.getCurrentRoute()}
columns={[
{
field: {
workflow: {
name: true
},
},
title: 'Workflow Name',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
createdAt: true,
},
title: 'Logs Created At',
type: FieldType.DateTime,
isFilterable: true,
},
]}
/>
</Page>
);
};

View File

@@ -0,0 +1,154 @@
import Route from 'Common/Types/API/Route';
import Page from 'CommonUI/src/Components/Page/Page';
import React, { FunctionComponent, ReactElement } from 'react';
import PageMap from '../../../Utils/PageMap';
import RouteMap, { RouteUtil } from '../../../Utils/RouteMap';
import PageComponentProps from '../../PageComponentProps';
import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import WorkflowVariable from 'Model/Models/WorkflowVariable';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSchemaType';
import { IconProp } from 'CommonUI/src/Components/Icon/Icon';
import Navigation from 'CommonUI/src/Utils/Navigation';
import DashboardNavigation from '../../../Utils/Navigation';
import ObjectID from 'Common/Types/ObjectID';
const Workflows: FunctionComponent<PageComponentProps> = (
_props: PageComponentProps
): ReactElement => {
const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
return (
<Page
title={'Workflows'}
breadcrumbLinks={[
{
title: 'Project',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.HOME] as Route
),
},
{
title: 'Workflows',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOWS] as Route
),
},
{
title: 'View Workflow',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOW_VIEW] as Route,
modelId
),
},
{
title: 'Builder',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.WORKFLOW_BUILDER] as Route,
modelId
),
},
]}
>
<ModelTable<WorkflowVariable>
modelType={WorkflowVariable}
id="status-page-table"
isDeleteable={false}
isEditable={false}
isCreateable={true}
name="Workflows"
isViewable={false}
cardProps={{
icon: IconProp.Variable,
title: 'Global Variables',
description:
'Here is a list of global secrets and variables for this project.',
}}
query={{
workflowId: modelId,
projectId: DashboardNavigation.getProjectId()?.toString(),
}}
onBeforeCreate={(
item: WorkflowVariable
): Promise<WorkflowVariable> => {
item.workflowId = modelId;
item.projectId = DashboardNavigation.getProjectId()!;
return Promise.resolve(item);
}}
noItemsMessage={'No workflows found.'}
formFields={[
{
field: {
name: true,
},
title: 'Name',
fieldType: FormFieldSchemaType.Text,
required: true,
placeholder: 'Workflow Name',
validation: {
minLength: 2,
},
},
{
field: {
description: true,
},
title: 'Description',
fieldType: FormFieldSchemaType.LongText,
required: true,
placeholder: 'Description',
},
{
field: {
isSecret: true,
},
title: 'Secret',
description: "Is this variable secret or secure? Should this be encrypted in the Database?",
fieldType: FormFieldSchemaType.Checkbox,
required: true,
},
{
field: {
content: true,
},
title: 'Content',
description: "Is this variable secret or secure? Should this be encrypted in the Database?",
fieldType: FormFieldSchemaType.Checkbox,
required: true,
},
]}
showRefreshButton={true}
showFilterButton={true}
columns={[
{
field: {
name: true,
},
title: 'Name',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
description: true,
},
title: 'Description',
type: FieldType.Text,
isFilterable: true,
},
{
field: {
createdAt: true,
},
title: 'Created At',
type: FieldType.DateTime,
isFilterable: true,
},
]}
/>
</Page>
);
};
export default Workflows;

View File

@@ -27,7 +27,7 @@ const Workflows: FunctionComponent<PageComponentProps> = (
{
title: 'Workflows',
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.STATUS_PAGES] as Route
RouteMap[PageMap.WORKFLOWS] as Route
),
},
]}

View File

@@ -101,6 +101,8 @@ enum PageMap {
// WORKFLOW
WORKFLOWS = 'WORKFLOWS',
WORKFLOWS_LOGS = 'WORKFLOWS_LOGS',
WORKFLOWS_VARIABLES = 'WORKFLOWS_VARIABLES',
WORKFLOW_VIEW = 'WORKFLOW_VIEW',
WORKFLOW_DELETE = 'WORKFLOW_DELETE',
WORKFLOW_BUILDER = 'WORKFLOW_BUILDER',

View File

@@ -265,6 +265,14 @@ const RouteMap: Dictionary<Route> = {
`/dashboard/${RouteParams.ProjectID}/workflows`
),
[PageMap.WORKFLOWS_LOGS]: new Route(
`/dashboard/${RouteParams.ProjectID}/workflows/logs`
),
[PageMap.WORKFLOWS_VARIABLES]: new Route(
`/dashboard/${RouteParams.ProjectID}/workflows/variables`
),
[PageMap.WORKFLOW_BUILDER]: new Route(
`/dashboard/${RouteParams.ProjectID}/workflows/${RouteParams.ModelID}/builder`
),
@@ -290,7 +298,7 @@ export class RouteUtil {
if (
route.toString() === RouteMap[PageMap.USER_PROFILE]?.toString() ||
route.toString() ===
RouteMap[PageMap.PROJECT_INVITATIONS]?.toString() ||
RouteMap[PageMap.PROJECT_INVITATIONS]?.toString() ||
route.toString() === RouteMap[PageMap.ACTIVE_INCIDENTS]?.toString()
) {
return true;