feat: add resource filter options to package revision page (#137)

This change adds resource filtering options to the Package Revision page.
GoogleContainerTools · Sep 14, 2022 · cd42f9d · cd42f9d
1 parent 9dd80f8
commit cd42f9d
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 29 deletions.
diff --git a/plugins/cad/src/components/PackageRevisionPage/components/PackageResourcesList.tsx b/plugins/cad/src/components/PackageRevisionPage/components/PackageResourcesList.tsx
@@ -37,6 +37,7 @@ type PackageResourcesListProps = {
   resourcesMap: PackageRevisionResourcesMap;
   baseResourcesMap?: PackageRevisionResourcesMap;
   onUpdatedResourcesMap: (resourcesMap: PackageRevisionResourcesMap) => void;
+  resourceFilter: PackageResourceFilter;
   mode: PackageRevisionPageMode;
 };
 
@@ -47,6 +48,10 @@ export type ResourceRow = PackageResource & {
   currentResource?: PackageResource;
 };
 
+export type PackageResourceFilter = (
+  packageResource: PackageResource,
+) => boolean;
+
 const sortResources = (allResources: ResourceRow[]): void => {
   allResources.sort((resource1, resource2) => {
     const resourceScore = (resource: ResourceRow): number => {
@@ -141,13 +146,17 @@ export const PackageResourcesList = ({
   resourcesMap,
   baseResourcesMap,
   onUpdatedResourcesMap,
+  resourceFilter,
   mode,
 }: PackageResourcesListProps) => {
   const classes = useStyles();
 
-  const packageResources = getPackageResourcesFromResourcesMap(
-    resourcesMap,
-  ) as ResourceRow[];
+  const getPackageResources = (
+    map: PackageRevisionResourcesMap,
+  ): PackageResource[] =>
+    getPackageResourcesFromResourcesMap(map).filter(resourceFilter);
+
+  const packageResources = getPackageResources(resourcesMap) as ResourceRow[];
 
   const allResources: ResourceRow[] = packageResources.map(resource => ({
     ...resource,
@@ -157,7 +166,7 @@ export const PackageResourcesList = ({
   sortResources(allResources);
 
   if (baseResourcesMap) {
-    const baseResources = getPackageResourcesFromResourcesMap(baseResourcesMap);
+    const baseResources = getPackageResources(baseResourcesMap);
 
     addDiffDetails(allResources, baseResources);
   }

diff --git a/plugins/cad/src/components/PackageRevisionPage/components/ResourcesTabContent.tsx b/plugins/cad/src/components/PackageRevisionPage/components/ResourcesTabContent.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { Card, CardContent, makeStyles, TextField } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { PackageRevisionLifecycle } from '../../../types/PackageRevision';
 import { PackageRevisionResourcesMap } from '../../../types/PackageRevisionResource';
 import {
@@ -26,7 +26,10 @@ import {
 import { RevisionSummary } from '../../../utils/revisionSummary';
 import { Select } from '../../Controls';
 import { PackageRevisionPageMode } from '../PackageRevisionPage';
-import { PackageResourcesList } from './PackageResourcesList';
+import {
+  PackageResourceFilter,
+  PackageResourcesList,
+} from './PackageResourcesList';
 
 export type AlertMessage = {
   key: string;
@@ -49,9 +52,21 @@ type DiffSelectItem = {
   resourcesMap: PackageRevisionResourcesMap;
 };
 
+type ResourceFilterSelectItem = {
+  value: string;
+  label: string;
+  filter?: PackageResourceFilter;
+};
+
 const useStyles = makeStyles({
-  alert: {
-    marginBottom: '16px',
+  root: {
+    '& > *:not(:last-child)': {
+      marginBottom: '16px',
+    },
+  },
+  resourceViewOptions: {
+    display: 'flex',
+    gap: '16px',
   },
 });
 
@@ -61,6 +76,23 @@ const HIDE_COMPARISON_SELECT_ITEM: DiffSelectItem = {
   resourcesMap: {},
 };
 
+const RESOURCE_FILTER_OPTIONS: ResourceFilterSelectItem[] = [
+  {
+    label: 'Show all resources',
+    value: 'all-resources',
+  },
+  {
+    label: 'Show deployable resources only',
+    value: 'show-deployable-resources',
+    filter: r => !r.isLocalConfigResource,
+  },
+  {
+    label: 'Show local config resources only',
+    value: 'show-local-config-resources',
+    filter: r => r.isLocalConfigResource,
+  },
+];
+
 export const ResourcesTabContent = ({
   packageName,
   resourcesMap,
@@ -78,11 +110,29 @@ export const ResourcesTabContent = ({
   const [diffSelection, setDiffSelection] = useState<DiffSelectItem>(
     HIDE_COMPARISON_SELECT_ITEM,
   );
+  const [searchString, setSearchString] = useState<string>('');
+  const [filterSelection, setFilterSelection] = useState<string>(
+    RESOURCE_FILTER_OPTIONS[0].value,
+  );
   const [baseResourcesMap, setBaseResourcesMap] =
     useState<PackageRevisionResourcesMap>();
 
   const lastPackageRevisionNameDiffSet = useRef<string>('');
 
+  const resourceFilter = useMemo<PackageResourceFilter>(() => {
+    const filterQuery: PackageResourceFilter =
+      RESOURCE_FILTER_OPTIONS.find(option => option.value === filterSelection)
+        ?.filter ?? (() => true);
+    const searchQuery: PackageResourceFilter =
+      searchString.length > 0
+        ? resource =>
+            resource.yaml.toLowerCase().includes(searchString.toLowerCase())
+        : () => true;
+
+    return packageResource =>
+      filterQuery(packageResource) && searchQuery(packageResource);
+  }, [filterSelection, searchString]);
+
   useEffect(() => {
     const packageRevisions = revisions.map(r => r.revision);
     const packageRevision = getPackageRevision(packageRevisions, packageName);
@@ -149,37 +199,56 @@ export const ResourcesTabContent = ({
   }, [diffSelection]);
 
   return (
-    <Fragment>
+    <div className={classes.root}>
       <Fragment>
         {alertMessages.map(alertMessage => (
-          <Alert
-            className={classes.alert}
-            severity="info"
-            key={`alert-${alertMessage.key}`}
-          >
+          <Alert severity="info" key={`alert-${alertMessage.key}`}>
             {alertMessage.message}
           </Alert>
         ))}
       </Fragment>
+
+      <Card>
+        <CardContent>
+          <div className={classes.resourceViewOptions}>
+            <TextField
+              label="Search"
+              variant="outlined"
+              value={searchString}
+              onChange={e => setSearchString(e.target.value)}
+              fullWidth
+            />
+
+            <Select
+              label="Resources Filter"
+              onChange={value => setFilterSelection(value)}
+              selected={filterSelection}
+              items={RESOURCE_FILTER_OPTIONS}
+            />
+
+            <Select
+              label="Compare Revision"
+              onChange={value =>
+                setDiffSelection(
+                  selectDiffItems.find(
+                    selectItem => selectItem.value === value,
+                  ) as DiffSelectItem,
+                )
+              }
+              selected={diffSelection.value}
+              items={selectDiffItems}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
       <PackageResourcesList
         resourcesMap={resourcesMap}
         baseResourcesMap={baseResourcesMap}
         mode={mode}
+        resourceFilter={resourceFilter}
         onUpdatedResourcesMap={onUpdatedResourcesMap}
       />
-      <Select
-        label="Compare Revision"
-        onChange={value =>
-          setDiffSelection(
-            selectDiffItems.find(
-              selectItem => selectItem.value === value,
-            ) as DiffSelectItem,
-          )
-        }
-        selected={diffSelection.value}
-        items={selectDiffItems}
-        helperText="Compare revision to a previous revision or upstream blueprint."
-      />
-    </Fragment>
+    </div>
   );
 };