[vtadmin-web] An initial pass for tablet filters

web/vtadmin/package.json

@@ -59,6 +59,11 @@
       "last 1 safari version"
     ]
   },
+  "jest": {
+    "transformIgnorePatterns": [
+      "/!node_modules\\/lodash-es/"
+    ]
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",

web/vtadmin/src/components/TextInput.module.scss

@@ -1,5 +1,5 @@
 .inputContainer {
-  display: inline-block;
+  display: block;
   position: relative;
 }
 

web/vtadmin/src/components/routes/Tablets.module.scss

@@ -0,0 +1,7 @@
+.controls {
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: 1fr min-content;
+  margin-bottom: 24px;
+  max-width: 1200px;
+}

web/vtadmin/src/components/routes/Tablets.tsx

@@ -20,35 +20,72 @@ import { vtadmin as pb, topodata } from '../../proto/vtadmin';
 import { orderBy } from 'lodash-es';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import { DataTable } from '../dataTable/DataTable';
+import { TextInput } from '../TextInput';
+import { Icons } from '../Icon';
+import { filterNouns } from '../../util/filterNouns';
+import style from './Tablets.module.scss';
+import { Button } from '../Button';
 
 export const Tablets = () => {
     useDocumentTitle('Tablets');
+
+    const [filter, setFilter] = React.useState<string>('');
     const { data = [] } = useTablets();
 
-    const rows = React.useMemo(() => {
-        return orderBy(data, ['cluster.name', 'tablet.keyspace', 'tablet.shard', 'tablet.type']);
-    }, [data]);
+    const filteredData = React.useMemo(() => {
+        // Properties prefixed with "_" are hidden and included for filtering only.
+        // They also won't work as keys in key:value searches, e.g., you cannot
+        // search for `_keyspaceShard:customers/20-40`, by design, mostly because it's
+        // unexpected and a little weird to key on properties that you can't see.
+        const mapped = data.map((t) => ({
+            cluster: t.cluster?.name,
+            keyspace: t.tablet?.keyspace,
+            shard: t.tablet?.shard,
+            alias: formatAlias(t),
+            hostname: t.tablet?.hostname,
+            displayType: formatDisplayType(t),
+            state: formatState(t),
+            _keyspaceShard: `${t.tablet?.keyspace}/${t.tablet?.shard}`,
+            // Include the unformatted type so (string) filtering by "master" works
+            // even if "primary" is what we display, and what we use for key:value searches.
+            _type: formatType(t),
+        }));
+        const filtered = filterNouns(filter, mapped);
+        return orderBy(filtered, ['cluster', 'keyspace', 'shard', 'displayType']);
+    }, [filter, data]);
 
-    const renderRows = React.useCallback((rows: pb.Tablet[]) => {
+    const renderRows = React.useCallback((rows: typeof filteredData) => {
         return rows.map((t, tdx) => (
             <tr key={tdx}>
-                <td>{t.cluster?.name}</td>
-                <td>{t.tablet?.keyspace}</td>
-                <td>{t.tablet?.shard}</td>
-                <td>{formatAlias(t)}</td>
-                <td>{t.tablet?.hostname}</td>
-                <td>{formatType(t)}</td>
-                <td>{formatState(t)}</td>
+                <td>{t.cluster}</td>
+                <td>{t.keyspace}</td>
+                <td>{t.shard}</td>
+                <td>{t.displayType}</td>
+                <td>{t.state}</td>
+                <td>{t.alias}</td>
+                <td>{t.hostname}</td>
             </tr>
         ));
     }, []);
 
     return (
         <div>
             <h1>Tablets</h1>
+            <div className={style.controls}>
+                <TextInput
+                    autoFocus
+                    iconLeft={Icons.search}
+                    onChange={(e) => setFilter(e.target.value)}
+                    placeholder="Filter tablets"
+                    value={filter}
+                />
+                <Button disabled={!filter} onClick={() => setFilter('')} secondary>
+                    Clear filters
+                </Button>
+            </div>
             <DataTable
-                columns={['Cluster', 'Keyspace', 'Shard', 'Alias', 'Hostname', 'Type', 'State']}
-                data={rows}
+                columns={['Cluster', 'Keyspace', 'Shard', 'Type', 'State', 'Alias', 'Hostname']}
+                data={filteredData}
                 renderRows={renderRows}
             />
         </div>
@@ -61,6 +98,13 @@ const TABLET_TYPES = Object.keys(topodata.TabletType);
 const formatAlias = (t: pb.Tablet) =>
     t.tablet?.alias?.cell && t.tablet?.alias?.uid && `${t.tablet.alias.cell}-${t.tablet.alias.uid}`;
 
-const formatType = (t: pb.Tablet) => t.tablet?.type && TABLET_TYPES[t.tablet?.type];
+const formatType = (t: pb.Tablet) => {
+    return t.tablet?.type && TABLET_TYPES[t.tablet?.type];
+};
+
+const formatDisplayType = (t: pb.Tablet) => {
+    const tt = formatType(t);
+    return tt === 'MASTER' ? 'PRIMARY' : tt;
+};
 
 const formatState = (t: pb.Tablet) => t.state && SERVING_STATES[t.state];

web/vtadmin/src/util/filterNouns.test.ts

@@ -0,0 +1,73 @@
+import { filterNouns } from './filterNouns';
+
+describe('filterNouns', () => {
+    const tests: {
+        name: string;
+        needle: string;
+        haystack: any[];
+        expected: any[];
+    }[] = [
+        {
+            name: 'it returns the haystack for an empty needle',
+            needle: '',
+            haystack: [{ goodnight: 'moon' }, { goodnight: 'stars' }],
+            expected: [{ goodnight: 'moon' }, { goodnight: 'stars' }],
+        },
+        {
+            name: 'it combines phrases and non-phrases',
+            needle: '"astronomy" moon',
+            haystack: [
+                { keyspace: 'astronomy', name: 'moon' },
+                { keyspace: 'astronomy', name: 'moonbeam' },
+                { keyspace: 'gastronomy', name: 'mooncake' },
+            ],
+            expected: [
+                { keyspace: 'astronomy', name: 'moon' },
+                { keyspace: 'astronomy', name: 'moonbeam' },
+            ],
+        },
+        {
+            name: 'it matches key/values with the same key additively',
+            needle: 'hello:world hello:sun',
+            haystack: [{ hello: 'world' }, { hello: 'moon' }, { hello: 'sun' }],
+            expected: [{ hello: 'world' }, { hello: 'sun' }],
+        },
+        {
+            name: 'it matches key/values with different keys subtractively',
+            needle: 'hello:sun goodbye:moon',
+            haystack: [
+                { hello: 'sun', goodbye: 'stars' },
+                { hello: 'sun', goodbye: 'moon' },
+                { hello: 'stars', goodbye: 'moon' },
+            ],
+            expected: [{ hello: 'sun', goodbye: 'moon' }],
+        },
+        {
+            name: 'it omits nouns with empty values for a specified key',
+            needle: 'goodbye:moon',
+            haystack: [{ hello: 'sun', goodbye: 'moon' }, { hello: 'stars' }],
+            expected: [{ hello: 'sun', goodbye: 'moon' }],
+        },
+        {
+            name: 'it matches queries with multiple key/value tokens and also a fuzzy string for good measure',
+            needle: 'cluster:cluster-1 keyspace:customers keyspace:commerce re',
+            haystack: [
+                { cluster: 'cluster-2', keyspace: 'customers', type: 'replica' },
+                { cluster: 'cluster-1', keyspace: 'customers', type: 'readonly' },
+                { cluster: 'cluster-1', keyspace: 'customers', type: 'primary' },
+                { cluster: 'cluster-1', keyspace: 'loadtest', type: 'replica' },
+                { cluster: 'cluster-1', keyspace: 'commerce', type: 'replica' },
+                { cluster: 'cluster-1', keyspace: 'commerce', type: 'primary' },
+            ],
+            expected: [
+                { cluster: 'cluster-1', keyspace: 'customers', type: 'readonly' },
+                { cluster: 'cluster-1', keyspace: 'commerce', type: 'replica' },
+            ],
+        },
+    ];
+
+    test.each(tests.map(Object.values))('%s', (name: string, needle: string, haystack: any[], expected: any[]) => {
+        const result = filterNouns(needle, haystack);
+        expect(result).toEqual(expected);
+    });
+});

web/vtadmin/src/util/filterNouns.ts

@@ -0,0 +1,71 @@
+/**
+ * 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 { partition } from 'lodash-es';
+import { KeyValueSearchToken, SearchTokenTypes, tokenizeSearch } from './tokenize';
+
+/**
+ * `filterNouns` filters a list of nouns by a search string.
+ */
+export const filterNouns = <T extends { [k: string]: any }>(needle: string, haystack: T[]): T[] => {
+    if (!needle) return haystack;
+
+    const tokens = tokenizeSearch(needle);
+
+    // Separate key/value tokens (which can be additive or subtractive depending on whether the
+    // key is the same) vs. other tokens (e.g., fuzzy/exact string filters, which are always additive).
+    const [kvTokens, otherTokens] = partition(tokens, (t) => t.type === SearchTokenTypes.KEY_VALUE);
+
+    // This assumes that values are ALWAYS exact matches.
+    const kvMap = (kvTokens as KeyValueSearchToken[]).reduce((acc, t) => {
+        if (!(t.key in acc)) acc[t.key] = [];
+        acc[t.key].push(t.value.toLowerCase());
+        return acc;
+    }, {} as { [key: string]: string[] });
+
+    // Filter out key/value tokens first
+    const results = haystack.filter((noun: T) => {
+        // Every specified key must map to a matching value for at least one property
+        return Object.entries(kvMap).every(([k, vs]) => {
+            const nv = noun[k];
+            if (!nv) return false;
+
+            // Key/value matches always use an exact (never fuzzy),
+            // case insensitive match
+            return vs.indexOf(nv.toLowerCase()) >= 0;
+        });
+    });
+
+    return otherTokens.reduce((acc, token) => {
+        switch (token.type) {
+            case SearchTokenTypes.EXACT:
+                const needle = token.value;
+                return acc.filter((o: T) => {
+                    return Object.values(o).some((val) => val === needle);
+                });
+            case SearchTokenTypes.FUZZY:
+                return acc.filter((o: T) => {
+                    return Object.values(o).some((val) => fuzzyCompare(token.value, `${val}`));
+                });
+            default:
+                return acc;
+        }
+    }, results as T[]);
+};
+
+const fuzzyCompare = (needle: string, haystack: string) => {
+    return `${haystack}`.toLowerCase().indexOf(needle.toLowerCase()) >= 0;
+};

web/vtadmin/src/util/tokenize.test.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { Token, tokenizeSearch, SearchToken } from './tokenize';
+
+describe('tokenize', () => {
+    describe('tokenizeSearch', () => {
+        const tests: {
+            name: string;
+            input: string;
+            expected: SearchToken[];
+        }[] = [
+            {
+                name: 'parses fuzzy strings',
+                input: 'hello',
+                expected: [{ type: 'fuzzy', value: 'hello' }],
+            },
+            {
+                name: 'parses exact strings',
+                input: '"hello"',
+                expected: [{ type: 'exact', value: 'hello' }],
+            },
+            {
+                name: 'parses key/values',
+                input: 'hello:moon',
+                expected: [{ type: 'keyValue', key: 'hello', value: 'moon' }],
+            },
+            {
+                name: 'parses multiple tokens',
+                input: 'hello "moon" goodbye:world',
+                expected: [
+                    { type: 'fuzzy', value: 'hello' },
+                    { type: 'exact', value: 'moon' },
+                    { type: 'keyValue', key: 'goodbye', value: 'world' },
+                ],
+            },
+            {
+                name: 'parses numbers and symbols',
+                input: 'hello-123 "moon-456" goodbye:world-789',
+                expected: [
+                    { type: 'fuzzy', value: 'hello-123' },
+                    { type: 'exact', value: 'moon-456' },
+                    { type: 'keyValue', key: 'goodbye', value: 'world-789' },
+                ],
+            },
+        ];
+
+        test.each(tests.map(Object.values))('%s', (name: string, input: string, expected: Token[]) => {
+            const result = tokenizeSearch(input);
+            expect(result).toEqual(expected);
+        });
+    });
+});