ydb-embedded-ui 3.4.1 → 3.4.3

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -0,0 +1,159 @@
+import {useEffect, useState} from 'react';
+import {Button} from '@gravity-ui/uikit';
+
+import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
+import {CriticalActionDialog} from '../../../components/CriticalActionDialog';
+
+import i18n from '../i18n';
+import {b} from '../Tablet';
+
+enum EVisibleDialogType {
+    'kill' = 'kill',
+    'stop' = 'kill',
+    'resume' = 'kill',
+}
+
+type VisibleDialogType = EVisibleDialogType | null;
+
+interface TabletControlsProps {
+    tablet: TTabletStateInfo;
+}
+
+export const TabletControls = ({tablet}: TabletControlsProps) => {
+    const {TabletId, HiveId} = tablet;
+
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const [visibleDialogType, setVisibleDialogType] = useState<VisibleDialogType>(null);
+    const [isTabletActionsDisabled, setIsTabletActionsDisabled] = useState(false);
+
+    // Enable controls after data update
+    useEffect(() => {
+        setIsTabletActionsDisabled(false);
+    }, [tablet]);
+
+    const makeShowDialog = (type: VisibleDialogType) => () => {
+        setIsDialogVisible(true);
+        setVisibleDialogType(type);
+    };
+
+    const showKillDialog = makeShowDialog(EVisibleDialogType.kill);
+    const showStopDialog = makeShowDialog(EVisibleDialogType.stop);
+    const showResumeDialog = makeShowDialog(EVisibleDialogType.resume);
+
+    const hideDialog = () => {
+        setIsDialogVisible(false);
+        setVisibleDialogType(null);
+    };
+
+    const _onKillClick = () => {
+        setIsTabletActionsDisabled(true);
+        return window.api.killTablet(TabletId);
+    };
+    const _onStopClick = () => {
+        setIsTabletActionsDisabled(true);
+        return window.api.stopTablet(TabletId, HiveId);
+    };
+    const _onResumeClick = () => {
+        setIsTabletActionsDisabled(true);
+        return window.api.resumeTablet(TabletId, HiveId);
+    };
+
+    const hasHiveId = () => {
+        return HiveId && HiveId !== '0';
+    };
+
+    const isDisabledResume = () => {
+        if (isTabletActionsDisabled) {
+            return true;
+        }
+
+        return tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
+    };
+
+    const isDisabledKill = () => {
+        return isTabletActionsDisabled;
+    };
+
+    const isDisabledStop = () => {
+        if (isTabletActionsDisabled) {
+            return true;
+        }
+
+        return tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
+    };
+
+    const renderDialog = () => {
+        if (!isDialogVisible) {
+            return null;
+        }
+
+        switch (visibleDialogType) {
+            case EVisibleDialogType.kill: {
+                return (
+                    <CriticalActionDialog
+                        visible={isDialogVisible}
+                        text={i18n('dialog.kill')}
+                        onClose={hideDialog}
+                        onConfirm={_onKillClick}
+                    />
+                );
+            }
+            case EVisibleDialogType.stop: {
+                return (
+                    <CriticalActionDialog
+                        visible={isDialogVisible}
+                        text={i18n('dialog.stop')}
+                        onClose={hideDialog}
+                        onConfirm={_onStopClick}
+                    />
+                );
+            }
+            case EVisibleDialogType.resume: {
+                return (
+                    <CriticalActionDialog
+                        visible={isDialogVisible}
+                        text={i18n('dialog.resume')}
+                        onClose={hideDialog}
+                        onConfirm={_onResumeClick}
+                    />
+                );
+            }
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className={b('controls')}>
+            <Button
+                onClick={showKillDialog}
+                view="action"
+                disabled={isDisabledKill()}
+                className={b('control')}
+            >
+                {i18n('controls.kill')}
+            </Button>
+            {hasHiveId() ? (
+                <>
+                    <Button
+                        onClick={showStopDialog}
+                        view="action"
+                        disabled={isDisabledStop()}
+                        className={b('control')}
+                    >
+                        {i18n('controls.stop')}
+                    </Button>
+                    <Button
+                        onClick={showResumeDialog}
+                        view="action"
+                        disabled={isDisabledResume()}
+                        className={b('control')}
+                    >
+                        {i18n('controls.resume')}
+                    </Button>
+                </>
+            ) : null}
+            {renderDialog()}
+        </div>
+    );
+};

package/dist/containers/Tablet/TabletControls/index.ts

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

package/dist/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -0,0 +1,80 @@
+import {Link} from 'react-router-dom';
+
+import {Link as UIKitLink} from '@gravity-ui/uikit';
+
+import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
+import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
+import routes, {createHref} from '../../../routes';
+import {calcUptime} from '../../../utils';
+import {getDefaultNodePath} from '../../Node/NodePages';
+
+import {b} from '../Tablet';
+
+interface TabletInfoProps {
+    tablet: TTabletStateInfo;
+    tenantPath: string;
+}
+
+export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
+    const {
+        ChangeTime,
+        Generation,
+        FollowerId,
+        NodeId,
+        HiveId,
+        State,
+        Type,
+        TenantId: {SchemeShard} = {},
+    } = tablet;
+
+    const hasHiveId = HiveId && HiveId !== '0';
+    const hasUptime = State === ETabletState.Active;
+
+    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath}];
+
+    if (hasHiveId) {
+        tabletInfo.push({
+            label: 'HiveId',
+            value: (
+                <UIKitLink href={createHref(routes.tablet, {id: HiveId})} target="_blank">
+                    {HiveId}
+                </UIKitLink>
+            ),
+        });
+    }
+
+    if (SchemeShard) {
+        tabletInfo.push({
+            label: 'SchemeShard',
+            value: (
+                <UIKitLink href={createHref(routes.tablet, {id: SchemeShard})} target="_blank">
+                    {SchemeShard}
+                </UIKitLink>
+            ),
+        });
+    }
+
+    tabletInfo.push({label: 'Type', value: Type}, {label: 'State', value: State});
+
+    if (hasUptime) {
+        tabletInfo.push({label: 'Uptime', value: calcUptime(ChangeTime)});
+    }
+
+    tabletInfo.push(
+        {label: 'Generation', value: Generation},
+        {
+            label: 'Node',
+            value: (
+                <Link className={b('link')} to={getDefaultNodePath(String(NodeId))}>
+                    {NodeId}
+                </Link>
+            ),
+        },
+    );
+
+    if (FollowerId) {
+        tabletInfo.push({label: 'Follower', value: FollowerId});
+    }
+
+    return <InfoViewer info={tabletInfo} />;
+};

