feat(about): link to commit hash (#1315)

locales/en/public.json

@@ -4,6 +4,8 @@
   },
   "AboutDescription": {
     "BUGS": "Bugs",
+    "BUILD_INFO": "Build Information",
+    "COMMIT": "commit {{ hash }}",
     "FILE_A_REPORT": "File a report",
     "HOMEPAGE": "Homepage",
     "KNOWN_ISSUES": "Known issues",

src/app/About/AboutDescription.tsx

@@ -15,8 +15,10 @@
  */
 
 import build from '@app/build.json';
+import { BuildInfo } from '@app/Shared/Services/api.types';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Text, TextContent, TextList, TextListItem, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,14 +27,16 @@ export const AboutDescription: React.FC = () => {
   const serviceContext = React.useContext(ServiceContext);
   const notificationsContext = React.useContext(NotificationsContext);
   const [cryostatVersion, setCryostatVersion] = React.useState(undefined as string | undefined);
+  const [buildInfo, setBuildInfo] = React.useState<BuildInfo>({ git: { hash: '' } });
   const { t } = useTranslation();
+  const addSubscription = useSubscriptions();
 
   React.useEffect(() => {
-    const sub = serviceContext.api.cryostatVersion().subscribe(setCryostatVersion);
-    return () => sub.unsubscribe();
-  }, [serviceContext]);
+    addSubscription(serviceContext.api.cryostatVersion().subscribe(setCryostatVersion));
+    addSubscription(serviceContext.api.buildInfo().subscribe(setBuildInfo));
+  }, [addSubscription, serviceContext]);
 
-  const cryostatCommitHash = React.useMemo(() => {
+  const cryostatReleaseTag = React.useMemo(() => {
     if (!cryostatVersion) {
       return;
     }
@@ -55,8 +59,8 @@ export const AboutDescription: React.FC = () => {
           component={TextVariants.a}
           target="_blank"
           href={
-            cryostatCommitHash
-              ? build.releaseTagUrl.replace('__REPLACE_HASH__', cryostatCommitHash)
+            cryostatReleaseTag
+              ? build.releaseTagUrl.replace('__REPLACE_HASH__', cryostatReleaseTag)
               : build.developmentUrl
           }
         >
@@ -66,14 +70,32 @@ export const AboutDescription: React.FC = () => {
     } else {
       return <Text component={TextVariants.p}>{cryostatVersion}</Text>;
     }
-  }, [cryostatVersion, cryostatCommitHash]);
+  }, [cryostatVersion, cryostatReleaseTag]);
+
+  const buildInfoComponent = React.useMemo(() => {
+    if (build.commitUrl) {
+      return (
+        <Text
+          component={TextVariants.a}
+          target="_blank"
+          href={build.commitUrl.replace('__REPLACE_HASH__', buildInfo.git.hash)}
+        >
+          {t('AboutDescription.COMMIT', { hash: buildInfo.git.hash })}
+        </Text>
+      );
+    } else {
+      return <Text component={TextVariants.p}>{t('AboutDescription.COMMIT', { hash: buildInfo.git.hash })}</Text>;
+    }
+  }, [t, buildInfo]);
 
   return (
     <>
       <TextContent>
         <TextList component="dl">
           <TextListItem component="dt">{t('AboutDescription.VERSION')}</TextListItem>
           <TextListItem component="dd">{versionComponent}</TextListItem>
+          <TextListItem component="dt">{t('AboutDescription.BUILD_INFO')}</TextListItem>
+          <TextListItem component="dd">{buildInfoComponent}</TextListItem>
           <TextListItem component="dt">{t('AboutDescription.HOMEPAGE')}</TextListItem>
           <TextListItem component="dd">
             <Text component={TextVariants.a} target="_blank" href={build.homePageUrl}>

src/app/Shared/Services/Api.service.tsx

@@ -73,6 +73,7 @@ import {
   TargetMetadata,
   isTargetMetadata,
   MBeanMetricsResponse,
+  BuildInfo,
 } from './api.types';
 import {
   isHttpError,
@@ -91,6 +92,7 @@ import { TargetService } from './Target.service';
 export class ApiService {
   private readonly archiveEnabled = new BehaviorSubject<boolean>(true);
   private readonly cryostatVersionSubject = new ReplaySubject<string>(1);
+  private readonly buildInfoSubject = new ReplaySubject<BuildInfo>(1);
   private readonly grafanaDatasourceUrlSubject = new ReplaySubject<string>(1);
   private readonly grafanaDashboardUrlSubject = new ReplaySubject<string>(1);
 
@@ -128,6 +130,7 @@ export class ApiService {
       .pipe(
         concatMap((jsonResp) => {
           this.cryostatVersionSubject.next(jsonResp.cryostatVersion);
+          this.buildInfoSubject.next(jsonResp.build);
           const toFetch: unknown[] = [];
           const unconfigured: string[] = [];
           const unavailable: string[] = [];
@@ -737,6 +740,10 @@ export class ApiService {
     return this.cryostatVersionSubject.asObservable();
   }
 
+  buildInfo(): Observable<BuildInfo> {
+    return this.buildInfoSubject.asObservable();
+  }
+
   grafanaDatasourceUrl(): Observable<string> {
     return this.grafanaDatasourceUrlSubject.asObservable();
   }

src/app/Shared/Services/api.types.ts

@@ -23,6 +23,13 @@ export type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'v2.2' | 'v2.3' | 'v2.4' | 'v3'
 // ======================================
 // Common Resources
 // ======================================
+
+export interface BuildInfo {
+  git: {
+    hash: string;
+  };
+}
+
 export interface KeyValue {
   key: string;
   value: string;
@@ -127,6 +134,7 @@ export interface GrafanaDatasourceUrlGetResponse {
 
 export interface HealthGetResponse {
   cryostatVersion: string;
+  build: BuildInfo;
   datasourceConfigured: boolean;
   datasourceAvailable: boolean;
   dashboardConfigured: boolean;

src/app/build.json

@@ -2,6 +2,7 @@
   "productName": "Cryostat",
   "developmentUrl": "https://github.com/cryostatio/cryostat",
   "releaseTagUrl": "https://github.com/cryostatio/cryostat/releases/tag/__REPLACE_HASH__",
+  "commitUrl": "https://github.com/cryostatio/cryostat/commit/__REPLACE_HASH__",
   "homePageUrl": "https://cryostat.io",
   "blogPageUrl": "https://cryostat.io/blog",
   "documentationUrl": "https://cryostat.io/guides",