ydb-embedded-ui 20.2.0 → 20.3.0

package/src/containers/Tablet/Tablet.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+
+import {Flex, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {Helmet} from 'react-helmet-async';
+import {useParams} from 'react-router-dom';
+import {useQueryParams} from 'use-query-params';
+import {z} from 'zod';
+
+import {EmptyStateWrapper} from '../../components/EmptyState';
+import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {ResponseError} from '../../components/Errors/ResponseError';
+import {InternalLink} from '../../components/InternalLink';
+import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
+import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {tabletPageQueryParams, useTabletPagePath} from '../../routes';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+import {tabletApi} from '../../store/reducers/tablet';
+import {EFlag} from '../../types/api/enums';
+import type {TTabletStateInfo} from '../../types/api/tablet';
+import type {ITabletPreparedHistoryItem} from '../../types/store/tablet';
+import {cn} from '../../utils/cn';
+import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
+import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
+import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+
+import {TabletControls} from './components/TabletControls';
+import {TabletInfo} from './components/TabletInfo';
+import {TabletStorageInfo} from './components/TabletStorageInfo/TabletStorageInfo';
+import {TabletTable} from './components/TabletTable';
+import i18n from './i18n';
+import {getTabletObjectKind, hasHive} from './utils';
+
+import './Tablet.scss';
+
+const b = cn('ydb-tablet-page');
+
+const TABLET_TABS_IDS = {
+    history: 'history',
+    channels: 'channels',
+} as const;
+
+const TABLET_PAGE_TABS = [
+    {
+        id: TABLET_TABS_IDS.history,
+        get title() {
+            return i18n('label_tablet-history');
+        },
+    },
+    {
+        id: TABLET_TABS_IDS.channels,
+        get title() {
+            return i18n('label_tablet-channels');
+        },
+        isAdvanced: true,
+    },
+];
+
+const tabletTabSchema = z.nativeEnum(TABLET_TABS_IDS).catch(TABLET_TABS_IDS.history);
+
+export function Tablet() {
+    const dispatch = useTypedDispatch();
+
+    const {id} = useParams<{id: string}>();
+
+    const [{database: queryDatabase, clusterName: queryClusterName, followerId: queryFollowerId}] =
+        useQueryParams(tabletPageQueryParams);
+
+    const database = queryDatabase?.toString();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {currentData, isFetching, error} = tabletApi.useGetTabletQuery(
+        {id, database, followerId: queryFollowerId ?? undefined},
+        {pollingInterval: autoRefreshInterval},
+    );
+
+    const loading = isFetching && currentData === undefined;
+    const {data: tablet = {}, history = []} = currentData || {};
+
+    const {currentData: databaseFullPath} = tabletApi.useGetTabletDescribeQuery(
+        tablet.TenantId ? {tenantId: tablet.TenantId, database} : skipToken,
+    );
+
+    const tabletType = tablet.Type;
+
+    React.useEffect(() => {
+        dispatch(
+            setHeaderBreadcrumbs('tablet', {
+                database,
+                tabletId: id,
+                tabletType,
+                databaseName: databaseFullPath,
+            }),
+        );
+    }, [dispatch, database, id, tabletType, databaseFullPath]);
+
+    const {Leader} = tablet;
+    const metaItems: string[] = [];
+    if (databaseFullPath) {
+        metaItems.push(`${i18n('tablet.meta-database')}: ${databaseFullPath}`);
+    }
+    // Add "Tablet" instead of tablet type to metadata
+    metaItems.push(i18n('tablet.header'));
+    if (Leader === false) {
+        metaItems.push(i18n('tablet.meta-follower').toUpperCase());
+    }
+
+    return (
+        <Flex gap={5} direction="column" className={b()}>
+            <Helmet>
+                <title>{`${id} — ${i18n('tablet.header')} — ${
+                    databaseFullPath || queryClusterName || CLUSTER_DEFAULT_TITLE
+                }`}</title>
+            </Helmet>
+            <PageMetaWithAutorefresh items={metaItems} />
+            <LoaderWrapper loading={loading} size="l">
+                {error ? <ResponseError error={error} /> : null}
+                {currentData ? (
+                    <TabletContent
+                        id={id}
+                        tablet={tablet}
+                        history={history}
+                        database={database || databaseFullPath}
+                    />
+                ) : null}
+            </LoaderWrapper>
+        </Flex>
+    );
+}
+
+function TabletContent({
+    id,
+    tablet,
+    history,
+    database,
+}: {
+    id: string;
+    tablet: TTabletStateInfo;
+    history: ITabletPreparedHistoryItem[];
+    database?: string;
+}) {
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+    const isEmpty = !Object.keys(tablet).length;
+    const {Overall, HiveId, FollowerId, TabletId, Type} = tablet;
+    const objectKind = getTabletObjectKind(Type);
+    const objectQueryArgs =
+        isUserAllowedToMakeChanges && objectKind && TabletId && hasHive(HiveId) && database
+            ? {id: TabletId, hiveId: HiveId, database}
+            : skipToken;
+    const {currentData: objectPath} = tabletApi.useGetTabletObjectPathQuery(objectQueryArgs);
+    const visibleObjectPath = isUserAllowedToMakeChanges ? objectPath || undefined : undefined;
+
+    const tabletName = `${id}${FollowerId ? `.${FollowerId}` : ''}`;
+
+    return (
+        <EmptyStateWrapper
+            title={i18n('emptyState')}
+            className={b('placeholder')}
+            isEmpty={isEmpty}
+        >
+            <Flex gap={5} direction="column">
+                <EntityPageTitle
+                    entityName={Type || i18n('tablet.header')}
+                    status={Overall ?? EFlag.Grey}
+                    id={tabletName}
+                />
+                <TabletControls tablet={tablet} />
+                <TabletInfo
+                    tablet={tablet}
+                    objectPath={visibleObjectPath}
+                    objectDatabase={database}
+                />
+            </Flex>
+            <TabletTabs id={id} hiveId={HiveId} history={history} />
+        </EmptyStateWrapper>
+    );
+}
+
+function TabletTabs({
+    id,
+    hiveId,
+    history,
+}: {
+    id: string;
+    hiveId?: string;
+    history: ITabletPreparedHistoryItem[];
+}) {
+    const getTabletPagePath = useTabletPagePath();
+    const [{activeTab, ...restParams}, setParams] = useQueryParams(tabletPageQueryParams);
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+
+    const noAdvancedInfo = !isUserAllowedToMakeChanges || !hasHive(hiveId);
+
+    let tabletTab = tabletTabSchema.parse(activeTab);
+    if (noAdvancedInfo && TABLET_PAGE_TABS.find((tab) => tab.id === tabletTab)?.isAdvanced) {
+        tabletTab = TABLET_TABS_IDS.history;
+    }
+
+    React.useEffect(() => {
+        if (activeTab !== tabletTab) {
+            setParams({activeTab: tabletTab}, 'replaceIn');
+        }
+    }, [activeTab, tabletTab, setParams]);
+
+    return (
+        <Flex gap={5} direction="column">
+            {/* block wrapper fror tabs to preserve height */}
+            <div>
+                <TabProvider value={tabletTab}>
+                    <TabList size="l">
+                        {TABLET_PAGE_TABS.filter(({isAdvanced}) =>
+                            isAdvanced ? !noAdvancedInfo : true,
+                        ).map(({id: tabId, title}) => {
+                            const path = getTabletPagePath(id, {...restParams, activeTab: tabId});
+                            return (
+                                <Tab key={tabId} value={tabId}>
+                                    <InternalLink view="primary" as="tab" to={path}>
+                                        {title}
+                                    </InternalLink>
+                                </Tab>
+                            );
+                        })}
+                    </TabList>
+                </TabProvider>
+            </div>
+            {tabletTab === 'history' ? <TabletTable history={history} tabletId={id} /> : null}
+            {tabletTab === 'channels' && !noAdvancedInfo ? (
+                <Channels id={id} hiveId={hiveId} />
+            ) : null}
+        </Flex>
+    );
+}
+
+function Channels({id, hiveId}: {id: string; hiveId: string}) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {currentData, error, isFetching} = tabletApi.useGetAdvancedTableInfoQuery(
+        {id, hiveId},
+        {
+            pollingInterval: autoRefreshInterval,
+        },
+    );
+
+    const loading = isFetching && currentData === undefined;
+
+    return (
+        <LoaderWrapper loading={loading} size="l">
+            {error ? <ResponseError error={error} /> : null}
+            {currentData ? <TabletStorageInfo data={currentData} /> : null}
+        </LoaderWrapper>
+    );
+}

