ydb-embedded-ui 3.4.1 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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)
+
+
+### Bug Fixes
+
+* **Partitions:** add search to consumers filter ([95e4462](https://github.com/ydb-platform/ydb-embedded-ui/commit/95e446295cb2b2729daf0d0ef719e37c7c8e0d3c))
+* **Partitions:** fix error on wrong consumer in query string ([44269fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/44269fa9240fe31c9ef69e061c20d58b2b55fae3))
+* **PDisk:** display vdisks donors ([8b39b01](https://github.com/ydb-platform/ydb-embedded-ui/commit/8b39b01e8bf62624e9e12ac0a329fda5d03cc8df))
+
 ## [3.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.0...v3.4.1) (2023-03-01)
 
 

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.scss

@@ -21,6 +21,21 @@
     &__vdisks-item {
         flex-basis: 5px;
         flex-shrink: 0;
+
+        .stack__layer {
+            background: var(--yc-color-base-background);
+
+            .data-table__row:hover & {
+                background: var(--ydb-data-table-color-hover);
+            }
+        }
+    }
+
+    &__donors-stack {
+        --ydb-stack-offset-x: 0px;
+        --ydb-stack-offset-y: -2px;
+        --ydb-stack-offset-x-hover: 0px;
+        --ydb-stack-offset-y-hover: -7px;
     }
 
     &__media-type {

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

@@ -2,6 +2,7 @@ import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {InternalLink} from '../../../components/InternalLink';
+import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
 import {getVDisksForPDisk} from '../../../store/reducers/storage';
@@ -10,6 +11,7 @@ import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
+import {isFullVDiskData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -109,19 +111,47 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
 
         return (
             <div className={b('vdisks')}>
-                {vdisks.map((vdisk) => (
-                    <div
-                        key={stringifyVdiskId(vdisk.VDiskId)}
-                        className={b('vdisks-item')}
-                        style={{
-                            // 1 is small enough for empty disks to be of the minimum width
-                            // but if all of them are empty, `flex-grow: 1` would size them evenly
-                            flexGrow: Number(vdisk.AllocatedSize) || 1,
-                        }}
-                    >
-                        <VDisk data={vdisk} compact />
-                    </div>
-                ))}
+                {vdisks.map((vdisk) => {
+                    const donors = vdisk.Donors;
+
+                    return (
+                        <div
+                            key={stringifyVdiskId(vdisk.VDiskId)}
+                            className={b('vdisks-item')}
+                            style={{
+                                // 1 is small enough for empty disks to be of the minimum width
+                                // but if all of them are empty, `flex-grow: 1` would size them evenly
+                                flexGrow: Number(vdisk.AllocatedSize) || 1,
+                            }}
+                        >
+                            {donors && donors.length ? (
+                                <Stack
+                                    className={b('donors-stack')}
+                                    key={stringifyVdiskId(vdisk.VDiskId)}
+                                >
+                                    <VDisk data={vdisk} compact />
+                                    {donors.map((donor) => {
+                                        const isFullData = isFullVDiskData(donor);
+
+                                        return (
+                                            <VDisk
+                                                compact
+                                                data={
+                                                    isFullData ? donor : {...donor, DonorMode: true}
+                                                }
+                                                key={stringifyVdiskId(
+                                                    isFullData ? donor.VDiskId : donor,
+                                                )}
+                                            />
+                                        );
+                                    })}
+                                </Stack>
+                            ) : (
+                                <VDisk data={vdisk} compact />
+                            )}
+                        </div>
+                    );
+                })}
             </div>
         );
     };

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

@@ -1,8 +1,10 @@
 .global-storage-nodes {
+    &__pdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__pdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: left;
         align-items: flex-end;
 
@@ -33,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';
@@ -128,6 +128,7 @@ function StorageNodes({
         },
         {
             name: TableColumnsIds.PDisks,
+            className: b('pdisks-column'),
             header: tableColumnsNames[TableColumnsIds.PDisks],
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>
@@ -189,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>
+    );
+};