feat(applayout): add help icon and about modal (#241)

src/app/AppLayout/AppLayout.tsx

@@ -1,32 +1,32 @@
 /*
  * Copyright The Cryostat Authors
- * 
+ *
  * The Universal Permissive License (UPL), Version 1.0
- * 
+ *
  * Subject to the condition set forth below, permission is hereby granted to any
  * person obtaining a copy of this software, associated documentation and/or data
  * (collectively the "Software"), free of charge and under any and all copyright
  * rights in the Software, and any and all patent rights owned or freely
  * licensable by each licensor hereunder covering either (i) the unmodified
  * Software as contributed to or provided by such licensor, or (ii) the Larger
  * Works (as defined below), to deal in both
- * 
+ *
  * (a) the Software, and
  * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
  * one is included with the Software (each a "Larger Work" to which the Software
  * is contributed by such licensors),
- * 
+ *
  * without restriction, including without limitation the rights to copy, create
  * derivative works of, display, perform, and distribute the Software and make,
  * use, sell, offer for sale, import, export, have made, and have sold the
  * Software and the Larger Work(s), and to sublicense the foregoing rights on
  * either these or other terms.
- * 
+ *
  * This license is subject to the following condition:
  * The above copyright notice and either this complete permission notice or at
  * a minimum a reference to the UPL must be included in all copies or
  * substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -39,7 +39,10 @@ import * as React from 'react';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { IAppRoute, routes } from '@app/routes';
-import { Nav, NavItem, NavList, Page, PageHeader, PageSidebar, SkipToContent } from '@patternfly/react-core';
+import { AboutModal, Button, Nav, NavItem, NavList, Page, PageHeader,
+  PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem, PageSidebar,
+  SkipToContent, Text, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
 import { NavLink, matchPath, useLocation } from 'react-router-dom';
 import { AuthModal } from './AuthModal';
 import { SslErrorModal} from './SslErrorModal';
@@ -59,6 +62,8 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const [isNavOpenMobile, setIsNavOpenMobile] = React.useState(false);
   const [showAuthModal, setShowAuthModal] = React.useState(false);
   const [showSslErrorModal, setShowSslErrorModal] = React.useState(false);
+  const [aboutModalOpen, setAboutModalOpen] = React.useState(false);
+  const [cryostatVersion, setCryostatVersion] = React.useState('unknown');
   const location = useLocation();
 
   React.useEffect(() => {
@@ -68,6 +73,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
     return () => sub.unsubscribe();
   }, [context.target]);
 
+  React.useEffect(() => {
+    const sub = context.api.cryostatVersion().subscribe(setCryostatVersion);
+    return () => sub.unsubscribe();
+  })
+
   const dismissAuthModal = () => {
     setShowAuthModal(false);
   };
@@ -95,15 +105,75 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const mobileOnSelect = (selected) => {
     if(isMobileView) setIsNavOpenMobile(false)
   };
-  const Header = (
+  const handleAboutModalToggle = () => {
+    setAboutModalOpen(!aboutModalOpen);
+  };
+  const HeaderTools = (<>
+    <PageHeaderTools>
+      <PageHeaderToolsGroup>
+        <PageHeaderToolsItem>
+          <Button
+            onClick={handleAboutModalToggle}
+            variant='link'
+            icon={<HelpIcon color='white' size='sm' />}
+          />
+        </PageHeaderToolsItem>
+      </PageHeaderToolsGroup>
+    </PageHeaderTools>
+  </>);
+  const Header = (<>
     <PageHeader
       logo="Cryostat"
       logoProps={logoProps}
       showNavToggle
       isNavOpen={isNavOpen}
       onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
+      headerTools={HeaderTools}
     />
-  );
+    <AboutModal
+      isOpen={aboutModalOpen}
+      onClose={handleAboutModalToggle}
+      trademark='Copyright The Cryostat Authors, The Universal Permissive License (UPL), Version 1.0'
+      brandImageSrc='' // TODO
+      brandImageAlt='Cryostat Logo'
+      productName='Cryostat'
+    >
+      <TextContent>
+        <TextList component="dl">
+          <TextListItem component="dt">
+            Version
+          </TextListItem>
+          <TextListItem component="dd">
+            <Text>{cryostatVersion}</Text>
+          </TextListItem>
+          <TextListItem component="dt">
+            Homepage
+          </TextListItem>
+          <TextListItem component="dd">
+            <a href='https://cryostat.io'>cryostat.io</a>
+          </TextListItem>
+          <TextListItem component="dt">
+            Bug Reports
+          </TextListItem>
+          <TextListItem component="dd">
+            <a href='https://github.com/cryostatio/cryostat/issues'>GitHub</a>
+          </TextListItem>
+          <TextListItem component="dt">
+            Mailing List
+          </TextListItem>
+          <TextListItem component="dd">
+            <a href='https://groups.google.com/g/cryostat-development'>Google Groups</a>
+          </TextListItem>
+          <TextListItem component="dt">
+            Open Source License
+          </TextListItem>
+          <TextListItem component="dd">
+            <a href='https://github.com/cryostatio/cryostat/blob/main/LICENSE'>License</a>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+    </AboutModal>
+  </>);
 
   const isActiveRoute = (route: IAppRoute): boolean => {
     const match = matchPath(location.pathname, route.path);

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

@@ -64,6 +64,7 @@ export class ApiService {
   private readonly token = new ReplaySubject<string>(1);
   private readonly authMethod = new ReplaySubject<string>(1);
   private readonly archiveEnabled = new ReplaySubject<boolean>(1);
+  private readonly cryostatVersionSubject = new ReplaySubject<string>(1);
   private readonly grafanaDatasourceUrlSubject = new ReplaySubject<string>(1);
   private readonly grafanaDashboardUrlSubject = new ReplaySubject<string>(1);
   readonly authority: string;
@@ -94,10 +95,13 @@ export class ApiService {
       .pipe(
         concatMap(resp => from(resp.json())),
         concatMap((jsonResp: any) => {
-          if (jsonResp.dashboardAvailable && jsonResp.datasourceAvailable) {
-            return forkJoin([getDatasourceURL, getDashboardURL]);
+          if (!!jsonResp.cryostatVersion && jsonResp.dashboardAvailable && jsonResp.datasourceAvailable) {
+            return forkJoin([of(jsonResp.cryostatVersion), getDatasourceURL, getDashboardURL]);
           } else {
             const missing: string[] = [];
+            if (!jsonResp.cryostatVersion) {
+              missing.push('Cryostat version');
+            }
             if (!jsonResp.dashboardAvailable) {
               missing.push('dashboard URL');
             }
@@ -108,9 +112,11 @@ export class ApiService {
             return throwError(message);
           }}))
       .subscribe(
-        (url: any) => {
-          this.grafanaDatasourceUrlSubject.next(url[0].grafanaDatasourceUrl);
-          this.grafanaDashboardUrlSubject.next(url[1].grafanaDashboardUrl);
+        (parts: any) => {
+          console.log({parts});
+          this.cryostatVersionSubject.next(parts[0]);
+          this.grafanaDatasourceUrlSubject.next(parts[1].grafanaDatasourceUrl);
+          this.grafanaDashboardUrlSubject.next(parts[2].grafanaDashboardUrl);
         },
         err => {
           window.console.error(err);
@@ -347,6 +353,10 @@ export class ApiService {
     );
   }
 
+  cryostatVersion(): Observable<string> {
+    return this.cryostatVersionSubject.asObservable();
+  }
+
   grafanaDatasourceUrl(): Observable<string> {
     return this.grafanaDatasourceUrlSubject.asObservable();
   }