ydb-embedded-ui 4.9.0 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.10.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.9.0...v4.10.0) (2023-07-07)
+
+
+### Bug Fixes
+
+* **AsideNavigation:** swap icons ([#465](https://github.com/ydb-platform/ydb-embedded-ui/issues/465)) ([13bc92a](https://github.com/ydb-platform/ydb-embedded-ui/commit/13bc92a0150ee8d809b3811b528f5d31f4999815))
+* move sendQuery timeout to request query ([#464](https://github.com/ydb-platform/ydb-embedded-ui/issues/464)) ([6323038](https://github.com/ydb-platform/ydb-embedded-ui/commit/6323038b9e327a9e348812b43514008e9d07640c))
+* **QueryEditor:** do not reset input on empty savedPath ([#451](https://github.com/ydb-platform/ydb-embedded-ui/issues/451)) ([7f98e44](https://github.com/ydb-platform/ydb-embedded-ui/commit/7f98e44834b54bfc1398bb418909fae21e22a3dc))
+* show 5 digits size in table info ([#461](https://github.com/ydb-platform/ydb-embedded-ui/issues/461)) ([8c4ecc4](https://github.com/ydb-platform/ydb-embedded-ui/commit/8c4ecc41ed41cad34debaa6ff7f39f1f10f8d974))
+* **TenantOverview:** add copy button to tenant name ([#459](https://github.com/ydb-platform/ydb-embedded-ui/issues/459)) ([2d8b380](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d8b38049a038fb889e82d0135c026462107a124))
+* **UsageFilter:** fix bar flashes ([#457](https://github.com/ydb-platform/ydb-embedded-ui/issues/457)) ([ae1965e](https://github.com/ydb-platform/ydb-embedded-ui/commit/ae1965ec894c7d012f0ebfc5949b73d4499b390e))
+
 ## [4.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.2...v4.9.0) (2023-06-30)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -1,5 +1,8 @@
 import cn from 'bem-cn-lite';
 
+import type {TSystemStateInfo} from '../../types/api/nodes';
+import type {AdditionalNodesInfo} from '../../utils/nodes';
+
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 import {Icon} from '../Icon';
@@ -9,8 +12,8 @@ import './BasicNodeViewer.scss';
 const b = cn('basic-node-viewer');
 
 interface BasicNodeViewerProps {
-    node: any;
-    additionalNodesInfo?: any;
+    node: TSystemStateInfo;
+    additionalNodesInfo?: AdditionalNodesInfo;
     className?: string;
 }
 
@@ -41,8 +44,8 @@ export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNod
                         <label>{node.NodeId}</label>
                     </div>
 
-                    <Tags tags={[node.DataCenter]} />
-                    <Tags tags={node.Roles} tagsType="blue" />
+                    {node.DataCenter && <Tags tags={[node.DataCenter]} />}
+                    {node.Roles && <Tags tags={node.Roles} tagsType="blue" />}
                 </>
             ) : (
                 <div className="error">no data</div>

package/dist/components/EntityStatus/EntityStatus.js

@@ -31,6 +31,7 @@ class EntityStatus extends React.Component {
         label: PropTypes.string,
         iconPath: PropTypes.string,
         hasClipboardButton: PropTypes.bool,
+        clipboardButtonAlwaysVisible: PropTypes.bool,
         showStatus: PropTypes.bool,
         externalLink: PropTypes.bool,
         className: PropTypes.string,
@@ -47,6 +48,7 @@ class EntityStatus extends React.Component {
         externalLink: false,
         mode: 'color',
         withLeftTrim: false,
+        clipboardButtonAlwaysVisible: false,
     };
     renderIcon() {
         const {status, size, showStatus, mode} = this.props;
@@ -123,7 +125,7 @@ class EntityStatus extends React.Component {
                         component="span"
                         size="s"
                         className={b('clipboard-button', {
-                            visible: false,
+                            visible: this.props.clipboardButtonAlwaysVisible,
                         })}
                     >
                         <ClipboardButton text={name} size={16} />

package/dist/components/FormattedBytes/FormattedBytes.tsx

@@ -0,0 +1,10 @@
+import {FormatBytesArgs, formatBytes} from '../../utils/bytesParsers';
+
+type FormattedBytesProps = FormatBytesArgs;
+
+export const FormattedBytes = ({value, withSpeedLabel, ...params}: FormattedBytesProps) => {
+    const formatted = formatBytes({value, withSpeedLabel, ...params});
+    const bytes = formatBytes({value, withSpeedLabel, size: 'b'});
+
+    return <span title={bytes}>{formatted}</span>;
+};

package/dist/components/FormattedBytes/utils.tsx

@@ -0,0 +1,13 @@
+import type {FormatBytesArgs} from '../../utils/bytesParsers';
+import {FormattedBytes} from './FormattedBytes';
+
+export const toFormattedSize = (
+    value: number | string | undefined,
+    params?: Omit<FormatBytesArgs, 'value'>,
+) => {
+    if (!value) {
+        return null;
+    }
+
+    return <FormattedBytes value={value} significantDigits={2} {...params} />;
+};

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -0,0 +1,73 @@
+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 InfoViewer from '../InfoViewer/InfoViewer';
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
+
+import './FullNodeViewer.scss';
+
+const b = cn('full-node-viewer');
+
+interface FullNodeViewerProps {
+    node: TSystemStateInfo | undefined;
+    className?: string;
+}
+
+export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
+    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
+        label: Name,
+        value: Address,
+    }));
+
+    const commonInfo = [
+        {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} />,
+    }));
+
+    return (
+        <div className={`${b()} ${className}`}>
+            {node ? (
+                <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="Endpoints"
+                            className={b('section')}
+                            info={endpointsInfo}
+                        />
+                    )}
+
+                    <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>
+            )}
+        </div>
+    );
+};

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

@@ -1,14 +1,15 @@
 import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
 import type {TMetrics} from '../../../types/api/tenant';
-import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {formatCPU, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';
 
 export const formatTabletMetricsItem = createInfoFormatter<TMetrics>({
     values: {
         CPU: formatCPU,
-        Memory: formatBytes,
-        Storage: formatBytes,
+        Memory: toFormattedSize,
+        Storage: toFormattedSize,
         Network: formatBps,
         ReadThroughput: formatBps,
         WriteThroughput: formatBps,
@@ -37,8 +38,8 @@ export const formatPartitionConfigItem = createInfoFormatter<TPartitionConfig>({
 
 export const formatTableStatsItem = createInfoFormatter<TTableStats>({
     values: {
-        DataSize: formatBytes,
-        IndexSize: formatBytes,
+        DataSize: toFormattedSize,
+        IndexSize: toFormattedSize,
         LastAccessTime: formatDateTime,
         LastUpdateTime: formatDateTime,
     },

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -1,10 +1,10 @@
 import {RadioButton} from '@gravity-ui/uikit';
 
-import type {ValueOf} from '../../types/common';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
-    value: ValueOf<typeof ProblemFilterValues>;
+    value: ProblemFilterValue;
     onChange: (value: string) => void;
     className?: string;
 }

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import cn from 'bem-cn-lite';
 import {Popover} from '@gravity-ui/uikit';
 
-import {formatBytesCustom, IBytesSizes, IProcessSpeedStats} from '../../utils/bytesParsers';
+import {formatBytes, BytesSizes, ProcessSpeedStats} from '../../utils/bytesParsers';
 
 import './SpeedMultiMeter.scss';
 
@@ -11,8 +11,8 @@ import i18n from './i18n';
 const b = cn('speed-multimeter');
 
 interface SpeedMultiMeterProps {
-    data?: IProcessSpeedStats;
-    speedSize?: IBytesSizes;
+    data?: ProcessSpeedStats;
+    speedSize?: BytesSizes;
     withValue?: boolean;
     withPopover?: boolean;
 }
@@ -27,7 +27,7 @@ export const SpeedMultiMeter = ({
     const rawValues = [perMinute, perHour, perDay];
 
     const formatValue = (value: number) =>
-        formatBytesCustom({value: value, size: speedSize, isSpeed: true});
+        formatBytes({value: value, size: speedSize, withSpeedLabel: true});
 
     const formattedValues = [
         {value: formatValue(perMinute), label: i18n('perMinute')},

package/dist/components/TruncatedQuery/{TruncatedQuery.js → TruncatedQuery.tsx}

@@ -1,11 +1,15 @@
-import React from 'react';
 import cn from 'bem-cn-lite';
 
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
-function TruncatedQuery({value, maxQueryHeight}) {
+interface TruncatedQueryProps {
+    value: string | undefined;
+    maxQueryHeight?: number;
+}
+
+export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
     const lines = value.split('\n');
     const truncated = lines.length > maxQueryHeight;
 
@@ -14,13 +18,11 @@ function TruncatedQuery({value, maxQueryHeight}) {
         const message =
             '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
         return (
-            <React.Fragment>
+            <>
                 <span className={b()}>{content}</span>
                 <span className={b('message', {color: 'secondary'})}>{message}</span>
-            </React.Fragment>
+            </>
         );
     }
-    return value;
-}
-
-export default TruncatedQuery;
+    return <>{value}</>;
+};

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -139,23 +139,23 @@ export const useGetLeftNavigationItems = () => {
 
         const items: MenuItem[] = [
             {
-                id: TENANT_PAGES_IDS.diagnostics,
-                title: 'Diagnostics',
+                id: TENANT_PAGES_IDS.query,
+                title: 'Query',
                 icon: squareChartBarIcon,
                 iconSize: 20,
                 location: getTenantPath({
                     ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
                 }),
             },
             {
-                id: TENANT_PAGES_IDS.query,
-                title: 'Query',
+                id: TENANT_PAGES_IDS.diagnostics,
+                title: 'Diagnostics',
                 icon: pulseIcon,
                 iconSize: 20,
                 location: getTenantPath({
                     ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
                 }),
             },
         ];

package/dist/containers/Cluster/Cluster.tsx

@@ -6,7 +6,11 @@ import qs from 'qs';
 
 import {Tabs} from '@gravity-ui/uikit';
 
-import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
+import type {
+    AdditionalClusterProps,
+    AdditionalTenantsProps,
+    AdditionalVersionsProps,
+} from '../../types/additionalProps';
 import type {AdditionalNodesInfo} from '../../utils/nodes';
 import routes from '../../routes';
 
@@ -17,9 +21,9 @@ import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../.
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {InternalLink} from '../../components/InternalLink';
-import Tenants from '../Tenants/Tenants';
+import {Tenants} from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
-import Storage from '../Storage/Storage';
+import {Storage} from '../Storage/Storage';
 import {Versions} from '../Versions/Versions';
 
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
@@ -30,7 +34,7 @@ import './Cluster.scss';
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalTenantsInfo?: unknown;
+    additionalTenantsProps?: AdditionalTenantsProps;
     additionalNodesInfo?: AdditionalNodesInfo;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
@@ -38,7 +42,7 @@ interface ClusterProps {
 
 function Cluster({
     additionalClusterProps,
-    additionalTenantsInfo,
+    additionalTenantsProps,
     additionalNodesInfo,
     additionalVersionsProps,
 }: ClusterProps) {
@@ -97,7 +101,7 @@ function Cluster({
     const renderTab = () => {
         switch (activeTab) {
             case clusterTabsIds.tenants: {
-                return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
+                return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
                 return <Nodes additionalNodesInfo={additionalNodesInfo} />;

package/dist/containers/Node/Node.tsx

@@ -9,11 +9,11 @@ import {Link} from 'react-router-dom';
 
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import {Tablets} from '../Tablets';
-import Storage from '../Storage/Storage';
-import NodeOverview from './NodeOverview/NodeOverview';
+import {Storage} from '../Storage/Storage';
 import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
+import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {createHref, parseQuery} from '../../routes';
@@ -128,7 +128,7 @@ function Node(props: NodeProps) {
             }
 
             case OVERVIEW: {
-                return <NodeOverview node={node} className={b('overview-wrapper')} />;
+                return <FullNodeViewer node={node} className={b('overview-wrapper')} />;
             }
 
             case STRUCTURE: {

package/dist/containers/Nodes/Nodes.tsx

@@ -5,7 +5,7 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../types/api/schema';
-import type {ValueOf} from '../../types/common';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
@@ -84,7 +84,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
     };
 
     const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value as ValueOf<typeof ProblemFilterValues>));
+        dispatch(changeFilter(value as ProblemFilterValue));
     };
 
     const handleUptimeFilterChange = (value: string) => {

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

@@ -5,9 +5,8 @@ import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {getVDisksForPDisk} from '../../../store/reducers/storage/storage';
+import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
@@ -58,11 +57,7 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
-    const vdisks: TVDiskStateInfo[] | undefined = useTypedSelector((state) =>
-        // @ts-expect-error selector is correct, but js infers broken type
-        // unignore after rewriting reducer in ts
-        getVDisksForPDisk(state, nodeId, data.PDiskId),
-    );
+    const vdisks = useTypedSelector((state) => selectVDisksForPDisk(state, nodeId, data.PDiskId));
 
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);