frontend: Adds filter feature for app catalog

Signed-off-by: Vincent T <[email protected]>
headlamp-k8s · Jun 3, 2024 · 7e7a7d2 · 7e7a7d2
1 parent f3e8b82
commit 7e7a7d2
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 40 deletions.
diff --git a/app-catalog/src/api/charts.tsx b/app-catalog/src/api/charts.tsx
@@ -2,21 +2,33 @@ import { PAGE_OFFSET_COUNT_FOR_CHARTS } from '../components/charts/List';
 
 export function fetchChartsFromArtifact(
   search: string = '',
+  official: boolean,
+  verified: boolean,
+  cncf: boolean,
   category: { title: string; value: number },
   page: number,
   limit: number = PAGE_OFFSET_COUNT_FOR_CHARTS
 ) {
+  // note: we are currently defaulting to search by verified and official as default
+
   if (!category || category.value === 0) {
-    return fetch(
-      `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&sort=relevance&facets=true&limit=${limit}&offset=${
-        (page - 1) * limit
-      }`
-    ).then(response => response.json());
+    if (cncf) {
+      return fetch(
+        `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&sort=relevance&facets=true&limit=${limit}&offset=${(page - 1) * limit
+        }&verified_publisher=${verified}&official=${official}&cncf=${cncf}`
+      ).then(response => response.json());
+    } else {
+      return fetch(
+        `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&sort=relevance&facets=true&limit=${limit}&offset=${(page - 1) * limit
+        }&verified_publisher=${verified}&official=${official}`
+      ).then(response => response.json());
+    }
   }
+
   return fetch(
-    `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&category=${
-      category.value
-    }&sort=relevance&facets=true&limit=${limit}&offset=${(page - 1) * limit}`
+    `https://artifacthub.io/api/v1/packages/search?kind=0&ts_query_web=${search}&category=${category.value
+    }&sort=relevance&facets=true&limit=${limit}&offset=${(page - 1) * limit
+    }&verified_publisher=${verified}&official=${official}&cncf=${cncf}`
   ).then(response => response.json());
 }
 

diff --git a/app-catalog/src/components/charts/List.tsx b/app-catalog/src/components/charts/List.tsx
@@ -17,11 +17,10 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { Autocomplete, Pagination } from '@mui/material';
+import { Autocomplete, ButtonGroup, Pagination } from '@mui/material';
 import { useEffect, useState } from 'react';
 //import { jsonToYAML, yamlToJSON } from '../../helpers';
 import { fetchChartsFromArtifact } from '../../api/charts';
-import CNCFLight from './cncf-icon-color.svg';
 //import { createRelease } from '../../api/releases';
 import { EditorDialog } from './EditorDialog';
 
@@ -45,46 +44,55 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
   const [chartsTotalCount, setChartsTotalCount] = useState(0);
   const [chartCategory, setChartCategory] = useState(helmChartCategoryList[0]);
   const [search, setSearch] = useState('');
+  const [chartOfficial, setChartOfficial] = useState(true);
+  const [chartVerified, setChartVerified] = useState(true);
+  const [isCNCF, setIsCNCF] = useState(false);
   const [selectedChartForInstall, setSelectedChartForInstall] = useState<any | null>(null);
 
   useEffect(() => {
     setCharts(null);
-    fetchCharts(search, chartCategory, page).then(response => {
-      setCharts(response.packages);
-      const facets = response.facets;
-      const categoryOptions = facets.find(
-        (facet: {
-          title: string;
-          options: {
-            name: string;
-            total: number;
-          }[];
-        }) => facet.title === 'Category'
-      ).options;
-      if (chartCategory.title === 'All') {
-        const totalCount = categoryOptions.reduce(
-          (
-            acc: number,
-            option: {
+    fetchCharts(search, chartOfficial, chartVerified, isCNCF, chartCategory, page).then(
+      response => {
+        setCharts(response.packages);
+        const facets = response.facets;
+        const categoryOptions = facets.find(
+          (facet: {
+            title: string;
+            options: {
               name: string;
               total: number;
-            }
-          ) => acc + option.total,
-          0
-        );
+            }[];
+          }) => facet.title === 'Category'
+        ).options;
+
+        // total number of charts
+        if (chartCategory.title === 'All') {
+          const totalCount = categoryOptions.reduce(
+            (
+              acc: number,
+              option: {
+                name: string;
+                total: number;
+              }
+            ) => acc + option.total,
+            0
+          );
+          setChartsTotalCount(totalCount);
+          return;
+        }
+
+        // total number of charts
+        const totalCount = categoryOptions.find(
+          (option: { name: string; total: number }) => option.name === chartCategory?.title
+        ).total;
         setChartsTotalCount(totalCount);
-        return;
       }
-      const totalCount = categoryOptions.find(
-        (option: { name: string; total: number }) => option.name === chartCategory?.title
-      ).total;
-      setChartsTotalCount(totalCount);
-    });
-  }, [page, chartCategory, search]);
+    );
+  }, [chartOfficial, chartVerified, isCNCF, page, chartCategory, search]);
 
   useEffect(() => {
     setPage(1);
-  }, [chartCategory, search]);
+  }, [chartOfficial, chartVerified, isCNCF, chartCategory, search]);
 
   function Search() {
     return (
@@ -106,6 +114,46 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
     );
   }
 
+  function ToggleOptions() {
+    return (
+      <ButtonGroup variant="contained" size="small" color="primary" style={{ margin: '1rem' }}>
+        {/* <Button
+          onClick={() => {
+            setChartOfficial(!chartOfficial);
+          }}
+          style={{
+            backgroundColor: chartOfficial ? 'black' : 'white',
+            color: chartOfficial ? 'white' : '#000',
+          }}
+        >
+          Official
+        </Button>
+        <Button
+          onClick={() => {
+            setChartVerified(!chartVerified);
+          }}
+          style={{
+            backgroundColor: chartVerified ? 'black' : 'white',
+            color: chartVerified ? 'white' : '#000',
+          }}
+        >
+          Verified
+        </Button> */}
+        <Button
+          onClick={() => {
+            setIsCNCF(!isCNCF);
+          }}
+          style={{
+            backgroundColor: isCNCF ? 'black' : 'white',
+            color: isCNCF ? 'white' : '#000',
+          }}
+        >
+          CNCF
+        </Button>
+      </ButtonGroup>
+    );
+  }
+
   function CategoryForCharts() {
     return (
       <Autocomplete
@@ -147,7 +195,10 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
         chart={selectedChartForInstall}
         handleEditor={(open: boolean) => setEditorOpen(open)}
       />
-      <SectionHeader title="Applications" actions={[<Search />, <CategoryForCharts />]} />
+      <SectionHeader
+        title="Applications"
+        actions={[<Search />, <CategoryForCharts />, <ToggleOptions />]}
+      />
       <Box display="flex" flexWrap="wrap" justifyContent="space-between" alignContent="start">
         {!charts ? (
           <Box