Add offline filters

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

@@ -7,47 +7,56 @@ type Props = {
     filtersSelected?: any;
     initialFilters?: any;
     isDisabled?: boolean;
+    hideStatusFilter?: boolean; // Some views may default to only online hosts/beacons
 }
 export const BeaconFilterBar = (props: Props) => {
     const { data } = useTags();
-    const { beacons, groupTags, serviceTags, hosts, principals, primaryIPs, platforms, transports } = data;
+    const { beacons, groupTags, serviceTags, hosts, principals, primaryIPs, platforms, transports, onlineOfflineStatus } = data;
 
-    const { setFiltersSelected, filtersSelected, isDisabled, initialFilters } = props;
+    const { setFiltersSelected, filtersSelected, isDisabled, initialFilters, hideStatusFilter } = props;
 
-    const options = useMemo(() => [
-        {
-            label: "Platform",
-            options: platforms
-        },
-        {
-            label: "Transport",
-            options: transports
-        },
-        {
-            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 options = useMemo(() => {
+        const allOptions = [
+            {
+                label: "Platform",
+                options: platforms
+            },
+            {
+                label: "Transport",
+                options: transports
+            },
+            ...!hideStatusFilter ? [{
+                label: "Status",
+                options: onlineOfflineStatus
+            }] : [],
+            {
+                label: "Service",
+                options: serviceTags
+            },
+            {
+                label: "Group",
+                options: groupTags
+            },
+            {
+                label: "Principal",
+                options: principals
+            },
+            {
+                label: "PrimaryIPs",
+                options: primaryIPs
+            },
+            {
+                label: "Host",
+                options: hosts
+            },
+            {
+                label: "Beacon",
+                options: beacons
+            }
+        ];
+
+        return allOptions;
+    }, [platforms, serviceTags, groupTags, principals, primaryIPs, hosts, beacons, transports, onlineOfflineStatus, hideStatusFilter]);
 
 
     return (

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

@@ -4,16 +4,20 @@ 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, SupportedTransports } from "../utils/enums";
+import { OnlineOfflineOptions } from "../utils/utils";
 
 type TagContextType = {
     data: TagContextProps;
     isLoading: boolean;
     error: ApolloError | undefined;
+    lastFetchedTimestamp: Date;
 };
 
 export const TagContext = createContext<TagContextType | undefined>(undefined);
 
 export const TagContextProvider = ({ children }: { children: React.ReactNode }) => {
+    const [lastFetchedTimestamp, setLastFetchedTimestamp] = useState<Date>(new Date());
+
     const [tags, setTags] = useState<TagContextProps>({
         beacons: [],
         groupTags: [],
@@ -23,6 +27,7 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
         primaryIPs: [],
         platforms: [],
         transports: [],
+        onlineOfflineStatus: [],
     });
 
     const PARAMS = {
@@ -137,7 +142,8 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
             principals,
             primaryIPs,
             platforms,
-            transports
+            transports,
+            onlineOfflineStatus: OnlineOfflineOptions
         };
         setTags(tags);
     }, []);
@@ -152,12 +158,13 @@ export const TagContextProvider = ({ children }: { children: React.ReactNode })
     useEffect(() => {
         if (data) {
             getTags(data)
+            setLastFetchedTimestamp(new Date());
         }
     }, [data, getTags])
 
 
     return (
-        <TagContext.Provider value={{ data: tags, isLoading, error }}>
+        <TagContext.Provider value={{ data: tags, isLoading, error, lastFetchedTimestamp }}>
             {children}
         </TagContext.Provider>
     );

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

@@ -97,7 +97,7 @@ const BeaconStep = (props: Props) => {
                 <StackItem>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                         <div className="col-span-1 md:col-span-2">
-                            <BeaconFilterBar initialFilters={typeFilters} setFiltersSelected={setTypeFilters} />
+                            <BeaconFilterBar initialFilters={typeFilters} setFiltersSelected={setTypeFilters} hideStatusFilter={true} />
                         </div>
                         <div className="flex-1 flex flex-col gap-2">
                             <div className="flex flex-row-reverse md:flex-row gap-1 justify-end">

tavern/internal/www/src/pages/host-details/useHostTasks.ts

@@ -6,16 +6,18 @@ import { useFilters } from "../../context/FilterContext";
 import { constructHostTaskFilterQuery } from "../../utils/constructQueryUtils";
 import { Cursor } from "../../utils/interfacesQuery";
 import { useSorts } from "../../context/SortContext";
+import { useTags } from "../../context/TagContext";
 
 export const useHostTasks = (id?: string) => {
     const [page, setPage] = useState<number>(1);
     const {filters} = useFilters();
     const { sorts } = useSorts();
+    const {lastFetchedTimestamp} = useTags();
     const taskSort = sorts[PageNavItem.tasks];
 
     const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
       const defaultRowLimit = TableRowLimit.TaskRowLimit;
-      const filterQueryFields = (filters && filters.filtersEnabled) && constructHostTaskFilterQuery(filters);
+      const filterQueryFields = (filters && filters.filtersEnabled) && constructHostTaskFilterQuery(filters, lastFetchedTimestamp);
 
       const query = {
         "where": {
@@ -34,7 +36,7 @@ export const useHostTasks = (id?: string) => {
       } as any;
 
       return query;
-    },[id, filters, taskSort]);
+    },[id, filters, taskSort, lastFetchedTimestamp]);
 
 
     const { loading, error, data, refetch} = useQuery(GET_TASK_QUERY,  {variables: constructDefaultQuery(),  notifyOnNetworkStatusChange: true});

tavern/internal/www/src/pages/host-list/useHosts.ts

@@ -6,6 +6,7 @@ import { Filters, useFilters } from "../../context/FilterContext";
 import { constructBeaconFilterQuery, } from "../../utils/constructQueryUtils";
 import { Cursor, HostQueryTopLevel, OrderByField } from "../../utils/interfacesQuery";
 import { useSorts } from "../../context/SortContext";
+import { useTags } from "../../context/TagContext";
 
 interface HostsHook {
     data: HostQueryTopLevel
@@ -20,11 +21,12 @@ export const useHosts = (pagination: boolean, id?: string): HostsHook =>  {
     const [page, setPage] = useState<number>(1);
     const {filters} = useFilters();
     const {sorts} = useSorts();
+    const {lastFetchedTimestamp} = useTags();
     const hostSort = sorts[PageNavItem.hosts];
 
     const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
-        return getDefaultHostQuery(pagination, afterCursor, beforeCursor, id, filters, hostSort);
-    },[pagination, id, filters, hostSort]);
+        return getDefaultHostQuery(pagination, afterCursor, beforeCursor, id, filters, hostSort, lastFetchedTimestamp);
+    },[pagination, id, filters, hostSort, lastFetchedTimestamp]);
 
     const { loading, data, error, refetch } = useQuery(
         GET_HOST_QUERY, {variables: constructDefaultQuery(),  notifyOnNetworkStatusChange: true}
@@ -59,28 +61,20 @@ export const useHosts = (pagination: boolean, id?: string): HostsHook =>  {
     }
 };
 
-const getDefaultHostQuery = (pagination: boolean, afterCursor?: Cursor, beforeCursor?: Cursor, id?: string | undefined, filters?: Filters, sort?: OrderByField) => {
+const getDefaultHostQuery = (pagination: boolean, afterCursor?: Cursor, beforeCursor?: Cursor, id?: string | undefined, filters?: Filters, sort?: OrderByField, currentTimestamp?: Date) => {
     const defaultRowLimit = TableRowLimit.HostRowLimit;
-    const filterInfo = (filters && filters.filtersEnabled) && constructBeaconFilterQuery(filters.beaconFields);
+    const filterInfo = (filters && filters.filtersEnabled) && constructBeaconFilterQuery(filters.beaconFields, currentTimestamp);
 
-    const hasBeaconsWithFilter: Record<string, any> = {};
-    if (filterInfo) {
-      if (filterInfo.hasBeaconWith.nameIn) {
-        hasBeaconsWithFilter.nameIn = filterInfo.hasBeaconWith.nameIn;
-      }
-      if (filterInfo.hasBeaconWith.principalIn) {
-        hasBeaconsWithFilter.principalIn = filterInfo.hasBeaconWith.principalIn;
-      }
-      if (filterInfo.hasBeaconWith.transportIn) {
-        hasBeaconsWithFilter.transportIn = filterInfo.hasBeaconWith.transportIn;
-      }
-    }
+    // Separate host fields from beacon fields
+    const hostFields = (filterInfo && filterInfo.hasBeaconWith?.hasHostWith) || {};
+    const beaconFields = (filterInfo && filterInfo.hasBeaconWith) ? { ...filterInfo.hasBeaconWith } : {};
+    delete beaconFields.hasHostWith; // Remove host fields from beacon fields
 
     const query = {
       "where": {
         ...id && {"id": id},
-        ...filterInfo && filterInfo.hasBeaconWith.hasHostWith,
-        ...(Object.keys(hasBeaconsWithFilter).length > 0) && {"hasBeaconsWith": hasBeaconsWithFilter},
+        ...hostFields,
+        ...(Object.keys(beaconFields).length > 0) && {"hasBeaconsWith": beaconFields}
       },
       ...(sort && {orderBy: [sort]})
     } as any;

tavern/internal/www/src/pages/quest-list/useQuests.ts

@@ -6,15 +6,17 @@ import { Filters, useFilters } from "../../context/FilterContext";
 import { constructQuestFilterQuery, constructTaskFilterQuery } from "../../utils/constructQueryUtils";
 import { Cursor, GetQuestQueryVariables, OrderByField, QuestQueryTopLevel } from "../../utils/interfacesQuery";
 import { useSorts } from "../../context/SortContext";
+import { useTags } from "../../context/TagContext";
 
 export const useQuests = (pagination: boolean) => {
     const [page, setPage] = useState<number>(1);
     const { filters } = useFilters();
     const { sorts } = useSorts();
+    const {lastFetchedTimestamp} = useTags();
 
-    const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor, currentFilters?: Filters, sort?: OrderByField): GetQuestQueryVariables => {
+    const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor, currentFilters?: Filters, sort?: OrderByField, currentTimestamp?: Date): GetQuestQueryVariables => {
         const defaultRowLimit = TableRowLimit.QuestRowLimit;
-        const filterQueryTaskFields = (currentFilters?.filtersEnabled) ? constructTaskFilterQuery(currentFilters) : null;
+        const filterQueryTaskFields = (currentFilters?.filtersEnabled) ? constructTaskFilterQuery(currentFilters, currentTimestamp) : null;
         const questFilterFields = (currentFilters?.filtersEnabled) ? constructQuestFilterQuery(currentFilters) : null;
 
         const query: GetQuestQueryVariables = {
@@ -52,7 +54,7 @@ export const useQuests = (pagination: boolean) => {
     }, [pagination]);
 
     const questSort = sorts[PageNavItem.quests];
-    const queryVariables = useMemo(() => constructDefaultQuery(undefined, undefined, filters, questSort), [constructDefaultQuery, filters, questSort]);
+    const queryVariables = useMemo(() => constructDefaultQuery(undefined, undefined, filters, questSort, lastFetchedTimestamp), [constructDefaultQuery, filters, questSort, lastFetchedTimestamp]);
 
     const { loading, data, error, refetch } = useQuery<QuestQueryTopLevel>(
       GET_QUEST_QUERY,
@@ -63,9 +65,9 @@ export const useQuests = (pagination: boolean) => {
     );
 
     const updateQuestList = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
-      const query = constructDefaultQuery(afterCursor, beforeCursor, filters, questSort);
+      const query = constructDefaultQuery(afterCursor, beforeCursor, filters, questSort, lastFetchedTimestamp);
       return refetch(query);
-    }, [filters, questSort, constructDefaultQuery, refetch]);
+    }, [filters, questSort, constructDefaultQuery, refetch, lastFetchedTimestamp]);
 
     useEffect(() => {
       const abortController = new AbortController();

tavern/internal/www/src/pages/tasks/useTasks.ts

@@ -6,16 +6,18 @@ import { useFilters } from "../../context/FilterContext";
 import { constructTaskFilterQuery } from "../../utils/constructQueryUtils";
 import { Cursor } from "../../utils/interfacesQuery";
 import { useSorts } from "../../context/SortContext";
+import { useTags } from "../../context/TagContext";
 
 export const useTasks = (id?: string) => {
     const [page, setPage] = useState<number>(1);
     const {filters} = useFilters();
     const { sorts } = useSorts();
+    const {lastFetchedTimestamp} = useTags();
     const taskSort = sorts[PageNavItem.tasks];
 
     const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
       const defaultRowLimit = TableRowLimit.TaskRowLimit;
-      const filterQueryFields = (filters && filters.filtersEnabled) && constructTaskFilterQuery(filters);
+      const filterQueryFields = (filters && filters.filtersEnabled) && constructTaskFilterQuery(filters, lastFetchedTimestamp);
 
       const query = {
         "where": {
@@ -30,7 +32,7 @@ export const useTasks = (id?: string) => {
       } as any;
 
       return query;
-    },[id, filters, taskSort]);
+    },[id, filters, taskSort, lastFetchedTimestamp]);
 
 
     const { loading, error, data, refetch} = useQuery(GET_TASK_QUERY,  {variables: constructDefaultQuery(),  notifyOnNetworkStatusChange: true});