feat(pages): add Diagnostics views (#485)

* feat(pages): add Diagnostics views

* add the same Diagnostic page version checks to the Heap and Thread dump pages

* prettier

* add function to check version, and display spinner while fetching version data

* run prettier

* update cryostat-web to latest

* fix loading when cryostat not selected

* add unit tests for the version check function

* add unit tests for the Diagnostics page

Author: aptmac

console-extensions.json

@@ -94,6 +94,30 @@
       "path": "/cryostat/instrumentation",
       "component": { "$codeRef": "InstrumentationPage" }
     }
+  },
+    {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/diagnostics",
+      "component": { "$codeRef": "DiagnosticsPage" }
+    }
+  },
+    {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/thread-dumps",
+      "component": { "$codeRef": "ThreadDumpsPage" }
+    }
+  },
+    {
+    "type": "console.page/route",
+    "properties": {
+      "exact": true,
+      "path": "/cryostat/heapdumps",
+      "component": { "$codeRef": "HeapDumpsPage" }
+    }
   },
   {
     "type": "console.page/route",
@@ -214,6 +238,44 @@
       "section": "cryostat-section",
       "insertAfter": "instrumentation"
     }
+  },
+    {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "diagnostics",
+      "name": "%plugin__cryostat-plugin~Navigation.Diagnostics%",
+      "href": "/cryostat/diagnostics",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+    {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "threaddumps",
+      "name": "%plugin__cryostat-plugin~Navigation.ThreadDumps%",
+      "href": "/cryostat/thread-dumps",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+    {
+    "type": "console.navigation/href",
+    "properties": {
+      "id": "heapdumps",
+      "name": "%plugin__cryostat-plugin~Navigation.HeapDumps%",
+      "href": "/cryostat/heapdumps",
+      "perspective": "admin",
+      "section": "cryostat-section"
+    }
+  },
+  {
+    "type": "console.navigation/separator",
+    "properties": {
+      "id": "pf-separator",
+      "section": "cryostat-section",
+      "insertAfter": "heapdumps"
+    }
   },
   {
     "type": "console.navigation/href",

jest.config.js

@@ -55,7 +55,7 @@ module.exports = {
   // An array of regexp pattern strings that are matched against all source file paths before transformation.
   // If the file path matches any of the patterns, it will not be transformed.
   transformIgnorePatterns: [
-    "/node_modules/(?!(@openshift-console\\S*?|@openshift/dynamic-plugin-sdk-utils|@patternfly|d3|d3-array|internmap|delaunator|robust-predicates|uuid))",
+    "/node_modules/(?!(@openshift-console\\S*?|@openshift/dynamic-plugin-sdk-utils|@patternfly|d3|d3-array|internmap|delaunator|nanoid|robust-predicates|uuid))",
   ],
 
   roots: ['<rootDir>/src']

locales/en/common.json

@@ -9,6 +9,9 @@
   "Navigation.Archives": "Archives",
   "Navigation.Events": "Events",
   "Navigation.Instrumentation": "Instrumentation",
+  "Navigation.Diagnostics": "Diagnostics",
+  "Navigation.HeapDumps": "Analyze Heap Dumps",
+  "Navigation.ThreadDumps": "Analyze Thread Dumps",
   "Navigation.Security": "Security",
   "Navigation.About": "About",
   "DEPLOYMENT_ACTION_TITLE": "Register with Cryostat",
@@ -18,5 +21,8 @@
   "DEPLOYMENT_ACTION_NAMESPACE_NOT_A_TARGET_NAMESPACE": "Warning: {{deploymentNamespace}} is not in the list of target namespaces for {{cryostatName}}",
   "DEPLOYMENT_ACTION_NO_UPDATE_PERMISSIONS": "Warning: user does not have permissions to update deployment: {{deploymentName}}",
   "DEPLOYMENT_ACTION_NO_CRYOSTAT_OPERATOR_CR": "Warning: this registration feature requires at least one Cryostat custom resource associated with a Cryostat Operator",
-  "DEPLOYMENT_ACTION_HELM_CRYOSTAT_SELECTED": "Warning: {{cryostatName}} was installed using a Helm chart. This feature requires the Cryostat Operator for dynamic attachment."
+  "DEPLOYMENT_ACTION_HELM_CRYOSTAT_SELECTED": "Warning: {{cryostatName}} was installed using a Helm chart. This feature requires the Cryostat Operator for dynamic attachment.",
+  "FEATURE_NOT_AVAILABLE_PAGE_TITLE": "Cryostat update is required to use this feature",
+  "CURRENT_VERSION": "Current Version: {{currentVersion}}",
+  "REQUIRED_VERSION": "Required Version: {{requiredVersion}}"
 }

package.json

@@ -140,6 +140,9 @@
       "ArchivesPage": "./openshift/pages/ArchivesPage",
       "EventsPage": "./openshift/pages/EventsPage",
       "InstrumentationPage": "./openshift/pages/InstrumentationPage",
+      "DiagnosticsPage": "./openshift/pages/DiagnosticsPage",
+      "ThreadDumpsPage": "./openshift/pages/ThreadDumpsPage",
+      "HeapDumpsPage": "./openshift/pages/HeapDumpsPage",
       "SecurityPage": "./openshift/pages/SecurityPage",
       "DeploymentLabelActionProvider": "./openshift/actions/DeploymentLabelAction/DeploymentLabelActionProvider",
       "getDeploymentDecorator": "./openshift/actions/DeploymentLabelAction/getDeploymentDecorator"

src/cryostat-web

@@ -63,7 +63,6 @@ import _ from 'lodash';
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import { map, Observable, of } from 'rxjs';
-import { CryostatController } from './CryostatController';
 import CryostatSelector from './CryostatSelector';
 
 export const SESSIONSTORAGE_SVC_NS_KEY = 'cryostat-svc-ns';
@@ -132,7 +131,7 @@ const chartControllers = (svcs: Services): Controllers => {
   };
 };
 
-const LoadingState: React.FC = () => {
+export const LoadingState: React.FC = () => {
   return (
     <Bullseye>
       <Spinner />
@@ -254,7 +253,7 @@ const InstancedContainer: React.FC<{
           <ChartContext.Provider value={chartContext}>
             <NotificationsContext.Provider value={NotificationsInstance}>
               <NotificationGroup />
-              <CryostatController key={`${service.namespace}-${service.name}`}>{children}</CryostatController>
+              {children}
             </NotificationsContext.Provider>
           </ChartContext.Provider>
         </ServiceContext.Provider>
@@ -342,6 +341,20 @@ const NamespacedContainer: React.FC<{ searchNamespace: string; children: React.R
     (service: CryostatService) => {
       sessionStorage.setItem(SESSIONSTORAGE_SVC_NS_KEY, service.namespace);
       sessionStorage.setItem(SESSIONSTORAGE_SVC_NAME_KEY, service.name);
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: SESSIONSTORAGE_SVC_NS_KEY,
+          newValue: service.namespace,
+          storageArea: sessionStorage,
+        }),
+      );
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: SESSIONSTORAGE_SVC_NAME_KEY,
+          newValue: service.name,
+          storageArea: sessionStorage,
+        }),
+      );
       setService(service);
     },
     [setService],
@@ -373,7 +386,6 @@ const NamespacedContainer: React.FC<{ searchNamespace: string; children: React.R
     () => !service || (service.namespace == NO_INSTANCE.namespace && service.name == NO_INSTANCE.name),
     [service],
   );
-
   return (
     <>
       <CryostatSelector

src/openshift/components/CryostatContainer.tsx

@@ -18,11 +18,6 @@ import { CryostatContainer } from '@console-plugin/components/CryostatContainer'
 import '@app/app.css';
 
 export default function DashboardPage() {
-  // The Kiali plugin here runs a number of functions
-  // Including:
-  // - setting the router basename
-  // - initializing listeners
-
   return (
     <CryostatContainer>
       <Dashboard />

src/openshift/components/CryostatController.tsx

@@ -0,0 +1,102 @@
+/*
+ * Copyright The Cryostat Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CaptureDiagnostics } from '@app/Diagnostics/CaptureDiagnostics';
+import {
+  CryostatContainer,
+  LoadingState,
+  SESSIONSTORAGE_SVC_NAME_KEY,
+  SESSIONSTORAGE_SVC_NS_KEY,
+} from '@console-plugin/components/CryostatContainer';
+import '@app/app.css';
+import { getOperatorCryostatVersion, isVersionEqualOrGreaterThan } from '@console-plugin/utils/utils';
+import { K8sResourceKind, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import React from 'react';
+import { FeatureNotAvailablePage } from './FeatureNotAvailablePage';
+
+export default function DiagnosticsPage() {
+  const [sessionCryostatName, setSessionCryostatName] = React.useState(() => {
+    return sessionStorage.getItem(SESSIONSTORAGE_SVC_NAME_KEY) || '';
+  });
+  const [sessionCryostatNs, setSessionCryostatNs] = React.useState(() => {
+    return sessionStorage.getItem(SESSIONSTORAGE_SVC_NS_KEY) || '';
+  });
+  const [version, setVersion] = React.useState('');
+  const [cryostats, cryostatsLoaded] = useK8sWatchResource<K8sResourceKind[]>({
+    groupVersionKind: {
+      group: '',
+      kind: 'Service',
+      version: 'v1',
+    },
+    selector: {
+      matchLabels: {
+        'app.kubernetes.io/part-of': 'cryostat',
+        'app.kubernetes.io/component': 'cryostat',
+      },
+    },
+    isList: true,
+  });
+  const [csvs, csvsLoaded] = useK8sWatchResource<K8sResourceKind[]>({
+    groupVersionKind: {
+      group: 'operators.coreos.com',
+      kind: 'ClusterServiceVersion',
+      version: 'v1alpha1',
+    },
+    isList: true,
+  });
+
+  React.useEffect(() => {
+    const handleStorageChange = (event) => {
+      if (event.key === SESSIONSTORAGE_SVC_NAME_KEY && event.newValue !== sessionCryostatName) {
+        setSessionCryostatName(event.newValue);
+      }
+      if (event.key === SESSIONSTORAGE_SVC_NS_KEY && event.newValue !== sessionCryostatNs) {
+        setSessionCryostatNs(event.newValue);
+      }
+    };
+    window.addEventListener('storage', handleStorageChange);
+  }, [sessionCryostatName, sessionCryostatNs]);
+
+  React.useEffect(() => {
+    const currentCryostat = cryostats.find(
+      (cryostat) => cryostat.metadata?.name == sessionCryostatName && cryostat.metadata?.namespace == sessionCryostatNs,
+    );
+
+    if ((!cryostatsLoaded && !csvsLoaded) || !currentCryostat) {
+      return;
+    }
+
+    if (
+      currentCryostat.metadata?.labels &&
+      currentCryostat.metadata?.labels['app.kubernetes.io/managed-by'] == 'Helm'
+    ) {
+      setVersion(currentCryostat.metadata?.labels['app.kubernetes.io/version']);
+    } else {
+      setVersion(getOperatorCryostatVersion(sessionCryostatNs, csvs));
+    }
+  }, [cryostats, cryostatsLoaded, version, sessionCryostatName, sessionCryostatNs, csvs, csvsLoaded]);
+
+  return (
+    <CryostatContainer>
+      {!version ? (
+        <LoadingState />
+      ) : !isVersionEqualOrGreaterThan(version, '4.1.0') ? (
+        <FeatureNotAvailablePage currentVersion={version} requiredVersion={'4.1.0'}></FeatureNotAvailablePage>
+      ) : (
+        <CaptureDiagnostics></CaptureDiagnostics>
+      )}
+    </CryostatContainer>
+  );
+}