ydb-embedded-ui 4.17.0 → 4.19.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [4.19.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.18.0...v4.19.0) (2023-10-11)
+
+
+### Features
+
+* **TenantOverview:** add storage tab to tenant diagnostics ([#541](https://github.com/ydb-platform/ydb-embedded-ui/issues/541)) ([c4cdd35](https://github.com/ydb-platform/ydb-embedded-ui/commit/c4cdd354cd9780dfd7dfee80ec225f59d4230625))
+
+
+### Bug Fixes
+
+* add NodeId to NodeAddress type ([#545](https://github.com/ydb-platform/ydb-embedded-ui/issues/545)) ([3df82d3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3df82d39466696ec61e34b915b355dacd0482ebc))
+* display database name in node info ([#543](https://github.com/ydb-platform/ydb-embedded-ui/issues/543)) ([788ad9a](https://github.com/ydb-platform/ydb-embedded-ui/commit/788ad9a7a1a56ffe93ec7e4861ded6cceef72d9c))
+* fix cpu usage calculation ([#542](https://github.com/ydb-platform/ydb-embedded-ui/issues/542)) ([f46b03d](https://github.com/ydb-platform/ydb-embedded-ui/commit/f46b03d6157f19017560d71a9ab6591f045bad96))
+* fix incorrect data display in ProgressViewer ([#546](https://github.com/ydb-platform/ydb-embedded-ui/issues/546)) ([be077b8](https://github.com/ydb-platform/ydb-embedded-ui/commit/be077b83a4b4cf083d506e77abf0f2b6570c87d3))
+
+## [4.18.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.17.0...v4.18.0) (2023-09-25)
+
+
+### Features
+
+* **ProgressViewer:** add custom threasholds to ProgressViewer ([#540](https://github.com/ydb-platform/ydb-embedded-ui/issues/540)) ([3553065](https://github.com/ydb-platform/ydb-embedded-ui/commit/35530655581357f4a79c277a5bf9846b3befb784))
+
+
+### Bug Fixes
+
+* **Authentication:** enable page redirect ([#539](https://github.com/ydb-platform/ydb-embedded-ui/issues/539)) ([721883c](https://github.com/ydb-platform/ydb-embedded-ui/commit/721883cc7f4ca60e64d4a5f77b939dbb8e960855))
+* **Healthcheck:** add merge_records request param ([#538](https://github.com/ydb-platform/ydb-embedded-ui/issues/538)) ([6a47481](https://github.com/ydb-platform/ydb-embedded-ui/commit/6a474814f71c3318715a8ce638fd522a770d8038))
+* **Nodes:** use nodes endpoint by default ([#535](https://github.com/ydb-platform/ydb-embedded-ui/issues/535)) ([12d4fef](https://github.com/ydb-platform/ydb-embedded-ui/commit/12d4fefde7a6663bb1a11f46b4e94fb24b23e966))
+* rename flag for display metrics cards for database diagnostics ([#536](https://github.com/ydb-platform/ydb-embedded-ui/issues/536)) ([957e1fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/957e1fafbbc43928498ae9e8d0bc119bcda5288d))
+
 ## [4.17.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.2...v4.17.0) (2023-09-18)
 
 

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -23,7 +23,7 @@
     }
 
     .info-viewer__label {
-        min-width: 60px;
+        min-width: 100px;
     }
 
     &__section-title {

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -3,10 +3,10 @@ import cn from 'bem-cn-lite';
 import type {TSystemStateInfo} from '../../types/api/nodes';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
-import {calcUptime} from '../../utils';
+import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
 
-import InfoViewer from '../InfoViewer/InfoViewer';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import InfoViewer, {type InfoViewerItem} from '../InfoViewer/InfoViewer';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import './FullNodeViewer.scss';
@@ -24,16 +24,25 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
         value: Address,
     }));
 
-    const commonInfo = [
+    const commonInfo: InfoViewerItem[] = [];
+
+    // Do not add DB field for static nodes (they have no Tenants)
+    if (node?.Tenants?.length) {
+        commonInfo.push({label: 'Database', value: node.Tenants[0]});
+    }
+
+    commonInfo.push(
         {label: 'Version', value: node?.Version},
         {label: 'Uptime', value: calcUptime(node?.StartTime)},
         {label: 'DC', value: node?.DataCenterDescription},
         {label: 'Rack', value: node?.Rack},
-    ];
+    );
 
     const averageInfo = node?.LoadAverage?.map((load, loadIndex) => ({
         label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
-        value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
+        value: (
+            <ProgressViewer value={load} percents={true} colorizeProgress={true} capacity={100} />
+        ),
     }));
 
     return (

package/dist/components/InfoViewer/formatters/common.ts

@@ -1,5 +1,5 @@
 import type {TDirEntry} from '../../../types/api/schema';
-import {formatDateTime} from '../../../utils';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 
 import {createInfoFormatter} from '../utils';
 

package/dist/components/InfoViewer/formatters/pqGroup.ts

@@ -4,7 +4,7 @@ import {
     TPQPartitionConfig,
     TPQTabletConfig,
 } from '../../../types/api/schema';
-import {formatBps, formatBytes, formatNumber} from '../../../utils';
+import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 
 import {createInfoFormatter} from '../utils';

package/dist/components/InfoViewer/formatters/table.ts

@@ -1,6 +1,11 @@
 import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
 import type {TMetrics} from '../../../types/api/tenant';
-import {formatCPU, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {
+    formatBps,
+    formatCPU,
+    formatDateTime,
+    formatNumber,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -0,0 +1,105 @@
+import cn from 'bem-cn-lite';
+
+import type {ValueOf} from '../../types/common';
+
+import './ProgressViewer.scss';
+
+const b = cn('progress-viewer');
+
+export const PROGRESS_VIEWER_SIZE_IDS = {
+    xs: 'xs',
+    s: 's',
+    ns: 'ns',
+    m: 'm',
+    n: 'n',
+    l: 'l',
+    head: 'head',
+} as const;
+
+type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
+
+/*
+
+Props description:
+1) value - the amount of progress
+2) capacity - maximum possible progress value
+3) formatValues - function for formatting the value and capacity
+4) percents - display progress in percents
+5) colorizeProgress - change the color of the progress bar depending on its value
+6) inverseColorize - invert the colors of the progress bar
+7) warningThreshold - the percentage of fullness at which the color of the progress bar changes to yellow
+8) dangerThreshold - the percentage of fullness at which the color of the progress bar changes to red
+*/
+
+interface ProgressViewerProps {
+    value?: number | string;
+    capacity?: number | string;
+    formatValues?: (value?: number, capacity?: number) => (string | undefined)[];
+    percents?: boolean;
+    className?: string;
+    size?: ProgressViewerSize;
+    colorizeProgress?: boolean;
+    inverseColorize?: boolean;
+    warningThreshold?: number;
+    dangerThreshold?: number;
+}
+
+export function ProgressViewer({
+    value,
+    capacity,
+    formatValues,
+    percents,
+    className,
+    size = PROGRESS_VIEWER_SIZE_IDS.xs,
+    colorizeProgress,
+    inverseColorize,
+    warningThreshold = 60,
+    dangerThreshold = 80,
+}: ProgressViewerProps) {
+    let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100);
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+    let valueText: number | string | undefined = Math.round(Number(value)),
+        capacityText: number | string | undefined = capacity,
+        divider = '/';
+    if (formatValues) {
+        [valueText, capacityText] = formatValues(Number(value), Number(capacity));
+    } else if (percents) {
+        valueText = fillWidth + '%';
+        capacityText = '';
+        divider = '';
+    }
+
+    let bg = inverseColorize ? 'scarlet' : 'apple';
+    if (colorizeProgress) {
+        if (fillWidth > warningThreshold && fillWidth <= dangerThreshold) {
+            bg = 'saffron';
+        } else if (fillWidth > dangerThreshold) {
+            bg = inverseColorize ? 'apple' : 'scarlet';
+        }
+    }
+
+    const lineStyle = {
+        width: fillWidth + '%',
+    };
+
+    const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
+
+    const renderContent = () => {
+        if (capacityText) {
+            return `${valueText} ${divider} ${capacityText}`;
+        }
+
+        return valueText;
+    };
+
+    if (!isNaN(Number(value))) {
+        return (
+            <div className={b({size}, className)}>
+                <div className={b('line', {bg})} style={lineStyle}></div>
+                <span className={b('text', {text})}>{renderContent()}</span>
+            </div>
+        );
+    }
+
+    return <div className={`${b({size})} ${className} error`}>no data</div>;
+}

package/dist/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx

@@ -1,6 +1,6 @@
 import type {TTabletStateInfo} from '../../../types/api/tablet';
 
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
 
 const formatTablet = createInfoFormatter<TTabletStateInfo>({

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -50,7 +50,9 @@ function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
     const history = useHistory();
 
     const handleLoginClick = () => {
-        history.push(createHref(routes.auth, undefined, {returnUrl: encodeURI(location.href)}));
+        history.push(
+            createHref(routes.auth, undefined, {returnUrl: encodeURIComponent(location.href)}),
+        );
     };
 
     return (

package/dist/containers/Authentication/Authentication.tsx

@@ -1,12 +1,13 @@
 import {KeyboardEvent, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useHistory, useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {authenticate} from '../../store/reducers/authentication/authentication';
 import {useTypedSelector} from '../../utils/hooks';
+import {parseQuery} from '../../routes';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import showIcon from '../../assets/icons/show.svg';
@@ -18,13 +19,15 @@ import './Authentication.scss';
 const b = cn('authentication');
 
 interface AuthenticationProps {
-    returnUrl?: string;
     closable?: boolean;
 }
 
-function Authentication({returnUrl, closable = false}: AuthenticationProps) {
+function Authentication({closable = false}: AuthenticationProps) {
     const dispatch = useDispatch();
     const history = useHistory();
+    const location = useLocation();
+
+    const {returnUrl} = parseQuery(location);
 
     const {error} = useTypedSelector((state) => state.authentication);
 
@@ -58,7 +61,14 @@ function Authentication({returnUrl, closable = false}: AuthenticationProps) {
         // typed dispatch required, remove error expectation after adding it
         dispatch(authenticate(login, pass)).then(() => {
             if (returnUrl) {
-                history.replace(decodeURI(returnUrl));
+                const decodedUrl = decodeURIComponent(returnUrl.toString());
+
+                // to prevent page reload we use router history
+                // history navigates relative to origin
+                // so we remove origin to make it work properly
+                const url = new URL(decodedUrl);
+                const path = url.pathname + url.search;
+                history.replace(path);
             }
         });
     };

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import InfoViewer, {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {Tags} from '../../../components/Tags';
 import {Tablet} from '../../../components/Tablet';
@@ -16,7 +16,7 @@ import type {AdditionalClusterProps, ClusterLink} from '../../../types/additiona
 import type {VersionValue} from '../../../types/versions';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
-import {formatStorageValues} from '../../../utils';
+import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
 import {
     CLUSTER_DEFAULT_TITLE,

package/dist/containers/Heatmap/Heatmap.tsx

@@ -7,7 +7,7 @@ import {Checkbox, Select} from '@gravity-ui/uikit';
 import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-import {formatNumber} from '../../utils';
+import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {Loader} from '../../components/Loader';

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import {getColorRange, getCurrentMetricLimits} from '../util';
-import {formatNumber} from '../../../utils';
+import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 
 import './Histogram.scss';
 

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

@@ -8,12 +8,12 @@ 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 {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {Icon} from '../../../components/Icon';
 import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';
-import {formatStorageValuesToGb} from '../../../utils';
+import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';

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

@@ -1,8 +1,11 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
-import {formatStorageValuesToGb, stringifyVdiskId} from '../../../utils';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {
+    formatStorageValuesToGb,
+    stringifyVdiskId,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {valueIsDefined} from './NodeStructure';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -2,12 +2,12 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Popover} from '@gravity-ui/uikit';
 
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
-import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
 import {isSortableNodesProperty} from '../../utils/nodes';
-import {formatBytesToGigabyte} from '../../utils/index';
+import {formatBytesToGigabyte} from '../../utils/dataFormatters/dataFormatters';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 
@@ -120,6 +120,7 @@ export function getNodesColumns({
                 row.LoadAverage && row.LoadAverage.length > 0 ? (
                     <ProgressViewer
                         value={row.LoadAverage[0]}
+                        capacity={100}
                         percents={true}
                         colorizeProgress={true}
                     />

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

@@ -7,7 +7,7 @@ import {Stack} from '../../../components/Stack/Stack';
 import routes, {createHref} from '../../../routes';
 import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
 import {isFullVDiskData} from '../../../utils/storage';

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -9,7 +9,7 @@ import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
 import {TPDiskStateInfo} from '../../../types/api/pdisk';
-import {getPDiskId} from '../../../utils';
+import {getPDiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 import {bytesToGB} from '../../../utils/utils';
 
@@ -23,7 +23,7 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesMap) => {
     const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
 
     const pdiskData: InfoViewerItem[] = [
-        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || '-'},
         {label: 'State', value: State || 'not available'},
         {label: 'Type', value: getPDiskType(data) || 'unknown'},
     ];