cryostatio · andrewazores · Sep 28, 2021 · Sep 21, 2021 · Sep 22, 2021 · Sep 23, 2021
diff --git a/src/app/About/About.tsx b/src/app/About/About.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import cryostatLogoHorizontal from '@app/assets/logo-cryostat-3-horizontal.svg';
+import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
+import { AboutDescription, CRYOSTAT_TRADEMARK } from './AboutDescription';
+import { Brand, Card, CardBody, CardFooter, CardHeader } from '@patternfly/react-core';
+
+export const About = () => {
+  return (
+    <BreadcrumbPage pageTitle="About">
+      <Card>
+        <CardHeader>
+          <Brand alt="Cryostat" src={cryostatLogoHorizontal} className="cryostat-logo" />
+        </CardHeader>
+        <CardBody>
+          <AboutDescription />
+        </CardBody>
+        <CardFooter>{CRYOSTAT_TRADEMARK}</CardFooter>
+      </Card>
+    </BreadcrumbPage>
+  );
+};
diff --git a/src/app/About/AboutCryostatModal.tsx b/src/app/About/AboutCryostatModal.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { AboutModal } from "@patternfly/react-core"
+import React from "react"
+import cryostatLogoWhite from '@app/assets/logo-cryostat-3.svg';
+import { AboutDescription, CRYOSTAT_TRADEMARK } from "./AboutDescription";
+
+export const AboutCryostatModal = ({isOpen, onClose}) => {
+
+  return(<>
+    <AboutModal
+        isOpen={isOpen}
+        onClose={onClose}
+        trademark={CRYOSTAT_TRADEMARK}
+        brandImageSrc={cryostatLogoWhite}
+        brandImageAlt='Cryostat Logo'
+      >
+      <AboutDescription />
+    </AboutModal>
+    </>);
+}
diff --git a/src/app/About/AboutDescription.tsx b/src/app/About/AboutDescription.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Text, TextContent, TextList, TextListItem, TextVariants } from "@patternfly/react-core"
+import React from "react"
+import { ServiceContext } from "@app/Shared/Services/Services";
+import { NotificationsContext } from "@app/Notifications/Notifications";
+
+export const CRYOSTAT_TRADEMARK = 'Copyright The Cryostat Authors, The Universal Permissive License (UPL), Version 1.0';
+
+export const AboutDescription = () => {
+  const serviceContext = React.useContext(ServiceContext);
+  const notificationsContext = React.useContext(NotificationsContext);
+  const [cryostatVersion, setCryostatVersion] = React.useState(undefined as string | undefined);
+
+  React.useEffect(() => {
+    const sub = serviceContext.api.cryostatVersion().subscribe(setCryostatVersion);
+    return () => sub.unsubscribe();
+  }, [serviceContext])
+
+  const cryostatCommitHash = React.useMemo(() => {
+    if (!cryostatVersion) {
+      return;
+    }
+    const expr = /^(?<describe>[a-zA-Z0-9-_.]+-[0-9]+-[a-z0-9]+)(?:-dirty)?$/;
+    const result = cryostatVersion.match(expr);
+    if (!result) {
+      notificationsContext.warning('Cryostat Version Parse Failure', `Could not parse Cryostat version string '${cryostatVersion}'.`);
+      return 'main';
+    }
+    return result.groups?.describe || 'main';
+  }, [cryostatVersion, notificationsContext]);
+
+  return(<>
+      <TextContent>
+      <TextList component="dl">
+        <TextListItem component="dt">
+          Version
+        </TextListItem>
+        <TextListItem component="dd">
+          <Text
+            component={TextVariants.a}
+            target="_blank"
+            href={`https://github.com/cryostatio/cryostat/commits/${cryostatCommitHash}`}
+          >{cryostatVersion}</Text>
+        </TextListItem>
+        <TextListItem component="dt">
+          Homepage
+        </TextListItem>
+        <TextListItem component="dd">
+          <Text component={TextVariants.a} target="_blank" href='https://cryostat.io'>cryostat.io</Text>
+        </TextListItem>
+        <TextListItem component="dt">
+          Bugs
+        </TextListItem>
+        <TextListItem component="dd">
+          <Text>
+          <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/issues'>Known Issues</Text>
+          &nbsp;|&nbsp;
+          <Text
+            component={TextVariants.a}
+            target="_blank"
+            href={`https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+${cryostatVersion}`}
+          >
+            File a Report
+          </Text>
+          </Text>
+        </TextListItem>
+        <TextListItem component="dt">
+          Mailing List
+        </TextListItem>
+        <TextListItem component="dd">
+          <Text component={TextVariants.a} target="_blank" href='https://groups.google.com/g/cryostat-development'>Google Groups</Text>
+        </TextListItem>
+        <TextListItem component="dt">
+          Open Source License
+        </TextListItem>
+        <TextListItem component="dd">
+          <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/blob/main/LICENSE'>License</Text>
+        </TextListItem>
+      </TextList>
+    </TextContent>
+    </>);
+}
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -40,10 +40,10 @@ import * as _ from 'lodash';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { NotificationCenter } from '@app/Notifications/NotificationCenter';
 import { IAppRoute, routes } from '@app/routes';
