fix(Components/Node/MemoryPopup): do not display lines with '0B' [YTF…

…RONT-4625]
ytsaurus · Jan 22, 2025 · 00268e3 · 00268e3
1 parent 79ed22f
commit 00268e3
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 20 deletions.
diff --git a/packages/ui/src/shared/constants/settings-types.ts b/packages/ui/src/shared/constants/settings-types.ts
@@ -53,6 +53,13 @@ interface NavigationSettings {
     'global::navigation::sqlService': Array<'qtkit' | 'yqlkit'>;
 }
 
+interface ComponentsSettings {
+    'global::components::enableSideBar': boolean;
+    'global::components::selectedColumns': Array<string>;
+    'global::components::templates': unknown;
+    'global::components::memoryPopupShowAll': boolean;
+}
+
 interface SystemSettings {
     'global::system::mastersHostType': 'container' | 'host';
     'global::system::nodesType': NodeType;
@@ -119,7 +126,8 @@ export type DescribedSettings = GlobalSettings &
     QueryTrackerSettings &
     ChytSettings &
     QueryTrackerLastSelectedACOsSettings &
-    QueryTrackerUserDefaultACOSettings;
+    QueryTrackerUserDefaultACOSettings &
+    ComponentsSettings;
 
 export type Settings = DescribedSettings & OtherSettings;
 

diff --git a/packages/ui/src/ui/containers/SettingsMenu/BooleanSettingItem.tsx b/packages/ui/src/ui/containers/SettingsMenu/BooleanSettingItem.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+
+import {Checkbox} from '@gravity-ui/uikit';
+
+import {DescribedSettings} from '../../../shared/constants/settings-types';
+import {KeysByType} from '../../../@types/types';
+
+import {getSettingsData} from '../../store/selectors/settings/settings-base';
+import {setSettingByKey} from '../../store/actions/settings';
+import {SettingsItemLayot, SettingsItemLayotProps} from './SettingsItemLayout';
+
+export type BooleanSettingItemProps<T> = {settingKey: T} & Omit<SettingsItemLayotProps, 'children'>;
+
+export function BooleanSettingItem<T extends KeysByType<DescribedSettings, boolean>>({
+    settingKey,
+    ...rest
+}: BooleanSettingItemProps<T>) {
+    const dispatch = useDispatch();
+    const {[settingKey]: checked} = useSelector(getSettingsData);
+
+    return (
+        <SettingsItemLayot {...rest}>
+            <Checkbox
+                content={rest.title}
+                checked={Boolean(checked)}
+                onUpdate={(value) => {
+                    dispatch(setSettingByKey(settingKey, value));
+                }}
+                qa={settingKey}
+            />
+        </SettingsItemLayot>
+    );
+}
diff --git a/packages/ui/src/ui/containers/SettingsMenu/SettingsItemLayout.scss b/packages/ui/src/ui/containers/SettingsMenu/SettingsItemLayout.scss
@@ -0,0 +1,30 @@
+.yt-settings-item {
+    margin-bottom: 15px;
+
+    & > .checkbox_size_s {
+        font-size: 14px;
+    }
+
+    &_one-line {
+        display: flex;
+    }
+
+    &_select {
+        margin-left: 0;
+        margin-bottom: 0;
+    }
+
+    &-description {
+        font-size: 13px;
+        padding-top: 3px;
+        padding-bottom: 10px;
+    }
+
+    &__annotation {
+        padding-left: 19px;
+    }
+
+    &-annotation-highlight {
+        color: var(--danger-color);
+    }
+}
diff --git a/packages/ui/src/ui/containers/SettingsMenu/SettingsItemLayout.tsx b/packages/ui/src/ui/containers/SettingsMenu/SettingsItemLayout.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import './SettingsItemLayout.scss';
+
+const block = cn('yt-settings-item');
+
+export type SettingsItemLayotProps = {
+    children: React.ReactNode;
+
+    title?: string;
+    description?: React.ReactNode;
+    oneLine?: boolean;
+};
+
+export function SettingsItemLayot({title, children, description, oneLine}: SettingsItemLayotProps) {
+    return (
+        <div
+            className={block({
+                size: 's',
+                'one-line': oneLine,
+            })}
+            title={title}
+        >
+            {children}
+            <div className={block('annotation', 'elements-secondary-text')}>{description}</div>
+        </div>
+    );
+}
diff --git a/packages/ui/src/ui/containers/SettingsPanel/settings-description.tsx b/packages/ui/src/ui/containers/SettingsPanel/settings-description.tsx
@@ -58,6 +58,7 @@ import {getDefaultQueryACO} from '../../pages/query-tracker/module/query_aco/sel
 import {getQueryACO, setUserDefaultACO} from '../../pages/query-tracker/module/query_aco/actions';
 import {Item} from '../../components/Select/Select';
 import {useThunkDispatch} from '../../store/thunkDispatch';
+import {BooleanSettingItem} from '../../containers/SettingsMenu/BooleanSettingItem';
 
 export interface SettingsPage {
     title: string;
@@ -389,17 +390,36 @@ function useSettings(cluster: string, isAdmin: boolean): Array<SettingsPage> {
                 ),
             ]),
         ),
