ydb-embedded-ui 1.0.3 → 1.1.1

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {formatStorageValuesToGb, stringifyVdiskId} from '../../../utils';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {valueIsDefined} from './NodeStructure';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+
+const b = cn('kv-node-structure');
+
+interface VdiskProps {
+    AllocatedSize?: string;
+    DiskSpace?: string;
+    FrontQueues?: string;
+    Guid?: string;
+    Replicated?: boolean;
+    VDiskState?: string;
+    VDiskId?: {
+        GroupId: number;
+        GroupGeneration: number;
+        Ring: number;
+        Domain: number;
+        VDisk: number;
+    };
+    VDiskSlotId?: number;
+    Kind?: string;
+    SatisfactionRank?: {FreshRank: {Flag: string}; LevelRank: {Flag: string}};
+    AvailableSize?: string;
+    HasUnreadableBlobs?: boolean;
+    IncarnationGuid?: string;
+    InstanceGuid?: string;
+    StoragePoolName?: string;
+    ReadThroughput?: string;
+    WriteThroughput?: string;
+}
+
+export function Vdisk({
+    AllocatedSize,
+    DiskSpace,
+    FrontQueues,
+    Guid,
+    Replicated,
+    VDiskState,
+    VDiskId,
+    VDiskSlotId,
+    Kind,
+    SatisfactionRank,
+    AvailableSize,
+    HasUnreadableBlobs,
+    IncarnationGuid,
+    InstanceGuid,
+    StoragePoolName,
+    ReadThroughput,
+    WriteThroughput,
+}: VdiskProps) {
+    const vdiskInfo = [];
+
+    if (valueIsDefined(VDiskSlotId)) {
+        vdiskInfo.push({label: 'VDisk Slot Id', value: VDiskSlotId});
+    }
+    if (valueIsDefined(Guid)) {
+        vdiskInfo.push({label: 'GUID', value: Guid});
+    }
+    if (valueIsDefined(Kind)) {
+        vdiskInfo.push({label: 'Kind', value: Kind});
+    }
+    if (valueIsDefined(VDiskState)) {
+        vdiskInfo.push({
+            label: 'VDisk State',
+            value: VDiskState,
+        });
+    }
+    if (valueIsDefined(DiskSpace)) {
+        vdiskInfo.push({
+            label: 'Disk Space',
+            value: <EntityStatus status={DiskSpace} />,
+        });
+    }
+    if (valueIsDefined(SatisfactionRank?.FreshRank.Flag)) {
+        vdiskInfo.push({
+            label: 'Fresh Rank Satisfaction',
+            value: <EntityStatus status={SatisfactionRank?.FreshRank.Flag} />,
+        });
+    }
+    if (valueIsDefined(SatisfactionRank?.LevelRank.Flag)) {
+        vdiskInfo.push({
+            label: 'Level Rank Satisfaction',
+            value: <EntityStatus status={SatisfactionRank?.LevelRank.Flag} />,
+        });
+    }
+    vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});
+    vdiskInfo.push({label: 'Allocated Size', value: bytesToGB(AllocatedSize)});
+    vdiskInfo.push({label: 'Available Size', value: bytesToGB(AvailableSize)});
+    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
+        vdiskInfo.push({
+            label: 'Size',
+            value: (
+                <ProgressViewer
+                    value={AllocatedSize}
+                    capacity={Number(AllocatedSize) + Number(AvailableSize)}
+                    formatValues={formatStorageValuesToGb}
+                    colorizeProgress={true}
+                />
+            ),
+        });
+    }
+
+    vdiskInfo.push({
+        label: 'Has Unreadable Blobs',
+        value: HasUnreadableBlobs ? 'Yes' : 'No',
+    });
+    if (valueIsDefined(IncarnationGuid)) {
+        vdiskInfo.push({label: 'Incarnation GUID', value: IncarnationGuid});
+    }
+    if (valueIsDefined(InstanceGuid)) {
+        vdiskInfo.push({label: 'Instance GUID', value: InstanceGuid});
+    }
+    if (valueIsDefined(FrontQueues)) {
+        vdiskInfo.push({
+            label: 'Front Queues',
+            value: <EntityStatus status={FrontQueues} />,
+        });
+    }
+    if (valueIsDefined(StoragePoolName)) {
+        vdiskInfo.push({label: 'Storage Pool Name', value: StoragePoolName});
+    }
+    vdiskInfo.push({
+        label: 'Read Throughput',
+        value: bytesToSpeed(ReadThroughput),
+    });
+    vdiskInfo.push({
+        label: 'Write Throughput',
+        value: bytesToSpeed(WriteThroughput),
+    });
+
+    return (
+        <React.Fragment>
+            <div className={b('row')}>
+                <span className={b('title')}>VDisk </span>
+                <EntityStatus
+                    status={VDiskState === 'OK' ? 'green' : 'red'}
+                    name={stringifyVdiskId(VDiskId)}
+                />
+            </div>
+
+            <div className={b('column')}>
+                <InfoViewer className={b('section')} info={vdiskInfo} />
+            </div>
+        </React.Fragment>
+    );
+}

