ydb-embedded-ui 20.2.0 → 20.3.0

package/src/containers/Cluster/Cluster.scss

@@ -0,0 +1,88 @@
+@use '../../styles/mixins.scss';
+
+.ydb-cluster {
+    --cluster-side-padding: var(--g-spacing-5);
+    --sticky-tabs-height: 40px;
+    --extra-controls-right: calc(var(--cluster-side-padding) * 2);
+    --data-table-start: var(--sticky-tabs-height);
+    --ydb-table-with-controls-layout-controls-padding-top: var(--g-spacing-4);
+
+    position: relative;
+
+    overflow: auto;
+
+    width: 100%;
+    height: 100%;
+
+    &__sticky-wrapper {
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__dashboard {
+        position: sticky;
+        left: 0;
+
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__content {
+        width: calc(100% - var(--cluster-side-padding));
+        min-height: calc(100% - var(--sticky-tabs-height, 0px));
+        //allows controls of TableWithControlsLayout to stick properly
+        transform: translateX(var(--cluster-side-padding));
+    }
+
+    &__header {
+        position: sticky;
+        left: 0;
+
+        padding: var(--g-spacing-5) var(--cluster-side-padding);
+    }
+
+    &__title {
+        font-weight: var(--g-text-header-font-weight);
+        @include mixins.header-1-typography();
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--g-text-header-1-line-height);
+    }
+
+    &__tabs-sticky-wrapper {
+        z-index: 3;
+
+        margin-top: 20px;
+        padding: 0 var(--cluster-side-padding);
+        @include mixins.sticky-top();
+    }
+    &__tabs {
+        display: flex;
+        @include mixins.tabs-wrapper-styles();
+    }
+
+    &__sticky-wrapper {
+        position: sticky;
+        z-index: 4;
+        top: 74px;
+        left: 0;
+    }
+
+    &__auto-refresh-control {
+        float: right;
+
+        margin-top: -54px;
+
+        background-color: var(--g-color-base-background);
+    }
+    &__cluster-configs {
+        --ydb-configs-controls-height: 62px;
+
+        //calculate height of configs container
+        --ydb-configs-container-height: calc(
+            100vh - var(--sticky-tabs-height) - var(--header-height)
+        );
+        padding-right: var(--g-spacing-5);
+    }
+}

package/src/containers/Cluster/Cluster.tsx

@@ -0,0 +1,373 @@
+import React from 'react';
+
+import {Skeleton, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {Helmet} from 'react-helmet-async';
+import {Redirect, Route, Switch, useRouteMatch} from 'react-router-dom';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {DrawerContextProvider} from '../../components/Drawer/DrawerContext';
+import {EntityStatus} from '../../components/EntityStatus/EntityStatus';
+import {InternalLink} from '../../components/InternalLink';
+import {NetworkTable} from '../../components/NetworkTable/NetworkTable';
+import routes, {getClusterPath, getLocationObjectFromHref} from '../../routes';
+import {
+    useClusterDashboardAvailable,
+    useConfigAvailable,
+    useNodesHandlerHasWorkingClusterNetworkStats,
+} from '../../store/reducers/capabilities/hooks';
+import {
+    INITIAL_DEFAULT_CLUSTER_TAB,
+    clusterApi,
+    selectClusterTabletsWithFqdn,
+    selectClusterTitle,
+    updateDefaultClusterTab,
+    useClusterBaseInfo,
+} from '../../store/reducers/cluster/cluster';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+import type {AdditionalClusterProps, AdditionalTenantsProps} from '../../types/additionalProps';
+import {EFlag} from '../../types/api/enums';
+import {uiFactory} from '../../uiFactory/uiFactory';
+import {cn} from '../../utils/cn';
+import {DEFAULT_CLUSTER_TAB_KEY} from '../../utils/constants';
+import {isModifiedClickEvent} from '../../utils/events';
+import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useIsViewerUser} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {useSetting} from '../../utils/hooks/useSetting';
+import {useAppTitle} from '../App/AppTitleContext';
+import {Configs} from '../Configs/Configs';
+import {Nodes} from '../Nodes/Nodes';
+import {PaginatedStorage} from '../Storage/PaginatedStorage';
+import {TabletsTable} from '../Tablets/TabletsTable';
+import {TenantsClusterTab} from '../Tenants/TenantsClusterTab';
+import {VersionsContainer} from '../Versions/Versions';
+
+import {
+    ClusterDrawerHealthcheck,
+    useClusterHealthcheckQueryParams,
+} from './ClusterDrawerHealthcheck';
+import {ClusterOverview} from './ClusterOverview/ClusterOverview';
+import type {ClusterTab} from './utils';
+import {clusterTabs, clusterTabsIds, isClusterTab, useShouldShowEventsTab} from './utils';
+
+import './Cluster.scss';
+
+const b = cn('ydb-cluster');
+
+interface ClusterProps {
+    additionalTenantsProps?: AdditionalTenantsProps;
+    additionalClusterProps?: AdditionalClusterProps;
+}
+
+export function Cluster({additionalClusterProps, additionalTenantsProps}: ClusterProps) {
+    const container = React.useRef<HTMLDivElement>(null);
+    const isClusterDashboardAvailable = useClusterDashboardAvailable();
+
+    const shouldShowNetworkTable = useNodesHandlerHasWorkingClusterNetworkStats();
+    const shouldShowEventsTab = useShouldShowEventsTab();
+    const isViewerUser = useIsViewerUser();
+    const isConfigsAvailable = useConfigAvailable();
+
+    const showConfigs = isViewerUser && isConfigsAvailable;
+
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const dispatch = useTypedDispatch();
+
+    const {activeTabId, onClusterTabClick} = useClusterTab();
+    const {handleShowHealthcheckChange} = useClusterHealthcheckQueryParams();
+
+    const [{clusterName, backend}] = useQueryParams({
+        clusterName: StringParam,
+        backend: StringParam,
+    });
+
+    const viewerClusterTitle = useTypedSelector((state) =>
+        selectClusterTitle(state, clusterName ?? undefined),
+    );
+
+    const {title: metaClusterTitle} = useClusterBaseInfo();
+
+    const clusterTitle = metaClusterTitle ?? viewerClusterTitle;
+
+    const {
+        data: {clusterData: cluster, groupsStats} = {},
+        isLoading: infoLoading,
+        error,
+    } = clusterApi.useGetClusterInfoQuery(clusterName ?? undefined, {
+        pollingInterval: autoRefreshInterval,
+    });
+
+    const clusterError = error && typeof error === 'object' ? error : undefined;
+
+    const clusterTablets = useTypedSelector((state) =>
+        selectClusterTabletsWithFqdn(state, clusterName ?? undefined),
+    );
+
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('cluster', {}));
+    }, [dispatch]);
+
+    const actualClusterTabs = React.useMemo(() => {
+        const skippedTabs: ClusterTab[] = [];
+
+        if (!shouldShowNetworkTable) {
+            skippedTabs.push(clusterTabsIds.network);
+        }
+        if (!shouldShowEventsTab) {
+            skippedTabs.push(clusterTabsIds.events);
+        }
+        if (!showConfigs) {
+            skippedTabs.push(clusterTabsIds.configs);
+        }
+
+        return clusterTabs.filter((el) => !skippedTabs.includes(el.id));
+    }, [shouldShowEventsTab, shouldShowNetworkTable, showConfigs]);
+
+    const handleStatusClick = React.useCallback(() => {
+        handleShowHealthcheckChange(true);
+    }, [handleShowHealthcheckChange]);
+
+    const getClusterTitle = () => {
+        if (infoLoading) {
+            return <Skeleton className={b('title-skeleton')} />;
+        }
+        const clusterStatus = cluster?.Overall || EFlag.Grey;
+
+        return (
+            <EntityStatus className={b('title')}>
+                {clusterTitle}
+                <EntityStatus.Label status={clusterStatus} onClick={handleStatusClick} />
+            </EntityStatus>
+        );
+    };
+
+    const activeTab = React.useMemo(
+        () => actualClusterTabs.find(({id}) => id === activeTabId),
+        [activeTabId, actualClusterTabs],
+    );
+
+    const {appTitle} = useAppTitle();
+
+    return (
+        <DrawerContextProvider>
+            <ClusterDrawerHealthcheck
+                database={cluster?.Domain || ''}
+                clusterName={clusterName ?? undefined}
+            >
+                <div className={b()} ref={container}>
+                    <Helmet
+                        defaultTitle={`${clusterTitle} — ${appTitle}`}
+                        titleTemplate={`%s — ${clusterTitle} — ${appTitle}`}
+                    >
+                        {activeTab ? <title>{activeTab.title}</title> : null}
+                    </Helmet>
+                    <div className={b('header')}>{getClusterTitle()}</div>
+                    <div className={b('sticky-wrapper')}>
+                        <AutoRefreshControl className={b('auto-refresh-control')} />
+                    </div>
+                    {isClusterDashboardAvailable && (
+                        <div className={b('dashboard')}>
+                            <ClusterOverview
+                                cluster={cluster ?? {}}
+                                groupStats={groupsStats}
+                                loading={infoLoading}
+                                error={clusterError || cluster?.error}
+                                additionalClusterProps={additionalClusterProps}
+                            />
+                        </div>
+                    )}
+                    <div className={b('tabs-sticky-wrapper')}>
+                        <TabProvider value={activeTabId}>
+                            <TabList size="l">
+                                {actualClusterTabs.map(({id, title}) => {
+                                    const path = getClusterPath(
+                                        {activeTab: id as ClusterTab},
+                                        {
+                                            clusterName,
+                                            backend,
+                                        },
+                                    );
+                                    return (
+                                        <Tab key={id} value={id}>
+                                            <InternalLink
+                                                view="primary"
+                                                as="tab"
+                                                to={path}
+                                                data-cluster-tab-id={id}
+                                                onClick={onClusterTabClick}
+                                            >
+                                                {title}
+                                            </InternalLink>
+                                        </Tab>
+                                    );
+                                })}
+                            </TabList>
+                        </TabProvider>
+                    </div>
+                    <div className={b('content')}>
+                        <Switch>
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath({activeTab: clusterTabsIds.tablets}),
+                                    ).pathname
+                                }
+                            >
+                                <TabletsTable
+                                    loading={infoLoading}
+                                    tablets={clusterTablets}
+                                    scrollContainerRef={container}
+                                />
+                            </Route>
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath({activeTab: clusterTabsIds.tenants}),
+                                    ).pathname
+                                }
+                            >
+                                <TenantsClusterTab
+                                    additionalTenantsProps={additionalTenantsProps}
+                                    scrollContainerRef={container}
+                                />
+                            </Route>
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath({activeTab: clusterTabsIds.nodes}),
+                                    ).pathname
+                                }
+                            >
+                                <Nodes scrollContainerRef={container} />
+                            </Route>
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath({activeTab: clusterTabsIds.storage}),
+                                    ).pathname
+                                }
+                            >
+                                <PaginatedStorage scrollContainerRef={container} />
+                            </Route>
+                            {shouldShowNetworkTable && (
+                                <Route
+                                    path={
+                                        getLocationObjectFromHref(
+                                            getClusterPath({activeTab: clusterTabsIds.network}),
+                                        ).pathname
+                                    }
+                                >
+                                    <NetworkTable scrollContainerRef={container} />
+                                </Route>
+                            )}
+                            <Route
+                                path={
+                                    getLocationObjectFromHref(
+                                        getClusterPath({activeTab: clusterTabsIds.versions}),
+                                    ).pathname
+                                }
+                            >
+                                <VersionsContainer cluster={cluster} loading={infoLoading} />
+                            </Route>
+                            {shouldShowEventsTab && (
+                                <Route
+                                    path={
+                                        getLocationObjectFromHref(
+                                            getClusterPath({activeTab: clusterTabsIds.events}),
+                                        ).pathname
+                                    }
+                                >
+                                    {uiFactory.renderEvents?.({scrollContainerRef: container})}
+                                </Route>
+                            )}
+                            {showConfigs && (
+                                <Route
+                                    path={
+                                        getLocationObjectFromHref(
+                                            getClusterPath({activeTab: clusterTabsIds.configs}),
+                                        ).pathname
+                                    }
+                                >
+                                    <Configs
+                                        className={b('cluster-configs')}
+                                        scrollContainerRef={container}
+                                    />
+                                </Route>
+                            )}
+
+                            <Route
+                                render={() => (
+                                    <Redirect
+                                        to={getLocationObjectFromHref(
+                                            getClusterPath({activeTab: activeTabId}),
+                                        )}
+                                    />
+                                )}
+                            />
+                        </Switch>
+                    </div>
+                </div>
+            </ClusterDrawerHealthcheck>
+        </DrawerContextProvider>
+    );
+}
+
+function useClusterTab() {
+    const dispatch = useTypedDispatch();
+
+    const defaultTabFromStore = useTypedSelector((state) => state.cluster.defaultClusterTab);
+    const [savedDefaultTab, setSavedDefaultTab] = useSetting<string | undefined>(
+        DEFAULT_CLUSTER_TAB_KEY,
+        INITIAL_DEFAULT_CLUSTER_TAB,
+    );
+    const savedDefaultTabValidated = React.useMemo(() => {
+        return isClusterTab(savedDefaultTab) ? savedDefaultTab : undefined;
+    }, [savedDefaultTab]);
+    const defaultTab = savedDefaultTabValidated ?? defaultTabFromStore;
+
+    const shouldShowNetworkTable = useNodesHandlerHasWorkingClusterNetworkStats();
+    const shouldShowEventsTab = useShouldShowEventsTab();
+
+    const match = useRouteMatch<{activeTab: string}>(routes.cluster);
+
+    const {activeTab: activeTabFromParams} = match?.params || {};
+    let activeTab: ClusterTab;
+
+    const shouldSwitchFromNetworkToDefault =
+        !shouldShowNetworkTable && activeTabFromParams === clusterTabsIds.network;
+    const shouldSwitchFromEventsToDefault =
+        !shouldShowEventsTab && activeTabFromParams === clusterTabsIds.events;
+
+    if (shouldSwitchFromNetworkToDefault || shouldSwitchFromEventsToDefault) {
+        activeTab = INITIAL_DEFAULT_CLUSTER_TAB;
+    } else if (isClusterTab(activeTabFromParams)) {
+        activeTab = activeTabFromParams;
+    } else {
+        activeTab = defaultTab;
+    }
+
+    const onClusterTabClick = React.useCallback(
+        (event: React.MouseEvent<HTMLElement>) => {
+            if (isModifiedClickEvent(event)) {
+                return;
+            }
+
+            const rawTabId = event.currentTarget.getAttribute('data-cluster-tab-id');
+            if (!rawTabId || !isClusterTab(rawTabId)) {
+                return;
+            }
+
+            if (rawTabId !== defaultTabFromStore) {
+                dispatch(updateDefaultClusterTab(rawTabId));
+            }
+
+            if (rawTabId !== savedDefaultTabValidated) {
+                setSavedDefaultTab(rawTabId);
+            }
+        },
+        [defaultTabFromStore, dispatch, savedDefaultTabValidated, setSavedDefaultTab],
+    );
+
+    return {activeTabId: activeTab, onClusterTabClick} as const;
+}

