- updated base for endpoints

- added loading states
- need to add new form for ftp type

src/features/dashboard/components/SystemHealth.tsx

@@ -13,6 +13,8 @@ type SystemHealthProps = {
 const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpdatedAt }: SystemHealthProps) => {
   const updatedDate = dateUpdatedAt ? new Date(dateUpdatedAt).toLocaleString() : null;
 
+  // console.log(statuses);
+
   if (isError) {
     return <span className="text-red-500">Error loading system health.</span>;
   }
@@ -31,7 +33,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
       </div>
       <div className="h-50 overflow-auto">
         {statuses?.map((status: SystemHealthStatus) => (
-          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
+          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between" key={status.id}>
             <span>{status.id}</span> <Badge text={status.tags[0]} />
           </div>
         ))}

src/features/dashboard/hooks/useGetSystemHealth.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
 
 const fetchData = async () => {
-  const response = await fetch(`http://100.115.148.59/api/system-health`);
+  const response = await fetch(`${CAMBASE}/api/system-health`);
   if (!response.ok) throw new Error("Cannot get System overview");
   return response.json();
 };

src/features/output/components/ChannelFields.tsx

@@ -46,217 +46,224 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
       onSetFieldValue(key, value);
     }
   }, [channelFieldsObject, onSetFieldValue, outputData]);
