PMM-12845 Fix QAN column management

pmm-app/package.json

@@ -34,14 +34,15 @@
     "grafana"
   ],
   "dependencies": {
-    "@ant-design/icons": "^4.0.6",
+    "@ant-design/compatible": "^5.1.2",
+    "@ant-design/icons": "^5.3.5",
     "@emotion/css": "11.10.6",
     "@grafana/data": "10.4.2",
     "@grafana/runtime": "10.4.2",
     "@grafana/schema": "10.4.2",
     "@grafana/ui": "10.4.2",
     "@tippyjs/react": "^4.2.6",
-    "antd": "^3.24.3",
+    "antd": "^5.15.4",
     "axios": "^0.26.0",
     "chart.js": "^3.7.0",
     "chartjs-plugin-datalabels": "^2.0.0",
@@ -148,4 +149,4 @@
     "node": ">=18"
   },
   "packageManager": "[email protected]"
-}
+}

pmm-app/src/pmm-qan/panel/QueryAnalytics.styles.ts

@@ -43,6 +43,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
     showTotal: css`
+      margin-left: 10px;
       color: ${parameters.mainTextColor};
     `,
     tableWrapper: css`

pmm-app/src/pmm-qan/panel/QueryAnalytics.tsx

@@ -5,6 +5,8 @@ import SplitPane from 'react-split-pane';
 import { Button, useTheme } from '@grafana/ui';
 import { cx } from '@emotion/css';
 import { showSuccessNotification, showWarningNotification } from 'shared/components/helpers';
+import { ConfigProvider } from 'antd';
+import { antdTheme } from 'shared/core/theme';
 import { QueryAnalyticsProvider, UrlParametersProvider } from './provider/provider';
 import {
   Details, Filters, ManageColumns, Overview,
@@ -90,7 +92,9 @@ const QueryAnalyticsPanel: FC = () => {
 };
 
 export default (props) => (
-  <UrlParametersProvider {...props}>
-    <QueryAnalyticsPanel />
-  </UrlParametersProvider>
+  <ConfigProvider theme={antdTheme}>
+    <UrlParametersProvider {...props}>
+      <QueryAnalyticsPanel />
+    </UrlParametersProvider>
+  </ConfigProvider>
 );

pmm-app/src/pmm-qan/panel/components/ManageColumns/ManageColumns.tsx

@@ -2,12 +2,13 @@ import React, {
   useCallback, useContext, useEffect, useState,
 } from 'react';
 import {
-  Divider, Icon, Select, Tooltip,
+  Divider, Select, Tooltip,
 } from 'antd';
 import { cx } from '@emotion/css';
 import { useTheme } from '@grafana/ui';
 import { QueryAnalyticsProvider } from 'pmm-qan/panel/provider/provider';
 import { METRIC_CATALOGUE } from 'pmm-qan/panel/QueryAnalytics.constants';
+import { MinusOutlined, SwapOutlined } from '@ant-design/icons';
 import { OptionContent } from './OptionContent/OptionContent';
 import './ManageColumns.scss';
 import { getStyles } from './ManageColumns.styles';
@@ -78,10 +79,10 @@ export const ManageColumns = (props) => {
   ) : (
     <div className={styles.placeholderAdd}>
       {!isDropdownOpen && (
-      <div>
-        <i className={cx('fa fa-plus-circle', styles.iconMargin)} />
-        <span>Add column</span>
-      </div>
+        <div>
+          <i className={cx('fa fa-plus-circle', styles.iconMargin)} />
+          <span>Add column</span>
+        </div>
       )}
     </div>
   ));
@@ -92,13 +93,13 @@ export const ManageColumns = (props) => {
       {!onlyAdd ? <Divider className={styles.dividerMargin} /> : null}
       {!onlyAdd && columns.length > 1 ? (
         <div className={styles.actionElement} onMouseDown={(e) => e.preventDefault()} onClick={removeColumn}>
-          <Icon type="minus" className={styles.iconMargin} />
+          <MinusOutlined className={styles.iconMargin} />
           Remove column
         </div>
       ) : null}
       {!onlyAdd && mainMetric !== currentMetric.simpleName ? (
         <div className={styles.actionElement} onMouseDown={(e) => e.preventDefault()} onClick={swapWithMain}>
-          <Icon type="swap" className={styles.iconMargin} />
+          <SwapOutlined className={styles.iconMargin} />
           Swap with main metric
         </div>
       ) : null}
@@ -112,16 +113,16 @@ export const ManageColumns = (props) => {
         showSearch
         style={{ width: width || '125px' }}
         placeholder={<Placeholder />}
-        filterOption={(value, option) => String(option.props.label)
+        filterOption={(value, option) => String(option?.props.label)
           .toLowerCase()
           .includes(value.toLowerCase())}
         onChange={changeColumn}
         onDropdownVisibleChange={(open) => setDropdownOpen(open)}
-        dropdownMatchSelectWidth={false}
+        popupMatchSelectWidth={false}
         value={undefined}
-        showArrow={false}
+        suffixIcon={false}
         className={`${onlyAdd ? 'add' : 'manage'}-columns-selector`}
-        dropdownClassName={`${onlyAdd ? 'add' : 'manage'}-columns-selector-dropdown`}
+        popupClassName={`${onlyAdd ? 'add' : 'manage'}-columns-selector-dropdown`}
         dropdownRender={dropdownRender}
         data-testid="manage-columns-selector"
         {...extraSelectProps}

pmm-app/src/pmm-qan/panel/components/Overview/components/Dimension/Dimension.tsx

@@ -25,7 +25,7 @@ export const Dimension: FC = () => {
         onChange={contextActions.changeGroupBy}
         className="group-by-selector"
         data-testid="group-by"
-        dropdownClassName="group-by-selector-dropdown"
+        popupClassName="group-by-selector-dropdown"
       >
         {DIMENSIONS_OPTIONS.map((option) => (
           // @ts-ignore

pmm-app/src/shared/components/helpers/Helpers.tsx

@@ -1,4 +1,5 @@
-import { Icon, Tooltip } from 'antd';
+import { QuestionCircleFilled } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 import React from 'react';
 
 interface Link {
@@ -36,6 +37,6 @@ export const PluginTooltip = ({ text, links }: PluginTooltipInterface) => (
     )}
     style={{ background: 'deepskyblue' }}
   >
-    <Icon type="question-circle" style={{ marginLeft: '5px' }} />
+    <QuestionCircleFilled style={{ marginLeft: '5px' }} />
   </Tooltip>
 );

pmm-app/src/shared/core/theme.ts

@@ -0,0 +1,49 @@
+import { defaultTheme } from '@ant-design/compatible';
+import { ThemeConfig } from 'antd';
+
+export const antdTheme: ThemeConfig = {
+  ...defaultTheme,
+  token: {
+    ...defaultTheme.token,
+    colorBgBase: 'rgb(22, 23, 25)',
+    colorSuccess: '#52c41a',
+    colorWarning: '#faad14',
+    colorError: '#f5222d',
+    fontSize: 14,
+    fontFamily: 'inherit',
+    colorTextHeading: 'rgba(255, 255, 255, 0.8)',
+    colorText: 'rgba(255, 255, 255, 0.8)',
+    colorTextSecondary: 'rgba(255,255,255,0.8)',
+    colorTextDisabled: 'rgba(255,255,255, 0.6)',
+    borderRadius: 0,
+    colorBorder: 'rgb(40, 40, 40)',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+    colorBgContainer: '#rgb(22, 23, 25)',
+    colorLink: 'rgb(51, 181, 229)',
+  },
+  components: {
+    ...defaultTheme.components,
+    Table: {
+      headerBg: '#202226',
+      rowSelectedBg: 'gray',
+      rowHoverBg: 'transparent',
+      cellPaddingBlock: 4,
+    },
+    Select: {
+      optionSelectedBg: '#2d2e2f',
+      optionActiveBg: '#2d2e2f',
+      colorTextPlaceholder: '#fff',
+    },
+    Tag: {
+      defaultBg: 'transparent',
+      defaultColor: 'rgba(255, 255, 255, 0.8)',
+    },
+    Tooltip: {
+      colorBgSpotlight: '#3274d9',
+    },
+    Tabs: {
+      itemActiveColor: 'rgba(255, 255, 255, 0.8)',
+      itemSelectedColor: '#fff',
+    },
+  },
+};

pmm-app/src/shared/style.less

@@ -1,52 +1,5 @@
-#antd {
-  background-color: transparent;
-  .manage-columns,
-  .overview {
-    @import '../../node_modules/antd/dist/antd.less';
-  }
-}
-
-@import '../../node_modules/antd/lib/collapse/style/index.less';
-@import '../../node_modules/antd/lib/slider/style/index.less';
-@import '../../node_modules/antd/lib/tooltip/style/index.less';
-@import '../../node_modules/antd/lib/select/style/index.less';
-@import '../../node_modules/antd/lib/input/style/index.less';
-@import '../../node_modules/antd/lib/divider/style/index.less';
-@import '../../node_modules/antd/lib/list/style/index.less';
-@import '../../node_modules/antd/lib/card/style/index.less';
-@import '../../node_modules/antd/lib/table/style/index.less';
-
-@body-background: #161719;
-@success-color: #52c41a; // success state color
-@warning-color: #faad14; // warning state color
-@error-color: #f5222d; // error state color
-@font-size-base: 14px; // major text font size
-@heading-color: rgba(255, 255, 255, 0.8); // heading text color
-@text-color: rgba(255, 255, 255, 0.8); // major text color
-@text-color-secondary : rgba(255,255,255,0.8); // secondary text color
-@disabled-color : rgba(255,255,255, 0.6); // disable state color
-@border-radius-base: 0px; // major border radius
-@border-color-base: rgb(40, 40, 40); // major border color
-@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
-@component-background: rgb(22, 23, 25);
-@background-color-base: rgb(22, 23, 25);
-@table-header-bg: #202226 !important;
-@table-selected-row-bg: gray;
-@border-color-split: rgb(40, 40, 40);
-@table-row-hover-bg: transparent;
-@select-item-selected-bg: #2d2e2f !important;
-@select-item-active-bg: #2d2e2f !important;
-@tag-default-color: rgba(255, 255, 255, 0.8);
-@tag-default-bg: transparent;
-@tooltip-bg: #3274d9;
-@link-color: rgb(51, 181, 229);
-@font-family: 'roboto';
-@tabs-active-color: rgba(255, 255, 255, 0.8);
-@tabs-highlight-color: white;
-@table-padding-vertical: 4px;
-
 #query-analytics-details {
-  background-color: @background-color-base;
+  background-color: rgb(22, 23, 25);
 }
 
 #antd {

pmm-app/src/shared/styles.scss

@@ -165,3 +165,7 @@ ol.breadcrumb-container {
 .app-tooltip:hover::before {
   display: inline-block;
 }
+
+.ant-select-dropdown {
+  padding: 0;
+}