ydb-embedded-ui 0.1.0 → 1.0.1

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({

package/dist/styles/mixins.scss

@@ -23,11 +23,28 @@
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
 }
+@mixin body3-typography() {
+    font-size: var(--yc-text-body3-font-size);
+    line-height: var(--yc-text-body3-line-height);
+}
 @mixin lead-typography() {
     font-size: var(--yc-text-lead-font-size);
     line-height: var(--yc-text-lead-line-height);
 }
 
+@mixin title-typography() {
+    font-size: var(--yc-text-title-font-size);
+    line-height: var(--yc-text-title-line-height);
+}
+
+@mixin sticky-top {
+    position: sticky;
+    top: 0;
+    left: 0;
+
+    background-color: var(--yc-color-base-background);
+}
+
 @mixin loader() {
     position: fixed;
     z-index: 99999999;
@@ -35,8 +52,8 @@
     left: 50%;
 
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 }
 
 @mixin cell-container() {
@@ -50,21 +67,30 @@
     text-overflow: ellipsis;
 }
 
+@mixin controls() {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    padding: 16px 0 18px;
+}
+
+@mixin search() {
+    width: 238px;
+}
+
 @mixin query-data-table() {
     & .data-table {
         $_: &;
 
         &__table {
             border-spacing: 0;
-
             border-collapse: separate;
         }
 
         &__th,
         &__td {
             vertical-align: middle;
-
-            border: none;
         }
 
         &__box {
@@ -102,6 +128,17 @@
     $border-width: 1px;
     $clearance-width: 1px; /* Delete clearance and cancel column shadow for previous columns */
 
+    @for $i from 0 through $nth {
+        & .data-table__td:nth-child(#{$i}),
+        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
+            box-shadow: unset;
+
+            @if $i < $nth {
+                border-right: unset;
+            }
+        }
+    }
+
     /* Freeze td */
     & .data-table__td:nth-child(#{$nth}),
     & .data-table__head-row:first-child .data-table__th:nth-child(#{$nth}) {
@@ -112,35 +149,19 @@
         border-right: $border-width solid var(--yc-color-line-generic);
         background-color: var(--yc-color-base-background);
     }
-
-    @for $i from 0 through $nth {
-        & .data-table__td:nth-child(#{$i}),
-        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
-            box-shadow: -$clearance-width 0 0 var(--yc-color-base-background);
-
-            @if $i < $nth {
-                border-right: $border-width solid var(--yc-color-base-background);
-            }
-        }
+    .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
+        background-color: var(--yc-color-base-float-hover) !important;
     }
 }
 
 @mixin table-styles {
     & .data-table {
-        width: 100%;
-
         &__table {
             width: 100%;
-
-            border-spacing: 0;
-
-            border-collapse: separate;
-
-            font-size: var(--yc-text-body2-font-size);
-            line-height: 18px;
         }
 
-        &__th {
+        &__row,
+        &__sticky th {
             height: 40px;
         }
 
@@ -175,9 +196,9 @@
         position: absolute;
         left: 20px;
 
-        color: var(--yc-color-text-secondary);
-
         font-size: 9px;
+
+        color: var(--yc-color-text-secondary);
     }
     .json-inspector__leaf_composite.json-inspector__leaf_root:before {
         left: 0;
@@ -206,7 +227,6 @@
         }
         &__toolbar {
             width: 300px;
-
             margin-bottom: 10px;
 
             border: 1px solid var(--yc-color-line-generic);
@@ -214,26 +234,21 @@
         }
         &__search {
             box-sizing: border-box;
-
             width: 300px;
             height: 28px;
-
             margin: 0;
-
             padding: 0;
 
+            font-family: var(--yc-font-family);
+            font-size: 13px;
             vertical-align: top;
 
             color: var(--yc-color-text-primary);
-
             border: 0 solid transparent;
             border-width: 0 8px;
             border-right-width: 22px;
             outline: 0;
             background: none;
-
-            font-family: var(--yc-font-family);
-            font-size: 13px;
         }
         &__value {
             &_helper {

package/dist/utils/autofetcher.ts

@@ -0,0 +1,51 @@
+export class AutoFetcher {
+    constructor() {
+        this.timeout = AutoFetcher.DEFAULT_TIMEOUT;
+        this.active = true;
+        this.timer = undefined;
+    }
+
+    wait(ms: number) {
+        return new Promise((resolve) => {
+            this.timer = setTimeout(resolve, ms);
+            return;
+        });
+    }
+    async fetch(request: Function) {
+        if (!this.active) {
+            return;
+        }
+
+        await this.wait(this.timeout);
+
+        if (this.active) {
+            const startTs = Date.now();
+            await request();
+            const finishTs = Date.now();
+
+            const responseTime = finishTs - startTs;
+            const nextTimeout =
+                responseTime > AutoFetcher.MIN_TIMEOUT ? responseTime : AutoFetcher.MIN_TIMEOUT;
+            this.timeout = nextTimeout;
+
+            this.fetch(request);
+        } else {
+            return;
+        }
+    }
+    stop() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+        this.active = false;
+    }
+    start() {
+        this.active = true;
+    }
+
+    static DEFAULT_TIMEOUT = 30000;
+    static MIN_TIMEOUT = 30000;
+    timeout: number;
+    active: boolean;
+    timer: undefined | ReturnType<typeof setTimeout>;
+}

package/dist/utils/constants.js

@@ -1,3 +1,5 @@
+import DataTable from '@yandex-cloud/react-data-table';
+
 const SECOND = 1000;
 
 export const CLUSTER_AUTO_RELOAD_INTERVAL = 10 * SECOND;
@@ -10,8 +12,9 @@ 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 = 1000000;
-export const TERABYTE = 1000000000000;
+export const MEGABYTE = 1_000_000;
+export const GIGABYTE = 1_000_000_000;
+export const TERABYTE = 1_000_000_000_000;
 export const GROUP = 'group';
 
 export const DAY_IN_SECONDS = 24 * 60 * 60;
@@ -108,19 +111,35 @@ export const COLORS_PRIORITY = {
     yellow: 4,
     orange: 3,
     red: 2,
-    black: 1,
-    gray: 1,
+    blue: 1,
+    grey: 1,
 };
 
 export const ALL = 'All';
-export const PROBLEMS = 'Problems';
+export const PROBLEMS = 'With problems';
 
 export const THEME_KEY = 'theme';
 export const SAVED_QUERIES_KEY = 'saved_queries';
+export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
-export const SELECTED_COLUMNS_KEY = 'selectedColumns';
+
 export const defaultUserSettings = {
     [THEME_KEY]: 'light',
 };
 export const DEFAULT_SIZE_RESULT_PANE_KEY = 'default-size-result-pane';
-export const DEFAULT_SIZE_SHEMA_TREE_PANE_KEY = 'default-size-schema-tree-pane';
+export const DEFAULT_SIZE_TENANT_SUMMARY_KEY = 'default-size-tenant-summary-pane';
+export const DEFAULT_SIZE_TENANT_KEY = 'default-size-tenant-pane';
+
+export const DEFAULT_IS_TENANT_SUMMARY_COLLAPSED = 'default-is-tenant-summary-collapsed';
+
+export const DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED = 'default-is-tenant-common-info-collapsed';
+
+export const DEFAULT_IS_QUERY_RESULT_COLLAPSED = 'default-is-query-result-collapsed';
+
+export const DEFAULT_TABLE_SETTINGS = {
+    displayIndices: false,
+    stickyHead: DataTable.MOVING,
+    syncHeadOnResize: true,
+    dynamicRender: true,
+    highlightRows: true,
+};

package/dist/utils/createToast.tsx

@@ -0,0 +1,23 @@
+import {Toaster} from '@yandex-cloud/uikit';
+
+const toaster = new Toaster();
+
+interface CreateToastProps {
+    name?: string;
+    title?: string;
+    content?: string;
+    type: 'error' | 'success';
+}
+
+function createToast({name, title, type, content}: CreateToastProps) {
+    return toaster.createToast({
+        name: name ?? 'Request succeeded',
+        title: title ?? 'Request succeeded',
+        type: type ?? 'success',
+        content: content,
+        isClosable: true,
+        allowAutoHiding: type === 'success',
+    });
+}
+
+export default createToast;

package/dist/utils/getNodesColumns.js

@@ -1,6 +1,8 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Link as ExternalLink, Tooltip} from '@yandex-cloud/uikit';
+import {Button, Tooltip} from '@yandex-cloud/uikit';
 
 import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';
@@ -13,6 +15,8 @@ import routes, {createHref} from '../routes';
 import {STORAGE, TABLETS} from '../containers/Node/NodePages';
 import {formatBytes} from './index';
 
+const b = cn('kv-nodes');
+
 export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeRef}) {
     const columns = [
         {
@@ -21,40 +25,33 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             width: '80px',
             align: DataTable.RIGHT,
         },
-        {
-            name: 'NodeRef',
-            header: '',
-            sortable: false,
-            render: ({row}) => {
-                const nodeRef = getNodeRef ? getNodeRef(row) : undefined;
-                return (
-                    nodeRef && (
-                        <ExternalLink href={nodeRef}>
-                            <Icon name="external" />
-                        </ExternalLink>
-                    )
-                );
-            },
-            width: '40px',
-            align: DataTable.LEFT,
-        },
         {
             name: 'Host',
             render: ({row, value}) => {
                 const hasStorage = _.find(row?.Roles, (el) => el === STORAGE_ROLE);
+                const nodeRef = getNodeRef ? getNodeRef(row) : undefined;
+
                 if (typeof value === 'undefined') {
                     return <span>—</span>;
                 }
                 return (
-                    <EntityStatus
-                        name={row.Host}
-                        status={row.Overall}
-                        path={createHref(routes.node, {
-                            id: row.NodeId,
-                            activeTab: hasStorage ? STORAGE : TABLETS,
-                        })}
-                        hasClipboardButton
-                    />
+                    <React.Fragment>
+                        <EntityStatus
+                            name={row.Host}
+                            status={row.Overall}
+                            path={createHref(routes.node, {
+                                id: row.NodeId,
+                                activeTab: hasStorage ? STORAGE : TABLETS,
+                            })}
+                            hasClipboardButton
+                            className={b('host-name')}
+                        />
+                        {nodeRef && (
+                            <Button size="s" href={nodeRef} className={b('external-button')}>
+                                <Icon name="external" />
+                            </Button>
+                        )}
+                    </React.Fragment>
                 );
             },
             width: '350px',
@@ -136,7 +133,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
         },
         {
             name: 'Tablets',
-            width: '330px',
+            width: '430px',
             render: ({row}) => {
                 return row.Tablets ? (
                     <TabletsStatistic

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 import numeral from 'numeral';
 import _ from 'lodash';
 
-import {MEGABYTE, TERABYTE, DAY_IN_SECONDS} from './constants';
+import {MEGABYTE, TERABYTE, DAY_IN_SECONDS, GIGABYTE} from './constants';
 
 import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
 numeral.locale('ru');
@@ -11,6 +11,10 @@ export const formatBytes = (bytes) => {
     return numeral(bytes).format('0 ib').replace('i', '');
 };
 
+export const formatBytesToGigabyte = (bytes) => {
+    return `${Math.floor(bytes / GIGABYTE)} GB`;
+};
+
 export const stringifyVdiskId = (id) => {
     return Object.values(id).join('-');
 };
@@ -57,7 +61,7 @@ export const calcUptime = (milliseconds) => {
     return formatUptime((currentDate - Number(milliseconds)) / 1000);
 };
 
-// функция определяет, сколько нод имеют статус Connected "true"
+// determine how many nodes have status Connected "true"
 export const getConnectedNodesCount = (nodeStateInfo) => {
     return nodeStateInfo?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "files": [
     "dist"
   ],
@@ -12,6 +12,7 @@
     "@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",
@@ -30,10 +31,10 @@
     "react-redux": "^7.0.3",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "4.0.3",
+    "react-split": "^2.0.14",
     "react-transition-group": "^4.4.2",
     "react-treeview": "^0.4.7",
-    "react-use": "^15.3.4",
     "redux": "^4.0.1",
     "redux-location-state": "^2.6.0",
     "redux-thunk": "^2.3.0",
@@ -43,9 +44,10 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "dev": "REACT_APP_BACKEND=http://localhost:8765 npm start",
+    "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 npm start",
     "build": "react-app-rewired build",
     "build:embedded": "rm -rf build && REACT_APP_BACKEND=http://localhost:8765 npm run build && ./prepare-build.sh",
+    "lint:styles": "stylelint 'src/**/*.scss'",
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
@@ -80,10 +82,12 @@
     "@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"
   }
 }