ydb-embedded-ui 4.13.0 → 4.15.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 (71) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/components/Tablet/Tablet.scss +1 -16
  3. package/dist/components/Tablet/Tablet.tsx +5 -5
  4. package/dist/components/TabletIcon/TabletIcon.scss +17 -0
  5. package/dist/components/TabletIcon/TabletIcon.tsx +18 -0
  6. package/dist/containers/App/App.js +1 -1
  7. package/dist/containers/AsideNavigation/AsideNavigation.tsx +1 -1
  8. package/dist/containers/Authentication/Authentication.tsx +1 -1
  9. package/dist/containers/Header/Header.scss +2 -0
  10. package/dist/containers/Header/Header.tsx +2 -7
  11. package/dist/containers/Header/{breadcrumbs.ts → breadcrumbs.tsx} +19 -8
  12. package/dist/containers/Nodes/Nodes.tsx +53 -16
  13. package/dist/containers/Nodes/getNodesColumns.tsx +31 -13
  14. package/dist/containers/Storage/Storage.tsx +64 -32
  15. package/dist/containers/Storage/StorageGroups/StorageGroups.tsx +56 -73
  16. package/dist/containers/Storage/StorageNodes/StorageNodes.tsx +33 -43
  17. package/dist/containers/Storage/utils/index.ts +3 -3
  18. package/dist/containers/Tablet/Tablet.tsx +9 -3
  19. package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.scss +8 -0
  20. package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.tsx +13 -1
  21. package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss +3 -1
  22. package/dist/containers/Tenant/Query/i18n/en.json +6 -4
  23. package/dist/containers/Tenant/Query/i18n/ru.json +6 -4
  24. package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx +4 -0
  25. package/dist/containers/Tenant/i18n/en.json +3 -0
  26. package/dist/containers/Tenant/i18n/ru.json +3 -0
  27. package/dist/containers/Tenant/utils/queryTemplates.ts +89 -0
  28. package/dist/containers/Tenant/utils/schema.ts +1 -1
  29. package/dist/containers/Tenant/utils/schemaActions.ts +30 -54
  30. package/dist/containers/Tenant/utils/schemaControls.tsx +69 -0
  31. package/dist/containers/UserSettings/i18n/en.json +3 -0
  32. package/dist/containers/UserSettings/i18n/ru.json +3 -0
  33. package/dist/containers/UserSettings/settings.ts +12 -1
  34. package/dist/{reportWebVitals.js → reportWebVitals.ts} +3 -1
  35. package/dist/services/api.ts +30 -16
  36. package/dist/store/reducers/{authentication.js → authentication/authentication.ts} +14 -7
  37. package/dist/store/reducers/authentication/types.ts +15 -0
  38. package/dist/store/reducers/describe.ts +1 -16
  39. package/dist/store/reducers/header/types.ts +2 -0
  40. package/dist/store/reducers/index.ts +1 -1
  41. package/dist/store/reducers/nodes/nodes.ts +23 -6
  42. package/dist/store/reducers/nodes/selectors.ts +2 -2
  43. package/dist/store/reducers/nodes/types.ts +15 -5
  44. package/dist/store/reducers/settings/settings.ts +5 -0
  45. package/dist/store/reducers/storage/selectors.ts +50 -150
  46. package/dist/store/reducers/storage/storage.ts +73 -25
  47. package/dist/store/reducers/storage/types.ts +49 -17
  48. package/dist/store/reducers/storage/utils.ts +207 -0
  49. package/dist/store/utils.ts +1 -1
  50. package/dist/types/api/compute.ts +0 -12
  51. package/dist/types/api/error.ts +4 -0
  52. package/dist/types/api/nodes.ts +0 -12
  53. package/dist/types/api/storage.ts +32 -4
  54. package/dist/types/window.d.ts +1 -0
  55. package/dist/utils/constants.ts +3 -0
  56. package/dist/utils/filters.ts +23 -0
  57. package/dist/utils/hooks/index.ts +4 -0
  58. package/dist/utils/hooks/useNodesRequestParams.ts +46 -0
  59. package/dist/utils/hooks/useStorageRequestParams.ts +28 -0
  60. package/dist/utils/hooks/useTableSort.ts +37 -0
  61. package/dist/utils/nodes.ts +25 -0
  62. package/dist/utils/storage.ts +31 -3
  63. package/package.json +2 -6
  64. package/dist/HOCS/WithSearch/WithSearch.js +0 -26
  65. package/dist/HOCS/index.js +0 -1
  66. package/dist/components/Hotkey/Hotkey.js +0 -102
  67. package/dist/components/Pagination/Pagination.js +0 -63
  68. package/dist/components/Pagination/Pagination.scss +0 -28
  69. package/dist/types/store/storage.ts +0 -12
  70. /package/dist/{index.js → index.tsx} +0 -0
  71. /package/dist/utils/{monaco.js → monaco.ts} +0 -0
@@ -1,12 +1,40 @@
1
1
  import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
2
- import type {IStoragePoolGroup} from '../types/store/storage';
2
+ import type {ValueOf} from '../types/common';
3
3
 
