ydb-embedded-ui 4.8.2 → 4.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx +7 -4
  3. package/dist/components/EntityStatus/EntityStatus.js +3 -1
  4. package/dist/components/FormattedBytes/FormattedBytes.tsx +10 -0
  5. package/dist/components/FormattedBytes/utils.tsx +13 -0
  6. package/dist/components/FullNodeViewer/FullNodeViewer.tsx +73 -0
  7. package/dist/components/InfoViewer/formatters/table.ts +6 -5
  8. package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx +2 -2
  9. package/dist/components/ProblemFilter/ProblemFilter.tsx +2 -2
  10. package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx +4 -4
  11. package/dist/components/TruncatedQuery/{TruncatedQuery.js → TruncatedQuery.tsx} +10 -8
  12. package/dist/containers/AsideNavigation/AsideNavigation.tsx +6 -6
  13. package/dist/containers/Cluster/Cluster.tsx +10 -6
  14. package/dist/containers/Node/Node.tsx +3 -3
  15. package/dist/containers/Nodes/Nodes.tsx +3 -3
  16. package/dist/containers/Nodes/getNodesColumns.tsx +2 -2
  17. package/dist/containers/Storage/PDisk/PDisk.tsx +2 -7
  18. package/dist/containers/Storage/Storage.tsx +240 -0
  19. package/dist/containers/Storage/StorageGroups/StorageGroups.tsx +59 -57
  20. package/dist/containers/Storage/StorageNodes/StorageNodes.tsx +23 -25
  21. package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx +27 -0
  22. package/dist/containers/Storage/StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx +31 -0
  23. package/dist/containers/Storage/UsageFilter/UsageFilter.scss +1 -0
  24. package/dist/containers/Storage/UsageFilter/UsageFilter.tsx +17 -17
  25. package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +3 -3
  26. package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js +7 -4
  27. package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +0 -15
  28. package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx +10 -3
  29. package/dist/containers/Tenant/{Preview → Query/Preview}/Preview.scss +1 -1
  30. package/dist/containers/Tenant/Query/Preview/Preview.tsx +121 -0
  31. package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx +1 -1
  32. package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js +23 -51
  33. package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss +20 -15
  34. package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx +74 -27
  35. package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx +1 -1
  36. package/dist/containers/Tenant/Query/i18n/en.json +9 -2
  37. package/dist/containers/Tenant/Query/i18n/ru.json +9 -2
  38. package/dist/containers/Tenants/Tenants.tsx +269 -0
  39. package/dist/containers/UserSettings/i18n/en.json +1 -1
  40. package/dist/containers/UserSettings/i18n/ru.json +1 -1
  41. package/dist/services/api.ts +14 -16
  42. package/dist/store/reducers/executeQuery.ts +2 -3
  43. package/dist/store/reducers/explainQuery.ts +2 -2
  44. package/dist/store/reducers/index.ts +2 -2
  45. package/dist/store/reducers/{nodes.ts → nodes/nodes.ts} +33 -32
  46. package/dist/{types/store/nodes.ts → store/reducers/nodes/types.ts} +24 -27
  47. package/dist/store/reducers/partitions/types.ts +3 -3
  48. package/dist/store/reducers/settings/settings.ts +14 -4
  49. package/dist/store/reducers/settings/types.ts +3 -1
  50. package/dist/store/reducers/storage/constants.ts +10 -0
  51. package/dist/store/reducers/storage/selectors.ts +279 -0
  52. package/dist/store/reducers/storage/storage.ts +191 -0
  53. package/dist/store/reducers/storage/types.ts +92 -0
  54. package/dist/store/reducers/tenants/selectors.ts +46 -0
  55. package/dist/store/reducers/tenants/tenants.ts +21 -14
  56. package/dist/store/reducers/tenants/types.ts +20 -5
  57. package/dist/store/reducers/tenants/utils.ts +68 -0
  58. package/dist/types/additionalProps.ts +8 -0
  59. package/dist/types/api/storage.ts +1 -1
  60. package/dist/types/store/query.ts +5 -6
  61. package/dist/types/store/topic.ts +3 -3
  62. package/dist/utils/bytesParsers/__test__/formatBytes.test.ts +38 -0
  63. package/dist/utils/bytesParsers/convertBytesObjectToSpeed.ts +2 -2
  64. package/dist/utils/bytesParsers/formatBytes.ts +132 -0
  65. package/dist/utils/bytesParsers/i18n/en.json +1 -0
  66. package/dist/utils/bytesParsers/i18n/ru.json +1 -0
  67. package/dist/utils/bytesParsers/index.ts +1 -1
  68. package/dist/utils/constants.ts +1 -0
  69. package/dist/utils/index.js +5 -10
  70. package/dist/utils/nodes.ts +2 -2
  71. package/dist/utils/numeral.ts +8 -0
  72. package/dist/utils/query.ts +12 -0
  73. package/package.json +1 -1
  74. package/dist/components/FullNodeViewer/FullNodeViewer.js +0 -89
  75. package/dist/containers/Node/NodeOverview/NodeOverview.scss +0 -0
  76. package/dist/containers/Node/NodeOverview/NodeOverview.tsx +0 -21
  77. package/dist/containers/Storage/Storage.js +0 -372
  78. package/dist/containers/Tenant/Preview/Preview.js +0 -168
  79. package/dist/containers/Tenant/Query/QueryEditorControls/OldQueryEditorControls.tsx +0 -90
  80. package/dist/containers/Tenant/Query/QueryEditorControls/shared.ts +0 -18
  81. package/dist/containers/Tenants/Tenants.js +0 -363
  82. package/dist/store/reducers/storage.js +0 -438
  83. package/dist/utils/bytesParsers/formatBytesCustom.ts +0 -57
