PMM-12459 Add pmm dump into PerconaNavigation

percona · Oct 31, 2023 · 6adf88a · 6adf88a
1 parent 8d6acdc
commit 6adf88a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/public/app/percona/pmm-dump/PMMDump.tsx b/public/app/percona/pmm-dump/PMMDump.tsx
@@ -2,7 +2,6 @@ import { CancelToken } from 'axios';
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import { Row } from 'react-table';
 
-import { NavModelItem } from '@grafana/data';
 import { HorizontalGroup, Icon, useStyles2, Badge, BadgeColor, LinkButton, Button } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
@@ -13,6 +12,7 @@ import { Action } from 'app/percona/dbaas/components/MultipleActions';
 import { DumpStatus, DumpStatusColor, DumpStatusText, PMMDumpServices } from 'app/percona/pmm-dump/PmmDump.types';
 import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
 import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
+import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
 import {
   deletePmmDumpAction,
   fetchPmmDumpAction,
@@ -33,14 +33,6 @@ import { SendToSupportModal } from './SendToSupportModal';
 import { PmmDumpLogsModal } from './components/PmmDumpLogsModal/PmmDumpLogsModal';
 export const NEW_BACKUP_URL = '/pmm-dump/new';
 
-const pageNav: NavModelItem = {
-  icon: 'brain',
-  id: 'user-new',
-  text: 'PMM Dump',
-  subTitle:
-    'Simplify troubleshooting and accelerate issue resolution by securely sharing relevant data, ensuring a smoother support experience.',
-};
-
 export const PMMDump = () => {
   const styles = useStyles2(getStyles);
   const dispatch = useAppDispatch();
@@ -51,6 +43,7 @@ export const PMMDump = () => {
   const [selectedDump, setSelectedDump] = useState<PMMDumpServices | null>(null);
   const [isSendToSupportModalOpened, setIsSendToSupportModalOpened] = useState(false);
   const [logsModalVisible, setLogsModalVisible] = useState(false);
+  const navModel = usePerconaNavModel('pmm-dump');
 
   const loadData = useCallback(async () => {
     try {
@@ -261,7 +254,7 @@ export const PMMDump = () => {
   );
 
   return (
-    <Page navId="pmmdump" pageNav={pageNav}>
+    <Page navId="pmmdump" navModel={navModel}>
       <Page.Contents>
         <div className={styles.createDatasetArea}>
           {selected.length > 0 ? (

diff --git a/...na/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts b/...na/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts
@@ -126,6 +126,15 @@ export const PMM_ADD_INSTANCE_PAGE: NavModelItem = {
   showIconInNavbar: true,
 };
 
+export const PMM_DUMP_PAGE: NavModelItem = {
+  id: 'pmm-dump',
+  url: `${config.appSubUrl}/pmm-dump`,
+  icon: 'brain',
+  subTitle:
+    'Simplify troubleshooting and accelerate issue resolution by securely sharing relevant data, ensuring a smoother support experience.',
+  text: 'PMM Dump',
+};
+
 export const PMM_EDIT_INSTANCE_PAGE: NavModelItem = {
   id: 'edit-instance',
   url: `${config.appSubUrl}/edit-instance`,

diff --git a/...app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx b/...app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.tsx
@@ -25,6 +25,7 @@ import {
   PMM_ENVIRONMENT_OVERVIEW_PAGE,
   PMM_INVENTORY_PAGE,
   PMM_TICKETS_PAGE,
+  PMM_DUMP_PAGE,
 } from './PerconaNavigation.constants';
 import {
   addAccessRolesLink,
@@ -49,6 +50,7 @@ const PerconaNavigation: React.FC = () => {
 
   dispatch(updateNavIndex(getPmmSettingsPage(alertingEnabled)));
   dispatch(updateNavIndex(PMM_DBAAS_PAGE));
+  dispatch(updateNavIndex(PMM_DUMP_PAGE));
   dispatch(updateNavIndex(PMM_BACKUP_PAGE));
   dispatch(updateNavIndex(PMM_INVENTORY_PAGE));
   dispatch(updateNavIndex(PMM_ADD_INSTANCE_PAGE));