Source management sorting

src/api/manager/job/syncInventory.ts

@@ -5,6 +5,9 @@ import { upsertSource } from '../sources';
 import { getDatabase } from '../../mongoClient/dbClient';
 import { WithId } from 'mongodb';
 
+type SourceWithoutLastConnected = Omit<Source, 'lastConnected'>;
+
+// TODO: getSourcesFromAPI should return ResourcesSourceResponse and changed to our model later
 async function getSourcesFromAPI() {
   const ingests = await getIngests();
   const resolvedIngests = (
@@ -15,32 +18,35 @@ async function getSourcesFromAPI() {
         result.status === 'fulfilled'
     )
     .map((result) => result.value);
-  const sources: Source[] = resolvedIngests.flatMap((ingest) => {
-    return ingest.sources.map(
-      (source) =>
-        ({
-          status: source.active ? 'new' : 'gone',
-          name: source.name,
-          type: 'camera',
-          tags: {
-            location: 'Unknown'
-          },
-          ingest_name: ingest.name,
-          ingest_source_name: source.name,
-          video_stream: {
-            width: source?.video_stream?.width,
-            height: source?.video_stream?.height,
-            frame_rate:
-              source?.video_stream?.frame_rate_n /
-              source?.video_stream?.frame_rate_d
-          },
-          audio_stream: {
-            number_of_channels: source?.audio_stream?.number_of_channels,
-            sample_rate: source?.audio_stream?.sample_rate
-          }
-        } satisfies Source)
-    );
-  });
+
+  const sources: SourceWithoutLastConnected[] = resolvedIngests.flatMap(
+    (ingest) => {
+      return ingest.sources.map(
+        (source) =>
+          ({
+            status: source.active ? 'new' : 'gone',
+            name: source.name,
+            type: 'camera',
+            tags: {
+              location: 'Unknown'
+            },
+            ingest_name: ingest.name,
+            ingest_source_name: source.name,
+            video_stream: {
+              width: source?.video_stream?.width,
+              height: source?.video_stream?.height,
+              frame_rate:
+                source?.video_stream?.frame_rate_n /
+                source?.video_stream?.frame_rate_d
+            },
+            audio_stream: {
+              number_of_channels: source?.audio_stream?.number_of_channels,
+              sample_rate: source?.audio_stream?.sample_rate
+            }
+          } satisfies SourceWithoutLastConnected)
+      );
+    }
+  );
   return sources;
 }
 
@@ -67,26 +73,30 @@ export async function runSyncInventory() {
       // If source was not found in response from API, always mark it as gone
       return { ...inventorySource, status: 'gone' } satisfies WithId<Source>;
     }
-    // Keep all old fields from the inventory source (name, tags, id, audio_stream etc), but update the status
+    // Keep all old fields from the inventory source (name, tags, id, audio_stream etc), but update the status and set the lastConnected to the current date
     return {
       ...inventorySource,
-      status: apiSource.status
+      status: apiSource.status,
+      lastConnected: new Date()
     } satisfies WithId<Source>;
   });
 
   // Look for new sources that doesn't already exist in the inventory,
   // these should all be added to the inventory, status of these are set in getSourcesFromAPI.