@@ -1,438 +0,0 @@
1
- import _ from 'lodash';
2
- import {createSelector} from 'reselect';
3
-
4
- import {calcUptime} from '../../utils';
5
- import {getUsage} from '../../utils/storage';
6
- import {NodesUptimeFilterValues} from '../../utils/nodes';
7
- import {getPDiskType} from '../../utils/pdisk';
8
- import '../../services/api';
9
-
10
- import {createRequestActionTypes, createApiRequest} from '../utils';
11
- import {filterNodesByUptime} from './nodes';
12
-
13
- export const VisibleEntities = {
14
- All: 'All',
15
- Missing: 'Missing',
16
- Space: 'Space',
17
- };
18
-
19
- export const VisibleEntitiesTitles = {
20
- [VisibleEntities.All]: 'All',
21
- [VisibleEntities.Missing]: 'Degraded',
22
- [VisibleEntities.Space]: 'Out of Space',
23
- };
24
-
25
- export const StorageTypes = {
26
- groups: 'Groups',
27
- nodes: 'Nodes',
28
- };
29
-
30
- const FETCH_STORAGE = createRequestActionTypes('storage', 'FETCH_STORAGE');
31
- const SET_INITIAL = 'storage/SET_INITIAL';
32
- const SET_FILTER = 'storage/SET_FILTER';
33
- const SET_USAGE_FILTER = 'storage/SET_USAGE_FILTER';
34
- const SET_VISIBLE_GROUPS = 'storage/SET_VISIBLE_GROUPS';
35
- const SET_STORAGE_TYPE = 'storage/SET_STORAGE_TYPE';
36
- const SET_NODES_UPTIME_FILTER = 'storage/SET_NODES_UPTIME_FILTER';
37
- const SET_DATA_WAS_NOT_LOADED = 'storage/SET_DATA_WAS_NOT_LOADED';
38
-
39
- const initialState = {
40
- loading: true,
41
- wasLoaded: false,
42
- filter: '',
43
- usageFilter: [],
44
- visible: VisibleEntities.Missing,
45
- nodesUptimeFilter: NodesUptimeFilterValues.All,
46
- type: StorageTypes.groups,
47
- };
48
-
49
- const storage = (state = initialState, action) => {
50
- switch (action.type) {
51
- case FETCH_STORAGE.REQUEST: {
52
- return {
53
- ...state,
54
- loading: true,
55
- };
56
- }
57
- case FETCH_STORAGE.SUCCESS: {
58
- return {
59
- ...state,
60
- data: action.data,
61
- loading: false,
62
- wasLoaded: true,
63
- error: undefined,
64
- };
65
- }
66
- case FETCH_STORAGE.FAILURE: {
67
- if (action.error?.isCancelled) {
68
- return state;
69
- }
70
-
71
- return {
72
- ...state,
73
- error: action.error,
74
- loading: false,
75
- wasLoaded: true,
76
- };
77
- }
78
- case SET_INITIAL: {
79
- return {
80
- ...initialState,
81
- };
82
- }
83
- case SET_FILTER: {
84
- return {
85
- ...state,
86
- filter: action.data,
87
- };
88
- }
89
- case SET_USAGE_FILTER: {
90
- return {
91
- ...state,
92
- usageFilter: action.data,
93
- };
94
- }
95
- case SET_VISIBLE_GROUPS: {
96
- return {
97
- ...state,
98
- visible: action.data,
99
- wasLoaded: false,
100
- error: undefined,
101
- };
102
- }
103
-
104
- case SET_NODES_UPTIME_FILTER: {
105
- return {
106
- ...state,
107
- nodesUptimeFilter: action.data,
108
- };
109
- }
110
- case SET_STORAGE_TYPE: {
111
- return {
112
- ...state,
113
- type: action.data,
114
- filter: '',
115
- usageFilter: [],
116
- wasLoaded: false,
117
- error: undefined,
118
- };
119
- }
120
- case SET_DATA_WAS_NOT_LOADED: {
121
- return {
122
- ...state,
123
- wasLoaded: false,
124
- };
125
- }
126
- default:
127
- return state;
128
- }
129
- };
130
-
131
- export function setInitialState() {
132
- return {
133
- type: SET_INITIAL,
134
- };
135
- }
136
-
137
- export function getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
138
- if (type === StorageTypes.nodes) {
139
- return createApiRequest({
140
- request: window.api.getNodes({tenant, filter, type: 'static'}, {concurrentId}),
141
- actions: FETCH_STORAGE,
142
- });
143
- }
144
-
145
- return createApiRequest({
146
- request: window.api.getStorageInfo({tenant, filter, nodeId}, {concurrentId}),
147
- actions: FETCH_STORAGE,
148
- });
149
- }
150
-
151
- export function setStorageType(value) {
152
- return {
153
- type: SET_STORAGE_TYPE,
154
- data: value,
155
- };
156
- }
157
-
158
- export function setStorageFilter(value) {
159
- return {
160
- type: SET_FILTER,
161
- data: value,
162
- };
163
- }
164
-
165
- export function setUsageFilter(value) {
166
- return {
167
- type: SET_USAGE_FILTER,
168
- data: value,
169
- };
170
- }
171
-
172
- export function setVisibleEntities(value) {
173
- return {
174
- type: SET_VISIBLE_GROUPS,
175
- data: value,
176
- };
177
- }
178
-
179
- export function setNodesUptimeFilter(value) {
180
- return {
181
- type: SET_NODES_UPTIME_FILTER,
182
- data: value,
183
- };
184
- }
185
-
186
- export const setDataWasNotLoaded = () => {
187
- return {
188
- type: SET_DATA_WAS_NOT_LOADED,
189
- };
190
- };
191
-
192
- export const getStoragePools = (state) => state.storage.data?.StoragePools;
193
- export const getStoragePoolsGroupsCount = (state) => ({
194
- total: state.storage.data?.TotalGroups || 0,
195
- found: state.storage.data?.FoundGroups || 0,
196
- });
197
- export const getStorageNodes = (state) => state.storage.data?.Nodes;
198
- export const getStorageNodesCount = (state) => ({
199
- total: state.storage.data?.TotalNodes || 0,
200
- found: state.storage.data?.FoundNodes || 0,
201
- });
202
- export const getStorageFilter = (state) => state.storage.filter;
203
- export const getUsageFilter = (state) => state.storage.usageFilter;
204
- export const getVisibleEntities = (state) => state.storage.visible;
205
- export const getNodesUptimeFilter = (state) => state.storage.nodesUptimeFilter;
206
- export const getStorageType = (state) => state.storage.type;
207
-
208
- const FLAGS_POINTS = {
209
- Green: 1,
210
- Yellow: 100,
211
- Orange: 10_000,
212
- Red: 1_000_000,
213
- };
214
- export const getFlatListStorageGroups = createSelector([getStoragePools], (storagePools) => {
215
- return _.reduce(
216
- storagePools,
217
- (acc, pool) => {
218
- const groups = _.reduce(
219
- pool.Groups,
220
- (acc, group) => {
221
- const missing = _.filter(group.VDisks, (v) => {
222
- return !v.Replicated || v.PDisk.State !== 'Normal' || v.VDiskState !== 'OK';
223
- }).length;
224
-
225
- const UsedSpaceFlag = _.reduce(
226
- group.VDisks,
227
- (acc, v) => {
228
- if (v.DiskSpace) {
229
- acc += FLAGS_POINTS[v.DiskSpace];
230
- }
231
- return acc;
232
- },
233
- 0,
234
- );
235
-
236
- const usedSpaceBytes = _.reduce(
237
- group.VDisks,
238
- (acc, vDisk) => {
239
- return acc + (Number(vDisk.AllocatedSize) || 0);
240
- },
241
- 0,
242
- );
243
- const limitSizeBytes = _.reduce(
244
- group.VDisks,
245
- (acc, vDisk) => {
246
- const {AvailableSize, AllocatedSize, PDisk} = vDisk;
247
- const available = (AvailableSize ?? PDisk?.AvailableSize) || 0;
248
- const allocated = AllocatedSize || 0;
249
-
250
- return acc + Number(available) + Number(allocated);
251
- },
252
- 0,
253
- );
254
- const readSpeedBytesPerSec = _.reduce(
255
- group.VDisks,
256
- (acc, vDisk) => {
257
- return acc + (Number(vDisk.ReadThroughput) || 0);
258
- },
259
- 0,
260
- );
261
- const writeSpeedBytesPerSec = _.reduce(
262
- group.VDisks,
263
- (acc, vDisk) => {
264
- return acc + (Number(vDisk.WriteThroughput) || 0);
265
- },
266
- 0,
267
- );
268
- const mediaType = group.VDisks?.reduce((type, vdisk) => {
269
- const currentType = getPDiskType(vdisk.PDisk || {});
270
- return currentType && (currentType === type || type === '')
271
- ? currentType
272
- : 'Mixed';
273
- }, '');
274
-
275
- // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
276
- const vDisks = group.VDisks?.map((vdisk) => ({
277
- ...vdisk,
278
- StoragePoolName: pool.Name,
279
- Donors: vdisk.Donors?.map((donor) => ({
280
- ...donor,
281
- StoragePoolName: pool.Name,
282
- })),
283
- }));
284
-
285
- return [
286
- ...acc,
287
- {
288
- ...group,
289
- VDisks: vDisks,
290
- Read: readSpeedBytesPerSec,
291
- Write: writeSpeedBytesPerSec,
292
- PoolName: pool.Name,
293
- Used: usedSpaceBytes,
294
- Limit: limitSizeBytes,
295
- Missing: missing,
296
- UsedSpaceFlag,
297
- Type: mediaType || null,
298
- },
299
- ];
300
- },
301
- [],
302
- );
303
- return [...acc, ...groups];
304
- },
305
- [],
306
- );
307
- });
308
-
309
- export const getFlatListStorageNodes = createSelector([getStorageNodes], (storageNodes) => {
310
- return _.map(storageNodes, (node) => {
311
- const systemState = node.SystemState ?? {};
312
- const missing = _.filter(node.PDisks, (p) => {
313
- return p.State !== 'Normal';
314
- }).length;
315
- return {
316
- NodeId: node.NodeId,
317
- SystemState: systemState.SystemState,
318
- DataCenter: systemState.DataCenter,
319
- Rack: systemState.Rack,
320
- Host: systemState.Host,
321
- Endpoints: systemState.Endpoints,
322
- uptime: calcUptime(systemState.StartTime),
323
- StartTime: systemState.StartTime,
324
- PDisks: node.PDisks,
325
- Missing: missing,
326
- };
327
- });
328
- });
329
-
330
- export const getVDisksForPDisk = createSelector(
331
- getStorageNodes,
332
- (_state, nodeId) => nodeId,
333
- (_state, _nodeId, pdiskId) => pdiskId,
334
- (storageNodes, nodeId, pdiskId) => {
335
- const targetNode = storageNodes?.find((node) => node.NodeId === nodeId);
336
- return targetNode?.VDisks?.filter((vdisk) => vdisk.PDiskId === pdiskId).map((data) => ({
337
- ...data,
338
- NodeId: nodeId,
339
- }));
340
- },
341
- );
342
-
343
- export const getFlatListStorage = createSelector(
344
- [getStorageType, getFlatListStorageGroups, getFlatListStorageNodes],
345
- (storageType, groupsList, nodesList) => {
346
- if (storageType === StorageTypes.groups) {
347
- return groupsList;
348
- }
349
- return nodesList;
350
- },
351
- );
352
-
353
- export const getVisibleEntitiesList = createSelector(
354
- [getVisibleEntities, getFlatListStorage],
355
- (visibleGroups, storageList) => {
356
- if (visibleGroups === VisibleEntities.All) {
357
- return storageList;
358
- } else if (visibleGroups === VisibleEntities.Missing) {
359
- return _.filter(storageList, (g) => g.Missing > 0);
360
- } else {
361
- return _.filter(storageList, (g) => g.UsedSpaceFlag > 100);
362
- }
363
- },
364
- );
365
-
366
- const filterByText = (entities, type, text) => {
367
- const cleanedFilter = text.trim().toLowerCase();
368
-
369
- if (!cleanedFilter) {
370
- return entities;
371
- }
372
-
373
- return entities.filter((entity) => {
374
- if (type === StorageTypes.groups) {
375
- return (
376
- entity.PoolName.toLowerCase().includes(cleanedFilter) ||
377
- entity.GroupID?.toString().includes(cleanedFilter)
378
- );
379
- }
380
-
381
- return (
382
- entity.NodeId.toString().includes(cleanedFilter) ||
383
- entity.Host.toLowerCase().includes(cleanedFilter)
384
- );
385
- });
386
- };
387
-
388
- const filterByUsage = (entities, usage) => {
389
- if (!Array.isArray(usage) || usage.length === 0) {
390
- return entities;
391
- }
392
-
393
- return entities.filter((entity) => {
394
- const entityUsage = getUsage(entity, 5);
395
- return usage.some((val) => Number(val) <= entityUsage && entityUsage < Number(val) + 5);
396
- });
397
- };
398
-
399
- export const getFilteredEntities = createSelector(
400
- [
401
- getStorageFilter,
402
- getUsageFilter,
403
- getStorageType,
404
- getNodesUptimeFilter,
405
- getVisibleEntitiesList,
406
- ],
407
- (textFilter, usageFilter, type, nodesUptimeFilter, entities) => {
408
- let result = entities;
409
- result = filterByText(result, type, textFilter);
410
- result = filterByUsage(result, usageFilter);
411
-
412
- if (type === StorageTypes.nodes) {
413
- result = filterNodesByUptime(result, nodesUptimeFilter);
414
- }
415
-
416
- return result;
417
- },
418
- );
419
-
420
- export const getUsageFilterOptions = createSelector(getVisibleEntitiesList, (entities) => {
421
- const items = {};
422
-
423
- entities.forEach((entity) => {
424
- const usage = getUsage(entity, 5);
425
-
426
- if (!Object.prototype.hasOwnProperty.call(items, usage)) {
427
- items[usage] = 0;
428
- }
429
-
430
- items[usage] += 1;
431
- });
432
-
433
- return Object.entries(items)
434
- .map(([threshold, count]) => ({threshold, count}))
435
- .sort((a, b) => b.threshold - a.threshold);
436
- });
437
-
438
- export default storage;
@@ -1,57 +0,0 @@
1
- import {GIGABYTE, KILOBYTE, MEGABYTE} from '../constants';
2
- import {isNumeric} from '../utils';
3
-
4
- import i18n from './i18n';
5
-
6
- const sizes = {
7
- b: {
8
- value: 1,
9
- label: i18n('b'),
10
- },
11
- kb: {
12
- value: KILOBYTE,
13
- label: i18n('kb'),
14
- },
15
- mb: {
16
- value: MEGABYTE,
17
- label: i18n('mb'),
18
- },
19
- gb: {
20
- value: GIGABYTE,
21
- label: i18n('gb'),
22
- },
23
- };
24
-
25
- export type IBytesSizes = keyof typeof sizes;
26
-
27
- interface FormatBytesArgs {
28
- value: number | string | undefined;
29
- size?: IBytesSizes;
30
- precision?: number;
31
- withLabel?: boolean;
32
- isSpeed?: boolean;
33
- }
34
-
35
- export const formatBytesCustom = ({
36
- value,
37
- size = 'mb',
38
- precision = 0,
39
- withLabel = true,
40
- isSpeed = false,
41
- }: FormatBytesArgs) => {
42
- if (!isNumeric(value)) {
43
- return '';
44
- }
45
-
46
- let result = (Number(value) / sizes[size].value).toFixed(precision);
47
-
48
- if (withLabel) {
49
- result += ` ${sizes[size].label}`;
50
-
51
- if (isSpeed) {
52
- result += i18n('perSecond');
53
- }
54
- }
55
-
56
- return result;
57
- };