package/dist/containers/Tablet/TabletInfo/index.ts

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

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -0,0 +1,59 @@
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
+import {calcUptime} from '../../../utils';
+
+const columns: Column<ITabletPreparedHistoryItem>[] = [
+    {
+        name: 'Generation',
+        align: DataTable.RIGHT,
+        render: ({row}) => row.generation,
+    },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => row.nodeId,
+    },
+    {
+        name: 'Change time',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => calcUptime(row.changeTime),
+    },
+    {
+        name: 'State',
+        sortable: false,
+        render: ({row}) => row.state,
+    },
+    {
+        name: 'Follower ID',
+        sortable: false,
+        render: ({row}) => {
+            return row.leader ? 'leader' : row.followerId;
+        },
+    },
+];
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+};
+
+interface TabletTableProps {
+    history: ITabletPreparedHistoryItem[];
+}
+
+export const TabletTable = ({history}: TabletTableProps) => {
+    return (
+        <DataTable
+            theme="yandex-cloud"
+            data={history}
+            columns={columns}
+            settings={TABLE_SETTINGS}
+            initialSortOrder={{
+                columnId: 'Generation',
+                order: DataTable.DESCENDING,
+            }}
+        />
+    );
+};

package/dist/containers/Tablet/TabletTable/index.ts

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

