ydb-embedded-ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "files": [
     "dist"
   ],
@@ -9,38 +9,38 @@
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/qs": "^6.9.7",
-    "@yandex-cloud/i18n": "^0.2.0",
-    "@yandex-cloud/paranoid": "^1.0.0",
-    "@yandex-cloud/react-data-table": "^0.2.1",
-    "axios": "^0.19.2",
-    "bem-cn-lite": "^4.0.0",
-    "history": "^4.9.0",
-    "js-cookie": "^2.2.1",
-    "keymaster": "^1.6.2",
-    "lodash": "^4.17.11",
-    "monaco-editor": "^0.24.0",
-    "numeral": "^2.0.6",
-    "path-to-regexp": "^3.0.0",
-    "react-json-inspector": "^7.1.1",
-    "react-list": "^0.8.11",
-    "react-monaco-editor": "^0.30.1",
-    "react-redux": "^7.0.3",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
+    "@testing-library/jest-dom": "5.15.0",
+    "@testing-library/react": "11.2.7",
+    "@testing-library/user-event": "12.8.3",
+    "@types/qs": "6.9.7",
+    "@yandex-cloud/i18n": "0.2.0",
+    "@yandex-cloud/paranoid": "1.0.0",
+    "@yandex-cloud/react-data-table": "0.2.1",
+    "axios": "0.19.2",
+    "bem-cn-lite": "4.0.0",
+    "history": "4.10.1",
+    "js-cookie": "2.2.1",
+    "keymaster": "1.6.2",
+    "lodash": "4.17.11",
+    "monaco-editor": "0.24.0",
+    "numeral": "2.0.6",
+    "path-to-regexp": "3.0.0",
+    "react-json-inspector": "7.1.1",
+    "react-list": "0.8.11",
+    "react-monaco-editor": "0.30.1",
+    "react-redux": "7.2.6",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0",
     "react-scripts": "4.0.3",
-    "react-split": "^2.0.14",
-    "react-transition-group": "^4.4.2",
-    "react-treeview": "^0.4.7",
-    "redux": "^4.0.1",
-    "redux-location-state": "^2.6.0",
-    "redux-thunk": "^2.3.0",
-    "reselect": "^4.0.0",
-    "sass": "^1.32.8",
-    "web-vitals": "^1.1.2"
+    "react-split": "2.0.14",
+    "react-transition-group": "4.4.2",
+    "react-treeview": "0.4.7",
+    "redux": "4.0.1",
+    "redux-location-state": "2.6.0",
+    "redux-thunk": "2.3.0",
+    "reselect": "4.0.0",
+    "sass": "1.32.8",
+    "web-vitals": "1.1.2"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -51,7 +51,16 @@
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
-    "prepublishOnly": "npm run package"
+    "prepublishOnly": "npm run package",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{scss}": [
+      "stylelint --fix --quiet"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet"
+    ]
   },
   "browserslist": {
     "production": [
@@ -82,6 +91,8 @@
     "@yandex-cloud/uikit": "^1.7.0",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
     "react": "^17.0.2",

package/dist/containers/Node/Node.js

@@ -1,184 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import _ from 'lodash';
-
-import {Loader, Tabs} from '@yandex-cloud/uikit';
-import {withRouter, Link} from 'react-router-dom';
-
-import FullNodeViewer from '../../components/FullNodeViewer/FullNodeViewer';
-import {TABLETS, STORAGE, NODE_PAGES} from './NodePages';
-import Tablets from '../Tablets/Tablets';
-import Storage from '../Storage/Storage';
-
-import {getNodeInfo} from '../../store/reducers/node';
-import {NODE_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
-import routes, {createHref} from '../../routes';
-import {backend} from '../../store';
-
-import './Node.scss';
-
-const b = cn('node');
-
-export const STORAGE_ROLE = 'Storage';
-
-class Node extends React.Component {
-    static renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-
-    static propTypes = {
-        className: PropTypes.string,
-        getNodeInfo: PropTypes.func,
-        match: PropTypes.object,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        error: PropTypes.bool,
-        node: PropTypes.object,
-        activeTab: PropTypes.string,
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        additionalNodesInfo: PropTypes.object,
-    };
-
-    static defaultProps = {
-        className: '',
-    };
-
-    state = {
-        activeTab: '',
-    };
-
-    componentDidMount() {
-        const {id} = this.props.match.params;
-        this.setState({activeTab: this.props.activeTab});
-        this.props.getNodeInfo(id);
-        this.reloadDescriptor = setInterval(
-            () => this.props.getNodeInfo(id),
-            NODE_AUTO_RELOAD_INTERVAL,
-        );
-    }
-
-    componentDidUpdate() {
-        const {node} = this.props;
-        let {activeTab} = this.props;
-        if (node) {
-            const hasStorage = _.find(node.Roles, (el) => el === STORAGE_ROLE);
-            if (!hasStorage) {
-                activeTab = TABLETS;
-            }
-            this.setState((prev) => {
-                if (prev.activeTab !== activeTab) {
-                    return {activeTab};
-                }
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.reloadDescriptor);
-    }
-
-    renderTabs() {
-        const {node} = this.props;
-        const {id} = this.props.match.params;
-        const hasStorage = _.find(node?.Roles, (el) => el === STORAGE_ROLE);
-
-        const filteredNodesPages = hasStorage
-            ? NODE_PAGES
-            : NODE_PAGES.filter((el) => el.id !== STORAGE);
-        const pages = filteredNodesPages.map((page) => {
-            return {
-                ...page,
-                path: createHref(routes.node, {id, activeTab: page.id}),
-            };
-        });
-
-        return (
-            <div className={b('tabs')}>
-                <Tabs
-                    items={pages}
-                    activeTab={this.state.activeTab}
-                    wrapTo={({path, id}, node) => (
-                        <Link to={path} key={id} className={b('tab')}>
-                            {node}
-                        </Link>
-                    )}
-                    allowNotSelected={true}
-                />
-            </div>
-        );
-    }
-    renderTabContent() {
-        const {activeTab} = this.state;
-        const {id} = this.props.match.params;
-
-        switch (activeTab) {
-            case STORAGE: {
-                return (
-                    <div className={b('storage')}>
-                        <Storage nodeId={id} />
-                    </div>
-                );
-            }
-            case TABLETS: {
-                return <Tablets nodeId={id} />;
-            }
-            default:
-                return false;
-        }
-    }
-
-    render() {
-        const {className, loading, wasLoaded, error, node, additionalNodesInfo} = this.props;
-
-        if (loading && !wasLoaded) {
-            return Node.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
-            if (node) {
-                return (
-                    <div className={`${b()} ${className}`}>
-                        <FullNodeViewer
-                            node={node}
-                            backend={backend}
-                            additionalNodesInfo={additionalNodesInfo}
-                        />
-                        {this.renderTabs()}
-
-                        <div className={b('content')}>{this.renderTabContent()}</div>
-                    </div>
-                );
-            }
-            return <div className="error">no node data</div>;
-        }
-    }
-}
-
-const mapStateToProps = (state, ownProps) => {
-    const {wasLoaded, loading} = state.node;
-    const {activeTab} = ownProps.match.params;
-    let {data: node} = state.node;
-
-    if (node) {
-        node = node.SystemStateInfo ? node.SystemStateInfo[0] : undefined;
-    }
-
-    return {
-        node,
-        activeTab,
-        wasLoaded,
-        loading,
-    };
-};
-
-const mapDispatchToProps = {
-    getNodeInfo,
-};
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Node));