Merge pull request #110 from mgalesloot/flux-namespace-filter

flux: global namespace filter for HelmReleases and Kustomizations

Author: ashu8912

flux/src/helm-releases/HelmReleaseList.tsx

@@ -1,5 +1,10 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import { Loader, SectionBox } from '@kinvolk/headlamp-plugin/lib/components/common';
+import {
+  Loader,
+  SectionBox,
+  SectionFilterHeader,
+} from '@kinvolk/headlamp-plugin/lib/components/common';
+import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Link as MuiLink } from '@mui/material';
 import React from 'react';
 import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
@@ -52,10 +57,11 @@ function HelmReleasesList({ resourceClass }) {
   const [resource] = resourceClass.useList();
 
   return (
-    <SectionBox title={'Helm Releases'}>
+    <SectionBox title={<SectionFilterHeader title="Helm Releases" />}>
       <Table
         data={resource}
         defaultSortingColumn={2}
+        filterFunction={useFilterFunc()}
         columns={['name', 'namespace', 'status', 'source', 'revision', 'message', 'lastUpdated']}
       />
     </SectionBox>

flux/src/image-automation/ImageAutomationList.tsx

@@ -4,9 +4,11 @@ import {
   Link,
   Loader,
   SectionBox,
+  SectionFilterHeader,
   ShowHideLabel,
 } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
+import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Link as MuiLink } from '@mui/material';
 import React from 'react';
 import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
@@ -135,6 +137,7 @@ function ImageUpdateAutomationList(props: { resourceClass: KubeObject }) {
             },
             'age',
           ]}
+          filterFunction={useFilterFunc()}
         />
       </SectionBox>
     </>
@@ -173,6 +176,7 @@ function ImagePolicyList(props: { resourceClass: KubeObject }) {
           },
           'age',
         ]}
+        filterFunction={useFilterFunc()}
       />
     </SectionBox>
   );
@@ -183,7 +187,7 @@ function ImageRepositoryList(props: { resourceClass: KubeObject }) {
   const [imageRepositories] = resourceClass?.useList();
 
   return (
-    <SectionBox title="Image Repositories">
+    <SectionBox title={<SectionFilterHeader title="Image Repositories" />}>
       <Table
         data={imageRepositories}
         columns={[
@@ -234,6 +238,7 @@ function ImageRepositoryList(props: { resourceClass: KubeObject }) {
           },
           'age',
         ]}
+        filterFunction={useFilterFunc()}
       />
     </SectionBox>
   );

flux/src/kustomizations/KustomizationList.tsx

@@ -1,5 +1,10 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import { Loader, SectionBox } from '@kinvolk/headlamp-plugin/lib/components/common';
+import {
+  Loader,
+  SectionBox,
+  SectionFilterHeader,
+} from '@kinvolk/headlamp-plugin/lib/components/common';
+import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import MuiLink from '@mui/material/Link';
 import React from 'react';
 import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
@@ -55,10 +60,11 @@ function KustomizationList({ resourceClass }) {
   const [resource] = resourceClass.useList();
 
   return (
-    <SectionBox title={'Kustomizations'}>
+    <SectionBox title={<SectionFilterHeader title="Kustomizations" />}>
       <Table
         data={resource}
         defaultSortingColumn={2}
+        filterFunction={useFilterFunc()}
         columns={['name', 'namespace', 'status', 'source', 'revision', 'message', 'lastUpdated']}
       />
     </SectionBox>

flux/src/notifications/NotificationList.tsx

@@ -1,5 +1,11 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
-import { Link, Loader, SectionBox } from '@kinvolk/headlamp-plugin/lib/components/common';
+import {
+  Link,
+  Loader,
+  SectionBox,
+  SectionFilterHeader,
+} from '@kinvolk/headlamp-plugin/lib/components/common';
+import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import { Box, Link as MuiLink } from '@mui/material';
 import React from 'react';
 import CheckIfFluxInstalled, { useFluxControllerAvailableCheck } from '../checkflux';
@@ -70,7 +76,7 @@ function Alerts(props) {
   const { resourceClass } = props;
   const [alerts] = resourceClass?.useList();
   return (
-    <SectionBox title="Alerts">
+    <SectionBox title={<SectionFilterHeader title="Alerts" />}>
       <Table
         data={alerts}
         columns={[
@@ -123,6 +129,7 @@ function Alerts(props) {
             accessorFn: item => item?.jsonData?.spec.summary,
           },
         ]}
+        filterFunction={useFilterFunc()}
       />
     </SectionBox>
   );
@@ -201,6 +208,7 @@ function Providers(props) {
             accessorFn: item => item.jsonData.spec.proxy || '-',
           },
         ]}
+        filterFunction={useFilterFunc()}
       />
     </SectionBox>
   );
@@ -278,6 +286,7 @@ function Receivers(props) {
               ),
           },
         ]}
+        filterFunction={useFilterFunc()}
       />
     </SectionBox>
   );

flux/src/sources/SourceCustomResourceSingle.tsx

@@ -1,13 +1,14 @@
 import { Link, SectionBox } from '@kinvolk/headlamp-plugin/lib/components/common';
 import { KubeObject } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
 import { KubeCRD } from '@kinvolk/headlamp-plugin/lib/lib/k8s/crd';
+import { useFilterFunc } from '@kinvolk/headlamp-plugin/lib/Utils';
 import React from 'react';
 import SourceLink from '../common/Link';
 import Table, { TableProps } from '../common/Table';
 
 interface FluxSourceCustomResourceProps {
   crd: KubeCRD;
-  title?: string;
+  title?: string | JSX.Element;
 }
 
 export default function FluxSourceCustomResource(props: FluxSourceCustomResourceProps) {
@@ -31,7 +32,7 @@ export default function FluxSourceCustomResource(props: FluxSourceCustomResource
 
 interface FluxSourceCustomResourceRendererProps {
   resourceClass: KubeObject;
-  title: string;
+  title: string | JSX.Element;
   type: string;
 }
 
@@ -130,9 +131,15 @@ function FluxSourceCustomResourceRenderer(props: FluxSourceCustomResourceRendere
     });
   }
 
+  console.log(title);
   return (
     <SectionBox title={title}>
-      <Table data={resource} columns={columns} defaultSortingColumn={3} />
+      <Table
+        data={resource}
+        columns={columns}
+        defaultSortingColumn={3}
+        filterFunction={useFilterFunc()}
+      />
     </SectionBox>
   );
 }

flux/src/sources/SourceList.tsx

@@ -1,4 +1,5 @@
 import { K8s } from '@kinvolk/headlamp-plugin/lib';
+import { SectionFilterHeader } from '@kinvolk/headlamp-plugin/lib/components/common';
 import CheckIfFluxInstalled from '../checkflux';
 import FluxSourceCustomResource from './SourceCustomResourceSingle';
 
@@ -21,7 +22,7 @@ export default function FluxSources() {
 
   const sourceTables = [
     {
-      title: 'Git Repositories',
+      title: <SectionFilterHeader title={'Git Repositories'} />,
       crd: gitRepoCRD,
     },
     {