[ui-adminServer-improvements] Improving the nits for the Administrator Server Pages - Metrics and Quick start page

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

@@ -23,8 +23,13 @@ import './AdminHeader.scss';
 
 const { Option } = Select;
 
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
 interface AdminHeaderProps {
-  options: string[];
+  options: (string | SelectOption)[];
   selectedValue: string;
   onSelectChange: (value: string) => void;
   filterValue: string;
@@ -52,11 +57,15 @@ const AdminHeader: React.FC<AdminHeaderProps> = ({
         getPopupContainer={triggerNode => triggerNode.parentElement}
         data-testid="admin-header--select"
       >
-        {options.map(option => (
-          <Option key={option} value={option}>
-            {option}
-          </Option>
-        ))}
+        {options.map(option => {
+          const optionValue = typeof option === 'string' ? option : option.value;
+          const optionLabel = typeof option === 'string' ? option : option.label;
+          return (
+            <Option key={optionValue} value={optionValue}>
+              {optionLabel}
+            </Option>
+          );
+        })}
       </Select>
 
       <Input

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

@@ -20,7 +20,8 @@ import Loading from 'cuix/dist/components/Loading';
 import Alert from 'cuix/dist/components/Alert';
 import { get } from '../../../api/utils';
 import { i18nReact } from '../../../utils/i18nReact';
-import AdminHeader from '../AdminHeader';
+import AdminHeader, { SelectOption } from '../AdminHeader';
+import { metricLabels } from './constants';
 
 import './Metrics.scss';
 
@@ -93,12 +94,20 @@ const Metrics: React.FC = (): JSX.Element => {
 
   const { t } = i18nReact.useTranslation();
 
+  const metricOptions: SelectOption[] = [
+    { value: 'All', label: t('All') },
+    ...filteredKeys.map(key => ({
+      value: key,
+      label: metricLabels[key] ? t(metricLabels[key]) : key
+    }))
+  ];
+
   return (
     <div className="cuix antd metrics-component">
       <Loading spinning={loading}>
         {!error && (
           <AdminHeader
-            options={['All', ...filteredKeys]}
+            options={metricOptions}
             selectedValue={selectedMetric}
             onSelectChange={handleMetricChange}
             filterValue={searchQuery}
@@ -117,13 +126,13 @@ const Metrics: React.FC = (): JSX.Element => {
 
         <div className="metrics-component__table-group">
           {!error &&
-            filteredMetricsData.map((tableData, index) => (
-              <div key={index}>
-                {(showAllTables || selectedMetric === tableData.caption) && (
+            filteredMetricsData
+              .filter(tableData => showAllTables || selectedMetric === tableData.caption)
+              .map((tableData, index) => (
+                <div key={index}>
                   <MetricsTable caption={tableData.caption} dataSource={tableData.dataSource} />
-                )}
-              </div>
-            ))}
+                </div>
+              ))}
         </div>
       </Loading>
     </div>

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

@@ -20,6 +20,7 @@ import PaginatedTable, {
 } from '../../../reactComponents/PaginatedTable/PaginatedTable';
 import './Metrics.scss';
 import { i18nReact } from '../../../utils/i18nReact';
+import { metricLabels } from './constants';
 
 interface MetricsValue {
   value: number;
@@ -80,18 +81,6 @@ export interface MetricsTableProps {
   dataSource: DataSourceItem[];
 }
 
-const metricLabels: { [key: string]: string } = {
-  '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 MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
   const { t } = i18nReact.useTranslation();
 
@@ -114,17 +103,21 @@ const MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
     () =>
       dataSource.map(item => ({
         ...item,
-        name: metricLabels[item.name] || item.name
+        name: metricLabels[item.name] ? t(metricLabels[item.name]) : item.name
       })),
-    [dataSource]
+    [dataSource, t]
   );
 
   return (
     <PaginatedTable<DataSourceItem>
       data={transformedDataSource}
       rowKey="name"
       columns={metricsColumns}
-      title={() => <span className="metrics-heading">{metricLabels[caption] ?? caption}</span>}
+      title={() => (
+        <span className="metrics-heading">
+          {metricLabels[caption] ? t(metricLabels[caption]) : caption}
+        </span>
+      )}
     />
   );
 };

desktop/core/src/desktop/js/apps/admin/Metrics/constants.ts

@@ -0,0 +1,27 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const metricLabels: { [key: string]: string } = {
+  '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'
+};

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

@@ -21,6 +21,20 @@
     background-color: $fluidx-gray-100;
     padding: 24px;
 
+    .ant-tabs {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background-color: $fluidx-gray-100;
+      padding: 16px 0;
+      margin-bottom: 16px;
+    }
+
+    .ant-tabs-content-holder {
+      overflow: auto;
+      max-height: calc(100vh - 200px);
+    }
+
     .config__spin {
       display: flex;
       justify-content: center;

desktop/core/src/desktop/static/desktop/locales/en/translation.json

@@ -277,6 +277,15 @@
   "Memory": "Memory",
   "Message": "Message",
   "Metrics": "Metrics",
+  "Active Requests": "Active Requests",
+  "Active Users": "Active Users",
+  "Daemon Threads": "Daemon Threads",
+  "Number of Queries": "Number of Queries",
+  "Request Exceptions": "Request Exceptions",
+  "Request Response Time": "Request Response Time",
+  "Total Active Users": "Total Active Users",
+  "Total Threads": "Total Threads",
+  "Users": "Users",
   "min": "min",
   "Misc": "Misc",
   "Missing label configuration.": "Missing label configuration.",