From 152aad3792afbaf2b08a8ceb26d4204fadd6b420 Mon Sep 17 00:00:00 2001 From: KROSY Date: Thu, 19 Oct 2023 14:01:56 +0300 Subject: [PATCH] fix: fix top queries table row height --- .../CellWithPopover/CellWithPopover.scss | 13 ++++++++++++ .../CellWithPopover/CellWithPopover.tsx | 17 ++++++++++++++++ .../TopQueriesTruncatedQuery.tsx | 20 +++++++++++++++++++ .../TruncatedQuery/TruncatedQuery.scss | 8 ++++++++ .../TenantOverview/TenantCpu/TopQueries.tsx | 6 ++---- .../TenantStorage/TopTables.tsx | 10 ++-------- .../Diagnostics/TopQueries/TopQueries.tsx | 8 +++++++- .../TopQueries/getTopQueriesColumns.tsx | 10 +++++++++- src/utils/diagnostics.ts | 16 +++++++++++++-- 9 files changed, 92 insertions(+), 16 deletions(-) create mode 100644 src/components/CellWithPopover/CellWithPopover.scss create mode 100644 src/components/CellWithPopover/CellWithPopover.tsx create mode 100644 src/components/TruncatedQuery/TopQueriesTruncatedQuery.tsx diff --git a/src/components/CellWithPopover/CellWithPopover.scss b/src/components/CellWithPopover/CellWithPopover.scss new file mode 100644 index 000000000..26ff9e42d --- /dev/null +++ b/src/components/CellWithPopover/CellWithPopover.scss @@ -0,0 +1,13 @@ +.ydb-cell-with-popover { + display: inline-block; + overflow: hidden; + + max-width: 100%; + + white-space: nowrap; + text-overflow: ellipsis; + + &__wrapper { + display: flex; + } +} diff --git a/src/components/CellWithPopover/CellWithPopover.tsx b/src/components/CellWithPopover/CellWithPopover.tsx new file mode 100644 index 000000000..48cc91b0b --- /dev/null +++ b/src/components/CellWithPopover/CellWithPopover.tsx @@ -0,0 +1,17 @@ +import cn from 'bem-cn-lite'; + +import {Popover, type PopoverProps} from '@gravity-ui/uikit'; + +import './CellWithPopover.scss'; + +const b = cn('ydb-cell-with-popover'); + +export function CellWithPopover({children, className, ...props}: PopoverProps) { + return ( +
+ + {children} + +
+ ); +} diff --git a/src/components/TruncatedQuery/TopQueriesTruncatedQuery.tsx b/src/components/TruncatedQuery/TopQueriesTruncatedQuery.tsx new file mode 100644 index 000000000..01a0e50ec --- /dev/null +++ b/src/components/TruncatedQuery/TopQueriesTruncatedQuery.tsx @@ -0,0 +1,20 @@ +import cn from 'bem-cn-lite'; + +import {CellWithPopover} from '../CellWithPopover/CellWithPopover'; + +import './TruncatedQuery.scss'; + +const b = cn('kv-truncated-query'); + +interface TopQueriesTruncatedQueryProps { + value: string | undefined; +} + +export const TopQueriesTruncatedQuery = ({value = ''}: TopQueriesTruncatedQueryProps) => { + const content = value.split('\n').slice(0, 5).join('\n'); + return ( + + {value} + + ); +}; diff --git a/src/components/TruncatedQuery/TruncatedQuery.scss b/src/components/TruncatedQuery/TruncatedQuery.scss index a34563f4d..6dcf7c6b5 100644 --- a/src/components/TruncatedQuery/TruncatedQuery.scss +++ b/src/components/TruncatedQuery/TruncatedQuery.scss @@ -14,4 +14,12 @@ } } } + + &__popover-content { + overflow: hidden; + + max-width: 600px; + + white-space: pre; + } } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx index 254bc697c..48914048d 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx @@ -1,4 +1,3 @@ -import qs from 'qs'; import {useDispatch} from 'react-redux'; import {useHistory, useLocation} from 'react-router'; import {useCallback} from 'react'; @@ -14,6 +13,7 @@ import { } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries'; import {changeUserInput} from '../../../../../store/reducers/executeQuery'; import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks'; +import {parseQuery} from '../../../../../routes'; import {TenantTabsGroups, getTenantPath} from '../../../TenantPages'; import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns'; import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout'; @@ -55,9 +55,7 @@ export function TopQueries({path}: TopQueriesProps) { dispatch(changeUserInput({input})); - const queryParams = qs.parse(location.search, { - ignoreQueryPrefix: true, - }); + const queryParams = parseQuery(location); const queryPath = getTenantPath({ ...queryParams, diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx index f553adead..6baded485 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx @@ -2,7 +2,6 @@ import {useDispatch} from 'react-redux'; import cn from 'bem-cn-lite'; import DataTable, {Column} from '@gravity-ui/react-data-table'; -import {Popover} from '@gravity-ui/uikit'; import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks'; import { @@ -17,6 +16,7 @@ import type {KeyValueRow} from '../../../../../types/api/query'; import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers'; import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton'; import {ResponseError} from '../../../../../components/Errors/ResponseError'; +import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover'; import './TenantStorage.scss'; @@ -67,13 +67,7 @@ export function TopTables({path}: TopTablesProps) { { name: 'Path', sortable: false, - render: ({row}) => ( -
- - {row.Path} - -
- ), + render: ({row}) => {row.Path}, }, ]; diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx index 027ce98fd..241aaa191 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx @@ -30,6 +30,7 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks'; import {prepareQueryError} from '../../../../utils/query'; import {parseQuery} from '../../../../routes'; import {QUERY_TABLE_SETTINGS} from '../../utils/constants'; +import {isSortableTopQueriesProperty} from '../../../../utils/diagnostics'; import {isColumnEntityType} from '../../utils/schema'; import {TenantTabsGroups, getTenantPath} from '../../TenantPages'; import {getTopQueriesColumns} from './getTopQueriesColumns'; @@ -58,7 +59,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => { data: {result: data = undefined} = {}, filters: storeFilters, } = useTypedSelector((state) => state.executeTopQueries); - const columns = getTopQueriesColumns(); + const rawColumns = getTopQueriesColumns(); const preventFetch = useRef(false); @@ -71,6 +72,11 @@ export const TopQueries = ({path, type}: TopQueriesProps) => { dispatch(setTopQueriesFilters(filters)); }, [dispatch, filters]); + const columns = rawColumns.map((column) => ({ + ...column, + sortable: isSortableTopQueriesProperty(column.name), + })); + const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => { const intervalEnd = responseData?.result?.[0]?.IntervalEnd; diff --git a/src/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.tsx b/src/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.tsx index 7e3ee97d0..a77cc30d1 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.tsx @@ -5,6 +5,7 @@ import DataTable, {type Column} from '@gravity-ui/react-data-table'; import type {KeyValueRow} from '../../../../types/api/query'; import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters'; import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery'; +import {TopQueriesTruncatedQuery} from '../../../../components/TruncatedQuery/TopQueriesTruncatedQuery'; import {MAX_QUERY_HEIGHT} from '../../utils/constants'; import './TopQueries.scss'; @@ -18,6 +19,7 @@ const TOP_QUERIES_COLUMNS_IDS = { ReadRows: 'ReadRows', ReadBytes: 'ReadBytes', UserSID: 'UserSID', + TopQueriesQueryText: 'TopQueriesQueryText', }; const cpuTimeUsColumn: Column = { @@ -66,6 +68,12 @@ const userSIDColumn: Column = { align: DataTable.LEFT, }; +const topQueriesQueryTextColumn: Column = { + name: TOP_QUERIES_COLUMNS_IDS.TopQueriesQueryText, + render: ({row}) => , + sortable: false, +}; + export const getTopQueriesColumns = (): Column[] => { return [ cpuTimeUsColumn, @@ -78,5 +86,5 @@ export const getTopQueriesColumns = (): Column[] => { }; export const getTenantOverviewTopQueriesColumns = (): Column[] => { - return [queryTextColumn, cpuTimeUsColumn]; + return [topQueriesQueryTextColumn, cpuTimeUsColumn]; }; diff --git a/src/utils/diagnostics.ts b/src/utils/diagnostics.ts index 410127d94..44c634d53 100644 --- a/src/utils/diagnostics.ts +++ b/src/utils/diagnostics.ts @@ -1,11 +1,23 @@ import {ValueOf} from '../types/common'; -export const TOP_SHARDS_SORT_VALUES = { +const TOP_SHARDS_SORT_VALUES = { CPUCores: 'CPUCores', DataSize: 'DataSize', } as const; -export type TopShardsSortValue = ValueOf; +const TOP_QUERIES_SORT_VALUES = { + CPUTimeUs: 'CPUTimeUs', + EndTime: 'EndTime', + ReadRows: 'ReadRows', + ReadBytes: 'ReadBytes', + UserSID: 'UserSID', +} as const; + +type TopShardsSortValue = ValueOf; +type TopQueriesSortValue = ValueOf; export const isSortableTopShardsProperty = (value: string): value is TopShardsSortValue => Object.values(TOP_SHARDS_SORT_VALUES).includes(value as TopShardsSortValue); + +export const isSortableTopQueriesProperty = (value: string): value is TopQueriesSortValue => + Object.values(TOP_QUERIES_SORT_VALUES).includes(value as TopQueriesSortValue);