ydb-embedded-ui 3.4.0 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [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/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});

package/dist/containers/Tablets/Tablets.scss

@@ -27,10 +27,6 @@
         max-width: 180px;
     }
 
-    &__tablet {
-        margin-bottom: 2px;
-    }
-
     .tablet {
         display: inline-block;
 

package/dist/containers/Tablets/Tablets.tsx

@@ -5,7 +5,7 @@ import ReactList from 'react-list';
 
 import {Select} from '@gravity-ui/uikit';
 
-import Tablet from '../../components/Tablet/Tablet';
+import {Tablet} from '../../components/Tablet';
 import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
 import {Loader} from '../../components/Loader';
 
@@ -104,7 +104,6 @@ export const Tablets = ({path, nodeId, className}: TabletsProps) => {
                 onMouseEnter={onShowTooltip}
                 tablet={tabletsToRender[tabletIndex]}
                 key={tabletIndex}
-                className={b('tablet')}
             />
         );
     };

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
-import Tablet from '../../components/Tablet/Tablet';
+import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss

@@ -24,7 +24,7 @@
     }
     &__value {
         display: flex;
-        justify-content: flex-end;
+        justify-content: flex-start;
         align-items: center;
 
         height: 30px;

package/dist/containers/Tenant/Diagnostics/Consumers/columns/columns.tsx

@@ -1,9 +1,15 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import block from 'bem-cn-lite';
+import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
+import routes, {createHref} from '../../../../../routes';
+
+import {TenantTabsGroups} from '../../../TenantPages';
+import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -23,7 +29,27 @@ export const columns: Column<IPreparedConsumerData>[] = [
         name: CONSUMERS_COLUMNS_IDS.CONSUMER,
         header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.CONSUMER],
         align: DataTable.LEFT,
-        render: ({row}) => row.name || '-',
+        render: ({row}) => {
+            if (!row.name) {
+                return '–';
+            }
+
+            const queryParams = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+
+            return (
+                <InternalLink
+                    to={createHref(routes.tenant, undefined, {
+                        ...queryParams,
+                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        selectedConsumer: row.name,
+                    })}
+                >
+                    {row.name}
+                </InternalLink>
+            );
+        },
     },
     {
         name: CONSUMERS_COLUMNS_IDS.READ_SPEED,

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -5,8 +5,7 @@ import cn from 'bem-cn-lite';
 import {Button, Modal} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../../types/api/schema';
-//@ts-ignore
-import Icon from '../../../../components/Icon/Icon';
+import {Icon} from '../../../../components/Icon';
 import Overview from '../Overview/Overview';
 import {Healthcheck} from '../Healthcheck';
 //@ts-ignore

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 
-import Icon from '../../../../components/Icon/Icon';
+import {Icon} from '../../../../components/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -8,7 +8,7 @@ import {Link} from 'react-router-dom';
 import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
-import Icon from '../../../../components/Icon/Icon';
+import {Icon} from '../../../../components/Icon';
 import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';