From a29322e5864ca0f98a5468bf65395508ac2a24f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m?= <sisakadam@gmail.com>
Date: Thu, 28 Mar 2024 11:52:57 +0100
Subject: [PATCH] Filter errors in filter bar

---
 web/src/FilterBar.js       |  7 ++++-
 web/src/HelmReleases.jsx   | 10 ++----
 web/src/Kustomizations.jsx | 10 ++----
 web/src/Sources.jsx        | 10 ++----
 web/src/utils.js           | 63 +++++++++++++++++++-------------------
 5 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/web/src/FilterBar.js b/web/src/FilterBar.js
index 6ff5ea6..066d3c4 100644
--- a/web/src/FilterBar.js
+++ b/web/src/FilterBar.js
@@ -50,7 +50,7 @@ function Filter(props) {
   const { filter } = props;
   return (
     <span className="ml-1 text-blue-50 bg-blue-600 rounded-full pl-3 pr-1" aria-hidden="true">
-      <span>{filter.property}</span>: <span>{filter.value}</span>
+      <span>{filter.property}</span>{filter.property !== "Errors" && <span>: {filter.value}</span>}
       <span className="ml-1 px-1 bg-blue-400 rounded-full ">
         <XMarkIcon className="cursor-pointer text-white inline h-3 w-3" aria-hidden="true" onClick={() => props.deleteFilter(filter)}/>
       </span>
@@ -138,6 +138,11 @@ function FilterInput(props) {
                 key={p}
                 className="cursor-pointer hover:bg-blue-200"
                 onClick={() => {
+                  if (p === "Errors") {
+                    addFilter({ property: p, value: "true" })
+                    return
+                  }
+
                   setProperty(p);
                   setActive(false);
                 }}>
diff --git a/web/src/HelmReleases.jsx b/web/src/HelmReleases.jsx
index b22ecd0..73440c8 100644
--- a/web/src/HelmReleases.jsx
+++ b/web/src/HelmReleases.jsx
@@ -5,7 +5,6 @@ import FilterBar from './FilterBar.js';
 
 export function HelmReleases(props) {
   const { capacitorClient, helmReleases, targetReference, handleNavigationSelect } = props
-  const [filterErrors, setFilterErrors] = useState(false)
   const [filters, setFilters] = useState([])
   const sortedHelmReleases = useMemo(() => {
     if (!helmReleases) {
@@ -15,20 +14,15 @@ export function HelmReleases(props) {
     return [...helmReleases].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [helmReleases]);
 
-  const filteredHelmReleases = filterResources(sortedHelmReleases, filters, filterErrors)
+  const filteredHelmReleases = filterResources(sortedHelmReleases, filters)
 
   return (
     <div className="space-y-4">
       <FilterBar
-        properties={["Name", "Namespace"]}
+        properties={["Name", "Namespace", "Errors"]}
         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>
       {
         filteredHelmReleases?.map(helmRelease =>
           <HelmRelease
diff --git a/web/src/Kustomizations.jsx b/web/src/Kustomizations.jsx
index b243039..de1de6d 100644
--- a/web/src/Kustomizations.jsx
+++ b/web/src/Kustomizations.jsx
@@ -5,7 +5,6 @@ import FilterBar from './FilterBar.js';
 
 export function Kustomizations(props) {
   const { capacitorClient, fluxState, targetReference, handleNavigationSelect } = props
-  const [filterErrors, setFilterErrors] = useState(false)
   const [filters, setFilters] = useState([])
   const kustomizations = fluxState.kustomizations;
 
@@ -17,20 +16,15 @@ export function Kustomizations(props) {
     return [...kustomizations].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [kustomizations]);
 
-  const filteredKustomizations = filterResources(sortedKustomizations, filters, filterErrors)
+  const filteredKustomizations = filterResources(sortedKustomizations, filters)
 
   return (
     <div className="space-y-4">
       <FilterBar
-        properties={["Name", "Namespace"]}
+        properties={["Name", "Namespace", "Errors"]}
         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>
       {
         filteredKustomizations?.map(kustomization =>
           <Kustomization
diff --git a/web/src/Sources.jsx b/web/src/Sources.jsx
index 044ad78..04f256d 100644
--- a/web/src/Sources.jsx
+++ b/web/src/Sources.jsx
@@ -5,7 +5,6 @@ import FilterBar from "./FilterBar";
 
 export function Sources(props) {
   const { capacitorClient, fluxState, targetReference } = props
-  const [filterErrors, setFilterErrors] = useState(false)
   const [filters, setFilters] = useState([])
   const sortedSources = useMemo(() => {
     const sources = [];
@@ -17,20 +16,15 @@ export function Sources(props) {
     return [...sources].sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
   }, [fluxState]);
 
-  const filteredSources = filterResources(sortedSources, filters, filterErrors)
+  const filteredSources = filterResources(sortedSources, filters)
 
   return (
     <div className="space-y-4">
       <FilterBar
-        properties={["Name", "Namespace"]}
+        properties={["Name", "Namespace", "Errors"]}
         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>
       {
         filteredSources?.map(source =>
           <Source
diff --git a/web/src/utils.js b/web/src/utils.js
index da42439..d70ef02 100644
--- a/web/src/utils.js
+++ b/web/src/utils.js
@@ -15,7 +15,7 @@ export function findSource(sources, reconciler) {
     source.metadata.namespace === namespace)
 }
 
-export function filterResources(resources, filters, filterErrors) {
+export function filterResources(resources, filters) {
   let filteredResources = resources;
   filters.forEach(filter => {
     switch (filter.property) {
@@ -25,43 +25,42 @@ export function filterResources(resources, filters, filterErrors) {
       case 'Namespace':
         filteredResources = filteredResources.filter(resource => resource.metadata.namespace.includes(filter.value))
         break;
-      default:
-    }
-  })
+      case 'Errors':
+        filteredResources = filteredResources.filter(resource => {
+          const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
+          const readyCondition = readyConditions.length === 1 ? readyConditions[0] : undefined
+          const ready = readyCondition && readyConditions[0].status === "True"
 
-  if (filterErrors) {
-    filteredResources = filteredResources.filter(resource => {
-      const readyConditions = jp.query(resource.status, '$..conditions[?(@.type=="Ready")]');
-      const readyCondition = readyConditions.length === 1 ? readyConditions[0] : undefined
-      const ready = readyCondition && readyConditions[0].status === "True"
+          const dependencyNotReady = readyCondition && readyCondition.reason === "DependencyNotReady"
 
-      const dependencyNotReady = readyCondition && readyCondition.reason === "DependencyNotReady"
+          const readyTransitionTime = readyCondition ? readyCondition.lastTransitionTime : undefined
+          const parsed = Date.parse(readyTransitionTime, "yyyy-MM-dd'T'HH:mm:ss");
+          const fiveMinutesAgo = new Date();
+          fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+          const stalled = fiveMinutesAgo > parsed
 
-      const readyTransitionTime = readyCondition ? readyCondition.lastTransitionTime : undefined
-      const parsed = Date.parse(readyTransitionTime, "yyyy-MM-dd'T'HH:mm:ss");
-      const fiveMinutesAgo = new Date();
-      fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
-      const stalled = fiveMinutesAgo > parsed
+          const reconcilingConditions = jp.query(resource.status, '$..conditions[?(@.type=="Reconciling")]');
+          const reconcilingCondition = reconcilingConditions.length === 1 ? reconcilingConditions[0] : undefined
+          const reconciling = reconcilingCondition && reconcilingCondition.status === "True"
 
-      const reconcilingConditions = jp.query(resource.status, '$..conditions[?(@.type=="Reconciling")]');
-      const reconcilingCondition = reconcilingConditions.length === 1 ? reconcilingConditions[0] : undefined
-      const reconciling = reconcilingCondition && reconcilingCondition.status === "True"
+          const fetchFailedConditions = jp.query(resource.status, '$..conditions[?(@.type=="FetchFailed")]');
+          const fetchFailedCondition = fetchFailedConditions.length === 1 ? fetchFailedConditions[0] : undefined
+          const fetchFailed = fetchFailedCondition && fetchFailedCondition.status === "True"
 
-      const fetchFailedConditions = jp.query(resource.status, '$..conditions[?(@.type=="FetchFailed")]');
-      const fetchFailedCondition = fetchFailedConditions.length === 1 ? fetchFailedConditions[0] : undefined
-      const fetchFailed = fetchFailedCondition && fetchFailedCondition.status === "True"
+          if (resource.kind === 'GitRepository' || resource.kind === "OCIRepository" || resource.kind === "Bucket") {
+            return fetchFailed
+          }
 
-      if (resource.kind === 'GitRepository' || resource.kind === "OCIRepository" || resource.kind === "Bucket") {
-        return fetchFailed
-      }
-
-      if (ready || ((reconciling || dependencyNotReady) && !stalled)) {
-        return false;
-      } else {
-        return true;
-      }
-    })
-  }
+          if (ready || ((reconciling || dependencyNotReady) && !stalled)) {
+            return false;
+          } else {
+            return true;
+          }
+        })
+        break;
+      default:
+    }
+  })
 
   return filteredResources;
 }