From 0eb98a6aa3689d329340d2ff809b2a9cfd19f041 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 19 Sep 2024 13:27:57 +0200
Subject: [PATCH] use status icons from common
---
package-lock.json | 14 +--
package.json | 2 +-
src/components/Job/JobStatus.js | 92 +++++++++----------
.../Job/JobTable/JobStatusColumn.js | 2 +-
4 files changed, 52 insertions(+), 58 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index f3dacb34..6b8768cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "6.7.0-04a696b4",
+ "@ess-ics/ce-ui-common": "6.7.0-18ea750c",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
@@ -3119,9 +3119,9 @@
}
},
"node_modules/@ess-ics/ce-ui-common": {
- "version": "6.7.0-04a696b4",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-6.7.0-04a696b4.tgz",
- "integrity": "sha512-N6jXuIBh1l3ml98UUhMlAUYlU2fA8En9AadNp6v0w/7YmpJM9MNt8HwyLzeL4kfY1ZDWHdi7dGDPvb5iLMDmIw==",
+ "version": "6.7.0-18ea750c",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-6.7.0-18ea750c.tgz",
+ "integrity": "sha512-jnvOeXSvs4S7AkzpX16zf50g+22Ey+FMrpq3gQoOaVzPHBt2Zc7A6xDtp8rL5sgVFeX/63Bh0vNz+RPS9YUZxA==",
"dependencies": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -34763,9 +34763,9 @@
"dev": true
},
"@ess-ics/ce-ui-common": {
- "version": "6.7.0-04a696b4",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-6.7.0-04a696b4.tgz",
- "integrity": "sha512-N6jXuIBh1l3ml98UUhMlAUYlU2fA8En9AadNp6v0w/7YmpJM9MNt8HwyLzeL4kfY1ZDWHdi7dGDPvb5iLMDmIw==",
+ "version": "6.7.0-18ea750c",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-6.7.0-18ea750c.tgz",
+ "integrity": "sha512-jnvOeXSvs4S7AkzpX16zf50g+22Ey+FMrpq3gQoOaVzPHBt2Zc7A6xDtp8rL5sgVFeX/63Bh0vNz+RPS9YUZxA==",
"requires": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index 7bea12ba..6f22ebb6 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "6.7.0-04a696b4",
+ "@ess-ics/ce-ui-common": "6.7.0-18ea750c",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
diff --git a/src/components/Job/JobStatus.js b/src/components/Job/JobStatus.js
index d518e934..c32b5ee0 100644
--- a/src/components/Job/JobStatus.js
+++ b/src/components/Job/JobStatus.js
@@ -1,49 +1,46 @@
-import { STEPPER_STATES, LabeledIcon } from "@ess-ics/ce-ui-common";
-import { HelpOutline } from "@mui/icons-material";
+import {
+ StepperEvents,
+ LabeledIcon,
+ IconRunning,
+ IconSuccessful,
+ IconFailed,
+ IconUnknown
+} from "@ess-ics/ce-ui-common";
+import { theme } from "../../style/Theme";
-const ActiveIcon = STEPPER_STATES.active.outlinedIcon;
-const CompletedIcon = STEPPER_STATES.completed.outlinedIcon;
-const ErrorIcon = STEPPER_STATES.error.outlinedIcon;
-
-const STEPPER_STATUS = {
- queued: {
- label: "Queued",
- alertType: "info",
- icon: ActiveIcon,
- color: STEPPER_STATES.active.color.main
- },
- running: {
- label: "Running",
- alertType: "info",
- icon: ActiveIcon,
- color: STEPPER_STATES.active.color.main
- },
- successful: {
- label: "Completed",
- alertType: "success",
- icon: CompletedIcon,
- color: STEPPER_STATES.completed.color.main
+const getStatus = (status) => {
+ switch (status.toLowerCase()) {
+ case StepperEvents.queued:
+ return {
+ label: "Queued",
+ icon: IconRunning
+ };
+ case StepperEvents.running:
+ return {
+ label: "Running",
+ icon: IconRunning
+ };
+ case StepperEvents.successful:
+ return {
+ label: "Successful",
+ icon: IconSuccessful
+ };
+ case StepperEvents.failed:
+ return {
+ label: "Failed",
+ icon: IconFailed
+ };
+ default:
+ return {
+ label: "Unknown",
+ icon: IconUnknown
+ };
}
};
-const STATUS = {
- ...STEPPER_STATUS,
- failed: {
- label: "Error",
- alertType: "error",
- icon: ErrorIcon,
- color: STEPPER_STATES.error.color.main
- },
- unknown: {
- label: "Unknown",
- alertType: "info",
- icon: HelpOutline,
- color: STEPPER_STATES.disabled.color.main
- }
-};
-
-export const JobStatusIcon = ({ job }) => {
- const activeStep = STATUS[job?.status?.toLowerCase()] ?? STATUS.unknown;
+export const JobStatusIcon = ({ status }) => {
+ const activeStep = getStatus(status);
+ const Icon = activeStep.icon;
return (
<LabeledIcon
@@ -51,14 +48,11 @@ export const JobStatusIcon = ({ job }) => {
labelPosition="right"
LabelProps={{
color:
- activeStep.alertType === "error" ? STATUS.failed.color : "inherit"
- }}
- Icon={activeStep.icon}
- IconProps={{
- style: {
- fill: activeStep.color
- }
+ status.toLowerCase() === StepperEvents.failed
+ ? theme.palette.status.fail.main
+ : "inherit"
}}
+ Icon={() => <Icon size="medium" />}
/>
);
};
diff --git a/src/components/Job/JobTable/JobStatusColumn.js b/src/components/Job/JobTable/JobStatusColumn.js
index 3a393365..912db370 100644
--- a/src/components/Job/JobTable/JobStatusColumn.js
+++ b/src/components/Job/JobTable/JobStatusColumn.js
@@ -6,7 +6,7 @@ export const JobStatusColumn = ({ job }) => {
return (
<Stack>
<Stack gap={0.5}>
- <JobStatusIcon job={job} />
+ <JobStatusIcon status={job.status} />
<StartAndDuration
createdAt={job.createdAt}
startTime={job?.startTime}
--
GitLab