Skip to content

Commit 3c1e035

Browse files
artemmufazalovartemmufazalov
authored
feat: enable drawer on cluster page (#2757)
1 parent 8ff5440 commit 3c1e035

File tree

3 files changed

+121
-110
lines changed

3 files changed

+121
-110
lines changed

‎src/components/Drawer/Drawer.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
overflow: hidden;
77

8+
width: 100%;
89
height: 100%;
910
}
1011

1112
&__item {
12-
z-index: 4;
13+
z-index: var(--gn-drawer-item-z-index);
1314

1415
height: 100%;
1516
}

‎src/containers/Cluster/Cluster.tsx‎

Lines changed: 118 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {Redirect, Route, Switch, useRouteMatch} from 'react-router-dom';
66
import {StringParam, useQueryParams} from 'use-query-params';
77

88
import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
9+
import {DrawerContextProvider} from '../../components/Drawer/DrawerContext';
910
import {EntityStatus} from '../../components/EntityStatusNew/EntityStatus';
1011
import {EFlagToDescription} from '../../components/EntityStatusNew/utils';
1112
import {InternalLink} from '../../components/InternalLink';
@@ -144,134 +145,143 @@ export function Cluster({
144145
const {appTitle} = useAppTitle();
145146

146147
return (
147-
<div className={b()} ref={container}>
148-
<Helmet
149-
defaultTitle={`${clusterTitle} — ${appTitle}`}
150-
titleTemplate={`%s — ${clusterTitle} — ${appTitle}`}
151-
>
152-
{activeTab ? <title>{activeTab.title}</title> : null}
153-
</Helmet>
154-
<div className={b('header')}>{getClusterTitle()}</div>
155-
<div className={b('sticky-wrapper')}>
156-
<AutoRefreshControl className={b('auto-refresh-control')} />
157-
</div>
158-
{isClusterDashboardAvailable && (
159-
<div className={b('dashboard')}>
160-
<ClusterOverview
161-
cluster={cluster ?? {}}
162-
groupStats={groupsStats}
163-
loading={infoLoading}
164-
error={clusterError || cluster?.error}
165-
additionalClusterProps={additionalClusterProps}
166-
/>
148+
<DrawerContextProvider>
149+
<div className={b()} ref={container}>
150+
<Helmet
151+
defaultTitle={`${clusterTitle} — ${appTitle}`}
152+
titleTemplate={`%s — ${clusterTitle} — ${appTitle}`}
153+
>
154+
{activeTab ? <title>{activeTab.title}</title> : null}
155+
</Helmet>
156+
<div className={b('header')}>{getClusterTitle()}</div>
157+
<div className={b('sticky-wrapper')}>
158+
<AutoRefreshControl className={b('auto-refresh-control')} />
167159
</div>
168-
)}
169-
<div className={b('tabs-sticky-wrapper')}>
170-
<TabProvider value={activeTabId}>
171-
<TabList size="l">
172-
{actualClusterTabs.map(({id, title}) => {
173-
const path = getClusterPath(id as ClusterTab, {clusterName, backend});
174-
return (
175-
<Tab key={id} value={id}>
176-
<InternalLink
177-
view="primary"
178-
as="tab"
179-
to={path}
180-
onClick={() => {
181-
dispatch(updateDefaultClusterTab(id));
182-
}}
183-
>
184-
{title}
185-
</InternalLink>
186-
</Tab>
187-
);
188-
})}
189-
</TabList>
190-
</TabProvider>
191-
</div>
192-
<div className={b('content')}>
193-
<Switch>
194-
<Route
195-
path={
196-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
197-
.pathname
198-
}
199-
>
200-
<TabletsTable
160+
{isClusterDashboardAvailable && (
161+
<div className={b('dashboard')}>
162+
<ClusterOverview
163+
cluster={cluster ?? {}}
164+
groupStats={groupsStats}
201165
loading={infoLoading}
202-
tablets={clusterTablets}
203-
scrollContainerRef={container}
204-
/>
205-
</Route>
206-
<Route
207-
path={
208-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
209-
.pathname
210-
}
211-
>
212-
<Tenants
213-
additionalTenantsProps={additionalTenantsProps}
214-
scrollContainerRef={container}
166+
error={clusterError || cluster?.error}
167+
additionalClusterProps={additionalClusterProps}
215168
/>
216-
</Route>
217-
<Route
218-
path={
219-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
220-
}
221-
>
222-
<Nodes
223-
scrollContainerRef={container}
224-
additionalNodesProps={additionalNodesProps}
225-
/>
226-
</Route>
227-
<Route
228-
path={
229-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
230-
.pathname
231-
}
232-
>
233-
<PaginatedStorage scrollContainerRef={container} />
234-
</Route>
235-
{shouldShowNetworkTable && (
169+
</div>
170+
)}
171+
<div className={b('tabs-sticky-wrapper')}>
172+
<TabProvider value={activeTabId}>
173+
<TabList size="l">
174+
{actualClusterTabs.map(({id, title}) => {
175+
const path = getClusterPath(id as ClusterTab, {
176+
clusterName,
177+
backend,
178+
});
179+
return (
180+
<Tab key={id} value={id}>
181+
<InternalLink
182+
view="primary"
183+
as="tab"
184+
to={path}
185+
onClick={() => {
186+
dispatch(updateDefaultClusterTab(id));
187+
}}
188+
>
189+
{title}
190+
</InternalLink>
191+
</Tab>
192+
);
193+
})}
194+
</TabList>
195+
</TabProvider>
196+
</div>
197+
<div className={b('content')}>
198+
<Switch>
236199
<Route
237200
path={
238-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.network))
201+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
239202
.pathname
240203
}
241204
>
242-
<NetworkTable
205+
<TabletsTable
206+
loading={infoLoading}
207+
tablets={clusterTablets}
208+
scrollContainerRef={container}
209+
/>
210+
</Route>
211+
<Route
212+
path={
213+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
214+
.pathname
215+
}
216+
>
217+
<Tenants
218+
additionalTenantsProps={additionalTenantsProps}
219+
scrollContainerRef={container}
220+
/>
221+
</Route>
222+
<Route
223+
path={
224+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes))
225+
.pathname
226+
}
227+
>
228+
<Nodes
243229
scrollContainerRef={container}
244230
additionalNodesProps={additionalNodesProps}
245231
/>
246232
</Route>
247-
)}
248-
<Route
249-
path={
250-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
251-
.pathname
252-
}
253-
>
254-
<VersionsContainer cluster={cluster} loading={infoLoading} />
255-
</Route>
256-
{shouldShowEventsTab && (
257233
<Route
258234
path={
259-
getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
235+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
260236
.pathname
261237
}
262238
>
263-
{uiFactory.renderEvents?.()}
239+
<PaginatedStorage scrollContainerRef={container} />
264240
</Route>
265-
)}
266-
267-
<Route
268-
render={() => (
269-
<Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
241+
{shouldShowNetworkTable && (
242+
<Route
243+
path={
244+
getLocationObjectFromHref(
245+
getClusterPath(clusterTabsIds.network),
246+
).pathname
247+
}
248+
>
249+
<NetworkTable
250+
scrollContainerRef={container}
251+
additionalNodesProps={additionalNodesProps}
252+
/>
253+
</Route>
254+
)}
255+
<Route
256+
path={
257+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
258+
.pathname
259+
}
260+
>
261+
<VersionsContainer cluster={cluster} loading={infoLoading} />
262+
</Route>
263+
{shouldShowEventsTab && (
264+
<Route
265+
path={
266+
getLocationObjectFromHref(getClusterPath(clusterTabsIds.events))
267+
.pathname
268+
}
269+
>
270+
{uiFactory.renderEvents?.()}
271+
</Route>
270272
)}
271-
/>
272-
</Switch>
273+
274+
<Route
275+
render={() => (
276+
<Redirect
277+
to={getLocationObjectFromHref(getClusterPath(activeTabId))}
278+
/>
279+
)}
280+
/>
281+
</Switch>
282+
</div>
273283
</div>
274-
</div>
284+
</DrawerContextProvider>
275285
);
276286
}
277287

‎src/styles/drawer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.g-root {
2-
--ydb-drawer-veil-z-index: 2;
2+
--ydb-drawer-veil-z-index: 10;
33
--gn-drawer-item-z-index: calc(var(--ydb-drawer-veil-z-index) + 1);
44

55
--gn-drawer-veil-z-index: var(--ydb-drawer-veil-z-index);

0 commit comments

Comments
 (0)