ydb-embedded-ui 2.3.0 → 2.4.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 (52) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/components/Errors/403/AccessDenied.tsx +19 -0
  3. package/dist/components/Errors/403/index.ts +1 -0
  4. package/dist/components/Errors/i18n/en.json +4 -0
  5. package/dist/components/Errors/i18n/index.ts +11 -0
  6. package/dist/components/Errors/i18n/ru.json +4 -0
  7. package/dist/components/QueryResultTable/QueryResultTable.tsx +16 -21
  8. package/dist/{containers/Storage/StorageFilter/StorageFilter.tsx → components/Search/Search.tsx} +22 -22
  9. package/dist/components/Search/index.ts +1 -0
  10. package/dist/containers/Nodes/Nodes.js +5 -0
  11. package/dist/containers/Storage/Storage.js +11 -3
  12. package/dist/containers/TabletsFilters/TabletsFilters.js +5 -0
  13. package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.scss +6 -0
  14. package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx +82 -0
  15. package/dist/containers/Tenant/Diagnostics/Consumers/i18n/en.json +6 -0
  16. package/dist/containers/Tenant/Diagnostics/Consumers/i18n/index.ts +11 -0
  17. package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json +6 -0
  18. package/dist/containers/Tenant/Diagnostics/Consumers/index.ts +1 -0
  19. package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +4 -0
  20. package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts +15 -8
  21. package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/Details.tsx +55 -0
  22. package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/index.ts +1 -0
  23. package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss +5 -5
  24. package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx +16 -6
  25. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/{IssueViewer.scss → IssueTree.scss} +3 -54
  26. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTree.tsx +87 -0
  27. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss +50 -0
  28. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx +25 -0
  29. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/index.ts +1 -0
  30. package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/Preview.tsx +13 -16
  31. package/dist/containers/Tenant/Diagnostics/Healthcheck/{IssuePreview/IssuePreview.tsx → Preview/PreviewItem/PreviewItem.tsx} +6 -8
  32. package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/PreviewItem/index.ts +1 -0
  33. package/dist/containers/Tenant/Preview/Preview.scss +6 -0
  34. package/dist/containers/Tenant/QueryEditor/QueryEditor.js +1 -9
  35. package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss +2 -2
  36. package/dist/containers/Tenant/Tenant.tsx +2 -7
  37. package/dist/store/reducers/describe.ts +71 -0
  38. package/dist/store/reducers/healthcheckInfo.ts +123 -0
  39. package/dist/store/reducers/schema.js +2 -2
  40. package/dist/store/reducers/storage.js +6 -6
  41. package/dist/store/utils.ts +21 -13
  42. package/dist/types/api/consumers.ts +3 -0
  43. package/dist/types/api/healthcheck.ts +1 -1
  44. package/dist/types/store/healthcheck.ts +5 -1
  45. package/package.json +1 -1
  46. package/dist/containers/Storage/StorageFilter/index.ts +0 -1
  47. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/index.ts +0 -1
  48. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/IssuesList.tsx +0 -62
  49. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/index.ts +0 -1
  50. package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js +0 -151
  51. package/dist/store/reducers/describe.js +0 -45
  52. package/dist/store/reducers/healthcheckInfo.js +0 -45
@@ -7,7 +7,10 @@ import {SET_UNAUTHENTICATED} from './reducers/authentication';
7
7
 
8
8
  export const nop = (result: any) => result;
9
9
 
