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.
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
@@ -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
+ };
@@ -3,5 +3,6 @@
3
3
  "kb": "KB",
4
4
  "mb": "MB",
5
5
  "gb": "GB",
6
+ "tb": "TB",
6
7
  "perSecond": "/s"
7
8
  }
@@ -3,5 +3,6 @@
3
3
  "kb": "КБ",
4
4
  "mb": "МБ",
5
5
  "gb": "ГБ",
6
+ "tb": "ТБ",
6
7
  "perSecond": "/с"
7
8
  }
@@ -1,2 +1,2 @@
1
- export * from './formatBytesCustom';
1
+ export * from './formatBytes';
2
2
  export * from './convertBytesObjectToSpeed';
@@ -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
 
@@ -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 numeral(bytes).format('0 b');
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`, numeral(remain).format('00:00:00')]
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 numeral(number).format();
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 numeral(value / 1000000).format('0.00');
82
+ return configuredNumeral(value / 1000000).format('0.00');
88
83
  };
89
84
 
90
85
  export const formatDateTime = (value) => {
@@ -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 {INodesPreparedEntity} from '../types/store/nodes';
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: INodesPreparedEntity | TSystemStateInfo) =>
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'>;
@@ -0,0 +1,8 @@
1
+ import numeral from 'numeral';
2
+ import 'numeral/locales'; // Without this numeral will throw an error when using not 'en' locale
3
+
4
+ import {i18n} from './i18n';
5
+
6
+ numeral.locale(i18n.lang);
7
+
8
+ export const configuredNumeral = numeral;
@@ -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,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-embedded-ui",
3
- "version": "4.8.2",
3
+ "version": "4.10.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -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;
@@ -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;