Skip to content

Commit 21ccb63

Browse files
RaubzeugRaubzeug
committed
feat(Partitions): partition id is string now
1 parent b6d7601 commit 21ccb63

File tree

7 files changed

+74
-42
lines changed

7 files changed

+74
-42
lines changed

‎src/components/MultilineTableHeader/MultilineTableHeader.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.ydb-mulitiline-table-header {
2+
white-space: normal;
3+
}

‎src/components/MultilineTableHeader/MultilineTableHeader.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {cn} from '../../utils/cn';
2+
3+
import './MultilineTableHeader.scss';
4+
5+
const b = cn('ydb-mulitiline-table-header');
6+
7+
interface MultilineTableHeaderProps {
8+
title?: string;
9+
}
10+
11+
export function MultilineTableHeader({title}: MultilineTableHeaderProps) {
12+
if (!title) {
13+
return null;
14+
}
15+
return <div className={b()}>{title}</div>;
16+
}

‎src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.ydb-diagnostics-partitions-columns-header {
2-
&__multiline {
3-
white-space: normal;
4-
}
5-
62
&__read-session {
73
width: 80px;
84

‎src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@ import './Headers.scss';
88

99
const b = cn('ydb-diagnostics-partitions-columns-header');
1010

11-
interface MultilineHeaderProps {
12-
title: string;
13-
}
14-
15-
export const MultilineHeader = ({title}: MultilineHeaderProps) => (
16-
<div className={b('multiline')}>{title}</div>
17-
);
18-
1911
export const ReadSessionHeader = () => (
2012
<div className={b('read-session')}>
2113
{PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID]}

‎src/containers/Tenant/Diagnostics/Partitions/Partitions.scss‎

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

77
height: 100%;
8+
margin-right: -20px;
89

910
@include mixins.flex-container();
1011

1112
&__controls {
12-
@include mixins.controls();
13+
width: 100%;
1314
}
1415

1516
&__consumer-select {
@@ -30,17 +31,6 @@
3031
}
3132
}
3233

33-
&__table-wrapper {
34-
overflow: auto;
35-
@include mixins.flex-container();
36-
}
37-
38-
&__table-content {
39-
overflow: auto;
40-
41-
height: 100%;
42-
}
43-
4434
&__table {
4535
@include mixins.freeze-nth-column(1);
4636
}

‎src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import {skipToken} from '@reduxjs/toolkit/query';
55
import {ResponseError} from '../../../../components/Errors/ResponseError';
66
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
77
import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
8+
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
89
import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
910
import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
10-
import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic';
11+
import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic/topic';
1112
import {cn} from '../../../../utils/cn';
1213
import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants';
1314
import {
@@ -136,12 +137,15 @@ export const Partitions = ({path, database}: PartitionsProps) => {
136137
};
137138

138139
return (
139-
<div className={b()}>
140-
<div className={b('controls')}>{renderControls()}</div>
141-
{error ? <ResponseError error={error} /> : null}
142-
<div className={b('table-wrapper')}>
143-
<div className={b('table-content')}>{partitionsData ? renderContent() : null}</div>
144-
</div>
145-
</div>
140+
<TableWithControlsLayout className={b()}>
141+
<TableWithControlsLayout.Controls className={b('controls')}>
142+
{renderControls()}
143+
</TableWithControlsLayout.Controls>
144+
145+
<TableWithControlsLayout.Table>
146+
{error ? <ResponseError error={error} /> : null}
147+
{partitionsData ? renderContent() : null}
148+
</TableWithControlsLayout.Table>
149+
</TableWithControlsLayout>
146150
);
147151
};

‎src/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import type {Column} from '@gravity-ui/react-data-table';
22
import DataTable from '@gravity-ui/react-data-table';
33

44
import {EntityStatus} from '../../../../../components/EntityStatus/EntityStatus';
5+
import {MultilineTableHeader} from '../../../../../components/MultilineTableHeader/MultilineTableHeader';
56
import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
7+
import {useTopicDataAvailable} from '../../../../../store/reducers/capabilities/hooks';
8+
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
69
import {cn} from '../../../../../utils/cn';
710
import {formatBytes, formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
811
import {isNumeric} from '../../../../../utils/utils';
912
import {getDefaultNodePath} from '../../../../Node/NodePages';
13+
import {useDiagnosticsPageLinkGetter} from '../../DiagnosticsPages';
1014
import {
11-
MultilineHeader,
1215
ReadLagsHeader,
1316
ReadSessionHeader,
1417
UncommitedMessagesHeader,
@@ -36,19 +39,22 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
3639
{
3740
name: PARTITIONS_COLUMNS_IDS.PARTITION_ID,
3841
header: (
39-
<MultilineHeader
42+
<MultilineTableHeader
4043
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_ID]}
4144
/>
4245
),
4346
sortAccessor: (row) => isNumeric(row.partitionId) && Number(row.partitionId),
4447
align: DataTable.LEFT,
45-
render: ({row}) => row.partitionId,
48+
render: ({row}) => <PartitionId id={row.partitionId} />,
4649
},
4750
{
4851
name: PARTITIONS_COLUMNS_IDS.STORE_SIZE,
4952
header: (
50-
<MultilineHeader title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.STORE_SIZE]} />
53+
<MultilineTableHeader
54+
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.STORE_SIZE]}
55+
/>
5156
),
57+
sortAccessor: (row) => isNumeric(row.storeSize) && Number(row.storeSize),
5258
align: DataTable.RIGHT,
5359
render: ({row}) => formatBytes(row.storeSize),
5460
},
@@ -137,7 +143,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
137143
{
138144
name: PARTITIONS_COLUMNS_IDS.START_OFFSET,
139145
header: (
140-
<MultilineHeader
146+
<MultilineTableHeader
141147
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.START_OFFSET]}
142148
/>
143149
),
@@ -148,7 +154,9 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
148154
{
149155
name: PARTITIONS_COLUMNS_IDS.END_OFFSET,
150156
header: (
151-
<MultilineHeader title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.END_OFFSET]} />
157+
<MultilineTableHeader
158+
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.END_OFFSET]}
159+
/>
152160
),
153161
sortAccessor: (row) => isNumeric(row.endOffset) && Number(row.endOffset),
154162
align: DataTable.RIGHT,
@@ -157,7 +165,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
157165
{
158166
name: PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET,
159167
header: (
160-
<MultilineHeader
168+
<MultilineTableHeader
161169
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET]}
162170
/>
163171
),
@@ -180,7 +188,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
180188
{
181189
name: PARTITIONS_COLUMNS_IDS.READER_NAME,
182190
header: (
183-
<MultilineHeader
191+
<MultilineTableHeader
184192
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READER_NAME]}
185193
/>
186194
),
@@ -196,7 +204,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
196204
{
197205
name: PARTITIONS_COLUMNS_IDS.PARTITION_HOST,
198206
header: (
199-
<MultilineHeader
207+
<MultilineTableHeader
200208
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST]}
201209
/>
202210
),
@@ -217,7 +225,7 @@ export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
217225
{
218226
name: PARTITIONS_COLUMNS_IDS.CONNECTION_HOST,
219227
header: (
220-
<MultilineHeader
228+
<MultilineTableHeader
221229
title={PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST]}
222230
/>
223231
),
@@ -244,3 +252,26 @@ export const generalColumns = allColumns.filter((column) => {
244252
column.name as (typeof generalPartitionColumnsIds)[number],
245253
);
246254
});
255+
256+
interface PartitionIdProps {
257+
id: string;
258+
}
259+
260+
function PartitionId({id}: PartitionIdProps) {
261+
const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
262+
const topicDataAvailable = useTopicDataAvailable();
263+
264+
return (
265+
<EntityStatus
266+
name={id}
267+
path={
268+
topicDataAvailable
269+
? getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.topicData, {
270+
selectedPartition: id,
271+
})
272+
: undefined
273+
}
274+
showStatus={false}
275+
/>
276+
);
277+
}

0 commit comments

Comments
 (0)