flux: namespace filter for sources and image automation

Signed-off-by: Matthijs Galesloot <[email protected]>
headlamp-k8s · Nov 13, 2024 · 628ce68 · 628ce68
1 parent 4484408
commit 628ce68
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/flux/src/image-automation/ImageAutomationList.tsx b/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>
   );

diff --git a/flux/src/sources/SourceCustomResourceSingle.tsx b/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>
   );
 }
diff --git a/flux/src/sources/SourceList.tsx b/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,
     },
     {