ydb-embedded-ui 4.5.0 → 4.5.2

package/dist/store/reducers/{tenant.js → tenant/tenant.ts}

@@ -1,13 +1,20 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-import _ from 'lodash';
+import type {Reducer} from 'redux';
+
+import type {TTenant} from '../../../types/api/tenant';
+import type {TenantAction, TenantDiagnosticsTab, TenantGeneralTab, TenantState} from './types';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+export const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 
-const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 
-const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, action) => {
+const initialState = {loading: false, wasLoaded: false};
+
+const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_TENANT.REQUEST: {
             return {
@@ -17,12 +24,9 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         }
 
         case FETCH_TENANT.SUCCESS: {
-            const {tenant, tenantNodes} = action.data;
-
             return {
                 ...state,
-                tenant,
-                tenantNodes,
+                tenant: action.data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -32,7 +36,7 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         case FETCH_TENANT.FAILURE: {
             return {
                 ...state,
-                data: action.error,
+                error: action.error,
                 loading: false,
                 wasLoaded: true,
             };
@@ -41,7 +45,7 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
         case CLEAR_TENANT: {
             return {
                 ...state,
-                tenant: {},
+                tenant: undefined,
                 loading: true,
             };
         }
@@ -65,45 +69,32 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
     }
 };
 
-export const clearTenant = () => {
-    return {type: CLEAR_TENANT};
-};
-
-export const getTenantInfo = ({path}) => {
+export const getTenantInfo = ({path}: {path: string}) => {
     return createApiRequest({
-        request: Promise.all([window.api.getTenantInfo({path}), window.api.getCompute(path)]),
+        request: window.api.getTenantInfo({path}),
         actions: FETCH_TENANT,
-        dataHandler: ([tenantData, nodesData]) => {
-            const tenant = tenantData.TenantInfo[0];
-            const tenantNodes = _.map(nodesData?.Tenants[0]?.Nodes, (item) => {
-                if (item.Host && item.Endpoints) {
-                    const address = _.find(item.Endpoints, {Name: 'http-mon'})?.Address;
-                    return {
-                        id: item.NodeId,
-                        backend: `${item.Host}${address ? address : ''}`,
-                    };
-                }
-
-                return undefined;
-            }).filter(Boolean);
-
-            return {tenant, tenantNodes};
+        dataHandler: (tenantData): TTenant | undefined => {
+            return tenantData.TenantInfo?.[0];
         },
     });
 };
 
-export function setTopLevelTab(tab) {
+export const clearTenant = () => {
+    return {type: CLEAR_TENANT} as const;
+};
+
+export function setTopLevelTab(tab: TenantGeneralTab) {
     return {
         type: SET_TOP_LEVEL_TAB,
         data: tab,
-    };
+    } as const;
 }
 
-export function setDiagnosticsTab(tab) {
+export function setDiagnosticsTab(tab: TenantDiagnosticsTab) {
     return {
         type: SET_DIAGNOSTICS_TAB,
         data: tab,
-    };
+    } as const;
 }
 
 export default tenantReducer;

package/dist/store/reducers/tenant/types.ts

@@ -0,0 +1,25 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TTenant} from '../../../types/api/tenant';
+import type {ValueOf} from '../../../types/common';
+import type {ApiRequestAction} from '../../utils';
+
+import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_GENERAL_TABS_IDS} from './constants';
+import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setTopLevelTab} from './tenant';
+
+export type TenantGeneralTab = ValueOf<typeof TENANT_GENERAL_TABS_IDS>;
+export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
+
+export interface TenantState {
+    loading: boolean;
+    wasLoaded: boolean;
+    topLevelTab?: TenantGeneralTab;
+    diagnosticsTab?: TenantDiagnosticsTab;
+    tenant?: TTenant;
+    error?: IResponseError;
+}
+
+export type TenantAction =
+    | ApiRequestAction<typeof FETCH_TENANT, TTenant | undefined, IResponseError>
+    | ReturnType<typeof clearTenant>
+    | ReturnType<typeof setTopLevelTab>
+    | ReturnType<typeof setDiagnosticsTab>;

package/dist/types/api/acl.ts

@@ -16,7 +16,7 @@ export interface TMetaCommonInfo {
     ACL?: TACE[];
 }
 
-interface TACE {
+export interface TACE {
     AccessType: string;
     AccessRights?: string[];
     Subject: string;

package/dist/utils/index.js

@@ -97,7 +97,8 @@ export const formatDateTime = (value) => {
 
 export const calcUptimeInSeconds = (milliseconds) => {
     const currentDate = new Date();
-    return (currentDate - Number(milliseconds)) / 1000;
+    const diff = currentDate - Number(milliseconds);
+    return diff <= 0 ? 0 : diff / 1000;
 };
 
 export const calcUptime = (milliseconds) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "files": [
     "dist"
   ],
@@ -48,6 +48,7 @@
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
     "build:embedded": "rm -rf build && PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
     "lint:styles": "stylelint 'src/**/*.scss'",
+    "unimported": "npx unimported --no-cache",
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {Breadcrumbs as BreadcrumbsUiKit} from '@gravity-ui/uikit';
-
-import './Breadcrumbs.scss';
-
-const b = cn('kv-breadcrumbs');
-
-class Breadcrumbs extends React.Component {
-    static propTypes = {
-        items: PropTypes.array,
-    };
-
-    static defaultProps = {
-        items: [],
-    };
-
-    render() {
-        const {items} = this.props;
-        return <BreadcrumbsUiKit items={items} firstDisplayedItemsCount={1} className={b()} />;
-    }
-}
-
-export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,5 +0,0 @@
-.kv-breadcrumbs {
-    padding: 20px 0;
-
-    font-size: var(--yc-text-body-2-font-size);
-}

package/dist/components/Collapse/Collapse.js

@@ -1,84 +0,0 @@
-import {useState, useEffect, useRef} from 'react';
-import block from 'bem-cn-lite';
-import {ArrowToggle, Button} from '@gravity-ui/uikit';
-
-import './Collapse.scss';
-
-const b = block('yc-collapse');
-
-function useEffectSkipFirst(fn, arr) {
-    const isFirst = useRef(true);
-
-    useEffect(() => {
-        if (isFirst.current) {
-            isFirst.current = false;
-            return;
-        }
-
-        return fn();
-    }, arr);
-}
-
-export const Collapse = ({
-    title,
-    children,
-    arrowView = 'icon',
-    emptyState = 'No data',
-    titleSize = 'l',
-    contentMarginTop = 12,
-    defaultIsExpand,
-    onChange,
-}) => {
-    const [isExpand, setIsExpand] = useState(defaultIsExpand);
-
-    const arrowDirection = isExpand ? 'top' : 'bottom';
-
-    const arrowComponent =
-        arrowView === 'button' ? (
-            <Button view="flat" className={b('arrow-button')}>
-                <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
-            </Button>
-        ) : (
-            <ArrowToggle className={b('arrow')} direction={arrowDirection} size={20} />
-        );
-
-    useEffectSkipFirst(onChange, [isExpand]);
-
-    return (
-        <div className={b()}>
-            <div
-                className={b('panel', {
-                    'no-data': !children,
-                })}
-                onClick={() => {
-                    setIsExpand(!isExpand);
-                }}
-            >
-                {typeof title === 'string' ? (
-                    <h2
-                        className={b('title', {
-                            size: titleSize,
-                        })}
-                    >
-                        {title}
-                    </h2>
-                ) : (
-                    title
-                )}
-
-                {children && <div className={b('arrow-wrapper')}>{arrowComponent}</div>}
-            </div>
-
-            {!children && <h4 className={b('empty-state-title')}>{emptyState}</h4>}
-
-            {children && (
-                <div
-                    className={b('content', {visible: isExpand})}
-                    style={{marginTop: contentMarginTop}}
-                >
-                    {children}
-                </div>
-            )}
-        </div>
-    );
-};

package/dist/components/Collapse/Collapse.scss

@@ -1,70 +0,0 @@
-.yc-collapse {
-    &__panel {
-        display: inline-flex;
-        align-items: center;
-
-        cursor: pointer;
-
-        &_no-data {
-            cursor: default;
-        }
-    }
-
-    &__title {
-        margin: 0;
-    }
-
-    &__title_secondary {
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__title_size {
-        &_s {
-            font-size: var(--yc-text-body-1-font-size);
-            line-height: var(--yc-text-body-1-line-height);
-        }
-
-        &_m {
-            font-size: var(--yc-text-body-2-font-size);
-            line-height: var(--yc-text-body-2-line-height);
-        }
-
-        &_l {
-            font-size: var(--yc-text-body-3-font-size);
-            line-height: var(--yc-text-body-3-line-height);
-        }
-    }
-
-    &__arrow-wrapper {
-        margin-left: 8px;
-    }
-
-    &__arrow-wrapper_secondary {
-        color: var(--yc-color-text-secondary);
-        .button2__text {
-            color: var(--yc-color-text-secondary);
-        }
-    }
-
-    &__content {
-        display: none;
-
-        &_visible {
-            display: block;
-        }
-    }
-
-    &__empty-state-title {
-        font-size: var(--yc-text-body-1-font-size);
-        font-weight: normal;
-        line-height: var(--yc-text-body-1-line-height);
-
-        opacity: 0.5;
-    }
-
-    &__arrow-button {
-        .button2__text {
-            margin: 0 4px;
-        }
-    }
-}

package/dist/components/PoolUsage/PoolUsage.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import './PoolUsage.scss';
-import PropTypes from 'prop-types';
-const b = cn('pool-usage');
-
-const formatUsage = (usage) => (typeof usage === 'undefined' ? '' : Math.floor(usage * 100));
-const getLineType = (fillWidth) => {
-    let fillColor = 'green';
-    if (fillWidth > 60 && fillWidth <= 80) {
-        fillColor = 'yellow';
-    } else if (fillWidth > 80) {
-        fillColor = 'red';
-    }
-
-    return fillColor;
-};
-export class PoolUsage extends React.Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-    };
-
-    render() {
-        const {data: pool = {}} = this.props;
-
-        const {Threads, Name = 'Unknown', Usage} = pool;
-        const dataExist = Usage && Threads;
-
-        const value = formatUsage(pool.Usage);
-        const fillWidth = value > 100 ? 100 : value;
-
-        return (
-            <div className={b()}>
-                <div className={b('info')}>
-                    <div className={b('pool-name')}>{Name}</div>
-                    {dataExist && (
-                        <div className={b('value')}>
-                            <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
-                            <div className={b('threads')}>(×{Threads})</div>
-                        </div>
-                    )}
-                </div>
-                <div className={b('visual')}>
-                    <div
-                        className={b('usage-line', {type: getLineType(fillWidth)})}
-                        style={{width: `${fillWidth}%`}}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export default PoolUsage;

package/dist/store/reducers/node.js

@@ -1,141 +0,0 @@
-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_STRUCTURE = createRequestActionTypes('node', 'FETCH_NODE_STRUCTURE');
-const RESET_NODE = 'node/RESET_NODE';
-
-const node = (
-    state = {
-        data: {},
-        loading: true,
-        wasLoaded: false,
-        nodeStructure: {},
-        loadingStructure: true,
-        wasLoadedStructure: false,
-    },
-    action,
-) => {
-    switch (action.type) {
-        case FETCH_NODE.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_NODE.SUCCESS: {
-            return {
-                ...state,
-                data: action.data,
-                loading: false,
-                wasLoaded: true,
-                error: undefined,
-            };
-        }
-        case FETCH_NODE.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                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;
-    }
-};
-
-export const getNodeInfo = (id) => {
-    return createApiRequest({
-        request: window.api.getNodeInfo(id),
-        actions: FETCH_NODE,
-    });
-};
-
-export const getNodeStructure = (nodeId) => {
-    return createApiRequest({
-        request: window.api.getStorageInfo({nodeId}, {concurrentId: 'getNodeStructure'}),
-        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,
-                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
-                        StoragePoolName: pool.Name,
-                    };
-                });
-            });
-        });
-
-        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;