package/src/containers/Cluster/ClusterDrawerHealthcheck.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import {BooleanParam, StringParam, useQueryParams} from 'use-query-params';
+
+import {
+    selectAllHealthcheckInfo,
+    selectCheckStatus,
+} from '../../store/reducers/healthcheckInfo/healthcheckInfo';
+import {useTypedSelector} from '../../utils/hooks';
+import {Healthcheck} from '../Tenant/Healthcheck/Healthcheck';
+import {HealthcheckDrawer} from '../Tenant/Healthcheck/components/HealthcheckDrawer';
+
+import i18n from './i18n';
+
+interface ClusterDrawerHealthcheckProps {
+    children: React.ReactNode;
+    database: string;
+    clusterName?: string;
+}
+
+export function useClusterHealthcheckQueryParams() {
+    const [{showHealthcheck, issuesFilter, view}, setQueryParams] = useQueryParams({
+        showHealthcheck: BooleanParam,
+        issuesFilter: StringParam,
+        view: StringParam,
+    });
+
+    const handleShowHealthcheckChange = React.useCallback(
+        (value?: boolean) => {
+            setQueryParams({showHealthcheck: value || undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleIssuesFilterChange = React.useCallback(
+        (value?: string) => {
+            setQueryParams({issuesFilter: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    const handleHealthcheckViewChange = React.useCallback(
+        (value?: string) => {
+            setQueryParams({view: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+
+    return {
+        showHealthcheck,
+        handleShowHealthcheckChange,
+        issuesFilter,
+        handleIssuesFilterChange,
+        view,
+        handleHealthcheckViewChange,
+    };
+}
+
+export function ClusterDrawerHealthcheck({
+    children,
+    database,
+    clusterName,
+}: ClusterDrawerHealthcheckProps) {
+    const {
+        handleShowHealthcheckChange,
+        showHealthcheck,
+        handleIssuesFilterChange,
+        handleHealthcheckViewChange,
+    } = useClusterHealthcheckQueryParams();
+
+    const healthcheckStatus = useTypedSelector((state) =>
+        selectCheckStatus(state, database, clusterName),
+    );
+
+    const healthcheckData = useTypedSelector((state) =>
+        selectAllHealthcheckInfo(state, database, clusterName),
+    );
+
+    const handleCloseDrawer = React.useCallback(() => {
+        handleShowHealthcheckChange(false);
+        handleIssuesFilterChange(undefined);
+        handleHealthcheckViewChange(undefined);
+    }, [handleShowHealthcheckChange, handleIssuesFilterChange, handleHealthcheckViewChange]);
+
+    const renderDrawerContent = React.useCallback(() => {
+        return <Healthcheck database={database} clusterName={clusterName} scope="cluster" />;
+    }, [clusterName, database]);
+
+    return (
+        <HealthcheckDrawer
+            isDrawerVisible={Boolean(showHealthcheck) && Boolean(database)}
+            onCloseDrawer={handleCloseDrawer}
+            renderDrawerContent={renderDrawerContent}
+            drawerId="cluster-healthcheck-details"
+            storageKey="cluster-healthcheck-details-drawer-width"
+            title={i18n('title_healthcheck-dashboard')}
+            status={healthcheckStatus}
+            healthcheckData={healthcheckData}
+            downloadFilePrefix={`${database}-healthcheck`}
+            downloadTooltip={i18n('action_download-healthcheck')}
+            isDownloadDisabled={!healthcheckData}
+        >
+            {children}
+        </HealthcheckDrawer>
+    );
+}

package/src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -0,0 +1,92 @@
+@use '../../../styles/mixins';
+
+.cluster-info {
+    --g-definition-list-item-gap: var(--g-spacing-3);
+    --cluster-overview-section: 652px;
+    --cluster-overview-vertical-padding: var(--g-spacing-4);
+
+    padding: var(--g-spacing-4) 0 var(--g-spacing-2);
+
+    @include mixins.body-2-typography();
+
+    &__skeleton-title {
+        width: 100px;
+        height: 20px;
+    }
+
+    &__skeleton-section {
+        width: 100%;
+        height: 164px;
+
+        @container overview-wrapper (min-width: 804px) {
+            width: var(--cluster-overview-section);
+        }
+    }
+
+    &__sections {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+
+        @container overview-wrapper (min-width: 1342px) {
+            display: grid;
+            align-items: start;
+            grid-template-areas:
+                'details storage'
+                'bridge storage';
+            grid-template-columns: auto 1fr;
+        }
+
+        &_no-details {
+            @container overview-wrapper (min-width: 1342px) {
+                grid-template-areas: 'storage' 'bridge';
+                grid-template-columns: auto;
+            }
+        }
+    }
+
+    &__detail-section {
+        @container overview-wrapper (min-width: 1104px) {
+            grid-area: details;
+        }
+    }
+
+    &__storage-section {
+        --g-card-border-radius: var(--g-border-radius-s);
+        @container overview-wrapper (min-width: 1104px) {
+            grid-area: storage;
+        }
+    }
+
+    &__bridge-section {
+        @container overview-wrapper (min-width: 1104px) {
+            grid-area: bridge;
+        }
+    }
+
+    &__section {
+        width: 100%;
+        padding: var(--cluster-overview-vertical-padding);
+
+        @container overview-wrapper (min-width: 804px) {
+            width: var(--cluster-overview-section);
+            min-width: var(--cluster-overview-section);
+        }
+    }
+
+    &__section_compact {
+        padding: var(--g-spacing-3) var(--cluster-overview-vertical-padding);
+    }
+
+    &__details {
+        @include mixins.body-1-typography();
+        @container overview-wrapper (min-width: 804px) {
+            max-width: calc(
+                var(--cluster-overview-section) - var(--cluster-overview-vertical-padding) * 2
+            );
+        }
+    }
+    &__details-value {
+        word-break: break-all;
+    }
+}