PMM-12991 Fix navigation menu & other small fixes

packages/grafana-ui/src/components/InteractiveTable/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { CellProps, DefaultSortTypes, IdType, SortByFn } from 'react-table';
 
 export interface Column<TableData extends object> {
@@ -12,8 +12,9 @@ export interface Column<TableData extends object> {
   cell?: (props: CellProps<TableData>) => ReactNode;
   /**
    * Header name. if `undefined` the header will be empty. Useful for action columns.
+   * @PERCONA - allow jsx element
    */
-  header?: string;
+  header?: string | (() => ReactElement);
   /**
    * Column sort type. If `undefined` the column will not be sortable.
    * */

public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx

@@ -93,12 +93,18 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
             <div
               className={cx(styles.labelWrapper, {
                 [styles.hasActiveChild]: hasActiveChild,
-                [styles.labelWrapperWithIcon]: Boolean(level === 0 && link.icon),
+                // @PERCONA - show icons for inner items
+                [styles.labelWrapperWithIcon]: Boolean(level <= 1 && link.icon),
               })}
             >
-              {level === 0 && link.icon && (
+              {/* @PERCONA - show icons for inner items */}
+              {level <= 1 && link.icon && (
                 <FeatureHighlightWrapper>
-                  <Icon className={styles.icon} name={toIconName(link.icon) ?? 'link'} size="lg" />
+                  <Icon
+                    className={styles.icon}
+                    name={toIconName(link.icon) ?? 'link'}
+                    size={level === 0 ? 'lg' : 'md'}
+                  />
                 </FeatureHighlightWrapper>
               )}
               <Text truncate>{link.text}</Text>

public/app/features/alerting/unified/components/rule-editor/TemplateStep/TemplateFiltersField.tsx

@@ -1,3 +1,4 @@
+ // @ts-nocheck
 import React, { FC, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/descriptions.tsx

@@ -29,4 +29,12 @@ export const DESCRIPTIONS: Record<RuleFormType, FormDescriptions> = {
       'An alert rule consists of one or more queries and expressions that select the data you want to measure. Define queries and/or expressions and then choose one of them as the alert rule condition. This is the threshold that an alert rule must meet or exceed in order to fire. For more information on queries and expressions, see Query and transform data.',
     helpLink: 'https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/',
   },
+  // @PERCONA - will be removed when templated alerts are merged
+  [RuleFormType.templated]: {
+    sectionTitle: 'Define query and alert condition',
+    helpLabel: 'Define query and alert condition',
+    helpContent:
+      'An alert rule consists of one or more queries and expressions that select the data you want to measure. Define queries and/or expressions and then choose one of them as the alert rule condition. This is the threshold that an alert rule must meet or exceed in order to fire. For more information on queries and expressions, see Query and transform data.',
+    helpLink: 'https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/',
+  }
 };

public/app/features/api-keys/ApiKeysPage.tsx

@@ -4,14 +4,12 @@ import { connect, ConnectedProps } from 'react-redux';
 // Utils
 import { InlineField, InlineSwitch, VerticalGroup, Modal, Button } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
-import config from 'app/core/config';
 import { contextSrv } from 'app/core/core';
 import { getTimeZone } from 'app/features/profile/state/selectors';
 import { WarningBlock } from 'app/percona/shared/components/Elements/WarningBlock';
 import { AccessControlAction, ApiKey, ApikeyMigrationResult, StoreState } from 'app/types';
 
 import { Messages } from './ApiKeys.messages';
-import { getStyles } from './ApiKeys.styles';
 import { ApiKeysActionBar } from './ApiKeysActionBar';
 import { ApiKeysTable } from './ApiKeysTable';
 import { MigrateToServiceAccountsCard } from './MigrateToServiceAccountsCard';
@@ -136,7 +134,9 @@ export class ApiKeysPageUnconnected extends PureComponent<Props, State> {
                   <InlineSwitch id="showExpired" value={includeExpired} onChange={this.onIncludeExpiredChange} />
                 </InlineField>
                 {/* @PERCONA */}
-                <WarningBlock className={styles.deleteWarning} message={Messages.apiKeysDeleteWarning} type="warning" />
+                <div style={styles.deleteWarning}>
+                  <WarningBlock message={Messages.apiKeysDeleteWarning} type="warning" />
+                </div>
                 <ApiKeysTable
                   apiKeys={apiKeys}
                   timeZone={timeZone}
@@ -177,6 +177,10 @@ const styles: { [key: string]: React.CSSProperties } = {
   summaryParagraph: {
     margin: '10px 0',
   },
+  // @PERCONA
+  deleteWarning: {
+    marginTop: '20px',
+  },
 };
 
 export const MigrationSummary: React.FC<MigrationSummaryProps> = ({ visible, data, onDismiss }) => {

public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.constants.ts

@@ -335,7 +335,7 @@ export const PMM_NAV_MYSQL: NavModelItem = {
       icon: 'percona-cluster',
       hideFromTabs: true,
       showChildren: true,
-
+      url: `${config.appSubUrl}/d/mysql-group-replicaset-summary`,
       children: [
         {
           id: 'mysql-group-replication-summary',
@@ -448,7 +448,7 @@ export const PMM_NAV_MONGO: NavModelItem = {
       icon: 'percona-cluster',
       hideFromTabs: true,
       showChildren: true,
-
+      url: `${config.appSubUrl}/d/mongodb-cluster-summary`,
       children: [
         {
           id: 'mongo-cluster-summary',

public/app/percona/shared/components/PerconaBootstrapper/PerconaNavigation/PerconaNavigation.utils.ts

@@ -20,6 +20,8 @@ import {
   WEIGHTS,
   PMM_ACCESS_ROLE_CREATE_PAGE,
   PMM_ADD_INSTANCE_CREATE_PAGE,
+  getPmmSettingsPage,
+  PMM_INVENTORY_PAGE,
 } from './PerconaNavigation.constants';
 
 const DIVIDER: NavModelItem = {
@@ -59,13 +61,7 @@ export const removeAlertingMenuItem = (mainLinks: NavModelItem[]) => {
 };
 
 export const buildInventoryAndSettings = (mainLinks: NavModelItem[], settings?: Settings): NavModelItem[] => {
-  const inventoryLink: NavModelItem = {
-    id: 'inventory',
-    icon: 'server-network',
-    text: 'Inventory',
-    url: `${config.appSubUrl}/inventory`,
-    hideFromTabs: true,
-  };
+  const inventoryLink: NavModelItem = PMM_INVENTORY_PAGE;
   const orgLink: NavModelItem = {
     id: 'main-organization',
     text: 'Organization',
@@ -76,12 +72,7 @@ export const buildInventoryAndSettings = (mainLinks: NavModelItem[], settings?:
     text: 'PMM',
     isSection: true,
   };
-  const settingsLink: NavModelItem = {
-    id: 'settings',
-    icon: 'percona-setting',
-    text: 'Settings',
-    url: `${config.appSubUrl}/settings`,
-  };
+  const settingsLink: NavModelItem = getPmmSettingsPage();
   const configNode = mainLinks.find((link) => link.id === 'cfg');
 
   if (!configNode) {

public/app/routes/routes.tsx

@@ -768,7 +768,6 @@ export function getAppRoutes(): RouteDescriptor[] {
           )
       ),
     },
-    ...getDynamicDashboardRoutes(),
     ...getPluginCatalogRoutes(),
     ...getSupportBundleRoutes(),
     ...getAlertingRoutes(),