ydb-embedded-ui 0.1.0 → 1.0.1

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {Button} from '@yandex-cloud/uikit';
+import cn from 'bem-cn-lite';
+//@ts-ignore
+import Icon from '../../../components/Icon/Icon';
+
+import './ToggleButton.scss';
+
+export interface InitialPaneState {
+    triggerExpand: boolean;
+    triggerCollapse: boolean;
+    collapsed: boolean;
+}
+
+export enum PaneVisibilityActionTypes {
+    triggerCollapse = 'triggerCollapse',
+    triggerExpand = 'triggerExpand',
+    clear = 'clear',
+}
+
+const setInitialIsPaneCollapsed = (key: string) => {
+    localStorage.setItem(key, 'true');
+};
+
+const deleteInitialIsPaneCollapsed = (key: string) => {
+    localStorage.removeItem(key);
+};
+
+export function paneVisibilityToggleReducerCreator(isPaneCollapsedKey: string) {
+    return function paneVisibilityToggleReducer(
+        state: InitialPaneState,
+        action: PaneVisibilityActionTypes,
+    ) {
+        switch (action) {
+            case PaneVisibilityActionTypes.triggerCollapse: {
+                setInitialIsPaneCollapsed(isPaneCollapsedKey);
+                return {
+                    ...state,
+                    triggerCollapse: true,
+                    triggerExpand: false,
+                    collapsed: true,
+                };
+            }
+            case PaneVisibilityActionTypes.triggerExpand: {
+                deleteInitialIsPaneCollapsed(isPaneCollapsedKey);
+                return {
+                    ...state,
+                    triggerCollapse: false,
+                    triggerExpand: true,
+                    collapsed: false,
+                };
+            }
+            case PaneVisibilityActionTypes.clear: {
+                deleteInitialIsPaneCollapsed(isPaneCollapsedKey);
+                return {
+                    triggerCollapse: false,
+                    triggerExpand: false,
+                    collapsed: false,
+                };
+            }
+            default:
+                return state;
+        }
+    };
+}
+
+interface ToggleButtonProps {
+    onCollapse: VoidFunction;
+    onExpand: VoidFunction;
+    isCollapsed: boolean;
+    initialDirection?: 'right' | 'left' | 'top' | 'bottom';
+    className?: string;
+}
+
+const b = cn('kv-pane-visibility-button');
+
+export function PaneVisibilityToggleButtons({
+    onCollapse,
+    onExpand,
+    isCollapsed,
+    initialDirection = 'top',
+    className,
+}: ToggleButtonProps) {
+    return (
+        <React.Fragment>
+            <Button
+                view="flat-secondary"
+                onClick={onCollapse}
+                className={b(
+                    {
+                        hidden: isCollapsed,
+                    },
+                    className,
+                )}
+                title="Collapse"
+            >
+                <Icon
+                    name="collapse"
+                    viewBox="0 0 384 512"
+                    width={14}
+                    height={14}
+                    className={b({[initialDirection]: true})}
+                />
+            </Button>
+            <Button
+                view="flat-secondary"
+                onClick={onExpand}
+                className={b(
+                    {
+                        hidden: !isCollapsed,
+                    },
+                    className,
+                )}
+                title="Expand"
+            >
+                <Icon
+                    name="collapse"
+                    viewBox="0 0 384 512"
+                    width={14}
+                    height={14}
+                    className={b({[initialDirection]: true}, 'rotate')}
+                />
+            </Button>
+        </React.Fragment>
+    );
+}

package/dist/containers/Tenants/Tenants.js

@@ -5,35 +5,30 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, Switch, TextInput, Button} from '@yandex-cloud/uikit';
+import {Loader, TextInput, Button} from '@yandex-cloud/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
-import {AutoFetcher} from '../Cluster/Cluster';
+import {AutoFetcher} from '../../utils/autofetcher';
 
