From bcda88710e95bf916ce17de3631e164665f28d1f Mon Sep 17 00:00:00 2001
From: Danielv123 <danielv@danielv.no>
Date: Thu, 8 Feb 2024 20:49:48 +0300
Subject: [PATCH] Make host name in instance list clickable

As per issue #572
---
 packages/web_ui/src/components/InstanceList.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web_ui/src/components/InstanceList.tsx b/packages/web_ui/src/components/InstanceList.tsx
index b3239b7b..d966ccad 100644
--- a/packages/web_ui/src/components/InstanceList.tsx
+++ b/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!");
 						}}
 					/>