Add colored icons to status in jobs list

CHANGELOG.unreleased.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - The toolbar contains two  additional tools: [#5384](https://github.com/scalableminds/webknossos/pull/5384)
   - one for the skeleton mode (similar to the existing move tool).
   - one for erasing volume data (similar to right-dragging with the previous brush/trace tool)
+- Added colored icons to the status entries in the job list. [#5572](https://github.com/scalableminds/webknossos/pull/5594)
 
 ### Changed
 - Improve error logging for unhandled rejections. [#5575](https://github.com/scalableminds/webknossos/pull/5575)

frontend/javascripts/admin/job/job_list_view.js

@@ -4,7 +4,16 @@ import _ from "lodash";
 import { PropTypes } from "@scalableminds/prop-types";
 import { Link, type RouterHistory, withRouter } from "react-router-dom";
 import { Table, Spin, Input, Tooltip } from "antd";
-import { DownOutlined, EyeOutlined } from "@ant-design/icons";
+import {
+  CheckCircleTwoTone,
+  ClockCircleTwoTone,
+  CloseCircleTwoTone,
+  DownOutlined,
+  EyeOutlined,
+  LoadingOutlined,
+  QuestionCircleTwoTone,
+  ToolTwoTone,
+} from "@ant-design/icons";
 import { connect } from "react-redux";
 import * as React from "react";
 
@@ -140,21 +149,41 @@ class JobListView extends React.PureComponent<Props, State> {
   };
 
   renderState = (__: any, job: APIJob) => {
-    const tooltipMessages = {
-      UNKNOWN:
-        "The status information for this job could not be retreived. Please try again in a few minutes, or contact us if you need assistance.",
-      SUCCESS: "This job has successfully been executed.",
-      PENDING: "This job will run as soon as a worker becomes available.",
-      STARTED: "This job is currently running.",
-      FAILURE:
-        "Something went wrong when executing this job. Feel free to contact us if you need assistance.",
-      MANUAL:
-        "The job will be handled by an admin shortly, since it couldn't be finished automatically. Please check back here soon.",
+    const tooltipMessagesAndIcons = {
+      UNKNOWN: {
+        tooltip:
+          "The status information for this job could not be retreived. Please try again in a few minutes, or contact us if you need assistance.",
+        icon: <QuestionCircleTwoTone twoToneColor="grey" />,
+      },
+      SUCCESS: {
+        tooltip: "This job has successfully been executed.",
+        icon: <CheckCircleTwoTone twoToneColor="#49b21b" />,
+      },
+      PENDING: {
+        tooltip: "This job will run as soon as a worker becomes available.",
+        icon: <ClockCircleTwoTone twoToneColor="orange" />,
+      },
+      STARTED: { tooltip: "This job is currently running.", icon: <LoadingOutlined /> },
+      FAILURE: {
+        tooltip:
+          "Something went wrong when executing this job. Feel free to contact us if you need assistance.",
+        icon: <CloseCircleTwoTone twoToneColor="red" />,
+      },
+      MANUAL: {
+        tooltip:
+          "The job will be handled by an admin shortly, since it could not be finished automatically. Please check back here soon.",
+        icon: <ToolTwoTone twoToneColor="orange" />,
+      },
     };
 
-    const tooltip: string = tooltipMessages[job.state];
+    const { tooltip, icon } = tooltipMessagesAndIcons[job.state];
     const jobStateNormalized = _.capitalize(job.state.toLowerCase());
-    return <Tooltip title={tooltip}>{jobStateNormalized}</Tooltip>;
+    return (
+      <Tooltip title={tooltip}>
+        {icon}
+        {jobStateNormalized}
+      </Tooltip>
+    );
   };
 
   render() {