feat: add filter by config tags for changes

flanksource · Jun 3, 2024 · 547e8ac · 547e8ac
1 parent 4f414e8
commit 547e8ac
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 7 deletions.
diff --git a/.../query-hooks/useGetConfigsChangesQuery.ts → src/api/query-hooks/useConfigChangesHooks.ts b/.../query-hooks/useGetConfigsChangesQuery.ts → src/api/query-hooks/useConfigChangesHooks.ts
@@ -38,6 +38,20 @@ export function useGetAllConfigsChangesQuery(
   const createdBy = params.get("created_by") ?? undefined;
   const externalCreatedBy = params.get("external_created_by") ?? undefined;
 
+  const tags = useMemo(() => {
+    const allTags = params.get("tags");
+    if (allTags) {
+      return allTags
+        .split(",")
+        .map((tag) => ({
+          [tag.split("__:__")[0]]: tag.split("__:__")[1]
+        }))
+        .reduce((acc, tag) => {
+          return { ...acc, [tag.key]: tag.value };
+        });
+    }
+  }, [params]);
+
   const arbitraryFilter = useMemo(() => {
     const filter = new Map<string, string>();
     if (configId) {
@@ -70,7 +84,8 @@ export function useGetAllConfigsChangesQuery(
     sortOrder: sortDirection === "desc" ? "desc" : "asc",
     page: page,
     pageSize: pageSize,
-    arbitraryFilter
+    arbitraryFilter,
+    tags
   } satisfies GetConfigsRelatedChangesParams;
 
   return useQuery({
@@ -108,6 +123,20 @@ export function useGetConfigChangesByIDQuery(
   const downstream = params.get("downstream") === "true";
   const all = upstream && downstream;
 
+  const tags = useMemo(() => {
+    const allTags = params.get("tags");
+    if (allTags) {
+      return allTags
+        .split(",")
+        .map((tag) => ({
+          [tag.split("__:__")[0]]: tag.split("__:__")[1]
+        }))
+        .reduce((acc, tag) => {
+          return { ...acc, [tag.key]: tag.value };
+        });
+    }
+  }, [params]);
+
   const relationshipType = useMemo(() => {
     if (all) {
       return "all";
@@ -133,7 +162,8 @@ export function useGetConfigChangesByIDQuery(
     sortBy,
     sortOrder: sortDirection === "desc" ? "desc" : "asc",
     page: page,
-    pageSize: pageSize
+    pageSize: pageSize,
+    tags
   } satisfies GetConfigsRelatedChangesParams;
 
   return useQuery({

diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
@@ -211,6 +211,7 @@ export type GetConfigsRelatedChangesParams = {
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   arbitraryFilter?: Record<string, string>;
+  tags?: Record<string, string>;
 };
 
 export async function getConfigsChanges({
@@ -227,7 +228,8 @@ export async function getConfigsChanges({
   pageSize,
   sortBy,
   sortOrder,
-  arbitraryFilter
+  arbitraryFilter,
+  tags
 }: GetConfigsRelatedChangesParams) {
   const queryParams = new URLSearchParams();
   if (id) {
@@ -276,7 +278,12 @@ export async function getConfigsChanges({
     // for descending order, we need to add a "-" before the sortBy field
     queryParams.set("sort_by", `${sortOrder === "desc" ? "-" : ""}${sortBy}`);
   }
-
+  if (tags) {
+    const tagList = Object.entries(tags).map(
+      ([key, value]) => `${key}.${value}`
+    );
+    queryParams.set("tags", encodeURIComponent(tagList.join(",")));
+  }
   if (type_filter) {
     queryParams.set(
       "recursive",

diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx
@@ -8,6 +8,7 @@ import { paramsToReset } from "../ConfigChangeHistory";
 import { ChangesTypesDropdown } from "./ChangeTypesDropdown";
 import { ConfigChangeSeverity } from "./ConfigChangeSeverity";
 import ConfigChangesDateRangeFilter from "./ConfigChangesDateRangeFIlter";
+import { ConfigTagsDropdown } from "./ConfigTagsDropdown";
 import ConfigTypesTristateDropdown from "./ConfigTypesTristateDropdown";
 
 type FilterBadgeProps = {
@@ -81,7 +82,7 @@ export function ConfigChangeFilters({
     <div className="flex flex-col gap-2">
       <FormikFilterForm
         paramsToReset={paramsToReset}
-        filterFields={["configTypes", "changeType", "severity"]}
+        filterFields={["configTypes", "changeType", "severity", "tags"]}
         defaultFieldValues={{
           ...(configType && { configTypes: defaultConfigType })
         }}
@@ -90,6 +91,7 @@ export function ConfigChangeFilters({
           <ConfigTypesTristateDropdown />
           <ChangesTypesDropdown />
           <ConfigChangeSeverity />
+          <ConfigTagsDropdown />
           <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
         </div>
       </FormikFilterForm>

diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigTagsDropdown.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigTagsDropdown.tsx
@@ -0,0 +1,60 @@
+import { useGetConfigTagsListQuery } from "@flanksource-ui/api/query-hooks";
+import { useField } from "formik";
+import { useMemo } from "react";
+import { ReactSelectDropdown } from "../../../ReactSelectDropdown";
+
+type Props = {
+  searchParamKey?: string;
+};
+
+export function ConfigTagsDropdown({ searchParamKey = "tags" }: Props) {
+  const [field] = useField({
+    name: searchParamKey
+  });
+
+  const { data, isLoading } = useGetConfigTagsListQuery();
+
+  const tagItems = useMemo(() => {
+    if (data) {
+      const options = data.map((tag) => ({
+        label: (
+          <div className="block space-x-1 text-sm">
+            <span className="w-auto text-gray-600">{tag.key}:</span>
+            <span className="w-full">{tag.value}</span>
+          </div>
+        ),
+        value: `${tag.key}__:__${tag.value}`
+      }));
+      return [{ label: "All", value: "All" }, ...options];
+    }
+  }, [data]);
+
+  return (
+    <ReactSelectDropdown
+      items={tagItems}
+      name="tags"
+      onChange={(value) => {
+        if (value && value !== "All") {
+          field.onChange({
+            target: { name: searchParamKey, value: value }
+          });
+        } else {
+          field.onChange({
+            target: { name: searchParamKey, value: undefined }
+          });
+        }
+      }}
+      value={field.value ?? "All"}
+      className="w-auto max-w-[38rem]"
+      dropDownClassNames="w-auto max-w-[38rem] left-0"
+      hideControlBorder
+      isMulti
+      prefix={
+        <div className="text-xs text-gray-500 mr-2 whitespace-nowrap">
+          Tags:
+        </div>
+      }
+      isLoading={isLoading}
+    />
+  );
+}
diff --git a/...omponents/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx b/...omponents/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx
@@ -4,6 +4,7 @@ import { ChangesTypesDropdown } from "../../ConfigChangesFilters/ChangeTypesDrop
 import { ConfigChangeSeverity } from "../../ConfigChangesFilters/ConfigChangeSeverity";
 import ConfigChangesDateRangeFilter from "../../ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { ConfigRelatedChangesToggles } from "../../ConfigChangesFilters/ConfigRelatedChangesToggles";
+import { ConfigTagsDropdown } from "../../ConfigChangesFilters/ConfigTagsDropdown";
 import ConfigTypesTristateDropdown from "../../ConfigChangesFilters/ConfigTypesTristateDropdown";
 import { ConfigChangesToggledDeletedItems } from "./ConfigChangesToggledDeletedItems";
 
@@ -25,6 +26,7 @@ export function ConfigRelatedChangesFilters({
         <ConfigTypesTristateDropdown />
         <ChangesTypesDropdown />
         <ConfigChangeSeverity />
+        <ConfigTagsDropdown />
         <ConfigRelatedChangesToggles />
         <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
         <ConfigChangesToggledDeletedItems />

diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx
@@ -1,4 +1,4 @@
-import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useGetConfigsChangesQuery";
+import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
 import { ConfigChangeHistory } from "@flanksource-ui/components/Configs/Changes/ConfigChangeHistory";
 import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters";
 import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";

diff --git a/src/pages/config/details/ConfigDetailsChangesPage.tsx b/src/pages/config/details/ConfigDetailsChangesPage.tsx
@@ -1,4 +1,4 @@
-import { useGetConfigChangesByIDQuery } from "@flanksource-ui/api/query-hooks/useGetConfigsChangesQuery";
+import { useGetConfigChangesByIDQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
 import { ConfigChangeHistory } from "@flanksource-ui/components/Configs/Changes/ConfigChangeHistory";
 import { ConfigRelatedChangesFilters } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters";
 import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDetailsTabs";