ydb-embedded-ui 0.1.0 → 0.2.0

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

package/dist/store/reducers/index.js

@@ -32,6 +32,9 @@ import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
 import olapStats from './olapStats';
 import authentication from './authentication';
+import header from './header';
+import saveQuery from './saveQuery';
+import fullscreen from './fullscreen';
 
 function singleClusterMode(state = true) {
     return state;
@@ -71,6 +74,9 @@ export const rootReducer = {
     shardsWorkload,
     hotKeys,
     authentication,
+    header,
+    saveQuery,
+    fullscreen,
 };
 
 export default combineReducers({

package/dist/store/reducers/saveQuery.ts

@@ -0,0 +1,33 @@
+const SET_QUERY_NAME_TO_EDIT = 'SET_QUERY_NAME_TO_EDIT';
+const CLEAR_QUERY_NAME_TO_EDIT = 'CLEAR_QUERY_NAME_TO_EDIT';
+
+const initialState = null;
+
+const saveQuery = function (
+    state = initialState,
+    action: ReturnType<typeof setQueryNameToEdit> | ReturnType<typeof clearQueryNameToEdit>,
+) {
+    switch (action.type) {
+        case SET_QUERY_NAME_TO_EDIT:
+            return action.data;
+        case CLEAR_QUERY_NAME_TO_EDIT:
+            return null;
+
+        default:
+            return state;
+    }
+};
+
+export function setQueryNameToEdit(name: string) {
+    return {
+        type: SET_QUERY_NAME_TO_EDIT,
+        data: name,
+    } as const;
+}
+export function clearQueryNameToEdit() {
+    return {
+        type: CLEAR_QUERY_NAME_TO_EDIT,
+    } as const;
+}
+
+export default saveQuery;

package/dist/store/reducers/schema.js

@@ -3,6 +3,7 @@ import '../../services/api';
 
 const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
 const SET_SCHEMA = 'schema/SET_SCHEMA';
+const SET_SHOW_PREVIEW = 'schema/SET_SHOW_PREVIEW';
 const ENABLE_AUTOREFRESH = 'schema/ENABLE_AUTOREFRESH';
 const DISABLE_AUTOREFRESH = 'schema/DISABLE_AUTOREFRESH';
 
@@ -12,6 +13,7 @@ export const initialState = {
     data: {},
     currentSchemaPath: undefined,
     autorefresh: false,
+    showPreview: false,
 };
 
 const schema = function z(state = initialState, action) {
@@ -64,6 +66,12 @@ const schema = function z(state = initialState, action) {
                 autorefresh: false,
             };
         }
+        case SET_SHOW_PREVIEW: {
+            return {
+                ...state,
+                showPreview: action.data,
+            };
+        }
         default:
             return state;
     }
@@ -92,4 +100,10 @@ export function disableAutorefresh() {
         type: DISABLE_AUTOREFRESH,
     };
 }
+export function setShowPreview(value) {
+    return {
+        type: SET_SHOW_PREVIEW,
+        data: value,
+    };
+}
 export default schema;

package/dist/store/reducers/shardsWorkload.js

@@ -2,7 +2,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
 const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
-const SET_SHARD_QUERY_OPTIONS = createRequestActionTypes('query', 'SET_SHARD_QUERY_OPTIONS');
+const SET_SHARD_QUERY_OPTIONS = 'query/SET_SHARD_QUERY_OPTIONS';
 
 const initialState = {
     loading: false,

package/dist/store/state-url-mapping.js

@@ -16,7 +16,7 @@ const paramSetup = {
             initialState: initialSettingsState.problemFilter,
         },
     },
-    '/tenant/schema': {
+    '/tenant': {
         sort: {
             stateKey: 'heatmap.sort',
             initialState: initialHeatmapState.sort,

package/dist/store/utils.js

@@ -1,10 +1,8 @@
-import {Toaster} from '@yandex-cloud/uikit';
+import createToast from '../utils/createToast';
 import {SET_UNAUTHENTICATED} from './reducers/authentication';
 
 export const nop = (result) => result;
 
-const toaster = new Toaster();
-
 export function createRequestActionTypes(prefix, type) {
     return {
         REQUEST: `${prefix}/${type}_REQUEST`,
@@ -35,13 +33,11 @@ export function createApiRequest({actions, request, dataHandler = nop}) {
                     type: SET_UNAUTHENTICATED.SUCCESS,
                 });
             } else if (error && error.status && error.statusText) {
-                toaster.createToast({
+                createToast({
                     name: 'Request failure',
                     title: 'Request failure',
                     type: 'error',
                     content: `${error.status} ${error.statusText}`,
-                    isClosable: true,
-                    allowAutoHiding: false,
                 });
             }
             dispatch({