Move and add icons to status tags

packages/web_ui/src/components/HostStatusTag.tsx

@@ -0,0 +1,17 @@
+import { Tag } from "antd";
+import React from "react";
+
+import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
+
+const statusOptions = {
+	connected: <Tag color="#389e0d" icon={<CheckCircleOutlined/>} >Connected</Tag>,
+	disconnected: <Tag color="#cf1322" icon={<CloseCircleOutlined/>} >Disconnected</Tag>,
+};
+
+type HostStatusTagProps = {
+	connected: boolean;
+};
+
+export default function HostStatusTag(props: HostStatusTagProps) {
+	return props.connected ? statusOptions.connected : statusOptions.disconnected;
+}

packages/web_ui/src/components/HostViewPage.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Descriptions, Spin, Tag, Typography, Button, Space, Modal, Popconfirm, Flex, Tooltip } from "antd";
+import { Descriptions, Spin, Typography, Button, Space, Popconfirm, Flex, Tooltip } from "antd";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useParams } from "react-router-dom";
 
@@ -7,6 +7,7 @@ import * as lib from "@clusterio/lib";
 import notify, { notifyErrorHandler } from "../util/notify";
 import ControlContext from "./ControlContext";
 import HostConfigTree from "./HostConfigTree";
+import HostStatusTag from "./HostStatusTag";
 import InstanceList from "./InstanceList";
 import LogConsole, { SelectMaxLogLevel } from "./LogConsole";
 import { useAccount } from "../model/account";
