Make host name in instance list clickable

As per issue #572

packages/web_ui/src/components/InstanceList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
-import { message, Button, Space, Table } from "antd";
+import { Link, useNavigate } from "react-router-dom";
+import { message, Button, Space, Table, Typography } from "antd";
 import CopyOutlined from "@ant-design/icons/CopyOutlined";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import type { ColumnsType } from "antd/es/table";
@@ -55,7 +55,14 @@ export default function InstanceList(props: InstanceListProps) {
 		{
 			title: "Assigned Host",
 			key: "assignedHost",
-			render: (_, instance) => hostName(instance.assignedHost),
+			render: (_, instance) => <Link
+				to={`/hosts/${instance.assignedHost}/view`}
+				onClick={e => e.stopPropagation()}
+			>
+				<Typography.Link>
+					{hostName(instance.assignedHost)}
+				</Typography.Link>
+			</Link>,
 			sorter: (a, b) => strcmp(hostName(a.assignedHost), hostName(b.assignedHost)),
 			responsive: ["sm"],
 		},
@@ -68,10 +75,10 @@ export default function InstanceList(props: InstanceListProps) {
 					{publicAddress}
 					<Button
 						type="text"
-						icon={<CopyOutlined/>}
+						icon={<CopyOutlined />}
 						onClick={(e) => {
 							e.stopPropagation();
-							navigator.clipboard.writeText(publicAddress??"");
+							navigator.clipboard.writeText(publicAddress ?? "");
 							message.success("Copied public address!");
 						}}
 					/>