ydb-embedded-ui 4.3.0 → 4.4.0

package/dist/utils/versions/getVersionsColors.ts

@@ -0,0 +1,98 @@
+import type {VersionToColorMap, VersionsMap} from '../../types/versions';
+
+import {getMajorVersion, getMinorVersion} from './parseVersion';
+
+export const hashCode = (s: string) => {
+    return s.split('').reduce((a, b) => {
+        const num = (a << 5) - a + b.charCodeAt(0); // eslint-disable-line
+        return num & num; // eslint-disable-line
+    }, 0);
+};
+
+// 11 distinct colors from https://mokole.com/palette.html
+export const COLORS = [
+    '#008000', // green
+    '#4169e1', // royalblue
+    '#ffd700', // gold
+    '#ff8c00', // darkorange
+    '#808000', // olive
+    '#e9967a', // darksalmon
+    '#ff1493', // deeppink
+    '#00bfff', // deepskyblue
+    '#da70d6', // orchid
+    '#3cb371', // mediumseagreen
+    '#b22222', // firebrick
+];
+
+export const GRAY_COLOR = '#bfbfbf'; // --yc-color-base-neutral-hover
+
+export const getVersionsMap = (versions: string[], initialMap: VersionsMap = new Map()) => {
+    versions.forEach((version) => {
+        const majorVersion = getMajorVersion(version);
+        const minorVersion = getMinorVersion(version);
+        if (!initialMap.has(majorVersion)) {
+            initialMap.set(majorVersion, new Set());
+        }
+        initialMap.get(majorVersion)?.add(minorVersion);
+    });
+    return initialMap;
+};
+
+export const getVersionToColorMap = (versionsMap: VersionsMap) => {
+    const clustersVersions = Array.from(versionsMap.keys()).map((version) => {
+        return {
+            version,
+            hash: hashCode(version),
+        };
+    });
+
+    const versionToColor: VersionToColorMap = new Map();
+    // not every version is colored, therefore iteration index can't be used consistently
+    // init with the colors length to put increment right after condition for better readability
+    let currentColorIndex = COLORS.length - 1;
+
+    clustersVersions
+        // ascending by version name, just for consistency
+        // sorting only impacts color choose for a version
+        .sort((a, b) => a.hash - b.hash)
+        .forEach((item) => {
+            if (/^(\w+-)?stable/.test(item.version)) {
+                currentColorIndex = (currentColorIndex + 1) % COLORS.length;
+
+                versionToColor.set(item.version, COLORS[currentColorIndex]);
+
+                const minors = Array.from(versionsMap.get(item.version) || [])
+                    .filter((v) => v !== item.version)
+                    .map((v) => {
+                        return {
+                            version: v,
+                            hash: hashCode(v),
+                        };
+                    });
+
+                const minorQuantity = minors.length;
+
+                minors
+                    // descending by version name: newer versions come first,
+                    // so the newer version gets the brighter color
+                    .sort((a, b) => b.hash - a.hash)
+                    .forEach((minor, minorIndex) => {
+                        const majorColor = COLORS[currentColorIndex];
+                        const opacityPercent = Math.max(
+                            100 - minorIndex * (100 / minorQuantity),
+                            20,
+                        );
+                        const hexOpacity = Math.round((opacityPercent * 255) / 100).toString(16);
+                        const versionColor = `${majorColor}${hexOpacity}`;
+                        versionToColor.set(minor.version, versionColor);
+                    });
+            } else {
+                versionToColor.set(item.version, GRAY_COLOR);
+            }
+        });
+    return versionToColor;
+};
+
+export const parseVersionsToVersionToColorMap = (versions: string[] = []) => {
+    return getVersionToColorMap(getVersionsMap(versions));
+};

package/dist/utils/versions/index.ts

@@ -0,0 +1,3 @@
+export * from './getVersionsColors';
+export * from './parseVersion';
+export * from './parseNodesToVersionsValues';

