feat: add checks dropdown

src/api/services/topology.ts

@@ -11,6 +11,7 @@ import { SchemaResourceI } from "../schemaResources";
 import { PaginationInfo } from "../types/common";
 import {
   HealthCheck,
+  HealthCheckNames,
   HealthCheckStatus,
   HealthCheckSummary
 } from "../types/health";
@@ -294,3 +295,8 @@ export const getComponentChecks = async (id: string) => {
   );
   return res.data;
 };
+
+export const getCheckNames = async () => {
+  const res = await IncidentCommander.get<HealthCheckNames[]>(`/check_names`);
+  return res.data;
+};

src/api/types/health.ts

@@ -62,6 +62,11 @@ export type HealthCheckSummary = Pick<
   | "last_transition_time"
 >;
 
+export type HealthCheckNames = Pick<
+  HealthCheck,
+  "id" | "name" | "canary_id" | "status" | "type"
+>;
+
 export interface HealthCheckStatus {
   status: boolean;
   time: string;

src/components/Forms/Formik/FormikChecksDropdown.tsx

@@ -0,0 +1,52 @@
+import { getCheckNames } from "@flanksource-ui/api/services/topology";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { Icon } from "../../../ui/Icons/Icon";
+import FormikSelectDropdown from "./FormikSelectDropdown";
+
+type FormikChecksDropdownProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  filter?: {
+    types: string[];
+  };
+  className?: string;
+};
+
+export default function FormikChecksDropdown({
+  name,
+  label,
+  required = false,
+  hint,
+  filter,
+  className = "flex flex-col space-y-2 py-2"
+}: FormikChecksDropdownProps) {
+  const { isLoading, data: checks } = useQuery({
+    queryKey: ["checks", "check_names"],
+    queryFn: () => getCheckNames()
+  });
+
+  const options = useMemo(
+    () =>
+      checks?.map((check) => ({
+        label: check.name,
+        value: check.id,
+        icon: <Icon name={check.type} className="h-5 w-5" />
+      })),
+    [checks]
+  );
+
+  return (
+    <FormikSelectDropdown
+      name={name}
+      className={className}
+      options={options}
+      label={label}
+      isLoading={isLoading}
+      required={required}
+      hint={hint}
+    />
+  );
+}