-import { AboutModal, Alert, AlertGroup, AlertVariant, AlertActionCloseButton,
+import { Alert, AlertGroup, AlertVariant, AlertActionCloseButton,
   Brand, Button, Nav, NavItem, NavList, NotificationBadge, Page, PageHeader,
   PageHeaderTools, PageHeaderToolsGroup, PageHeaderToolsItem, PageSidebar,
-  SkipToContent, Text, TextContent, TextList, TextListItem, TextVariants
+  SkipToContent
 } from '@patternfly/react-core';
 import { BellIcon, CogIcon, HelpIcon } from '@patternfly/react-icons';
 import { map } from 'rxjs/operators';
@@ -52,7 +52,7 @@ import { Notification, Notifications, NotificationsContext } from '@app/Notifica
 import { AuthModal } from './AuthModal';
 import { SslErrorModal } from './SslErrorModal';
 import cryostatLogoHorizontal from '@app/assets/logo-cryostat-3-horizontal.svg';
-import cryostatLogoWhite from '@app/assets/logo-cryostat-3.svg';
+import { AboutCryostatModal } from '@app/About/AboutCryostatModal';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -72,7 +72,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
   const [showSslErrorModal, setShowSslErrorModal] = React.useState(false);
   const [aboutModalOpen, setAboutModalOpen] = React.useState(false);
   const [isNotificationDrawerExpanded, setNotificationDrawerExpanded] = React.useState(false);
-  const [cryostatVersion, setCryostatVersion] = React.useState(undefined as string | undefined);
   const [notifications, setNotifications] = React.useState([] as Notification[]);
   const [unreadNotificationsCount, setUnreadNotificationsCount] = React.useState(0);
   const [errorNotificationsCount, setErrorNotificationsCount] = React.useState(0);
@@ -85,24 +84,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
     return () => sub.unsubscribe();
   }, [serviceContext.target]);
 
-  React.useEffect(() => {
-    const sub = serviceContext.api.cryostatVersion().subscribe(setCryostatVersion);
-    return () => sub.unsubscribe();
-  })
-
-  const cryostatCommitHash = React.useMemo(() => {
-    if (!cryostatVersion) {
-      return;
-    }
-    const expr = /^(?<describe>[a-zA-Z0-9-_.]+-[0-9]+-[a-z0-9]+)(?:-dirty)?$/;
-    const result = cryostatVersion.match(expr);
-    if (!result) {
-      notificationsContext.warning('Cryostat Version Parse Failure', `Could not parse Cryostat version string '${cryostatVersion}'.`);
-      return 'main';
-    }
-    return result.groups?.describe || 'main';
-  }, [cryostatVersion]);
-
   React.useEffect(() => {
     const sub = notificationsContext.notifications().subscribe(setNotifications);
     return () => sub.unsubscribe();
@@ -201,62 +182,10 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
       onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
       headerTools={HeaderTools}
     />
-    <AboutModal
+    <AboutCryostatModal
       isOpen={aboutModalOpen}
       onClose={handleAboutModalToggle}
-      trademark='Copyright The Cryostat Authors, The Universal Permissive License (UPL), Version 1.0'
-      brandImageSrc={cryostatLogoWhite}
-      brandImageAlt='Cryostat Logo'
-    >
-      <TextContent>
-        <TextList component="dl">
-          <TextListItem component="dt">
-            Version
-          </TextListItem>
-          <TextListItem component="dd">
-            <Text
-              component={TextVariants.a}
-              target="_blank"
-              href={`https://github.com/cryostatio/cryostat/commits/${cryostatCommitHash}`}
-            >{cryostatVersion}</Text>
-          </TextListItem>
-          <TextListItem component="dt">
-            Homepage
-          </TextListItem>
-          <TextListItem component="dd">
-            <Text component={TextVariants.a} target="_blank" href='https://cryostat.io'>cryostat.io</Text>
-          </TextListItem>
-          <TextListItem component="dt">
-            Bugs
-          </TextListItem>
-          <TextListItem component="dd">
-            <Text>
-            <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/issues'>Known Issues</Text>
-            &nbsp;|&nbsp;
-            <Text
-              component={TextVariants.a}
-              target="_blank"
-              href={`https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+${cryostatVersion}`}
-            >
-              File a Report
-            </Text>
-            </Text>
-          </TextListItem>
-          <TextListItem component="dt">
-            Mailing List
-          </TextListItem>
-          <TextListItem component="dd">
-            <Text component={TextVariants.a} target="_blank" href='https://groups.google.com/g/cryostat-development'>Google Groups</Text>
-          </TextListItem>
-          <TextListItem component="dt">
-            Open Source License
-          </TextListItem>
-          <TextListItem component="dd">
-            <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/blob/main/LICENSE'>License</Text>
-          </TextListItem>
-        </TextList>
-      </TextContent>
-    </AboutModal>
+    />
   </>);
 
   const isActiveRoute = (route: IAppRoute): boolean => {

diff --git a/src/app/NotFound/NotFound.tsx b/src/app/NotFound/NotFound.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