From 3c10ff82cb66dcd5b666fdb03d0d5482486356c0 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Thu, 27 Nov 2025 09:43:09 +0000 Subject: [PATCH] - updated base for endpoints - added loading states - need to add new form for ftp type --- .../dashboard/components/SystemHealth.tsx | 4 +- .../dashboard/hooks/useGetSystemHealth.ts | 3 +- .../output/components/ChannelFields.tsx | 383 +++++++++--------- .../output/components/OutputForms.tsx | 7 + src/features/output/hooks/useBearer.ts | 5 +- .../output/hooks/useDispatcherConfig.ts | 5 +- ...lConstants.tsx => useOptionalConstants.ts} | 5 +- src/utils/config.ts | 1 + 8 files changed, 217 insertions(+), 196 deletions(-) rename src/features/output/hooks/{useOptionalConstants.tsx => useOptionalConstants.ts} (88%) create mode 100644 src/utils/config.ts diff --git a/src/features/dashboard/components/SystemHealth.tsx b/src/features/dashboard/components/SystemHealth.tsx index f6cee37..664ac0b 100644 --- a/src/features/dashboard/components/SystemHealth.tsx +++ b/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 Error loading system health.; } @@ -31,7 +33,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
{statuses?.map((status: SystemHealthStatus) => ( -
+
{status.id}
))} diff --git a/src/features/dashboard/hooks/useGetSystemHealth.ts b/src/features/dashboard/hooks/useGetSystemHealth.ts index d9599d6..afbbc3b 100644 --- a/src/features/dashboard/hooks/useGetSystemHealth.ts +++ b/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(); }; diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx index b3ab4c4..1633ac8 100644 --- a/src/features/output/components/ChannelFields.tsx +++ b/src/features/output/components/ChannelFields.tsx @@ -46,217 +46,224 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }: onSetFieldValue(key, value); } }, [channelFieldsObject, onSetFieldValue, outputData]); + return (
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - - - - -
-
- - - - - - - -
- {values.format.toLowerCase() === "utmc" && ( + {values.format.toLowerCase() !== "ftp" ? ( <> -
-

{values.format} Constants

-
-
- +
- + +
+
+ + +
+
+ + +
+
+ + +
+
+ + - - + + +
- + - - + + + +
+ {values.format.toLowerCase() === "utmc" && ( + <> +
+

{values.format} Constants

+
+ +
+ + +
+
+ + + + + +
+
+ + + + + +
+ + )} + {values.format?.toLowerCase() === "bof2" && ( + <> +
+
+

{values.format} Constants

+
+
+ + +
+
+ + +
+
+ + + + + +
+
+ + + + + +
+
+
+
+

{values.format} Lane ID Config

+
+
+ + +
+
+ + +
+
+ + )} - )} - {values.format?.toLowerCase() === "bof2" && ( - <> -
-
-

{values.format} Constants

-
-
- - -
-
- - -
-
- - - - - -
-
- - - - - -
-
-
-
-

{values.format} Lane ID Config

-
-
- - -
-
- - -
-
- + ) : ( + <> )}
); diff --git a/src/features/output/components/OutputForms.tsx b/src/features/output/components/OutputForms.tsx index aa52ece..8ab9e50 100644 --- a/src/features/output/components/OutputForms.tsx +++ b/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
Loading...
; + } + return (
diff --git a/src/features/output/hooks/useBearer.ts b/src/features/output/hooks/useBearer.ts index 33c9884..a0c9fd0 100644 --- a/src/features/output/hooks/useBearer.ts +++ b/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), }); diff --git a/src/features/output/hooks/useDispatcherConfig.ts b/src/features/output/hooks/useDispatcherConfig.ts index aa9021b..af9b82c 100644 --- a/src/features/output/hooks/useDispatcherConfig.ts +++ b/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), }); diff --git a/src/features/output/hooks/useOptionalConstants.tsx b/src/features/output/hooks/useOptionalConstants.ts similarity index 88% rename from src/features/output/hooks/useOptionalConstants.tsx rename to src/features/output/hooks/useOptionalConstants.ts index 2ddb1f8..12b92fa 100644 --- a/src/features/output/hooks/useOptionalConstants.tsx +++ b/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), }); diff --git a/src/utils/config.ts b/src/utils/config.ts new file mode 100644 index 0000000..a8ef457 --- /dev/null +++ b/src/utils/config.ts @@ -0,0 +1 @@ +export const CAMBASE = import.meta.env.VITE_BASEURL;