feat(waiting-room): show and filter by check in [EE-5186] (#8701)

app/react/edge/edge-devices/WaitingRoomView/Datatable/Filter.tsx

@@ -3,8 +3,18 @@ import { useGroups } from '@/react/portainer/environments/environment-groups/que
 import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
 import { useTags } from '@/portainer/tags/queries';
 
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+
 import { useFilterStore } from './filter-store';
 
+const checkInOptions = [
+  { value: 0, label: 'Show all time' },
+  { value: 60 * 60, label: 'Show past hour' },
+  { value: 60 * 60 * 24, label: 'Show past day' },
+  { value: 60 * 60 * 24 * 7, label: 'Show past week' },
+  { value: 60 * 60 * 24 * 14, label: 'Show past 14 days' },
+];
+
 export function Filter() {
   const edgeGroupsQuery = useEdgeGroups();
   const groupsQuery = useGroups();
@@ -45,6 +55,14 @@ export function Filter() {
           value: g.ID,
         }))}
       />
+
+      <div className="ml-auto" />
+      <PortainerSelect
+        onChange={(f) => filterStore.setCheckIn(f || 0)}
+        value={filterStore.checkIn}
+        options={checkInOptions}
+        bindToBody
+      />
     </div>
   );
 }

app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { CellProps, Column } from 'react-table';
 
 import { WaitingRoomEnvironment } from '../types';
@@ -52,4 +53,24 @@ export const columns: readonly Column<WaitingRoomEnvironment>[] = [
     canHide: false,
     sortType: 'string',
   },
+  {
+    Header: 'Last Check-in',
+    accessor: 'LastCheckInDate',
+    Cell: LastCheckinDateCell,
+    id: 'last-check-in',
+    disableFilters: true,
+    Filter: () => null,
+    canHide: false,
+    sortType: 'string',
+  },
 ] as const;
+
+function LastCheckinDateCell({
+  value,
+}: CellProps<WaitingRoomEnvironment, number>) {
+  if (!value) {
+    return '-';
+  }
+
+  return moment(value * 1000).fromNow();
+}

app/react/edge/edge-devices/WaitingRoomView/Datatable/filter-store.ts

@@ -10,6 +10,8 @@ interface TableFiltersStore {
   setEdgeGroups(value: number[]): void;
   tags: number[];
   setTags(value: number[]): void;
+  checkIn: number;
+  setCheckIn(value: number): void;
 }
 
 export const useFilterStore = createStore<TableFiltersStore>()(
@@ -27,6 +29,10 @@ export const useFilterStore = createStore<TableFiltersStore>()(
       setTags(tags: number[]) {
         set({ tags });
       },
+      checkIn: 0,
+      setCheckIn(checkIn: number) {
+        set({ checkIn });
+      },
     }),
     {
       name: keyBuilder('edge-devices-meta-filters'),

app/react/edge/edge-devices/WaitingRoomView/Datatable/useEnvironments.ts

@@ -30,6 +30,7 @@ export function useEnvironments() {
     tagIds: filterStore.tags.length ? filterStore.tags : undefined,
     groupIds: filterStore.groups.length ? filterStore.groups : undefined,
     endpointIds: filterByEnvironmentsIds,
+    edgeCheckInPassedSeconds: filterStore.checkIn,
   });
 
   const groupsQuery = useGroups({