ydb-embedded-ui 4.13.0 → 4.15.0

package/dist/utils/storage.ts

@@ -1,12 +1,40 @@
 import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
-import type {IStoragePoolGroup} from '../types/store/storage';
+import type {ValueOf} from '../types/common';
 
 export const isFullVDiskData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
     'VDiskId' in disk;
 
-export const getUsage = (data: IStoragePoolGroup, step = 1) => {
+interface EntityWithUsage {
+    Used: number;
+    Limit: number;
+}
+
+export const getUsage = <T extends EntityWithUsage>(data: T, step = 1) => {
     // if limit is 0, display 0
-    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
+    const usage = data.Limit ? (data.Used * 100) / data.Limit : 0;
 
     return Math.floor(usage / step) * step;
 };
+
+/**
+ * Values to sort /storage v2 response
+ *
+ * Source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_storage.h
+ */
+export const STORAGE_SORT_VALUES = {
+    PoolName: 'PoolName',
+    Kind: 'Kind',
+    Erasure: 'Erasure',
+    Degraded: 'Degraded',
+    Usage: 'Usage',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Read: 'Read',
+    Write: 'Write',
+} as const;
+
+export type StorageSortValue = ValueOf<typeof STORAGE_SORT_VALUES>;
+
+export const isSortableStorageProperty = (value: string): value is StorageSortValue =>
+    Object.values(STORAGE_SORT_VALUES).includes(value as StorageSortValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.13.0",
+  "version": "4.15.0",
   "files": [
     "dist"
   ],
@@ -20,7 +20,6 @@
     "copy-to-clipboard": "^3.3.3",
     "history": "4.10.1",
     "js-cookie": "2.2.1",
-    "keymaster": "1.6.2",
     "lodash": "4.17.11",
     "monaco-editor": "0.24.0",
     "numeral": "2.0.6",
@@ -33,14 +32,13 @@
     "react-router-dom": "5.3.0",
     "react-scripts": "5.0.1",
     "react-split": "2.0.14",
-    "react-transition-group": "4.4.2",
     "redux": "4.0.1",
     "redux-location-state": "2.6.0",
     "redux-thunk": "2.3.0",
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.2.2"
+    "ydb-ui-components": "^3.3.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -123,8 +121,6 @@
     "@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",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",

package/dist/HOCS/WithSearch/WithSearch.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export const withSearch = (Component) => {
-    class HOC extends React.Component {
-        state = {
-            searchQuery: '',
-        };
-
-        handleSearchQuery = (searchQuery) => {
-            this.setState({searchQuery});
-        };
-
-        render() {
-            const {searchQuery} = this.state;
-            return (
-                <Component
-                    {...this.props}
-                    searchQuery={searchQuery}
-                    handleSearchQuery={this.handleSearchQuery}
-                />
-            );
-        }
-    }
-
-    return HOC;
-};

package/dist/HOCS/index.js

@@ -1 +0,0 @@
-export * from './WithSearch/WithSearch';

package/dist/components/Hotkey/Hotkey.js

@@ -1,102 +0,0 @@
-import {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import key from 'keymaster';
-
-const propTypes = {
-    settings: PropTypes.arrayOf(
-        PropTypes.shape({
-            keys: PropTypes.string.isRequired,
-            handler: PropTypes.func.isRequired,
-            scope: PropTypes.string,
-            preventDefault: PropTypes.bool,
-        }),
-    ).isRequired,
-};
-
-function eventOnInput(evt) {
-    const tagName = (evt.target || evt.srcElement).tagName;
-
-    return /^(INPUT|TEXTAREA|SELECT)$/.test(tagName);
-}
-
-export default class Hotkey extends Component {
-    componentDidMount() {
-        const {settings} = this.props;
-
-        if (!key) {
-            return;
-        }
-
-        this.preparedSettings = this.prepareSettings(settings);
-
-        // To use hotkeys inside inputs we need to specify scope, other events are filtered.
-        key.filter = function (evt) {
-            const currentScope = key.getScope();
-
-            return !(eventOnInput(evt) && currentScope === 'all');
-        };
-
-        this.preparedSettings.forEach((setting) => {
-            this.bindKey(setting.combo, setting.scope, setting.handler, setting.preventDefault);
-        });
-    }
-
-    componentWillUnmount() {
-        if (!key) {
-            return;
-        }
-
-        this.preparedSettings.forEach((setting) => {
-            this.unbindKey(setting.combo, setting.scope);
-        });
-    }
-
-    prepareSettings(settings) {
-        const preparedSettings = [];
-
-        settings.forEach((item) => {
-            const keyCombinations = item.keys.split(/\s*,\s*/);
-            const scopes = item.scope.split(/\s*,\s*/);
-            const preventDefault =
-                typeof item.preventDefault !== 'undefined' ? item.preventDefault : true;
-
-            keyCombinations.forEach((combo) => {
-                scopes.forEach((scope) => {
-                    if (typeof item.handler === 'function') {
-                        preparedSettings.push({
-                            combo: combo,
-                            scope: scope,
-                            handler: item.handler,
-                            preventDefault: preventDefault,
-                        });
-                    }
-                });
-            });
-        });
-
-        return preparedSettings;
-    }
-
-    bindKey(combination, scope, handler, preventDefault) {
-        key(combination, scope, (evt, shortcut) => {
-            if (key.getScope() === shortcut.scope) {
-                handler(evt, shortcut);
-
-                if (preventDefault) {
-                    evt.preventDefault();
-                }
-            }
-        });
-    }
-
-    unbindKey(combination, scope) {
-        key.unbind(combination, scope);
-    }
-
-    render() {
-        return null;
-    }
-}
-
-Hotkey.propTypes = propTypes;

package/dist/components/Pagination/Pagination.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {Button} from '@gravity-ui/uikit';
-import {Icon} from '../Icon';
-import Hotkey from '../Hotkey/Hotkey';
-
-import './Pagination.scss';
-
-const b = cn('elements-pagination');
-
-const paginationControlComponent = PropTypes.shape({
-    handler: PropTypes.func,
-    disabled: PropTypes.bool,
-    hotkey: PropTypes.string,
-    hotkeyScope: PropTypes.string,
-    hotkeyHandler: PropTypes.func,
-    tooltip: PropTypes.string,
-}).isRequired;
-
-export default class Pagination extends React.Component {
-    static propTypes = {
-        previous: paginationControlComponent,
-        next: paginationControlComponent,
-    };
-
-    renderComponent(name, control) {
-        const hotkeySettings = [
-            {
-                keys: control.hotkey,
-                scope: control.hotkeyScope,
-                handler: control.hotkeyHandler,
-            },
-        ];
-
-        return (
-            <React.Fragment>
-                <Button
-                    view="outlined"
-                    onClick={control.handler}
-                    disabled={control.disabled}
-                    title={control.tooltip}
-                    className={b('control')}
-                >
-                    <Icon name={name} viewBox="0 0 6 11" width="6" height="11" />
-                </Button>
-                <Hotkey settings={hotkeySettings} />
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        const {previous, next} = this.props;
-
-        return (
-            <div className={b()}>
-                {this.renderComponent('previous', previous)}
-                <div className={b('divider')} />
-                {this.renderComponent('next', next)}
-            </div>
-        );
-    }
-}

package/dist/components/Pagination/Pagination.scss

@@ -1,28 +0,0 @@
-.elements-pagination {
-    display: flex;
-
-    padding-left: 1px;
-
-    &__divider {
-        border-left: 1px solid var(--yc-color-line-generic);
-    }
-
-    &__control {
-        display: flex;
-        align-items: center;
-
-        margin: 0 -1px;
-    }
-
-    &__icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        color: var(--yc-color-text-primary);
-    }
-
-    &__control:hover {
-        z-index: 5;
-    }
-}

package/dist/types/store/storage.ts

@@ -1,12 +0,0 @@
-import type {TBSGroupStateInfo} from '../api/storage';
-
-export interface IStoragePoolGroup extends TBSGroupStateInfo {
-    Read: number;
-    Write: number;
-    PoolName?: string;
-    Used: number;
-    Limit: number;
-    Missing: number;
-    UsedSpaceFlag: number;
-    Type: string | null;
-}