Skip to content

Commit 30f8bc5

Browse files
artemmufazalovartemmufazalov
authored
fix(Cluster): make global scroll (#470)
1 parent a189b8c commit 30f8bc5

File tree

15 files changed

+164
-147
lines changed

15 files changed

+164
-147
lines changed

‎src/components/TableWithControlsLayout/TableWithControlsLayout.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import '../../styles/mixins.scss';
2+
3+
.ydb-table-with-controls-layout {
4+
display: inline-block;
5+
6+
box-sizing: border-box;
7+
min-width: 100%;
8+
9+
&__controls-wrapper {
10+
z-index: 3;
11+
12+
box-sizing: border-box;
13+
width: 100%;
14+
15+
@include sticky-top();
16+
}
17+
18+
&__controls {
19+
z-index: 3;
20+
21+
width: max-content;
22+
height: 62px;
23+
24+
@include controls();
25+
@include sticky-top();
26+
}
27+
28+
.data-table__sticky_moving {
29+
// Place table head right after controls
30+
top: 62px !important;
31+
}
32+
}

‎src/components/TableWithControlsLayout/TableWithControlsLayout.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import type {ReactNode} from 'react';
2+
import block from 'bem-cn-lite';
3+
4+
import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
5+
6+
import './TableWithControlsLayout.scss';
7+
8+
const b = block('ydb-table-with-controls-layout');
9+
10+
interface TableWithControlsLayoutItemProps {
11+
children: ReactNode;
12+
className?: string;
13+
}
14+
15+
interface TableProps extends TableWithControlsLayoutItemProps {
16+
loading?: boolean;
17+
}
18+
19+
export const TableWithControlsLayout = ({
20+
children,
21+
className,
22+
}: TableWithControlsLayoutItemProps) => {
23+
return <div className={b(null, className)}>{children}</div>;
24+
};
25+
26+
TableWithControlsLayout.Controls = function TableControls({
27+
children,
28+
className,
29+
}: TableWithControlsLayoutItemProps) {
30+
return (
31+
<div className={b('controls-wrapper')}>
32+
<div className={b('controls', className)}>{children}</div>
33+
</div>
34+
);
35+
};
36+
37+
TableWithControlsLayout.Table = function Table({children, loading, className}: TableProps) {
38+
if (loading) {
39+
return <TableSkeleton className={b('loader')} />;
40+
}
41+
42+
return <div className={b('table', className)}>{children}</div>;
43+
};

‎src/containers/Cluster/Cluster.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
flex-grow: 1;
66

77
height: 100%;
8-
padding: 20px 20px 0px;
8+
padding: 0 20px;
99

1010
@include flex-container();
1111

12-
&__content {
13-
overflow: auto;
14-
15-
height: 100%;
12+
&__tabs {
13+
position: sticky;
14+
left: 0;
1615
}
1716
}

‎src/containers/Cluster/Cluster.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ function Cluster({
142142
additionalClusterProps={additionalClusterProps}
143143
/>
144144

145-
<div>
145+
<div className={b('tabs')}>
146146
<Tabs
147147
size="l"
148148
allowNotSelected={true}
@@ -164,7 +164,7 @@ function Cluster({
164164
/>
165165
</div>
166166

167-
<div className={b('content')}>{renderTab()}</div>
167+
<div>{renderTab()}</div>
168168
</div>
169169
);
170170
}

‎src/containers/Cluster/ClusterInfo/ClusterInfo.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
@import '../../../styles/mixins';
22

33
.cluster-info {
4+
position: sticky;
5+
left: 0;
6+
47
width: 100%;
8+
padding-top: 20px;
59

610
&__header {
711
display: flex;

‎src/containers/Nodes/Nodes.scss‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,18 @@
11
@import '../../styles/mixins.scss';
22

33
.ydb-nodes {
4-
overflow: auto;
5-
flex-grow: 1;
6-
7-
height: 100%;
8-
9-
@include flex-container();
10-
114
&__search {
125
@include search();
136
}
147

15-
&__controls {
16-
@include controls();
17-
}
18-
198
&__show-all-wrapper {
209
position: sticky;
2110
left: 0;
2211

2312
margin-bottom: 15px;
2413
}
2514

26-
&__table-wrapper {
27-
overflow: auto;
28-
@include flex-container();
29-
}
30-
31-
&__table-content {
32-
overflow: auto;
33-
34-
height: 100%;
35-
36-
@include freeze-nth-column(1);
37-
@include freeze-nth-column(2, 80px);
38-
15+
&__table {
3916
@include table-styles;
4017
@include table-sticky-styles;
4118
}

‎src/containers/Nodes/Nodes.tsx‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import type {ProblemFilterValue} from '../../store/reducers/settings/types';
99

1010
import {AccessDenied} from '../../components/Errors/403';
1111
import {Illustration} from '../../components/Illustration';
12-
import {Loader} from '../../components/Loader';
1312
import {Search} from '../../components/Search';
1413
import {ProblemFilter} from '../../components/ProblemFilter';
1514
import {UptimeFilter} from '../../components/UptimeFIlter';
1615
import {EntitiesCount} from '../../components/EntitiesCount';
16+
import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
17+
import {ResponseError} from '../../components/Errors/ResponseError';
1718

1819
import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
1920
import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
@@ -42,11 +43,10 @@ const b = cn('ydb-nodes');
4243
interface NodesProps {
4344
path?: string;
4445
type?: EPathType;
45-
className?: string;
4646
additionalNodesInfo?: AdditionalNodesInfo;
4747
}
4848

49-
export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesProps) => {
49+
export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
5050
const dispatch = useDispatch();
5151

5252
const isClusterNodes = !path;
@@ -93,7 +93,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
9393

9494
const renderControls = () => {
9595
return (
96-
<div className={b('controls')}>
96+
<>
9797
<Search
9898
onChange={handleSearchQueryChange}
9999
placeholder="Host name"
@@ -108,7 +108,7 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
108108
label={'Nodes'}
109109
loading={loading && !wasLoaded}
110110
/>
111-
</div>
111+
</>
112112
);
113113
};
114114

@@ -127,44 +127,34 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
127127
}
128128

129129
return (
130-
<div className={b('table-wrapper')}>
131-
<div className={b('table-content')}>
132-
<DataTable
133-
theme="yandex-cloud"
134-
data={nodes || []}
135-
columns={columns}
136-
settings={DEFAULT_TABLE_SETTINGS}
137-
initialSortOrder={{
138-
columnId: 'NodeId',
139-
order: DataTable.ASCENDING,
140-
}}
141-
emptyDataMessage={i18n('empty.default')}
142-
rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
143-
/>
144-
</div>
145-
</div>
130+
<DataTable
131+
theme="yandex-cloud"
132+
data={nodes || []}
133+
columns={columns}
134+
settings={DEFAULT_TABLE_SETTINGS}
135+
initialSortOrder={{
136+
columnId: 'NodeId',
137+
order: DataTable.ASCENDING,
138+
}}
139+
emptyDataMessage={i18n('empty.default')}
140+
rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
141+
/>
146142
);
147143
};
148144

149-
const renderContent = () => {
150-
return (
151-
<div className={b(null, className)}>
152-
{renderControls()}
153-
{renderTable()}
154-
</div>
155-
);
156-
};
157-
158-
if (loading && !wasLoaded) {
159-
return <Loader size={isClusterNodes ? 'l' : 'm'} />;
160-
}
161-
162145
if (error) {
163146
if (error.status === 403) {
164147
return <AccessDenied />;
165148
}
166-
return <div>{error.statusText}</div>;
149+
return <ResponseError error={error} />;
167150
}
168151

169-
return renderContent();
152+
return (
153+
<TableWithControlsLayout>
154+
<TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
155+
<TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
156+
{renderTable()}
157+
</TableWithControlsLayout.Table>
158+
</TableWithControlsLayout>
159+
);
170160
};

‎src/containers/Storage/Storage.scss‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
@import '../../styles/mixins.scss';
22

33
.global-storage {
4-
height: 100%;
5-
max-height: 100%;
6-
@include flex-container;
7-
8-
&__controls {
9-
@include controls();
10-
}
114
&__search {
125
@include search();
136
}
147

15-
&__table-wrapper {
16-
overflow: auto;
17-
flex-grow: 1;
18-
19-
font-size: var(--yc-text-body-2-font-size);
20-
line-height: var(--yc-text-body-2-line-height);
21-
8+
&__table {
229
.yc-tooltip {
2310
// stylelint-disable-next-line declaration-no-important
2411
height: var(--yc-text-body-2-line-height) !important;

0 commit comments

Comments
 (0)