-import routes, {createHref} from '../../routes';
-import {formatCPU, formatNumber, formatBytes} from '../../utils';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import {formatCPU, formatBytesToGigabyte} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {ALL} from '../../utils/constants';
+import {ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants';
 import {changeFilter} from '../../store/reducers/settings';
+import {setHeader} from '../../store/reducers/header';
+
 import {clusterName} from '../../store';
-import {TENANT_PAGES} from '../Tenant/TenantPages';
+import {TenantTabsGroups, TENANT_GENERAL_TABS, TENANT_INFO_TABS} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
 const b = cn('tenants');
 
-const tableSettings = {
-    displayIndices: false,
-    stickyHead: DataTable.MOVING,
-    syncHeadOnResize: true,
-    dynamicRender: true,
-};
-
 class Tenants extends React.Component {
     static renderLoader() {
         return (
@@ -53,6 +48,7 @@ class Tenants extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
+        setHeader: PropTypes.func,
         filter: problemFilterType,
         changeFilter: PropTypes.func,
         cluster: PropTypes.object,
@@ -74,42 +70,35 @@ class Tenants extends React.Component {
         });
     }
 
-    state = {
-        formatValues: false,
-    };
-
     componentDidMount() {
         this.autofetcher = new AutoFetcher();
         this.props.getTenantsInfo(clusterName);
         this.autofetcher.fetch(() => this.props.getTenantsInfo(clusterName));
+        this.props.setHeader([
+            {
+                text: CLUSTER_PAGES.tenants.title,
+                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
+            },
+        ]);
     }
 
     componentWillUnmount() {
         this.autofetcher.stop();
     }
 
-    handleFormatChange = () => {
-        this.setState({formatValues: !this.state.formatValues});
-    };
-
     renderControls() {
         const {searchQuery, handleSearchQuery, filter, changeFilter} = this.props;
-        const {formatValues} = this.state;
 
         return (
             <div className={b('controls')}>
-                <div className={b('controls-left')}>
-                    <TextInput
-                        className={b('search')}
-                        placeholder="Database name…"
-                        text={searchQuery}
-                        onUpdate={handleSearchQuery}
-                        hasClear
-                    />
-                    <ProblemFilter value={filter} onChange={changeFilter} />
-                </div>
-
-                <Switch onUpdate={this.handleFormatChange} checked={formatValues} content="raw" />
+                <TextInput
+                    className={b('search')}
+                    placeholder="Database name"
+                    text={searchQuery}
+                    onUpdate={handleSearchQuery}
+                    hasClear
+                />
+                <ProblemFilter value={filter} onChange={changeFilter} />
             </div>
         );
     }
@@ -131,7 +120,6 @@ class Tenants extends React.Component {
             handleSearchQuery,
             additionalTenantsInfo = {},
         } = this.props;
-        const {formatValues} = this.state;
 
         const filteredTenantsBySearch = tenants.filter(
             (item) =>
@@ -146,25 +134,25 @@ class Tenants extends React.Component {
                 name: 'Name',
                 header: 'Database',
                 render: ({value, row}) => {
+                    const backend = row.MonitoringEndpoint ?? row.backend;
                     const tenantBackend = additionalTenantsInfo.tenantBackend
-                        ? additionalTenantsInfo.tenantBackend(row.backend)
+                        ? additionalTenantsInfo.tenantBackend(backend)
                         : undefined;
+                    const isExternalLink = Boolean(backend);
                     return (
                         <React.Fragment>
                             <EntityStatus
-                                externalLink={Boolean(row.backend)}
+                                externalLink={isExternalLink}
                                 className={b('name')}
                                 name={value || 'unknown database'}
                                 status={row.Overall}
                                 hasClipboardButton
-                                path={createHref(
-                                    routes.tenant,
-                                    {page: TENANT_PAGES[0].id},
-                                    {
-                                        name: value,
-                                        backend: tenantBackend,
-                                    },
-                                )}
+                                path={createHref(routes.tenant, undefined, {
+                                    name: value,
+                                    backend: tenantBackend,
+                                    [TenantTabsGroups.info]: TENANT_INFO_TABS[0].id,
+                                    [TenantTabsGroups.general]: TENANT_GENERAL_TABS[0].id,
+                                })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
                         </React.Fragment>
@@ -244,8 +232,7 @@ class Tenants extends React.Component {
                     const memory = MemoryUsed ?? Metrics.Memory;
                     return isNaN(Number(memory)) ? 0 : Number(memory);
                 },
-                render: ({value}) =>
-                    value ? (formatValues ? formatNumber(value) : formatBytes(value)) : '—',
+                render: ({value}) => (value ? formatBytesToGigabyte(value) : '—'),
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },
@@ -262,8 +249,7 @@ class Tenants extends React.Component {
                     const storage = StorageAllocatedSize ?? Metrics.Storage;
                     return isNaN(Number(storage)) ? 0 : Number(storage);
                 },
-                render: ({value}) =>
-                    value ? (formatValues ? formatNumber(value) : formatBytes(value)) : '—',
+                render: ({value}) => (value ? formatBytesToGigabyte(value) : '—'),
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },
@@ -298,7 +284,7 @@ class Tenants extends React.Component {
                 name: 'Tablets',
                 header: 'Tablets States',
                 sortable: false,
-                width: 370,
+                width: 430,
                 render: ({value, row}) =>
                     value ? (
                         <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
@@ -308,9 +294,7 @@ class Tenants extends React.Component {
             },
         ];
 
-        if (filteredTenants.length === 0 && filter === ALL) {
-            return <div className="error"> no tenants data</div>;
-        } else if (filteredTenants.length === 0) {
+        if (filteredTenants.length === 0 && filter !== ALL) {
             return <div className="no-problem" />;
         }
 
@@ -318,11 +302,12 @@ class Tenants extends React.Component {
             <div className={b('table-wrapper')}>
                 <div className={b('table-content')}>
                     <DataTable
-                        theme="internal"
+                        theme="yandex-cloud"
                         data={filteredTenants}
                         columns={columns}
-                        settings={tableSettings}
+                        settings={DEFAULT_TABLE_SETTINGS}
                         dynamicRender={true}
+                        emptyDataMessage="No such tenants"
                     />
                 </div>
             </div>
@@ -370,6 +355,7 @@ const mapDispatchToProps = {
     hideTooltip,
     showTooltip,
     changeFilter,
+    setHeader,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Tenants));

package/dist/containers/Tenants/Tenants.scss

@@ -1,8 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .tenants {
-    @include flex-container();
     overflow: auto;
+    @include flex-container();
 
     &__format-label {
         margin-right: 15px;
@@ -17,8 +17,7 @@
     }
 
     &__search {
-        width: 450px;
-        margin: 0 15px 0 0;
+        @include search();
     }
 
     &__tablets {
@@ -30,30 +29,18 @@
     }
 
     &__controls {
-        display: flex;
-        justify-content: space-between;
-        margin: 17px 0;
-    }
-
-    &__controls-left {
-        display: flex;
-        align-items: center;
-
-        & > * {
-            margin-right: 25px;
-        }
+        @include controls();
     }
 
     &__table-wrapper {
-        @include flex-container();
         overflow: auto;
+        @include flex-container();
     }
 
     &__table-content {
         @include freeze-nth-column(1);
 
         @include table-styles;
-        @include table-sticky-styles;
     }
 
     &__type-value {

package/dist/containers/UserSettings/UserSettings.tsx

@@ -8,8 +8,6 @@ import {THEME_KEY} from '../../utils/constants';
 //@ts-ignore
 import {setSettingValue} from '../../store/reducers/settings';
 
-// import './UserSettings.scss';
-
 enum Theme {
     light = 'light',
     dark = 'dark',

package/dist/containers/Vdisk/Vdisk.scss

@@ -1,8 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .vdisk {
-    @include container-fluid();
     padding: 20px;
+    @include container-fluid();
 
     .info-viewer__items {
         grid-template-columns: max-content;
@@ -18,11 +18,12 @@
     }
 
     &__title {
+        margin-right: 16px;
+
         font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
         font-weight: 500;
+        line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
-        margin-right: 16px;
     }
 
     &__section {
@@ -34,7 +35,8 @@
     }
 
     &__link {
-        color: var(--yc-color-base-special);
         text-decoration: none;
+
+        color: var(--yc-color-base-special);
     }
 }

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.js

@@ -11,7 +11,7 @@ import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
-import {AutoFetcher} from '../Cluster/Cluster';
+import {AutoFetcher} from '../../utils/autofetcher';
 
 import {getVdiskInfo, clearStore as clearStoreVDisk} from '../../store/reducers/vdisk';
 import {getPdiskInfo, clearStore as clearStorePDisk} from '../../store/reducers/pdisk';

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss

@@ -2,10 +2,12 @@
 
 .vdisk-pdisk-node {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
     grid-gap: 20px;
 
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+
     padding: 20px;
+    @include container-fluid();
 
     .info-viewer__items {
         grid-template-columns: max-content;
@@ -25,11 +27,10 @@
     &__title {
         margin-right: 16px;
 
-        text-transform: uppercase;
-
         font-size: var(--yc-text-body2-font-size);
         font-weight: 500;
         line-height: var(--yc-text-body2-line-height);
+        text-transform: uppercase;
     }
 
     &__section {
@@ -47,8 +48,8 @@
     }
     &__loader {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
 
         width: 100%;
         margin-top: 50px;
@@ -56,5 +57,4 @@
     .info-viewer__row {
         align-items: flex-end;
     }
-    @include container-fluid();
 }

package/dist/{routes.js → routes.ts}

@@ -1,13 +1,12 @@
 import qs from 'qs';
 import {compile} from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
+//@ts-ignore
 import {backend, clusterName, webVersion} from './store';
 
 const routes = {
-    viewer: '/viewer',
     cluster: '/cluster/:activeTab?',
-    tenant: '/tenant/:page',
-    tenantInfo: '/tenantInfo',
+    tenant: '/tenant',
     node: '/node/:id/:activeTab?',
     pdisk: '/pdisk/:id',
     group: '/group/:id',
@@ -19,7 +18,18 @@ const routes = {
     clusterPage: '/clusters/:name',
 };
 
-export function createHref(route, params, query = {}) {
+export const CLUSTER_PAGES = {
+    tenants: {id: 'tenants', name: 'Databases', title: 'Database list'},
+    nodes: {id: 'nodes', name: 'Nodes', title: 'Nodes'},
+    storage: {id: 'storage', name: 'Storage', title: 'Storage'},
+    cluster: {id: 'cluster', name: 'Cluster', title: 'Cluster'},
+};
+
+export function createHref(
+    route: string,
+    params?: object,
+    query: Record<string | number, string | number> = {},
+) {
     let extendedQuery = query;
 
     const isBackendInQuery = Boolean(query.backend);

package/dist/store/reducers/clusterNodes.js

@@ -61,7 +61,7 @@ export const getFilteredNodes = createSelector(
             return nodes;
         }
 
-        return nodes.filter(({Overall}) => {
+        return nodes?.filter(({Overall}) => {
             return Overall && Overall !== 'Green';
         });
     },

package/dist/store/reducers/executeQuery.js

@@ -1,5 +1,9 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {getValueFromLS, parseJson} from '../../utils/utils';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+
+const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
@@ -7,20 +11,33 @@ const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 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 sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
 
 export const RUN_ACTIONS_VALUES = {
     script: 'execute-script',
     scan: 'execute-scan',
 };
 
+export const MONACO_HOT_KEY_ACTIONS = {
+    sendQuery: 'sendQuery',
+    goPrev: 'goPrev',
+    goNext: 'goNext',
+    getExplain: 'getExplain',
+};
+
 const initialState = {
     loading: false,
     input: '',
     history: {
-        queries: [],
+        queries: queriesHistoryInitial.slice(sliceLimit < 0 ? 0 : sliceLimit),
         currentIndex: -1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
+    monacoHotKey: null,
 };
 
 const executeQuery = (state = initialState, action) => {
@@ -67,7 +84,10 @@ const executeQuery = (state = initialState, action) => {
 
         case SAVE_QUERY_TO_HISTORY: {
             const query = action.data;
-            const newQueries = [...state.history.queries, query];
+            const newQueries = [...state.history.queries, query].slice(
+                state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
+            );
+            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
             const currentIndex = newQueries.length - 1;
 
             return {
@@ -104,6 +124,13 @@ const executeQuery = (state = initialState, action) => {
             };
         }
 
+        case MONACO_HOT_KEY: {
+            return {
+                ...state,
+                monacoHotKey: action.data,
+            };
+        }
+
         default:
             return state;
     }
@@ -155,4 +182,11 @@ export const changeUserInput = ({input}) => {
     };
 };
 
+export const setMonacoHotKey = (value) => {
+    return {
+        type: MONACO_HOT_KEY,
+        data: value,
+    };
+};
+
 export default executeQuery;

package/dist/store/reducers/fullscreen.ts

@@ -0,0 +1,31 @@
+const ENABLE_FULLSCREEN_MODE = 'ENABLE_FULLSCREEN_MODE';
+const DISABLE_FULLSCREEN_MODE = 'DISABLE_FULLSCREEN_MODE';
+
+const initialState = false;
+
+const fullscreen = function (
+    state = initialState,
+    action: ReturnType<typeof enableFullscreen> | ReturnType<typeof disableFullscreen>,
+) {
+    switch (action.type) {
+        case DISABLE_FULLSCREEN_MODE:
+            return false;
+        case ENABLE_FULLSCREEN_MODE:
+            return true;
+        default:
+            return state;
+    }
+};
+
+export function enableFullscreen() {
+    return {
+        type: ENABLE_FULLSCREEN_MODE,
+    } as const;
+}
+export function disableFullscreen() {
+    return {
+        type: DISABLE_FULLSCREEN_MODE,
+    } as const;
+}
+
+export default fullscreen;

package/dist/store/reducers/header.ts

@@ -0,0 +1,23 @@
+const SET_HEADER = 'SET_HEADER';
+
+export type HeaderItemType = {text: string; link: string};
+
+const initialState: HeaderItemType[] = [];
+
+const header = function (state = initialState, action: ReturnType<typeof setHeader>) {
+    switch (action.type) {
+        case SET_HEADER:
+            return action.data;
+        default:
+            return state;
+    }
+};
+
+export function setHeader(headerItems: HeaderItemType[]) {
+    return {
+        type: SET_HEADER,
+        data: headerItems,
+    } as const;
+}
+
+export default header;

package/dist/store/reducers/hotKeys.js

@@ -2,7 +2,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
 const FETCH_HOT_KEYS = createRequestActionTypes('hot_keys', 'FETCH_HOT_KEYS');
-const SET_HOT_KEYS_OPTIONS = createRequestActionTypes('hot_keys', 'SET_HOT_KEYS_OPTIONS');
+const SET_HOT_KEYS_OPTIONS = 'hot_keys/SET_HOT_KEYS_OPTIONS';
 
 const initialState = {loading: true, data: {}, wasLoaded: false};