10
- export function createRequestActionTypes<Prefix extends string, Type extends string>(prefix: Prefix, type: Type) {
10
+ export function createRequestActionTypes<Prefix extends string, Type extends string>(
11
+ prefix: Prefix,
12
+ type: Type,
13
+ ) {
11
14
  return {
12
15
  REQUEST: `${prefix}/${type}_REQUEST`,
13
16
  SUCCESS: `${prefix}/${type}_SUCCESS`,
@@ -15,19 +18,24 @@ export function createRequestActionTypes<Prefix extends string, Type extends str
15
18
  } as const;
16
19
  }
17
20
 
18
- const isAxiosResponse = (response: any): response is AxiosResponse => response && 'status' in response;
21
+ const isAxiosResponse = (response: any): response is AxiosResponse =>
22
+ response && 'status' in response;
19
23
 
20
24
  type CreateApiRequestParams<Actions, Response, HandledResponse> = {
21
25
  actions: Actions;
22
26
  request: Promise<Response>;
23
- dataHandler: (data: Response, getState?: () => any) => HandledResponse;
27
+ dataHandler?: (data: Response, getState?: () => any) => HandledResponse;
24
28
  };
25
29
 
26
30
  export function createApiRequest<
27
31
  Actions extends ReturnType<typeof createRequestActionTypes>,
28
32
  Response,
29
33
  HandledResponse,
30
- >({actions, request, dataHandler = nop}: CreateApiRequestParams<Actions, Response, HandledResponse>) {
34
+ >({
35
+ actions,
36
+ request,
37
+ dataHandler = nop,
38
+ }: CreateApiRequestParams<Actions, Response, HandledResponse>) {
31
39
  const doRequest = async function (dispatch: Dispatch, getState: () => any) {
32
40
  dispatch({
33
41
  type: actions.REQUEST,
@@ -73,16 +81,16 @@ export function createApiRequest<
73
81
  export type ApiRequestAction<
74
82
  Actions extends ReturnType<typeof createRequestActionTypes>,
75
83
  SuccessResponse = unknown,
76
- ErrorResponse = unknown
84
+ ErrorResponse = unknown,
77
85
  > =
78
86
  | {
79
- type: Actions['REQUEST'],
80
- }
87
+ type: Actions['REQUEST'];
88
+ }
81
89
  | {
82
- type: Actions['SUCCESS'],
83
- data: SuccessResponse,
84
- }
90
+ type: Actions['SUCCESS'];
91
+ data: SuccessResponse;
92
+ }
85
93
  | {
86
- type: Actions['FAILURE'],
87
- error: ErrorResponse,
88
- };
94
+ type: Actions['FAILURE'];
95
+ error: ErrorResponse;
96
+ };
@@ -0,0 +1,3 @@
1
+ export interface IConsumer {
2
+ name: string;
3
+ }
@@ -6,7 +6,7 @@ export enum SelfCheckResult {
6
6
  EMERGENCY = 'EMERGENCY',
7
7
  }
8
8
 
9
- enum StatusFlag {
9
+ export enum StatusFlag {
10
10
  UNSPECIFIED = 'UNSPECIFIED',
11
11
  GREY = 'GREY',
12
12
  GREEN = 'GREEN',
@@ -1,3 +1,7 @@
1
- import type {HealthCheckAPIResponse} from "../api/healthcheck";
1
+ import type {HealthCheckAPIResponse, IssueLog} from '../api/healthcheck';
2
+
3
+ export interface IIssuesTree extends IssueLog {
4
+ reasonsItems?: IIssuesTree[];
5
+ }
2
6
 
3
7
  export type IHealthCheck = HealthCheckAPIResponse;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ydb-embedded-ui",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -1 +0,0 @@
1
- export * from './StorageFilter';
@@ -1 +0,0 @@
1
- export * from './IssuePreview';
@@ -1,62 +0,0 @@
1
- import cn from 'bem-cn-lite';
2
-
3
- import {Button, Icon} from '@gravity-ui/uikit';
4
-
5
- import updateArrow from '../../../../../assets/icons/update-arrow.svg';
6
-
7
- import type {IHealthCheck} from '../../../../../types/store/healthcheck';
8
-
9
- import IssuesViewer from '../IssuesViewer/IssuesViewer';
10
-
11
- import i18n from '../i18n';
12
-
13
- const b = cn('healthcheck');
14
-
15
- interface IssuesListProps {
16
- data?: IHealthCheck;
17
- loading?: boolean;
18
- expandedIssueId?: string;
19
- onUpdate: VoidFunction;
20
- }
21
-
22
- export const IssuesList = (props: IssuesListProps) => {
23
- const {data, loading, onUpdate, expandedIssueId} = props;
24
-
25
- if (!data) {
26
- return null;
27
- }
28
-
29
- const renderHealthcheckHeader = () => {
30
- return (
31
- <div className={b('issues-list-header')}>
32
- <h3 className={b('issues-list-header-title')}>{i18n('title.healthcheck')}</h3>
33
- <div className={b('issues-list-header-update')}>
34
- <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
35
- <Icon data={updateArrow} height={20} width={20} />
36
- </Button>
37
- </div>
38
- </div>
39
- );
40
- };
41
-
42
- const renderHealthcheckIssues = () => {
43
- const {issue_log: issueLog} = data;
44
-
45
- if (!issueLog) {
46
- return null;
47
- }
48
-
49
- return (
50
- <div className={b('issues')}>
51
- <IssuesViewer issues={issueLog} expandedIssueId={expandedIssueId} />
52
- </div>
53
- );
54
- };
55
-
56
- return (
57
- <div className={b('issues-list')}>
58
- {renderHealthcheckHeader()}
59
- {renderHealthcheckIssues()}
60
- </div>
61
- );
62
- };
@@ -1 +0,0 @@
1
- export * from './IssuesList';
@@ -1,151 +0,0 @@
1
- import {useCallback, useEffect, useState} from 'react';
2
- import cn from 'bem-cn-lite';
3
- import JSONTree from 'react-json-inspector';
4
- import _ from 'lodash';
5
- import _flow from 'lodash/fp/flow';
6
- import _filter from 'lodash/fp/filter';
7
- import _sortBy from 'lodash/fp/sortBy';
8
- import _uniqBy from 'lodash/fp/uniqBy';
9
-
10
- import {TreeView} from 'ydb-ui-components';
11
-
12
- import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
13
-
14
- import './IssueViewer.scss';
15
-
16
- const issueBlock = cn('issue');
17
-
18
- const IssueRow = ({data, onClick}) => {
19
- const {status, message, type} = data;
20
-
21
- return (
22
- <div className={issueBlock()} onClick={onClick}>
23
- <div className={issueBlock('field', {status: true})}>
24
- <EntityStatus mode="icons" status={status} name={type} />
25
- </div>
26
- <div className={issueBlock('field', {message: true})}>{message}</div>
27
- </div>
28
- );
29
- };
30
-
31
- const issueViewerBlock = cn('issue-viewer');
32
-
33
- const IssuesViewer = ({issues, expandedIssueId}) => {
34
- const [data, setData] = useState([]);
35
- const [collapsedIssues, setCollapsedIssues] = useState({});
36
-
37
- useEffect(() => {
38
- const newData = getInvertedConsequencesTree({data: issues});
39
-
40
- setData(newData);
41
- }, [issues]);
42
-
43
- const renderTree = useCallback(
44
- (data, childrenKey) => {
45
- return _.map(data, (item) => {
46
- const {id} = item;
47
-
48
- // eslint-disable-next-line no-unused-vars
49
- const {status, message, type, reasonsItems, reason, level, ...rest} = item;
50
-
51
- if (level === 1 && expandedIssueId && id !== expandedIssueId) {
52
- return;
53
- }
54
-
55
- const isCollapsed =
56
- typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
57
-
58
- const toggleCollapsed = () => {
59
- setCollapsedIssues((collapsedIssues) => ({
60
- ...collapsedIssues,
61
- [id]: !isCollapsed,
62
- }));
63
- };
64
-
65
- return (
66
- <TreeView
67
- key={id}
68
- name={<IssueRow data={item} />}
69
- collapsed={isCollapsed}
70
- hasArrow={true}
71
- onClick={toggleCollapsed}
72
- onArrowClick={toggleCollapsed}
73
- level={level - 1}
74
- >
75
- {renderInfoPanel(rest)}
76
- {renderTree(item[childrenKey], childrenKey)}
77
- </TreeView>
78
- );
79
- });
80
- },
81
- [data, collapsedIssues],
82
- );
83
-
84
- const renderInfoPanel = useCallback(
85
- (info) => {
86
- if (!info) {
87
- return null;
88
- }
89
-
90
- return (
91
- <div className={issueViewerBlock('info-panel')}>
92
- <JSONTree
93
- data={info}
94
- search={false}
95
- isExpanded={() => true}
96
- className={issueViewerBlock('inspector')}
97
- />
98
- </div>
99
- );
100
- },
101
- [data],
102
- );
103
-
104
- return (
105
- <div className={issueViewerBlock()}>
106
- <div className={issueViewerBlock('tree')}>{renderTree(data, 'reasonsItems')}</div>
107
- </div>
108
- );
109
- };
110
-
111
- function getReasonsForIssue({issue, data}) {
112
- return _.filter(data, (item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
113
- }
114
-
115
- const mapStatusToPriority = {
116
- RED: 0,
117
- ORANGE: 1,
118
- YELLOW: 2,
119
- BLUE: 3,
120
- GREEN: 4,
121
- };
122
-
123
- function getInvertedConsequencesTree({data, roots: receivedRoots}) {
124
- let roots = receivedRoots;
125
- if (!roots && data) {
126
- roots = _flow([
127
- _filter((item) => {
128
- return !_.find(
129
- data,
130
- (issue) => issue.reason && issue.reason.indexOf(item.id) !== -1,
131
- );
132
- }),
133
- _uniqBy((item) => item.id),
134
- _sortBy(({status}) => mapStatusToPriority[status]),
135
- ])(data);
136
- }
137
-
138
- return _.map(roots, (issue) => {
139
- const reasonsItems = getInvertedConsequencesTree({
140
- roots: getReasonsForIssue({issue, data}),
141
- data,
142
- });
143
-
144
- return {
145
- ...issue,
146
- reasonsItems,
147
- };
148
- });
149
- }
150
-
151
- export default IssuesViewer;
@@ -1,45 +0,0 @@
1
- import {createRequestActionTypes, createApiRequest} from '../utils';
2
- import '../../services/api';
3
-
4
- const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
5
-
6
- const describe = function z(state = {loading: false, wasLoaded: false, data: {}}, action) {
7
- switch (action.type) {
8
- case FETCH_DESCRIBE.REQUEST: {
9
- return {
10
- ...state,
11
- loading: true,
12
- };
13
- }
14
- case FETCH_DESCRIBE.SUCCESS: {
15
- const newData = JSON.parse(JSON.stringify(state.data));
16
- newData[action.data.Path] = action.data;
17
- return {
18
- ...state,
19
- data: newData,
20
- currentDescribe: action.data,
21
- loading: false,
22
- wasLoaded: true,
23
- error: undefined,
24
- };
25
- }
26
- case FETCH_DESCRIBE.FAILURE: {
27
- return {
28
- ...state,
29
- error: action.error,
30
- loading: false,
31
- };
32
- }
33
- default:
34
- return state;
35
- }
36
- };
37
-
38
- export function getDescribe({path}) {
39
- return createApiRequest({
40
- request: window.api.getDescribe({path}),
41
- actions: FETCH_DESCRIBE,
42
- });
43
- }
44
-
45
- export default describe;
@@ -1,45 +0,0 @@
1
- import {createRequestActionTypes, createApiRequest} from '../utils';
2
- import '../../services/api';
3
-
4
- const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK');
5
-
6
- const initialState = {loading: false, wasLoaded: false};
7
- const healthcheckInfo = function (state = initialState, action) {
8
- switch (action.type) {
9
- case FETCH_HEALTHCHECK.REQUEST: {
10
- return {
11
- ...state,
12
- loading: true,
13
- };
14
- }
15
- case FETCH_HEALTHCHECK.SUCCESS: {
16
- const {data} = action;
17
-
18
- return {
19
- ...state,
20
- data,
21
- wasLoaded: true,
22
- loading: false,
23
- error: undefined,
24
- };
25
- }
26
- case FETCH_HEALTHCHECK.FAILURE: {
27
- return {
28
- ...state,
29
- error: action.error,
30
- loading: false,
31
- };
32
- }
33
- default:
34
- return state;
35
- }
36
- };
37
-
38
- export function getHealthcheckInfo(database) {
39
- return createApiRequest({
40
- request: window.api.getHealthcheckInfo(database),
41
- actions: FETCH_HEALTHCHECK,
42
- });
43
- }
44
-
45
- export default healthcheckInfo;