[ui-metrics-cuix] Updating metrics to sync with Cloudera design (#3826)

* Updating metrics to sync with Cloudera design

* Fixing the style lint

* Checking

* Realigning to the style

* adding I18n

* Fixing linting issues

* Fixing the failing tests due to change in h4 to span

* fixing linting of previous test commit

* I18n changes and linting

* style issues fixed

* WIP

* useMemo and I18n fix

* Correcting the interface name

desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss

@@ -16,16 +16,14 @@
 
 @import '../../components/styles/variables';
 
-.metrics-component {
+.metrics-component.antd.cuix {
   background-color: $fluidx-gray-100;
   padding: 0 24px 24px 24px;
 
   .metrics-heading {
-    color: $fluidx-gray-700;
-    padding-left: $font-size-lg;
-    font-size: $fluidx-heading-h4-size;
-    line-height: $fluidx-heading-h4-line-height;
-    font-weight: $fluidx-heading-h4-weight;
+    font-size: $font-size-base;
+    font-weight: 500;
+    color: $fluidx-gray-900;
   }
 
   .metrics-filter {
@@ -38,8 +36,13 @@
     }
   }
 
-  .metrics-table th {
-    width: 30%;
+  .metrics-table {
+    th {
+      width: 30%;
+      background-color: $fluidx-gray-040;
+    }
+
+    margin-bottom: $font-size-base;
   }
 
   .metrics-select {

desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.test.tsx

@@ -89,7 +89,11 @@ describe('Metrics', () => {
     if (secondOption) {
       fireEvent.click(secondOption);
       await waitFor(() => {
-        const headings = screen.queryAllByRole('heading', { level: 4 });
+        // const headings = screen.queryAllByRole('heading', { level: 4 });
+        const headings = screen.queryAllByText(
+          (_, element) =>
+            element?.tagName.toLowerCase() === 'span' && element?.className === 'metrics-heading'
+        );
         expect(headings).toHaveLength(1);
       });
     }

desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.tsx

@@ -15,10 +15,11 @@
 // limitations under the License.
 
 import React, { useState, useEffect, useRef } from 'react';
-import MetricsTable, { MetricsResponse } from './MetricsTable';
+import MetricsTable, { MetricsResponse, MetricsTableProps } from './MetricsTable';
 import { Spin, Input, Select, Alert } from 'antd';
-import { get } from 'api/utils';
+import { get } from '../../../api/utils';
 import { SearchOutlined } from '@ant-design/icons';
+import { i18nReact } from '../../../utils/i18nReact';
 import './Metrics.scss';
 
 const { Option } = Select;
@@ -31,7 +32,7 @@ const Metrics: React.FC = (): JSX.Element => {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedMetric, setSelectedMetric] = useState<string>('');
   const [showAllTables, setShowAllTables] = useState(true);
-  const [filteredMetricsData, setFilteredMetricsData] = useState<MetricsData[]>([]);
+  const [filteredMetricsData, setFilteredMetricsData] = useState<MetricsTableProps[]>([]);
   const dropdownRef = useRef(null);
 
   useEffect(() => {
@@ -86,19 +87,13 @@ const Metrics: React.FC = (): JSX.Element => {
     setSearchQuery(e.target.value);
   };
 
+  const { t } = i18nReact.useTranslation();
+
   return (
     <div className="cuix antd metrics-component">
       <Spin spinning={loading}>
         {!error && (
           <>
-            <Input
-              className="metrics-filter"
-              placeholder="Filter metrics..."
-              value={searchQuery}
-              onChange={handleFilterInputChange}
-              prefix={<SearchOutlined />}
-            />
-
             <Select
               className="metrics-select"
               //to make sure antd class gets applied
@@ -115,6 +110,14 @@ const Metrics: React.FC = (): JSX.Element => {
                 </Option>
               ))}
             </Select>
+
+            <Input
+              className="metrics-filter"
+              placeholder={t('Filter metrics...')}
+              value={searchQuery}
+              onChange={handleFilterInputChange}
+              prefix={<SearchOutlined />}
+            />
           </>
         )}
 

desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx

@@ -14,11 +14,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import Table from 'cuix/dist/components/Table/Table';
 import type { ColumnType } from 'antd/es/table';
 import './Metrics.scss';
-import I18n from 'utils/i18n';
+import { i18nReact } from '../../../utils/i18nReact';
 
 interface MetricsValue {
   value: number;
@@ -74,56 +74,58 @@ interface DataSourceItem {
   value: number | MetricsTime;
 }
 
-interface MetricsTableProps {
+export interface MetricsTableProps {
   caption: string;
   dataSource: DataSourceItem[];
 }
+
 const metricLabels: { [key: string]: string } = {
-  'queries.number': I18n('Number of Queries'),
-  'requests.active': I18n('Active Requests'),
-  'requests.exceptions': I18n('Request Exceptions'),
-  'requests.response-time': I18n('Request Response Time'),
-  'threads.daemon': I18n('Daemon Threads'),
-  'threads.total': I18n('Total Threads'),
-  users: I18n('Users'),
-  'users.active': I18n('Active Users'),
-  'users.active.total': I18n('Total Active Users')
+  'queries.number': 'Number of Queries',
+  'requests.active': 'Active Requests',
+  'requests.exceptions': 'Request Exceptions',
+  'requests.response-time': 'Request Response Time',
+  'threads.daemon': 'Daemon Threads',
+  'threads.total': 'Total Threads',
+  users: 'Users',
+  'users.active': 'Active Users',
+  'users.active.total': 'Total Active Users'
 };
 
-const transformMetricNames = (dataSource: DataSourceItem[]): DataSourceItem[] =>
-  dataSource.map(item => ({
-    ...item,
-    name: metricLabels[item.name] || item.name
-  }));
+const metricsColumns: ColumnType<DataSourceItem>[] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: 'Value',
+    dataIndex: 'value',
+    key: 'value',
+    render: value => (typeof value === 'number' ? value : JSON.stringify(value))
+  }
+];
 
 const MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
-  const transformedDataSource = transformMetricNames(dataSource);
+  const { t } = i18nReact.useTranslation();
 
-  const metricsColumns: ColumnType<DataSourceItem>[] = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      key: 'name'
-    },
-    {
-      title: 'Value',
-      dataIndex: 'value',
-      key: 'value',
-      render: value => (typeof value === 'number' ? value : JSON.stringify(value))
-    }
-  ];
+  const transformedDataSource: DataSourceItem[] = useMemo(
+    () =>
+      dataSource.map(item => ({
+        ...item,
+        name: t(metricLabels[item.name]) || item.name
+      })),
+    [dataSource]
+  );
 
   return (
-    <>
-      <h4 className="metrics-heading">{caption}</h4>
-      <Table
-        className="metrics-table"
-        dataSource={transformedDataSource}
-        rowKey="name"
-        columns={metricsColumns}
-        pagination={false}
-      />
-    </>
+    <Table
+      className="metrics-table"
+      dataSource={transformedDataSource}
+      rowKey="name"
+      columns={metricsColumns}
+      pagination={false}
+      title={() => <span className="metrics-heading">{caption}</span>}
+    />
   );
 };