package/dist/containers/Pdisk/Pdisk.js

@@ -14,7 +14,7 @@ import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {getPdiskInfo, clearStore} from '../../store/reducers/pdisk';
 import {PDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
 import {formatStorageValues, calcUptime} from '../../utils';
-import routes, {createHref} from '../../routes';
+import {getDefaultNodePath} from '../Node/NodePages';
 
 import './Pdisk.scss';
 
@@ -97,10 +97,7 @@ class Pdisk extends React.Component {
             {
                 label: 'NodeId',
                 value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
-                    >
+                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
                         {NodeId}
                     </Link>
                 ),

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -5,7 +5,6 @@
     display: inline-block;
 
     width: 100%;
-    max-width: 200px;
     height: var(--yc-text-body2-line-height);
 
     border: 1px solid var(--yc-color-infographics-misc-medium);
@@ -66,12 +65,20 @@
     }
     &__filled-title {
         position: absolute;
-        top: 0;
-        left: 5px;
+        z-index: 2;
 
         font-size: var(--yc-text-body-font-size);
         line-height: inherit;
 
         color: inherit;
     }
+
+    &__link {
+        display: flex;
+        justify-content: center;
+
+        height: 100%;
+
+        color: inherit;
+    }
 }

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,5 +1,5 @@
-import React, {useContext} from 'react';
-import HistoryContext from '../../../contexts/HistoryContext';
+import React from 'react';
+import InternalLink from '../../../components/InternalLink/InternalLink';
 import cn from 'bem-cn-lite';
 
 import './DiskStateProgressBar.scss';
