feat(Topology): ✨ Add search bar for filter addresses

skupperproject · Jul 24, 2023 · a713008 · a713008
1 parent 89335f3
commit a713008
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 13 deletions.
diff --git a/src/App.css b/src/App.css
@@ -100,14 +100,10 @@ html {
 }
 
 .pf-c-page__sidebar.pf-m-collapsed {
-  transition: max-width 0.15s ease-in-out;
+  transition: max-width 0.2s ease-in-out;
 }
 
 .pf-c-page__sidebar.pf-m-expanded {
-  transition: max-width 0.15s ease-in-out;
+  transition: max-width 0.2s ease-in-out;
   max-width: 100%;
 }
-
-.sk-divider {
-  background-color: var(--pf-global--palette--black-300);
-}
diff --git a/src/core/components/Graph/config.ts b/src/core/components/Graph/config.ts
@@ -157,7 +157,7 @@ export const DEFAULT_COMBO_CONFIG: Partial<{
     lineWidth: 4,
     fill: COMBO__COLOR_DEFAULT,
     stroke: COMBO_BORDER_COLOR_DEFAULT,
-    radius: 50
+    radius: 30
   },
 
   labelCfg: {

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,11 +5,22 @@ import App from 'App';
 
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/patternfly/components/Button/button.css';
-import '@patternfly/patternfly/components/Toolbar/toolbar.css';
+import '@patternfly/patternfly/components/Card/card.css';
+import '@patternfly/patternfly/components/Divider/divider.css';
+import '@patternfly/patternfly/components/Form/form.css';
+import '@patternfly/patternfly/components/FormControl/form-control.css';
 import '@patternfly/patternfly/components/Nav/nav.css';
 import '@patternfly/patternfly/components/Page/page.css';
-import '@patternfly/patternfly/components/Tooltip/tooltip.css';
+import '@patternfly/patternfly/components/Pagination/pagination.css';
+import '@patternfly/patternfly/components/Panel/panel.css';
+import '@patternfly/patternfly/components/Select/select.css';
+import '@patternfly/patternfly/components/SearchInput/search-input.css';
+import '@patternfly/patternfly/components/Sidebar/sidebar.css';
 import '@patternfly/patternfly/components/Table/table.css';
+import '@patternfly/patternfly/components/Tabs/tabs.css';
+import '@patternfly/patternfly/components/Toolbar/toolbar.css';
+import '@patternfly/patternfly/components/Tooltip/tooltip.css';
+import '@patternfly/patternfly/components/Truncate/truncate.css';
 
 import './App.css';
 

diff --git a/src/pages/Topology/Topology.enum.ts b/src/pages/Topology/Topology.enum.ts
@@ -27,7 +27,9 @@ export enum TopologyLabels {
   CheckboxShowSite = 'Sites',
   RotateLabel = 'Rotate',
   CheckboxShowLabel = 'Metrics',
-  CheckboxShowLabelReverse = 'Reverse metrics'
+  CheckboxShowLabelReverse = 'Reverse metrics',
+  AddressFilterPlaceholderText = 'Search for Address',
+  DisplayPlaceholderText = 'Display'
 }
 
 export enum TopologyURLFilters {

diff --git a/src/pages/Topology/components/TopologyProcesses.tsx b/src/pages/Topology/components/TopologyProcesses.tsx
@@ -44,6 +44,7 @@ const DEFAULT_DISPLAY_OPTIONS_ENABLED = [SHOW_SITE_KEY];
 
 const ROTATE_LINK_LABEL = 'show-link-label-rotated';
 const FIT_SCREEN_CACHE_KEY = 'process-fitScreen';
+const FILTER_BY_ADDRESS_MAX_HEIGHT = 400;
 
 const externalProcessesQueryParams = {
   processRole: 'external'
@@ -212,6 +213,21 @@ const TopologyProcesses: FC<{ addressId?: string | null; id: string | undefined
     setSearchParams(params);
   }
 
+  function handleFilterAddress(_: ChangeEvent<HTMLInputElement> | null, value: string) {
+    const options = getOptions();
+    if (!value) {
+      return options;
+    }
+
+    return options
+      .filter((element) =>
+        element.props.children
+          ? element.props.children.toString().toLowerCase().includes(value.toLowerCase())
+          : undefined
+      )
+      .filter(Boolean);
+  }
+
   const handleSelectDisplay = useCallback(
     (_: MouseEvent | ChangeEvent, selection: string | SelectOptionObject) => {
       const selected = selection as string;
@@ -422,6 +438,10 @@ const TopologyProcesses: FC<{ addressId?: string | null; id: string | undefined
                 onSelect={handleSelectAddress}
                 onToggle={handleToggleAddressMenu}
                 selections={addressIdSelected}
+                hasInlineFilter
+                inlineFilterPlaceholderText={TopologyLabels.AddressFilterPlaceholderText}
+                onFilter={handleFilterAddress}
+                maxHeight={FILTER_BY_ADDRESS_MAX_HEIGHT}
               >
                 {getOptions()}
               </Select>
@@ -434,7 +454,7 @@ const TopologyProcesses: FC<{ addressId?: string | null; id: string | undefined
                 onSelect={handleSelectDisplay}
                 onToggle={handleToggleDisplayMenu}
                 selections={displayOptionsSelected}
-                placeholderText="Display"
+                placeholderText={TopologyLabels.DisplayPlaceholderText}
                 isCheckboxSelectionBadgeHidden
               >
                 {getDisplayOptions()}

diff --git a/src/pages/shared/Metrics/RequestCharts.tsx b/src/pages/shared/Metrics/RequestCharts.tsx
@@ -25,7 +25,7 @@ const RequestCharts: FC<{
       />
     </FlexItem>
 
-    <Divider orientation={{ default: 'vertical' }} className="sk-divider" />
+    <Divider orientation={{ default: 'vertical' }} />
     {/*  Partial total request card*/}
     <Flex
       flex={{ default: 'flex_1' }}
@@ -39,7 +39,7 @@ const RequestCharts: FC<{
         </Bullseye>
       </FlexItem>
 
-      <Divider className="sk-divider" />
+      <Divider />
 
       {/*  avg request per second card*/}
       <FlexItem flex={{ default: 'flex_1' }}>