+
   return (
     <div className="flex flex-col gap-4 p-4">
-      <div className="flex flex-row justify-between">
+      {values.format.toLowerCase() !== "ftp" ? (
-        <label htmlFor="backoffice" className="block mb-2 font-medium">
-          Back Office URL
-        </label>
-        <Field
-          name={"backOfficeURL"}
-          type="text"
-          id="backoffice"
-          placeholder="https://www.backoffice.com"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="username" className="block mb-2 font-medium">
-          Username
-        </label>
-        <Field
-          name={"username"}
-          type="text"
-          id="username"
-          placeholder="Back office username"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="password">Password</label>
-        <Field
-          name={"password"}
-          type={"password"}
-          id="password"
-          placeholder="Back office password"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
-        <Field
-          name={"readTimeoutSeconds"}
-          type="number"
-          id="readTimeoutSeconds"
-          placeholder="https://example.com"
-          className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-        <Field
-          name={"connectTimeoutSeconds"}
-          type="number"
-          id="connectTimeoutSeconds"
-          className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-        />
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="overviewQuality">Overview quality and scale</label>
-        <Field
-          name={"overviewQuality"}
-          as="select"
-          id="overviewQuality"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"HIGH"}>High</option>
-          <option value={"MEDIUM"}>Medium</option>
-          <option value={"LOW"}>Low</option>
-        </Field>
-      </div>
-      <div className="flex flex-row justify-between">
-        <label htmlFor="cropSizeFactor">Crop Size Factor</label>
-        <Field
-          name={"cropSizeFactor"}
-          as="select"
-          id="cropSizeFactor"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-        >
-          <option value={"FULL"}>Full</option>
-          <option value={"3/4"}>3/4</option>
-          <option value={"1/2"}>1/2</option>
-          <option value={"1/4"}>1/4</option>
-        </Field>
-      </div>
-      {values.format.toLowerCase() === "utmc" && (
         <>
-          <div className="border-b border-gray-500 my-3">
-            <h2 className="font-bold">{values.format} Constants</h2>
-          </div>
-
           <div className="flex flex-row justify-between">
-            <label htmlFor="SCID">Source ID / Camera ID</label>
+            <label htmlFor="backoffice" className="block mb-2 font-medium">
+              Back Office URL
+            </label>
             <Field
-              name={"SCID"}
+              name={"backOfficeURL"}
               type="text"
-              id="SCID"
+              id="backoffice"
-              placeholder="DEF345"
+              placeholder="https://www.backoffice.com"
-              className={`p-1.5 border ${
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-                errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-              } rounded-lg w-full md:w-60`}
             />
           </div>
           <div className="flex flex-row justify-between">
-            <label htmlFor="timestampSource">Timestamp Source</label>
+            <label htmlFor="username" className="block mb-2 font-medium">
+              Username
+            </label>
             <Field
-              name={"timestampSource"}
+              name={"username"}
+              type="text"
+              id="username"
+              placeholder="Back office username"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="password">Password</label>
+            <Field
+              name={"password"}
+              type={"password"}
+              id="password"
+              placeholder="Back office password"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+            <Field
+              name={"readTimeoutSeconds"}
+              type="number"
+              id="readTimeoutSeconds"
+              placeholder="https://example.com"
+              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+            <Field
+              name={"connectTimeoutSeconds"}
+              type="number"
+              id="connectTimeoutSeconds"
+              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
+            />
+          </div>
+          <div className="flex flex-row justify-between">
+            <label htmlFor="overviewQuality">Overview quality and scale</label>
+            <Field
+              name={"overviewQuality"}
               as="select"
-              id="timestampSource"
+              id="overviewQuality"
               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={"HIGH"}>High</option>
-              <option value={"local"}>Local</option>
+              <option value={"MEDIUM"}>Medium</option>
+              <option value={"LOW"}>Low</option>
             </Field>
           </div>
           <div className="flex flex-row justify-between">
-            <label htmlFor="GPSFormat">GPS Format</label>
+            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
             <Field
-              name={"GPSFormat"}
+              name={"cropSizeFactor"}
               as="select"
-              id="GPSFormat"
+              id="cropSizeFactor"
               className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
             >
-              <option value={"Minutes"}>Minutes</option>
+              <option value={"FULL"}>Full</option>
-              <option value={"Decimal Degrees"}>Decimal degrees</option>
+              <option value={"3/4"}>3/4</option>
+              <option value={"1/2"}>1/2</option>
+              <option value={"1/4"}>1/4</option>
             </Field>
           </div>
+          {values.format.toLowerCase() === "utmc" && (
+            <>
+              <div className="border-b border-gray-500 my-3">
+                <h2 className="font-bold">{values.format} Constants</h2>
+              </div>
+
+              <div className="flex flex-row justify-between">
+                <label htmlFor="SCID">Source ID / Camera ID</label>
+                <Field
+                  name={"SCID"}
+                  type="text"
+                  id="SCID"
+                  placeholder="DEF345"
+                  className={`p-1.5 border ${
+                    errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                  } rounded-lg w-full md:w-60`}
+                />
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="timestampSource">Timestamp Source</label>
+                <Field
+                  name={"timestampSource"}
+                  as="select"
+                  id="timestampSource"
+                  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>
+                </Field>
+              </div>
+              <div className="flex flex-row justify-between">
+                <label htmlFor="GPSFormat">GPS Format</label>
+                <Field
+                  name={"GPSFormat"}
+                  as="select"
+                  id="GPSFormat"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  <option value={"Minutes"}>Minutes</option>
+                  <option value={"Decimal Degrees"}>Decimal degrees</option>
+                </Field>
+              </div>
+            </>
+          )}
+          {values.format?.toLowerCase() === "bof2" && (
+            <>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Constants</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
+                  <Field
+                    name={"FFID"}
+                    type="text"
+                    id="FFID"
+                    placeholder="ABC123"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="SCID">Source ID / Camera ID</label>
+                  <Field
+                    name={"SCID"}
+                    type="text"
+                    id="SCID"
+                    placeholder="DEF345"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="timestampSource">Timestamp Source</label>
+                  <Field
+                    name={"timestampSource"}
+                    as="select"
+                    id="timestampSource"
+                    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>
+                  </Field>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    id="GPSFormat"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                  >
+                    <option value={"Minutes"}>Minutes</option>
+                    <option value={"Decimal Degrees"}>Decimal degrees</option>
+                  </Field>
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                  <Field
+                    name={"LID1"}
+                    type="text"
+                    id="LID1"
+                    placeholder="10"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+                <div className="flex flex-row justify-between">
+                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                  <Field
+                    name={"LID2"}
+                    type="text"
+                    id="LID2"
+                    placeholder="20"
+                    className={`p-1.5 border ${
+                      errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                    } rounded-lg w-full md:w-60`}
+                  />
+                </div>
+              </div>
+            </>
+          )}
         </>
-      )}
+      ) : (
-      {values.format?.toLowerCase() === "bof2" && (
+        <></>
-        <>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Constants</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="FFID">Feed ID / Force ID</label>
-              <Field
-                name={"FFID"}
-                type="text"
-                id="FFID"
-                placeholder="ABC123"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="SCID">Source ID / Camera ID</label>
-              <Field
-                name={"SCID"}
-                type="text"
-                id="SCID"
-                placeholder="DEF345"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="timestampSource">Timestamp Source</label>
-              <Field
-                name={"timestampSource"}
-                as="select"
-                id="timestampSource"
-                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>
-              </Field>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="GPSFormat">GPS Format</label>
-              <Field
-                name={"GPSFormat"}
-                as="select"
-                id="GPSFormat"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                <option value={"Minutes"}>Minutes</option>
-                <option value={"Decimal Degrees"}>Decimal degrees</option>
-              </Field>
-            </div>
-          </div>
-          <div className="space-y-3">
-            <div className="border-b border-gray-500 my-3">
-              <h2 className="font-bold">{values.format} Lane ID Config</h2>
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
-              <Field
-                name={"LID1"}
-                type="text"
-                id="LID1"
-                placeholder="10"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-            <div className="flex flex-row justify-between">
-              <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
-              <Field
-                name={"LID2"}
-                type="text"
-                id="LID2"
-                placeholder="20"
-                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-            </div>
-          </div>
-        </>
       )}
     </div>
   );

src/features/output/components/OutputForms.tsx

@@ -10,6 +10,7 @@ const OutputForms = () => {
   const { bearerMutation } = usePostBearerConfig();
   const { dispatcherQuery, dispatcherMutation } = useDispatcherConfig();
 
+  const isLoading = dispatcherQuery?.isLoading;
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;
@@ -38,6 +39,8 @@ const OutputForms = () => {
     laneId: "",
     LID1: "",
     LID2: "",
+
+    // ftp - fields
   };
 
   const handleSubmit = async (values: FormTypes) => {
@@ -85,6 +88,10 @@ const OutputForms = () => {
     }
   };
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
       <Form className="grid grid-cols-1 md:grid-cols-2">

src/features/output/hooks/useBearer.ts

@@ -1,8 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { BearerTypeFields } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 const fetchBearerConfig = async (bearerConfig: string) => {
-  const response = await fetch(`http://100.115.148.59/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${bearerConfig}`, {
     method: "GET",
   });
   if (!response.ok) {
@@ -37,7 +38,7 @@ const postBearerConfig = async (config: BearerTypeFields) => {
       },
     ],
   };
-  const response = await fetch("http://192.168.202.121/api/update-config", {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(channelConfigPayload),
   });

src/features/output/hooks/useDispatcherConfig.ts

@@ -1,8 +1,9 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { DispatcherConfig } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 const getDispatcherConfig = async () => {
-  const response = await fetch(`http://192.168.202.121/api/fetch-config?id=Dispatcher0`);
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0`);
   if (!response.ok) {
     throw new Error("Network response was not ok");
   }
@@ -23,7 +24,7 @@ const postDispatcherConfig = async (config: DispatcherConfig) => {
       },
     ],
   };
-  const response = await fetch(`http://192.168.202.121/api/update-config`, {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });

src/features/output/hooks/useOptionalConstants.ts

@@ -1,9 +1,10 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import type { OptionalBOF2Constants } from "../../../types/types";
+import { CAMBASE } from "../../../utils/config";
 
 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`);
+  const response = await fetch(`${CAMBASE}/api/fetch-config?id=Dispatcher0-${format}-constants`);
   if (!response.ok) {
     throw new Error("Network response was not ok");
   }
@@ -37,7 +38,7 @@ const postOptionalConstants = async (config: OptionalBOF2Constants) => {
     fields: fields,
   };
 
-  const response = await fetch(`http://100.115.148.59/api/update-config`, {
+  const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });

src/utils/config.ts

@@ -0,0 +1 @@
+export const CAMBASE = import.meta.env.VITE_BASEURL;