package/dist/utils/versions/parseNodesToVersionsValues.ts

@@ -0,0 +1,28 @@
+import type {TSystemStateInfo} from '../../types/api/nodes';
+import type {VersionToColorMap, VersionValue} from '../../types/versions';
+import {getMinorVersion} from './parseVersion';
+
+export const parseNodesToVersionsValues = (
+    nodes: TSystemStateInfo[] = [],
+    versionsToColor?: VersionToColorMap,
+): VersionValue[] => {
+    const versionsCount = nodes.reduce<Record<string, number>>((acc, node) => {
+        if (node.Version) {
+            if (acc[node.Version]) {
+                acc[node.Version] = acc[node.Version] + 1;
+            } else {
+                acc[node.Version] = 1;
+            }
+        }
+        return acc;
+    }, {});
+
+    return Object.keys(versionsCount).map((version) => {
+        return {
+            title: version,
+            version: version,
+            color: versionsToColor?.get(getMinorVersion(version)),
+            value: (versionsCount[version] / nodes.length) * 100,
+        };
+    });
+};

package/dist/utils/versions/parseVersion.ts

@@ -0,0 +1,23 @@
+export const getMinorVersion = (version: string) => {
+    const regexp = /\d{1,}-\d{1,}(-\d){0,}(-hotfix-\d{1,}(-\d{1,})?)?\.[0-9a-zA-Z]+$/;
+
+    let result = version;
+
+    if (regexp.test(version)) {
+        result = result.replace(/(-hotfix-\d{1,}(-\d{1,})?)?\.[0-9a-zA-Z]+$/, ''); // stable-19-2-18.bfa368f -> stable-19-2-18
+    }
+
+    const buildVersionRegexp = /\d{1,}-\d{1,}-\d{1,}-\d{1,}$/;
+    if (buildVersionRegexp.test(version)) {
+        result = result.replace(/-\d{1,}$/, ''); // stable-19-2-18-1 -> stable-19-2-18
+    }
+
+    return result;
+};
+
+export const getMajorVersion = (version: string) => {
+    const minorVersion = getMinorVersion(version);
+    const regexp = /\d{1,}-\d{1,}-\d{1,}/; // to check versions that have minor part
+
+    return regexp.test(minorVersion) ? minorVersion.replace(/-\d{1,}$/, '') : minorVersion;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "files": [
     "dist"
   ],

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -1,239 +0,0 @@
-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';
-//@ts-ignore
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
-//@ts-ignore
-import InfoViewer from '../InfoViewer/InfoViewer';
-import {Tags} from '../Tags';
-import {Tablet} from '../Tablet';
-
-//@ts-ignore
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-//@ts-ignore
-import {getClusterInfo} from '../../store/reducers/cluster/cluster';
-//@ts-ignore
-import {clusterName, backend, customBackend} from '../../store';
-
-//@ts-ignore
-import {formatStorageValues} from '../../utils';
-//@ts-ignore
-import {TxAllocator} from '../../utils/constants';
-import {AutoFetcher} from '../../utils/autofetcher';
-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 {
-    label: string;
-    value: ReactNode;
-}
-
-interface ClusterInfoProps {
-    className?: string;
-    cluster?: TClusterInfo;
-    hideTooltip: VoidFunction;
-    showTooltip: (...args: Parameters<typeof showTooltip>) => void;
-    setHeader: any;
-    getClusterInfo: (clusterName: string) => void;
-    clusterTitle?: string;
-    additionalClusterInfo?: IClusterInfoItem[];
-    loading: boolean;
-    singleClusterMode: boolean;
-    wasLoaded: boolean;
-    error?: {statusText: string};
-}
-
-class ClusterInfo extends React.Component<ClusterInfoProps> {
-    static compareTablets(tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) {
-        if (tablet1.Type === TxAllocator) {
-            return 1;
-        }
-
-        if (tablet2.Type === TxAllocator) {
-            return -1;
-        }
-
-        return 0;
-    }
-
-    private autofetcher: any;
-
-    componentDidMount() {
-        const {setHeader} = this.props;
-        setHeader([
-            {
-                text: CLUSTER_PAGES.cluster.title,
-                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.cluster.id}),
-            },
-        ]);
-        this.props.getClusterInfo(clusterName);
-        this.autofetcher = new AutoFetcher();
-        this.autofetcher.fetch(() => this.props.getClusterInfo(clusterName));
-    }
-
-    shouldComponentUpdate(nextProps: ClusterInfoProps) {
-        const {cluster = {}} = nextProps;
-        return !(Object.keys(cluster).length === 0);
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    renderLoader() {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    render() {
-        const {className, error} = this.props;
-        let helper;
-        if (error) {
-            helper = error.statusText;
-        }
-        return <div className={b(null, className)}>{helper || this.renderContent()}</div>;
-    }
-
-    private getInfo() {
-        const {cluster = {}, additionalClusterInfo = [], singleClusterMode} = this.props;
-        const {StorageTotal, StorageUsed} = cluster;
-
-        let link = backend + '/internal';
-
-        if (singleClusterMode && !customBackend) {
-            link = `/internal`;
-        }
-
-        const info: IClusterInfoItem[] = [
-            {
-                label: 'Nodes',
-                value: (
-                    <ProgressViewer
-                        className={b('metric-field')}
-                        value={cluster.NodesAlive}
-                        capacity={cluster.NodesTotal}
-                    />
-                ),
-            },
-            {
-                label: 'Load',
-                value: (
-                    <ProgressViewer
-                        className={b('metric-field')}
-                        value={cluster.LoadAverage}
-                        capacity={cluster.NumberOfCpus}
-                    />
-                ),
-            },
-            {
-                label: 'Storage',
-                value: (
-                    <ProgressViewer
-                        className={b('metric-field')}
-                        value={StorageUsed}
-                        capacity={StorageTotal}
-                        formatValues={formatStorageValues}
-                    />
-                ),
-            },
-            {
-                label: 'Versions',
-                value: <div>{cluster.Versions?.join(', ')}</div>,
-            },
-            ...additionalClusterInfo,
-            {
-                label: 'Internal viewer',
-                value: (
-                    <Link href={link} target="_blank">
-                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Link>
-                ),
-            },
-        ];
-
-        return info;
-    }
-
-    private renderContent = () => {
-        const {
-            cluster = {},
-            showTooltip,
-            hideTooltip,
-            clusterTitle,
-            loading,
-            wasLoaded,
-        } = this.props;
-        const {Name: clusterName = 'Unknown cluster'} = cluster;
-
-        const info = this.getInfo();
-
-        return loading && !wasLoaded ? (
-            this.renderLoader()
-        ) : (
-            <React.Fragment>
-                <div className={b('common')}>
-                    <div className={b('url')}>
-                        <EntityStatus
-                            size="m"
-                            status={cluster.Overall}
-                            name={clusterTitle ?? clusterName}
-                        />
-                    </div>
-
-                    {cluster.DataCenters && <Tags tags={cluster.DataCenters} />}
-
-                    <div className={b('system-tablets')}>
-                        {cluster.SystemTablets &&
-                            cluster.SystemTablets.sort(ClusterInfo.compareTablets).map(
-                                (tablet, tabletIndex) => (
-                                    <Tablet
-                                        onMouseEnter={showTooltip}
-                                        onMouseLeave={hideTooltip}
-                                        key={tabletIndex}
-                                        tablet={tablet}
-                                    />
-                                ),
-                            )}
-                    </div>
-                </div>
-                <InfoViewer dots={true} info={info} />
-            </React.Fragment>
-        );
-    };
-}
-
-const mapStateToProps = (state: any) => {
-    const {data: cluster, loading, error, wasLoaded} = state.cluster;
-
-    return {
-        cluster,
-        loading,
-        wasLoaded,
-        error,
-        singleClusterMode: state.singleClusterMode,
-    };
-};
-
-const mapDispatchToProps = {
-    getClusterInfo,
-    hideTooltip,
-    showTooltip,
-    setHeader,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ClusterInfo);

package/dist/components/FullGroupViewer/FullGroupViewer.js

@@ -1,147 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-
-import DataTable from '@gravity-ui/react-data-table';
-
-import InfoViewer from '../InfoViewer/InfoViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
-
-import {stringifyVdiskId, formatStorageValues} from '../../utils';
-import {DEFAULT_TABLE_SETTINGS, PDISK_CATEGORIES} from '../../utils/constants';
-import routes, {createHref} from '../../routes';
-
-import './FullGroupViewer.scss';
-
-const b = cn('full-group-viewer');
-
-const tableSettings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    stickyHead: DataTable.FIXED,
-};
-
-class FullGroupViewer extends React.Component {
-    static propTypes = {
-        className: PropTypes.string,
-        group: PropTypes.object.isRequired,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    renderContent = () => {
-        const {group} = this.props;
-        const data = group.VDisks;
-        const columns = [
-            {
-                name: 'VDiskId',
-                header: 'VDisk',
-                render: ({value, row}) => (
-                    <EntityStatus
-                        status={row.Overall}
-                        name={stringifyVdiskId(value)}
-                        path={createHref(routes.vdisk, null, {
-                            vdiskId: stringifyVdiskId(value),
-                        })}
-                    />
-                ),
-            },
-            {
-                name: 'pdisk',
-                header: 'PDisk',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        <EntityStatus
-                            path={createHref(
-                                routes.pdisk,
-                                {id: row.PDisk.PDiskId},
-                                {node_id: row.PDisk.NodeId},
-                            )}
-                            status={row.PDisk.Overall}
-                            name={`${row.NodeId}-${row.PDisk.PDiskId}`}
-                        />
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-            },
-            {
-                name: 'space',
-                header: 'Space',
-                width: '150px',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        <ProgressViewer
-                            capacity={row.PDisk.TotalSize}
-                            value={row.PDisk.TotalSize - row.PDisk.AvailableSize}
-                            formatValues={formatStorageValues}
-                        />
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-            },
-            {
-                name: 'category',
-                header: 'Category',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) =>
-                    row.PDisk ? (
-                        PDISK_CATEGORIES[row.PDisk.Category]
-                    ) : (
-                        <div className="error">—</div>
-                    ),
-                align: DataTable.RIGHT,
-            },
-            {
-                name: 'path',
-                header: 'Path',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) => (row.PDisk ? row.PDisk.Path : <div className="error">—</div>),
-            },
-            {
-                name: 'guid',
-                header: 'Guid',
-                // eslint-disable-next-line no-confusing-arrow
-                render: ({row}) => (row.PDisk ? row.PDisk.Guid : <div className="error">—</div>),
-                align: DataTable.RIGHT,
-            },
-        ];
-
-        const groupInfo = [
-            {label: 'Generation', value: group.GroupGeneration},
-            {label: 'Latency', value: <EntityStatus status={group.Latency} />},
-            {label: 'Erasure', value: group.ErasureSpecies},
-        ];
-
-        const breadcrumbsItems = [{text: 'Database'}, {text: 'Storage Pool'}, {text: 'BS Group'}];
-
-        return (
-            <React.Fragment>
-                <Breadcrumbs items={breadcrumbsItems} />
-                <InfoViewer className={b('section')} info={groupInfo} title={'Info'} />
-                <DataTable
-                    cls={b('disks')}
-                    columns={columns}
-                    data={data}
-                    settings={tableSettings}
-                />
-            </React.Fragment>
-        );
-    };
-
-    render() {
-        const {className, group} = this.props;
-
-        return (
-            <div className={`${b()} ${className}`}>
-                {group ? this.renderContent() : <div className="error">no group data</div>}
-            </div>
-        );
-    }
-}
-
-export default FullGroupViewer;

