From bfed108ba534ddb61710b9e62ff898638191f593 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Fri, 20 Sep 2024 15:38:28 +0200
Subject: [PATCH] use StepperIcons object to decide Step
---
src/components/Job/JobDetails.tsx | 8 ++++++--
src/components/Job/JobStatus.tsx | 12 ++++++------
2 files changed, 12 insertions(+), 8 deletions(-)
diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index b297383d..454ad5e3 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -10,7 +10,8 @@ import {
formatDateAndTime,
EmptyValue,
Duration,
- Step,
+ StepperComponents,
+ STEPPER_STATES,
AccessControl
} from "@ess-ics/ce-ui-common";
import { JobBadge } from "./JobBadge";
@@ -103,6 +104,9 @@ export const JobDetails = ({ operation, job }: JobDetailsProps) => {
const [alerts, setAlerts] = useState<
{ type?: Status; message?: string; link?: string }[]
>(operation.alerts ?? []);
+ const StepIcon = operation?.status
+ ? StepperComponents[operation.status.toLowerCase()]
+ : StepperComponents[STEPPER_STATES.unknown];
const awxJob = useMemo(
() => new AWXJobDetails(operation, operation.type),
@@ -144,7 +148,7 @@ export const JobDetails = ({ operation, job }: JobDetailsProps) => {
>
Job log stream
</Typography>
- <Step
+ <StepIcon
showToolTip
step={{
state: operation?.status?.toLowerCase(),
diff --git a/src/components/Job/JobStatus.tsx b/src/components/Job/JobStatus.tsx
index d8608116..d5015bb7 100644
--- a/src/components/Job/JobStatus.tsx
+++ b/src/components/Job/JobStatus.tsx
@@ -1,5 +1,5 @@
import {
- StepperEvents,
+ STEPPER_STATES,
LabeledIcon,
IconRunning,
IconSuccessful,
@@ -14,22 +14,22 @@ interface JobStatusProps {
const getStatus = (status: string) => {
switch (status.toLowerCase()) {
- case StepperEvents.queued:
+ case STEPPER_STATES.queued:
return {
label: "Queued",
icon: IconRunning
};
- case StepperEvents.running:
+ case STEPPER_STATES.running:
return {
label: "Running",
icon: IconRunning
};
- case StepperEvents.successful:
+ case STEPPER_STATES.successful:
return {
label: "Successful",
icon: IconSuccessful
};
- case StepperEvents.failed:
+ case STEPPER_STATES.failed:
return {
label: "Failed",
icon: IconFailed
@@ -54,7 +54,7 @@ export const JobStatus = ({ status }: JobStatusProps) => {
labelPosition="right"
LabelProps={{
color:
- convertedStatus === StepperEvents.failed
+ convertedStatus === STEPPER_STATES.failed
? theme.palette.status.fail.main
: "inherit"
}}
--
GitLab