ydb-embedded-ui 2.3.0 → 2.4.0

Sign up to get free protection for your applications and to get access to all the features.
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;