@@ -26,12 +26,19 @@ function DiskStateProgressBar({
     severity,
     href,
 }: DiskStateProgressBarProps) {
-    const history = useContext(HistoryContext);
-    const onDiskClick = () => {
-        if (href) {
-            history.push(href);
-        }
+    const renderAllocatedPercent = () => {
+        return (
+            diskAllocatedPercent >= 0 && (
+                <React.Fragment>
+                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
+                    <div className={b('filled-title')}>
+                        {`${Math.round(diskAllocatedPercent)}%`}
+                    </div>
+                </React.Fragment>
+            )
+        );
     };
+
     return (
         <div
             className={
@@ -39,15 +46,13 @@ function DiskStateProgressBar({
                     ? b({[diskProgressColors[severity].toLowerCase()]: true})
                     : undefined
             }
-            onClick={onDiskClick}
         >
-            {diskAllocatedPercent >= 0 && (
-                <React.Fragment>
-                    <div className={b('filled')} style={{width: `${diskAllocatedPercent}%`}} />
-                    <div className={b('filled-title')}>
-                        {`${Math.round(diskAllocatedPercent)}%`}
-                    </div>
-                </React.Fragment>
+            {href ? (
+                <InternalLink to={href} className={b('link')}>
+                    {renderAllocatedPercent()}
+                </InternalLink>
+            ) : (
+                renderAllocatedPercent()
             )}
         </div>
     );

package/dist/containers/Storage/Pdisk/Pdisk.scss

@@ -3,6 +3,7 @@
     flex-grow: 1;
     align-items: center;
 
+    max-width: 200px;
     margin-right: 10px;
 
     cursor: pointer;

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

@@ -11,6 +11,7 @@ import {getPDiskId} from '../../../utils';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
+import {STRUCTURE} from '../../Node/NodePages';
 
 import './Pdisk.scss';
 
@@ -119,7 +120,7 @@ function Pdisk(props: PDiskProps) {
                 className={b('popup-wrapper')}
                 anchorRef={anchor}
                 open={isPopupVisible}
-                placement={['top']}
+                placement={['top', 'bottom']}
                 hasArrow
             >
                 <div className={b('popup-content')}>
@@ -153,10 +154,11 @@ function Pdisk(props: PDiskProps) {
                 <DiskStateProgressBar
                     diskAllocatedPercent={pdiskAllocatedPercent}
                     severity={severity as keyof typeof diskProgressColors}
-                    href={createHref(routes.vdisk, undefined, {
-                        pdiskId: props.PDiskId,
-                        nodeId: props.NodeId,
-                    })}
+                    href={createHref(
+                        routes.node,
+                        {id: props.NodeId, activeTab: STRUCTURE},
+                        {pdiskId: props.PDiskId},
+                    )}
                 />
             </div>
         </React.Fragment>

package/dist/containers/Storage/Storage.js

@@ -18,6 +18,7 @@ import {
     getNodesObject,
     StorageTypes,
     setStorageType,
+    VisibleEntitiesTitles,
 } from '../../store/reducers/storage';
 import {getNodesList} from '../../store/reducers/clusterNodes';
 import StorageGroups from './StorageGroups/StorageGroups';
@@ -56,6 +57,7 @@ class Storage extends React.Component {
         visibleEntities: PropTypes.string,
         setHeader: PropTypes.func,
         tenant: PropTypes.string,
+        nodeId: PropTypes.string,
     };
 
     componentDidMount() {
@@ -68,12 +70,7 @@ class Storage extends React.Component {
             getNodesList,
             getStorageInfo,
         } = this.props;
-        setHeader([
-            {
-                text: CLUSTER_PAGES.storage.title,
-                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
-            },
-        ]);
+
         this.autofetcher = new AutoFetcher();
         getNodesList();
         if (tenant || nodeId) {
@@ -85,6 +82,12 @@ class Storage extends React.Component {
                 type: storageType,
             });
         } else {
+            setHeader([
+                {
+                    text: CLUSTER_PAGES.storage.title,
+                    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
+                },
+            ]);
             getStorageInfo({
                 tenant,
                 nodeId,
@@ -209,13 +212,13 @@ class Storage extends React.Component {
                 </div>
                 <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
                     <RadioButton.Option value={VisibleEntities.Missing}>
-                        {VisibleEntities.Missing}
+                        {VisibleEntitiesTitles[VisibleEntities.Missing]}
                     </RadioButton.Option>
                     <RadioButton.Option value={VisibleEntities.Space}>
-                        {VisibleEntities.Space}
+                        {VisibleEntitiesTitles[VisibleEntities.Space]}
                     </RadioButton.Option>
                     <RadioButton.Option value={VisibleEntities.All}>
-                        {VisibleEntities.All}
+                        {VisibleEntitiesTitles[VisibleEntities.All]}
                     </RadioButton.Option>
                 </RadioButton>
 

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -15,7 +15,8 @@
         display: inline-block;
         overflow: hidden;
 
-        max-width: 150px;
+        width: 230px;
+        max-width: 230px;
 
         text-overflow: ellipsis;
     }

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -84,7 +84,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
         {
             name: TableColumnsIds.PoolName,
             header: tableColumnsNames[TableColumnsIds.PoolName],
-            width: 160,
+            width: 250,
             render: ({value}) => {
                 const splitted = (value as string)?.split('/');
                 return (
@@ -214,7 +214,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No storage groups with space problems.';
+        emptyMessage = 'No groups with out of space errors.';
     }
 
     if (visibleEntities === VisibleEntities.Missing) {

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -1,4 +1,4 @@
-.global-storage-groups {
+.global-storage-nodes {
     &__pdisks-wrapper {
         display: flex;
         overflow-x: auto;
@@ -15,7 +15,8 @@
         display: inline-block;
         overflow: hidden;
 
-        max-width: 340px;
+        width: 330px;
+        max-width: 330px;
 
         text-overflow: ellipsis;
     }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -34,7 +34,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     Missing: 'Missing',
 };
 
-const b = cn('global-storage-groups');
+const b = cn('global-storage-nodes');
 
 function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
@@ -118,7 +118,7 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No nodes with space problems.';
+        emptyMessage = 'No nodes with out of space errors.';
     }
     if (visibleEntities === VisibleEntities.Missing) {
         emptyMessage = 'No degraded nodes.';

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

@@ -10,6 +10,7 @@ import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
+import {STRUCTURE} from '../../Node/NodePages';
 
 import './Vdisk.scss';
 
@@ -192,7 +193,7 @@ function Vdisk(props) {
                 className={b('popup-wrapper')}
                 anchorRef={anchor}
                 open={isPopupVisible}
-                placement={['top']}
+                placement={['top', 'bottom']}
                 hasArrow
             >
                 <div className={b('popup-content')}>
@@ -234,11 +235,11 @@ function Vdisk(props) {
                 <DiskStateProgressBar
                     diskAllocatedPercent={vdiskAllocatedPercent}
                     severity={severity}
-                    href={createHref(routes.vdisk, null, {
-                        vdiskId: stringifyVdiskId(props.VDiskId),
-                        pdiskId: props.PDisk?.PDiskId,
-                        nodeId: props.NodeId,
-                    })}
+                    href={createHref(
+                        routes.node,
+                        {id: props.NodeId, activeTab: STRUCTURE},
+                        {pdiskId: props.PDisk?.PDiskId, vdiskId: stringifyVdiskId(props.VDiskId)},
+                    )}
                 />
             </div>
         </React.Fragment>

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -3,6 +3,7 @@
     flex-grow: 1;
     align-items: center;
 
+    max-width: 200px;
     margin-right: 10px;
 
     cursor: pointer;

package/dist/containers/Tablet/Tablet.js

@@ -19,6 +19,7 @@ import {Link as ExternalLink, Button, Loader} from '@yandex-cloud/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
 import routes, {createHref} from '../../routes';
+import {getDefaultNodePath} from '../Node/NodePages';
 
 import './Tablet.scss';
 
@@ -316,13 +317,7 @@ class Tablet extends React.Component {
             {
                 label: 'Node',
                 value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.node, {
-                            id: String(tablet.NodeId),
-                            activeTab: 'storage',
-                        })}
-                    >
+                    <Link className={b('link')} to={getDefaultNodePath(String(tablet.NodeId))}>
                         {tablet.NodeId}
                     </Link>
                 ),

package/dist/containers/Tablets/Tablets.js

@@ -32,9 +32,9 @@ class Tablets extends React.Component {
         hideTooltip: PropTypes.func,
         getTabletsInfo: PropTypes.func,
         nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        timeoutForRequest: PropTypes.number,
         path: PropTypes.string,
         clearWasLoadingFlag: PropTypes.func,
+        className: PropTypes.string,
     };
 
     autofetcher;
@@ -148,10 +148,10 @@ class Tablets extends React.Component {
             content: item,
         }));
         const {filteredTablets} = this.state;
-        const {stateFilter, typeFilter} = this.props;
+        const {stateFilter, typeFilter, className} = this.props;
 
         return (
-            <div className={b()}>
+            <div className={(b(), className)}>
                 <div className={b('header')}>
                     <Select
                         className={b('filter-control')}
@@ -204,19 +204,11 @@ class Tablets extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {
-        data = {},
-        wasLoaded,
-        loading,
-        timeoutForRequest,
-        stateFilter,
-        typeFilter,
-    } = state.tablets;
+    const {data = {}, wasLoaded, loading, stateFilter, typeFilter} = state.tablets;
     const {autorefresh} = state.schema;
     const {TabletStateInfo: tablets = []} = data;
     return {
         tablets,
-        timeoutForRequest,
         wasLoaded,
         loading,
         stateFilter,

package/dist/containers/Tenant/Acl/Acl.js

@@ -26,7 +26,6 @@ class Acl extends React.Component {
             name: 'AccessType',
             header: 'Access Type',
             sortable: false,
-            width: COLUMN_WIDTH,
         },
         {
             name: 'AccessRights',
@@ -36,7 +35,6 @@ class Acl extends React.Component {
                     return <div key={index}>{item}</div>;
                 });
             },
-            width: COLUMN_WIDTH,
             sortable: false,
         },
         {
@@ -56,7 +54,6 @@ class Acl extends React.Component {
                     return <div key={index}>{item}</div>;
                 });
             },
-            width: COLUMN_WIDTH,
             sortable: false,
         },
     ];

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

@@ -31,7 +31,6 @@ class Compute extends React.Component {
         getNodes: PropTypes.func,
         hideTooltip: PropTypes.func,
         showTooltip: PropTypes.func,
-        timeoutForRequest: PropTypes.number,
     };
 
     autofetcher;
@@ -102,7 +101,7 @@ class Compute extends React.Component {
 }
 
 function mapStateToProps(state, ownProps) {
-    const {data, loading, wasLoaded, error, timeoutForRequest} = state.nodes;
+    const {data, loading, wasLoaded, error} = state.nodes;
     const {autorefresh} = state.schema;
     const {search} = ownProps.location;
     const queryParams = qs.parse(search, {
@@ -113,7 +112,6 @@ function mapStateToProps(state, ownProps) {
     return {
         nodes,
         tenantName,
-        timeoutForRequest,
         loading,
         wasLoaded,
         error,

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

@@ -14,11 +14,11 @@ import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFi
 import {getNetworkInfo} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {ALL, PROBLEMS} from '../../../../utils/constants';
-import routes, {createHref} from '../../../../routes';
 import {changeFilter} from '../../../../store/reducers/settings';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import './Network.scss';
-import {AutoFetcher} from '../../../../utils/autofetcher';
 
 const b = cn('network');
 
@@ -301,10 +301,7 @@ class Network extends React.Component {
                                         Connectivity of node{' '}
                                         <Link
                                             className={b('link')}
-                                            to={createHref(routes.node, {
-                                                id: clickedNode.NodeId,
-                                                activeTab: 'storage',
-                                            })}
+                                            to={getDefaultNodePath(clickedNode.NodeId)}
                                         >
                                             {clickedNode.NodeId}
                                         </Link>{' '}

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -147,6 +147,7 @@
     &__path-name {
         overflow: hidden;
 
+        white-space: nowrap;
         text-overflow: ellipsis;
     }
 

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -154,7 +154,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const renderObjectOverview = () => {
         const startTimeInMilliseconds = currentSchemaData?.CreateStep / 1000;
-        let createTime = 'Unknown';
+        let createTime = '';
         if (startTimeInMilliseconds) {
             createTime = new Date(startTimeInMilliseconds).toUTCString();
         }