ydb-embedded-ui 1.8.7 → 1.10.0

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

@@ -14,9 +14,11 @@ import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {valueIsDefined} from './NodeStructure';
+import {PDiskTitleBadge} from './PDiskTitleBadge';
 
 const b = cn('kv-node-structure');
 
@@ -230,6 +232,7 @@ export function PDisk(props: PDiskProps) {
         }
         if (valueIsDefined(Category)) {
             pdiskInfo.push({label: 'Category', value: Category});
+            pdiskInfo.push({label: 'Type', value: getPDiskType(data)});
         }
         pdiskInfo.push({
             label: 'Allocated Size',
@@ -286,8 +289,27 @@ export function PDisk(props: PDiskProps) {
         <div className={b('pdisk')} id={props.id}>
             <div className={b('pdisk-header')}>
                 <div className={b('pdisk-title-wrapper')}>
-                    <span>{data.Path}</span>
-                    <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
+                    <EntityStatus status={data.Device} />
+                    <PDiskTitleBadge
+                        label="PDiskID"
+                        value={data.PDiskId}
+                        className={b('pdisk-title-id')}
+                    />
+                    <PDiskTitleBadge
+                        value={getPDiskType(data)}
+                        className={b('pdisk-title-type')}
+                    />
+                    <ProgressViewer
+                        value={data.TotalSize - data.AvailableSize}
+                        capacity={data.TotalSize}
+                        formatValues={formatStorageValuesToGb}
+                        colorizeProgress={true}
+                        className={b('pdisk-title-size')}
+                    />
+                    <PDiskTitleBadge
+                        label="VDisks"
+                        value={data.vDisks.length}
+                    />
                 </div>
                 <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />

package/dist/containers/Nodes/Nodes.js

@@ -63,6 +63,7 @@ class Nodes extends React.Component {
     }
 
     componentWillUnmount() {
+        this.props.hideTooltip();
         clearInterval(this.reloadDescriptor);
     }
 

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -11,7 +11,7 @@ const propTypes = {
     className: PropTypes.string,
     toolTipVisible: PropTypes.bool,
     currentHoveredRef: PropTypes.object,
-    data: PropTypes.object,
+    data: PropTypes.any,
     template: PropTypes.func,
     hideTooltip: PropTypes.func,
 };

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -8,6 +8,8 @@ import {bytesToGB} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 //@ts-ignore
 import {getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -20,38 +22,29 @@ import './Pdisk.scss';
 const b = cn('pdisk-storage');
 
 const stateSeverity = {
-    Initial: 0,
-    Normal: 1,
-    InitialFormatRead: 3,
-    InitialSysLogRead: 3,
-    InitialCommonLogRead: 3,
-    InitialFormatReadError: 5,
-    InitialSysLogReadError: 5,
-    InitialSysLogParseError: 5,
-    InitialCommonLogReadError: 5,
-    InitialCommonLogParseError: 5,
-    CommonLoggerInitError: 5,
-    OpenFileError: 5,
-    ChunkQuotaError: 5,
-    DeviceIoError: 5,
+    [TPDiskState.Initial]: 0,
+    [TPDiskState.Normal]: 1,
+    [TPDiskState.InitialFormatRead]: 3,
+    [TPDiskState.InitialSysLogRead]: 3,
+    [TPDiskState.InitialCommonLogRead]: 3,
+    [TPDiskState.InitialFormatReadError]: 5,
+    [TPDiskState.InitialSysLogReadError]: 5,
+    [TPDiskState.InitialSysLogParseError]: 5,
+    [TPDiskState.InitialCommonLogReadError]: 5,
+    [TPDiskState.InitialCommonLogParseError]: 5,
+    [TPDiskState.CommonLoggerInitError]: 5,
+    [TPDiskState.OpenFileError]: 5,
+    [TPDiskState.ChunkQuotaError]: 5,
+    [TPDiskState.DeviceIoError]: 5,
 };
 
-type PDiskState = keyof typeof stateSeverity;
-
-interface PDiskProps {
-    NodeId: number;
-    Host?: string;
-    Path?: string;
-    Realtime?: string;
-    Device?: string;
-    AvailableSize?: string;
-    TotalSize?: string;
-    State?: PDiskState;
-    PDiskId: number;
-}
+type PDiskProps = TPDiskStateInfo;
+
+const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
+    key !== undefined && key in stateSeverity;
 
-const getStateSeverity = (pDiskState?: PDiskState) => {
-    return pDiskState ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
+const getStateSeverity = (pDiskState?: TPDiskState) => {
+    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
 function Pdisk(props: PDiskProps) {
@@ -76,8 +69,7 @@ function Pdisk(props: PDiskProps) {
     };
     /* eslint-disable */
     const preparePdiskData = () => {
-        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Host, Path, Realtime, Device} =
-            props;
+        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = props;
         const errorColors = [
             diskProgressColors[colorSeverity.Orange as keyof typeof diskProgressColors],
             diskProgressColors[colorSeverity.Red as keyof typeof diskProgressColors],
@@ -89,9 +81,9 @@ function Pdisk(props: PDiskProps) {
         ];
 
         pdiskData.push({property: 'State', value: State || 'not available'});
+        pdiskData.push({property: 'Type', value: getPDiskType(props) || 'unknown'});
         NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
 
-        Host && pdiskData.push({property: 'Host', value: Host});
         Path && pdiskData.push({property: 'Path', value: Path});
         pdiskData.push({
             property: 'Available',
@@ -151,7 +143,7 @@ function Pdisk(props: PDiskProps) {
                     href={createHref(
                         routes.node,
                         {id: props.NodeId, activeTab: STRUCTURE},
-                        {pdiskId: props.PDiskId},
+                        {pdiskId: props.PDiskId || ''},
                     )}
                 />
             </div>

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -7,6 +7,7 @@ import {Popup} from '@yandex-cloud/uikit';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -169,6 +170,7 @@ function Vdisk(props) {
                 property: 'State',
                 value: PDisk.State || 'not available',
             });
+            pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
             PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
             PDisk.NodeId &&
                 nodes[PDisk.NodeId] &&

package/dist/containers/Tablet/Tablet.js

@@ -199,7 +199,7 @@ class Tablet extends React.Component {
                 return (
                     <CriticalActionDialog
                         visible={dialogVisible}
-                        text="The tablet will be killed. Do you want to proceed?"
+                        text="The tablet will be restarted. Do you want to proceed?"
                         onClose={this.hideDialog}
                         onConfirm={this._onKillClick}
                     />
@@ -363,7 +363,7 @@ class Tablet extends React.Component {
                                 disabled={this.isDisabledKill()}
                                 className={b('control')}
                             >
-                                Kill
+                                Restart
                             </Button>
                             {this.hasHiveId() ? (
                                 <React.Fragment>

package/dist/containers/Tablets/Tablets.js

@@ -150,7 +150,7 @@ class Tablets extends React.Component {
         const {stateFilter, typeFilter, className} = this.props;
 
         return (
-            <div className={(b(), className)}>
+            <div className={b(null, className)}>
                 <div className={b('header')}>
                     <Select
                         className={b('filter-control')}

package/dist/containers/Tablets/Tablets.scss

@@ -13,13 +13,7 @@
     }
 
     &__items {
-        display: flex;
         flex: 1 1 auto;
-        flex-wrap: wrap;
-    }
-
-    &__items-wrapper {
-        overflow: auto;
     }
 
     &__filters {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -3,7 +3,6 @@
 .tablets-filters {
     overflow: auto;
 
-    max-height: 400px;
     @include flex-container();
 
     &__node {
@@ -19,18 +18,12 @@
     }
 
     &__items {
-        display: flex;
         overflow: auto;
         flex: 1 1 auto;
-        flex-wrap: wrap;
 
         padding: 5px 20px;
     }
 
-    &__items-wrapper {
-        overflow: auto;
-    }
-
     &__filters {
         display: flex;
         align-items: center;

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -1,9 +1,13 @@
+$section-title-margin: 20px;
+$section-title-line-height: 24px;
+
 .kv-detailed-overview {
     display: flex;
-    gap: 10px;
+    gap: 20px;
     &__section {
         display: flex;
-        flex: 0 0 50%;
+        overflow-x: hidden;
+        flex: 0 0 calc(50% - 10px);
         flex-direction: column;
     }
 

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -13,6 +13,11 @@ export enum GeneralPagesIds {
     'graph' = 'graph',
 }
 
+type Page = {
+    id: GeneralPagesIds,
+    title: string,
+};
+
 const overview = {
     id: GeneralPagesIds.overview,
     title: 'Overview',
@@ -76,17 +81,22 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const getPagesByType = (type?: EPathType) => {
-    switch (type) {
-        case EPathType.EPathTypeColumnStore:
-        case EPathType.EPathTypeSubDomain:
-            return DATABASE_PAGES;
-        case EPathType.EPathTypeColumnTable:
-        case EPathType.EPathTypeTable:
-            return TABLE_PAGES;
-        case EPathType.EPathTypeDir:
-        case EPathType.EPathTypeTableIndex:
-        default:
-            return DIR_PAGES;
-    }
-}
+// verbose mapping to guarantee correct tabs for new path types
+// TS will error when a new type is added but not mapped here
+const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
+
+    [EPathType.EPathTypeTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: TABLE_PAGES,
+
+    [EPathType.EPathTypeDir]: DIR_PAGES,
+    [EPathType.EPathTypeTableIndex]: DIR_PAGES,
+    [EPathType.EPathTypeCdcStream]: DIR_PAGES,
+};
+
+export const getPagesByType = (type?: EPathType) =>
+    (type && pathTypeToPages[type]) || DIR_PAGES;

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.js

@@ -97,10 +97,14 @@ class Healthcheck extends React.Component {
                     </div>
                     {this.renderUpdateButton()}
                 </div>
-                <div>
+                <div className={b('preview-content')}>
                     {text}
                     {!statusOk && (
-                        <Button view="flat-info" onClick={showMoreHandler}>
+                        <Button
+                            view="flat-info"
+                            onClick={showMoreHandler}
+                            size="s"
+                        >
                             Show details
                         </Button>
                     )}

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -1,3 +1,4 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
 @import '../../../../styles/mixins.scss';
 
 .healthcheck {
@@ -37,14 +38,17 @@
 
     &__status-wrapper {
         display: flex;
-        align-items: baseline;
 
-        margin-bottom: 15px;
+        margin-bottom: detailedOverview.$section-title-margin;
         gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
+        line-height: detailedOverview.$section-title-line-height;
+    }
+
+    &__preview-content {
         line-height: 24px;
     }
 

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {EPathType} from '../../../../types/api/schema';
 import {prepareQueryError} from '../../../../utils';
 
+import {isColumnEntityType, isTableType} from '../../utils/schema';
+
 import './HotKeys.scss';
 
 const b = cn('hot-keys');
@@ -42,8 +43,7 @@ function HotKeys({
     type,
 }) {
     const fetchData = () => {
-        // ColumnTables excluded intentionally
-        if (type === EPathType.EPathTypeTable) {
+        if (isTableType(type) && !isColumnEntityType(type)) {
             getHotKeys(currentSchemaPath);
         }
     };

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {ReactNode, useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
@@ -6,8 +6,9 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
+import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
 
-import type {EPathType} from '../../../../types/api/schema';
+import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
@@ -112,11 +113,31 @@ function Overview(props: OverviewProps) {
         );
     };
 
+    const renderContent = () => {
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent: Record<EPathType, (() => ReactNode) | undefined> = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: () => <IndexInfoViewer data={schemaData} />,
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: undefined,
+        };
+
+        return (props.type && pathTypeToComponent[props.type]?.()) || (
+            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        );
+    }
+
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
         <div className={props.className}>
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            {renderContent()}
         </div>
     );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -25,9 +25,11 @@ const renderName = (tenant) => {
     if (tenant) {
         const {Name} = tenant;
         return (
-            <div className={b('tenant-name')}>
+            <div className={b('tenant-name-wrapper')}>
                 <EntityStatus status={tenant.State} />
-                <span>{Name}</span>
+                <span className={b('tenant-name-trim')}>
+                    <span className={b('tenant-name')}>{Name}</span>
+                </span>
             </div>
         );
     }
@@ -139,17 +141,17 @@ class TenantOverview extends React.Component {
                             this.props.tenant.Name,
                             this.props.tenant.Type,
                         )}
-                    <div className={b('system-tablets')}>
-                        {SystemTablets &&
-                            SystemTablets.map((tablet, tabletIndex) => (
-                                <Tablet
-                                    onMouseEnter={showTooltip}
-                                    onMouseLeave={hideTooltip}
-                                    key={tabletIndex}
-                                    tablet={tablet}
-                                />
-                            ))}
-                    </div>
+                </div>
+                <div className={b('system-tablets')}>
+                    {SystemTablets &&
+                        SystemTablets.map((tablet, tabletIndex) => (
+                            <Tablet
+                                onMouseEnter={showTooltip}
+                                onMouseLeave={hideTooltip}
+                                key={tabletIndex}
+                                tablet={tablet}
+                            />
+                        ))}
                 </div>
                 <div className={b('common-info')}>
                     {PoolStats ? (

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -1,30 +1,46 @@
+@use '../DetailedOverview/DetailedOverview.scss' as detailedOverview;
+
 .tenant-overview {
     padding-bottom: 20px;
     &__loader {
         display: flex;
         justify-content: center;
     }
-    &__tenant-name {
+    &__tenant-name-wrapper {
         display: flex;
+        overflow: hidden;
         align-items: center;
 
         & .yc-link {
             display: flex;
         }
     }
+    &__tenant-name-trim {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        direction: rtl;
+    }
+
+    &__tenant-name {
+        unicode-bidi: plaintext;
+    }
 
     &__top {
         display: flex;
         align-items: center;
 
-        margin-bottom: 20px;
+        margin-bottom: 10px;
+
+        line-height: 24px;
     }
 
     &__top-label {
-        margin-bottom: 20px;
+        margin-bottom: detailedOverview.$section-title-margin;
 
         font-weight: 600;
-        line-height: 24px;
+        line-height: detailedOverview.$section-title-line-height;
         gap: 10px;
     }
 
@@ -42,7 +58,7 @@
         flex-wrap: wrap;
         align-items: center;
 
-        margin-left: 15px;
+        margin-bottom: 35px;
     }
 
     &__collapse-title {
@@ -76,7 +92,7 @@
         margin-bottom: 20px;
 
         font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
 }