@@ -134,15 +135,10 @@ export default function HostViewPage() {
 	return <PageLayout nav={nav}>
 		<PageHeader
 			title={host.name || String(hostId)}
+			status={<HostStatusTag connected={host["connected"]}/>}
 			extra={hostButtons}
 		/>
 		<Descriptions bordered size="small" column={{ xs: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}>
-			<Descriptions.Item label="Name">{host["name"]}</Descriptions.Item>
-			<Descriptions.Item label="Connected">
-				<Tag color={host["connected"] ? "#389e0d" : "#cf1322"}>
-					{host["connected"] ? "Connected" : "Disconnected"}
-				</Tag>
-			</Descriptions.Item>
 			<Descriptions.Item label="Version">{host.version}</Descriptions.Item>
 			<Descriptions.Item label="Node.js">{system?.node}</Descriptions.Item>
 			<Descriptions.Item label="OS Kernel">{system?.kernel}</Descriptions.Item>

packages/web_ui/src/components/HostsPage.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useRef, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button, Flex, Form, InputNumber, Modal, Progress, Space, Switch, Table, Tag, Tooltip, Typography } from "antd";
+import { Button, Flex, Form, InputNumber, Modal, Space, Switch, Table, Tooltip, Typography } from "antd";
 import { ExclamationCircleOutlined, CopyOutlined } from "@ant-design/icons";
 
 import * as lib from "@clusterio/lib";
@@ -11,6 +11,7 @@ import ControlContext from "./ControlContext";
 import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
+import HostStatusTag from "./HostStatusTag";
 import {
 	MetricCpuRatio, MetricCpuUsed, MetricMemoryRatio, MetricMemoryUsed,
 	MetricDiskUsed, MetricDiskRatio,
@@ -287,11 +288,7 @@ export default function HostsPage() {
 					title: "Connected",
 					key: "connected",
 					render: (_, host) => <>
-						<Tag
-							color={host.connected ? "#389e0d" : "#cf1322"}
-						>
-							{host.connected ? "Connected" : "Disconnected"}
-						</Tag>
+						<HostStatusTag connected={host["connected"]}/>
 						<RestartRequired system={systems.get(host.id)}/>
 					</>,
 					sorter: (a, b) => Number(a.connected) - Number(b.connected),

packages/web_ui/src/components/InstanceStatusTag.tsx

@@ -1,23 +1,27 @@
 import { Tag } from "antd";
 import React from "react";
 
-export const statusColors = {
-	unknown: "#8c8c8c",
-	unassigned: "#eb2f96",
-	stopped: "#cf1322",
-	starting: "#ad8b00",
-	running: "#389e0d",
-	stopping: "#d48806",
-	creating_save: "#096dd9",
-	exporting_data: "#08979c",
-	deleted: "#262626",
+import {
+	QuestionCircleOutlined, ClockCircleOutlined, StopOutlined, LoadingOutlined,
+	CheckCircleOutlined, SaveOutlined, ExportOutlined, DeleteOutlined,
+} from "@ant-design/icons";
+
+export const statusOptions = {
+	unknown: <Tag color="#8c8c8c" icon={<QuestionCircleOutlined />}>Unknown</Tag>,
+	unassigned: <Tag color="#eb2f96" icon={<ClockCircleOutlined />}>Unassigned</Tag>,
+	stopped: <Tag color="#cf1322" icon={<StopOutlined />}>Stopped</Tag>,
+	starting: <Tag color="#ad8b00" icon={<LoadingOutlined />}>Starting</Tag>,
+	running: <Tag color="#389e0d" icon={<CheckCircleOutlined />}>Running</Tag>,
+	stopping: <Tag color="#d48806" icon={<LoadingOutlined />}>Stopping</Tag>,
+	creating_save: <Tag color="#096dd9" icon={<SaveOutlined />}>Creating Save</Tag>,
+	exporting_data: <Tag color="#08979c" icon={<ExportOutlined />}>Exporting Data</Tag>,
+	deleted: <Tag color="#262626" icon={<DeleteOutlined />}>Deleted</Tag>,
 };
 
 type InstanceStatusTag = {
-	status: keyof typeof statusColors;
+	status: keyof typeof statusOptions;
 };
+
 export default function InstanceStatusTag(props: InstanceStatusTag) {
-	return <Tag color={statusColors[props.status]}>
-		{props.status.replace("_", " ")}
-	</Tag>;
+	return statusOptions[props.status];
 }

packages/web_ui/src/components/InstanceViewPage.tsx

@@ -42,7 +42,7 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 	return <Descriptions
 		bordered
 		size="small"
-		column={{ xs: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}
+		column={{ xs: 1, md: 3, lg: 3, xl: 3, xxl: 3 }}
 	>
 		<Descriptions.Item label="Host">
 			{!assigned
@@ -66,9 +66,6 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 		<Descriptions.Item label="Version">
 			{instance.factorioVersion ?? "unknown"}
 		</Descriptions.Item>
-		<Descriptions.Item label="Status">
-			<InstanceStatusTag status={instance.status!} />
-		</Descriptions.Item>
 		<Descriptions.Item label="Start Time">
 			<MetricRelativeDate timeMs={instance.startedAtMs}/>
 		</Descriptions.Item>
@@ -104,7 +101,7 @@ function InstanceButtons(props: { instance: lib.InstanceDetails }) {
 			instanceButtonMenuItems.push({ type: "divider" });
 		}
 		instanceButtonMenuItems.push({
-			disabled: !["unknown", "unassigned", "stopped"].includes(instance.status!),
+			disabled: !["unknown", "unassigned", "stopped"].includes(instance.status),
 			danger: true,
 			key: "delete",
 			icon: <DeleteOutlined />,
@@ -215,6 +212,7 @@ export default function InstanceViewPage() {
 	return <PageLayout nav={nav}>
 		<PageHeader
 			title={instance.name ?? ""}
+			status={<InstanceStatusTag status={instance.status} />}
 			extra={<InstanceButtons instance={instance} />}
 		/>
 		<InstanceDescription host={host} instance={instance} />

packages/web_ui/src/components/PageHeader.tsx

@@ -5,6 +5,7 @@ const { Text } = Typography;
 type PageHeaderProps = {
 	title: string | React.ReactElement;
 	subTitle?: string | React.ReactElement;
+	status?: React.JSX.Element;
 	extra?: React.JSX.Element;
 };
 
@@ -13,6 +14,7 @@ export default function PageHeader(props: PageHeaderProps): React.JSX.Element {
 		<Space>
 			<h2 className="page-header-title">{props.title}</h2>
 			{props.subTitle && <Text type="secondary">{props.subTitle}</Text>}
+			{props.status ?? null}
 		</Space>
 		{props.extra && <div className="page-header-extra">{props.extra}</div>}
 	</div>;

packages/web_ui/src/index.ts

@@ -21,7 +21,7 @@ export { default as LogConsole } from "./components/LogConsole";
 export { default as AssignInstanceModal } from "./components/AssignInstanceModal";
 export { default as InstanceList } from "./components/InstanceList";
 export { default as InstanceRcon } from "./components/InstanceRcon";
-export { default as InstanceStatusTag, statusColors } from "./components/InstanceStatusTag";
+export { default as InstanceStatusTag } from "./components/InstanceStatusTag";
 export { default as InstanceControlButton, InstanceControlButtonPermissions } from "./components/InstanceControlButton";
 
 export { default as PageHeader } from "./components/PageHeader";