ydb-embedded-ui 3.4.0 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [3.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.1...v3.4.2) (2023-03-03)
+
+
+### Bug Fixes
+
+* **Partitions:** add search to consumers filter ([95e4462](https://github.com/ydb-platform/ydb-embedded-ui/commit/95e446295cb2b2729daf0d0ef719e37c7c8e0d3c))
+* **Partitions:** fix error on wrong consumer in query string ([44269fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/44269fa9240fe31c9ef69e061c20d58b2b55fae3))
+* **PDisk:** display vdisks donors ([8b39b01](https://github.com/ydb-platform/ydb-embedded-ui/commit/8b39b01e8bf62624e9e12ac0a329fda5d03cc8df))
+
+## [3.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.0...v3.4.1) (2023-03-01)
+
+
+### Bug Fixes
+
+* **Consumers:** enable navigation to Partitions tab ([fa79081](https://github.com/ydb-platform/ydb-embedded-ui/commit/fa7908124bc4392e272aa829fd4e5c1639fcf209))
+* **Consumers:** update topic stats values align ([f2af851](https://github.com/ydb-platform/ydb-embedded-ui/commit/f2af851208a640ef9aa392fd7176eb579a2401db))
+* **TopShards:** keep state on request cancel ([1bd4f65](https://github.com/ydb-platform/ydb-embedded-ui/commit/1bd4f65dd047b42f8edf9e4bb41c722f30220d77))
+
 ## [3.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.3.4...v3.4.0) (2023-02-17)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -1,8 +1,8 @@
 import cn from 'bem-cn-lite';
 
 import EntityStatus from '../EntityStatus/EntityStatus';
-import Tags from '../Tags/Tags';
-import Icon from '../Icon/Icon';
+import {Tags} from '../Tags';
+import {Icon} from '../Icon';
 
 import './BasicNodeViewer.scss';
 
@@ -47,7 +47,6 @@ export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNod
             ) : (
                 <div className="error">no data</div>
             )}
-
         </div>
     );
 };

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -1,6 +1,7 @@
 import React, {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
+import {Link, Loader} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import EntityStatus from '../EntityStatus/EntityStatus';
@@ -8,10 +9,8 @@ import EntityStatus from '../EntityStatus/EntityStatus';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
 //@ts-ignore
 import InfoViewer from '../InfoViewer/InfoViewer';
-//@ts-ignore
-import Tags from '../Tags/Tags';
-//@ts-ignore
-import Tablet from '../Tablet/Tablet';
+import {Tags} from '../Tags';
+import {Tablet} from '../Tablet';
 
 //@ts-ignore
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
@@ -24,15 +23,16 @@ import {clusterName, backend, customBackend} from '../../store';
 import {formatStorageValues} from '../../utils';
 //@ts-ignore
 import {TxAllocator} from '../../utils/constants';
-
-import './ClusterInfo.scss';
 import {AutoFetcher} from '../../utils/autofetcher';
-import {Link, Loader} from '@gravity-ui/uikit';
-//@ts-ignore
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 import {setHeader} from '../../store/reducers/header';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
+import type {TClusterInfo} from '../../types/api/cluster';
+import type {TTabletStateInfo} from '../../types/api/tablet';
+
+import './ClusterInfo.scss';
+
 const b = cn('cluster-info');
 
 export interface IClusterInfoItem {
@@ -40,25 +40,11 @@ export interface IClusterInfoItem {
     value: ReactNode;
 }
 
-interface ICluster {
-    StorageTotal: string;
-    StorageUsed: string;
-    NodesAlive: number;
-    NodesTotal: number;
-    LoadAverage: number;
-    NumberOfCpus: number;
-    Versions: string[];
-    Name?: string;
-    Overall: string;
-    DataCenters?: string[];
-    SystemTablets?: ITablet[];
-}
-
 interface ClusterInfoProps {
     className?: string;
-    cluster?: ICluster;
+    cluster?: TClusterInfo;
     hideTooltip: VoidFunction;
-    showTooltip: Function;
+    showTooltip: (...args: Parameters<typeof showTooltip>) => void;
     setHeader: any;
     getClusterInfo: (clusterName: string) => void;
     clusterTitle?: string;
@@ -69,12 +55,8 @@ interface ClusterInfoProps {
     error?: {statusText: string};
 }
 
-interface ITablet {
-    Type: string;
-}
-
 class ClusterInfo extends React.Component<ClusterInfoProps> {
-    static compareTablets(tablet1: ITablet, tablet2: ITablet) {
+    static compareTablets(tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) {
         if (tablet1.Type === TxAllocator) {
             return 1;
         }
@@ -128,11 +110,7 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
     private autofetcher: any;
 
     private getInfo() {
-        const {
-            cluster = {} as ICluster,
-            additionalClusterInfo = [],
-            singleClusterMode,
-        } = this.props;
+        const {cluster = {}, additionalClusterInfo = [], singleClusterMode} = this.props;
         const {StorageTotal, StorageUsed} = cluster;
 
         let link = backend + '/internal';
@@ -193,7 +171,7 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
 
     private renderContent = () => {
         const {
-            cluster = {} as ICluster,
+            cluster = {},
             showTooltip,
             hideTooltip,
             clusterTitle,

package/dist/components/CopyToClipboard/CopyToClipboard.tsx

@@ -1,7 +1,6 @@
 import {Button, CopyToClipboard as CopyToClipboardUiKit} from '@gravity-ui/uikit';
 import createToast from '../../utils/createToast';
-//@ts-ignore
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 interface CopyToClipboardProps {
     text: string;

package/dist/components/CriticalActionDialog/CriticalActionDialog.js

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {Dialog} from '@gravity-ui/uikit';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './CriticalActionDialog.scss';
 

package/dist/components/EmptyState/{EmptyState.js → EmptyState.tsx}

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
+import {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
-import Icon from '../Icon/Icon';
+
+import {Icon} from '../Icon';
 
 import './EmptyState.scss';
 
@@ -12,7 +13,15 @@ const sizes = {
     l: 350,
 };
 
-export default function EmptyState({image, title, description, actions, size}) {
+interface EmptyStateProps {
+    title: string;
+    image?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode[];
+    size?: keyof typeof sizes;
+}
+
+export const EmptyState = ({image, title, description, actions, size = 'm'}: EmptyStateProps) => {
     return (
         <div className={block({size})}>
             <div className={block('wrapper', {size})}>
@@ -35,16 +44,4 @@ export default function EmptyState({image, title, description, actions, size}) {
             </div>
         </div>
     );
-}
-
-EmptyState.propTypes = {
-    title: PropTypes.string.isRequired,
-    image: PropTypes.node,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    actions: PropTypes.arrayOf(PropTypes.node),
-    size: PropTypes.string,
-};
-
-EmptyState.defaultProps = {
-    size: 'm',
 };

package/dist/components/EmptyState/index.ts

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

package/dist/components/EnableFullscreenButton/EnableFullscreenButton.tsx

@@ -1,7 +1,7 @@
 import {Button} from '@gravity-ui/uikit';
 import {useDispatch} from 'react-redux';
 import {enableFullscreen} from '../../store/reducers/fullscreen';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 interface EnableFullscreenButtonProps {
     disabled?: boolean;
@@ -13,7 +13,12 @@ function EnableFullscreenButton({disabled}: EnableFullscreenButtonProps) {
         dispatch(enableFullscreen());
     };
     return (
-        <Button onClick={onEnableFullscreen} view="flat-secondary" disabled={disabled} title='Fullscreen'>
+        <Button
+            onClick={onEnableFullscreen}
+            view="flat-secondary"
+            disabled={disabled}
+            title="Fullscreen"
+        >
             <Icon name="enableFullscreen" viewBox={'0 0 16 16'} height={16} width={16} />
         </Button>
     );

package/dist/components/Errors/403/AccessDenied.tsx

@@ -1,4 +1,4 @@
-import EmptyState from '../../EmptyState/EmptyState';
+import {EmptyState} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 
 import i18n from '../i18n';

package/dist/components/Fullscreen/Fullscreen.tsx

@@ -6,7 +6,7 @@ import cn from 'bem-cn-lite';
 
 import {useDispatch} from 'react-redux';
 import {disableFullscreen} from '../../store/reducers/fullscreen';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import './Fullscreen.scss';
 

package/dist/components/Icon/Icon.tsx

@@ -0,0 +1,33 @@
+import {Icon as UiKitIcon} from '@gravity-ui/uikit';
+
+interface IconProps {
+    name: string;
+    height?: number | string;
+    width?: number | string;
+    viewBox?: string;
+    className?: string;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+}
+
+export const Icon = ({
+    name,
+    height = 16,
+    width = 16,
+    viewBox = '0 0 16 16',
+    className,
+    onClick,
+}: IconProps) => {
+    return (
+        <UiKitIcon
+            // @ts-expect-error
+            // Both url and id strings are required in this uikit component.
+            // However, if no url provided, component uses id, which is what we need.
+            // If it is fixed in uikit it could be safely removed
+            data={{id: `icon.${name}`, viewBox}}
+            height={height}
+            width={width}
+            className={className}
+            onClick={onClick}
+        />
+    );
+};

package/dist/components/Icon/index.ts

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

package/dist/components/Pagination/Pagination.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {Button} from '@gravity-ui/uikit';
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 import Hotkey from '../Hotkey/Hotkey';
 
 import './Pagination.scss';

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 
 import {Icon as UiKitIcon} from '@gravity-ui/uikit';
 
-import Icon from '../Icon/Icon';
+import {Icon} from '../Icon';
 
 import questionIcon from '../../assets/icons/question.svg';
 

package/dist/components/Tablet/Tablet.tsx

@@ -0,0 +1,59 @@
+import {useRef} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {TTabletStateInfo} from '../../types/api/tablet';
+import type {ShowTooltipFunction} from '../../types/store/tooltip';
+import {getTabletLabel} from '../../utils/constants';
+import routes, {createHref} from '../../routes';
+
+import {InternalLink} from '../InternalLink';
+
+import './Tablet.scss';
+
+const b = cn('tablet');
+
+interface TabletProps {
+    tablet?: TTabletStateInfo;
+    onMouseEnter?: (...args: Parameters<ShowTooltipFunction>) => void;
+    onMouseLeave?: VoidFunction;
+}
+
+export const Tablet = ({
+    tablet = {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+}: TabletProps) => {
+    const ref = useRef(null);
+
+    const _onTabletMouseEnter = () => {
+        onMouseEnter(ref.current, tablet, 'tablet');
+    };
+
+    const _onTabletClick = () => {
+        const {TabletId: id} = tablet;
+
+        if (id) {
+            onMouseLeave();
+        }
+    };
+
+    const {TabletId: id} = tablet;
+    const status = tablet.Overall?.toLowerCase();
+
+    return (
+        <InternalLink
+            onClick={_onTabletClick}
+            to={id && createHref(routes.tablet, {id})}
+            className={b('wrapper')}
+        >
+            <div
+                ref={ref}
+                className={b({status})}
+                onMouseEnter={_onTabletMouseEnter}
+                onMouseLeave={onMouseLeave}
+            >
+                <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
+            </div>
+        </InternalLink>
+    );
+};

package/dist/components/Tablet/index.ts

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

package/dist/components/Tag/Tag.tsx

@@ -0,0 +1,16 @@
+import cn from 'bem-cn-lite';
+
+import './Tag.scss';
+
+const b = cn('tag');
+
+export type TagType = 'blue';
+
+interface TagProps {
+    text: string;
+    type?: TagType;
+}
+
+export const Tag = ({text, type}: TagProps) => {
+    return <div className={b({type})}>{text}</div>;
+};

package/dist/components/Tag/index.ts

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

package/dist/components/Tags/Tags.tsx

@@ -0,0 +1,22 @@
+import cn from 'bem-cn-lite';
+
+import {Tag, TagType} from '../Tag';
+
+import './Tags.scss';
+
+const b = cn('tags');
+
+interface TagsProps {
+    tags: string[];
+    tagsType?: TagType;
+    className?: string;
+}
+
+export const Tags = ({tags, tagsType, className = ''}: TagsProps) => {
+    return (
+        <div className={b(null, className)}>
+            {tags &&
+                tags.map((tag, tagIndex) => <Tag text={tag} key={tagIndex} type={tagsType}></Tag>)}
+        </div>
+    );
+};

package/dist/components/Tags/index.ts

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

package/dist/containers/Header/Header.tsx

@@ -5,8 +5,7 @@ import {useHistory, useLocation} from 'react-router';
 import {Breadcrumbs, BreadcrumbsItem, Link} from '@gravity-ui/uikit';
 
 import Divider from '../../components/Divider/Divider';
-//@ts-ignore
-import Icon from '../../components/Icon/Icon';
+import {Icon} from '../../components/Icon';
 
 import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
 import {getClusterInfo} from '../../store/reducers/cluster';
@@ -27,7 +26,7 @@ function ClusterName({name}: {name: string}) {
 }
 
 interface HeaderProps {
-    clusterName: string
+    clusterName: string;
 }
 
 function Header({clusterName}: HeaderProps) {

package/dist/containers/Header/Host/Host.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import {Link as ExternalLink} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {Tag} from '../../../components/Tag/Tag';
+import {Tag} from '../../../components/Tag';
 
 import {calcUptime} from '../../../utils';
 import {customBackend} from '../../../store';

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -9,7 +9,7 @@ import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
-import Icon from '../../../components/Icon/Icon';
+import {Icon} from '../../../components/Icon';
 import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -2,7 +2,7 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Button, Popover} from '@gravity-ui/uikit';
 
-import Icon from '../../components/Icon/Icon';
+import {Icon} from '../../components/Icon';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -1,6 +1,6 @@
 import {Button} from '@gravity-ui/uikit';
 
-import EmptyState from '../../../components/EmptyState/EmptyState';
+import {EmptyState} from '../../../components/EmptyState';
 import {Illustration} from '../../../components/Illustration';
 
 import i18n from './i18n';
@@ -22,13 +22,12 @@ export const EmptyFilter = ({
         image={<Illustration name="thumbsUp" />}
         title={title}
         description={message}
-        actions={onShowAll && [
-            <Button
-                key="show-all"
-                onClick={onShowAll}
-            >
-                {showAll}
-            </Button>
-        ]}
+        actions={
+            onShowAll && [
+                <Button key="show-all" onClick={onShowAll}>
+                    {showAll}
+                </Button>,
+            ]
+        }
     />
 );

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -21,6 +21,21 @@
     &__vdisks-item {
         flex-basis: 5px;
         flex-shrink: 0;
+
+        .stack__layer {
+            background: var(--yc-color-base-background);
+
+            .data-table__row:hover & {
+                background: var(--ydb-data-table-color-hover);
+            }
+        }
+    }
+
+    &__donors-stack {
+        --ydb-stack-offset-x: 0px;
+        --ydb-stack-offset-y: -2px;
+        --ydb-stack-offset-x-hover: 0px;
+        --ydb-stack-offset-y-hover: -7px;
     }
 
     &__media-type {

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {InternalLink} from '../../../components/InternalLink';
+import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
 import {getVDisksForPDisk} from '../../../store/reducers/storage';
@@ -10,6 +11,7 @@ import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
+import {isFullVDiksData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -109,19 +111,42 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
 
         return (
             <div className={b('vdisks')}>
-                {vdisks.map((vdisk) => (
-                    <div
-                        key={stringifyVdiskId(vdisk.VDiskId)}
-                        className={b('vdisks-item')}
-                        style={{
-                            // 1 is small enough for empty disks to be of the minimum width
-                            // but if all of them are empty, `flex-grow: 1` would size them evenly
-                            flexGrow: Number(vdisk.AllocatedSize) || 1,
-                        }}
-                    >
-                        <VDisk data={vdisk} compact />
-                    </div>
-                ))}
+                {vdisks.map((vdisk) => {
+                    const donors = vdisk.Donors;
+
+                    return (
+                        <div
+                            key={stringifyVdiskId(vdisk.VDiskId)}
+                            className={b('vdisks-item')}
+                            style={{
+                                // 1 is small enough for empty disks to be of the minimum width
+                                // but if all of them are empty, `flex-grow: 1` would size them evenly
+                                flexGrow: Number(vdisk.AllocatedSize) || 1,
+                            }}
+                        >
+                            {donors && donors.length ? (
+                                <Stack className={b('donors-stack')} key={stringifyVdiskId(vdisk.VDiskId)}>
+                                    <VDisk data={vdisk} compact />
+                                    {donors.map((donor) => {
+                                        const isFullData = isFullVDiksData(donor);
+
+                                        return (
+                                            <VDisk
+                                                compact
+                                                data={isFullData ? donor : {...donor, DonorMode: true}}
+                                                key={stringifyVdiskId(
+                                                    isFullData ? donor.VDiskId : donor,
+                                                )}
+                                            />
+                                        );
+                                    })}
+                                </Stack>
+                            ) : (
+                                <VDisk data={vdisk} compact />
+                            )}
+                        </div>
+                    );
+                })}
             </div>
         );
     };

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -1,8 +1,10 @@
 .global-storage-nodes {
+    &__pdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__pdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: left;
         align-items: flex-end;
 

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -128,6 +128,7 @@ function StorageNodes({
         },
         {
             name: TableColumnsIds.PDisks,
+            className: b('pdisks-column'),
             header: tableColumnsNames[TableColumnsIds.PDisks],
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>

package/dist/containers/Tablet/Tablet.js

@@ -12,9 +12,9 @@ import '../../services/api';
 
 import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import {Tag} from '../../components/Tag/Tag';
-import Icon from '../../components/Icon/Icon';
-import EmptyState from '../../components/EmptyState/EmptyState';
+import {Tag} from '../../components/Tag';
+import {Icon} from '../../components/Icon';
+import {EmptyState} from '../../components/EmptyState';
 import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
@@ -111,9 +111,9 @@ class Tablet extends React.Component {
         const {isFirstFetchData} = this.state;
 
         if (version && this.isValidVersion()) {
-            this.props.getTablet(id).then(({tablet}) => {
-                if (isFirstFetchData && tablet.TenantId) {
-                    this.props.getTabletDescribe(tablet.TenantId);
+            this.props.getTablet(id).then(({tabletData}) => {
+                if (isFirstFetchData && tabletData.TenantId) {
+                    this.props.getTabletDescribe(tabletData.TenantId);
                 }
 
                 this.setState({isFirstFetchData: false});