cp-expand-beacon-filters

tavern/internal/www/src/components/filter-controls/index.tsx → tavern/internal/www/src/components/FilterControls.tsx

@@ -1,8 +1,8 @@
-import { useFilters } from "../../context/FilterContext";
-import { useTags } from "../../context/TagContext";
-import { BeaconFilterBar } from "../beacon-filter-bar";
-import FreeTextSearch from "../tavern-base-ui/FreeTextSearch";
-import { FilterControlWrapper } from "./FilterControlWrapper";
+import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";
+import { useFilters } from "../context/FilterContext";
+import { BeaconFilterBar } from "./beacon-filter-bar";
+import { ButtonDialogPopover } from "./ButtonDialogPopover";
+import FreeTextSearch from "./tavern-base-ui/FreeTextSearch";
 import { Switch } from "@chakra-ui/react";
 
 export enum FilterPageType {
@@ -27,7 +27,6 @@ const filterConfig: Record<FilterPageType, FilterFieldType[]> = {
 
 export default function FilterControls({ type }: { type: FilterPageType }) {
     const { filters, updateFilters } = useFilters();
-    const { data } = useTags();
     const fieldsToRender = filterConfig[type];
 
     const calculateFilterCount = (field: FilterFieldType): number => {
@@ -60,10 +59,6 @@ export default function FilterControls({ type }: { type: FilterPageType }) {
                 <div key={field}>
                     <BeaconFilterBar
                         key={field}
-                        beacons={data?.beacons || []}
-                        groups={data?.groupTags || []}
-                        services={data?.serviceTags || []}
-                        hosts={data?.hosts || []}
                         setFiltersSelected={(newValue) => updateFilters({ 'beaconFields': newValue })}
                         filtersSelected={filters.beaconFields}
                         isDisabled={!filters.filtersEnabled}
@@ -102,7 +97,7 @@ export default function FilterControls({ type }: { type: FilterPageType }) {
 
 
     return (
-        <FilterControlWrapper label={getLabel()}>
+        <ButtonDialogPopover label={getLabel()} leftIcon={<AdjustmentsHorizontalIcon className="w-4" />}>
             <div className="flex flex-col gap-1">
                 <div className="flex flex-row justify-between pb-2 border-gray-100 border-b-2">
                     <h3 className="font-medium text-lg text-gray-700">Filters</h3>
@@ -118,6 +113,6 @@ export default function FilterControls({ type }: { type: FilterPageType }) {
                     return renderFilterComponent(field);
                 })}
             </div>
-        </FilterControlWrapper>
+        </ButtonDialogPopover>
     )
 }

tavern/internal/www/src/components/beacon-filter-bar/BeaconFilterBar.tsx

@@ -1,113 +1,50 @@
-import React from "react";
+import { useMemo } from "react";
 import Select, { createFilter, } from "react-select"
-import { SupportedPlatforms } from "../../utils/enums";
-import { BeaconNode, HostNode, TagNode } from "../../utils/interfacesQuery";
+import { useTags } from "../../context/TagContext";
 
 type Props = {
     setFiltersSelected: (arg1: any) => void;
-    beacons: Array<BeaconNode>;
-    groups: Array<TagNode>;
-    services: Array<TagNode>;
-    hosts: Array<HostNode>;
     filtersSelected?: any;
     initialFilters?: any;
     isDisabled?: boolean;
 }
 export const BeaconFilterBar = (props: Props) => {
-    // TODO add host to filter
+    const { data } = useTags();
+    const { beacons, groupTags, serviceTags, hosts, principals, primaryIPs, platforms } = data;
 
-    const { setFiltersSelected, beacons, groups, services, hosts, filtersSelected, isDisabled, initialFilters } = props;
-    const supportedPlatformsList = Object.values(SupportedPlatforms);
+    const { setFiltersSelected, filtersSelected, isDisabled, initialFilters } = props;
 
-    // TODO: IN the future lets style things purple
-    // const styles = {
-    //     control: (base: any) => ({
-    //         ...base,
-    //         "&:focus": {
-    //             borderColor: "#a855f7"
-    //         },
-    //         "&:hover": {
-    //             borderColor: "#a855f7",
-    //             color: "#a855f7"
-    //         }
-    //     }),
-    //     dropdownIndicator: (base: any) => ({
-    //         ...base,
-    //         color: "inherit",
-    //     }),
-    //     singleValue: (base: any) => ({
-    //         ...base,
-    //         color: "inherit"
-    //     }),
-    //     option: (base: any, state: any) => ({
-    //         ...base,
-    //         "&:hover": {
-    //             backgroundColor: "#a855f7",
-    //             borderColor: "#a855f7",
-    //             color: "white"
-    //         }
-    //     })
-    // };
+    const options = useMemo(() => [
+        {
+            label: "Platform",
+            options: platforms
+        },
+        {
+            label: "Service",
+            options: serviceTags
+        },
+        {
+            label: "Group",
+            options: groupTags
+        },
+        {
+            label: "Principal",
+            options: principals
+        },
+        {
+            label: "PrimaryIPs",
+            options: primaryIPs
+        },
+        {
+            label: "Host",
+            options: hosts
+        },
+        {
+            label: "Beacon",
+            options: beacons
+        }
+    ], [platforms, serviceTags, groupTags, principals, primaryIPs, hosts, beacons]);
 
-    const getFormattedOptions = (beacons: Array<BeaconNode>, groups: Array<TagNode>, services: Array<TagNode>, hosts: Array<HostNode>) => {
-        return [
-            {
-                label: "Platform",
-                options: supportedPlatformsList.map(function (platform: string) {
-                    return {
-                        name: platform,
-                        value: platform,
-                        label: platform,
-                        kind: "platform"
-                    };
-                })
-            },
-            {
-                label: "Service",
-                options: services.map(function (service: TagNode) {
-                    return {
-                        ...service,
-                        value: service?.id,
-                        label: service?.name,
-                        kind: service?.kind
-                    }
-                })
-            },
-            {
-                label: "Group",
-                options: groups.map(function (group: TagNode) {
-                    return {
-                        ...group,
-                        value: group?.id,
-                        label: group?.name,
-                        kind: group?.kind
-                    };
-                })
-            },
-            {
-                label: "Host",
-                options: hosts.map(function (host: HostNode) {
-                    return {
-                        ...host,
-                        value: host?.id,
-                        label: host?.name,
-                        kind: "host"
-                    };
-                })
-            },
-            {
-                label: "Beacon",
-                options: beacons.map(function (beacon: BeaconNode) {
-                    return {
-                        ...beacon,
-                        value: beacon?.id,
-                        label: beacon?.name,
-                        kind: "beacon"
-                    };
-                })
-            }
-        ];
-    };
 
     return (
         <div className="flex flex-col gap-1">
@@ -116,7 +53,7 @@ export const BeaconFilterBar = (props: Props) => {
                 isDisabled={isDisabled}
                 isSearchable={true}
                 isMulti
-                options={getFormattedOptions(beacons, groups, services, hosts)}
+                options={options}
                 onChange={setFiltersSelected}
                 filterOption={createFilter({
                     matchFrom: 'any',