ydb-embedded-ui 3.4.2 → 3.4.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [3.4.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.3...v3.4.4) (2023-03-22)
+
+
+### Bug Fixes
+
+* **Diagnostics:** display nodes tab for not db entities ([a542dbc](https://github.com/ydb-platform/ydb-embedded-ui/commit/a542dbc23d01138a5c1a4126cfc1836a1543b68c))
+
+## [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

@@ -4,10 +4,11 @@ import {useDispatch} from 'react-redux';
 
 import DataTable from '@gravity-ui/react-data-table';
 
+import type {EPathType} from '../../types/api/schema';
+
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
 import {Loader} from '../../components/Loader';
-
 import {Search} from '../../components/Search';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
@@ -21,7 +22,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 {
@@ -35,6 +36,8 @@ import {
 import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
+import {isDatabaseEntityType} from '../Tenant/utils/schema';
+
 import {getNodesColumns} from './getNodesColumns';
 
 import './Nodes.scss';
@@ -48,22 +51,23 @@ interface IAdditionalNodesInfo extends Record<string, unknown> {
 }
 
 interface NodesProps {
-    tenantPath?: string;
+    path?: string;
+    type?: EPathType;
     className?: string;
     additionalNodesInfo?: IAdditionalNodesInfo;
 }
 
-export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesProps) => {
+export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
-    const isClusterNodes = !tenantPath;
+    const isClusterNodes = !path;
 
     // Since Nodes component is used in several places,
     // we need to reset filters, searchValue and loading state
     // in nodes reducer when path changes
     useEffect(() => {
         dispatch(resetNodesState());
-    }, [dispatch, tenantPath]);
+    }, [dispatch, path]);
 
     const {wasLoaded, loading, error, nodesUptimeFilter, searchValue, totalNodes} =
         useTypedSelector((state) => state.nodes);
@@ -77,12 +81,14 @@ export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesPr
     );
 
     const fetchNodes = useCallback(() => {
-        if (tenantPath && !JSON.parse(useNodesEndpoint)) {
-            dispatch(getComputeNodes(tenantPath));
+        // For not DB entities we always use /compute endpoint instead of /nodes
+        // since /nodes can return data only for tenants
+        if (path && (!JSON.parse(useNodesEndpoint) || !isDatabaseEntityType(type))) {
+            dispatch(getComputeNodes(path));
         } else {
-            dispatch(getNodes({tenant: tenantPath}));
+            dispatch(getNodes({tenant: path}));
         }
-    }, [dispatch, tenantPath, useNodesEndpoint]);
+    }, [dispatch, path, type, useNodesEndpoint]);
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 
@@ -166,6 +172,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';