Filter bars on footer

gimlet-io · Mar 28, 2024 · eee307c · eee307c
1 parent 0784298
commit eee307c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 13 deletions.
diff --git a/web/src/HelmReleases.jsx b/web/src/HelmReleases.jsx
@@ -1,10 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import { HelmRelease } from "./HelmRelease"
 import { filterResources } from './utils.js';
+import FilterBar from './FilterBar.js';
 
 export function HelmReleases(props) {
   const { capacitorClient, helmReleases, targetReference, handleNavigationSelect } = props
-  const [filter, setFilter] = useState(false)
+  const [filterErrors, setFilterErrors] = useState(false)
+  const [filters, setFilters] = useState([])
   const sortedHelmReleases = useMemo(() => {
     if (!helmReleases) {
       return null;
@@ -13,12 +15,17 @@ export function HelmReleases(props) {
     return [...helmReleases].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [helmReleases]);
 
-  const filteredHelmReleases = filterResources(sortedHelmReleases, filter)
+  const filteredHelmReleases = filterResources(sortedHelmReleases, filters, filterErrors)
 
   return (
     <div className="space-y-4">
-      <button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
-        onClick={() => setFilter(!filter)}
+      <FilterBar
+        properties={["Name", "Namespace"]}
+        filters={filters}
+        change={setFilters}
+      />
+      <button className={(filterErrors ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
+        onClick={() => setFilterErrors(!filterErrors)}
       >
         Filter errors
       </button>

diff --git a/web/src/Kustomizations.jsx b/web/src/Kustomizations.jsx
@@ -1,10 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import { Kustomization } from './Kustomization.jsx'
 import { filterResources } from './utils.js';
+import FilterBar from './FilterBar.js';
 
 export function Kustomizations(props) {
   const { capacitorClient, fluxState, targetReference, handleNavigationSelect } = props
-  const [filter, setFilter] = useState(false)
+  const [filterErrors, setFilterErrors] = useState(false)
+  const [filters, setFilters] = useState([])
   const kustomizations = fluxState.kustomizations;
 
   const sortedKustomizations = useMemo(() => {
@@ -15,12 +17,17 @@ export function Kustomizations(props) {
     return [...kustomizations].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [kustomizations]);
 
-  const filteredKustomizations = filterResources(sortedKustomizations, filter)
+  const filteredKustomizations = filterResources(sortedKustomizations, filters, filterErrors)
 
   return (
     <div className="space-y-4">
-      <button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
-        onClick={() => setFilter(!filter)}
+      <FilterBar
+        properties={["Name", "Namespace"]}
+        filters={filters}
+        change={setFilters}
+      />
+      <button className={(filterErrors ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
+        onClick={() => setFilterErrors(!filterErrors)}
       >
         Filter errors
       </button>

diff --git a/web/src/Sources.jsx b/web/src/Sources.jsx
@@ -1,10 +1,12 @@
 import React, { useState, useMemo } from 'react';
 import { filterResources } from './utils.js';
 import { Source } from "./Source"
+import FilterBar from "./FilterBar";
 
 export function Sources(props) {
   const { capacitorClient, fluxState, targetReference } = props
-  const [filter, setFilter] = useState(false)
+  const [filterErrors, setFilterErrors] = useState(false)
+  const [filters, setFilters] = useState([])
   const sortedSources = useMemo(() => {
     const sources = [];
     if (fluxState.ociRepositories) {
@@ -15,12 +17,17 @@ export function Sources(props) {
     return [...sources].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [fluxState]);
 
-  const filteredSources = filterResources(sortedSources, filter)
+  const filteredSources = filterResources(sortedSources, filters, filterErrors)
 
   return (
     <div className="space-y-4">
-      <button className={(filter ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
-        onClick={() => setFilter(!filter)}
+      <FilterBar
+        properties={["Name", "Namespace"]}
+        filters={filters}
+        change={setFilters}
+      />
+      <button className={(filterErrors ? "text-blue-50 bg-blue-600" : "bg-gray-50 text-gray-600") + " rounded-full px-3"}
+        onClick={() => setFilterErrors(!filterErrors)}
       >
         Filter errors
       </button>

diff --git a/web/src/utils.js b/web/src/utils.js
@@ -15,8 +15,20 @@ export function findSource(sources, reconciler) {
     source.metadata.namespace === namespace)
 }
 
-export function filterResources(resources, filterErrors) {
+export function filterResources(resources, filters, filterErrors) {
   let filteredResources = resources;
+  filters.forEach(filter => {
+    switch (filter.property) {
+      case 'Name':
+        filteredResources = filteredResources.filter(resource => resource.metadata.name.includes(filter.value))
+        break;
+      case 'Namespace':
+        filteredResources = filteredResources.filter(resource => resource.metadata.namespace.includes(filter.value))
+        break;
+      default:
+    }
+  })
+
   if (filterErrors) {
     filteredResources = filteredResources.filter(resource => {
       const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');