ydb-embedded-ui 4.3.0 → 4.4.1

package/dist/store/reducers/clusterNodes/types.ts

@@ -0,0 +1,22 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TSystemStateInfo} from '../../../types/api/nodes';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_CLUSTER_NODES} from './clusterNodes';
+
+export interface PreparedClusterNode extends TSystemStateInfo {
+    uptime: string;
+}
+
+export interface ClusterNodesState {
+    loading: boolean;
+    wasLoaded: boolean;
+    nodes?: PreparedClusterNode[];
+    error?: IResponseError;
+}
+
+export type ClusterNodesAction = ApiRequestAction<
+    typeof FETCH_CLUSTER_NODES,
+    PreparedClusterNode[],
+    IResponseError
+>;

package/dist/store/reducers/index.ts

@@ -2,19 +2,16 @@ import {combineReducers} from 'redux';
 
 import nodes from './nodes';
 import cluster from './cluster/cluster';
+import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant';
 import storage from './storage';
 import node from './node';
-import pdisk from './pdisk';
-import vdisk from './vdisk';
-import group from './group';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
 import schema from './schema';
 import host from './host';
 import network from './network';
-import pool from './pool';
 import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
@@ -42,19 +39,16 @@ export const rootReducer = {
     singleClusterMode,
     nodes,
     cluster,
+    clusterNodes,
     tenant,
     storage,
     node,
-    pdisk,
-    vdisk,
-    group,
     tooltip,
     tablets,
     schema,
     olapStats,
     host,
     network,
-    pool,
     tenants,
     tablet,
     topic,

package/dist/store/reducers/partitions/partitions.ts

@@ -15,7 +15,7 @@ const SET_DATA_WAS_NOT_LOADED = 'partitions/SET_DATA_WAS_NOT_LOADED';
 const initialState = {
     loading: false,
     wasLoaded: false,
-    selectedConsumer: undefined,
+    selectedConsumer: '',
 };
 
 const partitions: Reducer<PartitionsState, PartitionsAction> = (state = initialState, action) => {
@@ -63,7 +63,7 @@ const partitions: Reducer<PartitionsState, PartitionsAction> = (state = initialS
     }
 };
 
-export const setSelectedConsumer = (value?: string) => {
+export const setSelectedConsumer = (value: string) => {
     return {
         type: SET_SELECTED_CONSUMER,
         data: value,

package/dist/store/reducers/partitions/types.ts

@@ -36,7 +36,7 @@ export interface PreparedPartitionData {
 export interface PartitionsState {
     loading: boolean;
     wasLoaded: boolean;
-    selectedConsumer: string | undefined;
+    selectedConsumer: string;
     partitions?: PreparedPartitionData[];
     error?: IResponseError;
 }

package/dist/types/additionalProps.ts

@@ -0,0 +1,5 @@
+import type {VersionToColorMap} from './versions';
+
+export interface AdditionalVersionsProps {
+    getVersionToColorMap?: () => VersionToColorMap;
+}

package/dist/types/versions.ts

@@ -0,0 +1,9 @@
+export type VersionsMap = Map<string, Set<string>>;
+export type VersionToColorMap = Map<string, string>;
+
+export interface VersionValue {
+    value: number;
+    color: string | undefined;
+    version: string;
+    title: string;
+}

package/dist/utils/constants.ts

@@ -2,9 +2,6 @@ import DataTable from '@gravity-ui/react-data-table';
 
 const SECOND = 1000;
 
-export const GROUP_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const PDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const VDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
 // by agreement, display all byte values in decimal scale
 // values in data are always in bytes, never in higher units,
@@ -13,7 +10,6 @@ export const KILOBYTE = 1_000;
 export const MEGABYTE = 1_000_000;
 export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
-export const GROUP = 'group';
 
 export const MINUTE_IN_SECONDS = 60;
 export const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS;
@@ -43,8 +39,6 @@ export const TABLET_COLORS = {
     Active: 'lightgreen',
 };
 
-export const TxAllocator = 'TxAllocator';
-
 export const TABLET_SYMBOLS = {
     OldTxProxy: 'P',
     TxProxy: 'P',
@@ -72,11 +66,6 @@ export const getTabletLabel = (type?: string) => {
 
 export const LOAD_AVERAGE_TIME_INTERVALS = ['1 min', '5 min', '15 min'];
 
-export const PDISK_CATEGORIES = {
-    0: 'HDD',
-    1: 'SSD',
-};
-
 export const COLORS_PRIORITY = {
     green: 5,
     yellow: 4,

package/dist/utils/hooks/useSetting.ts

@@ -5,16 +5,18 @@ import {getParsedSettingValue, setSettingValue} from '../../store/reducers/setti
 
 import {useTypedSelector} from './useTypedSelector';
 
-export const useSetting = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
+export const useSetting = <T>(key: string, defaultValue?: T): [T, (value: T) => void] => {
     const dispatch = useDispatch();
 
     const settingValue: T = useTypedSelector(
-        (state) => getParsedSettingValue(state, key) || defaultValue,
+        (state) => getParsedSettingValue(state, key) ?? defaultValue,
     );
 
     const setValue = useCallback(
         (value: T) => {
-            dispatch(setSettingValue(key, JSON.stringify(value)));
+            const preparedValue = typeof value === 'string' ? value : JSON.stringify(value);
+
+            dispatch(setSettingValue(key, preparedValue));
         },
         [dispatch, key],
     );

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.1",
   "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);