package/dist/containers/Tablet/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "tablet.header": "Tablet",
+  "controls.kill": "Restart",
+  "controls.stop": "Stop",
+  "controls.resume": "Resume",
+  "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
+  "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
+  "dialog.resume": "The tablet will be resumed. Do you want to proceed?",
+  "emptyState": "The tablet was not found"
+}

package/dist/containers/Tablet/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-tablet-page';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tablet/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "tablet.header": "Таблетка",
+  "controls.kill": "Перезапустить",
+  "controls.stop": "Остановить",
+  "controls.resume": "Запустить",
+  "dialog.kill": "Таблетка будет перезапущена. Вы хотите продолжить?",
+  "dialog.stop": "Таблетка будет остановлена. Вы хотите продолжить?",
+  "dialog.resume": "Таблетка будет запущена. Вы хотите продолжить?",
+  "emptyState": "Таблетка не найдена"
+}

package/dist/containers/Tablet/index.ts

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

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -1,5 +1,5 @@
 import block from 'bem-cn-lite';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {escapeRegExp} from 'lodash/fp';
 
@@ -53,8 +53,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
 
     const dispatch = useDispatch();
 
-    const isFirstRenderRef = useRef(true);
-
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
@@ -74,14 +72,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     useEffect(() => {
         // Manual path control to ensure it updates with other values so no request with wrong params will be sent
         setComponentCurrentPath(path);
-
-        // Do not reset selected consumer on first effect call
-        // To enable navigating to specific consumer
-        if (isFirstRenderRef.current) {
-            isFirstRenderRef.current = false;
-        } else {
-            dispatch(setSelectedConsumer(undefined));
-        }
     }, [dispatch, path]);
 
     const fetchConsumerData = useCallback(
@@ -90,11 +80,11 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                 dispatch(setDataWasNotLoaded());
             }
 
-            if (selectedConsumer) {
+            if (selectedConsumer && consumers && consumers.includes(selectedConsumer)) {
                 dispatch(getConsumer(componentCurrentPath, selectedConsumer));
             }
         },
-        [dispatch, selectedConsumer, componentCurrentPath],
+        [dispatch, selectedConsumer, componentCurrentPath, consumers],
     );
 
     useAutofetcher(fetchConsumerData, [fetchConsumerData], autorefresh);