4
4
  export const isFullVDiskData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
5
5
  'VDiskId' in disk;
6
6
 
7
- export const getUsage = (data: IStoragePoolGroup, step = 1) => {
7
+ interface EntityWithUsage {
8
+ Used: number;
9
+ Limit: number;
10
+ }
11
+
12
+ export const getUsage = <T extends EntityWithUsage>(data: T, step = 1) => {
8
13
  // if limit is 0, display 0
9
- const usage = Math.round((data.Used * 100) / data.Limit) || 0;
14
+ const usage = data.Limit ? (data.Used * 100) / data.Limit : 0;
10
15
 
11
16
  return Math.floor(usage / step) * step;
12
17
  };
18
+
19
+ /**
20
+ * Values to sort /storage v2 response
21
+ *
22
+ * Source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_storage.h
23
+ */
24
+ export const STORAGE_SORT_VALUES = {
25
+ PoolName: 'PoolName',
26
+ Kind: 'Kind',
27
+ Erasure: 'Erasure',
28
+ Degraded: 'Degraded',
29
+ Usage: 'Usage',
30
+ GroupId: 'GroupId',
31
+ Used: 'Used',
32
+ Limit: 'Limit',
33
+ Read: 'Read',
34
+ Write: 'Write',
35
+ } as const;
36
+
37
+ export type StorageSortValue = ValueOf<typeof STORAGE_SORT_VALUES>;
38
+
39
+ export const isSortableStorageProperty = (value: string): value is StorageSortValue =>
40
+ Object.values(STORAGE_SORT_VALUES).includes(value as StorageSortValue);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-embedded-ui",
3
- "version": "4.13.0",
3
+ "version": "4.15.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -20,7 +20,6 @@
20
20
  "copy-to-clipboard": "^3.3.3",
21
21
  "history": "4.10.1",
22
22
  "js-cookie": "2.2.1",
23
- "keymaster": "1.6.2",
24
23
  "lodash": "4.17.11",
25
24
  "monaco-editor": "0.24.0",
26
25
  "numeral": "2.0.6",
@@ -33,14 +32,13 @@
33
32
  "react-router-dom": "5.3.0",
34
33
  "react-scripts": "5.0.1",
35
34
  "react-split": "2.0.14",
36
- "react-transition-group": "4.4.2",
37
35
  "redux": "4.0.1",
38
36
  "redux-location-state": "2.6.0",
39
37
  "redux-thunk": "2.3.0",
40
38
  "reselect": "4.1.6",
41
39
  "sass": "1.32.8",
42
40
  "web-vitals": "1.1.2",
43
- "ydb-ui-components": "^3.2.2"
41
+ "ydb-ui-components": "^3.3.1"
44
42
  },
