Merge pull request #9143 from tinyspeck/sarabee-vtctlds

[vtadmin-web] Add vtctlds view

examples/local/vtadmin/discovery.json

@@ -2,6 +2,7 @@
     "vtctlds": [
         {
             "host": {
+                "fqdn": "localhost:15000",
                 "hostname": "localhost:15999"
             }
         }

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;

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>

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',

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.keyV} text="vtctlds" to="/vtctlds" count={vtctlds.length} />
+                    </li>
                 </ul>
 
                 <ul className={style.navList}>

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>
+    );
+};

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.
  */

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';

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);
 }