feat: added possibility to add, change and remove multiviewers on run…

…ning production
Eyevinn · Oct 16, 2024 · 0c0831c · 0c0831c
1 parent 09dbcac
commit 0c0831c
Show file tree

Hide file tree

Showing 13 changed files with 247 additions and 107 deletions.
diff --git a/src/api/manager/workflow.ts b/src/api/manager/workflow.ts
@@ -811,7 +811,7 @@ export async function startProduction(
           { step: 'pipeline_outputs', success: false },
           { step: 'multiviews', success: false }
         ],
-        error: 'Unknown error occured'
+        error: 'Could not start multiviews'
       };
     }
     return {
@@ -951,7 +951,8 @@ export async function postMultiviewersOnRunningProduction(
   additions: MultiviewSettings[]
 ) {
   try {
-    if (!production.production_settings.pipelines[0].multiviews) {
+    const multiview = production.production_settings.pipelines[0].multiviews;
+    if (!multiview) {
       Log().error(
         `No multiview settings specified for production: ${production.name}`
       );
@@ -979,11 +980,33 @@ export async function postMultiviewersOnRunningProduction(
       throw `Failed to create multiview for pipeline '${productionSettings.pipelines[0].pipeline_name}/${productionSettings.pipelines[0].pipeline_id}': ${error}`;
     });
 
-    runtimeMultiviews.flatMap((runtimeMultiview, index) => {
-      const multiview = production.production_settings.pipelines[0].multiviews;
-      if (multiview && multiview[index]) {
-        return (multiview[index].multiview_id = runtimeMultiview.id);
+    const multiviewsWithUpdatedId: MultiviewSettings[] = [
+      ...multiview.slice(0, multiview.length - runtimeMultiviews.length),
+      ...runtimeMultiviews.map((runtimeMultiview, index) => {
+        return {
+          ...multiview[multiview.length - runtimeMultiviews.length + index],
+          multiview_id: runtimeMultiview.id
+        };
+      })
+    ];
+
+    await putProduction(production._id.toString(), {
+      ...production,
+      production_settings: {
+        ...production.production_settings,
+        pipelines: production.production_settings.pipelines.map((pipeline) => {
+          return {
+            ...pipeline,
+            multiviews: multiviewsWithUpdatedId
+          };
+        })
       }
+    }).catch(async (error) => {
+      Log().error(
+        `Failed to save multiviews for pipeline '${productionSettings.pipelines[0].pipeline_name}/${productionSettings.pipelines[0].pipeline_id}' to database`,
+        error
+      );
+      throw error;
     });
 
     return {
@@ -999,7 +1022,7 @@ export async function postMultiviewersOnRunningProduction(
       }
     };
   } catch (e) {
-    Log().error('Could not start multiviews');
+    Log().error('Could not create multiviews');
     Log().error(e);
     if (typeof e !== 'string') {
       return {
@@ -1013,7 +1036,7 @@ export async function postMultiviewersOnRunningProduction(
             }
           ]
         },
-        error: 'Unknown error occured'
+        error: 'Could not create multiviews'
       };
     }
     return {
@@ -1023,7 +1046,8 @@ export async function postMultiviewersOnRunningProduction(
         steps: [
           {
             step: 'create_multiview',
-            success: false
+            success: false,
+            message: e
           }
         ]
       },
@@ -1065,7 +1089,7 @@ export async function putMultiviewersOnRunningProduction(
       }
     };
   } catch (e) {
-    Log().error('Could not start multiviews');
+    Log().error('Could not update multiviews');
     Log().error(e);
     if (typeof e !== 'string') {
       return {
@@ -1079,7 +1103,7 @@ export async function putMultiviewersOnRunningProduction(
             }
           ]
         },
-        error: 'Unknown error occured'
+        error: 'Could not update multiviews'
       };
     }
     return {
@@ -1089,7 +1113,8 @@ export async function putMultiviewersOnRunningProduction(
         steps: [
           {
             step: 'update_multiview',
-            success: false
+            success: false,
+            message: e
           }
         ]
       },
@@ -1149,7 +1174,7 @@ export async function deleteMultiviewersOnRunningProduction(
       }
     };
   } catch (e) {
-    Log().error('Could not start multiviews');
+    Log().error('Could not delete multiviews');
     Log().error(e);
     if (typeof e !== 'string') {
       return {
@@ -1163,7 +1188,7 @@ export async function deleteMultiviewersOnRunningProduction(
             }
           ]
         },
-        error: 'Unknown error occured'
+        error: 'Could not delete multiviews'
       };
     }
     return {
@@ -1173,7 +1198,8 @@ export async function deleteMultiviewersOnRunningProduction(
         steps: [
           {
             step: 'delete_multiview',
-            success: false
+            success: false,
+            message: e
           }
         ]
       },

diff --git a/src/app/api/manager/multiviewersOnRunningProduction/[id]/route.ts b/src/app/api/manager/multiviewersOnRunningProduction/[id]/route.ts
@@ -22,7 +22,7 @@ export async function PUT(request: NextRequest): Promise<NextResponse> {
       Log().error(error);
       const errorResponse = {
         ok: false,
-        error: 'unexpected'
+        error: 'Could not update multiviewers'
       };
       return new NextResponse(JSON.stringify(errorResponse), { status: 500 });
     });
@@ -44,7 +44,7 @@ export async function DELETE(request: NextRequest): Promise<NextResponse> {
       Log().error(error);
       const errorResponse = {
         ok: false,
-        error: 'unexpected'
+        error: 'Could not remove multiviewers'
       };
       return new NextResponse(JSON.stringify(errorResponse), { status: 500 });
     });

