Add Quick Filter for Unhealthy Resources

src/components/Configs/ConfigsListFilters/ConfigUnhealthyToggle.tsx

@@ -0,0 +1,33 @@
+import { useField } from "formik";
+import { Toggle } from "@flanksource-ui/ui/FormControls/Toggle";
+
+export function ConfigUnhealthyToggle() {
+  const [healthField, healthMeta, healthHelpers] = useField("health");
+  const [unhealthyField] = useField({
+    name: "showUnhealthy"
+  });
+
+  const handleToggle = (checked: boolean) => {
+    if (checked) {
+      // When toggled on, set the health filter to show unhealthy and warning resources
+      healthHelpers.setValue("unhealthy:1,warning:1");
+    } else {
+      // When toggled off, clear the health filter
+      healthHelpers.setValue(undefined);
+    }
+  };
+
+  return (
+    <Toggle
+      className="mr-2 flex items-center"
+      label="Unhealthy Only"
+      hint="Show only unhealthy resources"
+      value={
+        // Check if we're filtering specifically for unhealthy and warning statuses
+        healthField.value === "unhealthy:1,warning:1" ||
+        healthField.value === "warning:1,unhealthy:1"
+      }
+      onChange={handleToggle}
+    />
+  );
+}

src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx

@@ -5,6 +5,7 @@ import { ConfigHealthyDropdown } from "./ConfigHealthyDropdown";
 import { ConfigLabelsDropdown } from "./ConfigLabelsDropdown";
 import { ConfigStatusDropdown } from "./ConfigStatusDropdown";
 import { ConfigTypesDropdown } from "./ConfigTypesDropdown";
+import { ConfigUnhealthyToggle } from "./ConfigUnhealthyToggle";
 
 export default function ConfigsListFilters() {
   return (
@@ -20,6 +21,9 @@ export default function ConfigsListFilters() {
       ]}
     >
       <div className="mr-4 flex flex-wrap items-center gap-2">
+        {/* Add the new quick filter for unhealthy resources */}
+        <ConfigUnhealthyToggle />
+
         <ConfigTypesDropdown />
 
         <ConfigGroupByDropdown />
@@ -37,4 +41,4 @@ export default function ConfigsListFilters() {
       </div>
     </FormikFilterForm>
   );
-}
+}