From d8688fc763388a505b883fed840453886fbe70c1 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 3 Jun 2024 08:34:06 +0300 Subject: [PATCH] feat: add filter by config tags for changes --- ...sChangesQuery.ts => configChangesHooks.ts} | 34 ++++++++++- src/api/services/configs.ts | 11 +++- .../ConfigChangesFilters.tsx | 4 +- .../ConfigTagsDropdown.tsx | 60 +++++++++++++++++++ .../FilterBar/ConfigRelatedChangesFilters.tsx | 2 + src/pages/config/ConfigChangesPage.tsx | 2 +- .../details/ConfigDetailsChangesPage.tsx | 2 +- 7 files changed, 108 insertions(+), 7 deletions(-) rename src/api/query-hooks/{useGetConfigsChangesQuery.ts => configChangesHooks.ts} (86%) create mode 100644 src/components/Configs/Changes/ConfigChangesFilters/ConfigTagsDropdown.tsx diff --git a/src/api/query-hooks/useGetConfigsChangesQuery.ts b/src/api/query-hooks/configChangesHooks.ts similarity index 86% rename from src/api/query-hooks/useGetConfigsChangesQuery.ts rename to src/api/query-hooks/configChangesHooks.ts index b6478537af..1f486f8f41 100644 --- a/src/api/query-hooks/useGetConfigsChangesQuery.ts +++ b/src/api/query-hooks/configChangesHooks.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(); 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 index e0e24ca399..f83e59e35d 100644 --- 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; + tags?: Record; }; 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 index 8d1bfdbe71..222130c5ed 100644 --- 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({
+
diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigTagsDropdown.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigTagsDropdown.tsx new file mode 100644 index 0000000000..8da32bdd42 --- /dev/null +++ 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: ( +
+ {tag.key}: + {tag.value} +
+ ), + value: `${tag.key}__:__${tag.value}` + })); + return [{ label: "All", value: "All" }, ...options]; + } + }, [data]); + + return ( + { + 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={ +
+ Tags: +
+ } + isLoading={isLoading} + /> + ); +} diff --git a/src/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx b/src/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx index dc39385cab..0d5aa63bad 100644 --- a/src/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx +++ b/src/components/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({ + diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx index f389f02309..b215423101 100644 --- 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/configChangesHooks"; 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 index bad5059acc..8bc7822dae 100644 --- 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/configChangesHooks"; 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";