[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,7 @@ 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 './Metrics.scss';
 
@@ -93,12 +93,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: t(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 +125,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

@@ -80,18 +80,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 +102,17 @@ const MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
     () =>
       dataSource.map(item => ({
         ...item,
-        name: metricLabels[item.name] || item.name
+        name: t(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">{t(caption)}</span>}
     />
   );
 };

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",
+  "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",
   "min": "min",
   "Misc": "Misc",
   "Missing label configuration.": "Missing label configuration.",