Skip to content

fix(diagnostics): add tooltip when heap dump disabled, separate running states #1837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewazores merged 5 commits into from
Oct 10, 2025
Merged

fix(diagnostics): add tooltip when heap dump disabled, separate running states #1837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efcac10
fix(diagnostics): add tooltip to heap dump invocation button when dis…
andrewazores Oct 1, 2025
ab08361
fix(diagnostics): separate running states for each action
andrewazores Oct 1, 2025
4378c6c
wrap buttons in ActionListItem
andrewazores Oct 1, 2025
5793d04
remove feature flagging
andrewazores Oct 3, 2025
55a84cd
Merge branch 'main' into heap-dump-agent-note
andrewazores Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions locales/en/public.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,6 +385,7 @@
"DIAGNOSTICS_CARD_TITLE": "Diagnostics",
"DIAGNOSTICS_GC_BUTTON": "Invoke Garbage Collection",
"DIAGNOSTICS_HEAP_DUMP_BUTTON": "Invoke Heap Dump",
"DIAGNOSTICS_HEAP_DUMP_BUTTON_DISABLED": "Heap Dump collection requires the Cryostat Agent",
"DIAGNOSTICS_HEAP_REDIRECT_BUTTON": "View collected Heap Dumps",
"DIAGNOSTICS_THREAD_DUMP_BUTTON": "Invoke Thread Dump",
"DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP": "View captured Thread Dumps",
Expand Down
122 changes: 70 additions & 52 deletions src/app/Dashboard/Diagnostics/DiagnosticsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
Tooltip,
Stack,
StackItem,
ActionListItem,
} from '@patternfly/react-core';
import { ListIcon, WrenchIcon } from '@patternfly/react-icons';
import * as React from 'react';
Expand All @@ -56,7 +57,9 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
const serviceContext = React.useContext(ServiceContext);
const notifications = React.useContext(NotificationsContext);
const addSubscription = useSubscriptions();
const [running, setRunning] = React.useState(false);
const [runningGc, setRunningGc] = React.useState(false);
const [runningThreadDump, setRunningThreadDump] = React.useState(false);
const [runningHeapDump, setRunningHeapDump] = React.useState(false);
const [heapDumpReady, setHeapDumpReady] = React.useState(false);
const [threadDumpReady, setThreadDumpReady] = React.useState(false);
const [controlEnabled, setControlEnabled] = React.useState(false);
Expand Down Expand Up @@ -126,39 +129,39 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
}, [addSubscription, serviceContext.notificationChannel, setThreadDumpReady]);