package/src/containers/Tablet/components/TabletControls/TabletControls.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import {ArrowRotateLeft, StopFill, TriangleRightFill} from '@gravity-ui/icons';
+import {Flex, Icon} from '@gravity-ui/uikit';
+
+import {ButtonWithConfirmDialog} from '../../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import {tabletApi} from '../../../../store/reducers/tablet';
+import {ETabletState} from '../../../../types/api/tablet';
+import type {TTabletStateInfo} from '../../../../types/api/tablet';
+import {useIsUserAllowedToMakeChanges} from '../../../../utils/hooks/useIsUserAllowedToMakeChanges';
+import i18n from '../../i18n';
+import {hasHive} from '../../utils';
+
+interface TabletControlsProps {
+    tablet: TTabletStateInfo;
+}
+
+export const TabletControls = ({tablet}: TabletControlsProps) => {
+    const {TabletId, HiveId} = tablet;
+
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+
+    const [killTablet] = tabletApi.useKillTabletMutation();
+    const [stopTablet] = tabletApi.useStopTabletMutation();
+    const [resumeTablet] = tabletApi.useResumeTabletMutation();
+
+    if (!TabletId) {
+        return null;
+    }
+
+    const hasHiveId = hasHive(HiveId);
+
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
+
+    const isDisabledResume =
+        tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
+
+    const isDisabledStop =
+        tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
+
+    return (
+        <Flex gap={2} wrap="nowrap">
+            <ButtonWithConfirmDialog
+                dialogHeader={i18n('dialog.kill-header')}
+                dialogWarning={i18n('dialog.kill-text')}
+                onConfirmAction={() => killTablet({id: TabletId}).unwrap()}
+                buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
+                withPopover
+                buttonView="normal"
+                popoverContent={i18n('controls.kill-not-allowed')}
+                popoverPlacement={'bottom'}
+                popoverDisabled={isUserAllowedToMakeChanges}
+            >
+                <Icon data={ArrowRotateLeft} />
+                {i18n('controls.kill')}
+            </ButtonWithConfirmDialog>
+            {hasHiveId && (
+                <React.Fragment>
+                    <ButtonWithConfirmDialog
+                        dialogHeader={i18n('dialog.stop-header')}
+                        dialogText={i18n('dialog.stop-text')}
+                        onConfirmAction={() => stopTablet({id: TabletId, hiveId: HiveId}).unwrap()}
+                        buttonDisabled={isDisabledStop || !isUserAllowedToMakeChanges}
+                        withPopover
+                        buttonView="normal"
+                        popoverContent={i18n('controls.stop-not-allowed')}
+                        popoverPlacement={'bottom'}
+                        popoverDisabled={isUserAllowedToMakeChanges}
+                    >
+                        <Icon data={StopFill} />
+                        {i18n('controls.stop')}
+                    </ButtonWithConfirmDialog>
+                    <ButtonWithConfirmDialog
+                        dialogHeader={i18n('dialog.resume-header')}
+                        dialogText={i18n('dialog.resume-text')}
+                        onConfirmAction={() =>
+                            resumeTablet({id: TabletId, hiveId: HiveId}).unwrap()
+                        }
+                        buttonDisabled={isDisabledResume || !isUserAllowedToMakeChanges}
+                        withPopover
+                        buttonView="normal"
+                        popoverContent={i18n('controls.resume-not-allowed')}
+                        popoverPlacement={'bottom'}
+                        popoverDisabled={isUserAllowedToMakeChanges}
+                    >
+                        <Icon data={TriangleRightFill} />
+                        {i18n('controls.resume')}
+                    </ButtonWithConfirmDialog>
+                </React.Fragment>
+            )}
+        </Flex>
+    );
+};

