Skip to content

feat: enable drawer on cluster page #2757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 25, 2025
Merged

feat: enable drawer on cluster page #2757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/Drawer/Drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@

overflow: hidden;

width: 100%;
height: 100%;
}

&__item {
z-index: 4;
z-index: var(--gn-drawer-item-z-index);

height: 100%;
}
Expand Down
226 changes: 118 additions & 108 deletions src/containers/Cluster/Cluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ 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/EntityStatusNew/EntityStatus';
import {EFlagToDescription} from '../../components/EntityStatusNew/utils';
import {InternalLink} from '../../components/InternalLink';
Expand Down Expand Up @@ -144,134 +145,143 @@ export function Cluster({
const {appTitle} = useAppTitle();

return (
<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}
/>
<DrawerContextProvider>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapped content in DrawerContextProvider, no other changes

<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>
)}
<div className={b('tabs-sticky-wrapper')}>
<TabProvider value={activeTabId}>
<TabList size="l">
{actualClusterTabs.map(({id, title}) => {
const path = getClusterPath(id as ClusterTab, {clusterName, backend});
return (
<Tab key={id} value={id}>
<InternalLink
view="primary"
as="tab"
to={path}
onClick={() => {
dispatch(updateDefaultClusterTab(id));
}}
>
{title}
</InternalLink>
</Tab>
);
})}
</TabList>
</TabProvider>
</div>
<div className={b('content')}>
<Switch>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
.pathname
}
>
<TabletsTable
{isClusterDashboardAvailable && (
<div className={b('dashboard')}>
<ClusterOverview
cluster={cluster ?? {}}
groupStats={groupsStats}
loading={infoLoading}
tablets={clusterTablets}
scrollContainerRef={container}
/>
</Route>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
.pathname
}
>
<Tenants
additionalTenantsProps={additionalTenantsProps}
scrollContainerRef={container}
error={clusterError || cluster?.error}
additionalClusterProps={additionalClusterProps}
/>
</Route>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
}
>
<Nodes
scrollContainerRef={container}
additionalNodesProps={additionalNodesProps}
/>
</Route>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
.pathname
}
>
<PaginatedStorage scrollContainerRef={container} />
</Route>
{shouldShowNetworkTable && (
</div>
)}
<div className={b('tabs-sticky-wrapper')}>
<TabProvider value={activeTabId}>
<TabList size="l">
{actualClusterTabs.map(({id, title}) => {
const path = getClusterPath(id as ClusterTab, {
clusterName,
backend,
});
return (
<Tab key={id} value={id}>
<InternalLink
view="primary"
as="tab"
to={path}
onClick={() => {
dispatch(updateDefaultClusterTab(id));
}}
>
{title}
</InternalLink>
</Tab>
);
})}
</TabList>
</TabProvider>
</div>
<div className={b('content')}>
<Switch>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.network))
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
.pathname
}
>
<NetworkTable
<TabletsTable
loading={infoLoading}
tablets={clusterTablets}
scrollContainerRef={container}
/>
</Route>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
.pathname
}
>
<Tenants
additionalTenantsProps={additionalTenantsProps}
scrollContainerRef={container}
/>
</Route>
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes))
.pathname
}
>
<Nodes
scrollContainerRef={container}
additionalNodesProps={additionalNodesProps}
/>
</Route>
)}
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
.pathname
}
>
<VersionsContainer cluster={cluster} loading={infoLoading} />
</Route>
{shouldShowEventsTab && (
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
.pathname
}
>
{uiFactory.renderEvents?.()}
<PaginatedStorage scrollContainerRef={container} />
</Route>
)}

<Route
render={() => (
<Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
{shouldShowNetworkTable && (
<Route
path={
getLocationObjectFromHref(
getClusterPath(clusterTabsIds.network),
).pathname
}
>
<NetworkTable
scrollContainerRef={container}
additionalNodesProps={additionalNodesProps}
/>
</Route>
)}
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
.pathname
}
>
<VersionsContainer cluster={cluster} loading={infoLoading} />
</Route>
{shouldShowEventsTab && (
<Route
path={
getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
.pathname
}
>
{uiFactory.renderEvents?.()}
</Route>
)}
/>
</Switch>

<Route
render={() => (
<Redirect
to={getLocationObjectFromHref(getClusterPath(activeTabId))}
/>
)}
/>
</Switch>
</div>
</div>
</div>
</DrawerContextProvider>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/styles/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.g-root {
--ydb-drawer-veil-z-index: 2;
--ydb-drawer-veil-z-index: 10;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's needed to ensure autorefresh control will be behind drawer on Cluster page

--gn-drawer-item-z-index: calc(var(--ydb-drawer-veil-z-index) + 1);

--gn-drawer-veil-z-index: var(--ydb-drawer-veil-z-index);
Expand Down
Loading