ydb-embedded-ui 1.8.6 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## [1.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.8...v1.9.0) (2022-07-29)
+
+
+### Features
+
+* **Node:** display endpoints in overview ([89e9e47](https://github.com/ydb-platform/ydb-embedded-ui/commit/89e9e470499b6f458e8949211d97293c0b7d9b97))
+* **Node:** display node basic info above tabs ([aafb15b](https://github.com/ydb-platform/ydb-embedded-ui/commit/aafb15b399bf116026eff36f3c4ac817e2c40e18))
+* **Node:** more informative pdisks panels ([342712b](https://github.com/ydb-platform/ydb-embedded-ui/commit/342712bcaa793971e1ca354da57fb962639ef90c))
+* **Nodes:** show node endpoints in tooltip ([34be559](https://github.com/ydb-platform/ydb-embedded-ui/commit/34be55957e02f947ede30b43f22fde82d21df308))
+* **Tenant:** table index overview ([2aed714](https://github.com/ydb-platform/ydb-embedded-ui/commit/2aed71488cde1175e6569c236ab609bb126f9cf3))
+* **Tenant:** virtualized tree in schema ([815f558](https://github.com/ydb-platform/ydb-embedded-ui/commit/815f5588e5fed6fb86f69653c4937e975465372f))
+* utils for parsing bitfields in pdisk data ([da22b4a](https://github.com/ydb-platform/ydb-embedded-ui/commit/da22b4afde9efe4d9605cefb69ddd51aed989722))
+
+
+### Bug Fixes
+
+* **Node:** fix pdisk title items width ([ca5fec6](https://github.com/ydb-platform/ydb-embedded-ui/commit/ca5fec6388364b7d1d6362f1bda36431d9c29749))
+* **Nodes:** hide tooltip on unmount ([54e4fdc](https://github.com/ydb-platform/ydb-embedded-ui/commit/54e4fdc8045c555338e79d89a93faf58e888fa0e))
+* **ProgressViewer:** apply provided custom class name ([aa60e9d](https://github.com/ydb-platform/ydb-embedded-ui/commit/aa60e9d1b9c0752853f4323d3bcfd220bedd272d))
+* **Tenant:** display all table props in overview ([d70e311](https://github.com/ydb-platform/ydb-embedded-ui/commit/d70e311296f6a4d1781f6e72929c70e0db7c3226))
+* **Tenant:** display PartCount first in table overview ([8c09746](https://github.com/ydb-platform/ydb-embedded-ui/commit/8c09746b026a23a36fe31be94057cc92535aceaa))
+
+## [1.8.8](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.7...v1.8.8) (2022-07-21)
+
+
+### Bug Fixes
+
+* **TabletsFilters:** display tablets grid full-height ([0dde809](https://github.com/ydb-platform/ydb-embedded-ui/commit/0dde8097fe026248aade97f034fa35c56b28e903))
+* **TabletsOverall:** properly hide tooltip on mouseleave ([df36eba](https://github.com/ydb-platform/ydb-embedded-ui/commit/df36ebaf44d8966bc419f3720d51390dfd767a87))
+* **Tablets:** properly display tablets in grid ([f3b64fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/f3b64fae3a1e1a46ababd2d2f04ddff488698676))
+* **Tenant:** align info in overview ([acb39fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/acb39fab70b7b4e0e78124fd887b2f1b76815221))
+* **Tenant:** display tenant name in single line ([301e391](https://github.com/ydb-platform/ydb-embedded-ui/commit/301e3911330024f80ebfda6d1a16823b64d94b36))
+* **Tenant:** move tablets under tenant name ([b7e4b8f](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7e4b8f7027f1481a7c1baff77bf8ad5e2ed467c))
+
+## [1.8.7](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.6...v1.8.7) (2022-07-18)
+
+
+### Bug Fixes
+
+* **Preview:** sort numbers as numbers, not string ([6c42a62](https://github.com/ydb-platform/ydb-embedded-ui/commit/6c42a62d077fcb9419ceb680906d4cef78a0134f))
+
 ## [1.8.6](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.8.5...v1.8.6) (2022-07-14)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.scss

@@ -0,0 +1,43 @@
+@import '../../styles/mixins.scss';
+
+.basic-node-viewer {
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
+
+    display: flex;
+    align-items: center;
+
+    margin: 15px 0;
+
+    &__title {
+        margin: 0 20px 0 0;
+
+        font-size: var(--yc-text-body-2-font-size);
+        font-weight: 600;
+        line-height: var(--yc-text-body-2-line-height);
+        text-transform: uppercase;
+    }
+
+    &__id {
+        margin: 0 15px 0 24px;
+    }
+
+    &__label {
+        margin-right: 10px;
+
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: 18px;
+        white-space: nowrap;
+
+        color: var(--yc-color-text-hint);
+
+        .yc-root_theme_dark & {
+            color: var(--yc-color-text-hint);
+        }
+    }
+
+    &__link {
+        margin-left: 5px;
+        @extend .link;
+    }
+}

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -0,0 +1,53 @@
+import cn from 'bem-cn-lite';
+
+import EntityStatus from '../EntityStatus/EntityStatus';
+import Tags from '../Tags/Tags';
+import Icon from '../Icon/Icon';
+
+import './BasicNodeViewer.scss';
+
+const b = cn('basic-node-viewer');
+
+interface BasicNodeViewerProps {
+    node: any;
+    additionalNodesInfo?: any;
+    className?: string;
+}
+
+export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNodeViewerProps) => {
+    const nodeHref = additionalNodesInfo?.getNodeRef
+        ? additionalNodesInfo.getNodeRef(node) + 'internal'
+        : undefined;
+
+    return (
+        <div className={b(null, className)}>
+            {node ? (
+                <>
+                    <div className={b('title')}>Node</div>
+                    <EntityStatus status={node.SystemState} name={node.Host} />
+                    {nodeHref && (
+                        <a
+                            rel="noopener noreferrer"
+                            className={b('link', {external: true})}
+                            href={nodeHref}
+                            target="_blank"
+                        >
+                            <Icon name="external" />
+                        </a>
+                    )}
+
+                    <div className={b('id')}>
+                        <label className={b('label')}>NodeID</label>
+                        <label>{node.NodeId}</label>
+                    </div>
+
+                    <Tags tags={[node.DataCenter]} />
+                    <Tags tags={node.Roles} tagsType="blue" />
+                </>
+            ) : (
+                <div className="error">no data</div>
+            )}
+
+        </div>
+    );
+};

package/dist/components/BasicNodeViewer/index.ts

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

package/dist/components/EntityStatus/EntityStatus.js

@@ -12,6 +12,8 @@ class EntityStatus extends React.Component {
     static propTypes = {
         status: PropTypes.string,
         name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        onNameMouseEnter: PropTypes.func,
+        onNameMouseLeave: PropTypes.func,
         path: PropTypes.string,
         size: PropTypes.string,
         label: PropTypes.string,
@@ -49,19 +51,29 @@ class EntityStatus extends React.Component {
         );
     }
     renderLink() {
-        const {externalLink, name, path} = this.props;
+        const {externalLink, name, path, onNameMouseEnter, onNameMouseLeave} = this.props;
 
         if (externalLink) {
             return <ExternalLink href={path}>{name}</ExternalLink>;
         }
 
         return path ? (
-            <Link title={name} to={path}>
+            <Link
+                title={name}
+                to={path}
+                onMouseEnter={onNameMouseEnter}
+                onMouseLeave={onNameMouseLeave}
+            >
                 {name}
             </Link>
         ) : (
             name && (
-                <span className={b('name')} title={name}>
+                <span
+                    className={b('name')}
+                    title={name}
+                    onMouseEnter={onNameMouseEnter}
+                    onMouseLeave={onNameMouseLeave}
+                >
                     {name}
                 </span>
             )

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -3,11 +3,8 @@ import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
 import PoolUsage from '../PoolUsage/PoolUsage';
-import Tags from '../Tags/Tags';
-import Icon from '../Icon/Icon';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';
@@ -22,7 +19,6 @@ class FullNodeViewer extends React.Component {
         node: PropTypes.object.isRequired,
         backend: PropTypes.string,
         singleClusterMode: PropTypes.bool,
-        additionalNodesInfo: PropTypes.object,
     };
 
     static defaultProps = {
@@ -30,10 +26,12 @@ class FullNodeViewer extends React.Component {
     };
 
     render() {
-        const {node, className, additionalNodesInfo={}} = this.props;
-        const nodeHref = additionalNodesInfo.getNodeRef
-            ? additionalNodesInfo.getNodeRef(node) + 'internal'
-            : undefined;
+        const {node, className} = this.props;
+
+        const endpointsInfo = node.Endpoints?.map(({Name, Address}) => ({
+            label: Name,
+            value: Address,
+        }));
 
         const commonInfo = [
             {label: 'Version', value: node.Version},
@@ -50,52 +48,35 @@ class FullNodeViewer extends React.Component {
         return (
             <div className={`${b()} ${className}`}>
                 {node ? (
-                    <div>
-                        <div className={b('row')}>
-                            <div className={b('title')}>Node</div>
-                            <EntityStatus status={node.SystemState} name={node.Host} />
-                            {nodeHref && (
-                                <a
-                                    rel="noopener noreferrer"
-                                    className={b('link', {external: true})}
-                                    href={nodeHref}
-                                    target="_blank"
-                                >
-                                    <Icon name="external" />
-                                </a>
-                            )}
-
-                            <div className={b('row', {id: true})}>
-                                <label className={b('label', {id: true})}>NodeID</label>
-                                <label>{node.NodeId}</label>
+                    <div className={b('common-info')}>
+                        <div>
+                            <div className={b('section-title')}>Pools</div>
+                            <div className={b('section', {pools: true})}>
+                                {node.PoolStats.map((pool, poolIndex) => (
+                                    <PoolUsage key={poolIndex} data={pool} />
+                                ))}
                             </div>
-
-                            <Tags tags={[node.DataCenter]} />
-                            <Tags tags={node.Roles} tagsType="blue" />
                         </div>
 
-                        <div className={b('common-info')}>
-                            <div>
-                                <div className={b('section-title')}>Pools</div>
-                                <div className={b('section', {pools: true})}>
-                                    {node.PoolStats.map((pool, poolIndex) => (
-                                        <PoolUsage key={poolIndex} data={pool} />
-                                    ))}
-                                </div>
-                            </div>
-
+                        {endpointsInfo && endpointsInfo.length && (
                             <InfoViewer
-                                title="Common info"
+                                title="Endpoints"
                                 className={b('section')}
-                                info={commonInfo}
+                                info={endpointsInfo}
                             />
-
-                            <InfoViewer
-                                title="Load average"
-                                className={b('section', {average: true})}
-                                info={averageInfo}
-                            />
-                        </div>
+                        )}
+
+                        <InfoViewer
+                            title="Common info"
+                            className={b('section')}
+                            info={commonInfo}
+                        />
+
+                        <InfoViewer
+                            title="Load average"
+                            className={b('section', {average: true})}
+                            info={averageInfo}
+                        />
                     </div>
                 ) : (
                     <div className="error">no data</div>

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -4,26 +4,6 @@
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
 
-    &__title {
-        margin: 0 20px 0 0;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
-        text-transform: uppercase;
-    }
-
-    &__row {
-        display: flex;
-        align-items: center;
-
-        margin: 15px 0;
-
-        &_id {
-            margin: 0 15px 0 24px;
-        }
-    }
-
     &__common-info {
         display: flex;
         flex-direction: column;
@@ -46,26 +26,6 @@
         min-width: 60px;
     }
 
-    &__label {
-        min-width: 100px;
-        margin-right: 25px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: 18px;
-        white-space: nowrap;
-
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
-
-        &_id {
-            min-width: auto;
-            margin-right: 10px;
-        }
-    }
-
     &__section-title {
         margin: 15px 0 10px;
 
@@ -73,9 +33,4 @@
         font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
-
-    &__link {
-        margin-left: 5px;
-        @extend .link;
-    }
 }

package/dist/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -0,0 +1,52 @@
+import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
+import {InfoViewer, createInfoFormatter} from '../InfoViewer';
+
+const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
+    'Type',
+    'State',
+    'DataSize',
+    'KeyColumnNames',
+    'DataColumnNames',
+]);
+
+const formatItem = createInfoFormatter<TIndexDescription>({
+    Type: (value) => value?.substring(10), // trims EIndexType prefix
+    State: (value) => value?.substring(11), // trims EIndexState prefix
+    KeyColumnNames: (value) => value?.join(', '),
+    DataColumnNames: (value) => value?.join(', '),
+}, {
+    KeyColumnNames: 'Columns',
+    DataColumnNames: 'Includes',
+});
+
+interface IndexInfoViewerProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
+    if (!data) {
+        return (
+            <div className="error">no index data</div>
+        );
+    }
+
+    const TableIndex = data.PathDescription?.TableIndex;
+    const info: Array<{label?: string, value?: unknown}> = [];
+
+    let key: keyof TIndexDescription;
+    for (key in TableIndex) {
+        if (DISPLAYED_FIELDS.has(key)) {
+            info.push(formatItem(key, TableIndex?.[key]));
+        }
+    }
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/InfoViewer/index.ts

@@ -0,0 +1,4 @@
+import InfoViewer from './InfoViewer';
+
+export {InfoViewer};
+export * from './utils';

package/dist/components/InfoViewer/utils.ts

@@ -0,0 +1,32 @@
+type LabelMap<T> = {
+    [label in keyof T]?: string;
+}
+
+type FieldMappers<T> = {
+    [label in keyof T]?: (value: T[label]) => string | undefined;
+}
+
+function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
+    return map[label] ?? label;
+}
+
+function formatValue<Shape, Key extends keyof Shape>(
+    label: Key,
+    value: Shape[Key],
+    mappers: FieldMappers<Shape>,
+) {
+    const mapper = mappers[label];
+    const mappedValue = mapper ? mapper(value) : value;
+
+    return String(mappedValue ?? '');
+}
+
+export function createInfoFormatter<Shape extends Record<string, any>>(
+    fieldMappers?: FieldMappers<Shape>,
+    labelMap?: LabelMap<Shape>,
+) {
+    return <Key extends keyof Shape>(label: Key, value: Shape[Key]) => ({
+        label: formatLabel(label, labelMap || {}),
+        value: formatValue(label, value, fieldMappers || {}),
+    });
+}

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -76,7 +76,7 @@ export class ProgressViewer extends React.Component {
 
         if (!isNaN(fillWidth)) {
             return (
-                <div className={b({size})}>
+                <div className={b({size}, className)}>
                     <div className={b('line', {bg})} style={lineStyle}></div>
                     <span className={b('text', {text})}>
                         {`${valueText} ${divider} ${capacityText}`}

package/dist/components/TabletsOverall/TabletsOverall.tsx

@@ -93,7 +93,7 @@ function TabletsOverall({tablets}: TabletsOverallProps) {
         <div className={b('row', {overall: true})}>
             <span className={b('label', {overall: true})}>Overall:</span>
             <div
-                onMouseLeave={dispatch(hideTooltip)}
+                onMouseLeave={() => dispatch(hideTooltip())}
                 onMouseEnter={(e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall'))}
             >
                 <Progress value={memoryProgress} stack={stack} />

package/dist/containers/App/App.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {configure as configureUiKit} from '@yandex-cloud/uikit';
-import {i18n as YDBComponentsI18N} from 'ydb-ui-components';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 import {i18n, Lang} from '../../utils/i18n';
 
 import ContentWrapper, {Content} from './Content';
@@ -27,10 +27,8 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(Lang.En);
-        YDBComponentsI18N.setLang(Lang.En);
-        configureUiKit({
-            lang: Lang.En,
-        });
+        configureYdbUiComponents({lang: Lang.En});
+        configureUiKit({lang: Lang.En});
     }
 
     componentDidMount() {

package/dist/containers/Node/Node.scss

@@ -4,6 +4,10 @@
     overflow: auto;
     @include flex-container();
 
+    &__header {
+        margin: 16px 20px;
+    }
+
     &__content {
         position: relative;
 
@@ -19,7 +23,7 @@
     }
 
     &__tabs {
-        padding: 16px 20px 0;
+        padding: 0 20px;
     }
 
     &__tab {

package/dist/containers/Node/Node.tsx

@@ -13,6 +13,7 @@ import Storage from '../Storage/Storage';
 import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';
 import Loader from '../../components/Loader/Loader';
+import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
@@ -133,7 +134,6 @@ function Node(props: NodeProps) {
             case OVERVIEW: {
                 return (
                     <NodeOverview
-                        additionalNodesInfo={additionalNodesInfo}
                         node={node}
                         className={b('overview-wrapper')}
                     />
@@ -162,6 +162,12 @@ function Node(props: NodeProps) {
         if (node) {
             return (
                 <div className={b(null, props.className)}>
+                    <BasicNodeViewer
+                        node={node}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                        className={b('header')}
+                    />
+
                     {renderTabs()}
 
                     <div className={b('content')}>{renderTabContent()}</div>

package/dist/containers/Node/NodeOverview/NodeOverview.tsx

@@ -5,16 +5,14 @@ import {backend} from '../../../store';
 
 interface NodeOverviewProps {
     node: any;
-    additionalNodesInfo: any;
     className?: string;
 }
 
-function NodeOverview({node, additionalNodesInfo, className}: NodeOverviewProps) {
+function NodeOverview({node, className}: NodeOverviewProps) {
     return (
         <FullNodeViewer
             node={node}
             backend={backend}
-            additionalNodesInfo={additionalNodesInfo}
             className={className}
         />
     );

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -44,9 +44,38 @@
     &__pdisk-title-wrapper {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 16px;
 
         font-weight: 600;
+
+        .entity-status__status-icon {
+            margin-right: 0;
+        }
+    }
+
+    &__pdisk-title-item {
+        display: flex;
+        gap: 4px;
+
+        &-label {
+            font-weight: 400;
+
+            color: var(--yc-color-text-secondary);
+        }
+    }
+
+    &__pdisk-title-id {
+        min-width: 110px;
+    }
+
+    &__pdisk-title-type {
+        justify-content: flex-end;
+
+        min-width: 50px;
+    }
+
+    &__pdisk-title-size {
+        min-width: 150px;
     }
 
     &__pdisk-details {

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

@@ -0,0 +1,25 @@
+import {ReactNode} from 'react';
+import cn from 'bem-cn-lite';
+
+const b = cn('kv-node-structure');
+
+interface PDiskTitleBadgeProps {
+    label?: string;
+    value: ReactNode;
+    className?: string;
+}
+
+export function PDiskTitleBadge({label, value, className}: PDiskTitleBadgeProps) {
+    return (
+        <span className={b('pdisk-title-item', className)}>
+            {label && (
+                <span className={b('pdisk-title-item-label')}>
+                    {label}:
+                </span>
+            )}
+            <span className={b('pdisk-title-item-value')}>
+                {value}
+            </span>
+        </span>
+    );
+}