ydb-embedded-ui 1.0.4 → 1.1.2

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -5,8 +5,7 @@ import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Button} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Button, DropdownMenu} from '@yandex-cloud/uikit';
 import SplitPane from '../../../components/SplitPane';
 
 import SaveQuery from './SaveQuery/SaveQuery';
@@ -340,6 +339,7 @@ function QueryEditor(props) {
                 data={preparedData}
                 settings={TABLE_SETTINGS}
                 theme="yandex-cloud"
+                rowKey={(_, index) => index}
             />
         ) : (
             <div>{result}</div>
@@ -552,10 +552,18 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries} = props;
+        const {executeQuery, explainQuery, savedQueries, selectRunAction} = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
+
+        const menuItems = RUN_ACTIONS.map((action) => {
+            return {
+                text: action.content,
+                action: () => selectRunAction(action.value),
+            };
+        });
+
         return (
             <div className={b('controls')}>
                 <div className={b('control-run')}>
@@ -569,27 +577,19 @@ function QueryEditor(props) {
                         <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
                         {runText}
                     </Button>
-                    <Select
-                        view="action"
-                        options={RUN_ACTIONS}
-                        value={undefined}
-                        disabled={runIsDisabled}
-                        pin="brick-round"
-                        // renderSwitcher={() => (
-                        //     <div className={b('run-switcher')}>
-                        //         <Button
-                        //             view="action"
-                        //             pin="brick-round"
-                        //             disabled={runIsDisabled}
-                        //             loading={executeQuery.loading}
-                        //         >
-                        //             <Icon name="chevron-down" width={16} height={16} />
-                        //         </Button>
-                        //     </div>
-                        // )}
-                        onUpdate={(value) => {
-                            props.selectRunAction(value[0]);
-                        }}
+                    <DropdownMenu
+                        items={menuItems}
+                        switcher={
+                            <Button
+                                view="action"
+                                pin="brick-round"
+                                disabled={runIsDisabled}
+                                loading={executeQuery.loading}
+                                className={b('select-query-action')}
+                            >
+                                <Icon name="chevron-down" width={16} height={16} />
+                            </Button>
+                        }
                     />
                 </div>
                 <Button

package/dist/containers/Tenant/QueryEditor/QueryEditor.scss

@@ -97,4 +97,8 @@
     &__cell {
         @include cell-container;
     }
+
+    &__select-query-action {
+        margin-left: 2px;
+    }
 }

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -72,6 +72,9 @@ function GraphRoot(props) {
             paranoid = getCompactTopology('graphRoot', data, opts);
             paranoid.renderCompactTopology();
         }
+        return () => {
+            paranoid = undefined;
+        };
     }, []);
 
     useEffect(() => {
@@ -89,7 +92,7 @@ function GraphRoot(props) {
     }, [props.opts.colors]);
 
     useEffect(() => {
-        paranoid.updateData(props.data);
+        paranoid?.updateData(props.data);
     }, [props.data]);
 
     return <div id="graphRoot" style={{height: '100vh'}} />;

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -15,6 +15,7 @@
         }
         &_fullscreen {
             width: 100%;
+            margin-top: 0;
             padding: 10px;
         }
     }

package/dist/containers/Vdisk/Vdisk.js

