added Dropdown to filter peers by type (#742)

PeerDB-io · Nov 30, 2023 · 505e524 · 505e524
1 parent ab3ec4c
commit 505e524
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/ui/app/peers/peersTable.tsx b/ui/app/peers/peersTable.tsx
@@ -1,12 +1,15 @@
 '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 +34,56 @@ 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());
-      }),
-    [peers, searchQuery]
+      peers
+        .filter((peer) => {
+          return peer.name.toLowerCase().includes(searchQuery.toLowerCase());
+        })
+        .filter((peer) => {
+          return filteredType == undefined || peer.type == filteredType;
+        }),
+    [peers, searchQuery, filteredType]
   );
+  const allTypesOption: { value: DBType | undefined; label: string } = {
+    value: undefined,
+    label: 'All',
+  };
+  const availableTypes: { value: DBType | undefined; label: string }[] =
+    Array.from(
+      new Map( // Map filters out duplicates
+        peers.flatMap((peer) => [
+          [peer.type, { value: peer.type, label: DBTypeToGoodText(peer.type) }],
+        ])
+      ).values()
+    );
+  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
+              className='w-48'
+              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';
@@ -13,7 +13,7 @@ const DBTypeToGoodText = (ptype: DBType) => {
     case DBType.EVENTHUB:
       return 'Event Hubs';
     case DBType.EVENTHUB_GROUP:
-      return 'Event Hubs';
+      return 'Event Hubs (Group)';
     case DBType.BIGQUERY:
       return 'BigQuery';
     case DBType.S3:

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,