-  const newSourcesToUpsert = apiSources.filter((source) => {
-    const existingSource = dbInventoryWithCorrectStatus.find(
-      (inventorySource) => {
-        return (
-          source.ingest_name === inventorySource.ingest_name &&
-          source.ingest_source_name === inventorySource.ingest_source_name
-        );
-      }
-    );
-    return !existingSource;
-  });
+
+  const newSourcesToUpsert = apiSources
+    .filter((source) => {
+      const existingSource = dbInventoryWithCorrectStatus.find(
+        (inventorySource) => {
+          return (
+            source.ingest_name === inventorySource.ingest_name &&
+            source.ingest_source_name === inventorySource.ingest_source_name
+          );
+        }
+      );
+      return !existingSource;
+    })
+    .map((source) => ({ ...source, lastConnected: new Date() }));
 
   const sourcesToUpsert = [
     ...newSourcesToUpsert,

src/components/filter/FilterDropdown.tsx

@@ -1,5 +1,7 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useTranslate } from '../../i18n/useTranslate';
+import { SortSelect } from './SortSelect';
+import { IconArrowsSort } from '@tabler/icons-react';
 
 function FilterDropdown({
   close,
@@ -13,7 +15,8 @@ function FilterDropdown({
   setIsTypeHidden,
   setIsLocationHidden,
   setSelectedTags,
-  setOnlyShowActiveSources: setOnlyShowConfigSources
+  setOnlyShowActiveSources: setOnlyShowConfigSources,
+  handleSorting
 }: {
   close: () => void;
   types: string[];
@@ -27,15 +30,31 @@ function FilterDropdown({
   setIsLocationHidden: React.Dispatch<React.SetStateAction<boolean>>;
   setOnlyShowActiveSources: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedTags: React.Dispatch<React.SetStateAction<Set<string>>>;
+  handleSorting: (reversedOrder: boolean) => void;
 }) {
+  const t = useTranslate();
+
   const [searchedTypes, setSearchedTypes] = useState<string[]>([]);
   const [searchedLocations, setSearchedLocations] = useState<string[]>([]);
+  const [selectedValue, setSelectedValue] = useState<string>(
+    t('inventory_list.no_sorting_applied')
+  );
+  const [reverseSortOrder, setReverseSortOrder] = useState<boolean>(false);
 
   useEffect(() => {
     setSearchedTypes(types);
     setSearchedLocations(locations);
   }, [types, locations]);
 
+  useEffect(() => {
+    if (
+      selectedValue === t('inventory_list.no_sorting_applied') &&
+      reverseSortOrder
+    ) {
+      setReverseSortOrder(false);
+    }
+  }, [selectedValue, reverseSortOrder]);
+
   const hideLocationDiv = () => {
     setIsLocationHidden(true);
   };
@@ -54,6 +73,14 @@ function FilterDropdown({
     setSelectedTags(new Set<string>(temp));
   };
 
+  useEffect(() => {
+    if (
+      reverseSortOrder ||
+      selectedValue === t('inventory_list.most_recent_connection')
+    )
+      handleSorting(reverseSortOrder);
+  }, [reverseSortOrder, selectedValue]);
+
   function addFilterComponent(type: string, component: string, index: number) {
     const id = `${type}-${component}-id`;
     const key = `${type}-${index}`;
@@ -122,7 +149,6 @@ function FilterDropdown({
     setSearchedLocations(temp);
   };
 
-  const t = useTranslate();
   return (
     <div
       id="dropdownDefaultCheckbox"
@@ -215,6 +241,35 @@ function FilterDropdown({
               })}
             </ul>
           </div>
+          <div className="flex items-center mt-2 text-p">
+            <span className="flex min-w-[20%] mr-5">
+              {t('inventory_list.sort_by')}
+            </span>
+            <SortSelect
+              value={selectedValue}
+              onChange={(e) => {
+                setSelectedValue(e.target.value);
+                handleSorting(reverseSortOrder);
+              }}
+              options={[
+                t('inventory_list.no_sorting_applied'),
+                t('inventory_list.most_recent_connection')
+              ]}
+            />
+            <button
+              className={`ml-2 p-1 rounded-md ${
+                selectedValue === t('inventory_list.no_sorting_applied')
+                  ? 'text-white/50'
+                  : 'text-white'
+              } ${reverseSortOrder ? 'bg-zinc-800' : 'bg-zinc-600'}`}
+              onClick={() => setReverseSortOrder(!reverseSortOrder)}
+              disabled={
+                selectedValue === t('inventory_list.no_sorting_applied')
+              }
+            >
+              <IconArrowsSort />
+            </button>
+          </div>
         </li>
         <li className="relative rounded w-full px-3">
           <div className="flex flex-row justify-between mt-4">

src/components/filter/FilterOptions.tsx

@@ -100,6 +100,18 @@ function FilterOptions({
     }
   };
 
+  const handleSorting = (reversedOrder: boolean) => {
+    const sortedSourcesArray = Array.from(tempSet.values()).sort((a, b) => {
+      const dateA = new Date(a.lastConnected).getTime();
+      const dateB = new Date(b.lastConnected).getTime();
+      return reversedOrder ? dateA - dateB : dateB - dateA;
+    });
+    tempSet = new Map(
+      sortedSourcesArray.map((source) => [source._id.toString(), source])
+    );
+    onFilteredSources(tempSet);
+  };
+
   return (
     <ClickAwayListener
       onClickAway={() => {
@@ -127,6 +139,7 @@ function FilterOptions({
           setIsLocationHidden={setIsLocationHidden}
           setSelectedTags={setSelectedTags}
           setOnlyShowActiveSources={setOnlyShowActiveSources}
+          handleSorting={handleSorting}
         />
       </div>
     </ClickAwayListener>

src/components/filter/SortSelect.tsx

@@ -0,0 +1,21 @@
+type SelectProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  options: readonly string[];
+};
+
+export const SortSelect = ({ value, onChange, options }: SelectProps) => {
+  return (
+    <select
+      className="border justify-center text-sm rounded-lg w-1/2 pl-2 py-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-p"
+      value={value}
+      onChange={onChange}
+    >
+      {options.map((value) => (
+        <option value={value} key={value}>
+          {value}
+        </option>
+      ))}
+    </select>
+  );
+};

src/i18n/locales/en.ts

@@ -510,7 +510,10 @@ export const en = {
     locations: 'Location',
     active_sources: 'Active Sources',
     add: 'Add',
-    edit: 'Edit'
+    edit: 'Edit',
+    sort_by: 'Sort by',
+    no_sorting_applied: 'No sorting selected',
+    most_recent_connection: 'Most recent connection'
   },
   clear: 'Clear',
   apply: 'Apply',

src/i18n/locales/sv.ts

@@ -512,7 +512,10 @@ export const sv = {
     locations: 'Plats',
     active_sources: 'Aktiva källor',
     add: 'Lägg till',
-    edit: 'Redigera'
+    edit: 'Redigera',
+    sort_by: 'Sortera på',
+    no_sorting_applied: 'Ingen sortering vald',
+    most_recent_connection: 'Senast anslutning'
   },
   clear: 'Rensa',
   apply: 'Applicera',

src/interfaces/Source.ts

@@ -28,6 +28,7 @@ export interface Source {
   ingest_source_name: string;
   video_stream: VideoStream;
   audio_stream: AudioStream;
+  lastConnected: Date;
 }
 
 export interface SourceReference {