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

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

@@ -21,6 +21,7 @@ import Alert from 'cuix/dist/components/Alert';
 import { get } from '../../../api/utils';
 import { i18nReact } from '../../../utils/i18nReact';
 import AdminHeader from '../AdminHeader';
+import { metricLabels, labelToKey } from './constants';
 
 import './Metrics.scss';
 
@@ -83,8 +84,9 @@ const Metrics: React.FC = (): JSX.Element => {
     }));
   };
   const handleMetricChange = (value: string) => {
-    setSelectedMetric(value);
-    setShowAllTables(value === 'All');
+    const key = value === 'All' ? 'All' : labelToKey[value] || value;
+    setSelectedMetric(key);
+    setShowAllTables(key === 'All');
   };
 
   const handleFilterInputChange = (filterValue: string) => {
@@ -98,8 +100,10 @@ const Metrics: React.FC = (): JSX.Element => {
       <Loading spinning={loading}>
         {!error && (
           <AdminHeader
-            options={['All', ...filteredKeys]}
-            selectedValue={selectedMetric}
+            options={['All', ...filteredKeys.map(key => metricLabels[key] || key)]}
+            selectedValue={
+              selectedMetric === 'All' ? 'All' : metricLabels[selectedMetric] || selectedMetric
+            }
             onSelectChange={handleMetricChange}
             filterValue={searchQuery}
             onFilterChange={handleFilterInputChange}
@@ -117,13 +121,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();
 

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

@@ -0,0 +1,31 @@
+// 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'
+};
+
+export const labelToKey: { [key: string]: string } = Object.fromEntries(
+  Object.entries(metricLabels).map(([key, label]) => [label, key])
+);

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;