Cp add more filters

tavern/internal/www/src/components/BeaconTile.tsx

@@ -1,8 +1,9 @@
 import { BugAntIcon } from "@heroicons/react/24/outline";
 import { BeaconNode, TagEdge } from "../utils/interfacesQuery";
-import { checkIfBeaconOffline } from "../utils/utils";
+import { checkIfBeaconOffline, getEnumKey } from "../utils/utils";
 import Badge from "./tavern-base-ui/badge/Badge";
 import { Globe, Network } from "lucide-react";
+import { SupportedPlatforms, SupportedTransports } from "../utils/enums";
 
 
 type Props = {
@@ -14,7 +15,8 @@ const BeaconTile = (props: Props) => {
     const {
         host,
         principal,
-        name
+        name,
+        transport
     } = beacon;
     const beaconOffline = checkIfBeaconOffline(beacon);
 
@@ -29,14 +31,17 @@ const BeaconTile = (props: Props) => {
                     {(principal && principal !== "") &&
                         <Badge>{principal}</Badge>
                     }
+                    {transport &&
+                        <Badge>{getEnumKey(SupportedTransports, transport)}</Badge>
+                    }
                     {host?.primaryIP && (
                         <Badge leftIcon={<Network className="h-3 w-3" />}>{host?.primaryIP}</Badge>
                     )}
                     {host?.externalIP && (
                         <Badge leftIcon={<Globe className="h-3 w-3" />}>{host?.externalIP}</Badge>
                     )}
                     {host?.platform &&
-                        <Badge>{host?.platform}</Badge>
+                        <Badge>{getEnumKey(SupportedPlatforms, host?.platform)}</Badge>
                     }
                     {host?.tags && host?.tags?.edges?.map((tag: TagEdge) => {
                         return <Badge key={tag.node.id}>{tag.node.name}</Badge>

tavern/internal/www/src/components/HostTile.tsx

@@ -1,4 +1,6 @@
+import { SupportedPlatforms } from "../utils/enums";
 import { HostNode } from "../utils/interfacesQuery";
+import { getEnumKey } from "../utils/utils";
 import Badge from "./tavern-base-ui/badge/Badge";
 import { Globe, Network } from "lucide-react";
 
@@ -13,7 +15,7 @@ const HostTile = ({ data }: { data: HostNode }) => {
                 {data?.externalIP && (
                     <Badge leftIcon={<Globe className="h-3 w-3" />}>{data?.externalIP}</Badge>
                 )}
-                <Badge>{data?.platform}</Badge>
+                {data?.platform && (<Badge>{getEnumKey(SupportedPlatforms, data?.platform)}</Badge>)}
                 {data.tags && data?.tags.edges.map((tag) => {
                     return <Badge key={tag.node.id}>{tag.node.name}</Badge>
                 })}

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

@@ -10,7 +10,7 @@ type Props = {
 }
 export const BeaconFilterBar = (props: Props) => {
     const { data } = useTags();
-    const { beacons, groupTags, serviceTags, hosts, principals, primaryIPs, platforms } = data;
+    const { beacons, groupTags, serviceTags, hosts, principals, primaryIPs, platforms, transports } = data;
 
     const { setFiltersSelected, filtersSelected, isDisabled, initialFilters } = props;
 
@@ -19,6 +19,10 @@ export const BeaconFilterBar = (props: Props) => {
             label: "Platform",
             options: platforms
         },
+        {
+            label: "Transport",
+            options: transports
+        },
         {
             label: "Service",
             options: serviceTags

tavern/internal/www/src/context/TagContext.tsx

@@ -3,7 +3,7 @@ import { ApolloError, useQuery } from "@apollo/client";
 import { GET_TAG_FILTERS } from "../utils/queries";
 import { BeaconEdge, BeaconNode, HostEdge, HostNode, TagContextQueryResponse, TagEdge, TagNode } from "../utils/interfacesQuery";
 import { FilterBarOption, TagContextProps } from "../utils/interfacesUI";
-import { SupportedPlatforms } from "../utils/enums";
+import { SupportedPlatforms, SupportedTransports } from "../utils/enums";
 
 type TagContextType = {
     data: TagContextProps;
@@ -21,7 +21,8 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
         hosts: [],
         principals: [],
         primaryIPs: [],
-        platforms: []
+        platforms: [],
+        transports: [],
     });
 
     const PARAMS = {
@@ -38,7 +39,9 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
         if (!data) {
             return;
         }
-        const supportedPlatformsList = Object.values(SupportedPlatforms);
+        const supportedPlatformsList = Object.entries(SupportedPlatforms);
+        const supportedTransportList = Object.entries(SupportedTransports);
+
         const beacons: Array<FilterBarOption & BeaconNode> = [];
         const principalsSet = new Set<string>();
         const principals: FilterBarOption[] = [];
@@ -108,14 +111,23 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
         });
 
         // Build platform options
-        const platforms: FilterBarOption[] = supportedPlatformsList.map((platform: string) => ({
-            id: platform,
-            name: platform,
-            value: platform,
-            label: platform,
+        const platforms: FilterBarOption[] = supportedPlatformsList.map(([label, value]) => ({
+            id: value,
+            name: value,
+            value: value,
+            label: label,
             kind: "platform"
         }));
 
+        // Build transport options with user-friendly labels
+        const transports: FilterBarOption[] = supportedTransportList.map(([label, value]) => ({
+            id: value,
+            name: value,
+            value: value,
+            label: label,
+            kind: "transport"
+        }));
+
         // Set tags state with formatted options
         const tags: TagContextProps = {
             beacons,
@@ -124,7 +136,8 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
             hosts,
             principals,
             primaryIPs,
-            platforms
+            platforms,
+            transports
         };
         setTags(tags);
     }, []);

tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx

@@ -23,16 +23,19 @@ const TomeRadioGroup = ({ label, data, selected, setSelected }: TomeRadioGroupPr
     const handleSearch = (text: string) => {
         const fd = data.filter((tome) => {
             let tomeName = tome.name.toLowerCase();
+            let tomeDesc = tome?.description?.toLowerCase();
+            let tomeParams = tome?.paramDefs?.toLowerCase();
+
             let searchText = text.toLowerCase();
-            return tomeName.includes(searchText) || (selected && selected.name === tome?.name);
+            return tomeParams?.includes(searchText) || tomeDesc?.includes(searchText) || tomeName.includes(searchText) || (selected && selected.name === tome?.name);
         })
         setFilteredData(fd);
     }
 
     return (
         <div className="w-full">
             <div className="mx-auto w-full flex flex-col gap-2">
-                <FreeTextSearch placeholder='Search by tome name' setSearch={handleSearch} />
+                <FreeTextSearch placeholder='Search by tome definition' setSearch={handleSearch} />
                 <RadioGroup value={selected || undefined} onChange={setSelected} className="flex flex-col gap-3">
                     <RadioGroup.Label className="sr-only">
                         <Heading size="sm" >{label}</Heading>

tavern/internal/www/src/pages/create-quest/hooks/useBeaconFilter.ts

@@ -90,6 +90,15 @@ export const useBeaconFilter = (beacons: Array<BeaconNode>, selectedBeacons: Sel
                 }
             }
 
+            if(searchTypes.transport.length > 0){
+                if(beacon?.transport && searchTypes.transport.indexOf(beacon?.transport) > -1){
+                    match = true;
+                }
+                else{
+                    return false;
+                }
+            }
+
             if(searchTypes.primaryIP.length > 0){
                 if(beacon?.host?.primaryIP && searchTypes.primaryIP.indexOf(beacon?.host?.primaryIP) > -1){
                     match = true;

tavern/internal/www/src/pages/host-details/components/BeaconTable.tsx

@@ -3,13 +3,14 @@ import { formatDistance } from "date-fns";
 import { useNavigate } from 'react-router-dom';
 
 import Table from "../../../components/tavern-base-ui/Table";
-import { PrincipalAdminTypes } from "../../../utils/enums";
-import { checkIfBeaconOffline } from "../../../utils/utils";
+import { PrincipalAdminTypes, SupportedTransports } from "../../../utils/enums";
+import { checkIfBeaconOffline, getEnumKey } from "../../../utils/utils";
 import Button from "../../../components/tavern-base-ui/button/Button";
 import Badge from "../../../components/tavern-base-ui/badge/Badge";
 import { BeaconEdge } from "../../../utils/interfacesQuery";
 
 const BeaconTable = ({ beacons }: { beacons: Array<BeaconEdge> }) => {
+    console.log(beacons);
     const nav = useNavigate();
     const currentDate = new Date();
     const princialColors = Object.values(PrincipalAdminTypes);
@@ -37,6 +38,23 @@ const BeaconTable = ({ beacons }: { beacons: Array<BeaconEdge> }) => {
                 );
             }
         },
+        {
+            id: "transport",
+            header: "Transport",
+            accessorFn: (row: BeaconEdge) => row?.node?.transport,
+            footer: props => props.column.id,
+            enableSorting: false,
+            maxSize: 80,
+            cell: (cellData: any) => {
+                const transport = cellData.getValue();
+                if (!transport) {
+                    return null;
+                }
+                return (
+                    <Badge>{getEnumKey(SupportedTransports, transport)}</Badge>
+                );
+            }
+        },
         {
             id: "Status",
             header: "Status",