Added REST API system/info data to the About dialog

Apicurio · Nov 6, 2023 · b4bee53 · b4bee53
1 parent 58e8b4f
commit b4bee53
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 5 deletions.
diff --git a/ui/ui-app/src/app/components/header/AppAboutModal.css b/ui/ui-app/src/app/components/header/AppAboutModal.css
@@ -0,0 +1,3 @@
+.registry-about > div {
+    padding-bottom: 0;
+}
diff --git a/ui/ui-app/src/app/components/header/AppAboutModal.tsx b/ui/ui-app/src/app/components/header/AppAboutModal.tsx
@@ -1,7 +1,10 @@
-import { FunctionComponent } from "react";
-import { AboutModal, TextContent, TextList, TextListItem } from "@patternfly/react-core";
+import { FunctionComponent, useEffect, useState } from "react";
+import { AboutModal, Text, TextContent, TextList, TextListItem, TextVariants } from "@patternfly/react-core";
 import { VersionType } from "@services/version";
 import { Services } from "@services/services.ts";
+import { SystemInfo } from "@models/systemInfo.model.ts";
+import { If } from "@app/components";
+import "./AppAboutModal.css";
 
 
 export type AppAboutModalProps = {
@@ -12,17 +15,23 @@ export type AppAboutModalProps = {
 
 export const AppAboutModal: FunctionComponent<AppAboutModalProps> = (props: AppAboutModalProps) => {
     const version: VersionType = Services.getVersionService().getVersion();
+    const [info, setInfo] = useState<SystemInfo>();
+
+    useEffect(() => {
+        Services.getSystemService().getInfo().then(setInfo);
+    }, []);
 
     return (
         <AboutModal
+            className="registry-about"
             isOpen={props.isOpen}
             onClose={props.onClose}
             trademark="&copy; 2024 Red Hat"
-            brandImageSrc="/apicurio_registry_icon_reverse.svg"
+            brandImageSrc="/apicurio_registry_logo_reverse.svg"
             brandImageAlt={version.name}
-            productName={version.name}
         >
             <TextContent>
+                <Text component={TextVariants.h2}>Web console info</Text>
                 <TextList component="dl">
                     <TextListItem component="dt">Project</TextListItem>
                     <TextListItem component="dd"><a href={version.url} target="_blank">{ version.name }</a></TextListItem>
@@ -36,6 +45,22 @@ export const AppAboutModal: FunctionComponent<AppAboutModalProps> = (props: AppA
                     <TextListItem component="dt">Digest</TextListItem>
                     <TextListItem component="dd">{ version.digest }</TextListItem>
                 </TextList>
+                <If condition={info !== undefined}>
+                    <Text component={TextVariants.h2}>Registry API info</Text>
+                    <TextList component="dl">
+                        <TextListItem component="dt">Name</TextListItem>
+                        <TextListItem component="dd">{ info?.name || "" }</TextListItem>
+
+                        <TextListItem component="dt">Description</TextListItem>
+                        <TextListItem component="dd">{ info?.description || "" }</TextListItem>
+
+                        <TextListItem component="dt">Version</TextListItem>
+                        <TextListItem component="dd">{ info?.version || "" }</TextListItem>
+
+                        <TextListItem component="dt">Built on</TextListItem>
+                        <TextListItem component="dd">{ info?.builtOn || "" }</TextListItem>
+                    </TextList>
+                </If>
             </TextContent>
         </AboutModal>
     );

diff --git a/ui/ui-app/src/models/systemInfo.model.ts b/ui/ui-app/src/models/systemInfo.model.ts
@@ -0,0 +1,8 @@
+export interface SystemInfo {
+
+    name: string;
+    description: string;
+    version: string;
+    builtOn: string;
+
+}
diff --git a/ui/ui-app/src/services/index.ts b/ui/ui-app/src/services/index.ts
@@ -7,5 +7,6 @@ export * from "./groups";
 export * from "./logger";
 export * from "./services";
 export * from "./users";
+export * from "./system";
 export * from "./url";
 export * from "./version";
diff --git a/ui/ui-app/src/services/services.ts b/ui/ui-app/src/services/services.ts
@@ -8,6 +8,7 @@ import { AuthService } from "./auth";
 import { UsersService } from "./users";
 import { AlertsService } from "./alerts";
 import { VersionService } from "@services/version";
+import { SystemService } from "@services/system";
 
 // TODO convert all of the services into React hooks
 
@@ -42,6 +43,10 @@ export class Services {
         return Services.all.admin;
     }
 
+    public static getSystemService(): SystemService {
+        return Services.all.system;
+    }
+
     public static getAuthService(): AuthService {
         return Services.all.auth;
     }
@@ -61,6 +66,7 @@ export class Services {
         version: new VersionService(),
         downloader: new DownloaderService(),
         admin: new AdminService(),
+        system: new SystemService(),
         logger: new LoggerService(),
         auth: new AuthService(),
         alerts: new AlertsService(),

diff --git a/ui/ui-app/src/services/system/index.ts b/ui/ui-app/src/services/system/index.ts
@@ -0,0 +1 @@
+export * from "./system.service.ts";
diff --git a/ui/ui-app/src/services/system/system.service.ts b/ui/ui-app/src/services/system/system.service.ts
@@ -0,0 +1,15 @@
+import { BaseService } from "../baseService";
+import { SystemInfo } from "@models/systemInfo.model.ts";
+
+/**
+ * The System service.
+ */
+export class SystemService extends BaseService {
+
+    public getInfo(): Promise<SystemInfo> {
+        this.logger?.info("[SystemService] Getting the global list of artifactTypes.");
+        const endpoint: string = this.endpoint("/system/info");
+        return this.httpGet<SystemInfo>(endpoint);
+    }
+
+}
diff --git a/ui/ui-docs/vite.config.ts b/ui/ui-docs/vite.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
     base: "",
     plugins: [react(), tsconfigPaths()],
     server: {
-        port: 8888
+        port: 8889
     }
     // define: {
     //     "process.platform": {}