Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions src/containers/Storage/PDisk/PDisk.scss
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
.pdisk-storage {
position: relative;

width: 120px;
display: flex;
flex-direction: column;

min-width: 120px;

&__content {
position: relative;

display: block;
flex: 1;

border-radius: 4px; // to match interactive area with disk shape
border-radius: 4px;
}

&__vdisks {
display: flex;
// this breaks disks relative sizes, but disks rarely exceed one line
flex-wrap: wrap;
flex: 0 0 auto;
gap: 2px;

margin-bottom: 4px;

white-space: nowrap;
}

&__vdisks-item {
flex-basis: 3px;
flex-shrink: 0;
flex: 0 0 3px;

min-width: 3px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your solution works well only in the case, where all pdisks have the same amount of vdisks, it's not always true.

Previously we assumed, that all pdisks should be of the same size, so MaximumSlotsPerDisk was introduced so it will be possible to calculate pdisk size for paginated table (something like pDiskSize = MaximumSlotsPerDisk * VDISK_SIZE) and use it for all pdisks in this table (even if the don't have any vdisks)

Screenshot 2024-12-17 at 13 46 51

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Also added random vdisks count generation to pdisks in mocks


.stack__layer {
.data-table__row:hover & {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@

&__pdisks-wrapper {
display: flex;
justify-content: left;
align-items: flex-end;
gap: 10px;

width: max-content;
height: 40px;
width: 100%;
}
&__pdisks-item {
flex-grow: 1;

max-width: 200px;
margin-right: 10px;

&:last-child {
margin-right: 0px;
}
&__pdisks-item {
display: flex;
flex-shrink: 0;
}
}
42 changes: 26 additions & 16 deletions src/containers/Storage/StorageNodes/getNodes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
NODES_COLUMNS_TO_DATA_FIELDS,
getNodesColumnSortField,
} from '../../../components/nodesColumns/constants';
import {generateNodes} from '../../../mocks/storage/nodes';
import type {
PreparedStorageNode,
PreparedStorageNodeFilters,
Expand Down Expand Up @@ -44,22 +45,31 @@ export const getStorageNodes: FetchData<

const dataFieldsRequired = getRequiredDataFields(columnsIds, NODES_COLUMNS_TO_DATA_FIELDS);

const response = await window.api.viewer.getNodes({
type,
storage,
limit,
offset,
sort,
filter: searchValue,
uptime: getUptimeParamValue(nodesUptimeFilter),
with: visibleEntities,
database,
node_id: nodeId,
group_id: groupId,
filter_group: filterGroup,
filter_group_by: filterGroupBy,
fieldsRequired: dataFieldsRequired,
});
let response;
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('mocks')) {
// Get mock configuration from URL parameters or use defaults
const pdisks = parseInt(urlParams.get('pdisks') || '10', 10);
const vdisksPerPDisk = parseInt(urlParams.get('vdisksPerPDisk') || '2', 10);
response = generateNodes(5, {vdisksCount: pdisks * vdisksPerPDisk, pdisksCount: pdisks});
} else {
response = await window.api.viewer.getNodes({
type,
storage,
limit,
offset,
sort,
filter: searchValue,
uptime: getUptimeParamValue(nodesUptimeFilter),
with: visibleEntities,
database,
node_id: nodeId,
group_id: groupId,
filter_group: filterGroup,
filter_group_by: filterGroupBy,
fieldsRequired: dataFieldsRequired,
});
}
const preparedResponse = prepareStorageNodesResponse(response);
return {
data: preparedResponse.nodes || [],
Expand Down
158 changes: 158 additions & 0 deletions src/mocks/storage/nodes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import {EFlag} from '../../types/api/enums';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for test only (will delete before merge)

import type {
TEndpoint,
TNodeInfo,
TNodesInfo,
TPoolStats,
TSystemStateInfo,
} from '../../types/api/nodes';
import {TPDiskState} from '../../types/api/pdisk';
import {EVDiskState} from '../../types/api/vdisk';

// Different disk sizes to simulate variety (in bytes)
const DISK_SIZES = [
'68719476736', // 64 GB
'137438953472', // 128 GB
'274877906944', // 256 GB
'549755813888', // 512 GB
'1099511627776', // 1 TB
];

const getRandomDiskSize = () => DISK_SIZES[Math.floor(Math.random() * DISK_SIZES.length)];

const generatePoolStats = (count = 5): TPoolStats[] => {
const poolNames = ['System', 'User', 'Batch', 'IO', 'IC'] as const;
return poolNames.slice(0, count).map((Name) => ({
Name,
Usage: Math.random() * 0.02,
Threads: Math.floor(Math.random() * 3) + 1,
}));
};

const generateEndpoints = (): TEndpoint[] => [
{Name: 'ic', Address: ':19001'},
{Name: 'http-mon', Address: ':8765'},
{Name: 'grpcs', Address: ':2135'},
{Name: 'grpc', Address: ':2136'},
];

const generateSystemState = (nodeId: number): TSystemStateInfo => ({
StartTime: '1734358137851',
ChangeTime: '1734358421375',
LoadAverage: [3.381347656, 2.489257813, 1.279296875],
NumberOfCpus: 8,
SystemState: EFlag.Green,
NodeId: nodeId,
Host: `localhost-${nodeId}`,
Version: 'main.95ce0df',
PoolStats: generatePoolStats(),
Endpoints: generateEndpoints(),
Roles: ['Bootstrapper', 'StateStorage', 'StateStorageBoard', 'SchemeBoard', 'Storage'],
MemoryLimit: '2147483648',
MaxDiskUsage: 0.002349853516,
Location: {
DataCenter: '1',
Rack: '1',
Unit: '1',
},
TotalSessions: 0,
CoresUsed: 0.07583969556,
CoresTotal: 8,
});

const generatePDisk = (nodeId: number, pdiskId: number, totalSize = '68719476736') => ({
PDiskId: pdiskId,
ChangeTime: '1734358142074',
Path: `/ydb_data/pdisk${pdiskId}l3ki78no.data`,
Guid: pdiskId.toString(),
Category: '0',
TotalSize: totalSize,
AvailableSize: (Number(totalSize) * 0.9).toString(), // 90% available by default
State: TPDiskState.Normal,
NodeId: nodeId,
Device: EFlag.Green,
Realtime: EFlag.Green,
SerialNumber: '',
SystemSize: '213909504',
LogUsedSize: '35651584',
LogTotalSize: '68486692864',
EnforcedDynamicSlotSize: '22817013760',
});

const generateVDisk = (nodeId: number, vdiskId: number, pdiskId: number) => ({
VDiskId: {
GroupID: vdiskId,
GroupGeneration: 1,
Ring: 0,
Domain: 0,
VDisk: 0,
},
ChangeTime: '1734358420919',
PDiskId: pdiskId,
VDiskSlotId: vdiskId,
Guid: '1',
Kind: '0',
NodeId: nodeId,
VDiskState: EVDiskState.OK,
DiskSpace: EFlag.Green,
SatisfactionRank: {
FreshRank: {
Flag: EFlag.Green,
},
LevelRank: {
Flag: EFlag.Green,
},
},
Replicated: true,
ReplicationProgress: 1,
ReplicationSecondsRemaining: 0,
AllocatedSize: '0',
AvailableSize: '22817013760',
HasUnreadableBlobs: false,
IncarnationGuid: '11528832187803248876',
InstanceGuid: '14836434871903384493',
FrontQueues: EFlag.Green,
StoragePoolName: 'static',
ReadThroughput: '0',
WriteThroughput: '420',
});

interface NodeGeneratorOptions {
vdisksCount?: number;
pdisksCount?: number;
}

const DEFAULT_OPTIONS: NodeGeneratorOptions = {
vdisksCount: 12,
pdisksCount: 4,
};

const generateNode = (nodeId: number, options: NodeGeneratorOptions = {}): TNodeInfo => {
const pdisksCount = options.pdisksCount ?? DEFAULT_OPTIONS.pdisksCount;
const vdisksCount = options.vdisksCount ?? DEFAULT_OPTIONS.vdisksCount;

return {
NodeId: nodeId,
UptimeSeconds: 284,
CpuUsage: 0.00947996,
DiskSpaceUsage: 0.234985,
SystemState: generateSystemState(nodeId),
PDisks: Array.from({length: pdisksCount!}, (_, i) =>
generatePDisk(nodeId, i + 1, getRandomDiskSize()),
),
VDisks: Array.from({length: vdisksCount!}, (_, i) => {
// Distribute VDisks evenly across PDisks
const pdiskId = (i % pdisksCount!) + 1;
return generateVDisk(nodeId, i, pdiskId);
}),
};
};

export const generateNodes = (count = 1, options?: NodeGeneratorOptions): TNodesInfo => {
const nodes = Array.from({length: count}, (_, i) => generateNode(i + 1, options));
return {
TotalNodes: count.toString(),
FoundNodes: count.toString(),
Nodes: nodes,
};
};
Loading