-        makePage('Components', componentsIcon, [
-            makeItem(
-                'Enable side bar',
-                'top',
-                <SettingsMenuItem
-                    settingName={SettingName.COMPONENTS.ENABLE_SIDE_BAR}
-                    settingNS={NAMESPACES.COMPONENTS}
-                    annotation="Display node data in the side bar when clicked."
-                    oneLine={true}
-                />,
-            ),
+        makePageBySections('Components', componentsIcon, [
+            {
+                title: 'General',
+                items: [
+                    makeItem(
+                        'Enable side bar',
+                        'top',
+                        <SettingsMenuItem
+                            settingName={SettingName.COMPONENTS.ENABLE_SIDE_BAR}
+                            settingNS={NAMESPACES.COMPONENTS}
+                            annotation="Display node data in the side bar when clicked."
+                            oneLine={true}
+                        />,
+                    ),
+                ],
+            },
+            {
+                title: 'Memory popup',
+                items: [
+                    makeItem(
+                        'Show empty categories',
+                        'top',
+                        <BooleanSettingItem
+                            settingKey="global::components::memoryPopupShowAll"
+                            description="Display all memory categories even with 0B"
+                            oneLine
+                        />,
+                    ),
+                ],
+            },
         ]),
 
         makePage(
@@ -562,7 +582,15 @@ export function makePage(
     icon: IconProps | undefined,
     items: Array<SettingsItem>,
 ): SettingsPage {
-    return {title, icon: icon || generalIcon, sections: [{title, items}]};
+    return makePageBySections(title, icon, [{title, items}]);
+}
+
+export function makePageBySections(
+    title: string,
+    icon: IconProps | undefined,
+    sections: Array<SettingsSection>,
+) {
+    return {title, icon: icon || generalIcon, sections};
 }
 
 export function makeItem(

diff --git a/packages/ui/src/ui/pages/components/tabs/nodes/MemoryProgress/MemoryProgress.scss b/packages/ui/src/ui/pages/components/tabs/nodes/MemoryProgress/MemoryProgress.scss
@@ -16,6 +16,11 @@ $padding: 10px 15px;
         list-style: none;
     }
 
+    &__tooltip-content {
+        max-height: 85vh;
+        overflow: auto;
+    }
+
     &__category {
         display: flex;
 
@@ -44,4 +49,8 @@ $padding: 10px 15px;
             text-align: right;
         }
     }
+
+    &__show-all {
+        text-align: right;
+    }
 }
diff --git a/packages/ui/src/ui/pages/components/tabs/nodes/MemoryProgress/MemoryProgress.tsx b/packages/ui/src/ui/pages/components/tabs/nodes/MemoryProgress/MemoryProgress.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
+import {ConnectedProps, connect} from 'react-redux';
 
 import map_ from 'lodash/map';
 
 import {Progress} from '@gravity-ui/uikit';
 
 import hammer from '../../../../../common/hammer';
 import {Tooltip} from '../../../../../components/Tooltip/Tooltip';
+import {getSettingsData} from '../../../../../store/selectors/settings/settings-base';
+import {RootState} from '../../../../../store/reducers';
 
 import './MemoryProgress.scss';
 
@@ -25,7 +28,9 @@ type MemoryData = {
     rawData?: {used?: number; limit?: number};
 };
 
-export default class MemoryProgress extends React.Component<MemoryProgressProps> {
+type ReduxProps = ConnectedProps<typeof connector>;
+
+class MemoryProgress extends React.Component<MemoryProgressProps & ReduxProps> {
     progress = React.createRef();
 
     renderProgress() {
@@ -35,11 +40,12 @@ export default class MemoryProgress extends React.Component<MemoryProgressProps>
     }
 
     renderItem(item: MemoryData) {
+        const {showAll} = this.props;
         const rawDataUsed = item.rawData?.used;
         const rawDataLimit = item.rawData?.limit;
         const rawDataLimitIsNumber = typeof rawDataLimit === 'number';
 
-        return (
+        return !showAll && !rawDataUsed ? null : (
             <li key={item.name} className={block('category')}>
                 <div className={block('category-legend')}>
                     <div
@@ -75,9 +81,24 @@ export default class MemoryProgress extends React.Component<MemoryProgressProps>
 
     render() {
         return (
-            <Tooltip className={block()} content={this.renderPopupContent()}>
+            <Tooltip
+                className={block()}
+                tooltipContentClassName={block('tooltip-content')}
+                content={this.renderPopupContent()}
+                placement={'auto'}
+            >
                 <div>{this.renderProgress()}</div>
             </Tooltip>
         );
     }
 }
+
+const mapStateToProps = (state: RootState) => {
+    return {
+        showAll: getSettingsData(state)['global::components::memoryPopupShowAll'],
+    };
+};
+
+const connector = connect(mapStateToProps);
+
+export default connector(MemoryProgress);
diff --git a/packages/ui/tests/screenshots/pages/components/components.base.screen.ts b/packages/ui/tests/screenshots/pages/components/components.base.screen.ts
@@ -56,14 +56,19 @@ test('Components - Node - Memory popup', async ({page}) => {
 
     await components(page).openSecondNode();
 
-    await components(page).replaceBreadcrumbsTestDir();
-
     await components(page).replaceHostName();
 
-    await components(page).openMemoryPopup();
+    await components(page).settingsToggleVisibility();
+    await components(page).settingsShowByName('Show empty categories');
+    await components(page).setCheckboxValue('global::components::memoryPopupShowAll', true);
+    await components(page).settingsToggleVisibility({waitUntilClosed: true});
 
     await replaceInnerHtmlForDateTime(page, ['.meta-table-item__value_key_last_seen']);
+    await components(page).replaceBreadcrumbsTestDir();
+
+    await components(page).openMemoryPopup();
 
+    await components(page).replaceBreadrumbsLastItem();
     await replaceInnerHtml(page, {
         '.g-progress__text': 'some / progress',
         '.g-progress__item': '',
@@ -72,7 +77,7 @@ test('Components - Node - Memory popup', async ({page}) => {
         '.meta-table-item__value_key_chunks': 'X',
         '.meta-table-item__value_key_sessions': 'X',
         '.meta-table-item__value_key_version': 'XX.XXXXXXXXX-xxxxx-xx~xXXXXXXXX',
-        '.meta-table-item__value_key_job_proxy_build_version': 'XX.XXXXXXXXX-xxxxx-xx~xXXXXXXXX'
+        '.meta-table-item__value_key_job_proxy_build_version': 'XX.XXXXXXXXX-xxxxx-xx~xXXXXXXXX',
     });
 
     await expect(page).toHaveScreenshot();

diff --git a/....base.screen.ts-snapshots/Components---Node---Memory-popup-1-chromium-linux.png b/....base.screen.ts-snapshots/Components---Node---Memory-popup-1-chromium-linux.png
diff --git a/...tions/operations.base.screen.ts-snapshots/Operation---Jobs-1-chromium-linux.png b/...tions/operations.base.screen.ts-snapshots/Operation---Jobs-1-chromium-linux.png
diff --git a/packages/ui/tests/utils/BasePage.ts b/packages/ui/tests/utils/BasePage.ts
@@ -1,5 +1,6 @@
 import {Page} from '@playwright/test';
 import {E2E_DIR_NAME} from '.';
+import {replaceInnerHtml} from './dom';
 
 class HasPage {
     readonly page;
@@ -91,6 +92,12 @@ export class BasePage extends HasPage {
         await this.replaceBreadcrumbsByTitle(E2E_DIR_NAME, 'e2e.1970-01-01.00:00:00.xxxxxxxxxxx');
     }
 
+    async replaceBreadrumbsLastItem() {
+        await replaceInnerHtml(this.page, {
+            '.g-breadcrumbs2 .g-breadcrumbs2__item:last-child a': 'localhost:XXXXX',
+        });
+    }
+
     async replaceACLInputPath() {
         await this.page.waitForSelector('.g-dialog');
         await this.page.evaluate(() => {
@@ -118,4 +125,25 @@ export class BasePage extends HasPage {
             height: dimensions.height,
         });
     }
+
+    async settingsShowByName(name: string) {
+        await this.page.fill(`.settings-panel [placeholder="Search settings"]`, name);
+    }
+
+    async settingsToggleVisibility({waitUntilClosed}: {waitUntilClosed?: boolean} = {}) {
+        await this.page.click('.gn-aside-header__footer .gn-composite-bar-item:first-child');
+        if (waitUntilClosed) {
+            await this.page.waitForFunction(() => {
+                return !document.querySelector('.settings-panel');
+            });
+        }
+    }
+
+    async setCheckboxValue(testId: string, value: boolean) {
+        const cbx = await this.page.getByTestId(testId);
+        const checked = await cbx.isChecked();
+        if (checked !== value) {
+            await cbx.check();
+        }
+    }
 }
diff --git a/packages/ui/tests/utils/settings.ts b/packages/ui/tests/utils/settings.ts