Added InstanceStatusTag react component

- Modified InstanceList & InstanceViewPage to use it

packages/web_ui/src/components/InstanceList.jsx

@@ -3,6 +3,7 @@ import { useHistory } from "react-router-dom";
 import { Table } from "antd";
 
 import { useSlaveList } from "../model/slave";
+import InstanceStatusTag from "./InstanceStatusTag";
 
 const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
 
@@ -35,6 +36,7 @@ export default function InstanceList(props) {
 		{
 			title: "Status",
 			dataIndex: "status",
+			render: status => <InstanceStatusTag status={status} />,
 			sorter: (a, b) => strcmp(a["status"], b["status"]),
 		},
 	];

packages/web_ui/src/components/InstanceStatusTag.jsx

@@ -0,0 +1,21 @@
+import { Tag } from "antd";
+import React from "react";
+
+const statusColors = {
+	unknown: "#d46b08",
+	unassigned: "#d4380d",
+	stopped: "#cf1322",
+	starting: "#7cb305",
+	running: "#389e0d",
+	stopping: "#d48806",
+	creating_save: "#096dd9",
+	exporting_data: "#08979c",
+	deleted: "#cf1322",
+};
+
+
+export default function InstanceStatusTag(props) {
+	return <Tag color={statusColors[props.status]}>
+		{props.status}
+	</Tag>;
+}

packages/web_ui/src/components/InstanceViewPage.jsx

@@ -18,6 +18,7 @@ import SavesList from "./SavesList";
 import { notifyErrorHandler } from "../util/notify";
 import { useInstance } from "../model/instance";
 import { useSlave } from "../model/slave";
+import InstanceStatusTag from "./InstanceStatusTag";
 
 const { Title, Paragraph } = Typography;
 
@@ -116,7 +117,7 @@ export default function InstanceViewPage(props) {
 					buttonContent={assigned ? "Reassign" : "Assign"}
 				/>}
 			</Descriptions.Item>
-			<Descriptions.Item label="Status">{instance["status"]}</Descriptions.Item>
+			<Descriptions.Item label="Status"><InstanceStatusTag status={instance["status"]} /></Descriptions.Item>
 		</Descriptions>
 
 		{