ydb-embedded-ui 1.0.2 → 1.1.0

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';
@@ -154,7 +153,7 @@ function QueryEditor(props) {
     useEffect(() => {
         const {monacoHotKey, setMonacoHotKey} = props;
         if (monacoHotKey === null) {
-            return 
+            return;
         }
         setMonacoHotKey(null);
         switch (monacoHotKey) {
@@ -340,6 +339,7 @@ function QueryEditor(props) {
                 data={preparedData}
                 settings={TABLE_SETTINGS}
                 theme="yandex-cloud"
+                rowKey={(_, index) => index}
             />
         ) : (
             <div>{result}</div>
@@ -464,19 +464,12 @@ function QueryEditor(props) {
     };
 
     const getExecuteResult = () => {
-        const {
-            data = [],
-            error,
-            loading,
-            history: {queries},
-        } = props.executeQuery;
+        const {data = [], error} = props.executeQuery;
 
         if (error) {
             return error.data || error;
         } else if (data.length > 0) {
             return data;
-        } else if (!loading && queries.length) {
-            return 'The request was successful';
         } else {
             return '';
         }
@@ -559,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')}>
@@ -576,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'}} />;
@@ -252,28 +255,32 @@ function QueryExplain(props) {
     return (
         <React.Fragment>
             <div className={b('controls')}>
-                <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
-                    {!props.error && (
-                        <React.Fragment>
-                            <Divider />
-                            <RadioButton
-                                options={explainOptions}
-                                value={activeOption}
-                                onUpdate={onSelectOption}
+                {!props.loading && (
+                    <React.Fragment>
+                        <div className={b('controls-right')}>
+                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            {!props.error && (
+                                <React.Fragment>
+                                    <Divider />
+                                    <RadioButton
+                                        options={explainOptions}
+                                        value={activeOption}
+                                        onUpdate={onSelectOption}
+                                    />
+                                </React.Fragment>
+                            )}
+                        </div>
+                        <div className={b('controls-left')}>
+                            <EnableFullscreenButton disabled={Boolean(props.error)} />
+                            <PaneVisibilityToggleButtons
+                                onCollapse={props.onCollapseResults}
+                                onExpand={props.onExpandResults}
+                                isCollapsed={props.isResultsCollapsed}
+                                initialDirection="bottom"
                             />
-                        </React.Fragment>
-                    )}
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(props.error)} />
-                    <PaneVisibilityToggleButtons
-                        onCollapse={props.onCollapseResults}
-                        onExpand={props.onExpandResults}
-                        isCollapsed={props.isResultsCollapsed}
-                        initialDirection="bottom"
-                    />
-                </div>
+                        </div>
+                    </React.Fragment>
+                )}
             </div>
             <div className={b('result')}>{renderContent()}</div>
         </React.Fragment>

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

@@ -19,6 +19,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);

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

@@ -15,6 +15,7 @@
         }
         &_fullscreen {
             width: 100%;
+            margin-top: 0;
             padding: 10px;
         }
     }
@@ -28,6 +29,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);

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;
 
@@ -34,7 +34,10 @@ const initialState = {
     input: '',
     history: {
         queries: queriesHistoryInitial.slice(sliceLimit < 0 ? 0 : sliceLimit),
-        currentIndex: -1,
+        currentIndex:
+            queriesHistoryInitial.length > MAXIMUM_QUERIES_IN_HISTORY
+                ? MAXIMUM_QUERIES_IN_HISTORY - 1
+                : queriesHistoryInitial.length - 1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
     monacoHotKey: null,

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

@@ -10,6 +10,12 @@ export const VisibleEntities = {
     Space: 'Space',
 };
 
+export const VisibleEntitiesTitles = {
+    [VisibleEntities.All]: 'All',
+    [VisibleEntities.Missing]: 'Degraded',
+    [VisibleEntities.Space]: 'Out of Space',
+};
+
 export const StorageTypes = {
     groups: 'Groups',
     nodes: 'Nodes',

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;
+}