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.
- package/CHANGELOG.md +17 -0
- package/dist/components/Errors/403/AccessDenied.tsx +19 -0
- package/dist/components/Errors/403/index.ts +1 -0
- package/dist/components/Errors/i18n/en.json +4 -0
- package/dist/components/Errors/i18n/index.ts +11 -0
- package/dist/components/Errors/i18n/ru.json +4 -0
- package/dist/components/QueryResultTable/QueryResultTable.tsx +16 -21
- package/dist/{containers/Storage/StorageFilter/StorageFilter.tsx → components/Search/Search.tsx} +22 -22
- package/dist/components/Search/index.ts +1 -0
- package/dist/containers/Nodes/Nodes.js +5 -0
- package/dist/containers/Storage/Storage.js +11 -3
- package/dist/containers/TabletsFilters/TabletsFilters.js +5 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.scss +6 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.tsx +82 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/i18n/en.json +6 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/i18n/index.ts +11 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json +6 -0
- package/dist/containers/Tenant/Diagnostics/Consumers/index.ts +1 -0
- package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +4 -0
- package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts +15 -8
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/Details.tsx +55 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/index.ts +1 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss +5 -5
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.tsx +16 -6
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/{IssueViewer.scss → IssueTree.scss} +3 -54
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTree.tsx +87 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss +50 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx +25 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/index.ts +1 -0
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/Preview.tsx +13 -16
- package/dist/containers/Tenant/Diagnostics/Healthcheck/{IssuePreview/IssuePreview.tsx → Preview/PreviewItem/PreviewItem.tsx} +6 -8
- package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/PreviewItem/index.ts +1 -0
- package/dist/containers/Tenant/Preview/Preview.scss +6 -0
- package/dist/containers/Tenant/QueryEditor/QueryEditor.js +1 -9
- package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss +2 -2
- package/dist/containers/Tenant/Tenant.tsx +2 -7
- package/dist/store/reducers/describe.ts +71 -0
- package/dist/store/reducers/healthcheckInfo.ts +123 -0
- package/dist/store/reducers/schema.js +2 -2
- package/dist/store/reducers/storage.js +6 -6
- package/dist/store/utils.ts +21 -13
- package/dist/types/api/consumers.ts +3 -0
- package/dist/types/api/healthcheck.ts +1 -1
- package/dist/types/store/healthcheck.ts +5 -1
- package/package.json +1 -1
- package/dist/containers/Storage/StorageFilter/index.ts +0 -1
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/index.ts +0 -1
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/IssuesList.tsx +0 -62
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/index.ts +0 -1
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js +0 -151
- package/dist/store/reducers/describe.js +0 -45
- package/dist/store/reducers/healthcheckInfo.js +0 -45
package/dist/store/utils.ts
CHANGED
@@ -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>(
|
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 =>
|
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
|
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
|
-
>({
|
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
|
-
|
80
|
-
|
87
|
+
type: Actions['REQUEST'];
|
88
|
+
}
|
81
89
|
| {
|
82
|
-
|
83
|
-
|
84
|
-
|
90
|
+
type: Actions['SUCCESS'];
|
91
|
+
data: SuccessResponse;
|
92
|
+
}
|
85
93
|
| {
|
86
|
-
|
87
|
-
|
88
|
-
|
94
|
+
type: Actions['FAILURE'];
|
95
|
+
error: ErrorResponse;
|
96
|
+
};
|
@@ -1,3 +1,7 @@
|
|
1
|
-
import type {HealthCheckAPIResponse} from
|
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 +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;
|