Merge branch 'main' into PMM-11673-fix-psmdb-configuration

packages/grafana-ui/src/types/react-table-config.d.ts

@@ -106,6 +106,9 @@ declare module 'react-table' {
       UseSortByColumnProps<D> {
     className?: string;
     style?: CSSProperties;
+    // @PERCONA
+    // By default, cells with too much text get their content hidden using ellipsis. This allows to override that config.
+    noHiddenOverflow?: boolean;
   }
 
   export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>

public/app/features/dashboard/components/ShareModal/ShareLink.tsx

@@ -188,7 +188,7 @@ export class ShareLink extends PureComponent<Props, State> {
               {/* We modified this text and link */}
               To render a panel image, you must install the&nbsp;
               <a
-                href="https://www.percona.com/doc/percona-monitoring-and-management/2.x/how-to/render-dashboard-images.html"
+                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"

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

@@ -55,6 +55,7 @@ export const AddInstance: FC<AddInstanceProps> = ({ onSelectInstanceType, showAz
         type,
       })
     );
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
     onSelectInstanceType({ type: type as InstanceAvailableType });
   };
 

public/app/percona/check/Check.service.ts

@@ -30,11 +30,11 @@ const BASE_URL = '/v1/management/SecurityChecks';
  * A service-like object to store the API methods
  */
 export const CheckService = {
-  async getAllFailedChecks(token?: CancelToken): Promise<FailedCheckSummary[]> {
+  async getAllFailedChecks(token?: CancelToken, disableNotifications?: boolean): Promise<FailedCheckSummary[]> {
     const { result = [] } = await api.post<CheckResultSummaryPayload, Object>(
       `${BASE_URL}/ListFailedServices`,
       {},
-      false,
+      disableNotifications,
       token
     );
 

public/app/percona/check/components/AllChecksTab/AllChecksTab.tsx

@@ -110,6 +110,7 @@ export const AllChecksTab: FC<GrafanaRouteComponentProps<{ category: string }>>
         Header: Messages.table.columns.description,
         accessor: 'description',
         type: FilterFieldTypes.TEXT,
+        noHiddenOverflow: true,
       },
       {
         Header: Messages.table.columns.status,

public/app/percona/check/components/ServiceChecks/ServiceChecks.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/display-name */
 import { Chip, logger } from '@percona/platform-core';
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Cell, Column, Row } from 'react-table';
+import { Cell, Row } from 'react-table';
 
 import { useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { Severity } from 'app/percona/integrated-alerting/components/Severity';
-import { Table } from 'app/percona/integrated-alerting/components/Table';
+import { ExtendedColumn, Table } from 'app/percona/integrated-alerting/components/Table';
 import { useStoredTablePageSize } from 'app/percona/integrated-alerting/components/Table/Pagination';
 import { ExpandableCell } from 'app/percona/shared/components/Elements/ExpandableCell';
 import { SilenceBell } from 'app/percona/shared/components/Elements/SilenceBell';
@@ -71,7 +71,7 @@ export const ServiceChecks: FC<GrafanaRouteComponentProps<{ service: string }>>
   );
 
   const columns = useMemo(
-    (): Array<Column<ServiceFailedCheck>> => [
+    (): Array<ExtendedColumn<ServiceFailedCheck>> => [
       {
         Header: 'Check Name',
         accessor: 'checkName',
@@ -80,10 +80,12 @@ export const ServiceChecks: FC<GrafanaRouteComponentProps<{ service: string }>>
       {
         Header: 'Summary',
         accessor: 'summary',
+        noHiddenOverflow: true,
       },
       {
         Header: 'Description',
         accessor: 'description',
+        noHiddenOverflow: true,
       },
       {
         Header: 'Severity',

public/app/percona/integrated-alerting/components/Table/Table.styles.ts

@@ -55,9 +55,6 @@ export const getStyles = (theme: GrafanaTheme) => {
           border-bottom: 1px solid ${borderColor};
           border-right: 1px solid ${borderColor};
           max-width: 200px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
 
           :last-child {
             border-right: 0;
@@ -73,5 +70,16 @@ export const getStyles = (theme: GrafanaTheme) => {
         padding: 0.5rem;
       }
     `,
+    tableHeader: (width?: string | number) => css`
+      width: ${width};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    tableCell: (noHiddenOverflow: boolean) => css`
+      overflow: ${noHiddenOverflow ? 'visible' : 'hidden'};
+      text-overflow: ${noHiddenOverflow ? 'clip' : 'ellipsis'};
+      white-space: ${noHiddenOverflow ? 'normal' : 'nowrap'};
+    `,
   };
 };

public/app/percona/integrated-alerting/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { cx } from '@emotion/css';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import {
   useTable,
@@ -173,9 +173,7 @@ export const Table: FC<TableProps> = ({
                       {headerGroup.headers.map((column) => (
                         /* eslint-disable-next-line react/jsx-key */
                         <th
-                          className={css`
-                            width: ${column.width};
-                          `}
+                          className={style.tableHeader(column.width)}
                           {...column.getHeaderProps([
                             {
                               className: column.className,
@@ -203,9 +201,17 @@ export const Table: FC<TableProps> = ({
                               {row.cells.map((cell) => {
                                 return (
                                   <td
+                                    title={
+                                      typeof cell.value === 'string' || typeof cell.value === 'number'
+                                        ? cell.value.toString()
+                                        : undefined
+                                    }
                                     {...cell.getCellProps([
                                       {
-                                        className: cell.column.className,
+                                        className: cx(
+                                          cell.column.className,
+                                          style.tableCell(!!cell.column.noHiddenOverflow)
+                                        ),
                                         style: cell.column.style,
                                       },
                                       getCellProps(cell),

public/app/percona/integrated-alerting/components/Table/Table.types.ts

@@ -31,6 +31,7 @@ export type ExtendedColumn<D extends object = {}> = Column<D> & {
   type?: FilterFieldTypes;
   options?: Array<SelectableValue<any>>;
   label?: string;
+  noHiddenOverflow?: boolean;
 };
 
 export enum FilterFieldTypes {

public/app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { Databases } from 'app/percona/shared/core';
+
+import { ServiceIconWithText } from './ServiceIconWithText';
+
+describe('ServiceIconWithText', () => {
+  it('should show icon and text', () => {
+    render(<ServiceIconWithText dbType={Databases.mysql} text="service 1" />);
+    expect(screen.getByText('service 1')).toBeInTheDocument();
+    expect(screen.getByTestId('service-icon')).toBeInTheDocument();
+  });
+
+  it('should show only text if icon not available', () => {
+    render(<ServiceIconWithText dbType="external" text="service 1" />);
+    expect(screen.getByText('service 1')).toBeInTheDocument();
+    expect(screen.queryByTestId('service-icon')).not.toBeInTheDocument();
+  });
+});

public/app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText.tsx

@@ -11,10 +11,10 @@ export const ServiceIconWithText: FC<ServiceIconWithTextProps> = ({ dbType, text
   const icon: IconName = DATABASE_ICONS[dbType];
   const styles = useStyles2(getStyles);
 
-  return icon ? (
+  return (
     <div className={styles.wrapper}>
-      <Icon name={icon} />
+      {!!icon && <Icon name={icon} data-testid="service-icon" />}
       <span>{text}</span>
     </div>
-  ) : null;
+  );
 };

public/app/percona/shared/components/PerconaBootstrapper/PerconaBootstrapper.tsx

@@ -78,7 +78,7 @@ export const PerconaBootstrapper = ({ onReady }: PerconaBootstrapperProps) => {
       await dispatch(fetchUserStatusAction());
       await dispatch(fetchServerInfoAction());
       await dispatch(fetchServerSaasHostAction());
-      await dispatch(fetchAdvisors());
+      await dispatch(fetchAdvisors({ disableNotifications: true }));
       onReady();
     };
 

public/app/percona/shared/core/reducers/advisors/advisors.ts

@@ -1,15 +1,16 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
+import { CancelToken } from 'axios';
 
 import { createAsyncSlice, withSerializedError } from 'app/features/alerting/unified/utils/redux';
 import { AdvisorsService } from 'app/percona/shared/services/advisors/Advisors.service';
 import { Advisor } from 'app/percona/shared/services/advisors/Advisors.types';
 
 export const fetchAdvisors = createAsyncThunk(
   'percona/fetchAdvisors',
-  (): Promise<Advisor[]> =>
+  (args?: { token?: CancelToken; disableNotifications?: boolean }): Promise<Advisor[]> =>
     withSerializedError(
       (async () => {
-        const { advisors } = await AdvisorsService.list();
+        const { advisors } = await AdvisorsService.list(args?.token, args?.disableNotifications);
         return advisors;
       })()
     )

public/app/percona/shared/core/reducers/services/services.ts

@@ -54,7 +54,7 @@ export const { setServices, setLoading } = servicesSlice.actions;
 export const fetchActiveServiceTypesAction = createAsyncThunk<ServiceType[]>(
   'percona/fetchActiveServiceTypes',
   async () => {
-    const response = await ServicesService.getActive();
+    const response = await ServicesService.getActive(undefined, true);
     return response.service_types || [];
   }
 );

public/app/percona/shared/services/services/Services.service.ts

@@ -5,8 +5,8 @@ import { api } from 'app/percona/shared/helpers/api';
 import { ListServicesBody, ListTypesPayload, RemoveServiceBody, ServiceListPayload } from './Services.types';
 
 export const ServicesService = {
-  getActive(token?: CancelToken) {
-    return api.post<ListTypesPayload, {}>('/v1/inventory/Services/ListTypes', {}, false, token);
+  getActive(token?: CancelToken, disableNotifications?: boolean) {
+    return api.post<ListTypesPayload, {}>('/v1/inventory/Services/ListTypes', {}, disableNotifications, token);
   },
   getServices(body: Partial<ListServicesBody> = {}, token?: CancelToken) {
     return api.post<ServiceListPayload, Partial<ListServicesBody>>('/v1/management/Service/List', body, false, token);

public/app/plugins/panel/pmm-check/components/Failed/Failed.tsx

@@ -26,7 +26,7 @@ export const Failed: FC = () => {
 
   const fetchAlerts = useCallback(async (): Promise<void> => {
     try {
-      const checks = await CheckService.getAllFailedChecks();
+      const checks = await CheckService.getAllFailedChecks(undefined, true);
       setFailedChecks(checks);
     } catch (e) {
       logger.error(e);