package/dist/components/FullGroupViewer/FullGroupViewer.scss

@@ -1,35 +0,0 @@
-@import '../../styles/mixins';
-
-.full-group-viewer {
-    overflow: auto;
-    @include container-fluid();
-    @include flex-container();
-
-    &__section {
-        display: inline-block;
-
-        min-width: 315px;
-        margin-right: 40px;
-
-        border-radius: 5px;
-
-        .info-viewer__label {
-            min-width: 75px;
-        }
-    }
-
-    .info-viewer__items {
-        grid-template-columns: max-content;
-    }
-
-    .data-table {
-        overflow: auto;
-
-        margin-top: 50px;
-        @include flex-container();
-    }
-
-    .data-table__table {
-        width: 100%;
-    }
-}

package/dist/components/GroupTreeViewer/GroupTreeViewer.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {withRouter} from 'react-router';
-
-import {TreeView} from 'ydb-ui-components';
-
-import GroupViewer from '../GroupViewer/GroupViewer';
-import PDiskViewer from '../PDiskViewer/PDiskViewer';
-import EntityStatus from '../EntityStatus/EntityStatus';
-import {stringifyVdiskId} from '../../utils';
-import routes, {createHref} from '../../routes';
-import {backend} from '../../store';
-
-import './GroupTreeViewer.scss';
-
-const b = cn('group-tree-viewer');
-
-class GroupTreeViewer extends React.Component {
-    static propTypes = {
-        group: PropTypes.object.isRequired,
-        collapsed: PropTypes.bool,
-        onClick: PropTypes.func,
-    };
-
-    static ITEM_HEIGHT_COLLAPSED = 38;
-    static GROUP_ITEM_HEIGHT = 34;
-
-    static makeGetHeight = (groups, extendedGroups) => (index) => {
-        const {VDisks} = groups[index];
-        const countVDisks = VDisks?.length;
-        const parentHeight = GroupTreeViewer.ITEM_HEIGHT_COLLAPSED;
-        const childHeight = GroupTreeViewer.GROUP_ITEM_HEIGHT;
-
-        if (extendedGroups.has(index)) {
-            return parentHeight + countVDisks * childHeight;
-        }
-
-        return parentHeight;
-    };
-
-    render() {
-        const {group, collapsed, onClick} = this.props;
-        const label2 = (
-            <div>
-                <GroupViewer key={group.GroupID} group={group} />
-            </div>
-        );
-        if (group && Object.keys(group).length) {
-            return (
-                <div className={b()}>
-                    <TreeView
-                        key={group.GroupID}
-                        name={label2}
-                        collapsed={collapsed}
-                        onClick={onClick}
-                    >
-                        {group.VDisks?.map((disk, diskIndex) => (
-                            <div key={diskIndex} className={b('row')}>
-                                <EntityStatus
-                                    className={b('disk')}
-                                    status={disk.Overall}
-                                    name={stringifyVdiskId(disk.VDiskId)}
-                                    label="VDiskID"
-                                    path={createHref(routes.vdisk, null, {
-                                        vdiskId: stringifyVdiskId(disk.VDiskId),
-                                    })}
-                                />
-
-                                <PDiskViewer
-                                    className={b('disk')}
-                                    disk={disk.PDisk}
-                                    key={disk.Guid}
-                                    backend={backend}
-                                />
-                            </div>
-                        ))}
-                    </TreeView>
-                </div>
-            );
-        } else {
-            return <div className={b()}>No data</div>;
-        }
-    }
-}
-
-export default withRouter(GroupTreeViewer);

package/dist/components/GroupTreeViewer/GroupTreeViewer.scss

@@ -1,16 +0,0 @@
-.group-tree-viewer {
-    &__row {
-        display: flex;
-        align-items: center;
-
-        height: 34px;
-    }
-
-    &__disk {
-        margin: 8px 10px 8px 20px;
-    }
-
-    &__vdisk {
-        margin-right: 25px;
-    }
-}