package/src/containers/Tablet/components/TabletControls/index.ts

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

package/src/containers/Tablet/components/TabletInfo/TabletInfo.scss

@@ -0,0 +1,12 @@
+@use '../../../../styles/mixins.scss';
+
+.ydb-tablet-info {
+    &__link {
+        @extend .link;
+    }
+
+    &__section-title {
+        margin: var(--g-spacing-1) 0 var(--g-spacing-3);
+        @include mixins.text-subheader-2();
+    }
+}

package/src/containers/Tablet/components/TabletInfo/TabletInfo.tsx

@@ -0,0 +1,168 @@
+import {Flex} from '@gravity-ui/uikit';
+import {Link} from 'react-router-dom';
+
+import {LinkToSchemaObject} from '../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import {LinkWithIcon} from '../../../../components/LinkWithIcon/LinkWithIcon';
+import {TabletState} from '../../../../components/TabletState/TabletState';
+import {TabletUptime} from '../../../../components/UptimeViewer/UptimeViewer';
+import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {getDefaultNodePath, useTabletPagePath} from '../../../../routes';
+import {ETabletState} from '../../../../types/api/tablet';
+import type {TTabletStateInfo} from '../../../../types/api/tablet';
+import {cn} from '../../../../utils/cn';
+import {
+    createTabletDeveloperUIHref,
+    useHasDeveloperUi,
+} from '../../../../utils/developerUI/developerUI';
+import {useDatabaseFromQuery} from '../../../../utils/hooks/useDatabaseFromQuery';
+import {transformPath} from '../../../Tenant/ObjectSummary/transformPath';
+import {getTabletObjectKind, hasHive} from '../../utils';
+
+import {tabletInfoKeyset} from './i18n';
+
+const b = cn('ydb-tablet-info');
+
+import './TabletInfo.scss';
+
+interface TabletInfoProps {
+    tablet: TTabletStateInfo;
+    objectPath?: string;
+    objectDatabase?: string;
+}
+
+export const TabletInfo = ({tablet, objectPath, objectDatabase}: TabletInfoProps) => {
+    const getTabletPagePath = useTabletPagePath();
+    const hasDeveloperUi = useHasDeveloperUi();
+    const database = useDatabaseFromQuery();
+
+    const {
+        ChangeTime,
+        Generation,
+        FollowerId,
+        NodeId,
+        HiveId,
+        State,
+        TenantId: {SchemeShard} = {},
+        TabletId,
+        Type,
+    } = tablet;
+
+    const hasHiveId = hasHive(HiveId);
+    const hasUptime = State === ETabletState.Active;
+    const objectKind = getTabletObjectKind(Type);
+
+    const tabletInfo: YDBDefinitionListItem[] = [];
+
+    if (objectPath && objectKind) {
+        const objectDisplayPath = objectDatabase
+            ? transformPath(objectPath, objectDatabase)
+            : objectPath;
+
+        tabletInfo.push({
+            name: tabletInfoKeyset(objectKind === 'table' ? 'field_table' : 'field_topic'),
+            content: (
+                <LinkToSchemaObject
+                    path={objectPath}
+                    database={objectDatabase}
+                    className={b('link')}
+                >
+                    {objectDisplayPath}
+                </LinkToSchemaObject>
+            ),
+        });
+    }
+
+    if (hasHiveId) {
+        tabletInfo.push({
+            name: tabletInfoKeyset('field_hive'),
+            content: (
+                <Link to={getTabletPagePath(HiveId)} className={b('link')}>
+                    {HiveId}
+                </Link>
+            ),
+        });
+    }
+
+    if (SchemeShard) {
+        tabletInfo.push({
+            name: tabletInfoKeyset('field_scheme-shard'),
+            content: (
+                <Link to={getTabletPagePath(SchemeShard)} className={b('link')}>
+                    {SchemeShard}
+                </Link>
+            ),
+        });
+    }
+
+    tabletInfo.push({
+        name: tabletInfoKeyset('field_state'),
+        content: <TabletState state={State} />,
+    });
+
+    if (hasUptime) {
+        tabletInfo.push({
+            name: tabletInfoKeyset('field_uptime'),
+            content: <TabletUptime ChangeTime={ChangeTime} />,
+        });
+    }
+
+    tabletInfo.push(
+        {name: tabletInfoKeyset('field_generation'), content: Generation},
+        {
+            name: tabletInfoKeyset('field_node'),
+            content: (
+                <Link
+                    className={b('link')}
+                    to={getDefaultNodePath({id: String(NodeId)}, {database})}
+                >
+                    {NodeId}
+                </Link>
+            ),
+        },
+    );
+
+    if (FollowerId) {
+        tabletInfo.push({name: tabletInfoKeyset('field_follower'), content: FollowerId});
+    }
+
+    const renderLinks = () => {
+        if (!hasDeveloperUi || !TabletId) {
+            return null;
+        }
+        return (
+            <div>
+                <div className={b('section-title')}>{tabletInfoKeyset('title_links')}</div>
+                <Flex direction="column" gap={3}>
+                    <LinkWithIcon
+                        title={tabletInfoKeyset('field_developer-ui-app')}
+                        url={createTabletDeveloperUIHref(TabletId, 'app')}
+                    />
+                    <LinkWithIcon
+                        title={tabletInfoKeyset('field_developer-ui-counters')}
+                        url={createTabletDeveloperUIHref(TabletId, 'counters')}
+                    />
+                    <LinkWithIcon
+                        title={tabletInfoKeyset('field_developer-ui-executor')}
+                        url={createTabletDeveloperUIHref(TabletId, 'executorInternals')}
+                    />
+                    <LinkWithIcon
+                        title={tabletInfoKeyset('field_developer-ui-state')}
+                        url={createTabletDeveloperUIHref(TabletId, undefined, 'SsId')}
+                    />
+                </Flex>
+            </div>
+        );
+    };
+
+    return (
+        <Flex gap={10} wrap="nowrap">
+            <YDBDefinitionList
+                title={tabletInfoKeyset('title_info')}
+                items={tabletInfo}
+                responsive
+            />
+            {renderLinks()}
+        </Flex>
+    );
+};

