ydb-embedded-ui 3.1.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # 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)
+
+
+### Features
+
+* **Nodes:** display rack in table ([3b8cdd5](https://github.com/ydb-platform/ydb-embedded-ui/commit/3b8cdd5b472f98132b2faaa9b71b8911750545a6))
+* **StorageNodes:** display datacenter in table ([4507bfd](https://github.com/ydb-platform/ydb-embedded-ui/commit/4507bfde839b0aafa3722828b7528885c6ac8f84))
+* **TopQueries:** date range filter ([b9a8e95](https://github.com/ydb-platform/ydb-embedded-ui/commit/b9a8e9504fa68556a724b214ee91b73ec900d37e))
+* **TopQueries:** filter by query text ([2c8ea97](https://github.com/ydb-platform/ydb-embedded-ui/commit/2c8ea97dd215ea59165cf05315bc5809cf7fafd7))
+
+
+### Bug Fixes
+
+* **InfoViewer:** min width for values ([64a4fd4](https://github.com/ydb-platform/ydb-embedded-ui/commit/64a4fd4de16738a9e2fac9cb4fba94eafc938762))
+* **Nodes:** open external link in new tab ([b7c3ddd](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7c3ddd1e611f2b61466e3eda51f3341f8407588))
+* **TopQueries:** proper table dynamic render type ([9add6ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/9add6ca9fbfe0475caf1586070a800210320cee6))
+* **TopShards:** rename to overloaded shards ([d9978bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/d9978bdd84b9a883e4eefcac7f85f856da55d770))
+* **UserSettings:** treat invertedDisks settings as string ([ad7742a](https://github.com/ydb-platform/ydb-embedded-ui/commit/ad7742a6bf0be59c2b9cbbf947aaa66f79d748be))
+
 ## [3.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.0.1...v3.1.0) (2022-12-13)
 
 

package/README.md

@@ -15,6 +15,8 @@ Local viewer for YDB clusters
 3) Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
+For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
+
 ### Making a production bundle.
 
 Base command `npm run build` builds the app for production to the `build` folder.\

package/dist/components/DateRange/DateRange.scss

@@ -0,0 +1,11 @@
+.date-range {
+    &__input {
+        min-width: 190px;
+        padding: 5px 8px;
+
+        color: var(--yc-color-text-primary);
+        border: 1px solid var(--yc-color-line-generic);
+        border-radius: var(--yc-border-radius-m);
+        background: transparent;
+    }
+}

package/dist/{containers/Tenant/Diagnostics/TopShards → components}/DateRange/DateRange.tsx

@@ -1,9 +1,9 @@
-import cn from 'bem-cn-lite';
 import {ChangeEventHandler} from 'react';
+import cn from 'bem-cn-lite';
 
 import './DateRange.scss';
 
-const b = cn('top-shards');
+const b = cn('date-range');
 
 export interface DateRangeValues {
     /** ms from epoch */
@@ -54,21 +54,21 @@ export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
     const endISO = toTimezonelessISOString(to);
 
     return (
-        <div className={b('date-range', className)}>
+        <div className={b(null, className)}>
             <input
                 type="datetime-local"
-                value={startISO}
+                value={startISO || ''}
                 max={endISO}
                 onChange={handleFromChange}
-                className={b('date-range-input')}
+                className={b('input')}
             />
             —
             <input
                 type="datetime-local"
                 min={startISO}
-                value={endISO}
+                value={endISO || ''}
                 onChange={handleToChange}
-                className={b('date-range-input')}
+                className={b('input')}
             />
         </div>
     );

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/Illustration/Illustration.tsx

@@ -1,8 +1,8 @@
-import {useEffect, useState} from 'react';
+import {ImgHTMLAttributes, useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
-export interface IllustrationProps {
+export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
     name: string;
     className?: string;
 }
@@ -38,12 +38,5 @@ export const Illustration = ({name, className, ...props}: IllustrationProps) =>
         }
     }, [srcGetter]);
 
-    return (
-        <img
-            alt={name}
-            src={src}
-            className={b(null, className)}
-            {...props}
-        />
-    );
-}
+    return <img alt={name} src={src} className={b(null, className)} {...props} />;
+};

package/dist/components/InfoViewer/InfoViewer.scss

@@ -54,6 +54,8 @@
     &__value {
         display: flex;
 
+        min-width: 120px;
+
         word-break: break-all;
     }
 

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;