feat(diagnostics): Add frontend for thread dumps

locales/en/public.json

@@ -370,8 +370,18 @@
     "DIAGNOSTICS_CARD_DESCRIPTION_FULL": "Perform diagonstic operations from a list of supported operations on the target.",
     "DIAGNOSTICS_CARD_TITLE": "Diagnostics",
     "DIAGNOSTICS_GC_BUTTON": "Start Garbage Collection",
+    "DIAGNOSTICS_THREAD_DUMP_BUTTON": "Start Thread Dump",
+    "DIAGONSTICS_THREAD_REDIRECT_BUTTON": "Go to Thread Dumps Table",
     "KINDS": {
-      "GC": "Garbage Collection"
+      "GC": "Garbage Collection",
+      "THREAD_DUMP": "Thread Dump"
+    }
+  },
+  "ThreadDumps": {
+    "SEARCH_PLACEHOLDER": "Search Thread Dumps",
+    "ARIA_LABELS": {
+      "ROW_ACTION": "thread-dump-action-menu",
+      "SEARCH_INPUT": "thread-dump-search-input"
     }
   },
   "DurationFilter": {

src/app/Dashboard/Diagnostics/DiagnosticsCard.tsx

@@ -20,6 +20,7 @@ import {
   DashboardCardSizes,
   DashboardCardDescriptor,
 } from '@app/Dashboard/types';
+import { CryostatLink } from '@app/Shared/Components/CryostatLink';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -50,6 +51,7 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
   const notifications = React.useContext(NotificationsContext);
   const addSubscription = useSubscriptions();
   const [running, setRunning] = React.useState(false);
+  const [threadDumpReady, setThreadDumpReady] = React.useState(false);
 
   const handleError = React.useCallback(
     (kind, error) => {
@@ -68,6 +70,19 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
     );
   }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
 
+  const handleThreadDump = React.useCallback(() => {
+    setRunning(true);
+    addSubscription(
+      serviceContext.api.runThreadDump(true).subscribe({
+        error: (err) => handleError(t('DiagnosticsCard.KINDS.THREADS'), err),
+        complete: () => {
+          setRunning(false);
+          setThreadDumpReady(true);
+        },
+      }),
+    );
+  }, [addSubscription, serviceContext.api, handleError, setRunning, t]);
+
   const header = React.useMemo(() => {
     return (
       <CardHeader actions={{ actions: <>{...props.actions || []}</>, hasNoOffset: false, className: undefined }}>
@@ -107,6 +122,21 @@ export const DiagnosticsCard: DashboardCardFC<DiagnosticsCardProps> = (props) =>
                 >
                   {t('DiagnosticsCard.DIAGNOSTICS_GC_BUTTON')}
                 </Button>
+                {threadDumpReady ? (
+                  <Button variant="primary" component={(props) => <CryostatLink {...props} to="/diagnostics" />}>
+                    {t('DiagnosticsCard.DIAGONSTICS_THREAD_REDIRECT_BUTTON')}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="primary"
+                    onClick={handleThreadDump}
+                    spinnerAriaValueText="Invoke Thread Dump"
+                    spinnerAriaLabel="invoke-thread-dump"
+                    isLoading={running}
+                  >
+                    {t('DiagnosticsCard.DIAGNOSTICS_THREAD_DUMP_BUTTON')}
+                  </Button>
+                )}
               </EmptyStateFooter>
             </EmptyState>
           </Bullseye>

src/app/Diagnostics/Diagnostics.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { TargetView } from '@app/TargetView/TargetView';
+import { getActiveTab, switchTab } from '@app/utils/utils';
+import { Card, CardBody, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
+import * as React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { ThreadDumpsTable } from './ThreadDumpsTable';
+
+enum DiagnosticsTab {
+  THREAD_DUMPS = 'thread-dumps',
+}
+
+export interface DiagnosticsProps {}
+
+export const Diagnostics: React.FC<DiagnosticsProps> = ({ ...props }) => {
+  const { search, pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const activeTab = React.useMemo(() => {
+    return getActiveTab(search, 'tab', Object.values(DiagnosticsTab), DiagnosticsTab.THREAD_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="threadDumps" activeKey={activeTab} onSelect={onTabSelect} unmountOnExit>
+        <Tab
+          id="threadDumps"
+          eventKey={DiagnosticsTab.THREAD_DUMPS}
+          title={<TabTitleText>Thread Dumps</TabTitleText>}
+          data-quickstart-id="thread-dumps-tab"
+        >
+          <ThreadDumpsTable />
+        </Tab>
+      </Tabs>
+    ),
+    [activeTab, onTabSelect],
+  );
+
+  return (
+    <TargetView {...props} pageTitle="Diagnostics">
+      <Card isFullHeight>
+        <CardBody isFilled>{cardBody}</CardBody>
+      </Card>
+    </TargetView>
+  );
+};
+
+export default Diagnostics;