package/src/containers/Tablet/components/TabletInfo/i18n/en.json

@@ -0,0 +1,18 @@
+{
+  "field_scheme-shard": "SchemeShard",
+  "field_follower": "Follower",
+  "field_generation": "Generation",
+  "field_hive": "HiveId",
+  "field_state": "State",
+  "field_uptime": "Uptime",
+  "field_node": "Node",
+  "field_table": "Table",
+  "field_topic": "Topic",
+  "field_links": "Links",
+  "field_developer-ui-app": "App",
+  "field_developer-ui-counters": "Counters",
+  "field_developer-ui-executor": "Executor DB internals",
+  "field_developer-ui-state": "State Storage",
+  "title_info": "Info",
+  "title_links": "Links"
+}

package/src/containers/Tablet/components/TabletInfo/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tablet-info';
+
+export const tabletInfoKeyset = registerKeysets(COMPONENT, {en});

package/src/containers/Tablet/components/TabletInfo/index.ts

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

package/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss

@@ -0,0 +1,20 @@
+@use '../../../../styles/mixins.scss';
+
+.ydb-tablet-storage-info {
+    $block: &;
+
+    &__metrics-cell {
+        padding: var(--g-spacing-1) var(--g-spacing-2);
+
+        white-space: nowrap;
+    }
+    &__name-wrapper {
+        padding: var(--g-spacing-1) var(--g-spacing-2);
+    }
+    &__with-padding {
+        padding-left: calc(var(--g-spacing-2) + var(--g-spacing-6));
+    }
+    &__name-content_no-control {
+        padding-left: var(--g-spacing-6);
+    }
+}

package/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {useTable} from '@gravity-ui/table';
+import type {ExpandedState} from '@tanstack/react-table';
+
+import {Table} from '../../../../components/Table/Table';
+import type {TTabletHiveResponse} from '../../../../types/api/tablet';
+
+import {getColumns} from './columns';
+import {prepareData} from './utils';
+
+import './TabletStorageInfo.scss';
+
+interface TabletStorageInfoProps {
+    data?: TTabletHiveResponse | null;
+}
+
+export function TabletStorageInfo({data}: TabletStorageInfoProps) {
+    const [expanded, setExpanded] = React.useState<ExpandedState>({});
+    const tree = React.useMemo(() => prepareData(data), [data]);
+    const isExpandable = React.useMemo(() => tree.some((item) => item.children?.length), [tree]);
+    const columns = React.useMemo(() => getColumns(isExpandable), [isExpandable]);
+    const table = useTable({
+        columns,
+        data: tree,
+        getSubRows: (item) => item.children,
+        enableExpanding: true,
+        onExpandedChange: setExpanded,
+        state: {
+            expanded,
+        },
+    });
+    return <Table table={table} />;
+}