Merge pull request #255 from jtomasek/search-by-name-id

MGMT-2423 Add ability to search clusters by name, id or base domain
openshift-assisted · Oct 14, 2020 · fa3583b · fa3583b
2 parents c3b5fef + 1ec10cb
commit fa3583b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 33 deletions.
diff --git a/src/components/clusters/ClustersFilterToolbar.tsx b/src/components/clusters/ClustersFilterToolbar.tsx
@@ -4,8 +4,6 @@ import {
   ToolbarItem,
   ToolbarContent,
   ToolbarFilter,
-  Button,
-  ButtonVariant,
   InputGroup,
   Select,
   SelectOption,
@@ -15,7 +13,7 @@ import {
   SelectProps,
   TextInputProps,
 } from '@patternfly/react-core';
-import { SearchIcon, FilterIcon } from '@patternfly/react-icons';
+import { FilterIcon } from '@patternfly/react-icons';
 import { Cluster } from '../../api/types';
 import { CLUSTER_STATUS_LABELS } from '../../config';
 
@@ -24,15 +22,15 @@ export type ClusterFiltersType = {
 };
 
 type ClustersFilterToolbarProps = {
-  searchName: string;
-  setSearchName: (value: string) => void;
+  searchString: string;
+  setSearchString: (value: string) => void;
   filters: ClusterFiltersType;
   setFilters: (filters: ClusterFiltersType) => void;
 };
 
 const ClustersFilterToolbar: React.FC<ClustersFilterToolbarProps> = ({
-  searchName,
-  setSearchName,
+  searchString,
+  setSearchString,
   filters,
   setFilters,
 }) => {
@@ -44,7 +42,7 @@ const ClustersFilterToolbar: React.FC<ClustersFilterToolbarProps> = ({
     });
   };
 
-  const onSearchNameChanged: TextInputProps['onChange'] = setSearchName;
+  const onSearchNameChanged: TextInputProps['onChange'] = setSearchString;
 
   const onSelect = (type: string, isChecked: boolean, value: Cluster['status']) => {
     setFilters({
@@ -94,6 +92,20 @@ const ClustersFilterToolbar: React.FC<ClustersFilterToolbarProps> = ({
       clearAllFilters={onClearAllFilters}
     >
       <ToolbarContent>
+        <ToolbarItem>
+          <InputGroup>
+            <TextInput
+              name="search-string"
+              id="search-string"
+              type="search"
+              aria-label="string to be searched in cluster names or ids"
+              onChange={onSearchNameChanged}
+              value={searchString}
+              placeholder="Search by Name, ID or Base domain"
+              title="Search by Name, ID or Base domain"
+            />
+          </InputGroup>
+        </ToolbarItem>
         <ToolbarFilter
           chips={filters.status}
           deleteChip={onDeleteChip}
@@ -114,23 +126,6 @@ const ClustersFilterToolbar: React.FC<ClustersFilterToolbarProps> = ({
             ))}
           </Select>
         </ToolbarFilter>
-
-        <ToolbarItem>
-          <InputGroup>
-            <TextInput
-              name="search-name"
-              id="search-name"
-              type="search"
-              aria-label="cluster name to be searched"
-              onChange={onSearchNameChanged}
-              value={searchName}
-              placeholder="Filter by name ..."
-            />
-            <Button variant={ButtonVariant.control} aria-label="search cluster name button">
-              <SearchIcon />
-            </Button>
-          </InputGroup>
-        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );

diff --git a/src/components/clusters/ClustersTable.tsx b/src/components/clusters/ClustersTable.tsx
@@ -62,7 +62,7 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
     direction: SortByDirection.asc,
   });
 
-  const [searchName, setSearchName] = React.useState('');
+  const [searchString, setSearchString] = React.useState('');
   const [filters, setFilters] = React.useState<ClusterFiltersType>({
     status: [],
   });
@@ -74,7 +74,7 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
         const parsed = JSON.parse(marshalled);
         parsed.filters && setFilters(parsed.filters);
         parsed.sortBy && setSortBy(parsed.sortBy);
-        parsed.searchName && setSearchName(parsed.searchName);
+        parsed.searchString && setSearchString(parsed.searchString);
       } catch (e) {
         console.info('Failed to restore clusters filter: ', e);
       }
@@ -84,9 +84,9 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
   React.useEffect(() => {
     window.sessionStorage.setItem(
       STORAGE_KEY_CLUSTERS_FILTER,
-      JSON.stringify({ filters, sortBy, searchName }),
+      JSON.stringify({ filters, sortBy, searchString }),
     );
-  }, [filters, sortBy, searchName]);
+  }, [filters, sortBy, searchString]);
 
   const actionResolver: IActionsResolver = React.useCallback(
     (rowData) => [
@@ -115,7 +115,15 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
 
   const rowFilter = React.useCallback(
     (row: IRow) => {
-      if (searchName && !(row.props.name || '').toLowerCase().includes(searchName.toLowerCase())) {
+      const searchableProps: string[] = [
+        row.props.name,
+        row.props.id,
+        row.props.baseDnsDomain,
+      ].map((prop) => (prop || '').toLowerCase());
+      if (
+        searchString &&
+        !searchableProps.find((prop) => prop.includes(searchString.toLowerCase()))
+      ) {
         return false;
       }
 
@@ -126,7 +134,7 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
 
       return true;
     },
-    [searchName, filters],
+    [searchString, filters],
   );
 
   const sortedRows = React.useMemo(() => {
@@ -143,8 +151,8 @@ const ClustersTable: React.FC<ClustersTableProps> = ({ rows, deleteCluster }) =>
   return (
     <>
       <ClustersFilterToolbar
-        searchName={searchName}
-        setSearchName={setSearchName}
+        searchString={searchString}
+        setSearchString={setSearchString}
         filters={filters}
         setFilters={setFilters}
       />

diff --git a/src/selectors/clusters.tsx b/src/selectors/clusters.tsx
@@ -52,6 +52,7 @@ const clusterToClusterTableRow = (cluster: Cluster): IRow => {
     props: {
       name,
       id,
+      baseDnsDomain,
     },
   };
 };