@@ -111,10 +101,13 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     );
 
     useEffect(() => {
-        if (consumersToSelect && consumersToSelect.length && !selectedConsumer) {
+        const shouldUpdateSelectedConsumer =
+            !selectedConsumer || (consumers && !consumers.includes(selectedConsumer));
+
+        if (consumersToSelect && consumersToSelect.length && shouldUpdateSelectedConsumer) {
             dispatch(setSelectedConsumer(consumersToSelect[0].value));
         }
-    }, [dispatch, consumersToSelect, selectedConsumer]);
+    }, [dispatch, consumersToSelect, selectedConsumer, consumers]);
 
     const selectedColumns: string[] = useMemo(
         () =>
@@ -222,6 +215,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                     options={consumersToSelect}
                     value={[selectedConsumer || '']}
                     onUpdate={handleConsumerSelectChange}
+                    filterable={consumers && consumers.length > 5}
                 />
                 <Search
                     onChange={handlePartitionIdSearchChange}

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsWrapper.tsx

@@ -6,6 +6,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {useTypedSelector} from '../../../../utils/hooks';
 
 import {
+    cleanTopicData,
     getTopic,
     setDataWasNotLoaded as setTopicDataWasNotLoaded,
 } from '../../../../store/reducers/topic';
@@ -61,6 +62,7 @@ export const PartitionsWrapper = ({path, type}: PartitionsWrapperProps) => {
 
     useEffect(() => {
         dispatch(setTopicDataWasNotLoaded());
+        dispatch(cleanTopicData());
         dispatch(setNodesDataWasNotLoaded());
 
         dispatch(getTopic(path));

package/dist/store/reducers/storage.js

@@ -313,6 +313,7 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         }).length;
         return {
             NodeId: node.NodeId,
+            SystemState: systemState.SystemState,
             FQDN: systemState.Host,
             DataCenter: systemState.DataCenter,
             Rack: systemState.Rack,

package/dist/store/reducers/topic.ts

@@ -18,6 +18,7 @@ import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
 export const FETCH_TOPIC = createRequestActionTypes('topic', 'FETCH_TOPIC');
 
 const SET_DATA_WAS_NOT_LOADED = 'topic/SET_DATA_WAS_NOT_LOADED';
+const CLEAN_TOPIC_DATA = 'topic/CLEAN_TOPIC_DATA';
 
 const initialState = {
     loading: true,
@@ -64,6 +65,12 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
                 wasLoaded: false,
             };
         }
+        case CLEAN_TOPIC_DATA: {
+            return {
+                ...state,
+                data: undefined,
+            };
+        }
         default:
             return state;
     }
@@ -75,6 +82,12 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const cleanTopicData = () => {
+    return {
+        type: CLEAN_TOPIC_DATA,
+    } as const;
+};
+
 export function getTopic(path?: string) {
     return createApiRequest({
         request: window.api.getTopic({path}),

package/dist/types/api/nodes.ts

@@ -7,7 +7,7 @@ import {TVDiskStateInfo} from './vdisk';
 // source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
 
 export interface TNodesInfo {
-    Overall: EFlag;
+    Overall?: EFlag;
     Nodes?: TNodeInfo[];
 
     /** uint64 */

package/dist/types/store/topic.ts

@@ -1,4 +1,4 @@
-import {FETCH_TOPIC, setDataWasNotLoaded} from '../../store/reducers/topic';
+import {FETCH_TOPIC, cleanTopicData, setDataWasNotLoaded} from '../../store/reducers/topic';
 import type {ApiRequestAction} from '../../store/utils';
 import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {IResponseError} from '../api/error';
@@ -31,7 +31,8 @@ export interface ITopicState {
 
 export type ITopicAction =
     | ApiRequestAction<typeof FETCH_TOPIC, DescribeTopicResult, IResponseError>
-    | ReturnType<typeof setDataWasNotLoaded>;
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof cleanTopicData>;
 
 export interface ITopicRootStateSlice {
     topic: ITopicState;

package/dist/utils/nodes.ts

@@ -1,3 +1,7 @@
+import type {TSystemStateInfo} from '../types/api/nodes';
+import type {INodesPreparedEntity} from '../types/store/nodes';
+import {EFlag} from '../types/api/enums';
+
 export enum NodesUptimeFilterValues {
     'All' = 'All',
     'SmallUptime' = 'SmallUptime',
@@ -7,3 +11,6 @@ export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.All]: 'All',
     [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
 };
+
+export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
+    !node.SystemState || node.SystemState === EFlag.Grey;

package/dist/utils/storage.ts

@@ -1,7 +1,7 @@
 import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
 import type {IStoragePoolGroup} from '../types/store/storage';
 
-export const isFullVDiksData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
+export const isFullVDiskData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
     'VDiskId' in disk;
 
 export const getUsage = (data: IStoragePoolGroup, step = 1) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.4.1",
+  "version": "3.4.3",
   "files": [
     "dist"
   ],
@@ -53,7 +53,9 @@
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
     "typecheck": "tsc --noEmit",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test:e2e:install": "npx playwright install --with-deps chromium",
+    "test:e2e": "npx playwright test --config=playwright.config.ts"
   },
   "lint-staged": {
     "*.{scss}": [
@@ -104,6 +106,7 @@
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^3.20.2",
+    "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",