Navigate filtered checkresults

assets/js/components/ClusterDetails/ChecksResultFilters.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { createSearchParams, useSearchParams } from 'react-router-dom';
 import Filter from '@components/Table/Filter';
 
 export const RESULT_FILTER_FIELD = 'result';
@@ -38,10 +39,23 @@ export const useFilteredChecks = (cluster) => {
 
 const ChecksResultFilters = ({ onChange }) => {
   const [filtersForField, setFiltersForField] = useState({});
-
+  const [searchParams, setSearchParams] = useSearchParams();
   // This structure is the foundation for a multi field filters
   // we can reuse later this structure in other parts of the application
 
+  useEffect(() => {
+    const selectedFilters = searchParams.getAll('health');
+
+    setFiltersForField({
+      RESULT_FILTER_FIELD: {
+        predicates: selectedFilters.map(
+          (value) => (checks) => checks[RESULT_FILTER_FIELD] === value
+        ),
+        values: selectedFilters,
+      },
+    });
+  }, [searchParams]);
+
   useEffect(() => {
     if (Object.keys(filtersForField).length >= 0) {
       const filtersToApply = Object.keys(filtersForField).reduce(
@@ -61,17 +75,9 @@ const ChecksResultFilters = ({ onChange }) => {
         key={RESULT_FILTER_FIELD}
         title={'checks result'}
         options={['passing', 'warning', 'critical', 'unknown']}
-        value={filtersForField[RESULT_FILTER_FIELD]?.values || []}
+        value={searchParams.getAll('health')}
         onChange={(list) => {
-          setFiltersForField((existingFilters) => ({
-            ...existingFilters,
-            [RESULT_FILTER_FIELD]: {
-              predicates: list.map(
-                (value) => (checks) => checks[RESULT_FILTER_FIELD] === value
-              ),
-              values: list,
-            },
-          }));
+          setSearchParams(createSearchParams({ health: list }));
         }}
       />
     </div>

assets/js/components/ClusterDetails/ChecksResultOverview.jsx

@@ -55,10 +55,18 @@ const ChecksResultOverview = ({
       </h6>
 
       <div className="flex flex-col self-start w-full px-4 mt-2">
-        <CheckResult onClick={onCheckClick} value={passing} result="passing" />
-        <CheckResult onClick={onCheckClick} value={warning} result="warning" />
         <CheckResult
-          onClick={onCheckClick}
+          onClick={() => onCheckClick('passing')}
+          value={passing}
+          result="passing"
+        />
+        <CheckResult
+          onClick={() => onCheckClick('warning')}
+          value={warning}
+          result="warning"
+        />
+        <CheckResult
+          onClick={() => onCheckClick('critical')}
           value={critical}
           result="critical"
         />

assets/js/components/ClusterDetails/ClusterDetails.jsx

@@ -198,8 +198,8 @@ const ClusterDetails = () => {
         <div className="tn-cluster-checks-overview mt-4 bg-white shadow rounded-lg py-4 xl:w-1/4 w-full">
           <ChecksResultOverview
             {...checkResults}
-            onCheckClick={() =>
-              navigate(`/clusters/${clusterID}/checks/results`)
+            onCheckClick={(health) =>
+              navigate(`/clusters/${clusterID}/checks/results?health=${health}`)
             }
           />
         </div>

test/e2e/cypress/integration/hana_cluster_details.js

@@ -76,13 +76,40 @@ context('HANA database details', () => {
       cy.get('.tn-cluster-checks-overview ').contains('Passing');
     });
 
+    it('should have a working link to the passing checks in the overview component', () => {
+      cy.get('.tn-cluster-checks-overview ').contains('Passing').click();
+      cy.url().should(
+        'include',
+        `/clusters/${availableHanaCluster.id}/checks/results?health=passing`
+      );
+      cy.go('back');
+    });
+
     it('should have the check overview component with warning checks', () => {
       cy.get('.tn-cluster-checks-overview ').contains('Warning');
     });
 
+    it('should have a working link to the warning checks in the overview component', () => {
+      cy.get('.tn-cluster-checks-overview ').contains('Warning').click();
+      cy.url().should(
+        'include',
+        `/clusters/${availableHanaCluster.id}/checks/results?health=warning`
+      );
+      cy.go('back');
+    });
+
     it('should have the check overview component with critical checks', () => {
       cy.get('.tn-cluster-checks-overview ').contains('Critical');
     });
+
+    it('should have a working link to the critical checks in the overview component', () => {
+      cy.get('.tn-cluster-checks-overview ').contains('Critical').click();
+      cy.url().should(
+        'include',
+        `/clusters/${availableHanaCluster.id}/checks/results?health=critical`
+      );
+      cy.go('back');
+    });
   });
 
   describe('Cluster sites should have the expected hosts', () => {