45
43
  "scripts": {
46
44
  "start": "react-app-rewired start",
@@ -123,8 +121,6 @@
123
121
  "@types/react-dom": "^17.0.11",
124
122
  "@types/react-router": "^5.1.17",
125
123
  "@types/react-router-dom": "^5.3.2",
126
- "@types/react-transition-group": "^4.4.4",
127
- "@types/react-virtualized-auto-sizer": "^1.0.1",
128
124
  "copyfiles": "^2.4.1",
129
125
  "eslint-config-prettier": "^8.3.0",
130
126
  "husky": "^7.0.4",
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
-
3
- export const withSearch = (Component) => {
4
- class HOC extends React.Component {
5
- state = {
6
- searchQuery: '',
7
- };
8
-
9
- handleSearchQuery = (searchQuery) => {
10
- this.setState({searchQuery});
11
- };
12
-
13
- render() {
14
- const {searchQuery} = this.state;
15
- return (
16
- <Component
17
- {...this.props}
18
- searchQuery={searchQuery}
19
- handleSearchQuery={this.handleSearchQuery}
20
- />
21
- );
22
- }
23
- }
24
-
25
- return HOC;
26
- };
@@ -1 +0,0 @@
1
- export * from './WithSearch/WithSearch';
@@ -1,102 +0,0 @@
1
- import {Component} from 'react';
2
- import PropTypes from 'prop-types';
3
-
4
- import key from 'keymaster';
5
-
6
- const propTypes = {
7
- settings: PropTypes.arrayOf(
8
- PropTypes.shape({
9
- keys: PropTypes.string.isRequired,
10
- handler: PropTypes.func.isRequired,
11
- scope: PropTypes.string,
12
- preventDefault: PropTypes.bool,
13
- }),
14
- ).isRequired,
15
- };
16
-
17
- function eventOnInput(evt) {
18
- const tagName = (evt.target || evt.srcElement).tagName;
19
-
20
- return /^(INPUT|TEXTAREA|SELECT)$/.test(tagName);
21
- }
22
-
23
- export default class Hotkey extends Component {
24
- componentDidMount() {
25
- const {settings} = this.props;
26
-
27
- if (!key) {
28
- return;
29
- }
30
-
31
- this.preparedSettings = this.prepareSettings(settings);
32
-
33
- // To use hotkeys inside inputs we need to specify scope, other events are filtered.
34
- key.filter = function (evt) {
35
- const currentScope = key.getScope();
36
-
37
- return !(eventOnInput(evt) && currentScope === 'all');
38
- };
39
-
40
- this.preparedSettings.forEach((setting) => {
41
- this.bindKey(setting.combo, setting.scope, setting.handler, setting.preventDefault);
42
- });
43
- }
44
-
45
- componentWillUnmount() {
46
- if (!key) {
47
- return;
48
- }
49
-
50
- this.preparedSettings.forEach((setting) => {
51
- this.unbindKey(setting.combo, setting.scope);
52
- });
53
- }
54
-
55
- prepareSettings(settings) {
56
- const preparedSettings = [];
57
-
58
- settings.forEach((item) => {
59
- const keyCombinations = item.keys.split(/\s*,\s*/);
60
- const scopes = item.scope.split(/\s*,\s*/);
61
- const preventDefault =
62
- typeof item.preventDefault !== 'undefined' ? item.preventDefault : true;
63
-
64
- keyCombinations.forEach((combo) => {
65
- scopes.forEach((scope) => {
66
- if (typeof item.handler === 'function') {
67
- preparedSettings.push({
68
- combo: combo,
69
- scope: scope,
70
- handler: item.handler,
71
- preventDefault: preventDefault,
72
- });
73
- }
74
- });
75
- });
76
- });
77
-
78
- return preparedSettings;
79
- }
80
-
81
- bindKey(combination, scope, handler, preventDefault) {
82
- key(combination, scope, (evt, shortcut) => {
83
- if (key.getScope() === shortcut.scope) {
84
- handler(evt, shortcut);
85
-
86
- if (preventDefault) {
87
- evt.preventDefault();
88
- }
89
- }
90
- });
91
- }
92
-
93
- unbindKey(combination, scope) {
94
- key.unbind(combination, scope);
95
- }
96
-
97
- render() {
98
- return null;
99
- }
100
- }
101
-
102
- Hotkey.propTypes = propTypes;
@@ -1,63 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import cn from 'bem-cn-lite';
4
- import {Button} from '@gravity-ui/uikit';
5
- import {Icon} from '../Icon';
6
- import Hotkey from '../Hotkey/Hotkey';
7
-
8
- import './Pagination.scss';
9
-
10
- const b = cn('elements-pagination');
11
-
12
- const paginationControlComponent = PropTypes.shape({
13
- handler: PropTypes.func,
14
- disabled: PropTypes.bool,
15
- hotkey: PropTypes.string,
16
- hotkeyScope: PropTypes.string,
17
- hotkeyHandler: PropTypes.func,
18
- tooltip: PropTypes.string,
19
- }).isRequired;
20
-
21
- export default class Pagination extends React.Component {
22
- static propTypes = {
23
- previous: paginationControlComponent,
24
- next: paginationControlComponent,
25
- };
26
-
27
- renderComponent(name, control) {
28
- const hotkeySettings = [
29
- {
30
- keys: control.hotkey,
31
- scope: control.hotkeyScope,
32
- handler: control.hotkeyHandler,
33
- },
34
- ];
35
-
36
- return (
37
- <React.Fragment>
38
- <Button
39
- view="outlined"
40
- onClick={control.handler}
41
- disabled={control.disabled}
42
- title={control.tooltip}
43
- className={b('control')}
44
- >
45
- <Icon name={name} viewBox="0 0 6 11" width="6" height="11" />
46
- </Button>
47
- <Hotkey settings={hotkeySettings} />
48
- </React.Fragment>
49
- );
50
- }
51
-
52
- render() {
53
- const {previous, next} = this.props;
54
-
55
- return (
56
- <div className={b()}>
57
- {this.renderComponent('previous', previous)}
58
- <div className={b('divider')} />
59
- {this.renderComponent('next', next)}
60
- </div>
61
- );
62
- }
63
- }
@@ -1,28 +0,0 @@
1
- .elements-pagination {
2
- display: flex;
3
-
4
- padding-left: 1px;
5
-
6
- &__divider {
7
- border-left: 1px solid var(--yc-color-line-generic);
8
- }
9
-
10
- &__control {
11
- display: flex;
12
- align-items: center;
13
-
14
- margin: 0 -1px;
15
- }
16
-
17
- &__icon {
18
- display: flex;
19
- justify-content: center;
20
- align-items: center;
21
-
22
- color: var(--yc-color-text-primary);
23
- }
24
-
25
- &__control:hover {
26
- z-index: 5;
27
- }
28
- }
@@ -1,12 +0,0 @@
1
- import type {TBSGroupStateInfo} from '../api/storage';
2
-
3
- export interface IStoragePoolGroup extends TBSGroupStateInfo {
4
- Read: number;
5
- Write: number;
6
- PoolName?: string;
7
- Used: number;
8
- Limit: number;
9
- Missing: number;
10
- UsedSpaceFlag: number;
11
- Type: string | null;
12
- }
File without changes
File without changes