Added backend info to About dialog

ui/ui-app/src/app/components/header/AppHeaderToolbar.tsx

@@ -4,6 +4,7 @@ import { QuestionCircleIcon } from "@patternfly/react-icons";
 import { AvatarDropdown } from "@app/components";
 import { AppAboutModal, BackendInfo, FrontendInfo, IfAuth } from "@apicurio/common-ui-components";
 import { ApiDesignerConfig, useApiDesignerConfig, VersionType } from "@services/useApiDesignerConfig.ts";
+import { SystemService, useSystemService } from "@services/useSystemService.ts";
 
 
 export type AppHeaderToolbarProps = {
@@ -15,17 +16,20 @@ export const AppHeaderToolbar: FunctionComponent<AppHeaderToolbarProps> = () =>
     const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
     const config: ApiDesignerConfig = useApiDesignerConfig();
     const version: VersionType = config?.version as VersionType;
+    const system: SystemService = useSystemService();
 
     const frontendInfo: FrontendInfo = {
         ...version
     };
     const fetchBackendInfo = async (): Promise<BackendInfo> => {
-        return Promise.resolve({
-            name: "TBD",
-            description: "TBD",
-            version: "TBD",
-            builtOn: "TBD",
-            digest: "TBD"
+        return system.getInfo().then(info => {
+            return {
+                name: info.name,
+                description: info.description,
+                version: info.version,
+                builtOn: info.builtOn,
+                digest: ""
+            } as BackendInfo;
         });
     };
 

ui/ui-app/src/models/index.ts

@@ -1,2 +1,3 @@
 export * from "./designs";
+export * from "./system";
 export * from "./templates";

ui/ui-app/src/models/system/SystemInfo.ts

@@ -0,0 +1,10 @@
+
+export interface SystemInfo {
+
+    name: string;
+    description: string;
+    version: string;
+    apiVersion: string;
+    builtOn: string;
+
+}

ui/ui-app/src/models/system/index.ts

@@ -0,0 +1 @@
+export * from "./SystemInfo";

ui/ui-app/src/services/index.ts

@@ -4,5 +4,6 @@ export * from "./useAppNavigation";
 export * from "./useDesignsService";
 export * from "./useDownloadService";
 export * from "./useLocalStorageService";
+export * from "./useSystemService";
 export * from "./useTemplatesService";
 export * from "./useUrlService";

ui/ui-app/src/services/useSystemService.ts

@@ -0,0 +1,32 @@
+import { ApiDesignerConfig, useApiDesignerConfig } from "@services/useApiDesignerConfig.ts";
+import { AuthService, useAuth } from "@apicurio/common-ui-components";
+import { SystemInfo } from "@models/system/SystemInfo.ts";
+import { createEndpoint, createOptions, httpGet } from "@utils/rest.utils.ts";
+
+
+const getInfo = async (appConfig: ApiDesignerConfig, auth: AuthService, ): Promise<SystemInfo> => {
+    console.debug("[SystemService] Getting system info.");
+    const token: string | undefined = await auth.getToken();
+
+    const endpoint: string = createEndpoint(appConfig.apis.designer, "/system/info");
+    const headers: any = {
+        "Authorization": `Bearer ${token}`
+    };
+    return httpGet<SystemInfo>(endpoint, createOptions(headers));
+};
+
+export interface SystemService {
+    getInfo(): Promise<SystemInfo>;
+}
+
+
+export const useSystemService: () => SystemService = (): SystemService => {
+    const appConfig: ApiDesignerConfig = useApiDesignerConfig();
+    const auth: AuthService = useAuth();
+
+    return {
+        getInfo(): Promise<SystemInfo> {
+            return getInfo(appConfig, auth);
+        }
+    };
+};