From 8942514a512477ea93a4996529e9122bf91b2fb1 Mon Sep 17 00:00:00 2001
From: notfelineit <notfelineit@gmail.com>
Date: Mon, 1 Apr 2024 17:32:05 -0700
Subject: [PATCH 1/3] Remove fqdn link since we deprecated vtctld web

Signed-off-by: notfelineit <notfelineit@gmail.com>
---
 web/vtadmin/src/components/routes/Vtctlds.tsx | 101 ++++++++----------
 1 file changed, 47 insertions(+), 54 deletions(-)

diff --git a/web/vtadmin/src/components/routes/Vtctlds.tsx b/web/vtadmin/src/components/routes/Vtctlds.tsx
index 26efd8498b4..54093529ec1 100644
--- a/web/vtadmin/src/components/routes/Vtctlds.tsx
+++ b/web/vtadmin/src/components/routes/Vtctlds.tsx
@@ -27,65 +27,58 @@ import { WorkspaceTitle } from '../layout/WorkspaceTitle';
 import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
 
 export const Vtctlds = () => {
-    const vtctldsQuery = useVtctlds();
-    const { data: vtctlds = [] } = vtctldsQuery;
+  const vtctldsQuery = useVtctlds();
+  const { data: vtctlds = [] } = vtctldsQuery;
 
-    const { value: filter, updateValue: updateFilter } = useSyncedURLParam('filter');
+  const { value: filter, updateValue: updateFilter } = useSyncedURLParam('filter');
 
-    const data = useMemo(() => {
-        const mapped = vtctlds.map((v) => ({
-            cluster: v.cluster?.name,
-            clusterID: v.cluster?.id,
-            hostname: v.hostname,
-            fqdn: v.FQDN,
-        }));
+  const data = useMemo(() => {
+    const mapped = vtctlds.map((v) => ({
+      cluster: v.cluster?.name,
+      clusterID: v.cluster?.id,
+      hostname: v.hostname,
+    }));
 
-        const filtered = filterNouns(filter, mapped);
+    const filtered = filterNouns(filter, mapped);
 
-        return orderBy(filtered, ['cluster', 'hostname']);
-    }, [filter, vtctlds]);
+    return orderBy(filtered, ['cluster', 'hostname']);
+  }, [filter, vtctlds]);
 
-    const renderRows = (rows: typeof data) => {
-        return rows.map((row) => {
-            return (
-                <tr key={row.hostname}>
-                    <DataCell>
-                        <div className="font-bold">
-                            {row.fqdn ? (
-                                <a href={`//${row.fqdn}`} rel="noopener noreferrer" target="_blank">
-                                    {row.hostname}
-                                </a>
-                            ) : (
-                                row.hostname
-                            )}
-                        </div>
-                    </DataCell>
-                    <DataCell>
-                        {row.cluster}
-                        <div className="text-sm text-secondary">{row.clusterID}</div>
-                    </DataCell>
-                </tr>
-            );
-        });
-    };
+  const renderRows = (rows: typeof data) => {
+    return rows.map((row) => {
+      return (
+        <tr key={row.hostname}>
+          <DataCell>
+            <div className="font-bold">
+              {row.hostname}
+            </div>
+          </DataCell>
+          <DataCell>
+            {row.cluster}
+            <div className="text-sm text-secondary">{row.clusterID}</div>
+          </DataCell>
+        </tr>
+      );
+    });
+  };
 
-    return (
-        <div>
-            <WorkspaceHeader>
-                <WorkspaceTitle>vtctlds</WorkspaceTitle>
-            </WorkspaceHeader>
+  return (
+    <div>
+      <WorkspaceHeader>
+        <WorkspaceTitle>vtctlds</WorkspaceTitle>
+      </WorkspaceHeader>
 
-            <ContentContainer>
-                <DataFilter
-                    autoFocus
-                    onChange={(e) => updateFilter(e.target.value)}
-                    onClear={() => updateFilter('')}
-                    placeholder="Filter vtctlds"
-                    value={filter || ''}
-                />
-                <DataTable columns={['Hostname', 'Cluster']} data={data} renderRows={renderRows} />
-                <QueryLoadingPlaceholder query={vtctldsQuery} />
-            </ContentContainer>
-        </div>
-    );
+      <ContentContainer>
+        <DataFilter
+          autoFocus
+          onChange={(e) => updateFilter(e.target.value)}
+          onClear={() => updateFilter('')}
+          placeholder="Filter vtctlds"
+          value={filter || ''}
+        />
+        <DataTable columns={['Hostname', 'Cluster']} data={data} renderRows={renderRows} />
+        <QueryLoadingPlaceholder query={vtctldsQuery} />
+      </ContentContainer>
+    </div>
+  );
 };

