diff --git a/src/components/Configs/ConfigsListFilters/ConfigUnhealthyToggle.tsx b/src/components/Configs/ConfigsListFilters/ConfigUnhealthyToggle.tsx new file mode 100644 index 000000000..056feaa23 --- /dev/null +++ b/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 ( + + ); +} \ No newline at end of file diff --git a/src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx b/src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx index 688f36a47..9be6e1a23 100644 --- a/src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx +++ b/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() { ]} >
+ {/* Add the new quick filter for unhealthy resources */} + + @@ -37,4 +41,4 @@ export default function ConfigsListFilters() {
); -} +} \ No newline at end of file