ydb-embedded-ui 1.4.2 → 1.5.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +31 -0
- package/dist/components/GroupTreeViewer/GroupTreeViewer.js +3 -2
- package/dist/components/GroupTreeViewer/GroupTreeViewer.scss +0 -2
- package/dist/components/SplitPane/SplitPane.tsx +8 -8
- package/dist/containers/App/App.js +1 -0
- package/dist/containers/App/App.scss +0 -26
- package/dist/containers/Authentication/Authentication.tsx +1 -0
- package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx +14 -21
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueViewer.scss +11 -23
- package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js +7 -7
- package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss +9 -15
- package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx +18 -21
- package/dist/containers/Tenant/QueryEditor/QueryEditor.js +2 -2
- package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx +62 -0
- package/dist/containers/Tenant/Tenant.tsx +2 -2
- package/dist/containers/Tenant/utils/schema.ts +17 -0
- package/dist/containers/Tenant/utils/schemaActions.ts +115 -0
- package/dist/services/api.d.ts +3 -0
- package/dist/services/api.js +2 -2
- package/dist/store/reducers/tenant.js +30 -0
- package/dist/store/state-url-mapping.js +6 -0
- package/package.json +8 -4
- package/dist/components/TreeView/TreeView.js +0 -60
- package/dist/components/TreeView/TreeView.scss +0 -39
- package/dist/containers/Tenant/Schema/SchemaNode/SchemaNode.js +0 -170
- package/dist/containers/Tenant/Schema/SchemaNode/SchemaNode.scss +0 -62
- package/dist/containers/Tenant/Schema/SchemaNodeActions/SchemaNodeActions.scss +0 -17
- package/dist/containers/Tenant/Schema/SchemaNodeActions/SchemaNodeActions.tsx +0 -125
- package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.js +0 -116
- package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.scss +0 -17
- package/dist/styles/react-treeview.scss +0 -45
@@ -1,125 +0,0 @@
|
|
1
|
-
import {useDispatch} from 'react-redux';
|
2
|
-
import {useHistory} from 'react-router';
|
3
|
-
import cn from 'bem-cn-lite';
|
4
|
-
import {DropdownMenu} from '@yandex-cloud/uikit';
|
5
|
-
import qs from 'qs';
|
6
|
-
|
7
|
-
import {changeUserInput} from '../../../../store/reducers/executeQuery';
|
8
|
-
import {setShowPreview} from '../../../../store/reducers/schema';
|
9
|
-
import routes, {createHref} from '../../../../routes';
|
10
|
-
|
11
|
-
import './SchemaNodeActions.scss';
|
12
|
-
import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
|
13
|
-
import createToast from '../../../../utils/createToast';
|
14
|
-
|
15
|
-
const b = cn('kv-schema-node-actions');
|
16
|
-
|
17
|
-
const createTableTemplate = (path: string) => {
|
18
|
-
return `CREATE TABLE \`${path}/my_table\`
|
19
|
-
(
|
20
|
-
\`id\` Uint64,
|
21
|
-
\`name\` String,
|
22
|
-
PRIMARY KEY (\`id\`)
|
23
|
-
);`;
|
24
|
-
};
|
25
|
-
|
26
|
-
const alterTableTemplate = (path: string) => {
|
27
|
-
return `ALTER TABLE \`${path}\`
|
28
|
-
ADD COLUMN is_deleted Bool;`;
|
29
|
-
};
|
30
|
-
const selectQueryTemplate = (path: string) => {
|
31
|
-
return `SELECT \`id\`, \`name\`
|
32
|
-
FROM \`${path}\`
|
33
|
-
ORDER BY \`id\`
|
34
|
-
LIMIT 10;`;
|
35
|
-
};
|
36
|
-
const upsertQueryTemplate = (path: string) => {
|
37
|
-
return `UPSERT INTO \`${path}\`
|
38
|
-
( \`id\`, \`name\` )
|
39
|
-
VALUES ( );`;
|
40
|
-
};
|
41
|
-
|
42
|
-
interface SchemaNodeActionsProps {
|
43
|
-
name: string;
|
44
|
-
isTableType: boolean;
|
45
|
-
}
|
46
|
-
|
47
|
-
function SchemaNodeActions({name, isTableType}: SchemaNodeActionsProps) {
|
48
|
-
const dispatch = useDispatch();
|
49
|
-
const history = useHistory();
|
50
|
-
|
51
|
-
const queryParams = qs.parse(location.search, {
|
52
|
-
ignoreQueryPrefix: true,
|
53
|
-
});
|
54
|
-
|
55
|
-
const onCreateTableClick = () => {
|
56
|
-
dispatch(changeUserInput({input: createTableTemplate(name)}));
|
57
|
-
};
|
58
|
-
|
59
|
-
const onAlterTableClick = () => {
|
60
|
-
dispatch(changeUserInput({input: alterTableTemplate(name)}));
|
61
|
-
};
|
62
|
-
|
63
|
-
const onSelectQueryClick = () => {
|
64
|
-
dispatch(changeUserInput({input: selectQueryTemplate(name)}));
|
65
|
-
};
|
66
|
-
|
67
|
-
const onUpsertQueryClick = () => {
|
68
|
-
dispatch(changeUserInput({input: upsertQueryTemplate(name)}));
|
69
|
-
};
|
70
|
-
|
71
|
-
const onCopyPathClick = () => {
|
72
|
-
navigator.clipboard
|
73
|
-
.writeText(name)
|
74
|
-
.then(() => {
|
75
|
-
createToast({
|
76
|
-
name: 'Copied',
|
77
|
-
title: 'Path was copied to clipboard successfully',
|
78
|
-
type: 'success',
|
79
|
-
});
|
80
|
-
})
|
81
|
-
.catch(() => {
|
82
|
-
createToast({
|
83
|
-
name: 'Not copied',
|
84
|
-
title: 'Path was not copied to clipboard successfully',
|
85
|
-
type: 'error',
|
86
|
-
});
|
87
|
-
});
|
88
|
-
};
|
89
|
-
|
90
|
-
const onOpenPreviewClick = () => {
|
91
|
-
dispatch(setShowPreview(true));
|
92
|
-
history.push(
|
93
|
-
createHref(routes.tenant, undefined, {
|
94
|
-
...queryParams,
|
95
|
-
[TenantTabsGroups.general]: TenantGeneralTabsIds.query,
|
96
|
-
}),
|
97
|
-
);
|
98
|
-
};
|
99
|
-
|
100
|
-
const copyItem = {text: 'Copy path', action: onCopyPathClick};
|
101
|
-
|
102
|
-
const tableItems = [
|
103
|
-
[{text: 'Open preview', action: onOpenPreviewClick}, copyItem],
|
104
|
-
[
|
105
|
-
{text: 'Alter table', action: onAlterTableClick},
|
106
|
-
{text: 'Select query', action: onSelectQueryClick},
|
107
|
-
{text: 'Upsert query', action: onUpsertQueryClick},
|
108
|
-
],
|
109
|
-
];
|
110
|
-
|
111
|
-
const catalogItems = [[copyItem], [{text: 'Create table', action: onCreateTableClick}]];
|
112
|
-
|
113
|
-
const items = isTableType ? tableItems : catalogItems;
|
114
|
-
|
115
|
-
return (
|
116
|
-
<DropdownMenu
|
117
|
-
items={items}
|
118
|
-
switcherWrapperClassName={b()}
|
119
|
-
popupClassName={b('popup')}
|
120
|
-
popupPlacement={['bottom-end']}
|
121
|
-
/>
|
122
|
-
);
|
123
|
-
}
|
124
|
-
|
125
|
-
export default SchemaNodeActions;
|
@@ -1,116 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import ReactDOM from 'react-dom';
|
3
|
-
import cn from 'bem-cn-lite';
|
4
|
-
import PropTypes from 'prop-types';
|
5
|
-
import {connect} from 'react-redux';
|
6
|
-
import {Loader} from '@yandex-cloud/uikit';
|
7
|
-
import {getSchema} from '../../../../store/reducers/schema';
|
8
|
-
import './SchemaTree.scss';
|
9
|
-
|
10
|
-
import SchemaNode from '../SchemaNode/SchemaNode';
|
11
|
-
|
12
|
-
const b = cn('schema');
|
13
|
-
|
14
|
-
class SchemaTree extends React.Component {
|
15
|
-
static propTypes = {
|
16
|
-
className: PropTypes.string,
|
17
|
-
loading: PropTypes.bool,
|
18
|
-
error: PropTypes.object,
|
19
|
-
schema: PropTypes.object,
|
20
|
-
wasLoaded: PropTypes.bool,
|
21
|
-
getSchema: PropTypes.func,
|
22
|
-
path: PropTypes.string.isRequired,
|
23
|
-
tenantPath: PropTypes.string,
|
24
|
-
};
|
25
|
-
|
26
|
-
componentDidMount() {
|
27
|
-
const {path: tenantPath, getSchema} = this.props;
|
28
|
-
|
29
|
-
getSchema({path: tenantPath});
|
30
|
-
}
|
31
|
-
|
32
|
-
emptySchema = React.createRef();
|
33
|
-
|
34
|
-
renderLoader() {
|
35
|
-
return (
|
36
|
-
<div className={b('loader')}>
|
37
|
-
<Loader size="m" />
|
38
|
-
</div>
|
39
|
-
);
|
40
|
-
}
|
41
|
-
|
42
|
-
removeArrow = () => {
|
43
|
-
// And how else to solve this problem, except to get into the DOM?
|
44
|
-
const nodeWithArrow =
|
45
|
-
// eslint-disable-next-line react/no-find-dom-node
|
46
|
-
ReactDOM.findDOMNode(this)?.parentNode?.parentNode?.querySelector('.tree-view_arrow');
|
47
|
-
if (nodeWithArrow) {
|
48
|
-
nodeWithArrow.setAttribute('style', 'visibility: hidden');
|
49
|
-
}
|
50
|
-
|
51
|
-
return '';
|
52
|
-
};
|
53
|
-
|
54
|
-
showEmptyNode() {
|
55
|
-
const {tenantPath, schema} = this.props;
|
56
|
-
if (schema.Path === tenantPath) {
|
57
|
-
return 'no data';
|
58
|
-
} else {
|
59
|
-
return String(this.removeArrow());
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
renderContent = () => {
|
64
|
-
const {schema, path} = this.props;
|
65
|
-
if (schema && schema.Status === 'StatusSuccess') {
|
66
|
-
return (
|
67
|
-
<div className={b()}>
|
68
|
-
{schema && schema.PathDescription && schema.PathDescription.Children ? (
|
69
|
-
schema.PathDescription.Children.map((it, key) => (
|
70
|
-
<SchemaNode key={key} fullPath={path} data={it} />
|
71
|
-
))
|
72
|
-
) : (
|
73
|
-
<div ref={this.emptySchema}>{this.showEmptyNode()}</div>
|
74
|
-
)}
|
75
|
-
</div>
|
76
|
-
);
|
77
|
-
} else {
|
78
|
-
return null;
|
79
|
-
}
|
80
|
-
};
|
81
|
-
|
82
|
-
render() {
|
83
|
-
const {loading, wasLoaded, error, currentSchema: schema} = this.props;
|
84
|
-
|
85
|
-
if (loading && !wasLoaded) {
|
86
|
-
return this.renderLoader();
|
87
|
-
} else if (
|
88
|
-
(error && !error.isCancelled) ||
|
89
|
-
(schema && schema.Status === 'StatusAccessDenied')
|
90
|
-
) {
|
91
|
-
return <div>{error?.statusText || 'Access denied'}</div>;
|
92
|
-
} else {
|
93
|
-
return this.renderContent();
|
94
|
-
}
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
function mapStateToProps(state, ownProps) {
|
99
|
-
const {data: schema = {}, loading, wasLoaded, error, currentSchema} = state.schema;
|
100
|
-
const tenantPath = state.tenant.tenant.Name;
|
101
|
-
const {path} = ownProps;
|
102
|
-
return {
|
103
|
-
tenantPath,
|
104
|
-
schema: schema[`${path}`],
|
105
|
-
loading,
|
106
|
-
wasLoaded,
|
107
|
-
error,
|
108
|
-
currentSchema,
|
109
|
-
};
|
110
|
-
}
|
111
|
-
|
112
|
-
const mapDispatchToProps = {
|
113
|
-
getSchema,
|
114
|
-
};
|
115
|
-
|
116
|
-
export default connect(mapStateToProps, mapDispatchToProps)(SchemaTree);
|
@@ -1,17 +0,0 @@
|
|
1
|
-
@import '../../../../styles/mixins.scss';
|
2
|
-
|
3
|
-
.schema {
|
4
|
-
.tree-view_item {
|
5
|
-
margin: 0;
|
6
|
-
padding: 2px 0;
|
7
|
-
}
|
8
|
-
|
9
|
-
.tree-view_children {
|
10
|
-
margin: 0;
|
11
|
-
padding-left: 15px;
|
12
|
-
}
|
13
|
-
&__loader {
|
14
|
-
display: flex;
|
15
|
-
justify-content: center;
|
16
|
-
}
|
17
|
-
}
|
@@ -1,45 +0,0 @@
|
|
1
|
-
/* the tree node's style */
|
2
|
-
|
3
|
-
.tree-view {
|
4
|
-
overflow-y: hidden;
|
5
|
-
}
|
6
|
-
|
7
|
-
.tree-view_item {
|
8
|
-
display: flex;
|
9
|
-
align-items: center;
|
10
|
-
|
11
|
-
margin: 10px 0;
|
12
|
-
|
13
|
-
cursor: pointer;
|
14
|
-
white-space: nowrap;
|
15
|
-
}
|
16
|
-
|
17
|
-
.tree-view_children {
|
18
|
-
margin-left: 35px;
|
19
|
-
|
20
|
-
cursor: pointer;
|
21
|
-
white-space: nowrap;
|
22
|
-
}
|
23
|
-
|
24
|
-
.tree-view_children-collapsed {
|
25
|
-
height: 0px;
|
26
|
-
}
|
27
|
-
|
28
|
-
.tree-view_arrow {
|
29
|
-
display: inline-block;
|
30
|
-
|
31
|
-
margin-right: 6px;
|
32
|
-
|
33
|
-
cursor: pointer;
|
34
|
-
user-select: none;
|
35
|
-
}
|
36
|
-
|
37
|
-
.tree-view_arrow:after {
|
38
|
-
content: '▾';
|
39
|
-
}
|
40
|
-
|
41
|
-
/* rotate the triangle to close it */
|
42
|
-
|
43
|
-
.tree-view_arrow-collapsed {
|
44
|
-
transform: rotate(-90deg);
|
45
|
-
}
|