feat(diagnostics): Add frontend for heap dumps

locales/en/public.json

@@ -365,20 +365,33 @@
     "DATETIME": "Date and Time"
   },
   "Diagnostics": {
-    "TARGET_THREAD_DUMPS_TAB_TITLE": "Targets"
+    "TARGET_THREAD_DUMPS_TAB_TITLE": "Targets",
+    "TARGET_HEAP_DUMPS_TAB_TITLE": "Targets"
   },
   "DiagnosticsCard": {
     "DIAGNOSTICS_ACTION_FAILURE": "Diagnostics Failure: {{kind}}",
     "DIAGNOSTICS_CARD_DESCRIPTION": "Perform diagnostic operations on the target.",
     "DIAGNOSTICS_CARD_DESCRIPTION_FULL": "Perform diagonstic operations from a list of supported operations on the target.",
     "DIAGNOSTICS_CARD_TITLE": "Diagnostics",
     "DIAGNOSTICS_GC_BUTTON": "Invoke Garbage Collection",
+    "DIAGNOSTICS_HEAP_DUMP_BUTTON": "Invoke Heap Dump",
+    "DIAGNOSTICS_HEAP_REDIRECT_BUTTON": "View collected Heap Dumps",
     "DIAGNOSTICS_THREAD_DUMP_BUTTON": "Invoke Thread Dump",
     "DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP": "View captured Thread Dumps",
     "DIAGONSTICS_THREAD_REDIRECT_BUTTON": "View collected Thread Dumps",
     "KINDS": {
       "GC": "Garbage Collection",
-      "THREAD_DUMP": "Thread Dump"
+      "HEAP_DUMP": "Heap Dump",
+      "THREADS": "Thread Dump"
+    }
+  },
+  "HeapDumps": {
+    "SEARCH_PLACEHOLDER": "Search Heap Dumps",
+    "DELETION_FAILURE_CATEGORY": "Heap Dump Deletion Failure",
+    "DELETION_FAILURE_MESSAGE": "No Heap Dump to delete.",
+    "ARIA_LABELS": {
+      "ROW_ACTION": "heap-dump-action-menu",
+      "SEARCH_INPUT": "heap-dump-search-input"
     }
   },
   "ThreadDumps": {

src/app/Dashboard/Diagnostics/DiagnosticsCard.tsx

@@ -58,7 +58,18 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
   const notifications = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
   const [running, setRunning] = React.useState(false);
+  const [heapDumpReady, setHeapDumpReady] = React.useState(false);
   const [threadDumpReady, setThreadDumpReady] = React.useState(false);
+  const [controlEnabled, setControlEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.target().subscribe({
+        next: (target) => setControlEnabled(target != null ? target.agent : false),
+        error: () => setControlEnabled(false),
+      }),
+    );
+  }, [addSubscription, serviceContext, setControlEnabled]);
 
   const handleError = React.useCallback(
     (kind, error) => {
@@ -83,6 +94,30 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
     );
   }, [addSubscription, serviceContext.api, serviceContext.target, setThreadDumpReady]);
 
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target
+        .target()
+        .pipe(
+          filter((target) => !!target),
+          first(),
+          concatMap(() => serviceContext.api.getHeapDumps()),
+        )
+        .subscribe({
+          next: (dumps) => (dumps.length > 0 ? setHeapDumpReady(true) : setHeapDumpReady(false)),
+          error: () => setHeapDumpReady(false),
+        }),
+    );
+  }, [addSubscription, serviceContext.api, serviceContext.target, setHeapDumpReady]);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.notificationChannel.messages(NotificationCategory.HeapDumpUploaded).subscribe(() => {
+        setHeapDumpReady(true);
+      }),
+    );
+  }, [addSubscription, serviceContext.notificationChannel, setHeapDumpReady]);
+
   React.useEffect(() => {
     addSubscription(
       serviceContext.notificationChannel.messages(NotificationCategory.ThreadDumpSuccess).subscribe(() => {
@@ -114,6 +149,18 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
     );
   }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
 
+  const handleHeapDump = React.useCallback(() => {
+    setRunning(true);
+    addSubscription(
+      serviceContext.api.runHeapDump(true).subscribe({
+        error: (err) => handleError(t('DiagnosticsCard.KINDS.HEAP_DUMP'), err),
+        complete: () => {
+          setRunning(false);
+        },
+      }),
+    );
+  }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
+
   const header = React.useMemo(() => {
     return (
       <CardHeader actions={{ actions: <>{...props.actions || []}</>, hasNoOffset: false, className: undefined }}>
@@ -181,6 +228,30 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
                       </ActionList>
                     </FeatureFlag>
                   </StackItem>
+                  <StackItem>
+                    <FeatureFlag level={FeatureLevel.BETA}>
+                      <ActionList>
+                        <Button
+                          variant="primary"
+                          onClick={handleHeapDump}
+                          isAriaDisabled={!controlEnabled}
+                          spinnerAriaValueText="Invoke Heap Dump"
+                          spinnerAriaLabel="invoke-heap-dump"
+                          isLoading={running}
+                        >
+                          {t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON')}
+                        </Button>
+                        <Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_REDIRECT_BUTTON')}>
+                          <Button
+                            variant="primary"
+                            isAriaDisabled={!(heapDumpReady && controlEnabled)}
+                            component={(props) => <CryostatLink {...props} to="/heapdumps" />}
+                            icon={<ListIcon />}
+                          />
+                        </Tooltip>
+                      </ActionList>
+                    </FeatureFlag>
+                  </StackItem>
                 </Stack>
               </EmptyStateFooter>
             </EmptyState>

src/app/Diagnostics/AnalyzeHeapDumps.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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 { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
+import { NullableTarget } from '@app/Shared/Services/api.types';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { NoTargetSelected } from '@app/TargetView/NoTargetSelected';
+import { TargetContextSelector } from '@app/TargetView/TargetContextSelector';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
+import { getActiveTab, switchTab } from '@app/utils/utils';
+import { Card, CardBody, Stack, StackItem, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
+import { t } from 'i18next';
+import * as React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { HeapDumpsTable } from './HeapDumpsTable';
+
+export interface AnalyzeHeapDumpsProps {}
+
+enum AnalyzeHeapDumpsTab {
+  HEAP_DUMPS = 'target-heap-dumps',
+}
+
+export const AnalyzeHeapDumps: React.FC<AnalyzeHeapDumpsProps> = ({ ...props }) => {
+  const { search, pathname } = useLocation();
+  const navigate = useNavigate();
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+
+  const [target, setTarget] = React.useState(undefined as NullableTarget);
+
+  React.useEffect(() => {
+    addSubscription(context.target.target().subscribe((t) => setTarget(t)));
+  }, [addSubscription, context.target, setTarget]);
+
+  const activeTab = React.useMemo(() => {
+    return getActiveTab(search, 'tab', Object.values(AnalyzeHeapDumpsTab), AnalyzeHeapDumpsTab.HEAP_DUMPS);
+  }, [search]);
+
+  const onTabSelect = React.useCallback(
+    (_: React.MouseEvent, key: string | number) =>
+      switchTab(navigate, pathname, search, { tabKey: 'tab', tabValue: `${key}` }),
+    [navigate, pathname, search],
+  );
+
+  const cardBody = React.useMemo(
+    () => (
+      <Tabs id="heapDumps" activeKey={activeTab} onSelect={onTabSelect} unmountOnExit>
+        <Tab
+          id="heapDumps"
+          eventKey={AnalyzeHeapDumpsTab.HEAP_DUMPS}
+          title={<TabTitleText>{t('Diagnostics.TARGET_HEAP_DUMPS_TAB_TITLE')}</TabTitleText>}
+          data-quickstart-id="heap-dumps-tab"
+        >
+          <Stack hasGutter>
+            <StackItem>
+              <TargetContextSelector />
+            </StackItem>
+            <StackItem>
+              {target ? (
+                <HeapDumpsTable />
+              ) : (
+                // FIXME this should be an "AllTargetsHeapDumpsTable" like the AllTargetsArchivedRecordingsTable
+                <NoTargetSelected />
+              )}
+            </StackItem>
+          </Stack>
+        </Tab>
+      </Tabs>
+    ),
+    [activeTab, onTabSelect, target],
+  );
+
+  return (
+    <BreadcrumbPage {...props} pageTitle="Heap Dumps">
+      <Card isFullHeight>
+        <CardBody isFilled>{cardBody}</CardBody>
+      </Card>
+    </BreadcrumbPage>
+  );
+};
+
+export default AnalyzeHeapDumps;

src/app/Diagnostics/CaptureDiagnostics.tsx

@@ -46,6 +46,17 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
   const addSubscription = useSubscriptions();
   const [running, setRunning] = React.useState(false);
   const [threadDumpReady, setThreadDumpReady] = React.useState(false);
+  const [heapDumpReady, setHeapDumpReady] = React.useState(false);
+  const [controlEnabled, setControlEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target.target().subscribe({
+        next: (target) => setControlEnabled(target != null ? target.agent : false),
+        error: () => setControlEnabled(false),
+      }),
+    );
+  }, [addSubscription, serviceContext, setControlEnabled]);
 
   const handleError = React.useCallback(
     (kind, error) => {
@@ -71,6 +82,22 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
     );
   }, [addSubscription, serviceContext.api, serviceContext.target, setThreadDumpReady]);
 
+  React.useEffect(() => {
+    addSubscription(
+      serviceContext.target
+        .target()
+        .pipe(
+          filter((target) => !!target),
+          first(),
+          concatMap(() => serviceContext.api.getHeapDumps()),
+        )
+        .subscribe({
+          next: (dumps) => (dumps.length > 0 ? setHeapDumpReady(true) : setThreadDumpReady(false)),
+          error: () => setHeapDumpReady(false),
+        }),
+    );
+  }, [addSubscription, serviceContext.api, serviceContext.target, setHeapDumpReady]);
+
   React.useEffect(() => {
     addSubscription(
       serviceContext.notificationChannel.messages(NotificationCategory.ThreadDumpSuccess).subscribe(() => {
@@ -102,6 +129,19 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
     );
   }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
 
+  const handleHeapDump = React.useCallback(() => {
+    setRunning(true);
+    addSubscription(
+      serviceContext.api.runHeapDump(true).subscribe({
+        error: (err) => handleError(t('DiagnosticsCard.KINDS.HEAP_DUMP'), err),
+        complete: () => {
+          setRunning(false);
+          setHeapDumpReady(true);
+        },
+      }),
+    );
+  }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
+
   return (
     <TargetView {...props} pageTitle="Diagnostics">
       <Grid hasGutter>
@@ -144,6 +184,28 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
                       </Tooltip>
                     </ActionList>
                   </StackItem>
+                  <StackItem>
+                    <ActionList>
+                      <Button
+                        variant="primary"
+                        isAriaDisabled={!controlEnabled}
+                        onClick={handleHeapDump}
+                        spinnerAriaValueText="Invoke Heap Dump"
+                        spinnerAriaLabel="invoke-heap-dump"
+                        isLoading={running}
+                      >
+                        {t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON')}
+                      </Button>
+                      <Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_REDIRECT_BUTTON')}>
+                        <Button
+                          variant="primary"
+                          isAriaDisabled={!heapDumpReady}
+                          component={(props) => <CryostatLink {...props} to="/heapdumps" />}
+                          icon={<ListIcon />}
+                        />
+                      </Tooltip>
+                    </ActionList>
+                  </StackItem>
                 </Stack>
               </Bullseye>
             </CardBody>