From 0e1bd75bb6760fb892761bb6d9931df47dddf196 Mon Sep 17 00:00:00 2001
From: notfelineit <notfelineit@gmail.com>
Date: Mon, 1 Apr 2024 18:18:53 -0700
Subject: [PATCH 2/3] Build vtadmin-web with ./101_initial_clusters script

Signed-off-by: notfelineit <notfelineit@gmail.com>
---
 examples/common/scripts/vtadmin-up.sh | 7 ++++++-
 web/vtadmin/build.sh                  | 9 +++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/examples/common/scripts/vtadmin-up.sh b/examples/common/scripts/vtadmin-up.sh
index faa2e6a177f..292a71b99c5 100755
--- a/examples/common/scripts/vtadmin-up.sh
+++ b/examples/common/scripts/vtadmin-up.sh
@@ -24,6 +24,8 @@ web_dir="${script_dir}/../../../web/vtadmin"
 vtadmin_api_port=14200
 vtadmin_web_port=14201
 
+echo "vtadmin-api http-origin set to \"http://${hostname}:${vtadmin_web_port}\""
+
 vtadmin \
   --addr "${hostname}:${vtadmin_api_port}" \
   --http-origin "http://${hostname}:${vtadmin_web_port}" \
@@ -48,9 +50,12 @@ vtadmin-api is running!
   - PID: ${vtadmin_api_pid}
 "
 
+echo "Building vtadmin-web..."
+source "${web_dir}/build.sh"
+
 # Wait for vtadmin to successfully discover the cluster
 expected_cluster_result="{\"result\":{\"clusters\":[{\"id\":\"${cluster_name}\",\"name\":\"${cluster_name}\"}]},\"ok\":true}"
-for _ in {0..300}; do
+for _ in {0..100}; do
   result=$(curl -s "http://${hostname}:${vtadmin_api_port}/api/clusters")
   if [[ ${result} == "${expected_cluster_result}" ]]; then
     break
diff --git a/web/vtadmin/build.sh b/web/vtadmin/build.sh
index 54d1a5b1926..a85e6a6fa44 100755
--- a/web/vtadmin/build.sh
+++ b/web/vtadmin/build.sh
@@ -24,6 +24,12 @@ web_dir="${script_dir}"
 
 vtadmin_api_port=14200
 
+if [ -z "${hostname}" ]
+then
+  hostname=$(hostname -f)
+  output "\n\033[1;32mhostname was empty, set it to \"${hostname}\"\033[0m"
+fi
+
 # Download nvm and node
 if [[ -z ${NVM_DIR} ]]; then
     export NVM_DIR="$HOME/.nvm"
@@ -50,6 +56,9 @@ npm --prefix "$web_dir" --silent install
 
 export PATH=$PATH:$web_dir/node_modules/.bin/
 
+vite_vtadmin_api_address="http://${hostname}:${vtadmin_api_port}"
+output "\n\033[1;32mSetting VITE_VTADMIN_API_ADDRESS to \"${vite_vtadmin_api_address}\"\033[0m"
+
 VITE_VTADMIN_API_ADDRESS="http://${hostname}:${vtadmin_api_port}" \
   VITE_ENABLE_EXPERIMENTAL_TABLET_DEBUG_VARS="true" \
   npm run --prefix "$web_dir" build

From b394a9f60a612fe219ac6435465bdbc82a4aa0f2 Mon Sep 17 00:00:00 2001
From: notfelineit <notfelineit@gmail.com>
Date: Mon, 1 Apr 2024 18:25:30 -0700
Subject: [PATCH 3/3] Fix lint issues

