feat: add additional filtering

src/api/agileLive/ingest.ts

@@ -5,6 +5,7 @@ import {
 } from '../../../types/agile-live';
 import { AGILE_BASE_API_PATH } from '../../constants';
 import { getAuthorizationHeader } from './utils/authheader';
+import { ResourcesSourceResponse } from '../../../types/agile-live';
 
 // TODO: create proper cache...
 const INGEST_UUID_CACHE: Map<string, string> = new Map();
@@ -77,6 +78,27 @@ export async function getIngests(): Promise<ResourcesCompactIngestResponse[]> {
   throw await response.json();
 }
 
+export async function getCompleteIngests(): Promise<ResourcesIngestResponse[]> {
+  const response = await fetch(
+    new URL(
+      AGILE_BASE_API_PATH + `/ingests?expand=true`,
+      process.env.AGILE_URL
+    ),
+    {
+      headers: {
+        authorization: getAuthorizationHeader()
+      },
+      next: {
+        revalidate: 0
+      }
+    }
+  );
+  if (response.ok) {
+    return response.json();
+  }
+  throw await response.json();
+}
+
 export async function getIngest(
   uuid: string
 ): Promise<ResourcesIngestResponse> {
@@ -123,7 +145,22 @@ export async function getSourceThumbnail(
   );
   if (response.ok) {
     const json = (await response.json()) as ResourcesThumbnailResponse;
-    return json?.data;
+    return json.data;
+  }
+  throw await response.json();
+}
+
+export async function getIngestSources(uuid: string) {
+  const response = await fetch(
+    new URL(AGILE_BASE_API_PATH + `/ingests/${uuid}/sources?expand=true`, process.env.AGILE_URL),
+    {
+      headers: {
+        authorization: getAuthorizationHeader()
+      }
+    }
+  );
+  if (response.ok) {
+    return response.json();
   }
   throw await response.json();
 }

src/app/api/manager/sources/resources/[id]/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse, NextRequest } from "next/server";
+import { getIngestSources } from "../../../../../../api/agileLive/ingest";
+import { isAuthenticated } from "../../../../../../api/manager/auth";
+
+type Params = {
+  id: string;
+};
+
+export async function GET(request: NextRequest, { params }: { params: Params }): Promise<NextResponse> {
+  if (!(await isAuthenticated())) {
+      return new NextResponse(`Not Authorized!`, {
+          status: 403
+          });
+    }
+
+  try {
+    return NextResponse.json(await getIngestSources(params.id));
+  } catch (e) {
+    return new NextResponse(e?.toString(), { status: 404 });
+  }
+}

src/app/api/manager/sources/resources/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+import { isAuthenticated } from '../../../../../api/manager/auth';
+import { getCompleteIngests } from '../../../../../api/agileLive/ingest';
+
+
+export async function GET(): Promise<NextResponse> {
+  if (!(await isAuthenticated())) {
+      return new NextResponse(`Not Authorized!`, {
+          status: 403
+        });
+    }
+
+  try {
+      return NextResponse.json(await getCompleteIngests());
+    } catch (e) {
+        return new NextResponse(e?.toString(), { status: 404 })
+    }
+}

src/components/filter/FilterDropdown.tsx

