From cf2e3fef1d91b2b74c293750415ad2743dd28854 Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Fri, 19 Sep 2025 15:19:04 +0530 Subject: [PATCH 1/6] Fix inconsistent spacing between dropdown and table in MetricsTab --- .../src/desktop/js/apps/admin/Metrics/MetricsTab.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx b/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx index af9939779b9..f91f5beb698 100644 --- a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx +++ b/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx @@ -117,13 +117,13 @@ const Metrics: React.FC = (): JSX.Element => {
{!error && - filteredMetricsData.map((tableData, index) => ( -
- {(showAllTables || selectedMetric === tableData.caption) && ( + filteredMetricsData + .filter(tableData => showAllTables || selectedMetric === tableData.caption) + .map((tableData, index) => ( +
- )} -
- ))} +
+ ))}
From 5114a606cc29fad835dba3ea713ed48c247ca1c2 Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Fri, 19 Sep 2025 15:47:53 +0530 Subject: [PATCH 2/6] Changing the background color to be grey consistently --- .../src/desktop/js/apps/admin/Configuration/Configuration.scss | 1 + desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss | 1 + .../core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss | 1 + 3 files changed, 3 insertions(+) diff --git a/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss b/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss index 4b1472e52dd..3af49f6c5b5 100644 --- a/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss +++ b/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss @@ -20,6 +20,7 @@ .config-component { background-color: $fluidx-gray-100; padding: 24px; + min-height: 100vh; .config__section-dropdown-label { color: $fluidx-gray-700; diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss b/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss index b902d1966a3..a790e6955cd 100644 --- a/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss +++ b/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss @@ -19,6 +19,7 @@ .metrics-component.antd.cuix { background-color: $fluidx-gray-100; padding: 24px; + min-height: 100vh; .metrics-heading { font-size: $font-size-base; diff --git a/desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss b/desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss index ef56cd0aeed..b8d2864902b 100644 --- a/desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss +++ b/desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss @@ -20,6 +20,7 @@ .hue-server-logs-component { background-color: $fluidx-gray-100; padding: 24px; + min-height: 100vh; .server__display-logs { overflow: auto; From 7620cb51ae6e9010936416c9d93caf28ae5312e4 Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Mon, 22 Sep 2025 19:58:56 +0530 Subject: [PATCH 3/6] extract shared metric labels and show user-friendly names in dropdown --- .../js/apps/admin/Metrics/MetricsTab.tsx | 12 ++++--- .../js/apps/admin/Metrics/MetricsTable.tsx | 13 +------- .../js/apps/admin/Metrics/constants.ts | 31 +++++++++++++++++++ 3 files changed, 40 insertions(+), 16 deletions(-) create mode 100644 desktop/core/src/desktop/js/apps/admin/Metrics/constants.ts diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx b/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx index f91f5beb698..de2c0a797f3 100644 --- a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx +++ b/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 => { {!error && ( metricLabels[key] || key)]} + selectedValue={ + selectedMetric === 'All' ? 'All' : metricLabels[selectedMetric] || selectedMetric + } onSelectChange={handleMetricChange} filterValue={searchQuery} onFilterChange={handleFilterInputChange} diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx b/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx index 1f5dd4bef39..9ee2f04d0a5 100644 --- a/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx +++ b/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 = ({ caption, dataSource }) => { const { t } = i18nReact.useTranslation(); diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/constants.ts b/desktop/core/src/desktop/js/apps/admin/Metrics/constants.ts new file mode 100644 index 00000000000..378d03d034e --- /dev/null +++ b/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]) +); From 4800c9fdd3ce35dea7fecba5a989d3e4fff1f68e Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Mon, 6 Oct 2025 11:03:01 +0530 Subject: [PATCH 4/6] Sticking the topmost header in the admin pages --- desktop/core/src/desktop/js/apps/admin/AdminHeader.scss | 6 ++++++ hue | 1 + 2 files changed, 7 insertions(+) create mode 160000 hue diff --git a/desktop/core/src/desktop/js/apps/admin/AdminHeader.scss b/desktop/core/src/desktop/js/apps/admin/AdminHeader.scss index 68fab3e8559..525e44733f1 100644 --- a/desktop/core/src/desktop/js/apps/admin/AdminHeader.scss +++ b/desktop/core/src/desktop/js/apps/admin/AdminHeader.scss @@ -20,6 +20,12 @@ .admin-header { display: flex; align-items: center; + position: sticky; + top: 0; + z-index: 100; + background-color: $fluidx-gray-100; + padding: 16px 0; + margin-bottom: 16px; .admin-header__select-dropdown { border: 1px solid $fluidx-gray-600; diff --git a/hue b/hue new file mode 160000 index 00000000000..0f40586408c --- /dev/null +++ b/hue @@ -0,0 +1 @@ +Subproject commit 0f40586408cac04e111e76b9f973caf6d3ad5d20 From 28b18fedf0c1d20eb8a817ac7196717d189e40f5 Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Mon, 6 Oct 2025 11:04:50 +0530 Subject: [PATCH 5/6] Stick the left side tabs on the Quick Start page --- .../desktop/js/apps/admin/Overview/Overview.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss b/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss index e719eb270de..72ebe7df8f7 100644 --- a/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss +++ b/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; From a1d189aa2afc181b58056272d4fda40f9978fd87 Mon Sep 17 00:00:00 2001 From: Ananya_Agarwal Date: Mon, 6 Oct 2025 13:47:36 +0530 Subject: [PATCH 6/6] Fixing the scrolling of the screen issue --- .../js/apps/admin/Configuration/Configuration.scss | 1 - .../core/src/desktop/js/apps/admin/Metrics/Metrics.scss | 1 - .../core/src/desktop/js/apps/admin/Overview/Overview.scss | 8 -------- 3 files changed, 10 deletions(-) diff --git a/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss b/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss index 3af49f6c5b5..4b1472e52dd 100644 --- a/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss +++ b/desktop/core/src/desktop/js/apps/admin/Configuration/Configuration.scss @@ -20,7 +20,6 @@ .config-component { background-color: $fluidx-gray-100; padding: 24px; - min-height: 100vh; .config__section-dropdown-label { color: $fluidx-gray-700; diff --git a/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss b/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss index a790e6955cd..b902d1966a3 100644 --- a/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss +++ b/desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss @@ -19,7 +19,6 @@ .metrics-component.antd.cuix { background-color: $fluidx-gray-100; padding: 24px; - min-height: 100vh; .metrics-heading { font-size: $font-size-base; diff --git a/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss b/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss index 72ebe7df8f7..a95c30b540c 100644 --- a/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss +++ b/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss @@ -32,14 +32,12 @@ .ant-tabs-content-holder { overflow: auto; - max-height: calc(100vh - 200px); } .config__spin { display: flex; justify-content: center; align-items: center; - height: 100vh; } .config__address-value { @@ -70,11 +68,6 @@ border: 1px solid $fluidx-gray-400; } - .overview-examples, - .overview-analytics { - height: 100vh; - } - .examples__install-btn { margin: 10px; } @@ -87,7 +80,6 @@ .analytics__checkbox-icon { width: auto; height: auto; - min-height: 0; } .usage__analytics {