ydb-embedded-ui 4.4.2 → 4.5.1

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

@@ -0,0 +1,19 @@
+export const TENANT_GENERAL_TABS_IDS = {
+    query: 'query',
+    diagnostics: 'diagnostics',
+} as const;
+
+export const TENANT_DIAGNOSTICS_TABS_IDS = {
+    overview: 'overview',
+    topQueries: 'topQueries',
+    topShards: 'topShards',
+    nodes: 'nodes',
+    tablets: 'tablets',
+    storage: 'storage',
+    network: 'network',
+    describe: 'describe',
+    hotKeys: 'hotKeys',
+    graph: 'graph',
+    consumers: 'consumers',
+    partitions: 'partitions',
+} as const;

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/additionalProps.ts

@@ -1,5 +1,16 @@
+import type {InfoViewerItem} from '../components/InfoViewer';
 import type {VersionToColorMap} from './versions';
 
 export interface AdditionalVersionsProps {
     getVersionToColorMap?: () => VersionToColorMap;
 }
+
+export interface ClusterLink {
+    title: string;
+    url: string;
+}
+
+export interface AdditionalClusterProps {
+    info?: InfoViewerItem[];
+    links?: ClusterLink[];
+}

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/dist/utils/tooltip.js

@@ -1,83 +1,11 @@
 import cn from 'bem-cn-lite';
-import {calcUptime} from '.';
 import JSONTree from 'react-json-inspector';
 
-import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
-
-const poolB = cn('pool-tooltip');
-
-const PoolTooltip = (props) => {
-    const {data} = props;
-    const usage = (data.Usage * 100).toFixed(2);
-    return (
-        data && (
-            <div className={poolB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={poolB('label')}>Pool</td>
-                            <td>{data.Name}</td>
-                        </tr>
-                        <tr>
-                            <td className={poolB('label')}>Usage</td>
-                            <td>{usage} %</td>
-                        </tr>
-                        <tr>
-                            <td className={poolB('label')}>Threads</td>
-                            <td>{data.Threads}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
-const tabletB = cn('tablet-tooltip');
-
-const TabletTooltip = (props) => {
-    const {data, additionalData} = props;
-    return (
-        data && (
-            <div className={tabletB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={tabletB('label')}>Tablet</td>
-                            <td className={tabletB('value')}>{data.TabletId}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>NodeID</td>
-                            <td className={tabletB('value')}>{data.NodeId}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>State</td>
-                            <td className={tabletB('value')}>{data.State}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Type</td>
-                            <td className={tabletB('value')}>{data.Type}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Uptime</td>
-                            <td className={tabletB('value')}>{calcUptime(data.ChangeTime)}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Generation</td>
-                            <td className={tabletB('value')}>{data.Generation}</td>
-                        </tr>
-                        {additionalData && (
-                            <tr>
-                                <td className={tabletB('label')}>{additionalData.name}</td>
-                                <td className={tabletB('value')}>{additionalData.value}</td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
+import {
+    NodeEndpointsTooltipContent,
+    TabletTooltipContent,
+    PoolTooltipContent,
+} from '../components/TooltipsContent';
 
 const nodeB = cn('node-tootltip');
 
@@ -172,12 +100,12 @@ const jsonB = cn('json-tooltip');
 
 export const tooltipTemplates = {
     // eslint-disable-next-line react/display-name
-    pool: (data) => <PoolTooltip data={data} />,
+    pool: (data) => <PoolTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
-    tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
+    tablet: (data) => <TabletTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
     node: (data) => <NodeTooltip data={data} />,
-    nodeEndpoints: (data) => <NodeEndpointsTooltip data={data} />,
+    nodeEndpoints: (data) => <NodeEndpointsTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
     tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
     // eslint-disable-next-line react/display-name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.4.2",
+  "version": "4.5.1",
   "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/PoolBar/PoolBar.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-
-import './PoolBar.scss';
-
-const b = cn('pool-bar');
-
-const getBarType = (usage) => {
-    if (usage >= 75) {
-        return 'danger';
-    } else if (usage >= 50 && usage < 75) {
-        return 'warning';
-    } else {
-        return 'normal';
-    }
-};
-
-class PoolBar extends React.Component {
-    static propTypes = {
-        data: PropTypes.object,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-    };
-
-    bar = React.createRef();
-
-    _onBarHover = () => {
-        this.props.onMouseEnter(this.bar.current, this.props.data, 'pool');
-    };
-    _onBarLeave = () => {
-        this.props.onMouseLeave();
-    };
-    render() {
-        const {Usage: usage = 0} = this.props.data;
-        const usagePercents = Math.min(usage * 100, 100);
-        const type = getBarType(usagePercents);
-
-        return (
-            <div
-                ref={this.bar}
-                className={b({type})}
-                onMouseEnter={this._onBarHover}
-                onMouseLeave={this._onBarLeave}
-            >
-                <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
-            </div>
-        );
-    }
-}
-
-export default PoolBar;

package/dist/components/PoolsGraph/PoolsGraph.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import PoolBar from '../PoolBar/PoolBar';
-
-import './PoolsGraph.scss';
-
-const b = cn('pools-graph');
-
-class PoolsGraph extends React.Component {
-    static propTypes = {
-        pools: PropTypes.arrayOf(PropTypes.object).isRequired,
-        onMouseLeave: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-    };
-    static defaultProps = {
-        pools: [],
-    };
-    render() {
-        const {pools} = this.props;
-
-        return (
-            <div className={b()}>
-                {pools.map((item, index) => (
-                    <PoolBar key={index} data={item} {...this.props} />
-                ))}
-            </div>
-        );
-    }
-}
-
-export default PoolsGraph;