ydb-embedded-ui 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [3.2.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.2.0...v3.2.1) (2023-01-12)
+
+
+### Bug Fixes
+
+* align standard errors to the left ([cce100c](https://github.com/ydb-platform/ydb-embedded-ui/commit/cce100c5df83243df1fb0bc59d84d0d9b33719e6))
+* **TabletsFilters:** properly display long data in select options ([ea37d9f](https://github.com/ydb-platform/ydb-embedded-ui/commit/ea37d9fc08245ccdd38a6120dd620f59a528879c))
+* **TabletsFilters:** replace constants ([ea948ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/ea948ca86276b5521979105b2ab99546da389e80))
+* **TabletsStatistic:** process different tablets state types ([78798de](https://github.com/ydb-platform/ydb-embedded-ui/commit/78798de984bf4f6133515bb1c440e4fe0d15b07e))
+* **Tenant:** always display Pools heading ([94baeff](https://github.com/ydb-platform/ydb-embedded-ui/commit/94baeff82f9c2c1aecda7c11c3b090125ba9e4b6))
+
 ## [3.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.1.0...v3.2.0) (2023-01-09)
 
 

package/dist/components/EntitiesCount/EntitiesCount.tsx

@@ -0,0 +1,34 @@
+import {Label} from '@gravity-ui/uikit';
+import i18n from './i18n';
+
+interface EntitiesCountProps {
+    current: number | string;
+    total?: number | string;
+    label?: string;
+    loading?: boolean;
+    className?: string;
+}
+
+export const EntitiesCount = ({total, current, label, loading, className}: EntitiesCountProps) => {
+    let content = '';
+
+    if (label) {
+        content += `${label}: `;
+    }
+
+    if (loading) {
+        content += '...';
+    } else {
+        content += `${current}`;
+
+        if (total && Number(total) !== Number(current)) {
+            content += ` ${i18n('of')} ${total}`;
+        }
+    }
+
+    return (
+        <Label theme="info" size="m" className={className}>
+            {content}
+        </Label>
+    );
+};

package/dist/components/EntitiesCount/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "of": "of"
+}

package/dist/components/{AsideNavigation/Settings → EntitiesCount}/i18n/index.ts

@@ -1,9 +1,9 @@
-import {i18n, Lang} from '../../../../utils/i18n';
+import {i18n, Lang} from '../../../utils/i18n';
 
 import en from './en.json';
 import ru from './ru.json';
 
-const COMPONENT = 'nv-settings';
+const COMPONENT = 'ydb-entities-count';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

package/dist/components/EntitiesCount/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "of": "из"
+}

package/dist/components/EntitiesCount/index.ts

@@ -0,0 +1 @@
+export * from './EntitiesCount';

package/dist/components/Fullscreen/Fullscreen.scss

@@ -1,16 +1,17 @@
 .kv-fullscreen {
-    position: fixed;
+    // should expand to fill the content area, keeping aside navigation visible
+    // counts on .ycn-aside-header__content to have position: relative, it is set in App.scss
+    position: absolute;
     z-index: 10;
     top: 0;
-    left: var(--nv-aside-header-size);
+    right: 0;
+    bottom: 0;
+    left: 0;
 
     display: flex;
     overflow: hidden;
     flex-grow: 1;
 
-    width: calc(100% - var(--nv-aside-header-size));
-    height: 100%;
-
     background-color: var(--yc-color-base-background);
 
     &__close-button {
@@ -18,6 +19,7 @@
         z-index: 11;
         top: 8px;
         right: 20px;
+
         .yc-button__text {
             display: flex;
             align-items: center;

package/dist/components/TabletsOverall/TabletsOverall.tsx

@@ -25,7 +25,7 @@ const b = cn('kv-tablets-overall');
 type Color = keyof typeof colors;
 
 interface TabletsOverallProps {
-    tablets: {Overall: string}[];
+    tablets: {Overall?: string}[];
 }
 
 function TabletsOverall({tablets}: TabletsOverallProps) {
@@ -48,10 +48,10 @@ function TabletsOverall({tablets}: TabletsOverallProps) {
 
     // determine how many tablets of what color are in "tablets"
     const statesForOverallProgress: Record<string, number> = tablets.reduce((acc, tablet) => {
-        const color = tablet.Overall.toLowerCase();
-        if (!acc[color]) {
+        const color = tablet.Overall?.toLowerCase();
+        if (color && !acc[color]) {
             acc[color] = 1;
-        } else {
+        } else if (color) {
             acc[color]++;
         }
 

package/dist/components/TabletsStatistic/TabletsStatistic.tsx

@@ -0,0 +1,56 @@
+import cn from 'bem-cn-lite';
+import {Link} from 'react-router-dom';
+
+import {getTabletLabel} from '../../utils/constants';
+import {mapTabletStateToColorState} from '../../utils/tablet';
+import routes, {createHref} from '../../routes';
+
+import type {TTabletStateInfo as TFullTabletStateInfo} from '../../types/api/tablet';
+import type {TTabletStateInfo as TComputeTabletStateInfo} from '../../types/api/compute';
+
+import './TabletsStatistic.scss';
+
+const b = cn('tablets-statistic');
+
+type ITablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+
+const prepareTablets = (tablets: ITablets) => {
+    const res = tablets.map((tablet) => {
+        return {
+            label: getTabletLabel(tablet.Type),
+            type: tablet.Type,
+            count: tablet.Count,
+            state: mapTabletStateToColorState(tablet.State),
+        };
+    });
+
+    return res.sort((x, y) => String(x.label).localeCompare(String(y.label)));
+};
+
+interface TabletsStatisticProps {
+    tablets: ITablets;
+    path: string;
+    nodeIds: string[] | number[];
+}
+
+export const TabletsStatistic = ({tablets = [], path, nodeIds}: TabletsStatisticProps) => {
+    const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
+        return (
+            <Link
+                to={createHref(routes.tabletsFilters, undefined, {
+                    nodeIds,
+                    state: item.state,
+                    type: item.type,
+                    path,
+                })}
+                key={index}
+                className={b('tablet', {state: item.state?.toLowerCase()})}
+            >
+                {item.label}: {item.count}
+            </Link>
+        );
+    };
+    const preparedTablets = prepareTablets(tablets);
+
+    return <div className={b()}>{preparedTablets.map(renderTabletInfo)}</div>;
+};

package/dist/components/TabletsStatistic/index.ts

@@ -0,0 +1 @@
+export * from './TabletsStatistic';

package/dist/containers/App/App.scss

@@ -47,11 +47,13 @@ body,
     color: var(--yc-color-text-secondary);
 }
 
-.nv-aside-header__pane-container {
+.ycn-aside-header__pane-container {
     height: 100%;
 }
 
-.nv-aside-header__content {
+.ycn-aside-header__content {
+    position: relative;
+
     display: flex;
     overflow: auto;
     flex-direction: column;
@@ -116,17 +118,7 @@ body,
 }
 
 .error {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: 2px;
-    padding: 2px;
-
-    text-align: center;
-
     color: var(--yc-color-text-danger);
-    border-color: var(--yc-color-text-danger);
 }
 
 .data-table__row:hover .entity-status__clipboard-button {

package/dist/containers/AsideNavigation/AsideNavigation.scss

@@ -23,21 +23,3 @@
         padding: 10px;
     }
 }
-
-.nv-aside-header-footer-item__popup {
-    .nv-user-menu-content__organizations {
-        margin-top: 19px;
-        margin-left: 0;
-        .yc-menu__item {
-            cursor: auto;
-        }
-    }
-
-    .yc-menu__item {
-        //stylelint-disable-next-line declaration-no-important
-        padding-right: 0 !important;
-        &:hover {
-            background-color: unset;
-        }
-    }
-}

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -1,16 +1,12 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import {connect} from 'react-redux';
+import {useLocation} from 'react-router';
 import {useHistory} from 'react-router-dom';
 import cn from 'bem-cn-lite';
-import {useLocation} from 'react-router';
-import {connect} from 'react-redux';
 
-import {
-    AsideHeader,
-    AsideHeaderFooterItem,
-    AsideHeaderMenuItem,
-    SlotName,
-} from '../../components/AsideNavigation/AsideHeader';
 import {Icon, Button} from '@gravity-ui/uikit';
+import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
+
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
 import databaseIcon from '../../assets/icons/server.svg';
@@ -20,12 +16,17 @@ import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import databasesIcon from '../../assets/icons/databases.svg';
 import userSecret from '../../assets/icons/user-secret.svg';
 import userChecked from '../../assets/icons/user-check.svg';
-//@ts-ignore
+import settingsIcon from '../../assets/icons/settings.svg';
+import supportIcon from '../../assets/icons/support.svg';
+
 import UserSettings from '../UserSettings/UserSettings';
+
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 
-//@ts-ignore
 import {logout, setIsNotAuthenticated} from '../../store/reducers/authentication';
+import {getSettingValue, setSettingValue} from '../../store/reducers/settings';
+
+import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
 
 import './AsideNavigation.scss';
 
@@ -77,17 +78,21 @@ interface YdbUserDropdownProps {
 
 function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps) {
     const [isUserDropdownVisible, setIsUserDropdownVisible] = useState(false);
-    const iconDate = ydbUser?.login ? userChecked : userSecret;
+    const iconData = ydbUser?.login ? userChecked : userSecret;
     return (
-        <AsideHeaderFooterItem
-            isCurrent={isUserDropdownVisible}
-            slot={SlotName.User}
-            renderCustomIcon={() => <Icon data={iconDate} size={22} className={b('user-icon')} />}
-            text={ydbUser?.login ?? 'Account'}
-            isCompact={isCompact}
+        <FooterItem
+            compact={isCompact}
+            item={{
+                id: 'user-popup',
+                title: ydbUser?.login ?? 'Account',
+                current: isUserDropdownVisible,
+                icon: iconData,
+                iconSize: 22,
+                onItemClick: () => setIsUserDropdownVisible(true),
+            }}
+            enableTooltip={!isUserDropdownVisible}
             popupAnchor={popupAnchor}
             popupVisible={isUserDropdownVisible}
-            onClick={() => setIsUserDropdownVisible(true)}
             onClosePopup={() => setIsUserDropdownVisible(false)}
             renderPopupContent={() => (
                 <div className={b('ydb-user-wrapper')}>
@@ -105,8 +110,10 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
 interface AsideNavigationProps {
     children: React.ReactNode;
     ydbUser: string;
+    compact: boolean;
     logout: VoidFunction;
     setIsNotAuthenticated: VoidFunction;
+    setSettingValue: (name: string, value: string) => void;
 }
 
 const items: MenuItem[] = [
@@ -150,10 +157,30 @@ const items: MenuItem[] = [
     },
 ];
 
+enum Panel {
+    UserSettings = 'UserSettings',
+}
+
 function AsideNavigation(props: AsideNavigationProps) {
     const location = useLocation();
     const history = useHistory();
 
+    const [visiblePanel, setVisiblePanel] = useState<Panel>();
+
+    const setIsCompact = (compact: boolean) => {
+        props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
+    };
+
+    // navigation managed its compact state internally before, and its approach is not compatible with settings
+    // to migrate, save the incoming value again; save only `false` because `true` is the default value
+    // assume it is safe to remove this code block if it is at least a few months old
+    // there a two of these, search for a similar comment
+    useEffect(() => {
+        if (props.compact === false) {
+            setIsCompact(props.compact);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
         const isClusterPage = pathname === '/cluster';
@@ -184,28 +211,51 @@ function AsideNavigation(props: AsideNavigationProps) {
     return (
         <React.Fragment>
             <AsideHeader
-                logoText="YDB"
-                logoIcon={ydbLogoIcon}
-                onLogoIconClick={() => history.push('/')}
+                logo={{
+                    text: 'YDB',
+                    icon: ydbLogoIcon,
+                    onClick: () => history.push('/'),
+                }}
                 menuItems={menuItems}
-                settings={<UserSettings />}
-                initIsCompact
+                compact={props.compact}
+                onChangeCompact={setIsCompact}
                 className={b()}
                 renderContent={() => props.children}
-                renderFooter={({isCompact, asideRef}) => (
+                renderFooter={({compact, asideRef}) => (
                     <React.Fragment>
-                        <AsideHeaderFooterItem
-                            slot={SlotName.Support}
-                            iconSize={24}
-                            text="Documentation"
-                            isCompact={isCompact}
-                            onClick={() => {
-                                window.open('http://ydb.tech/docs', '_blank', 'noreferrer');
+                        <FooterItem
+                            compact={compact}
+                            item={{
+                                id: 'documentation',
+                                title: 'Documentation',
+                                icon: supportIcon,
+                                iconSize: 24,
+                                onItemClick: () => {
+                                    window.open('https://ydb.tech/docs', '_blank', 'noreferrer');
+                                },
+                            }}
+                        />
+
+                        <FooterItem
+                            item={{
+                                id: 'user-settings',
+                                title: 'Settings',
+                                icon: settingsIcon,
+                                iconSize: 24,
+                                current: visiblePanel === Panel.UserSettings,
+                                onItemClick: () => {
+                                    setVisiblePanel(
+                                        visiblePanel === Panel.UserSettings
+                                            ? undefined
+                                            : Panel.UserSettings,
+                                    );
+                                },
                             }}
+                            compact={compact}
                         />
 
                         <YdbUserDropdown
-                            isCompact={isCompact}
+                            isCompact={compact}
                             popupAnchor={asideRef}
                             ydbUser={{
                                 login: props.ydbUser,
@@ -215,6 +265,16 @@ function AsideNavigation(props: AsideNavigationProps) {
                         />
                     </React.Fragment>
                 )}
+                panelItems={[
+                    {
+                        id: 'user-settings',
+                        visible: visiblePanel === Panel.UserSettings,
+                        content: <UserSettings />,
+                    },
+                ]}
+                onClosePanel={() => {
+                    setVisiblePanel(undefined);
+                }}
             />
         </React.Fragment>
     );
@@ -225,12 +285,14 @@ const mapStateToProps = (state: any) => {
 
     return {
         ydbUser,
+        compact: JSON.parse(getSettingValue(state, ASIDE_HEADER_COMPACT_KEY)),
     };
 };
 
 const mapDispatchToProps = {
     logout,
     setIsNotAuthenticated,
+    setSettingValue,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AsideNavigation);

package/dist/containers/Heatmap/Heatmap.scss

@@ -6,13 +6,6 @@
     height: 100%;
     @include flex-container();
 
-    &__loader {
-        display: flex;
-        flex: 1 1 auto;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__limits {
         display: flex;
         align-items: center;

package/dist/containers/Heatmap/Heatmap.tsx

@@ -0,0 +1,203 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Checkbox, Select} from '@gravity-ui/uikit';
+
+import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
+import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
+import {formatNumber} from '../../utils';
+import {prepareQueryError} from '../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {Loader} from '../../components/Loader';
+import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+
+import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
+import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
+import {Histogram} from './Histogram/Histogram';
+
+import './Heatmap.scss';
+
+const b = cn('heatmap');
+const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
+
+interface HeatmapProps {
+    path: string;
+}
+
+export const Heatmap = ({path}: HeatmapProps) => {
+    const dispatch = useDispatch();
+
+    const itemsContainer = React.createRef<HTMLDivElement>();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {
+        loading,
+        wasLoaded,
+        error,
+        sort,
+        heatmap,
+        metrics,
+        currentMetric,
+        data: tablets = [],
+    } = useTypedSelector((state) => state.heatmap);
+
+    const [selectedMetric, setSelectedMetric] = useState(['']);
+
+    useEffect(() => {
+        if (!currentMetric && metrics && metrics.length) {
+            dispatch(
+                setHeatmapOptions({
+                    currentMetric: metrics[0].value,
+                }),
+            );
+        }
+        if (currentMetric) {
+            setSelectedMetric([currentMetric]);
+        }
+    }, [currentMetric, metrics, dispatch]);
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setHeatmapOptions({wasLoaded: false}));
+            }
+            dispatch(getTabletsInfo({path}));
+        },
+        [path, dispatch],
+    );
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
+        dispatch(showTooltip(...args));
+    };
+
+    const onHideTooltip = () => {
+        dispatch(hideTooltip);
+    };
+
+    const handleMetricChange = (value: string[]) => {
+        dispatch(
+            setHeatmapOptions({
+                currentMetric: value[0] as IHeatmapMetricValue,
+            }),
+        );
+    };
+    const handleCheckboxChange = () => {
+        dispatch(
+            setHeatmapOptions({
+                sort: !sort,
+            }),
+        );
+    };
+
+    const handleHeatmapChange = () => {
+        dispatch(
+            setHeatmapOptions({
+                heatmap: !heatmap,
+            }),
+        );
+    };
+
+    const renderHistogram = () => {
+        return (
+            <Histogram
+                tablets={tablets}
+                currentMetric={currentMetric}
+                showTooltip={onShowTooltip}
+                hideTooltip={onHideTooltip}
+            />
+        );
+    };
+
+    const renderHeatmapCanvas = () => {
+        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
+
+        const preparedTablets = tablets.map((tablet) => {
+            const value = currentMetric && Number(tablet.metrics?.[currentMetric]);
+            const colorIndex = getColorIndex(value, min, max);
+            const color = COLORS_RANGE[colorIndex];
+
+            return {
+                ...tablet,
+                color,
+                value,
+                formattedValue: formatNumber(value),
+                currentMetric,
+            };
+        });
+        const sortedTablets = sort
+            ? preparedTablets.sort((x, y) => Number(y.value) - Number(x.value))
+            : preparedTablets;
+
+        return (
+            <div ref={itemsContainer} className={b('items')}>
+                <HeatmapCanvas
+                    tablets={sortedTablets}
+                    parentRef={itemsContainer}
+                    showTooltip={onShowTooltip}
+                    hideTooltip={onHideTooltip}
+                    currentMetric={currentMetric}
+                />
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
+
+        return (
+            <div className={b()}>
+                <div className={b('filters')}>
+                    <Select
+                        className={b('heatmap-select')}
+                        value={selectedMetric}
+                        options={metrics}
+                        onUpdate={handleMetricChange}
+                        width={200}
+                    />
+                    <div className={b('sort-checkbox')}>
+                        <Checkbox onUpdate={handleCheckboxChange} checked={sort}>
+                            Sort
+                        </Checkbox>
+                    </div>
+                    <div className={b('histogram-checkbox')}>
+                        <Checkbox onUpdate={handleHeatmapChange} checked={heatmap}>
+                            Heatmap
+                        </Checkbox>
+                    </div>
+                    <div className={b('limits')}>
+                        <div className={b('limits-block')}>
+                            <div className={b('limits-title')}>min:</div>
+                            <div className={b('limits-value')}>
+                                {Number.isInteger(min) ? formatNumber(min) : '—'}
+                            </div>
+                        </div>
+                        <div className={b('limits-block')}>
+                            <div className={b('limits-title')}>max:</div>
+                            <div className={b('limits-value')}>
+                                {Number.isInteger(max) ? formatNumber(max) : '—'}
+                            </div>
+                        </div>
+                        <div className={b('limits-block')}>
+                            <div className={b('limits-title')}>count:</div>
+                            <div className={b('limits-value')}>{formatNumber(tablets.length)}</div>
+                        </div>
+                    </div>
+                </div>
+                {heatmap ? renderHeatmapCanvas() : renderHistogram()}
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    }
+
+    if (error) {
+        return <div>{prepareQueryError(error)}</div>;
+    }
+
+    return renderContent();
+};