feat: display probe metadata and allow to filter by it

grafana · Oct 31, 2024 · 32e4775 · 32e4775
1 parent c4a5d42
commit 32e4775
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/src/components/CheckEditor/CheckProbes/ProbesFilter.tsx b/src/components/CheckEditor/CheckProbes/ProbesFilter.tsx
@@ -12,15 +12,26 @@ export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch:
     const searchValue = event.target.value.toLowerCase();
 
     const filteredProbes = probes.filter(
-      (probe) => probe.region.toLowerCase().includes(searchValue) || probe.name.toLowerCase().includes(searchValue)
+      (probe) =>
+        probe.region.toLowerCase().includes(searchValue) ||
+        probe.name.toLowerCase().includes(searchValue) ||
+        probe.longRegion?.toLowerCase().includes(searchValue) ||
+        probe.city?.toLowerCase().includes(searchValue) ||
+        probe.provider?.toLowerCase().includes(searchValue) ||
+        probe.country?.toLowerCase().includes(searchValue) ||
+        probe.countryCode?.toLowerCase().includes(searchValue)
     );
 
     onSearch(filteredProbes);
   };
 
   return (
     <div className={styles.searchInput}>
-      <Input prefix={<Icon name="search" />} placeholder="Find a probe by city or region" onChange={handleSearch} />
+      <Input
+        prefix={<Icon name="search" />}
+        placeholder="Find a probe by city, country, region or provider"
+        onChange={handleSearch}
+      />
     </div>
   );
 };

diff --git a/src/components/CheckEditor/CheckProbes/ProbesList.tsx b/src/components/CheckEditor/CheckProbes/ProbesList.tsx
@@ -51,7 +51,7 @@ export const ProbesList = ({
       <div className={styles.sectionHeader}>
         <Checkbox id={`header-${title}`} onClick={handleToggleAll} checked={allProbesSelected} />
         <Label htmlFor={`header-${title}`} className={styles.headerLabel}>
-          {title} ({probes.length})
+          {`${title} (${probes.length})`}
         </Label>
       </div>
       <div className={styles.probesList}>
@@ -63,7 +63,10 @@ export const ProbesList = ({
               checked={selectedProbes.includes(probe.id as number)}
             />
             <Label htmlFor={`probe-${probe.id}`} className={styles.columnLabel}>
-              <ProbeStatus probe={probe} /> {probe.name}
+              <ProbeStatus probe={probe} />{' '}
+              {`${probe.name}${probe.countryCode ? `, ${probe.countryCode}` : ''} ${
+                probe.provider ? `(${probe.provider})` : ''
+              }`}
             </Label>
           </div>
         ))}

diff --git a/src/components/CheckEditor/ProbeOptions.tsx b/src/components/CheckEditor/ProbeOptions.tsx
@@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { Field } from '@grafana/ui';
 
 import { CheckFormValues, CheckType, Probe } from 'types';
-import { useProbes } from 'data/useProbes';
+import { useProbesWithMetadata } from 'data/useProbes';
 import { SliderInput } from 'components/SliderInput';
 
 import { CheckProbes } from './CheckProbes/CheckProbes';
@@ -14,7 +14,7 @@ interface ProbeOptionsProps {
 }
 
 export const ProbeOptions = ({ checkType, disabled }: ProbeOptionsProps) => {
-  const { data: probes = [] } = useProbes();
+  const { data: probes = [] } = useProbesWithMetadata();
   const {
     control,
     formState: { errors },

diff --git a/src/data/useProbes.ts b/src/data/useProbes.ts
@@ -10,11 +10,13 @@ import type {
   AddProbeResult,
   DeleteProbeError,
   DeleteProbeResult,
+  ListProbeResult,
   ResetProbeTokenResult,
   UpdateProbeResult,
 } from 'datasource/responses.types';
 import { queryClient } from 'data/queryClient';
 import { useSMDS } from 'hooks/useSMDS';
+import { PROBES_METADATA } from 'components/CheckEditor/ProbesMetadata';
 
 import { useChecks } from './useChecks';
 
@@ -35,6 +37,25 @@ export function useProbes() {
   return useQuery(probesQuery(smDS));
 }
 
+export function useProbesWithMetadata() {
+  const { data: probes = [], isLoading } = useProbes();
+
+  const probesWithMetadata = useMemo<ListProbeResult>(() => {
+    if (isLoading) {
+      return [];
+    }
+
+    return probes.map((probe) => {
+      const metadata = PROBES_METADATA.find(
+        (info) => info.name === probe.name && info.region === probe.region
+      );
+      return metadata ? { ...probe, ...metadata } : probe;
+    });
+  }, [probes, isLoading]);
+
+  return { data: probesWithMetadata, isLoading };
+}
+
 export function useExtendedProbes(): [ExtendedProbe[], boolean] {
   const { data: probes = [], isLoading: isLoadingProbes } = useProbes();
   const { data: checks = [], isLoading: isLoadingChecks } = useChecks();