feat(HotKeys): add help card (#861)

Author: artemmufazalov

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;
+        }
+    }
 }

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,14 +47,14 @@ const getHotKeysColumns = (keyColumnsIds: string[] = []): Column<HotKey>[] => {
     }));
 
     return [
+        ...keysColumns,
         {
             name: tableColumnsIds.accessSample,
             header: 'Samples',
             render: ({row}) => row.accessSample,
             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<ReturnType<typeof setTimeout>>();
 
     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 <div>{i18n('hot-keys-collecting')}</div>;
-    }
-
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
-    if (!data) {
-        return <div>{i18n('no-data')}</div>;
-    }
+    const renderContent = () => {
+        // It takes a while to collect hot keys. Display explicit status message, while collecting
+        if ((loading && !wasLoaded) || schemaLoading) {
+            return <div>{i18n('hot-keys-collecting')}</div>;
+        }
+
+        if (error) {
+            return <ResponseError error={error} />;
+        }
+
+        if (!data) {
+            return <div>{i18n('no-data')}</div>;
+        }
+
+        return (
+            <ResizeableDataTable
+                wrapperClassName={b('table')}
+                columns={tableColumns}
+                data={data}
+                settings={DEFAULT_TABLE_SETTINGS}
+                initialSortOrder={{
+                    columnId: tableColumnsIds.accessSample,
+                    order: DataTable.DESCENDING,
+                }}
+            />
+        );
+    };
+
+    const renderHelpCard = () => {
+        if (helpHidden) {
+            return null;
+        }
+
+        return (
+            <Card theme="info" view="filled" type="container" className={b('help-card')}>
+                {i18n('help')}
+                <Button
+                    className={b('help-card__close-button')}
+                    view="flat"
+                    onClick={() => setHelpHidden(true)}
+                >
+                    <Icon data={Xmark} size={18} />
+                </Button>
+            </Card>
+        );
+    };
 
     return (
-        <ResizeableDataTable
-            wrapperClassName={b('table')}
-            columns={tableColumns}
-            data={data}
-            settings={DEFAULT_TABLE_SETTINGS}
-            initialSortOrder={{
-                columnId: tableColumnsIds.accessSample,
-                order: DataTable.DESCENDING,
-            }}
-        />
+        <React.Fragment>
+            {renderHelpCard()}
+            {renderContent()}
+        </React.Fragment>
     );
 }

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."
 }

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 {

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';