src/features/dashboard/components/SystemHealth.tsx

@@ -19,7 +19,6 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
   if (isLoading) {
     return <span className="text-slate-500">Loading system health…</span>;
   }
-  console.log(statuses);
   return (
     <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
       <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">

src/features/output/components/ChannelFields.tsx

@@ -1,6 +1,7 @@
 import { Field } from "formik";
 import type { FormTypes, InitialValuesFormErrors, OutputDataResponse } from "../../../types/types";
 import { useEffect, useMemo } from "react";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";
 
 type ChannelFieldsProps = {
   values: FormTypes;
@@ -14,6 +15,8 @@ type ChannelFieldsProps = {
 };
 
 const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: ChannelFieldsProps) => {
+  const { optionalConstantsQuery } = useOptionalConstants(outputData?.id?.split("-")[1] || "");
+  const optionalConstants = optionalConstantsQuery?.data;
   const channelFieldsObject = useMemo(() => {
     return {
       connectTimeoutSeconds: outputData?.propConnectTimeoutSeconds?.value || "5",
@@ -21,8 +24,22 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
       backOfficeURL: outputData?.propBackofficeURL?.value || "",
       username: outputData?.propUsername?.value || "",
       password: outputData?.propPassword?.value || "",
+      SCID: optionalConstants?.propSourceIdentifier?.value || "",
+      timestampSource: optionalConstants?.propTimeZoneType?.value || "UTC",
+      GPSFormat: optionalConstants?.propGpsFormat?.value || "Minutes",
+      FFID: optionalConstants?.propFeedIdentifier?.value || "",
     };
-  }, [outputData]);
+  }, [
+    optionalConstants?.propFeedIdentifier?.value,
+    optionalConstants?.propGpsFormat?.value,
+    optionalConstants?.propSourceIdentifier?.value,
+    optionalConstants?.propTimeZoneType?.value,
+    outputData?.propBackofficeURL?.value,
+    outputData?.propConnectTimeoutSeconds?.value,
+    outputData?.propPassword?.value,
+    outputData?.propReadTimeoutSeconds?.value,
+    outputData?.propUsername?.value,
+  ]);
 
   useEffect(() => {
     for (const [key, value] of Object.entries(channelFieldsObject)) {
@@ -194,7 +211,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
               >
                 <option value={"UTC"}>UTC</option>
-                <option value={"local"}>Local</option>
+                <option value={"LOCAL"}>Local</option>
               </Field>
             </div>
             <div className="flex flex-row justify-between">

src/features/output/components/OutputForms.tsx

@@ -1,15 +1,21 @@
 import { Formik, Form } from "formik";
 import BearerTypeCard from "./BearerTypeCard";
 import ChannelCard from "./ChannelCard";
-import type { BearerTypeFields, FormTypes, OptionalBOF2Constants } from "../../../types/types";
+import type { BearerTypeFields, FormTypes, OptionalBOF2Constants, OptionalUTMCConstants } from "../../../types/types";
 import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
+import { useOptionalConstants } from "../hooks/useOptionalConstants";
 
 const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
 
   const format = dispatcherQuery?.data?.propFormat?.value;
+  const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
+  const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = optionalConstantsQuery?.data?.propSourceIdentifier?.value;
+  const timestampSource = optionalConstantsQuery?.data?.propTimeZoneType?.value;
+  const gpsFormat = optionalConstantsQuery?.data?.propGpsFormat?.value;
 
   const inititalValues: FormTypes = {
     format: format ?? "JSON",
@@ -22,11 +28,11 @@ const OutputForms = () => {
     overviewQuality: "HIGH",
     cropSizeFactor: "3/4",
 
-    // Bof2 -optional constants
+    // optional constants
-    FFID: "",
+    FFID: FFID ?? "",
-    SCID: "",
+    SCID: SCID ?? "",
-    timestampSource: "UTC",
+    timestampSource: timestampSource ?? "UTC",
-    GPSFormat: "Minutes",
+    GPSFormat: gpsFormat ?? "Minutes",
 
     //BOF2 - optional Lane IDs
     laneId: "",
@@ -56,14 +62,25 @@ const OutputForms = () => {
 
     if (result?.id) {
       await bearerMutation.mutateAsync(bearerFields);
+
       if (values.format === "BOF2") {
         const optionalBOF2Fields: OptionalBOF2Constants = {
+          format: values.format,
           FFID: values.FFID,
           SCID: values.SCID,
           timestampSource: values.timestampSource,
           GPSFormat: values.GPSFormat,
         };
-        console.log("Submit BOF2 optional fields:", optionalBOF2Fields);
+        await optionalConstantsMutation.mutateAsync(optionalBOF2Fields);
+      }
+      if (values.format === "UTMC") {
+        const optionalUTMCFields: OptionalUTMCConstants = {
+          format: values.format,
+          SCID: values.SCID,
+          timestampSource: values.timestampSource,
+          GPSFormat: values.GPSFormat,
+        };
+        await optionalConstantsMutation.mutateAsync(optionalUTMCFields);
       }
     }
   };

src/features/output/hooks/useOptionalConstants.tsx

@@ -0,0 +1,62 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import type { OptionalBOF2Constants } from "../../../types/types";
+
+const fetchOptionalConstants = async (format: string) => {
+  if (!format || format === "json") return null;
+  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${format}-constants`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+const postOptionalConstants = async (config: OptionalBOF2Constants) => {
+  const fields = [
+    {
+      property: "propSourceIdentifier",
+      value: config?.SCID,
+    },
+    {
+      property: "propTimeZoneType",
+      value: config?.timestampSource,
+    },
+    {
+      property: "propGpsFormat",
+      value: config?.GPSFormat,
+    },
+  ];
+
+  if (config.FFID) {
+    fields.push({
+      property: "propFeedIdentifier",
+      value: config.FFID,
+    });
+  }
+  const updateConfigPayload = {
+    id: `Dispatcher0-${config.format?.toLowerCase()}-constants`,
+    fields: fields,
+  };
+
+  const response = await fetch(`http://100.115.148.59/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useOptionalConstants = (format: string) => {
+  const optionalConstantsQuery = useQuery({
+    queryKey: ["optionalConstants", format],
+    queryFn: () => fetchOptionalConstants(format),
+    enabled: !!format && format !== "json",
+  });
+
+  const optionalConstantsMutation = useMutation({
+    mutationKey: ["postOptionalConstants"],
+    mutationFn: postOptionalConstants,
+  });
+  return { optionalConstantsQuery, optionalConstantsMutation };
+};

src/types/types.ts

@@ -76,11 +76,19 @@ export type DispatcherConfig = {
 };
 
 export type OptionalBOF2Constants = {
+  format?: string;
   FFID?: string;
   SCID?: string;
   timestampSource?: string;
   GPSFormat?: string;
 };
+
+export type OptionalUTMCConstants = {
+  format?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
 export type OptionalBOF2LaneIDs = {
   laneId?: string;
   LID1?: string;