@@ -13,6 +13,7 @@ import {getVdiskInfo, clearStore} from '../../store/reducers/vdisk';
 import {VDISK_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
 import {formatBytes, calcUptime, stringifyVdiskId} from '../../utils';
 import routes, {createHref} from '../../routes';
+import {getDefaultNodePath} from '../Node/NodePages';
 
 import './Vdisk.scss';
 
@@ -80,10 +81,7 @@ class Vdisk extends React.Component {
             {
                 label: 'NodeId',
                 value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
-                    >
+                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
                         {NodeId}
                     </Link>
                 ),

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.js

@@ -20,6 +20,7 @@ import {getNodeInfo} from '../../store/reducers/node';
 import {calcUptime, stringifyVdiskId, formatStorageValuesToGb} from '../../utils';
 import routes, {createHref} from '../../routes';
 import {bytesToSpeed, bytesToGB} from '../../utils/utils';
+import {getDefaultNodePath} from '../Node/NodePages';
 
 import './VdiskPdiskNode.scss';
 
@@ -29,7 +30,7 @@ function valueIsDefined(value) {
     return value !== null && value !== undefined;
 }
 
-function Vdisk({
+export function Vdisk({
     AllocatedSize,
     DiskSpace,
     FrontQueues,
@@ -83,7 +84,7 @@ function Vdisk({
             value: <EntityStatus status={SatisfactionRank.LevelRank.Flag} />,
         });
     }
-    vdiskInfo.push({label: 'Replicated', value: Replicated ? '✓' : '☓'});
+    vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});
     vdiskInfo.push({label: 'Allocated Size', value: bytesToGB(AllocatedSize)});
     vdiskInfo.push({label: 'Available Size', value: bytesToGB(AvailableSize)});
     if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
@@ -329,10 +330,7 @@ class VdiskPdiskNode extends React.Component {
             {
                 label: 'Node Id',
                 value: (
-                    <Link
-                        className={b('link')}
-                        to={createHref(routes.node, {id: NodeId, activeTab: 'storage'})}
-                    >
+                    <Link className={b('link')} to={getDefaultNodePath(NodeId)}>
                         {NodeId}
                     </Link>
                 ),

package/dist/services/api.js

@@ -26,7 +26,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         return this.get(this.getPath('/viewer/json/tenantinfo'), {
             tablets: 1,
             storage: 1,
-            nodes: 1,
         });
     }
     getTenantInfo({path}) {

package/dist/store/reducers/executeQuery.js

@@ -13,7 +13,7 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
 const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
 
-const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, []));
+const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
 const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 

package/dist/store/reducers/header.ts

@@ -1,6 +1,6 @@
 const SET_HEADER = 'SET_HEADER';
 
-export type HeaderItemType = {text: string; link: string};
+export type HeaderItemType = {text: string; link?: string};
 
 const initialState: HeaderItemType[] = [];
 

package/dist/store/reducers/node.js

@@ -1,9 +1,23 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {stringifyVdiskId} from '../../utils';
+import {createSelector} from 'reselect';
 
-const FETCH_NODE = createRequestActionTypes('NODE', 'FETCH_NODE');
+const FETCH_NODE = createRequestActionTypes('node', 'FETCH_NODE');
+const FETCH_NODE_STRUCTURE = createRequestActionTypes('node', 'FETCH_NODE_STRUCTURE');
+const RESET_NODE = 'node/RESET_NODE';
 
-const NODE = (state = {data: {}, loading: true, wasLoaded: false}, action) => {
+const node = (
+    state = {
+        data: {},
+        loading: true,
+        wasLoaded: false,
+        nodeStructure: {},
+        loadingStructure: true,
+        wasLoadedStructure: false,
+    },
+    action,
+) => {
     switch (action.type) {
         case FETCH_NODE.REQUEST: {
             return {
@@ -27,6 +41,37 @@ const NODE = (state = {data: {}, loading: true, wasLoaded: false}, action) => {
                 loading: false,
             };
         }
+        case FETCH_NODE_STRUCTURE.REQUEST: {
+            return {
+                ...state,
+                loadingStructure: true,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.SUCCESS: {
+            return {
+                ...state,
+                nodeStructure: action.data,
+                loadingStructure: false,
+                wasLoadedStructure: true,
+                errorStructure: undefined,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.FAILURE: {
+            return {
+                ...state,
+                errorStructure: action.error,
+                loadingStructure: false,
+            };
+        }
+        case RESET_NODE: {
+            return {
+                ...state,
+                data: {},
+                wasLoaded: false,
+                nodeStructure: {},
+                wasLoadedStructure: false,
+            };
+        }
         default:
             return state;
     }
@@ -39,4 +84,54 @@ export const getNodeInfo = (id) => {
     });
 };
 
-export default NODE;
+export const getNodeStructure = (nodeId) => {
+    return createApiRequest({
+        request: window.api.getStorageInfo({nodeId}),
+        actions: FETCH_NODE_STRUCTURE,
+    });
+};
+
+export function resetNode() {
+    return {
+        type: RESET_NODE,
+    };
+}
+
+const getNodeId = (state) => state.node?.data?.SystemStateInfo?.[0].NodeId;
+
+const getRawNodeStructure = (state) => state.node?.nodeStructure;
+
+export const selectNodeStructure = createSelector(
+    [getNodeId, getRawNodeStructure],
+    (nodeId, rawNodeStructure) => {
+        const pools = rawNodeStructure?.StoragePools;
+        const structure = {};
+        pools?.forEach((pool) => {
+            const groups = pool.Groups;
+            groups?.forEach((group) => {
+                const vDisks = group.VDisks?.filter((el) => el.NodeId === nodeId);
+                vDisks?.forEach((vd) => {
+                    const vDiskId = stringifyVdiskId(vd.VDiskId);
+                    const pDiskId = vd.PDisk?.PDiskId;
+                    if (!structure[String(pDiskId)]) {
+                        structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
+                    }
+                    structure[String(pDiskId)].vDisks[vDiskId] = vd;
+                });
+            });
+        });
+
+        const structureWithVdisksArray = Object.keys(structure).reduce((acc, el) => {
+            const vDisks = structure[el].vDisks;
+            const vDisksArray = Object.keys(vDisks).reduce((acc, key, index) => {
+                acc.push({...vDisks[key], id: key, order: index});
+                return acc;
+            }, []);
+            acc[el] = {...structure[el], vDisks: vDisksArray};
+            return acc;
+        }, {});
+        return structureWithVdisksArray;
+    },
+);
+
+export default node;

package/dist/store/reducers/nodes.js

@@ -1,6 +1,5 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
-import {AUTO_RELOAD_INTERVAL} from '../../utils/constants';
 
 const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -14,13 +13,11 @@ const nodes = function z(state = {loading: true, wasLoaded: false}, action) {
             };
         }
         case FETCH_NODES.SUCCESS: {
-            const timeout = new Date().getTime() - state.requestTime;
             return {
                 ...state,
                 data: action.data,
                 loading: false,
                 wasLoaded: true,
-                timeoutForRequest: timeout > AUTO_RELOAD_INTERVAL ? timeout : AUTO_RELOAD_INTERVAL,
                 error: undefined,
             };
         }

package/dist/store/reducers/storage.js

@@ -6,8 +6,14 @@ import {calcUptime} from '../../utils';
 
 export const VisibleEntities = {
     All: 'All',
-    Missing: 'Degraded',
-    Space: 'Out of space',
+    Missing: 'Missing',
+    Space: 'Space',
+};
+
+export const VisibleEntitiesTitles = {
+    [VisibleEntities.All]: 'All',
+    [VisibleEntities.Missing]: 'Degraded',
+    [VisibleEntities.Space]: 'Out of Space',
 };
 
 export const StorageTypes = {

package/dist/store/reducers/tablets.js

@@ -1,6 +1,5 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
-import {AUTO_RELOAD_INTERVAL} from '../../utils/constants';
 
 const FETCH_TABLETS = createRequestActionTypes('tablets', 'FETCH_TABLETS');
 
@@ -21,12 +20,10 @@ const tablets = function z(state = initialState, action) {
             };
         }
         case FETCH_TABLETS.SUCCESS: {
-            const timeout = new Date().getTime() - state.requestTime;
             return {
                 ...state,
                 data: action.data,
                 loading: false,
-                timeoutForRequest: timeout > AUTO_RELOAD_INTERVAL ? timeout : AUTO_RELOAD_INTERVAL,
                 error: undefined,
                 wasLoaded: true,
             };

package/dist/utils/constants.js

@@ -2,16 +2,10 @@ import DataTable from '@yandex-cloud/react-data-table';
 
 const SECOND = 1000;
 
-export const CLUSTER_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const TENANT_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const TENANTS_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const STORAGE_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const GROUP_AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const NODE_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const PDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const VDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
-export const HEALTHCHECK_RELOAD_INTERVAL = 10 * SECOND;
 export const MEGABYTE = 1_000_000;
 export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;

package/dist/utils/getNodesColumns.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
 import DataTable from '@yandex-cloud/react-data-table';
 import {Button, Tooltip} from '@yandex-cloud/uikit';
 
 import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';
-import {STORAGE_ROLE} from '../containers/Node/Node';
 import PoolsGraph from '../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../components/ProgressViewer/ProgressViewer';
 import TabletsStatistic from '../components/TabletsStatistic/TabletsStatistic';
 
-import routes, {createHref} from '../routes';
-import {STORAGE, TABLETS} from '../containers/Node/NodePages';
+import {getDefaultNodePath} from '../containers/Node/NodePages';
 import {formatBytes} from './index';
 
 const b = cn('kv-nodes');
@@ -28,7 +25,6 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
         {
             name: 'Host',
             render: ({row, value}) => {
-                const hasStorage = _.find(row?.Roles, (el) => el === STORAGE_ROLE);
                 const nodeRef = getNodeRef ? getNodeRef(row) : undefined;
 
                 if (typeof value === 'undefined') {
@@ -39,10 +35,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                         <EntityStatus
                             name={row.Host}
                             status={row.Overall}
-                            path={createHref(routes.node, {
-                                id: row.NodeId,
-                                activeTab: hasStorage ? STORAGE : TABLETS,
-                            })}
+                            path={getDefaultNodePath(row.NodeId)}
                             hasClipboardButton
                             className={b('host-name')}
                         />

package/dist/utils/utils.js

@@ -19,7 +19,7 @@ export function getValueFromLS(key, defaultValue) {
     return;
 }
 
-const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+const sizes = [' B', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB'];
 const base = 1000;
 
 export function bytesToSize(bytes) {
@@ -73,3 +73,12 @@ export function bytesToGB(bytes, shouldRound) {
         return val.toFixed() + sizes[3];
     }
 }
+
+export function pad9(val) {
+    const len = String(val).length;
+    let result = val
+    for (let i = len; i < 9; i++) {
+        result = "0" + result;
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.0.4",
+  "version": "1.1.2",
   "files": [
     "dist"
   ],
@@ -18,7 +18,7 @@
     "@yandex-cloud/react-data-table": "0.2.1",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
-    "history": "4.9.0",
+    "history": "4.10.1",
     "js-cookie": "2.2.1",
     "keymaster": "1.6.2",
     "lodash": "4.17.11",
@@ -29,8 +29,8 @@
     "react-list": "0.8.11",
     "react-monaco-editor": "0.30.1",
     "react-redux": "7.2.6",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "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",
@@ -51,7 +51,19 @@
     "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",
+    "typecheck": "npm run typecheck:server && npm run typecheck:ui",
+    "typecheck:server": "tsc -p src/server --noEmit",
+    "typecheck:ui": "tsc -p src/ui --noEmit",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{scss}": [
+      "stylelint --fix --quiet"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet"
+    ]
   },
   "browserslist": {
     "production": [
@@ -66,29 +78,31 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "15.0.0",
-    "@commitlint/config-conventional": "15.0.0",
-    "@types/history": "4.7.11",
-    "@types/lodash": "4.14.178",
-    "@types/react-dom": "17.0.11",
-    "@types/react-router": "5.1.17",
-    "@types/react-router-dom": "5.3.2",
-    "@types/react-transition-group": "4.4.4",
-    "@types/react-virtualized-auto-sizer": "1.0.1",
-    "@yandex-cloud/axios-wrapper": "1.0.2",
-    "@yandex-cloud/eslint-config": "1.0.0",
-    "@yandex-cloud/prettier-config": "1.0.0",
-    "@yandex-cloud/stylelint-config": "1.1.0",
-    "@yandex-cloud/tsconfig": "1.0.0",
-    "@yandex-cloud/uikit": "1.7.0",
-    "copyfiles": "2.4.1",
-    "eslint-config-prettier": "8.3.0",
-    "postcss": "8.4.6",
-    "prettier": "2.5.1",
-    "react": "17.0.2",
-    "react-app-rewired": "2.1.11",
-    "react-dom": "17.0.2",
-    "stylelint": "14.3.0",
-    "typescript": "4.5.4"
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@types/lodash": "^4.14.178",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.2",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@yandex-cloud/axios-wrapper": "^1.0.2",
+    "@yandex-cloud/eslint-config": "^1.0.0",
+    "@yandex-cloud/prettier-config": "^1.0.0",
+    "@yandex-cloud/stylelint-config": "^1.1.0",
+    "@yandex-cloud/tsconfig": "^1.0.0",
+    "@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",
+    "react-app-rewired": "^2.1.11",
+    "react-dom": "^17.0.2",
+    "stylelint": "^14.3.0",
+    "typescript": "^4.5.5"
   }
 }