Merge branch 'main' into PMM_12253_Remove_Alert

percona · Sep 4, 2023 · 9e59659 · 9e59659
2 parents 4b51954 + 3737244
commit 9e59659
Show file tree

Hide file tree

Showing 102 changed files with 2,002 additions and 747 deletions.
diff --git a/devenv/docker/ha-test-unified-alerting/grafana/provisioning/dashboards/mysql/overview.json b/devenv/docker/ha-test-unified-alerting/grafana/provisioning/dashboards/mysql/overview.json
@@ -2437,7 +2437,7 @@
         {
           "title": "Detailed descriptions about metrics",
           "type": "absolute",
-          "url": "https://www.percona.com/doc/percona-monitoring-and-management/dashboard.mysql-overview.html#mysql-internal-memory-overview"
+          "url": "https://per.co.na/mysql_internal_memory_overview"
         }
       ],
       "nullPointMode": "null",

diff --git a/devenv/docker/ha_test/grafana/provisioning/dashboards/mysql/overview.json b/devenv/docker/ha_test/grafana/provisioning/dashboards/mysql/overview.json
@@ -2437,7 +2437,7 @@
         {
           "title": "Detailed descriptions about metrics",
           "type": "absolute",
-          "url": "https://www.percona.com/doc/percona-monitoring-and-management/dashboard.mysql-overview.html#mysql-internal-memory-overview"
+          "url": "https://per.co.na/mysql_internal_memory_overview"
         }
       ],
       "nullPointMode": "null",

diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
@@ -10,7 +10,7 @@ export interface BrandComponentProps {
 }
 
 const LoginLogo: FC<BrandComponentProps & { logo?: string }> = ({ className }) => {
-  return <img className={className} src="public/img/percona-logo.svg" alt="PMM" />;
+  return <img className={className} src="public/img/icons/mono/pmm-logo.svg" alt="PMM" />;
 };
 
 const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
@@ -43,15 +43,7 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
 };
 
 const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
-  const theme = useTheme2();
-
-  return (
-    <img
-      className={className}
-      src={theme.isLight ? 'public/img/percona-logo-light.svg' : 'public/img/percona-logo.svg'}
-      alt="PMM"
-    />
-  );
+  return <img className={className} src="public/img/pmm-app-rounded-icon.svg" alt="PMM" />;
 };
 
 const LoginBoxBackground = () => {

diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
@@ -25,22 +25,22 @@ export let getFooterLinks = (): FooterLink[] => {
       id: 'pmm-docs',
       text: 'Documentation',
       icon: 'document-info',
-      url: 'https://www.percona.com/doc/percona-monitoring-and-management/2.x/index.html?utm_source=pmm_footer',
+      url: 'https://per.co.na/pmm_documentation',
       target: '_blank',
     },
     {
       target: '_blank',
       id: 'support',
       text: 'Support',
       icon: 'question-circle',
-      url: 'https://www.percona.com/services/support?utm_source=pmm_footer',
+      url: 'https://per.co.na/pmm_support',
     },
     {
       target: '_blank',
       id: 'community',
       text: 'Community',
       icon: 'comments-alt',
-      url: 'https://forums.percona.com/c/percona-monitoring-and-management-pmm/percona-monitoring-and-management-pmm-v2?utm_source=pmm_footer',
+      url: 'https://per.co.na/pmm_community',
     },
   ];
 };

diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx
@@ -20,7 +20,7 @@ const TemplatedAlertRuleType: FC<SharedProps> = ({ selected = false, disabled, o
           Simpler initial alert setup with more robust alerting options.
         </span>
       }
-      image={theme.isLight ? 'public/img/percona-logo-light.svg' : 'public/img/percona-logo.svg'}
+      image={theme.isLight ? 'public/img/icons/mono/pmm-logo-light.svg' : 'public/img/icons/mono/pmm-logo.svg'}
       selected={selected}
       disabled={disabled}
       value={RuleFormType.templated}

diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -187,12 +187,7 @@ export class ShareLink extends PureComponent<Props, State> {
               {/* @PERCONA */}
               {/* We modified this text and link */}
               To render a panel image, you must install the&nbsp;
-              <a
-                href="https://docs.percona.com/percona-monitoring-and-management/how-to/share-dashboard.html#share-as-a-png-file"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="external-link"
-              >
+              <a href="https://per.co.na/share_png" target="_blank" rel="noopener noreferrer" className="external-link">
                 Image Renderer plugin
               </a>
               . Please contact your PMM administrator to install the plugin.

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts
@@ -1,4 +1,6 @@
 export const Messages = {
+  sectionTitle: 'Select service type',
+  description: 'Select the service type you want to configure and then add it to your inventory.',
   titles: {
     rds: 'Amazon RDS',
     azure: 'Microsoft Azure MySQL or PostgreSQL',

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts
@@ -1,52 +1,30 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const getStyles = ({ border, colors, spacing, typography }: GrafanaTheme) => ({
-  navigationButton: css`
+export const getStyles = (theme: GrafanaTheme2) => ({
+  Content: css`
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
-    align-items: center;
-    padding-bottom: 1.2em;
-    margin: ${spacing.sm};
-    border-radius: ${border.radius.md};
-    width: 230px;
-    height: 160px;
-    text-align: center;
-    background-color: transparent;
-    border: ${border.width.sm} dashed ${colors.border2};
-
-    :hover {
-      cursor: pointer;
-      background-color: ${colors.dropdownOptionHoverBg};
-      border: ${border.width.sm} solid ${colors.border2};
-    }
+    align-items: flex-start;
   `,
-  navigationPanel: css`
+  NavigationPanel: css`
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     flex-wrap: wrap;
-    max-width: 800px;
+    max-width: 825px;
     width: 100%;
     overflow: hidden;
+    gap: ${theme.spacing(2)};
+    padding: 3px;
+    margin: -3px;
   `,
-  content: css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 2em;
+  InstanceCard: css`
+    width: 375px;
+    margin: 0;
   `,
-  addInstance: css`
-    margin-top: ${spacing.sm};
-    font-size: ${typography.size.sm};
-  `,
-  addInstanceTitle: css`
-    margin-top: ${spacing.sm};
-    overflow: hidden;
-    line-height: ${typography.lineHeight.md};
-    width: 65%;
-    height: 3em;
+  Description: css`
+    color: ${theme.colors.text.secondary};
   `,
 });
diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx
@@ -5,14 +5,20 @@ import { Provider } from 'react-redux';
 import { configureStore } from 'app/store/configureStore';
 import { StoreState } from 'app/types';
 
+import { InstanceAvailable } from '../../panel.types';
+
 import { AddInstance } from './AddInstance';
 import { instanceList } from './AddInstance.constants';
 
 jest.mock('app/percona/settings/Settings.service');
 
+const selectedInstanceType: InstanceAvailable = { type: '' };
+
 describe('AddInstance page::', () => {
   it('should render a given number of links', async () => {
-    const ui = withStore(<AddInstance showAzure={false} onSelectInstanceType={() => {}} />);
+    const ui = withStore(
+      <AddInstance showAzure={false} onSelectInstanceType={() => {}} selectedInstanceType={selectedInstanceType} />
+    );
     await waitFor(() => render(ui));
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length);
@@ -22,7 +28,9 @@ describe('AddInstance page::', () => {
   });
 
   it('should render azure option', async () => {
-    const ui = withStore(<AddInstance showAzure onSelectInstanceType={() => {}} />);
+    const ui = withStore(
+      <AddInstance showAzure onSelectInstanceType={() => {}} selectedInstanceType={selectedInstanceType} />
+    );
     await waitFor(() => render(ui));
 
     expect(screen.getAllByRole('button')).toHaveLength(instanceList.length + 1);
@@ -35,13 +43,15 @@ describe('AddInstance page::', () => {
   it('should invoke a callback with a proper instance type', async () => {
     const onSelectInstanceType = jest.fn();
 
-    const ui = withStore(<AddInstance showAzure onSelectInstanceType={onSelectInstanceType} />);
+    const ui = withStore(
+      <AddInstance showAzure onSelectInstanceType={onSelectInstanceType} selectedInstanceType={selectedInstanceType} />
+    );
     render(ui);
 
     expect(onSelectInstanceType).toBeCalledTimes(0);
 
-    const button = await screen.findByTestId('rds-instance');
-    fireEvent.click(button);
+    const button = (await screen.findByTestId('rds-instance')).querySelector('button');
+    fireEvent.click(button!);
 
     expect(onSelectInstanceType).toBeCalledTimes(1);
     expect(onSelectInstanceType.mock.calls[0][0]).toStrictEqual({ type: 'rds' });

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx
@@ -2,8 +2,7 @@
 import React, { FC, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-import { useStyles } from '@grafana/ui';
-import { Database } from 'app/percona/shared/components/Elements/Icons/Database';
+import { Card, Icon, useStyles2 } from '@grafana/ui';
 import { Databases } from 'app/percona/shared/core';
 import * as UserFlow from 'app/percona/shared/core/reducers/userFlow';
 import { useDispatch } from 'app/types';
@@ -12,37 +11,34 @@ import { InstanceAvailableType, InstanceTypesExtra } from '../../panel.types';
 
 import { Messages } from './AddInstance.messages';
 import { getStyles } from './AddInstance.styles';
-import { AddInstanceProps, SelectInstanceProps } from './AddInstance.types';
+import { AddInstanceProps, InstanceListItem, SelectInstanceProps } from './AddInstance.types';
 
-export const SelectInstance: FC<SelectInstanceProps> = ({ type, selectInstanceType, title }) => {
-  const styles = useStyles(getStyles);
+export const SelectInstance: FC<SelectInstanceProps> = ({ type, isSelected, icon, selectInstanceType, title }) => {
+  const styles = useStyles2(getStyles);
 
   return (
-    <button
-      className={styles.navigationButton}
-      data-testid={`${type}-instance`}
-      onClick={selectInstanceType(type)}
-      type="button"
-    >
-      <Database />
-      <span className={styles.addInstanceTitle}>{title}</span>
-      <span className={styles.addInstance}>{Messages.titles.addInstance}</span>
-    </button>
+    <Card data-testid={`${type}-instance`} onClick={selectInstanceType(type)} className={styles.InstanceCard}>
+      <Card.Heading>{title}</Card.Heading>
+      <Card.Description>{Messages.titles.addInstance}</Card.Description>
+      <Card.Figure>
+        <Icon size="xxxl" name={icon ? icon : 'database'} />
+      </Card.Figure>
+    </Card>
   );
 };
 
-export const AddInstance: FC<AddInstanceProps> = ({ onSelectInstanceType, showAzure }) => {
-  const styles = useStyles(getStyles);
-  const instanceList = useMemo(
+export const AddInstance: FC<AddInstanceProps> = ({ selectedInstanceType, onSelectInstanceType, showAzure }) => {
+  const styles2 = useStyles2(getStyles);
+  const instanceList = useMemo<InstanceListItem[]>(
     () => [
       { type: InstanceTypesExtra.rds, title: Messages.titles.rds },
-      { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
-      { type: Databases.postgresql, title: Messages.titles.postgresql },
-      { type: Databases.mysql, title: Messages.titles.mysql },
-      { type: Databases.mongodb, title: Messages.titles.mongodb },
-      { type: Databases.proxysql, title: Messages.titles.proxysql },
+      { type: Databases.mysql, title: Messages.titles.mysql, icon: 'percona-database-mysql' },
+      { type: Databases.mongodb, title: Messages.titles.mongodb, icon: 'percona-database-mongodb' },
+      { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' },
+      { type: Databases.proxysql, title: Messages.titles.proxysql, icon: 'percona-database-proxysql' },
+      { type: Databases.haproxy, title: Messages.titles.haproxy, icon: 'percona-database-haproxy' },
       { type: InstanceTypesExtra.external, title: Messages.titles.external },
-      { type: Databases.haproxy, title: Messages.titles.haproxy },
+      { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure },
     ],
     [showAzure]
   );
@@ -61,14 +57,18 @@ export const AddInstance: FC<AddInstanceProps> = ({ onSelectInstanceType, showAz
   };
 
   return (
-    <section className={styles.content}>
-      <nav className={styles.navigationPanel}>
+    <section className={styles2.Content}>
+      <h2>{Messages.sectionTitle}</h2>
+      <p className={styles2.Description}>{Messages.description}</p>
+      <nav className={styles2.NavigationPanel}>
         {instanceList
           .filter(({ isHidden }) => !isHidden)
           .map((item) => (
             <SelectInstance
+              isSelected={item.type === selectedInstanceType.type}
               selectInstanceType={selectInstanceType}
               type={item.type}
+              icon={item.icon}
               title={item.title}
               key={item.type}
             />

diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.types.ts
@@ -1,12 +1,21 @@
-import { InstanceAvailable } from '../../panel.types';
+import { IconName } from '@grafana/data';
 
-export interface SelectInstanceProps {
-  type: string;
-  title: string;
-  selectInstanceType: (type: string) => () => void;
+import { InstanceAvailable, InstanceAvailableType } from '../../panel.types';
+
+export interface SelectInstanceProps extends InstanceListItem {
+  isSelected: boolean;
+  selectInstanceType: (type: InstanceAvailableType) => () => void;
 }
 
 export interface AddInstanceProps {
+  selectedInstanceType: InstanceAvailable;
   onSelectInstanceType: (arg: InstanceAvailable) => void;
   showAzure: boolean;
 }
+
+export interface InstanceListItem {
+  type: InstanceAvailableType;
+  icon?: IconName;
+  title: string;
+  isHidden?: boolean;
+}
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.messages.ts
@@ -1,4 +1,15 @@
 export const Messages = {
+  pageTitleSelection: 'Inventory / Add service / Step 1 of 2',
+  pageTitleConfiguration: 'Inventory / Add service / Step 2 of 2',
+  selectionStep: {
+    cancel: 'Cancel',
+    next: 'Next step: Configuration',
+  },
+  configurationStep: {
+    cancel: 'Cancel',
+    next: 'Add service',
+    discover: 'Discover',
+  },
   form: {
     trackingOptions: {
       none: "Don't track",
@@ -22,4 +33,8 @@ export const Messages = {
       addRemoteInstance: 'Add remote instance',
     },
   },
+  success: {
+    title: (service: string) => `Service “${service}” added to your inventory`,
+    description: (serviceType: string) => `Your ${serviceType} service instance is now ready to be monitored.`,
+  },
 };
diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.styles.ts
@@ -31,7 +31,7 @@ export const getStyles = ({ spacing }: GrafanaTheme) => ({
     white-space: nowrap;
   `,
   addRemoteInstanceTitle: css`
-    text-align: center;
+    text-align: left;
   `,
   addRemoteInstanceButtons: css`
     margin-top: ${spacing.md};

diff --git a/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx b/public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.test.tsx
@@ -20,7 +20,7 @@ jest.mock('app/percona/shared/helpers/logger', () => {
 describe('Add remote instance:: ', () => {
   it('should render correct for mysql and postgres and highlight empty mandatory fields on submit', async () => {
     const type = Databases.mysql;
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);
@@ -35,7 +35,7 @@ describe('Add remote instance:: ', () => {
 
   it('should render for external service and highlight empty mandatory fields on submit', async () => {
     const type = InstanceTypesExtra.external;
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('metrics_path-text-input').classList.contains('invalid')).toBe(false);
@@ -55,7 +55,7 @@ describe('Add remote instance:: ', () => {
   it('should render correct for HAProxy and highlight empty mandatory fields on submit', async () => {
     const type = Databases.haproxy;
 
-    render(<AddRemoteInstance instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
+    render(<AddRemoteInstance onSubmit={jest.fn()} instance={{ type, credentials: {} }} selectInstance={jest.fn()} />);
 
     expect(screen.getByTestId('address-text-input').classList.contains('invalid')).toBe(false);
     expect(screen.getByTestId('username-text-input').classList.contains('invalid')).toBe(false);