PMM-11148 Service management - Add/Edit service

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',

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};
   `,
 });

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' });

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}
             />

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;
+}

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.`,
+  },
 };

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};

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);

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.tsx

@@ -4,13 +4,16 @@ import { FormApi } from 'final-form';
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { Form as FormFinal } from 'react-final-form';
 
-import { Button, useStyles } from '@grafana/ui';
+import { AppEvents } from '@grafana/data';
+import { useStyles } from '@grafana/ui';
+import appEvents from 'app/core/app_events';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { Databases } from 'app/percona/shared/core';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
 import { logger } from 'app/percona/shared/helpers/logger';
 
-import { InstanceAvailableType, InstanceTypes, InstanceTypesExtra, INSTANCE_TYPES_LABELS } from '../../panel.types';
+import { ADD_INSTANCE_FORM_NAME } from '../../panel.constants';
+import { InstanceTypesExtra, InstanceTypes, INSTANCE_TYPES_LABELS, InstanceAvailableType } from '../../panel.types';
 
 import { ADD_AZURE_CANCEL_TOKEN, ADD_RDS_CANCEL_TOKEN } from './AddRemoteInstance.constants';
 import { Messages } from './AddRemoteInstance.messages';
@@ -35,7 +38,10 @@ import {
 import { ExternalServiceConnectionDetails } from './FormParts/ExternalServiceConnectionDetails/ExternalServiceConnectionDetails';
 import { HAProxyConnectionDetails } from './FormParts/HAProxyConnectionDetails/HAProxyConnectionDetails';
 
-const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, credentials }, selectInstance }) => {
+const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({
+  instance: { type, credentials },
+  onSubmit: submitWrapper,
+}) => {
   const styles = useStyles(getStyles);
 
   const { remoteInstanceCredentials, discoverName } = getInstanceData(type, credentials);
@@ -70,7 +76,10 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, crede
         } else {
           await AddRemoteInstanceService.addRemote(type, values, generateToken(remoteToken(type)));
         }
-
+        appEvents.emit(AppEvents.alertSuccess, [
+          Messages.success.title(values.serviceName || values.address || ''),
+          Messages.success.description(INSTANCE_TYPES_LABELS[type as Databases]),
+        ]);
         window.location.href = '/graph/inventory/';
       } catch (e) {
         if (isApiCancelError(e)) {
@@ -130,37 +139,23 @@ const AddRemoteInstance: FC<AddRemoteInstanceProps> = ({ instance: { type, crede
     if (databaseType === '') {
       return Messages.form.titles.addRemoteInstance;
     }
-    return `Add remote ${INSTANCE_TYPES_LABELS[databaseType]} Instance`;
+    return `Configuring ${INSTANCE_TYPES_LABELS[databaseType]} service`;
   };
 
   return (
     <div className={styles.formWrapper}>
       <FormFinal
-        onSubmit={onSubmit}
+        onSubmit={(values) => submitWrapper(onSubmit(values))}
         initialValues={initialValues}
         mutators={{
           setValue: ([field, value], state, { changeValue }) => {
             changeValue(state, field, () => value);
           },
         }}
         render={({ form, handleSubmit }) => (
-          <form onSubmit={handleSubmit} data-testid="add-remote-instance-form">
-            <h4 className={styles.addRemoteInstanceTitle}>{getHeader(type)}</h4>
+          <form id={ADD_INSTANCE_FORM_NAME} onSubmit={handleSubmit} data-testid="add-remote-instance-form">
+            <h3 className={styles.addRemoteInstanceTitle}>{getHeader(type)}</h3>
             {formParts(form)}
-            <div className={styles.addRemoteInstanceButtons}>
-              <Button id="addInstance" disabled={loading} type="submit">
-                {Messages.form.buttons.addService}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => selectInstance({ type: '' })}
-                disabled={loading}
-                className={styles.returnButton}
-                icon="arrow-left"
-              >
-                {Messages.form.buttons.toMenu}
-              </Button>
-            </div>
           </form>
         )}
       />

public/app/percona/add-instance/components/AddRemoteInstance/AddRemoteInstance.types.ts

@@ -22,6 +22,7 @@ export interface InstanceData {
 export interface AddRemoteInstanceProps {
   instance: InstanceAvailable;
   selectInstance: SelectInstance;
+  onSubmit: (submitPromise: Promise<void>) => void;
 }
 
 export enum DefaultPorts {