diff --git a/src/app/api/manager/multiviewersOnRunningProduction/route.ts b/src/app/api/manager/multiviewersOnRunningProduction/route.ts
@@ -19,7 +19,7 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
       Log().error(error);
       const errorResponse = {
         ok: false,
-        error: 'unexpected'
+        error: 'Could not add multiviewers'
       };
       return new NextResponse(JSON.stringify(errorResponse), { status: 500 });
     });

diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
@@ -53,7 +53,11 @@ import { ConfigureMultiviewButton } from '../../../components/modal/configureMul
 import { useUpdateSourceInputSlotOnMultiviewLayouts } from '../../../hooks/useUpdateSourceInputSlotOnMultiviewLayouts';
 import { useCheckProductionPipelines } from '../../../hooks/useCheckProductionPipelines';
 import cloneDeep from 'lodash.clonedeep';
-import { useUpdateMultiviewersOnRunningProduction } from '../../../hooks/workflow';
+import {
+  useAddMultiviewersOnRunningProduction,
+  useRemoveMultiviewersOnRunningProduction,
+  useUpdateMultiviewersOnRunningProduction
+} from '../../../hooks/workflow';
 import { MultiviewSettings } from '../../../interfaces/multiview';
 
 export default function ProductionConfiguration({ params }: PageProps) {
@@ -92,8 +96,12 @@ export default function ProductionConfiguration({ params }: PageProps) {
   const [updateMultiviewViews] = useMultiviews();
   const [updateSourceInputSlotOnMultiviewLayouts] =
     useUpdateSourceInputSlotOnMultiviewLayouts();
+  const [addMultiviewersOnRunningProduction] =
+    useAddMultiviewersOnRunningProduction();
   const [updateMultiviewersOnRunningProduction] =
     useUpdateMultiviewersOnRunningProduction();
+  const [removeMultiviewersOnRunningProduction] =
+    useRemoveMultiviewersOnRunningProduction();
 
   //FROM LIVE API
   const [pipelines, loadingPipelines, , refreshPipelines] = usePipelines();
@@ -309,12 +317,26 @@ export default function ProductionConfiguration({ params }: PageProps) {
         (oldItem) => !presetMultiviewsMap.has(oldItem.multiview_id)
       );
 
-      updateMultiviewersOnRunningProduction(
-        (productionSetup?._id.toString(), updatedPreset),
-        additions,
-        updates,
-        removals
-      );
+      if (additions.length > 0) {
+        addMultiviewersOnRunningProduction(
+          (productionSetup?._id.toString(), updatedPreset),
+          additions
+        );
+      }
+
+      if (updates.length > 0) {
+        updateMultiviewersOnRunningProduction(
+          (productionSetup?._id.toString(), updatedPreset),
+          updates
+        );
+      }
+
+      if (removals.length > 0) {
+        removeMultiviewersOnRunningProduction(
+          (productionSetup?._id.toString(), updatedPreset),
+          removals
+        );
+      }
     }
 
     putProduction(productionSetup?._id.toString(), updatedPreset).then(() => {

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -6,7 +6,7 @@ import { Modal as BaseModal } from '@mui/base';
 type BaseModalProps = {
   open: boolean;
   forwardRef?: LegacyRef<HTMLDivElement> | null;
-  outsideClick: () => void;
+  outsideClick?: () => void;
   className?: string;
 };
 
@@ -16,16 +16,21 @@ export function Modal({ open, children, outsideClick, className }: ModalProps) {
   const element = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (element.current && !element.current.contains(event.target as Node)) {
-        outsideClick();
-      }
-    };
+    if (outsideClick) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          element.current &&
+          !element.current.contains(event.target as Node)
+        ) {
+          outsideClick();
+        }
+      };
 
-    document.addEventListener('click', handleClickOutside, true);
-    return () => {
-      document.removeEventListener('click', handleClickOutside, true);
-    };
+      document.addEventListener('click', handleClickOutside, true);
+      return () => {
+        document.removeEventListener('click', handleClickOutside, true);
+      };
+    }
   }, [outsideClick]);
 
   return (

diff --git a/src/components/modal/UpdateMultiviewersModal.tsx b/src/components/modal/UpdateMultiviewersModal.tsx
@@ -0,0 +1,37 @@
+import { useTranslate } from '../../i18n/useTranslate';
+import { Button } from '../button/Button';
+import { Modal } from './Modal';
+
+type UpdateMultiviewersModalProps = {
+  open: boolean;
+  onAbort: () => void;
+  onConfirm: () => void;
+};
+
+export function UpdateMultiviewersModal({
+  open,
+  onAbort,
+  onConfirm
+}: UpdateMultiviewersModalProps) {
+  const t = useTranslate();
+  return (
+    <Modal open={open} outsideClick={onAbort}>
+      <div className="text-center flex flex-col items-center">
+        <h1 className="text-xl">{t('preset.confirm_update_multiviewers')}</h1>
+
+        <div className="flex gap-8 mt-4">
+          <Button
+            onClick={onAbort}
+            className="bg-button-delete hover:bg-button-hover-red-bg"
+          >
+            {t('abort')}
+          </Button>
+
+          <Button onClick={onConfirm} className={'min-w-fit'}>
+            {t('preset.confirm_update')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx b/src/components/modal/configureMultiviewModal/ConfigureMultiviewModal.tsx
@@ -12,6 +12,7 @@ import { usePutMultiviewLayout } from '../../../hooks/multiviewLayout';
 import Decision from '../configureOutputModal/Decision';
 import MultiviewLayoutSettings from './MultiviewLayoutSettings/MultiviewLayoutSettings';
 import { IconSettings } from '@tabler/icons-react';
+import { UpdateMultiviewersModal } from '../UpdateMultiviewersModal';
 
 type ConfigureMultiviewModalProps = {
   open: boolean;
@@ -33,6 +34,7 @@ export function ConfigureMultiviewModal({
     []
   );
   const [layoutModalOpen, setLayoutModalOpen] = useState(false);
+  const [confirmUpdateModalOpen, setConfirmUpdateModalOpen] = useState(false);
   const [newMultiviewLayout, setNewMultiviewLayout] =
     useState<TMultiviewLayout | null>(null);
   const addNewLayout = usePutMultiviewLayout();
@@ -59,6 +61,14 @@ export function ConfigureMultiviewModal({
   }, [multiviews]);
 
   const onSave = () => {
+    if (production?.isActive && !confirmUpdateModalOpen) {
+      setConfirmUpdateModalOpen(true);
+      return;
+    }
+    if (production?.isActive && confirmUpdateModalOpen) {
+      setConfirmUpdateModalOpen(false);
+    }
+
     const presetToUpdate = deepclone(preset);
 
     if (!multiviews) {
@@ -162,7 +172,7 @@ export function ConfigureMultiviewModal({
   };
 
   return (
-    <Modal open={open} outsideClick={() => clearInputs()}>
+    <Modal open={open}>
       {!layoutModalOpen && (
         <div className="flex gap-3">
           {multiviews &&
@@ -245,6 +255,14 @@ export function ConfigureMultiviewModal({
         onClose={() => (layoutModalOpen ? closeLayoutModal() : clearInputs())}
         onSave={() => (layoutModalOpen ? onUpdateLayoutPreset() : onSave())}
       />
+
+      {confirmUpdateModalOpen && (
+        <UpdateMultiviewersModal
+          open={confirmUpdateModalOpen}
+          onAbort={() => setConfirmUpdateModalOpen(false)}
+          onConfirm={() => onSave()}
+        />
+      )}
     </Modal>
   );
 }
diff --git a/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx b/src/components/modal/configureMultiviewModal/MultiviewSettings.tsx
@@ -61,6 +61,7 @@ export default function MultiviewSettingsConfig({
     }
     handleUpdateMultiview({
       ...multiviewLayouts[0],
+      _id: multiviewLayouts[0]._id?.toString(),
       for_pipeline_idx: 0
     });
   }
@@ -80,7 +81,11 @@ export default function MultiviewSettingsConfig({
       output: multiview?.output || selected.output
     };
     setSelectedMultiviewLayout(updatedMultiview);
-    handleUpdateMultiview({ ...updatedMultiview, for_pipeline_idx: 0 });
+    handleUpdateMultiview({
+      ...updatedMultiview,
+      _id: updatedMultiview._id?.toString(),
+      for_pipeline_idx: 0
+    });
   };
 
   const getNumber = (val: string, prev: number) => {

diff --git a/src/components/startProduction/StartProductionButton.tsx b/src/components/startProduction/StartProductionButton.tsx
@@ -106,7 +106,13 @@ export function StartProductionButton({
             ),
             {
               ...pipelineToUpdateMultiview,
-              multiviews: [{ ...multiviewLayouts[0], for_pipeline_idx: 0 }]
+              multiviews: [
+                {
+                  ...multiviewLayouts[0],
+                  for_pipeline_idx: 0,
+                  _id: multiviewLayouts[0]._id?.toString()
+                }
+              ]
             }
           ]
         }