From bb6de6e586126bb0fc8be9b9082c6999533fb492 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Thu, 4 Nov 2021 08:31:33 -0400
Subject: [PATCH 1/3] Add /vtctlds view

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 web/vtadmin/src/api/http.ts                   | 11 +++
 web/vtadmin/src/components/App.tsx            |  5 ++
 web/vtadmin/src/components/NavRail.tsx        |  6 +-
 web/vtadmin/src/components/routes/Vtctlds.tsx | 90 +++++++++++++++++++
 web/vtadmin/src/hooks/api.ts                  |  7 ++
 web/vtadmin/src/index.css                     |  4 +
 6 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 web/vtadmin/src/components/routes/Vtctlds.tsx

diff --git a/web/vtadmin/src/api/http.ts b/web/vtadmin/src/api/http.ts
index 28fb132a161..574f91f8371 100644
--- a/web/vtadmin/src/api/http.ts
+++ b/web/vtadmin/src/api/http.ts
@@ -149,6 +149,17 @@ export const fetchGates = async () =>
         },
     });
 
+export const fetchVtctlds = async () =>
+    vtfetchEntities({
+        endpoint: '/api/vtctlds',
+        extract: (res) => res.result.vtctlds,
+        transform: (e) => {
+            const err = pb.Vtctld.verify(e);
+            if (err) throw Error(err);
+            return pb.Vtctld.create(e);
+        },
+    });
+
 export interface FetchKeyspaceParams {
     clusterID: string;
     name: string;
diff --git a/web/vtadmin/src/components/App.tsx b/web/vtadmin/src/components/App.tsx
index 4b98686a360..615060fae26 100644
--- a/web/vtadmin/src/components/App.tsx
+++ b/web/vtadmin/src/components/App.tsx
@@ -34,6 +34,7 @@ import { Keyspace } from './routes/keyspace/Keyspace';
 import { Tablet } from './routes/tablet/Tablet';
 import { Backups } from './routes/Backups';
 import { Shard } from './routes/shard/Shard';
+import { Vtctlds } from './routes/Vtctlds';
 
 export const App = () => {
     return (
@@ -85,6 +86,10 @@ export const App = () => {
                             <Tablet />
                         </Route>
 
+                        <Route path="/vtctlds">
+                            <Vtctlds />
+                        </Route>
+
                         <Route path="/vtexplain">
                             <VTExplain />
                         </Route>
diff --git a/web/vtadmin/src/components/NavRail.tsx b/web/vtadmin/src/components/NavRail.tsx
index 3586740d196..fc3b6572b13 100644
--- a/web/vtadmin/src/components/NavRail.tsx
+++ b/web/vtadmin/src/components/NavRail.tsx
@@ -18,7 +18,7 @@ import { Link, NavLink } from 'react-router-dom';
 
 import style from './NavRail.module.scss';
 import logo from '../img/vitess-icon-color.svg';
-import { useClusters, useGates, useKeyspaces, useSchemas, useTablets, useWorkflows } from '../hooks/api';
+import { useClusters, useGates, useKeyspaces, useSchemas, useTablets, useVtctlds, useWorkflows } from '../hooks/api';
 import { Icon, Icons } from './Icon';
 import { getTableDefinitions } from '../util/tableDefinitions';
 
@@ -28,6 +28,7 @@ export const NavRail = () => {
     const { data: gates = [] } = useGates();
     const { data: schemas = [] } = useSchemas();
     const { data: tablets = [] } = useTablets();
+    const { data: vtctlds = [] } = useVtctlds();
     const { data: workflows = [] } = useWorkflows();
 
     const tds = React.useMemo(() => getTableDefinitions(schemas), [schemas]);
@@ -65,6 +66,9 @@ export const NavRail = () => {
                     <li>
                         <NavRailLink icon={Icons.keyT} text="Tablets" to="/tablets" count={tablets.length} />
                     </li>
+                    <li>
+                        <NavRailLink icon={Icons.keyT} text="vtctlds" to="/vtctlds" count={vtctlds.length} />
+                    </li>
                 </ul>
 
                 <ul className={style.navList}>
diff --git a/web/vtadmin/src/components/routes/Vtctlds.tsx b/web/vtadmin/src/components/routes/Vtctlds.tsx
new file mode 100644
index 00000000000..5665f8d3158
--- /dev/null
+++ b/web/vtadmin/src/components/routes/Vtctlds.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright 2021 The Vitess Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { orderBy } from 'lodash';
+import { useMemo } from 'react';
+import { useVtctlds } from '../../hooks/api';
+import { useSyncedURLParam } from '../../hooks/useSyncedURLParam';
+import { filterNouns } from '../../util/filterNouns';
+import { DataCell } from '../dataTable/DataCell';
+import { DataFilter } from '../dataTable/DataFilter';
+import { DataTable } from '../dataTable/DataTable';
+import { ContentContainer } from '../layout/ContentContainer';
+import { WorkspaceHeader } from '../layout/WorkspaceHeader';
+import { WorkspaceTitle } from '../layout/WorkspaceTitle';
+
+export const Vtctlds = () => {
+    const { data: vtctlds = [], ...q } = useVtctlds();
+    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 filtered = filterNouns(filter, mapped);
+
+        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-weight-bold">
+                            {row.fqdn ? (
+                                <a href={`//${row.fqdn}`} rel="noopener noreferrer" target="_blank">
+                                    {row.hostname}
+                                </a>
+                            ) : (
+                                row.hostname
+                            )}
+                        </div>
+                    </DataCell>
+                    <DataCell>
+                        {row.cluster}
+                        <div className="font-size-small text-color-secondary">{row.clusterID}</div>
+                    </DataCell>
+                </tr>
+            );
+        });
+    };
+
+    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} />
+
+                {/* TODO skeleton placeholder */}
+                {!!q.isLoading && <div className="text-align-center">Loading</div>}
+            </ContentContainer>
+        </div>
+    );
+};
diff --git a/web/vtadmin/src/hooks/api.ts b/web/vtadmin/src/hooks/api.ts
index c88a90302fc..4e52032ef01 100644
--- a/web/vtadmin/src/hooks/api.ts
+++ b/web/vtadmin/src/hooks/api.ts
@@ -29,6 +29,7 @@ import {
     fetchTablets,
     fetchVSchema,
     FetchVSchemaParams,
+    fetchVtctlds,
     fetchVTExplain,
     fetchWorkflow,
     fetchWorkflows,
@@ -92,6 +93,12 @@ export const useSchemas = (options?: UseQueryOptions<pb.Schema[], Error> | undef
 export const useTablets = (options?: UseQueryOptions<pb.Tablet[], Error> | undefined) =>
     useQuery(['tablets'], fetchTablets, options);
 
+/**
+ * useVtctlds is a query hook that fetches all vtctlds across every cluster.
+ */
+export const useVtctlds = (options?: UseQueryOptions<pb.Vtctld[], Error> | undefined) =>
+    useQuery(['vtctlds'], fetchVtctlds, options);
+
 /**
  * useTablet is a query hook that fetches a single tablet by alias.
  */
diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css
index de9fb344916..ae6472ac1b2 100644
--- a/web/vtadmin/src/index.css
+++ b/web/vtadmin/src/index.css
@@ -241,6 +241,10 @@ table tbody td[rowSpan] {
     text-align: right;
 }
 
+.text-align-center {
+    text-align: center;
+}
+
 .text-color-secondary {
     color: var(--textColorSecondary);
 }

From 8cb8cf329420be273d31806369e5e747614bee76 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Thu, 4 Nov 2021 08:40:18 -0400
Subject: [PATCH 2/3] Update vtadmin/discovery.json to include vtctld fqdn

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 examples/local/vtadmin/discovery.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/local/vtadmin/discovery.json b/examples/local/vtadmin/discovery.json
index 7aa60f530ff..def7dd50f85 100644
--- a/examples/local/vtadmin/discovery.json
+++ b/examples/local/vtadmin/discovery.json
@@ -2,6 +2,7 @@
     "vtctlds": [
         {
             "host": {
+                "fqdn": "localhost:15000",
                 "hostname": "localhost:15999"
             }
         }

From 5c25f61bb8a49150eaab9e8470118c59c956fee4 Mon Sep 17 00:00:00 2001
From: Sara Bee <855595+doeg@users.noreply.github.com>
Date: Thu, 4 Nov 2021 08:51:59 -0400
Subject: [PATCH 3/3] Add NavRail icon

Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com>
---
 web/vtadmin/src/components/Icon.tsx    | 1 +
 web/vtadmin/src/components/NavRail.tsx | 2 +-
 web/vtadmin/src/icons/index.tsx        | 1 +
 web/vtadmin/src/icons/keyV.svg         | 4 ++++
 4 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 web/vtadmin/src/icons/keyV.svg

diff --git a/web/vtadmin/src/components/Icon.tsx b/web/vtadmin/src/components/Icon.tsx
index d1732510a99..205a1b8896e 100644
--- a/web/vtadmin/src/components/Icon.tsx
+++ b/web/vtadmin/src/components/Icon.tsx
@@ -79,6 +79,7 @@ export enum Icons {
     keyR = 'keyR',
     keyS = 'keyS',
     keyT = 'keyT',
+    keyV = 'keyV',
     keyboard = 'keyboard',
     link = 'link',
     pageFirst = 'pageFirst',
diff --git a/web/vtadmin/src/components/NavRail.tsx b/web/vtadmin/src/components/NavRail.tsx
index fc3b6572b13..d238dfc938d 100644
--- a/web/vtadmin/src/components/NavRail.tsx
+++ b/web/vtadmin/src/components/NavRail.tsx
@@ -67,7 +67,7 @@ export const NavRail = () => {
                         <NavRailLink icon={Icons.keyT} text="Tablets" to="/tablets" count={tablets.length} />
                     </li>
                     <li>
-                        <NavRailLink icon={Icons.keyT} text="vtctlds" to="/vtctlds" count={vtctlds.length} />
+                        <NavRailLink icon={Icons.keyV} text="vtctlds" to="/vtctlds" count={vtctlds.length} />
                     </li>
                 </ul>
 
diff --git a/web/vtadmin/src/icons/index.tsx b/web/vtadmin/src/icons/index.tsx
index 9ddad6ebe32..464257fb194 100644
--- a/web/vtadmin/src/icons/index.tsx
+++ b/web/vtadmin/src/icons/index.tsx
@@ -40,6 +40,7 @@ export { ReactComponent as KeyK } from './keyK.svg';
 export { ReactComponent as KeyR } from './keyR.svg';
 export { ReactComponent as KeyS } from './keyS.svg';
 export { ReactComponent as KeyT } from './keyT.svg';
+export { ReactComponent as KeyV } from './keyV.svg';
 export { ReactComponent as Keyboard } from './keyboard.svg';
 export { ReactComponent as Link } from './link.svg';
 export { ReactComponent as PageFirst } from './pageFirst.svg';
diff --git a/web/vtadmin/src/icons/keyV.svg b/web/vtadmin/src/icons/keyV.svg
new file mode 100644
index 00000000000..07cc33d99e2
--- /dev/null
+++ b/web/vtadmin/src/icons/keyV.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" fill="#718096"/>
+<path d="M12.0186 14.4854L14.2744 7H16.5576L13.0918 16.9531H10.9521L7.5 7H9.77637L12.0186 14.4854Z" fill="#718096"/>
+</svg>