Skip to content

Commit 88a6a14

Browse files
LZS911LZS911
authored
Merge pull request #615 from actiontech/chore/optimize-loading
Chore/optimize loading
2 parents 832ea2f + e49640f commit 88a6a14

File tree

41 files changed

+22917
-22957
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+22917
-22957
lines changed

‎packages/base/src/__snapshots__/App.test.tsx.snap

+189-443
Large diffs are not rendered by default.

‎packages/base/src/page/CloudBeaver/List/__snapshots__/index.test.tsx.snap

+3,107-3,131
Large diffs are not rendered by default.

‎packages/base/src/page/CloudBeaver/List/index.test.tsx

+20-10
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ describe('test base/CloudBeaver/List', () => {
3535
let dbServiceTipsSpy: jest.SpyInstance;
3636
let memberTipsSpy: jest.SpyInstance;
3737
const mockDispatch = jest.fn();
38+
const mockSetGetOperationLogsLoading = jest.fn();
3839

3940
beforeEach(() => {
4041
jest.useFakeTimers();
@@ -72,8 +73,16 @@ describe('test base/CloudBeaver/List', () => {
7273
cleanup();
7374
});
7475

76+
const customRender = () => {
77+
return superRender(
78+
<CBOperationLogsList
79+
setGetOperationLogsLoading={mockSetGetOperationLogsLoading}
80+
/>
81+
);
82+
};
83+
7584
it('render init table', async () => {
76-
const { baseElement } = superRender(<CBOperationLogsList />);
85+
const { baseElement } = customRender();
7786
await act(async () => jest.advanceTimersByTime(3000));
7887
expect(baseElement).toMatchSnapshot();
7988
expect(
@@ -83,18 +92,19 @@ describe('test base/CloudBeaver/List', () => {
8392
expect(getCBOperationLogTipsSpy).toHaveBeenCalledTimes(1);
8493
expect(dbServiceTipsSpy).toHaveBeenCalledTimes(1);
8594
expect(memberTipsSpy).toHaveBeenCalledTimes(1);
95+
expect(mockSetGetOperationLogsLoading).toHaveBeenCalledTimes(2);
8696
});
8797

8898
it('render table when request return failed', async () => {
8999
listCBOperationLogsSpy.mockClear();
90100
listCBOperationLogsSpy.mockImplementation(() => createSpyFailResponse({}));
91-
const { baseElement } = superRender(<CBOperationLogsList />);
101+
const { baseElement } = customRender();
92102
await act(async () => jest.advanceTimersByTime(3000));
93103
expect(baseElement).toMatchSnapshot();
94104
});
95105

96106
it('filter data with search', async () => {
97-
const { baseElement } = superRender(<CBOperationLogsList />);
107+
const { baseElement } = customRender();
98108
expect(listCBOperationLogsSpy).toHaveBeenCalledTimes(1);
99109
const searchText = 'search text';
100110
const inputEle = getBySelector('#actiontech-table-search-input');
@@ -124,7 +134,7 @@ describe('test base/CloudBeaver/List', () => {
124134
});
125135

126136
it('export file', async () => {
127-
superRender(<CBOperationLogsList />);
137+
customRender();
128138
await act(async () => jest.advanceTimersByTime(3000));
129139
fireEvent.click(screen.getByText('导 出'));
130140
await act(async () => jest.advanceTimersByTime(100));
@@ -144,7 +154,7 @@ describe('test base/CloudBeaver/List', () => {
144154
});
145155

146156
it('click sql and open cloud beaver sql operation result', async () => {
147-
superRender(<CBOperationLogsList />);
157+
customRender();
148158
await act(async () => jest.advanceTimersByTime(3000));
149159
expect(screen.getAllByText('SELECT')).toHaveLength(2);
150160
fireEvent.click(screen.getAllByText('SELECT')[1]);
@@ -165,7 +175,7 @@ describe('test base/CloudBeaver/List', () => {
165175
});
166176

167177
it('click audit result and open cloud beaver sql operation result', async () => {
168-
superRender(<CBOperationLogsList />);
178+
customRender();
169179
await act(async () => jest.advanceTimersByTime(3000));
170180
expect(getAllBySelector('.audit-result-wrapper')).toHaveLength(2);
171181
fireEvent.click(getAllBySelector('.audit-result-wrapper')[0]);
@@ -186,7 +196,7 @@ describe('test base/CloudBeaver/List', () => {
186196
});
187197

188198
it('render create whitelist', async () => {
189-
superRender(<CBOperationLogsList />);
199+
customRender();
190200
await act(async () => jest.advanceTimersByTime(3000));
191201
await act(async () => jest.advanceTimersByTime(3000));
192202
expect(screen.queryAllByText('添加为审核SQL例外')[0]).toBeInTheDocument();
@@ -205,7 +215,7 @@ describe('test base/CloudBeaver/List', () => {
205215

206216
describe('action permissions', () => {
207217
it('should render actions', async () => {
208-
superRender(<CBOperationLogsList />);
218+
customRender();
209219

210220
await act(async () => jest.advanceTimersByTime(3000));
211221

@@ -226,7 +236,7 @@ describe('test base/CloudBeaver/List', () => {
226236
}
227237
]
228238
});
229-
superRender(<CBOperationLogsList />);
239+
customRender();
230240

231241
await act(async () => jest.advanceTimersByTime(3000));
232242

@@ -252,7 +262,7 @@ describe('test base/CloudBeaver/List', () => {
252262
}
253263
]
254264
});
255-
superRender(<CBOperationLogsList />);
265+
customRender();
256266

257267
await act(async () => jest.advanceTimersByTime(3000));
258268

‎packages/base/src/page/CloudBeaver/List/index.tsx

+59-49
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import CBOperationLogs from '@actiontech/shared/lib/api/base/service/CBOperation
2525
import { useMemo, useEffect } from 'react';
2626
import useMemberTips from '../../../hooks/useMemberTips';
2727
import useDbService from '../../../hooks/useDbService';
28-
import { Spin, message } from 'antd';
28+
import { message } from 'antd';
2929
import useCBOperationTips from '../hooks/useCBOperationTips';
3030
import CBSqlOperationAuditDetailDrawer from '../Drawer/CBSqlOperationAuditDetailDrawer';
3131
import { useDispatch } from 'react-redux';
@@ -43,7 +43,13 @@ import {
4343
CloudBeaverListToolbarActions
4444
} from './actions';
4545

46-
const CBOperationLogsList: React.FC<{ enableSqlQuery?: boolean }> = () => {
46+
type CBOperationLogsListProps = {
47+
setGetOperationLogsLoading: (loading: boolean) => void;
48+
};
49+
50+
const CBOperationLogsList: React.FC<CBOperationLogsListProps> = ({
51+
setGetOperationLogsLoading
52+
}) => {
4753
const { t } = useTranslation();
4854
const { parse2TableToolbarActionPermissions, parse2TableActionPermissions } =
4955
usePermission();
@@ -94,7 +100,13 @@ const CBOperationLogsList: React.FC<{ enableSqlQuery?: boolean }> = () => {
94100
);
95101
},
96102
{
97-
refreshDeps: [projectID, tableFilterInfo, pagination]
103+
refreshDeps: [projectID, tableFilterInfo, pagination],
104+
onBefore: () => {
105+
setGetOperationLogsLoading(true);
106+
},
107+
onFinally: () => {
108+
setGetOperationLogsLoading(false);
109+
}
98110
}
99111
);
100112

@@ -192,52 +204,50 @@ const CBOperationLogsList: React.FC<{ enableSqlQuery?: boolean }> = () => {
192204
<>
193205
<CloudBeaverOperationLogsListStyleWrapper>
194206
{contextHolder}
195-
<Spin spinning={loading}>
196-
<OperationStatistics
197-
total={data?.otherData?.exec_sql_total}
198-
succeedRate={data?.otherData?.exec_success_rate}
199-
interceptedTotal={data?.otherData?.audit_intercepted_sql_count}
200-
failedTotal={data?.otherData?.exec_failed_sql_count}
201-
/>
202-
<TableToolbar
203-
refreshButton={{ refresh }}
204-
actions={parse2TableToolbarActionPermissions(
205-
CloudBeaverListToolbarActions(onExport, exporting)
206-
)}
207-
filterButton={{
208-
filterButtonMeta,
209-
updateAllSelectedFilterItem
210-
}}
211-
setting={tableSetting}
212-
searchInput={{
213-
onChange: setSearchKeyword,
214-
onSearch: () => {
215-
refreshBySearchKeyword();
216-
}
217-
}}
218-
/>
219-
<TableFilterContainer
220-
filterContainerMeta={filterContainerMeta}
221-
updateTableFilterInfo={updateTableFilterInfo}
222-
disabled={loading}
223-
filterCustomProps={filterCustomProps}
224-
/>
225-
<ActiontechTable
226-
rowKey="uid"
227-
setting={tableSetting}
228-
dataSource={data?.list ?? []}
229-
pagination={{
230-
total: data?.total || 0
231-
}}
232-
columns={columns}
233-
onChange={tableChange}
234-
errorMessage={requestErrorMessage}
235-
actions={parse2TableActionPermissions(
236-
CloudBeaverListActions(onCreateWhitelist)
237-
)}
238-
/>
239-
<CBSqlOperationAuditDetailDrawer />
240-
</Spin>
207+
<OperationStatistics
208+
total={data?.otherData?.exec_sql_total}
209+
succeedRate={data?.otherData?.exec_success_rate}
210+
interceptedTotal={data?.otherData?.audit_intercepted_sql_count}
211+
failedTotal={data?.otherData?.exec_failed_sql_count}
212+
/>
213+
<TableToolbar
214+
refreshButton={{ refresh }}
215+
actions={parse2TableToolbarActionPermissions(
216+
CloudBeaverListToolbarActions(onExport, exporting)
217+
)}
218+
filterButton={{
219+
filterButtonMeta,
220+
updateAllSelectedFilterItem
221+
}}
222+
setting={tableSetting}
223+
searchInput={{
224+
onChange: setSearchKeyword,
225+
onSearch: () => {
226+
refreshBySearchKeyword();
227+
}
228+
}}
229+
/>
230+
<TableFilterContainer
231+
filterContainerMeta={filterContainerMeta}
232+
updateTableFilterInfo={updateTableFilterInfo}
233+
disabled={loading}
234+
filterCustomProps={filterCustomProps}
235+
/>
236+
<ActiontechTable
237+
rowKey="uid"
238+
setting={tableSetting}
239+
dataSource={data?.list ?? []}
240+
pagination={{
241+
total: data?.total || 0
242+
}}
243+
columns={columns}
244+
onChange={tableChange}
245+
errorMessage={requestErrorMessage}
246+
actions={parse2TableActionPermissions(
247+
CloudBeaverListActions(onCreateWhitelist)
248+
)}
249+
/>
250+
<CBSqlOperationAuditDetailDrawer />
241251
</CloudBeaverOperationLogsListStyleWrapper>
242252
<CreateWhitelistModal onCreated={refresh} />
243253
</>

0 commit comments

Comments
 (0)