@@ -10,10 +10,16 @@ function FilterDropdown({
   isLocationHidden,
   showConfigSources,
   selectedTags,
+  showConfigNdiType,
+  showConfigBmdType,
+  showConfigSrtType,
   setIsTypeHidden,
   setIsLocationHidden,
   setSelectedTags,
-  setOnlyShowActiveSources: setOnlyShowConfigSources
+  setOnlyShowActiveSources: setOnlyShowConfigSources,
+  setOnlyShowNdiSources: setOnlyShowNdiSources,
+  setOnlyShowBmdSources: setOnlyShowBmdSources,
+  setOnlyShowSrtSources: setOnlyShowSrtSources
 }: {
   close: () => void;
   types: string[];
@@ -23,10 +29,16 @@ function FilterDropdown({
   isLocationHidden: boolean;
   showConfigSources: boolean;
   selectedTags: Set<string>;
+  showConfigNdiType: boolean;
+  showConfigSrtType: boolean;
+  showConfigBmdType: 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>>;
 }) {
   const [searchedTypes, setSearchedTypes] = useState<string[]>([]);
   const [searchedLocations, setSearchedLocations] = useState<string[]>([]);
@@ -48,6 +60,18 @@ function FilterDropdown({
     setOnlyShowConfigSources(!showConfigSources);
   };
 
+  const showSelectedConfigNdiType = () => {
+    setOnlyShowNdiSources(!showConfigNdiType);
+  };
+
+  const showSelectedConfigBmdType = () => {
+    setOnlyShowBmdSources(!showConfigBmdType);
+  };
+
+  const showSelectedConfigSrtType = () => {
+    setOnlyShowSrtSources(!showConfigSrtType);
+  };
+
   const deleteTag = (value: string) => {
     const temp = selectedTags;
     temp.delete(value);
@@ -222,17 +246,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={showConfigNdiType}
+                onChange={showSelectedConfigNdiType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showNdiCheckbox"
+              >
+                NDI
+              </label>
+            </div>
+            <div className="flex flex-row">
+              <input
+                id="showSelectedCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showConfigSrtType}
+                onChange={showSelectedConfigSrtType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showSelectedCheckbox"
+              >
+                SRT
+              </label>
+            </div>
+            <div className="flex flex-row">
+              <input
+                id="showSelectedCheckbox"
+                type="checkbox"
+                className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
+                checked={showConfigBmdType}
+                onChange={showSelectedConfigBmdType}
+              />
+              <label
+                className="ml-2 mt-1 text-left text-zinc-300"
+                htmlFor="showSelectedCheckbox"
+              >
+                SDI/HTML
+              </label>
+            </div>
+          </div>
+          <div className="flex self-end justify-end mt-4">
             <button
               onClick={handleClear}
               id="dropdownCheckboxButton"

src/components/filter/FilterOptions.tsx

@@ -5,29 +5,37 @@ import FilterDropdown from './FilterDropdown';
 import { ClickAwayListener } from '@mui/base';
 import { SourceWithId } from '../../interfaces/Source';
 import { FilterContext } from '../inventory/FilterContext';
+import { useResources } from '../../hooks/sources/useResources';
 
-function FilterOptions({
-  onFilteredSources
-}: {
+type FilterOptionsProps = {
   onFilteredSources: (sources: Map<string, SourceWithId>) => void;
-}) {
+};
+
+function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
   const { locations, types, sources } = useContext(FilterContext);
+  const [resources] = useResources();
+
   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;
@@ -36,11 +44,19 @@ function FilterOptions({
     handleSearch();
     handleTags();
     handleShowActiveSources();
+    filterOnSourceType();
 
     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);
@@ -100,6 +116,31 @@ function FilterOptions({
     }
   };
 
+  const filterOnSourceType = async () => {
+    for (const source of tempSet.values()) {
+      const correspondingResource = resources.find(
+        (resource) => resource.name === source.ingest_source_name
+      );
+      if (correspondingResource) {
+        if (onlyShowNdiSources) {
+          if (correspondingResource.type.toUpperCase() !== 'NDI') {
+            tempSet.delete(source._id.toString());
+          }
+        }
+        if (onlyShowBmdSources) {
+          if (correspondingResource.type.toUpperCase() !== 'BMD') {
+            tempSet.delete(source._id.toString());
+          }
+        }
+        if (onlyShowSrtSources) {
+          if (correspondingResource.type.toUpperCase() !== 'SRT') {
+            tempSet.delete(source._id.toString());
+          }
+        }
+      }
+    }
+  };
+
   return (
     <ClickAwayListener
       onClickAway={() => {
@@ -127,6 +168,12 @@ function FilterOptions({
           setIsLocationHidden={setIsLocationHidden}
           setSelectedTags={setSelectedTags}
           setOnlyShowActiveSources={setOnlyShowActiveSources}
+          setOnlyShowNdiSources={setOnlyShowNdiSources}
+          setOnlyShowBmdSources={setOnlyShowBmdSources}
+          setOnlyShowSrtSources={setOnlyShowSrtSources}
+          showConfigBmdType={onlyShowBmdSources}
+          showConfigNdiType={onlyShowNdiSources}
+          showConfigSrtType={onlyShowSrtSources}
         />
       </div>
     </ClickAwayListener>

src/hooks/sources/useResources.tsx

@@ -0,0 +1,59 @@
+import {
+  ResourcesIngestResponse,
+  ResourcesSourceResponse
+} from '../../../types/agile-live';
+import { useState, useEffect } from 'react';
+
+export function useResources() {
+  const [ingests, setIngests] = useState<ResourcesIngestResponse[]>([]);
+  const [resources, setResources] = useState<ResourcesSourceResponse[]>([]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchSources = async () => {
+      try {
+        const response = await fetch(`/api/manager/sources/resourceSource`, {
+          method: 'GET',
+          headers: [['x-api-key', `Bearer apisecretkey`]]
+        });
+
+        if (!response.ok) {
+          throw new Error('Error');
+        }
+
+        const ing = await response.json();
+        if (isMounted) {
+          setIngests(ing);
+        }
+      } catch (e) {
+        console.log('ERROR');
+      }
+    };
+    fetchSources();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ingests) {
+      for (let i = 0; i < ingests.length; i++) {
+        const id = ingests[i].uuid;
+        if (id) {
+          fetch(`/api/manager/resources/${id}`, {
+            method: 'GET',
+            headers: [['x-api-key', `Bearer apisecretkey`]]
+          }).then(async (response) => {
+            console.log('RESPONSE: ', response);
+            const sources = await response.json();
+            setResources(sources);
+          });
+        }
+      }
+    }
+  }, [ingests]);
+
+  return [resources];
+}