refactor: Update Status.Trans.ts to handle attribute renaming for ng environment

Author: Aloento

.env

@@ -1,4 +1,4 @@
 SD_BACKEND_URL="http://localhost:9000"
-SD_BACKEND_URI="/api/v1/component_status"
+SD_BACKEND_API="/api/v1"
 # currently NG can only use V1 API
 SD_BACKEND_NG=false

src/Services/Status.Trans.ts

@@ -15,8 +15,14 @@ const log = new Logger("Service", "Status", "Transformer");
 export function Transformer(list: StatusEntity[]): IStatusContext {
   let id = 0;
   const db = EmptyDB();
+  const ng = process.env.SD_BACKEND_NG;
 
   for (const item of list) {
+    if (ng) {
+      // @ts-expect-error
+      item.attributes = item.attrs;
+    }
+
     if (item.attributes.length < 3) {
       log.debug("Skipped Hidden Item.", item);
       continue;

src/Services/Status.tsx

@@ -95,12 +95,12 @@ export function useStatus() {
 export function StatusContext({ children }: { children: JSX.Element }) {
   const [db, setDB] = useState(DB);
   const url = process.env.SD_BACKEND_URL;
-  const uri = process.env.SD_BACKEND_URI;
+  const uri = process.env.SD_BACKEND_API;
 
   useRequest(
     async () => {
       log.info("Loading status data...");
-      const response = await fetch(`${url}${uri}`);
+      const response = await fetch(`${url}${uri}/component_status`);
       const data = await response.json();
       log.debug("Status data loaded.", data);
       return data as StatusEntity[];