Skip to content

Commit cdafdb6

Browse files
ramprasadagarwalramprasadagarwal
authored
[ui-core] adds Table component (#4052)
1 parent 6eb3c56 commit cdafdb6

File tree

12 files changed

+475
-248
lines changed

12 files changed

+475
-248
lines changed

‎desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,9 @@
2626
color: $fluidx-gray-900;
2727
}
2828

29-
.metrics-table {
30-
th {
31-
width: 30%;
32-
background-color: $fluidx-gray-040;
33-
}
34-
35-
margin-bottom: $font-size-base;
29+
.metrics-component__table-group {
30+
display: flex;
31+
flex-direction: column;
32+
gap: $font-size-base;
3633
}
3734
}

‎desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.test.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,29 +54,29 @@ jest.mock('api/utils', () => ({
5454
}));
5555

5656
describe('Metrics', () => {
57-
test('Filtering metrics based on name column value', async () => {
57+
it('should filter metrics based on name column value', async () => {
5858
render(<Metrics />);
5959

6060
const filterInput = screen.getByPlaceholderText('Filter metrics...');
6161
fireEvent.change(filterInput, { target: { value: 'value' } });
6262

6363
await waitFor(() => {
64-
expect(screen.getByText('queries.number')).toBeInTheDocument();
65-
expect(screen.getByText('threads.daemon')).toBeInTheDocument();
66-
expect(screen.getByText('threads.total')).toBeInTheDocument();
67-
expect(screen.getByText('users')).toBeInTheDocument();
68-
expect(screen.getByText('users.active')).toBeInTheDocument();
69-
expect(screen.getByText('users.active.total')).toBeInTheDocument();
70-
expect(screen.queryByText('requests.active')).not.toBeInTheDocument();
71-
expect(screen.queryByText('requests.exceptions')).toBeNull();
72-
expect(screen.queryByText('requests.response-time')).toBeNull();
64+
expect(screen.getByText('Number of Queries')).toBeInTheDocument();
65+
expect(screen.getByText('Daemon Threads')).toBeInTheDocument();
66+
expect(screen.getByText('Total Threads')).toBeInTheDocument();
67+
expect(screen.getByText('Users')).toBeInTheDocument();
68+
expect(screen.getByText('Active Users')).toBeInTheDocument();
69+
expect(screen.getByText('Total Active Users')).toBeInTheDocument();
70+
expect(screen.queryByText('Active Requests')).not.toBeInTheDocument();
71+
expect(screen.queryByText('Request Exceptions')).toBeNull();
72+
expect(screen.queryByText('Request Response Time')).toBeNull();
7373
});
7474
});
7575

76-
test('Selecting a specific metric from the dropdown filters the data using click events', async () => {
76+
it('should select a specific metric from the dropdown filters the data using click events', async () => {
7777
render(<Metrics />);
7878

79-
await waitFor(() => screen.getByText('queries.number'));
79+
await waitFor(() => screen.getByText('Number of Queries'));
8080

8181
const select = screen.getByTestId('admin-header--select').firstElementChild;
8282
if (select) {
@@ -98,7 +98,7 @@ describe('Metrics', () => {
9898
}
9999
});
100100

101-
test('Ensuring metrics starting with auth, multiprocessing and python.gc are not displayed', async () => {
101+
it('should ensure metrics starting with auth, multiprocessing and python.gc are not displayed', async () => {
102102
jest.clearAllMocks();
103103
jest.mock('api/utils', () => ({
104104
get: jest.fn(() =>
@@ -133,7 +133,7 @@ describe('Metrics', () => {
133133
expect(screen.queryByText('auth.ldap.auth-time')).not.toBeInTheDocument();
134134
expect(screen.queryByText('multiprocessing.processes.total')).not.toBeInTheDocument();
135135
expect(screen.queryByText('python.gc.objects')).not.toBeInTheDocument();
136-
expect(screen.queryByText('users')).toBeInTheDocument();
136+
expect(screen.queryByText('Users')).toBeInTheDocument();
137137
});
138138
});
139139
});

‎desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTab.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,16 @@ const Metrics: React.FC = (): JSX.Element => {
114114
/>
115115
)}
116116

117-
{!error &&
118-
filteredMetricsData.map((tableData, index) => (
119-
<div key={index}>
120-
{(showAllTables || selectedMetric === tableData.caption) && (
121-
<MetricsTable caption={tableData.caption} dataSource={tableData.dataSource} />
122-
)}
123-
</div>
124-
))}
117+
<div className="metrics-component__table-group">
118+
{!error &&
119+
filteredMetricsData.map((tableData, index) => (
120+
<div key={index}>
121+
{(showAllTables || selectedMetric === tableData.caption) && (
122+
<MetricsTable caption={tableData.caption} dataSource={tableData.dataSource} />
123+
)}
124+
</div>
125+
))}
126+
</div>
125127
</Spin>
126128
</div>
127129
);

‎desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
// limitations under the License.
1616

1717
import React, { useMemo } from 'react';
18-
import Table from 'cuix/dist/components/Table/Table';
19-
import type { ColumnType } from 'antd/es/table';
18+
import PaginatedTable, {
19+
ColumnProps
20+
} from '../../../reactComponents/PaginatedTable/PaginatedTable';
2021
import './Metrics.scss';
2122
import { i18nReact } from '../../../utils/i18nReact';
2223

@@ -91,23 +92,24 @@ const metricLabels: { [key: string]: string } = {
9192
'users.active.total': 'Total Active Users'
9293
};
9394

94-
const metricsColumns: ColumnType<DataSourceItem>[] = [
95-
{
96-
title: 'Name',
97-
dataIndex: 'name',
98-
key: 'name'
99-
},
100-
{
101-
title: 'Value',
102-
dataIndex: 'value',
103-
key: 'value',
104-
render: value => (typeof value === 'number' ? value : JSON.stringify(value))
105-
}
106-
];
107-
10895
const MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
10996
const { t } = i18nReact.useTranslation();
11097

98+
const metricsColumns: ColumnProps<DataSourceItem>[] = [
99+
{
100+
title: t('Name'),
101+
dataIndex: 'name',
102+
key: 'name',
103+
width: '30%'
104+
},
105+
{
106+
title: t('Value'),
107+
dataIndex: 'value',
108+
key: 'value',
109+
render: value => (typeof value === 'number' ? value : JSON.stringify(value))
110+
}
111+
];
112+
111113
const transformedDataSource: DataSourceItem[] = useMemo(
112114
() =>
113115
dataSource.map(item => ({
@@ -118,13 +120,11 @@ const MetricsTable: React.FC<MetricsTableProps> = ({ caption, dataSource }) => {
118120
);
119121

120122
return (
121-
<Table
122-
className="metrics-table"
123-
dataSource={transformedDataSource}
123+
<PaginatedTable<DataSourceItem>
124+
data={transformedDataSource}
124125
rowKey="name"
125126
columns={metricsColumns}
126-
pagination={false}
127-
title={() => <span className="metrics-heading">{caption}</span>}
127+
title={() => <span className="metrics-heading">{metricLabels[caption] ?? caption}</span>}
128128
/>
129129
);
130130
};

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/ChangePermissionModal/ChangePermissionModal.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@
1515
// limitations under the License.
1616

1717
import React, { useState } from 'react';
18+
import { Checkbox } from 'antd';
1819
import Modal from 'cuix/dist/components/Modal';
1920
import { i18nReact } from '../../../../../../utils/i18nReact';
2021
import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
21-
import { Checkbox, Table } from 'antd';
22+
import PaginatedTable, {
23+
ColumnProps
24+
} from '../../../../../../reactComponents/PaginatedTable/PaginatedTable';
2225
import { StorageDirectoryTableData } from '../../../../types';
2326
import { BULK_CHANGE_PERMISSION_API_URL } from '../../../../api';
2427
import { getInitialPermissions, Permission } from './ChangePermissionModal.util';
@@ -97,26 +100,26 @@ const ChangePermissionModal = ({
97100
}
98101
};
99102

100-
const columns = [
103+
const columns: ColumnProps<Permission>[] = [
101104
{
102105
title: '',
103106
dataIndex: 'key',
104107
key: 'key'
105108
},
106109
{
107-
title: 'User',
110+
title: t('User'),
108111
dataIndex: 'user',
109112
key: 'user',
110113
render: renderTableCheckbox('user')
111114
},
112115
{
113-
title: 'Group',
116+
title: t('Group'),
114117
dataIndex: 'group',
115118
key: 'group',
116119
render: renderTableCheckbox('group')
117120
},
118121
{
119-
title: 'Other',
122+
title: t('Other'),
120123
dataIndex: 'other',
121124
key: 'other',
122125
render: renderTableCheckbox('other')
@@ -141,12 +144,7 @@ const ChangePermissionModal = ({
141144
okButtonProps={{ disabled: loading }}
142145
cancelButtonProps={{ disabled: loading }}
143146
>
144-
<Table
145-
dataSource={permissions}
146-
columns={columns}
147-
pagination={false}
148-
className="hue-change-permission__table"
149-
/>
147+
<PaginatedTable<Permission> data={permissions} columns={columns} rowKey="key" />
150148
</Modal>
151149
);
152150
};

‎desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryPage.scss‎

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717
@use 'variables' as vars;
1818
@use 'mixins';
1919

20-
$cell-height: 40px;
21-
$table-placeholder-height: 100px;
2220
$icon-margin: 5px;
2321

2422
.antd.cuix {
@@ -54,53 +52,20 @@ $icon-margin: 5px;
5452
flex: 1;
5553
display: flex;
5654
flex-direction: column;
57-
}
58-
59-
.hue-storage-browser__table {
60-
.ant-table-placeholder {
61-
height: $table-placeholder-height;
62-
text-align: center;
63-
}
64-
65-
th.ant-table-cell {
66-
height: $cell-height;
67-
background-color: vars.$fluidx-gray-040;
68-
}
69-
}
7055

71-
.hue-storage-browser__table-cell-icon {
72-
color: vars.$fluidx-blue-700;
73-
margin-right: 6px;
74-
vertical-align: middle;
75-
}
76-
77-
.hue-storage-browser__table-row {
78-
border-bottom: 1px solid vars.$fluidx-gray-040;
79-
80-
:hover {
81-
cursor: pointer;
82-
}
56+
&__name-column {
57+
display: flex;
58+
gap: 6px;
59+
color: vars.$fluidx-blue-700;
8360

84-
td.ant-table-cell {
85-
height: $cell-height;
86-
@include mixins.nowrap-ellipsis;
87-
}
61+
&__icon {
62+
display: flex;
63+
}
8864

89-
td.ant-table-cell:first-child {
90-
text-overflow: initial;
65+
&__label {
66+
@include mixins.nowrap-ellipsis;
67+
}
9168
}
9269
}
93-
94-
.hue-storage-browser__table-cell-name {
95-
color: vars.$fluidx-blue-700;
96-
}
97-
98-
.hue-storage-browser__table-column-header {
99-
display: flex;
100-
}
101-
102-
.hue-storage-browser__table-column-title {
103-
text-transform: capitalize;
104-
}
10570
}
10671
}

0 commit comments

Comments
 (0)