const handleGC = React.useCallback(() => {
setRunning(true);
setRunningGc(true);
addSubscription(
serviceContext.api.runGC(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.GC'), err),
complete: () => setRunning(false),
complete: () => setRunningGc(false),
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningGc, t]);

const handleThreadDump = React.useCallback(() => {
setRunning(true);
setRunningThreadDump(true);
addSubscription(
serviceContext.api.runThreadDump(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.THREADS'), err),
complete: () => {
setRunning(false);
setRunningThreadDump(false);
setThreadDumpReady(true);
},
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningThreadDump, t]);

const handleHeapDump = React.useCallback(() => {
setRunning(true);
setRunningHeapDump(true);
addSubscription(
serviceContext.api.runHeapDump(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.HEAP_DUMP'), err),
complete: () => {
setRunning(false);
setRunningHeapDump(false);
},
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningHeapDump, t]);

const header = React.useMemo(() => {
return (
Expand Down Expand Up @@ -193,58 +196,73 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
<Stack hasGutter>
<StackItem>
<ActionList>
<Button
variant="primary"
onClick={handleGC}
spinnerAriaValueText="Invoke GC"
spinnerAriaLabel="invoke-gc"
isLoading={running}
>
{t('DiagnosticsCard.DIAGNOSTICS_GC_BUTTON')}
</Button>
<ActionListItem>
<Button
variant="primary"
onClick={handleGC}
spinnerAriaValueText="Invoke GC"
spinnerAriaLabel="invoke-gc"
isLoading={runningGc}
>
{t('DiagnosticsCard.DIAGNOSTICS_GC_BUTTON')}
</Button>
</ActionListItem>
</ActionList>
</StackItem>
<StackItem>
<ActionList>
<Button
variant="primary"
onClick={handleThreadDump}
spinnerAriaValueText="Invoke Thread Dump"
spinnerAriaLabel="invoke-thread-dump"
isLoading={running}
>
{t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_BUTTON')}
</Button>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP')}>
<ActionListItem>
<Button
variant="primary"
isAriaDisabled={!threadDumpReady}
component={(props) => <CryostatLink {...props} to="/thread-dumps" />}
icon={<ListIcon />}
/>
</Tooltip>
onClick={handleThreadDump}
spinnerAriaValueText="Invoke Thread Dump"
spinnerAriaLabel="invoke-thread-dump"
isLoading={runningThreadDump}
>
{t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_BUTTON')}
</Button>
</ActionListItem>
<ActionListItem>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP')}>
<Button
variant="primary"
isAriaDisabled={!threadDumpReady}
component={(props) => <CryostatLink {...props} to="/thread-dumps" />}
icon={<ListIcon />}
/>
</Tooltip>
</ActionListItem>
</ActionList>
</StackItem>
<StackItem>
<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>
<ActionListItem>
<Tooltip
trigger={controlEnabled ? 'manual' : 'mouseenter focus'}
content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON_DISABLED')}
>
<Button
variant="primary"
onClick={handleHeapDump}
isAriaDisabled={!controlEnabled}
spinnerAriaValueText="Invoke Heap Dump"
spinnerAriaLabel="invoke-heap-dump"
isLoading={runningHeapDump}
>
{t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON')}
</Button>
</Tooltip>
</ActionListItem>
<ActionListItem>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_REDIRECT_BUTTON')}>
<Button
variant="primary"
isAriaDisabled={!(heapDumpReady && controlEnabled)}
component={(props) => <CryostatLink {...props} to="/heapdumps" />}
icon={<ListIcon />}
/>
</Tooltip>
</ActionListItem>
</ActionList>
</StackItem>
</Stack>
Expand Down
122 changes: 70 additions & 52 deletions src/app/Diagnostics/CaptureDiagnostics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
import { useCryostatTranslation } from '@i18n/i18nextUtil';
import {
ActionList,
ActionListItem,
Bullseye,
Button,
Card,
Expand All @@ -44,7 +45,9 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
const serviceContext = React.useContext(ServiceContext);
const notifications = React.useContext(NotificationsContext);
const addSubscription = useSubscriptions();
const [running, setRunning] = React.useState(false);
const [runningGc, setRunningGc] = React.useState(false);
const [runningThreadDump, setRunningThreadDump] = React.useState(false);
const [runningHeapDump, setRunningHeapDump] = React.useState(false);
const [threadDumpReady, setThreadDumpReady] = React.useState(false);
const [heapDumpReady, setHeapDumpReady] = React.useState(false);
const [controlEnabled, setControlEnabled] = React.useState(false);
Expand Down Expand Up @@ -107,40 +110,40 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
}, [addSubscription, serviceContext.notificationChannel, setThreadDumpReady]);

const handleGC = React.useCallback(() => {
setRunning(true);
setRunningGc(true);
addSubscription(
serviceContext.api.runGC(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.GC'), err),
complete: () => setRunning(false),
complete: () => setRunningGc(false),
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningGc, t]);

const handleThreadDump = React.useCallback(() => {
setRunning(true);
setRunningThreadDump(true);
addSubscription(
serviceContext.api.runThreadDump(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.THREADS'), err),
complete: () => {
setRunning(false);
setRunningThreadDump(false);
setThreadDumpReady(true);
},
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningThreadDump, t]);

const handleHeapDump = React.useCallback(() => {
setRunning(true);
setRunningHeapDump(true);
addSubscription(
serviceContext.api.runHeapDump(true).subscribe({
error: (err) => handleError(t('DiagnosticsCard.KINDS.HEAP_DUMP'), err),
complete: () => {
setRunning(false);
setRunningHeapDump(false);
setHeapDumpReady(true);
},
}),
);
}, [addSubscription, serviceContext.api, handleError, setRunning, t]);
}, [addSubscription, serviceContext.api, handleError, setRunningHeapDump, t]);

return (
<TargetView {...props} pageTitle="Diagnostics">
Expand All @@ -152,58 +155,73 @@ export const CaptureDiagnostics: React.FC<CaptureDiagnosticsProps> = ({ ...props
<Stack hasGutter>
<StackItem>
<ActionList>
<Button
variant="primary"
onClick={handleGC}
spinnerAriaValueText="Invoke GC"
spinnerAriaLabel="invoke-gc"
isLoading={running}
>
{t('DiagnosticsCard.DIAGNOSTICS_GC_BUTTON')}
</Button>
<ActionListItem>
<Button
variant="primary"
onClick={handleGC}
spinnerAriaValueText="Invoke GC"
spinnerAriaLabel="invoke-gc"
isLoading={runningGc}
>
{t('DiagnosticsCard.DIAGNOSTICS_GC_BUTTON')}
</Button>
</ActionListItem>
</ActionList>
</StackItem>
<StackItem>
<ActionList>
<Button
variant="primary"
onClick={handleThreadDump}
spinnerAriaValueText="Invoke Thread Dump"
spinnerAriaLabel="invoke-thread-dump"
isLoading={running}
>
{t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_BUTTON')}
</Button>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP')}>
<ActionListItem>
<Button
variant="primary"
isAriaDisabled={!threadDumpReady}
component={(props) => <CryostatLink {...props} to="/thread-dumps" />}
icon={<ListIcon />}
/>
</Tooltip>
onClick={handleThreadDump}
spinnerAriaValueText="Invoke Thread Dump"
spinnerAriaLabel="invoke-thread-dump"
isLoading={runningThreadDump}
>
{t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_BUTTON')}
</Button>
</ActionListItem>
<ActionListItem>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_TABLE_TOOLTIP')}>
<Button
variant="primary"
isAriaDisabled={!threadDumpReady}
component={(props) => <CryostatLink {...props} to="/thread-dumps" />}
icon={<ListIcon />}
/>
</Tooltip>
</ActionListItem>
</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>
<ActionListItem>
<Tooltip
trigger={controlEnabled ? 'manual' : 'mouseenter focus'}
content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON_DISABLED')}
>
<Button
variant="primary"
isAriaDisabled={!controlEnabled}
onClick={handleHeapDump}
spinnerAriaValueText="Invoke Heap Dump"
spinnerAriaLabel="invoke-heap-dump"
isLoading={runningHeapDump}
>
{t('DiagnosticsCard.DIAGNOSTICS_HEAP_DUMP_BUTTON')}
</Button>
</Tooltip>
</ActionListItem>
<ActionListItem>
<Tooltip content={t('DiagnosticsCard.DIAGNOSTICS_HEAP_REDIRECT_BUTTON')}>
<Button
variant="primary"
isAriaDisabled={!heapDumpReady}
component={(props) => <CryostatLink {...props} to="/heapdumps" />}
icon={<ListIcon />}
/>
</Tooltip>
</ActionListItem>
</ActionList>
</StackItem>
</Stack>
Expand Down
Loading