ydb-embedded-ui 4.8.2 → 4.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +27 -0
- package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx +7 -4
- package/dist/components/EntityStatus/EntityStatus.js +3 -1
- package/dist/components/FormattedBytes/FormattedBytes.tsx +10 -0
- package/dist/components/FormattedBytes/utils.tsx +13 -0
- package/dist/components/FullNodeViewer/FullNodeViewer.tsx +73 -0
- package/dist/components/InfoViewer/formatters/table.ts +6 -5
- package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx +2 -2
- package/dist/components/ProblemFilter/ProblemFilter.tsx +2 -2
- package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx +4 -4
- package/dist/components/TruncatedQuery/{TruncatedQuery.js → TruncatedQuery.tsx} +10 -8
- package/dist/containers/AsideNavigation/AsideNavigation.tsx +6 -6
- package/dist/containers/Cluster/Cluster.tsx +10 -6
- package/dist/containers/Node/Node.tsx +3 -3
- package/dist/containers/Nodes/Nodes.tsx +3 -3
- package/dist/containers/Nodes/getNodesColumns.tsx +2 -2
- package/dist/containers/Storage/PDisk/PDisk.tsx +2 -7
- package/dist/containers/Storage/Storage.tsx +240 -0
- package/dist/containers/Storage/StorageGroups/StorageGroups.tsx +59 -57
- package/dist/containers/Storage/StorageNodes/StorageNodes.tsx +23 -25
- package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx +27 -0
- package/dist/containers/Storage/StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx +31 -0
- package/dist/containers/Storage/UsageFilter/UsageFilter.scss +1 -0
- package/dist/containers/Storage/UsageFilter/UsageFilter.tsx +17 -17
- package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +3 -3
- package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js +7 -4
- package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +0 -15
- package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx +10 -3
- package/dist/containers/Tenant/{Preview → Query/Preview}/Preview.scss +1 -1
- package/dist/containers/Tenant/Query/Preview/Preview.tsx +121 -0
- package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx +1 -1
- package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js +23 -51
- package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss +20 -15
- package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx +74 -27
- package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx +1 -1
- package/dist/containers/Tenant/Query/i18n/en.json +9 -2
- package/dist/containers/Tenant/Query/i18n/ru.json +9 -2
- package/dist/containers/Tenants/Tenants.tsx +269 -0
- package/dist/containers/UserSettings/i18n/en.json +1 -1
- package/dist/containers/UserSettings/i18n/ru.json +1 -1
- package/dist/services/api.ts +14 -16
- package/dist/store/reducers/executeQuery.ts +2 -3
- package/dist/store/reducers/explainQuery.ts +2 -2
- package/dist/store/reducers/index.ts +2 -2
- package/dist/store/reducers/{nodes.ts → nodes/nodes.ts} +33 -32
- package/dist/{types/store/nodes.ts → store/reducers/nodes/types.ts} +24 -27
- package/dist/store/reducers/partitions/types.ts +3 -3
- package/dist/store/reducers/settings/settings.ts +14 -4
- package/dist/store/reducers/settings/types.ts +3 -1
- package/dist/store/reducers/storage/constants.ts +10 -0
- package/dist/store/reducers/storage/selectors.ts +279 -0
- package/dist/store/reducers/storage/storage.ts +191 -0
- package/dist/store/reducers/storage/types.ts +92 -0
- package/dist/store/reducers/tenants/selectors.ts +46 -0
- package/dist/store/reducers/tenants/tenants.ts +21 -14
- package/dist/store/reducers/tenants/types.ts +20 -5
- package/dist/store/reducers/tenants/utils.ts +68 -0
- package/dist/types/additionalProps.ts +8 -0
- package/dist/types/api/storage.ts +1 -1
- package/dist/types/store/query.ts +5 -6
- package/dist/types/store/topic.ts +3 -3
- package/dist/utils/bytesParsers/__test__/formatBytes.test.ts +38 -0
- package/dist/utils/bytesParsers/convertBytesObjectToSpeed.ts +2 -2
- package/dist/utils/bytesParsers/formatBytes.ts +132 -0
- package/dist/utils/bytesParsers/i18n/en.json +1 -0
- package/dist/utils/bytesParsers/i18n/ru.json +1 -0
- package/dist/utils/bytesParsers/index.ts +1 -1
- package/dist/utils/constants.ts +1 -0
- package/dist/utils/index.js +5 -10
- package/dist/utils/nodes.ts +2 -2
- package/dist/utils/numeral.ts +8 -0
- package/dist/utils/query.ts +12 -0
- package/package.json +1 -1
- package/dist/components/FullNodeViewer/FullNodeViewer.js +0 -89
- package/dist/containers/Node/NodeOverview/NodeOverview.scss +0 -0
- package/dist/containers/Node/NodeOverview/NodeOverview.tsx +0 -21
- package/dist/containers/Storage/Storage.js +0 -372
- package/dist/containers/Tenant/Preview/Preview.js +0 -168
- package/dist/containers/Tenant/Query/QueryEditorControls/OldQueryEditorControls.tsx +0 -90
- package/dist/containers/Tenant/Query/QueryEditorControls/shared.ts +0 -18
- package/dist/containers/Tenants/Tenants.js +0 -363
- package/dist/store/reducers/storage.js +0 -438
- package/dist/utils/bytesParsers/formatBytesCustom.ts +0 -57
@@ -0,0 +1,132 @@
|
|
1
|
+
import {formatNumber} from '..';
|
2
|
+
import {GIGABYTE, KILOBYTE, MEGABYTE, TERABYTE} from '../constants';
|
3
|
+
import {isNumeric} from '../utils';
|
4
|
+
|
5
|
+
import i18n from './i18n';
|
6
|
+
|
7
|
+
const sizes = {
|
8
|
+
b: {
|
9
|
+
value: 1,
|
10
|
+
label: i18n('b'),
|
11
|
+
},
|
12
|
+
kb: {
|
13
|
+
value: KILOBYTE,
|
14
|
+
label: i18n('kb'),
|
15
|
+
},
|
16
|
+
mb: {
|
17
|
+
value: MEGABYTE,
|
18
|
+
label: i18n('mb'),
|
19
|
+
},
|
20
|
+
gb: {
|
21
|
+
value: GIGABYTE,
|
22
|
+
label: i18n('gb'),
|
23
|
+
},
|
24
|
+
tb: {
|
25
|
+
value: TERABYTE,
|
26
|
+
label: i18n('tb'),
|
27
|
+
},
|
28
|
+
};
|
29
|
+
|
30
|
+
export type BytesSizes = keyof typeof sizes;
|
31
|
+
|
32
|
+
/**
|
33
|
+
* This function is needed to keep more than 3 digits of the same size.
|
34
|
+
*
|
35
|
+
* @param significantDigits - number of digits above 3
|
36
|
+
* @returns size to format value to get required number of digits
|
37
|
+
*
|
38
|
+
* By default value converted to the next size when it's above 1000,
|
39
|
+
* so we have 900mb and 1gb. To extend it additional significantDigits could be set
|
40
|
+
*
|
41
|
+
* significantDigits value added above default 3
|
42
|
+
*
|
43
|
+
* significantDigits = 1 - 9 000 mb and 10 gb
|
44
|
+
*
|
45
|
+
* significantDigits = 2 - 90 000 mb and 100 gb
|
46
|
+
*
|
47
|
+
* significantDigits = 3 - 900 000 mb and 1000 gb
|
48
|
+
*/
|
49
|
+
const getSizeWithSignificantDigits = (value: number, significantDigits: number) => {
|
50
|
+
const multiplier = 10 ** significantDigits;
|
51
|
+
|
52
|
+
const tbLevel = sizes.tb.value * multiplier;
|
53
|
+
const gbLevel = sizes.gb.value * multiplier;
|
54
|
+
const mbLevel = sizes.mb.value * multiplier;
|
55
|
+
const kbLevel = sizes.kb.value * multiplier;
|
56
|
+
|
57
|
+
let size: BytesSizes = 'b';
|
58
|
+
|
59
|
+
if (value >= kbLevel) {
|
60
|
+
size = 'kb';
|
61
|
+
}
|
62
|
+
if (value >= mbLevel) {
|
63
|
+
size = 'mb';
|
64
|
+
}
|
65
|
+
if (value >= gbLevel) {
|
66
|
+
size = 'gb';
|
67
|
+
}
|
68
|
+
if (value >= tbLevel) {
|
69
|
+
size = 'tb';
|
70
|
+
}
|
71
|
+
|
72
|
+
return size;
|
73
|
+
};
|
74
|
+
|
75
|
+
interface FormatToSizeArgs {
|
76
|
+
value: number;
|
77
|
+
size?: BytesSizes;
|
78
|
+
precision?: number;
|
79
|
+
}
|
80
|
+
|
81
|
+
const formatToSize = ({value, size = 'mb', precision = 0}: FormatToSizeArgs) => {
|
82
|
+
const result = (Number(value) / sizes[size].value).toFixed(precision);
|
83
|
+
|
84
|
+
return formatNumber(result);
|
85
|
+
};
|
86
|
+
|
87
|
+
const addSizeLabel = (result: string, size: BytesSizes) => {
|
88
|
+
return result + ` ${sizes[size].label}`;
|
89
|
+
};
|
90
|
+
|
91
|
+
const addSpeedLabel = (result: string, size: BytesSizes) => {
|
92
|
+
return addSizeLabel(result, size) + i18n('perSecond');
|
93
|
+
};
|
94
|
+
|
95
|
+
export type FormatBytesArgs = Omit<FormatToSizeArgs, 'value'> & {
|
96
|
+
value: number | string | undefined | null;
|
97
|
+
withSpeedLabel?: boolean;
|
98
|
+
withSizeLabel?: boolean;
|
99
|
+
significantDigits?: number;
|
100
|
+
};
|
101
|
+
|
102
|
+
/**
|
103
|
+
* @param significantDigits - number of digits above 3
|
104
|
+
*/
|
105
|
+
export const formatBytes = ({
|
106
|
+
value,
|
107
|
+
size,
|
108
|
+
withSpeedLabel = false,
|
109
|
+
withSizeLabel = true,
|
110
|
+
significantDigits = 0,
|
111
|
+
...params
|
112
|
+
}: FormatBytesArgs) => {
|
113
|
+
if (!isNumeric(value)) {
|
114
|
+
return '';
|
115
|
+
}
|
116
|
+
|
117
|
+
const numValue = Number(value);
|
118
|
+
|
119
|
+
const sizeToConvert = size ?? getSizeWithSignificantDigits(numValue, significantDigits);
|
120
|
+
|
121
|
+
const result = formatToSize({value: numValue, size: sizeToConvert, ...params});
|
122
|
+
|
123
|
+
if (withSpeedLabel) {
|
124
|
+
return addSpeedLabel(result, sizeToConvert);
|
125
|
+
}
|
126
|
+
|
127
|
+
if (withSizeLabel) {
|
128
|
+
return addSizeLabel(result, sizeToConvert);
|
129
|
+
}
|
130
|
+
|
131
|
+
return result;
|
132
|
+
};
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from './
|
1
|
+
export * from './formatBytes';
|
2
2
|
export * from './convertBytesObjectToSpeed';
|
package/dist/utils/constants.ts
CHANGED
@@ -105,6 +105,7 @@ export const DEFAULT_TABLE_SETTINGS = {
|
|
105
105
|
} as const;
|
106
106
|
|
107
107
|
export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
|
108
|
+
export const LAST_USED_QUERY_ACTION_KEY = 'last_used_query_action';
|
108
109
|
|
109
110
|
export const PARTITIONS_HIDDEN_COLUMNS_KEY = 'partitionsHiddenColumns';
|
110
111
|
|
package/dist/utils/index.js
CHANGED
@@ -1,13 +1,8 @@
|
|
1
|
-
import numeral from 'numeral';
|
2
|
-
import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
|
3
|
-
|
4
1
|
import {dateTimeParse} from '@gravity-ui/date-utils';
|
5
2
|
|
6
|
-
import {i18n} from './i18n';
|
7
3
|
import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
|
8
4
|
import {isNumeric} from './utils';
|
9
|
-
|
10
|
-
numeral.locale(i18n.lang);
|
5
|
+
import {configuredNumeral} from './numeral';
|
11
6
|
|
12
7
|
// Here you can't control displayed size and precision
|
13
8
|
// If you need more custom format, use formatBytesCustom instead
|
@@ -17,7 +12,7 @@ export const formatBytes = (bytes) => {
|
|
17
12
|
}
|
18
13
|
|
19
14
|
// by agreement, display byte values in decimal scale
|
20
|
-
return
|
15
|
+
return configuredNumeral(bytes).format('0 b');
|
21
16
|
};
|
22
17
|
|
23
18
|
export const formatBps = (bytes) => {
|
@@ -45,7 +40,7 @@ export const formatUptime = (seconds) => {
|
|
45
40
|
const days = Math.floor(seconds / DAY_IN_SECONDS);
|
46
41
|
const remain = seconds % DAY_IN_SECONDS;
|
47
42
|
|
48
|
-
const uptime = [days && `${days}d`,
|
43
|
+
const uptime = [days && `${days}d`, configuredNumeral(remain).format('00:00:00')]
|
49
44
|
.filter(Boolean)
|
50
45
|
.join(' ');
|
51
46
|
|
@@ -76,7 +71,7 @@ export const formatNumber = (number) => {
|
|
76
71
|
return '';
|
77
72
|
}
|
78
73
|
|
79
|
-
return
|
74
|
+
return configuredNumeral(number).format();
|
80
75
|
};
|
81
76
|
|
82
77
|
export const formatCPU = (value) => {
|
@@ -84,7 +79,7 @@ export const formatCPU = (value) => {
|
|
84
79
|
return '';
|
85
80
|
}
|
86
81
|
|
87
|
-
return
|
82
|
+
return configuredNumeral(value / 1000000).format('0.00');
|
88
83
|
};
|
89
84
|
|
90
85
|
export const formatDateTime = (value) => {
|
package/dist/utils/nodes.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import type {TSystemStateInfo} from '../types/api/nodes';
|
2
2
|
import type {TNodeInfo} from '../types/api/nodesList';
|
3
|
-
import type {
|
3
|
+
import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
|
4
4
|
import type {NodesMap} from '../types/store/nodesList';
|
5
5
|
import {EFlag} from '../types/api/enums';
|
6
6
|
|
@@ -14,7 +14,7 @@ export const NodesUptimeFilterTitles = {
|
|
14
14
|
[NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
|
15
15
|
};
|
16
16
|
|
17
|
-
export const isUnavailableNode = (node:
|
17
|
+
export const isUnavailableNode = (node: NodesPreparedEntity | TSystemStateInfo) =>
|
18
18
|
!node.SystemState || node.SystemState === EFlag.Grey;
|
19
19
|
|
20
20
|
export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;
|
package/dist/utils/query.ts
CHANGED
@@ -9,6 +9,18 @@ import type {
|
|
9
9
|
} from '../types/api/query';
|
10
10
|
import type {IQueryResult} from '../types/store/query';
|
11
11
|
|
12
|
+
export const QUERY_ACTIONS = {
|
13
|
+
execute: 'execute',
|
14
|
+
explain: 'explain',
|
15
|
+
} as const;
|
16
|
+
|
17
|
+
export const QUERY_MODES = {
|
18
|
+
scan: 'scan',
|
19
|
+
script: 'script',
|
20
|
+
data: 'data',
|
21
|
+
query: 'query',
|
22
|
+
} as const;
|
23
|
+
|
12
24
|
// eslint-disable-next-line complexity
|
13
25
|
export const getColumnType = (type: string) => {
|
14
26
|
switch (type.replace(/\?$/, '')) {
|
package/package.json
CHANGED
@@ -1,89 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import cn from 'bem-cn-lite';
|
3
|
-
import PropTypes from 'prop-types';
|
4
|
-
|
5
|
-
import InfoViewer from '../InfoViewer/InfoViewer';
|
6
|
-
import ProgressViewer from '../ProgressViewer/ProgressViewer';
|
7
|
-
import {PoolUsage} from '../PoolUsage/PoolUsage';
|
8
|
-
|
9
|
-
import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
|
10
|
-
import {calcUptime} from '../../utils';
|
11
|
-
|
12
|
-
import './FullNodeViewer.scss';
|
13
|
-
|
14
|
-
const b = cn('full-node-viewer');
|
15
|
-
|
16
|
-
class FullNodeViewer extends React.Component {
|
17
|
-
static propTypes = {
|
18
|
-
className: PropTypes.string,
|
19
|
-
node: PropTypes.object.isRequired,
|
20
|
-
backend: PropTypes.string,
|
21
|
-
singleClusterMode: PropTypes.bool,
|
22
|
-
};
|
23
|
-
|
24
|
-
static defaultProps = {
|
25
|
-
className: '',
|
26
|
-
};
|
27
|
-
|
28
|
-
render() {
|
29
|
-
const {node, className} = this.props;
|
30
|
-
|
31
|
-
const endpointsInfo = node.Endpoints?.map(({Name, Address}) => ({
|
32
|
-
label: Name,
|
33
|
-
value: Address,
|
34
|
-
}));
|
35
|
-
|
36
|
-
const commonInfo = [
|
37
|
-
{label: 'Version', value: node.Version},
|
38
|
-
{label: 'Uptime', value: calcUptime(node.StartTime)},
|
39
|
-
{label: 'DC', value: node.DataCenterDescription},
|
40
|
-
{label: 'Rack', value: node.Rack},
|
41
|
-
];
|
42
|
-
|
43
|
-
const averageInfo = node.LoadAverage.map((load, loadIndex) => ({
|
44
|
-
label: LOAD_AVERAGE_TIME_INTERVALS[`${loadIndex}`],
|
45
|
-
value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
|
46
|
-
}));
|
47
|
-
|
48
|
-
return (
|
49
|
-
<div className={`${b()} ${className}`}>
|
50
|
-
{node ? (
|
51
|
-
<div className={b('common-info')}>
|
52
|
-
<div>
|
53
|
-
<div className={b('section-title')}>Pools</div>
|
54
|
-
<div className={b('section', {pools: true})}>
|
55
|
-
{node.PoolStats.map((pool, poolIndex) => (
|
56
|
-
<PoolUsage key={poolIndex} data={pool} />
|
57
|
-
))}
|
58
|
-
</div>
|
59
|
-
</div>
|
60
|
-
|
61
|
-
{endpointsInfo && endpointsInfo.length && (
|
62
|
-
<InfoViewer
|
63
|
-
title="Endpoints"
|
64
|
-
className={b('section')}
|
65
|
-
info={endpointsInfo}
|
66
|
-
/>
|
67
|
-
)}
|
68
|
-
|
69
|
-
<InfoViewer
|
70
|
-
title="Common info"
|
71
|
-
className={b('section')}
|
72
|
-
info={commonInfo}
|
73
|
-
/>
|
74
|
-
|
75
|
-
<InfoViewer
|
76
|
-
title="Load average"
|
77
|
-
className={b('section', {average: true})}
|
78
|
-
info={averageInfo}
|
79
|
-
/>
|
80
|
-
</div>
|
81
|
-
) : (
|
82
|
-
<div className="error">no data</div>
|
83
|
-
)}
|
84
|
-
</div>
|
85
|
-
);
|
86
|
-
}
|
87
|
-
}
|
88
|
-
|
89
|
-
export default FullNodeViewer;
|
File without changes
|
@@ -1,21 +0,0 @@
|
|
1
|
-
|
2
|
-
//@ts-ignore
|
3
|
-
import FullNodeViewer from '../../../components/FullNodeViewer/FullNodeViewer';
|
4
|
-
import {backend} from '../../../store';
|
5
|
-
|
6
|
-
interface NodeOverviewProps {
|
7
|
-
node: any;
|
8
|
-
className?: string;
|
9
|
-
}
|
10
|
-
|
11
|
-
function NodeOverview({node, className}: NodeOverviewProps) {
|
12
|
-
return (
|
13
|
-
<FullNodeViewer
|
14
|
-
node={node}
|
15
|
-
backend={backend}
|
16
|
-
className={className}
|
17
|
-
/>
|
18
|
-
);
|
19
|
-
}
|
20
|
-
|
21
|
-
export default NodeOverview;
|