Source management additional filtering

src/api/agileLive/ingest.ts

@@ -123,7 +123,7 @@ export async function getSourceThumbnail(
   );
   if (response.ok) {
     const json = (await response.json()) as ResourcesThumbnailResponse;
-    return json?.data;
+    return json.data;
   }
   throw await response.json();
 }

src/api/manager/job/syncInventory.ts

@@ -18,7 +18,6 @@ async function getSourcesFromAPI() {
         result.status === 'fulfilled'
     )
     .map((result) => result.value);
-
   const sources: SourceWithoutLastConnected[] = resolvedIngests.flatMap(
     (ingest) => {
       return ingest.sources.map(
@@ -32,6 +31,7 @@ async function getSourcesFromAPI() {
             },
             ingest_name: ingest.name,
             ingest_source_name: source.name,
+            ingest_type: source.type,
             video_stream: {
               width: source?.video_stream?.width,
               height: source?.video_stream?.height,
@@ -66,7 +66,8 @@ export async function runSyncInventory() {
     const apiSource = apiSources.find((source) => {
       return (
         source.ingest_name === inventorySource.ingest_name &&
-        source.ingest_source_name === inventorySource.ingest_source_name
+        source.ingest_source_name === inventorySource.ingest_source_name &&
+        source.ingest_type === inventorySource.type
       );
     });
     if (!apiSource) {
@@ -84,14 +85,14 @@ export async function runSyncInventory() {
 
   // 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
+            source.ingest_source_name === inventorySource.ingest_source_name &&
+            source.ingest_type === inventorySource.ingest_type
           );
         }
       );

src/components/filter/FilterDropdown.tsx

@@ -12,10 +12,16 @@ function FilterDropdown({
   isLocationHidden,
   showConfigSources,
   selectedTags,
+  showNdiType,
+  showBmdType,
+  showSrtType,
   setIsTypeHidden,
   setIsLocationHidden,
   setSelectedTags,
   setOnlyShowActiveSources: setOnlyShowConfigSources,
+  setOnlyShowNdiSources: setOnlyShowNdiSources,
+  setOnlyShowBmdSources: setOnlyShowBmdSources,
+  setOnlyShowSrtSources: setOnlyShowSrtSources,
   handleSorting
 }: {
   close: () => void;
@@ -26,10 +32,16 @@ function FilterDropdown({
   isLocationHidden: boolean;
   showConfigSources: boolean;
   selectedTags: Set<string>;
+  showNdiType: boolean;
+  showSrtType: boolean;
+  showBmdType: boolean;
   setIsTypeHidden: React.Dispatch<React.SetStateAction<boolean>>;
   setIsLocationHidden: React.Dispatch<React.SetStateAction<boolean>>;
   setOnlyShowActiveSources: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedTags: React.Dispatch<React.SetStateAction<Set<string>>>;
+  setOnlyShowNdiSources: React.Dispatch<React.SetStateAction<boolean>>;
+  setOnlyShowBmdSources: React.Dispatch<React.SetStateAction<boolean>>;
+  setOnlyShowSrtSources: React.Dispatch<React.SetStateAction<boolean>>;
   handleSorting: (reversedOrder: boolean) => void;
 }) {
   const t = useTranslate();
@@ -67,6 +79,18 @@ function FilterDropdown({
     setOnlyShowConfigSources(!showConfigSources);
   };
 
+  const showSelectedNdiType = () => {
+    setOnlyShowNdiSources(!showNdiType);
+  };
+
+  const showSelectedSrtType = () => {
+    setOnlyShowSrtSources(!showSrtType);
+  };
+
+  const showSelectedBmdType = () => {
+    setOnlyShowBmdSources(!showBmdType);
+  };
+
   const deleteTag = (value: string) => {
     const temp = selectedTags;
     temp.delete(value);
@@ -125,6 +149,9 @@ function FilterDropdown({
   const handleClear = () => {
     setSelectedTags(new Set<string>());
     setOnlyShowConfigSources(false);
+    setOnlyShowBmdSources(false);
+    setOnlyShowNdiSources(false);
+    setOnlyShowSrtSources(false);
   };
 
   const typesSearch = (event: ChangeEvent<HTMLInputElement>) => {
@@ -276,17 +303,64 @@ function FilterDropdown({
               <input
                 id="showSelectedCheckbox"
                 type="checkbox"
-                className="flex ml-2 mb-2 w-4 justify-center rounded-lg text-zinc-300"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
                 checked={showConfigSources}
                 onChange={showSelectedConfigSources}
               />
               <label
-                className="ml-2 mt-2 text-left text-zinc-300"
+                className="ml-2 mt-1 text-left text-zinc-300"
                 htmlFor="showSelectedCheckbox"
               >
                 {t('inventory_list.active_sources')}
               </label>
             </div>
+            <div className="flex flex-row">
+              <input
+                id="showNdiCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showNdiType}
+                onChange={showSelectedNdiType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showNdiCheckbox"
+              >
+                NDI
+              </label>
+            </div>
+            <div className="flex flex-row">
+              <input
+                id="showSrtCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showSrtType}
+                onChange={showSelectedSrtType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showSrtCheckbox"
+              >
+                SRT
+              </label>
+            </div>
+            <div className="flex flex-row">
+              <input
+                id="showBmdCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showBmdType}
+                onChange={showSelectedBmdType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showBmdCheckbox"
+              >
+                SDI/HDMI
+              </label>
+            </div>
+          </div>
+          <div className="flex self-end justify-end mt-4">
             <button
               onClick={handleClear}
               id="dropdownCheckboxButton"

src/components/filter/FilterOptions.tsx

@@ -6,41 +6,54 @@ import { ClickAwayListener } from '@mui/base';
 import { SourceWithId } from '../../interfaces/Source';
 import { FilterContext } from '../inventory/FilterContext';
 
-function FilterOptions({
-  onFilteredSources
-}: {
+type FilterOptionsProps = {
   onFilteredSources: (sources: Map<string, SourceWithId>) => void;
-}) {
+};
+
+function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
   const { locations, types, sources } = useContext(FilterContext);
+
   const [onlyShowActiveSources, setOnlyShowActiveSources] = useState(false);
+  const [onlyShowNdiSources, setOnlyShowNdiSources] = useState(false);
+  const [onlyShowBmdSources, setOnlyShowBmdSources] = useState(false);
+  const [onlyShowSrtSources, setOnlyShowSrtSources] = useState(false);
   const [isFilterHidden, setIsFilterHidden] = useState(true);
   const [isTypeHidden, setIsTypeHidden] = useState(true);
   const [isLocationHidden, setIsLocationHidden] = useState(true);
   const [searchString, setSearchString] = useState<string>('');
   const [selectedTags, setSelectedTags] = useState<Set<string>>(
     new Set<string>()
   );
-
   let tempSet = new Map<string, SourceWithId>(sources);
 
   useEffect(() => {
     if (
       selectedTags.size === 0 &&
       searchString.length === 0 &&
-      !onlyShowActiveSources
+      !onlyShowActiveSources &&
+      !onlyShowNdiSources &&
+      !onlyShowBmdSources &&
+      !onlyShowSrtSources
     ) {
       resetFilter();
       return;
     }
 
     handleSearch();
     handleTags();
-    handleShowActiveSources();
+    filterSources();
 
     onFilteredSources(tempSet);
     tempSet.clear();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchString, selectedTags, onlyShowActiveSources]);
+  }, [
+    searchString,
+    selectedTags,
+    onlyShowActiveSources,
+    onlyShowNdiSources,
+    onlyShowBmdSources,
+    onlyShowSrtSources
+  ]);
 
   const resetFilter = () => {
     tempSet = new Map<string, SourceWithId>(sources);
@@ -90,13 +103,39 @@ function FilterOptions({
     }
   };
 
-  const handleShowActiveSources = () => {
-    if (onlyShowActiveSources) {
-      for (const source of tempSet.values()) {
-        if (source.status === 'gone') {
-          tempSet.delete(source._id.toString());
+  const filterSources = async () => {
+    for (const source of tempSet.values()) {
+      let shouldDelete = false;
+
+      const isFilteringByType =
+        onlyShowNdiSources || onlyShowBmdSources || onlyShowSrtSources;
+
+      if (isFilteringByType && !source.ingest_type) {
+        shouldDelete = true;
+      } else if (source.ingest_type) {
+        const ingestType = source.ingest_type.toUpperCase();
+
+        const isNdiSelected = onlyShowNdiSources && ingestType === 'NDI';
+        const isBmdSelected = onlyShowBmdSources && ingestType === 'BMD';
+        const isSrtSelected = onlyShowSrtSources && ingestType === 'SRT';
+
+        if (
+          isFilteringByType &&
+          !isNdiSelected &&
+          !isBmdSelected &&
+          !isSrtSelected
+        ) {
+          shouldDelete = true;
         }
       }
+
+      if (onlyShowActiveSources && source.status === 'gone') {
+        shouldDelete = true;
+      }
+
+      if (shouldDelete) {
+        tempSet.delete(source._id.toString());
+      }
     }
   };
 
@@ -139,6 +178,12 @@ function FilterOptions({
           setIsLocationHidden={setIsLocationHidden}
           setSelectedTags={setSelectedTags}
           setOnlyShowActiveSources={setOnlyShowActiveSources}
+          setOnlyShowNdiSources={setOnlyShowNdiSources}
+          setOnlyShowBmdSources={setOnlyShowBmdSources}
+          setOnlyShowSrtSources={setOnlyShowSrtSources}
+          showBmdType={onlyShowBmdSources}
+          showNdiType={onlyShowNdiSources}
+          showSrtType={onlyShowSrtSources}
           handleSorting={handleSorting}
         />
       </div>

src/interfaces/Source.ts

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