From f4989c9a30964e116680852a6a19fcf836ed5583 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Thu, 30 May 2024 17:49:03 +0300 Subject: [PATCH] feat(HotKeys): add help card --- .../Tenant/Diagnostics/HotKeys/HotKeys.scss | 18 +++- .../Tenant/Diagnostics/HotKeys/HotKeys.tsx | 83 +++++++++++++------ .../Tenant/Diagnostics/HotKeys/i18n/en.json | 4 +- src/services/settings.ts | 2 + src/utils/constants.ts | 2 + 5 files changed, 78 insertions(+), 31 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss index 05a10cfa8d..3d046f2040 100644 --- a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss +++ b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss @@ -1,13 +1,23 @@ @import '../../../../styles/mixins.scss'; .ydb-hot-keys { - &__table { - @include freeze-nth-column(1); - } - &__primary-key-column { display: flex; align-items: center; gap: 5px; } + + &__help-card { + position: sticky; + left: 0; + + margin-bottom: 20px; + padding: 20px 40px 20px 20px; + + &__close-button { + position: absolute; + top: 5px; + right: 5px; + } + } } diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx index f923e2074d..a0cff80a60 100644 --- a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx +++ b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.tsx @@ -1,8 +1,9 @@ import React from 'react'; +import {Xmark} from '@gravity-ui/icons'; import DataTable from '@gravity-ui/react-data-table'; import type {Column} from '@gravity-ui/react-data-table'; -import {Icon} from '@gravity-ui/uikit'; +import {Button, Card, Icon} from '@gravity-ui/uikit'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable'; @@ -15,8 +16,8 @@ import { import type {IResponseError} from '../../../../types/api/error'; import type {HotKey} from '../../../../types/api/hotkeys'; import {cn} from '../../../../utils/cn'; -import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants'; -import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; +import {DEFAULT_TABLE_SETTINGS, IS_HOTKEYS_HELP_HIDDDEN_KEY} from '../../../../utils/constants'; +import {useSetting, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; import i18n from './i18n'; @@ -46,6 +47,7 @@ const getHotKeysColumns = (keyColumnsIds: string[] = []): Column[] => { })); return [ + ...keysColumns, { name: tableColumnsIds.accessSample, header: 'Samples', @@ -53,7 +55,6 @@ const getHotKeysColumns = (keyColumnsIds: string[] = []): Column[] => { align: DataTable.RIGHT, sortable: false, }, - ...keysColumns, ]; }; @@ -64,6 +65,8 @@ interface HotKeysProps { export function HotKeys({path}: HotKeysProps) { const dispatch = useTypedDispatch(); + const [helpHidden, setHelpHidden] = useSetting(IS_HOTKEYS_HELP_HIDDDEN_KEY); + const collectSamplesTimerRef = React.useRef>(); const {loading, wasLoaded, data, error} = useTypedSelector((state) => state.hotKeys); @@ -118,29 +121,57 @@ export function HotKeys({path}: HotKeysProps) { fetchData(); }, [dispatch, path]); - // It takes a while to collect hot keys. Display explicit status message, while collecting - if ((loading && !wasLoaded) || schemaLoading) { - return
{i18n('hot-keys-collecting')}
; - } - - if (error) { - return ; - } - - if (!data) { - return
{i18n('no-data')}
; - } + const renderContent = () => { + // It takes a while to collect hot keys. Display explicit status message, while collecting + if ((loading && !wasLoaded) || schemaLoading) { + return
{i18n('hot-keys-collecting')}
; + } + + if (error) { + return ; + } + + if (!data) { + return
{i18n('no-data')}
; + } + + return ( + + ); + }; + + const renderHelpCard = () => { + if (helpHidden) { + return null; + } + + return ( + + {i18n('help')} + + + ); + }; return ( - + + {renderHelpCard()} + {renderContent()} + ); } diff --git a/src/containers/Tenant/Diagnostics/HotKeys/i18n/en.json b/src/containers/Tenant/Diagnostics/HotKeys/i18n/en.json index 1c4838c33e..5d65a96358 100644 --- a/src/containers/Tenant/Diagnostics/HotKeys/i18n/en.json +++ b/src/containers/Tenant/Diagnostics/HotKeys/i18n/en.json @@ -1,4 +1,6 @@ { "hot-keys-collecting": "Please wait a little while we are collecting hot keys samples...", - "no-data": "No information about hot keys" + "no-data": "No information about hot keys", + + "help": "Hot keys contains a list of table primary key values that are accessed most often. Sample is collected upon request to the tab during 5s time interval. Samples column indicates how many requests to the particular key value were registered during collection phase." } diff --git a/src/services/settings.ts b/src/services/settings.ts index d08e7bfaed..f029687ceb 100644 --- a/src/services/settings.ts +++ b/src/services/settings.ts @@ -5,6 +5,7 @@ import { BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, + IS_HOTKEYS_HELP_HIDDDEN_KEY, LANGUAGE_KEY, LAST_USED_QUERY_ACTION_KEY, PARTITIONS_HIDDEN_COLUMNS_KEY, @@ -40,6 +41,7 @@ export const DEFAULT_USER_SETTINGS = { [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true, [ENABLE_AUTOCOMPLETE]: false, [AUTOCOMPLETE_ON_ENTER]: true, + [IS_HOTKEYS_HELP_HIDDDEN_KEY]: false, } as const satisfies SettingsObject; class SettingsManager { diff --git a/src/utils/constants.ts b/src/utils/constants.ts index a6d89ab433..3da31838cd 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -137,3 +137,5 @@ export const USE_CLUSTER_BALANCER_AS_BACKEND_KEY = 'useClusterBalancerAsBacked'; export const ENABLE_AUTOCOMPLETE = 'enableAutocomplete'; export const AUTOCOMPLETE_ON_ENTER = 'autocompleteOnEnter'; + +export const IS_HOTKEYS_HELP_HIDDDEN_KEY = 'isHotKeysHelpHidden';