Add Pill component for enabled/disabled status display in Workflow views

This commit is contained in:
Simon Larsen 2024-11-11 18:43:46 +00:00
parent 5c459eede8
commit a98fc6f784
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
3 changed files with 22 additions and 3 deletions

View File

@ -8,6 +8,8 @@ import Navigation from "Common/UI/Utils/Navigation";
import Label from "Common/Models/DatabaseModels/Label"; import Label from "Common/Models/DatabaseModels/Label";
import Workflow from "Common/Models/DatabaseModels/Workflow"; import Workflow from "Common/Models/DatabaseModels/Workflow";
import React, { Fragment, FunctionComponent, ReactElement } from "react"; import React, { Fragment, FunctionComponent, ReactElement } from "react";
import Pill from "Common/UI/Components/Pill/Pill";
import { Green500, Red500 } from "Common/Types/BrandColors";
const Delete: FunctionComponent<PageComponentProps> = (): ReactElement => { const Delete: FunctionComponent<PageComponentProps> = (): ReactElement => {
const modelId: ObjectID = Navigation.getLastParamAsObjectID(0); const modelId: ObjectID = Navigation.getLastParamAsObjectID(0);
@ -109,7 +111,15 @@ const Delete: FunctionComponent<PageComponentProps> = (): ReactElement => {
isEnabled: true, isEnabled: true,
}, },
title: "Enabled", title: "Enabled",
fieldType: FieldType.Boolean, fieldType: FieldType.Element,
getElement: (item: Workflow): ReactElement => {
if (item.isEnabled) {
return (
<Pill text="Enabled" color={Green500} isMinimal={true} />
);
}
return <Pill text="Disabled" color={Red500} isMinimal={true} />;
},
}, },
{ {
field: { field: {

View File

@ -17,6 +17,8 @@ import Label from "Common/Models/DatabaseModels/Label";
import Workflow from "Common/Models/DatabaseModels/Workflow"; import Workflow from "Common/Models/DatabaseModels/Workflow";
import WorkflowLog from "Common/Models/DatabaseModels/WorkflowLog"; import WorkflowLog from "Common/Models/DatabaseModels/WorkflowLog";
import React, { Fragment, FunctionComponent, ReactElement } from "react"; import React, { Fragment, FunctionComponent, ReactElement } from "react";
import Pill from "Common/UI/Components/Pill/Pill";
import { Green500, Red500 } from "Common/Types/BrandColors";
const Workflows: FunctionComponent<PageComponentProps> = (): ReactElement => { const Workflows: FunctionComponent<PageComponentProps> = (): ReactElement => {
const startDate: Date = OneUptimeDate.getSomeDaysAgo(30); const startDate: Date = OneUptimeDate.getSomeDaysAgo(30);
@ -189,7 +191,15 @@ const Workflows: FunctionComponent<PageComponentProps> = (): ReactElement => {
isEnabled: true, isEnabled: true,
}, },
title: "Enabled", title: "Enabled",
type: FieldType.Boolean, type: FieldType.Element,
getElement: (item: Workflow): ReactElement => {
if (item.isEnabled) {
return (
<Pill text="Enabled" color={Green500} isMinimal={true} />
);
}
return <Pill text="Disabled" color={Red500} isMinimal={true} />;
},
}, },
{ {
field: { field: {

View File

@ -22,7 +22,6 @@ import "./Jobs/IncidentStateTimeline/SendNotificationToSubscribers";
import "./Jobs/IncomingRequestMonitor/CheckHeartbeat"; import "./Jobs/IncomingRequestMonitor/CheckHeartbeat";
import "./Jobs/MeteredPlan/ReportTelemetryMeteredPlan"; import "./Jobs/MeteredPlan/ReportTelemetryMeteredPlan";
// Monitor Owners // Monitor Owners
import "./Jobs/MonitorOwners/SendCreatedResourceNotification"; import "./Jobs/MonitorOwners/SendCreatedResourceNotification";
import "./Jobs/MonitorOwners/SendOwnerAddedNotification"; import "./Jobs/MonitorOwners/SendOwnerAddedNotification";