Signed-off-by: notfelineit <notfelineit@gmail.com>
---
 web/vtadmin/src/components/routes/Vtctlds.tsx | 92 +++++++++----------
 1 file changed, 45 insertions(+), 47 deletions(-)

diff --git a/web/vtadmin/src/components/routes/Vtctlds.tsx b/web/vtadmin/src/components/routes/Vtctlds.tsx
index 54093529ec1..33b66b11306 100644
--- a/web/vtadmin/src/components/routes/Vtctlds.tsx
+++ b/web/vtadmin/src/components/routes/Vtctlds.tsx
@@ -27,58 +27,56 @@ import { WorkspaceTitle } from '../layout/WorkspaceTitle';
 import { QueryLoadingPlaceholder } from '../placeholders/QueryLoadingPlaceholder';
 
 export const Vtctlds = () => {
-  const vtctldsQuery = useVtctlds();
-  const { data: vtctlds = [] } = vtctldsQuery;
+    const vtctldsQuery = useVtctlds();
+    const { data: vtctlds = [] } = vtctldsQuery;
 
-  const { value: filter, updateValue: updateFilter } = useSyncedURLParam('filter');
+    const { value: filter, updateValue: updateFilter } = useSyncedURLParam('filter');
 
-  const data = useMemo(() => {
-    const mapped = vtctlds.map((v) => ({
-      cluster: v.cluster?.name,
-      clusterID: v.cluster?.id,
-      hostname: v.hostname,
-    }));
+    const data = useMemo(() => {
+        const mapped = vtctlds.map((v) => ({
+            cluster: v.cluster?.name,
+            clusterID: v.cluster?.id,
+            hostname: v.hostname,
+        }));
 
-    const filtered = filterNouns(filter, mapped);
+        const filtered = filterNouns(filter, mapped);
 
-    return orderBy(filtered, ['cluster', 'hostname']);
-  }, [filter, vtctlds]);
+        return orderBy(filtered, ['cluster', 'hostname']);
+    }, [filter, vtctlds]);
 
-  const renderRows = (rows: typeof data) => {
-    return rows.map((row) => {
-      return (
-        <tr key={row.hostname}>
-          <DataCell>
-            <div className="font-bold">
-              {row.hostname}
-            </div>
-          </DataCell>
-          <DataCell>
-            {row.cluster}
-            <div className="text-sm text-secondary">{row.clusterID}</div>
-          </DataCell>
-        </tr>
-      );
-    });
-  };
+    const renderRows = (rows: typeof data) => {
+        return rows.map((row) => {
+            return (
+                <tr key={row.hostname}>
+                    <DataCell>
+                        <div className="font-bold">{row.hostname}</div>
+                    </DataCell>
+                    <DataCell>
+                        {row.cluster}
+                        <div className="text-sm text-secondary">{row.clusterID}</div>
+                    </DataCell>
+                </tr>
+            );
+        });
+    };
 
-  return (
-    <div>
-      <WorkspaceHeader>
-        <WorkspaceTitle>vtctlds</WorkspaceTitle>
-      </WorkspaceHeader>
+    return (
+        <div>
+            <WorkspaceHeader>
+                <WorkspaceTitle>vtctlds</WorkspaceTitle>
+            </WorkspaceHeader>
 
-      <ContentContainer>
-        <DataFilter
-          autoFocus
-          onChange={(e) => updateFilter(e.target.value)}
-          onClear={() => updateFilter('')}
-          placeholder="Filter vtctlds"
-          value={filter || ''}
-        />
-        <DataTable columns={['Hostname', 'Cluster']} data={data} renderRows={renderRows} />
-        <QueryLoadingPlaceholder query={vtctldsQuery} />
-      </ContentContainer>
-    </div>
-  );
+            <ContentContainer>
+                <DataFilter
+                    autoFocus
+                    onChange={(e) => updateFilter(e.target.value)}
+                    onClear={() => updateFilter('')}
+                    placeholder="Filter vtctlds"
+                    value={filter || ''}
+                />
+                <DataTable columns={['Hostname', 'Cluster']} data={data} renderRows={renderRows} />
+                <QueryLoadingPlaceholder query={vtctldsQuery} />
+            </ContentContainer>
+        </div>
+    );
 };