ydb-embedded-ui 3.4.2 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [3.4.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.2...v3.4.3) (2023-03-17)
+
+
+### Bug Fixes
+
+* add opacity to unavailable nodes ([8b82c78](https://github.com/ydb-platform/ydb-embedded-ui/commit/8b82c78f0b6bed536ca23c63b78b141b29afc4a8))
+* **Tablet:** add error check ([49f13cf](https://github.com/ydb-platform/ydb-embedded-ui/commit/49f13cf0cff2d6dad59b8f6a4c2885966bf3450a))
+* **VDisk:** fix typo ([1528d03](https://github.com/ydb-platform/ydb-embedded-ui/commit/1528d03531f482e438e0bdb6c761be236822fc27))
+
 ## [3.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.1...v3.4.2) (2023-03-03)
 
 

package/README.md

@@ -2,22 +2,42 @@
 
 Local viewer for YDB clusters
 
-## How to work with this repo
+## Development
 
-### Development
-
-1) Run on a machine with Docker installed:
+1. Run on a machine with Docker installed:
    ```
    docker pull cr.yandex/yc/yandex-docker-local-ydb
    docker run --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000" -dp 2135:2135 -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
    ```
-2) Run the frontend app in the development mode, via invoking `npm run dev`
-3) Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
+2. Run the frontend app in the development mode, via invoking `npm run dev`
+3. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
 For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
 
-### Making a production bundle.
+## E2E Tests
+
+For e2e tests we use `@playwright/tests`. Tests configuration is in `playwright.config.ts`. Tests are set up in `tests` dir.
+
+### Commands
+
+Install all Playwright dependencies and chromium to run tests.
+
+```
+npm run test:e2e:install
+```
+
+Run tests. If `PLAYWRIGHT_BASE_URL` is provided, tests run on this url, otherwise Playwright `webServer` is started with `npm run dev` on `http://localhost:3000` and all tests run there.
+
+```
+npm run test:e2e
+```
+
+### CI
+
+E2E tests are run in CI in `e2e_tests` job. Tests run on Playwright `webServer` (it is started with `npm run dev`), `webServer` uses docker container `cr.yandex/yc/yandex-docker-local-ydb` as backend.
+
+## Making a production bundle.
 
 Base command `npm run build` builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -25,6 +45,7 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.
 
 To test production bundle with latest YDB backend release, do the following:
-1) Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
-2) Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/contentmonitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
-3) Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.
+
+1. Build a production bundle with a few tweaks for embedded version: `npm run build:embedded`.
+2. Invoke `docker run -it --hostname localhost -dp 2135:2135 -p 8765:8765 -v ~/projects/ydb-embedded-ui/build:/ydb_data/node_1/contentmonitoring cr.yandex/yc/yandex-docker-local-ydb:latest`
+3. Open [embedded YDB UI](http://localhost:8765/monitoring) to view it in the browser.

package/dist/components/CriticalActionDialog/CriticalActionDialog.scss

@@ -1,4 +1,4 @@
-.km-critical-dialog {
+.ydb-critical-dialog {
     width: 252px !important;
 
     &__warning-icon {

package/dist/components/CriticalActionDialog/{CriticalActionDialog.js → CriticalActionDialog.tsx}

@@ -1,22 +1,34 @@
-import {useState} from 'react';
-import PropTypes from 'prop-types';
+import {FormEvent, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {Dialog} from '@gravity-ui/uikit';
+
 import {Icon} from '../Icon';
 
 import './CriticalActionDialog.scss';
 
-const b = cn('km-critical-dialog');
+const b = cn('ydb-critical-dialog');
+
+interface CriticalActionDialogProps {
+    visible: boolean;
+    text: string;
+    onClose: VoidFunction;
+    onConfirm: () => Promise<unknown>;
+}
 
-export default function CriticalActionDialog({visible, onClose, onConfirm, text}) {
-    const [progress, setProgress] = useState(false);
+export const CriticalActionDialog = ({
+    visible,
+    text,
+    onClose,
+    onConfirm,
+}: CriticalActionDialogProps) => {
+    const [isLoading, setIsLoading] = useState(false);
 
-    const onSubmit = (e) => {
+    const onSubmit = async (e: FormEvent) => {
         e.preventDefault();
-        setProgress(true);
+        setIsLoading(true);
 
         return onConfirm().then(() => {
-            setProgress(false);
+            setIsLoading(false);
             onClose();
         });
     };
@@ -32,7 +44,7 @@ export default function CriticalActionDialog({visible, onClose, onConfirm, text}
                 </Dialog.Body>
 
                 <Dialog.Footer
-                    progress={progress}
+                    loading={isLoading}
                     preset="default"
                     textButtonApply="Confirm"
                     textButtonCancel="Cancel"
@@ -43,11 +55,4 @@ export default function CriticalActionDialog({visible, onClose, onConfirm, text}
             </form>
         </Dialog>
     );
-}
-
-CriticalActionDialog.propTypes = {
-    visible: PropTypes.bool,
-    onClose: PropTypes.func,
-    onConfirm: PropTypes.func,
-    text: PropTypes.string,
 };

package/dist/components/CriticalActionDialog/index.ts

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

package/dist/containers/App/Content.js

@@ -13,7 +13,7 @@ import Node from '../Node/Node';
 import Pdisk from '../Pdisk/Pdisk';
 import Group from '../Group/Group';
 import Pool from '../Pool/Pool';
-import Tablet from '../Tablet/Tablet';
+import {Tablet} from '../Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import Header from '../Header/Header';

package/dist/containers/Nodes/Nodes.scss

@@ -39,4 +39,8 @@
         @include table-styles;
         @include table-sticky-styles;
     }
+
+    &__node_unavailable {
+        opacity: 0.6;
+    }
 }

package/dist/containers/Nodes/Nodes.tsx

@@ -21,7 +21,7 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {setHeader} from '../../store/reducers/header';
 import {
@@ -166,6 +166,7 @@ export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesPr
                             order: DataTable.ASCENDING,
                         }}
                         emptyDataMessage={i18n('empty.default')}
+                        rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
                     />
                 </div>
             </div>

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -11,7 +11,7 @@ import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
-import {isFullVDiksData} from '../../../utils/storage';
+import {isFullVDiskData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -125,15 +125,20 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
                             }}
                         >
                             {donors && donors.length ? (
-                                <Stack className={b('donors-stack')} key={stringifyVdiskId(vdisk.VDiskId)}>
+                                <Stack
+                                    className={b('donors-stack')}
+                                    key={stringifyVdiskId(vdisk.VDiskId)}
+                                >
                                     <VDisk data={vdisk} compact />
                                     {donors.map((donor) => {
-                                        const isFullData = isFullVDiksData(donor);
+                                        const isFullData = isFullVDiskData(donor);
 
                                         return (
                                             <VDisk
                                                 compact
-                                                data={isFullData ? donor : {...donor, DonorMode: true}}
+                                                data={
+                                                    isFullData ? donor : {...donor, DonorMode: true}
+                                                }
                                                 key={stringifyVdiskId(
                                                     isFullData ? donor.VDiskId : donor,
                                                 )}

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -16,7 +16,7 @@ import {VisibleEntities} from '../../../store/reducers/storage';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 //@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
-import {getUsage, isFullVDiksData} from '../../../utils/storage';
+import {getUsage, isFullVDiskData} from '../../../utils/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
@@ -267,7 +267,7 @@ function StorageGroups({
                                     nodes={nodes}
                                 />
                                 {donors.map((donor) => {
-                                    const isFullData = isFullVDiksData(donor);
+                                    const isFullData = isFullVDiskData(donor);
 
                                     return (
                                         <VDisk

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -35,4 +35,8 @@
     &__group-id {
         font-weight: 500;
     }
+
+    &__node_unavailable {
+        opacity: 0.6;
+    }
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -5,7 +5,7 @@ import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-tab
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
-import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {isUnavailableNode, NodesUptimeFilterValues} from '../../../utils/nodes';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -190,6 +190,7 @@ function StorageNodes({
             }}
             initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
+            rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
         />
     ) : null;
 }

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -7,7 +7,7 @@ import routes, {createHref} from '../../../routes';
 import {EFlag} from '../../../types/api/enums';
 import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
-import {isFullVDiksData} from '../../../utils/storage';
+import {isFullVDiskData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -55,7 +55,7 @@ interface VDiskProps {
 }
 
 export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
-    const isFullData = isFullVDiksData(data);
+    const isFullData = isFullVDiskData(data);
 
     const [severity, setSeverity] = useState(
         getStateSeverity(isFullData ? data.VDiskState : undefined),

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -9,7 +9,7 @@ import {EFlag} from '../../../types/api/enums';
 import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-import {isFullVDiksData} from '../../../utils/storage';
+import {isFullVDiskData} from '../../../utils/storage';
 
 import type {IUnavailableDonor} from '../utils/types';
 
@@ -132,7 +132,7 @@ interface VDiskPopupProps extends PopupProps {
 }
 
 export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {
-    const isFullData = isFullVDiksData(data);
+    const isFullData = isFullVDiskData(data);
 
     const vdiskInfo = useMemo(
         () =>

package/dist/containers/Tablet/Tablet.tsx

@@ -0,0 +1,121 @@
+import {useCallback, useEffect, useRef} from 'react';
+import {useParams} from 'react-router';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+import {Link as ExternalLink} from '@gravity-ui/uikit';
+
+import {backend} from '../../store';
+import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import '../../services/api';
+
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import {ResponseError} from '../../components/Errors/ResponseError';
+import {Tag} from '../../components/Tag';
+import {Icon} from '../../components/Icon';
+import {EmptyState} from '../../components/EmptyState';
+import {Loader} from '../../components/Loader';
+
+import {TabletTable} from './TabletTable';
+import {TabletInfo} from './TabletInfo';
+import {TabletControls} from './TabletControls';
+
+import i18n from './i18n';
+
+import './Tablet.scss';
+
+export const b = cn('tablet-page');
+
+export const Tablet = () => {
+    const isFirstDataFetchRef = useRef(true);
+
+    const dispatch = useDispatch();
+
+    const params = useParams<{id: string}>();
+    const {id} = params;
+
+    const {
+        data: tablet = {},
+        loading,
+        id: tabletId,
+        history = [],
+        tenantPath,
+        error,
+    } = useTypedSelector((state) => state.tablet);
+
+    useEffect(() => {
+        if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
+            dispatch(getTabletDescribe(tablet.TenantId));
+            isFirstDataFetchRef.current = false;
+        }
+    }, [dispatch, tablet]);
+
+    const fetchData = useCallback(() => {
+        dispatch(getTablet(id));
+    }, [dispatch, id]);
+
+    useAutofetcher(fetchData, [fetchData], true);
+
+    const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
+        return (
+            <li key={index} className={b('link', {external: true})}>
+                <ExternalLink href={`${backend}${link.path}`} target="_blank">
+                    {link.name}
+                </ExternalLink>
+            </li>
+        );
+    };
+
+    if (loading && id !== tabletId && isFirstDataFetchRef.current) {
+        return <Loader size="l" />;
+    }
+
+    if (error) {
+        return <ResponseError error={error} />;
+    }
+
+    if (!tablet || !Object.keys(tablet).length) {
+        return (
+            <div className={b('placeholder')}>
+                <EmptyState title={i18n('emptyState')} />
+            </div>
+        );
+    }
+
+    const {TabletId, Overall, Leader} = tablet;
+
+    const externalLinks = [
+        {
+            name: 'Internal viewer - tablet',
+            path: `/tablets?TabletID=${TabletId}`,
+        },
+    ];
+
+    return (
+        <div className={b()}>
+            <div className={b('pane-wrapper')}>
+                <div className={b('left-pane')}>
+                    <ul className={b('links')}>{externalLinks.map(renderExternalLinks)}</ul>
+                    <div className={b('row', {header: true})}>
+                        <span className={b('title')}>{i18n('tablet.header')}</span>
+                        <EntityStatus status={Overall} name={TabletId} />
+                        <a
+                            rel="noopener noreferrer"
+                            className={b('link', {external: true})}
+                            href={`${backend}/tablets?TabletID=${TabletId}`}
+                            target="_blank"
+                        >
+                            <Icon name="external" />
+                        </a>
+                        {Leader && <Tag text="Leader" type="blue" />}
+                    </div>
+                    <TabletInfo tablet={tablet} tenantPath={tenantPath} />
+                    <TabletControls tablet={tablet} />
+                </div>
+                <div className={b('rigth-pane')}>
+                    <TabletTable history={history} />
+                </div>
+            </div>
+        </div>
+    );
+};

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/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/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/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.2",
+  "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",

package/dist/containers/Tablet/Tablet.js

@@ -1,448 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-import _ from 'lodash';
-
-import {calcUptime} from '../../utils';
-import {backend} from '../../store';
-import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
-import '../../services/api';
-
-import InfoViewer from '../../components/InfoViewer/InfoViewer';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import {Tag} from '../../components/Tag';
-import {Icon} from '../../components/Icon';
-import {EmptyState} from '../../components/EmptyState';
-import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
-import DataTable from '@gravity-ui/react-data-table';
-import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
-import routes, {createHref} from '../../routes';
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './Tablet.scss';
-
-const b = cn('tablet-page');
-
-const TABLE_SETTINGS = {
-    displayIndices: false,
-};
-
-const CLUSTERS_COLUMNS = [
-    {
-        name: 'generation',
-        header: 'Generation',
-        align: DataTable.RIGHT,
-    },
-    {
-        name: 'nodeId',
-        header: 'Node ID',
-        align: DataTable.RIGHT,
-        sortable: false,
-    },
-    {
-        name: 'changeTime',
-        header: 'Change time',
-        align: DataTable.RIGHT,
-        sortable: false,
-        render: ({value}) => calcUptime(value),
-    },
-    {
-        name: 'state',
-        header: 'State',
-        sortable: false,
-    },
-    {
-        name: 'follower_id',
-        header: 'Follower ID',
-        sortable: false,
-        render: ({row}) => {
-            return row.leader ? 'leader' : row.followerId;
-        },
-    },
-];
-
-class Tablet extends React.Component {
-    static propTypes = {
-        id: PropTypes.string,
-        tablet: PropTypes.object,
-        loading: PropTypes.bool,
-        getTablet: PropTypes.func,
-        getTabletDescribe: PropTypes.func,
-        tenantPath: PropTypes.string,
-        tabletId: PropTypes.string,
-    };
-
-    componentDidMount() {
-        this.fetchTabletInfo();
-    }
-
-    componentDidUpdate(prevProps) {
-        const {version} = this.props;
-
-        if (version && !prevProps.version) {
-            this.fetchTabletInfo();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.fetcher) {
-            clearInterval(this.fetcher);
-        }
-    }
-
-    state = {
-        typeVisibleDialog: null,
-        dialogVisible: false,
-        isFirstFetchData: true,
-        tenantPath: '-',
-        disableTabletActions: false,
-    };
-
-    makeShowDialog = (type) => () => this.setState({dialogVisible: true, typeVisibleDialog: type});
-    showKillDialog = this.makeShowDialog('kill');
-    showStopDialog = this.makeShowDialog('stop');
-    showResumeDialog = this.makeShowDialog('resume');
-    hideDialog = () => this.setState({dialogVisible: false, typeVisibleDialog: null});
-
-    fetchTabletInfo = () => {
-        const {version, id} = this.props;
-        const {isFirstFetchData} = this.state;
-
-        if (version && this.isValidVersion()) {
-            this.props.getTablet(id).then(({tabletData}) => {
-                if (isFirstFetchData && tabletData.TenantId) {
-                    this.props.getTabletDescribe(tabletData.TenantId);
-                }
-
-                this.setState({isFirstFetchData: false});
-            });
-
-            if (this.fetcher) {
-                clearInterval(this.fetcher);
-                this.fetcher = null;
-            }
-
-            this.fetcher = setInterval(() => {
-                this.props.getTablet(id).then(() => {
-                    this.setState({disableTabletActions: false});
-                });
-            }, 10000);
-        }
-    };
-
-    isValidVersion = () => {
-        const {version} = this.props;
-
-        if (/\d+.stable-19-6$/.exec(version)) {
-            return false;
-        } else if (/\d+.stable-29/.exec(version)) {
-            return false;
-        }
-
-        return true;
-    };
-    renderLoader() {
-        return (
-            <div className={'loader'}>
-                <Loader size="l" />
-            </div>
-        );
-    }
-    renderPlaceholder() {
-        return (
-            <div className={b('placeholder')}>
-                <EmptyState title="The tablet was not found" />
-            </div>
-        );
-    }
-    renderExternalLinks = (link, index) => {
-        return (
-            <li key={index} className={b('link', {external: true})}>
-                <ExternalLink href={`${backend}${link.path}`} target="_blank">
-                    {link.name}
-                </ExternalLink>
-            </li>
-        );
-    };
-    _onKillClick = () => {
-        const {TabletId: id} = this.props.tablet;
-
-        this.setState({disableTabletActions: true});
-
-        return window.api.killTablet(id);
-    };
-    _onStopClick = () => {
-        const {TabletId: id, HiveId: hiveId} = this.props.tablet;
-
-        this.setState({disableTabletActions: true});
-
-        return window.api.stopTablet(id, hiveId);
-    };
-    _onResumeClick = () => {
-        const {TabletId: id, HiveId: hiveId} = this.props.tablet;
-
-        this.setState({disableTabletActions: true});
-
-        return window.api.resumeTablet(id, hiveId);
-    };
-    renderDialog = () => {
-        const {dialogVisible, typeVisibleDialog} = this.state;
-
-        if (!dialogVisible) {
-            return null;
-        }
-
-        switch (typeVisibleDialog) {
-            case 'kill': {
-                return (
-                    <CriticalActionDialog
-                        visible={dialogVisible}
-                        text="The tablet will be restarted. Do you want to proceed?"
-                        onClose={this.hideDialog}
-                        onConfirm={this._onKillClick}
-                    />
-                );
-            }
-            case 'stop': {
-                return (
-                    <CriticalActionDialog
-                        visible={dialogVisible}
-                        text="The tablet will be stopped. Do you want to proceed?"
-                        onClose={this.hideDialog}
-                        onConfirm={this._onStopClick}
-                    />
-                );
-            }
-            case 'resume': {
-                return (
-                    <CriticalActionDialog
-                        visible={dialogVisible}
-                        text="The tablet will be resumed. Do you want to proceed?"
-                        onClose={this.hideDialog}
-                        onConfirm={this._onResumeClick}
-                    />
-                );
-            }
-            default:
-                return null;
-        }
-    };
-
-    hasUptime = () => {
-        const {tablet} = this.props;
-
-        return tablet.State === 'Active';
-    };
-
-    hasHiveId = () => {
-        const {tablet} = this.props;
-        const {HiveId} = tablet;
-
-        return HiveId && HiveId !== '0';
-    };
-
-    getSchemeShard = () => {
-        const {tablet} = this.props;
-
-        return _.get(tablet, 'TenantId.SchemeShard');
-    };
-
-    isDisabledResume = () => {
-        const {tablet} = this.props;
-        const {disableTabletActions} = this.state;
-
-        if (disableTabletActions) {
-            return true;
-        }
-
-        return tablet.State !== 'Stopped' && tablet.State !== 'Dead';
-    };
-
-    isDisabledKill = () => {
-        const {disableTabletActions} = this.state;
-
-        return disableTabletActions;
-    };
-
-    isDisabledStop = () => {
-        const {tablet} = this.props;
-        const {disableTabletActions} = this.state;
-
-        if (disableTabletActions) {
-            return true;
-        }
-
-        return tablet.State === 'Stopped' || tablet.State === 'Deleted';
-    };
-
-    renderTablet = () => {
-        const {tablet, tenantPath} = this.props;
-        const {TabletId: id} = tablet;
-        const schemeShard = this.getSchemeShard();
-
-        const tabletInfo = [
-            {label: 'Database', value: tenantPath},
-            this.hasHiveId()
-                ? {
-                      label: 'HiveId',
-                      value: (
-                          <ExternalLink
-                              href={createHref(routes.tablet, {id: tablet.HiveId})}
-                              target="_blank"
-                          >
-                              {tablet.HiveId}
-                          </ExternalLink>
-                      ),
-                  }
-                : null,
-            schemeShard
-                ? {
-                      label: 'SchemeShard',
-                      value: (
-                          <ExternalLink
-                              href={createHref(routes.tablet, {id: schemeShard})}
-                              target="_blank"
-                          >
-                              {schemeShard}
-                          </ExternalLink>
-                      ),
-                  }
-                : null,
-            {label: 'Type', value: tablet.Type},
-            {label: 'State', value: tablet.State},
-            this.hasUptime() ? {label: 'Uptime', value: calcUptime(tablet.ChangeTime)} : null,
-            {label: 'Generation', value: tablet.Generation},
-            {
-                label: 'Node',
-                value: (
-                    <Link className={b('link')} to={getDefaultNodePath(String(tablet.NodeId))}>
-                        {tablet.NodeId}
-                    </Link>
-                ),
-            },
-        ].filter(Boolean);
-
-        if (tablet.SlaveId || tablet.FollowerId) {
-            tabletInfo.push({label: 'Follower', value: tablet.SlaveId || tablet.FollowerId});
-        }
-
-        const externalLinks = [
-            {
-                name: 'Internal viewer - tablet',
-                path: `/tablets?TabletID=${id}`,
-            },
-        ];
-
-        return (
-            <div className={b()}>
-                <div className={b('pane-wrapper')}>
-                    <div className={b('left-pane')}>
-                        <ul className={b('links')}>
-                            {externalLinks.map(this.renderExternalLinks)}
-                        </ul>
-                        <div className={b('row', {header: true})}>
-                            <span className={b('title')}>Tablet</span>
-                            <EntityStatus status={tablet.Overall} name={tablet.TabletId} />
-                            <a
-                                rel="noopener noreferrer"
-                                className={b('link', {external: true})}
-                                href={`${backend}/tablets?TabletID=${tablet.TabletId}`}
-                                target="_blank"
-                            >
-                                <Icon name="external" />
-                            </a>
-                            {(tablet.Master || tablet.Leader) && <Tag text="Leader" type="blue" />}
-                        </div>
-                        <InfoViewer info={tabletInfo} />
-                        <div className={b('controls')}>
-                            <Button
-                                onClick={this.showKillDialog}
-                                view="action"
-                                disabled={this.isDisabledKill()}
-                                className={b('control')}
-                            >
-                                Restart
-                            </Button>
-                            {this.hasHiveId() ? (
-                                <React.Fragment>
-                                    <Button
-                                        onClick={this.showStopDialog}
-                                        view="action"
-                                        disabled={this.isDisabledStop()}
-                                        className={b('control')}
-                                    >
-                                        Stop
-                                    </Button>
-                                    <Button
-                                        onClick={this.showResumeDialog}
-                                        view="action"
-                                        disabled={this.isDisabledResume()}
-                                        className={b('control')}
-                                    >
-                                        Resume
-                                    </Button>
-                                </React.Fragment>
-                            ) : null}
-                        </div>
-                    </div>
-                    <div className={b('rigth-pane')}>
-                        <DataTable
-                            data={this.props.history}
-                            columns={CLUSTERS_COLUMNS}
-                            settings={TABLE_SETTINGS}
-                            initialSortOrder={{
-                                columnId: 'generation',
-                                order: DataTable.DESCENDING,
-                            }}
-                        />
-                    </div>
-                </div>
-                {this.renderDialog()}
-            </div>
-        );
-    };
-
-    renderContent = () => {
-        const {tablet} = this.props;
-        return tablet && Object.keys(tablet).length
-            ? this.renderTablet()
-            : this.renderPlaceholder();
-    };
-    render() {
-        const {loading, tabletId, id} = this.props;
-        const {isFirstFetchData} = this.state;
-
-        if (this.isValidVersion()) {
-            return loading && id !== tabletId && isFirstFetchData
-                ? this.renderLoader()
-                : this.renderContent();
-        }
-
-        return null;
-    }
-}
-
-const mapStateToProps = (state, ownProps) => {
-    const {data: tablet = {}, loading, id: tabletId, history = [], tenantPath} = state.tablet;
-    const {id} = ownProps.match.params;
-    const {data: host} = state.host;
-
-    return {
-        tablet,
-        loading,
-        id,
-        tabletId,
-        history,
-        version: host.Version,
-        tenantPath,
-    };
-};
-
-const mapDispatchToProps = {
-    getTablet,
-    getTabletDescribe,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Tablet);