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/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx b/desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx index af9939779b9..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} @@ -117,13 +121,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) => ( +
- )} -
- ))} +
+ ))}
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]) +); 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..a95c30b540c 100644 --- a/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss +++ b/desktop/core/src/desktop/js/apps/admin/Overview/Overview.scss @@ -21,11 +21,23 @@ 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; + } + .config__spin { display: flex; justify-content: center; align-items: center; - height: 100vh; } .config__address-value { @@ -56,11 +68,6 @@ border: 1px solid $fluidx-gray-400; } - .overview-examples, - .overview-analytics { - height: 100vh; - } - .examples__install-btn { margin: 10px; } @@ -73,7 +80,6 @@ .analytics__checkbox-icon { width: auto; height: auto; - min-height: 0; } .usage__analytics { 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; diff --git a/hue b/hue new file mode 160000 index 00000000000..0f40586408c --- /dev/null +++ b/hue @@ -0,0 +1 @@ +Subproject commit 0f40586408cac04e111e76b9f973caf6d3ad5d20