added Dropdown to filter peers by type

PeerDB-io · Nov 30, 2023 · 9ae83a1 · 9ae83a1
1 parent ab3ec4c
commit 9ae83a1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/ui/app/peers/peersTable.tsx b/ui/app/peers/peersTable.tsx
@@ -1,12 +1,13 @@
 'use client';
 import { DropDialog } from '@/components/DropDialog';
 import PeerButton from '@/components/PeerComponent';
-import PeerTypeLabel from '@/components/PeerTypeComponent';
-import { Peer } from '@/grpc_generated/peers';
+import PeerTypeLabel, { DBTypeToGoodText } from '@/components/PeerTypeComponent';
+import { DBType, Peer } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import { useMemo, useState } from 'react';
+import ReactSelect from 'react-select';
 
 function PeerRow({ peer }: { peer: Peer }) {
   return (
@@ -31,26 +32,38 @@ function PeerRow({ peer }: { peer: Peer }) {
 
 function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
   const [searchQuery, setSearchQuery] = useState<string>('');
+  const [filteredType, setFilteredType] = useState<DBType | undefined>(undefined);
   const rows = useMemo(
     () =>
       peers.filter((peer) => {
         return peer.name.toLowerCase().includes(searchQuery.toLowerCase());
+      }).filter((peer) => {
+        return (filteredType == undefined) || (peer.type == filteredType);
       }),
-    [peers, searchQuery]
+    [peers, searchQuery, filteredType]
   );
+  const allTypesOption: { value: DBType | undefined; label: string; } = { value: undefined, label: 'All' };
+  const availableTypes: { value: DBType | undefined; label: string; }[] = [...new Set(peers.flatMap((peer) => {
+    return { value: peer.type, label: DBTypeToGoodText(peer.type) };
+  }))];
+  availableTypes.unshift(allTypesOption);
 
   return (
     <Table
       title={<Label variant='headline'>{title}</Label>}
       toolbar={{
         left: <></>,
         right: (
-          <SearchField
-            placeholder='Search by peer name'
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setSearchQuery(e.target.value)
-            }
-          />
+          <>
+            <ReactSelect
+              options={availableTypes}
+              onChange={(val, _) => {
+                setFilteredType(val?.value);
+              }}
+              defaultValue={allTypesOption}
+            /><SearchField
+              placeholder='Search by peer name'
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)} /></>
         ),
       }}
       header={

diff --git a/ui/components/PeerTypeComponent.tsx b/ui/components/PeerTypeComponent.tsx
@@ -4,7 +4,7 @@ import { Label } from '@/lib/Label';
 import Image from 'next/image';
 import { DBTypeToImageMapping } from './PeerComponent';
 
-const DBTypeToGoodText = (ptype: DBType) => {
+export const DBTypeToGoodText = (ptype: DBType) => {
   switch (ptype) {
     case DBType.POSTGRES:
       return 'PostgreSQL';

diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,