Skip to content

Commit 4e1e795

Browse files
Liam-ZhaoLiam-Zhao
authored
Chore change preheat (#540)
* chore: change preheat Signed-off-by: zhaoxinxin <1186037180@qq.com> * chore: change preheat Signed-off-by: zhaoxinxin <1186037180@qq.com> * chore: change preheat Signed-off-by: zhaoxinxin <1186037180@qq.com> * chore: change preheat Signed-off-by: zhaoxinxin <1186037180@qq.com> * chore: change preheat Signed-off-by: zhaoxinxin <1186037180@qq.com> --------- Signed-off-by: zhaoxinxin <1186037180@qq.com>
1 parent a6802f8 commit 4e1e795

File tree

8 files changed

+143
-121
lines changed

8 files changed

+143
-121
lines changed

‎src/components/audit/index.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,7 @@
4848
.tableRow:last-child {
4949
border-bottom: none;
5050
}
51+
52+
.card {
53+
width: 100%;
54+
}

‎src/components/audit/index.tsx‎

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@ import {
1818
TextField,
1919
} from '@mui/material';
2020
import SearchIcon from '@mui/icons-material/Search';
21-
import { SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
21+
import { SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2222
import styles from './index.module.css';
2323
import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
2424
import { auditLogsResponse, getAuditLogs, getUsers, getUsersResponse } from '../../lib/api';
2525
import Card from '../card';
2626
import { useLocation, useNavigate } from 'react-router-dom';
2727
import { getDatetime, useQuery } from '../../lib/utils';
2828
import { debounce } from 'lodash';
29+
import SearchCircularProgress from '../circular-progress';
2930

3031
export default function AuditLogs() {
3132
const [errorMessage, setErrorMessage] = useState(false);
@@ -43,6 +44,7 @@ export default function AuditLogs() {
4344
const [user, setUser] = useState('');
4445
const [operation, setOperation] = useState('ALL');
4546
const [status, setStatus] = useState('ALL');
47+
const [searchLodaing, setSearchLodaing] = useState(false);
4648

4749
const navigate = useNavigate();
4850
const location = useLocation();
@@ -128,28 +130,28 @@ export default function AuditLogs() {
128130
{ lable: 'Unknown', name: 'UNKNOWN' },
129131
];
130132

131-
const changeStatus = (event: { target: { value: SetStateAction<string> } }) => {
133+
const handleSearchByStatus = (event: { target: { value: SetStateAction<string> } }) => {
132134
if (event.target.value) {
133135
setStatus(event.target.value);
134136
navigate(`/audit`);
135137
}
136138
};
137139

138-
const changeActorType = (event: { target: { value: SetStateAction<string> } }) => {
140+
const handleSearchByActorType = (event: { target: { value: SetStateAction<string> } }) => {
139141
if (event.target.value) {
140142
setActorType(event.target.value);
141143
navigate(`/audit`);
142144
}
143145
};
144146

145-
const changeOperation = (event: { target: { value: SetStateAction<string> } }) => {
147+
const handleSearchByOperation = (event: { target: { value: SetStateAction<string> } }) => {
146148
if (event.target.value) {
147149
setOperation(event.target.value);
148150
navigate(`/audit`);
149151
}
150152
};
151153

152-
const handleInputChange = useMemo(
154+
const handleSearchByUser = useMemo(
153155
() =>
154156
debounce((value: string) => {
155157
setUser(value);
@@ -158,15 +160,24 @@ export default function AuditLogs() {
158160
[navigate],
159161
);
160162

161-
const changePath = useMemo(
163+
const debounced = useMemo(
162164
() =>
163-
debounce((value: string) => {
164-
setSearch(value);
165+
debounce(async (currentSearch) => {
166+
setSearch(currentSearch);
167+
setSearchLodaing(false);
165168
navigate(`/audit`);
166-
}, 300),
169+
}, 500),
167170
[navigate],
168171
);
169172

173+
const handleSearchByPath = useCallback(
174+
(newSearch: any) => {
175+
debounced(newSearch);
176+
setSearchLodaing(true);
177+
},
178+
[debounced],
179+
);
180+
170181
return (
171182
<Box>
172183
<Snackbar
@@ -197,18 +208,22 @@ export default function AuditLogs() {
197208
onChange={(e) => {
198209
const value = e.target.value;
199210
setSearchPath(value);
200-
changePath(value);
211+
handleSearchByPath(value);
201212
}}
202213
InputProps={{
203-
startAdornment: (
214+
startAdornment: searchLodaing ? (
215+
<Box className={styles.searchIconContainer}>
216+
<SearchCircularProgress />
217+
</Box>
218+
) : (
204219
<Box className={styles.searchIconContainer}>
205220
<SearchIcon sx={{ color: '#919EAB' }} />
206221
</Box>
207222
),
208223
}}
209224
/>
210225
</FormControl>
211-
<Card>
226+
<Card className={styles.card}>
212227
<Box className={styles.filterWrapper}>
213228
<FormControl size="small" className={styles.userFilter}>
214229
<Autocomplete
@@ -217,7 +232,7 @@ export default function AuditLogs() {
217232
sx={{ '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': { p: '0.5rem' } }}
218233
value={user}
219234
onInputChange={(_event, newInputValue) => {
220-
handleInputChange(newInputValue);
235+
handleSearchByUser(newInputValue);
221236
}}
222237
options={(Array.isArray(users) && users.map((option) => option?.name)) || ['']}
223238
renderInput={(params) => (
@@ -231,15 +246,15 @@ export default function AuditLogs() {
231246
<Select
232247
id="operation-select"
233248
value={operation}
234-
label="changeStatus"
249+
label="Operation"
235250
open={openoperationSelect}
236251
onClose={() => {
237252
setOpenOperationSelect(false);
238253
}}
239254
onOpen={() => {
240255
setOpenOperationSelect(true);
241256
}}
242-
onChange={changeOperation}
257+
onChange={handleSearchByOperation}
243258
>
244259
{operationList.map((item) => (
245260
<MenuItem
@@ -261,15 +276,15 @@ export default function AuditLogs() {
261276
<Select
262277
id="actor-type-select"
263278
value={actorType}
264-
label="changeStatus"
279+
label="Actor Type"
265280
open={openActorTypeSelect}
266281
onClose={() => {
267282
setOpenActorTypeSelect(false);
268283
}}
269284
onOpen={() => {
270285
setOpenActorTypeSelect(true);
271286
}}
272-
onChange={changeActorType}
287+
onChange={handleSearchByActorType}
273288
>
274289
{actorTypeList.map((item) => (
275290
<MenuItem
@@ -291,15 +306,15 @@ export default function AuditLogs() {
291306
<Select
292307
id="states-select"
293308
value={status}
294-
label="changeStatus"
309+
label="States"
295310
open={openStatusSelect}
296311
onClose={() => {
297312
setOpenStatusSelect(false);
298313
}}
299314
onOpen={() => {
300315
setOpenStatusSelect(true);
301316
}}
302-
onChange={changeStatus}
317+
onChange={handleSearchByStatus}
303318
>
304319
{statusList.map((item) => (
305320
<MenuItem
@@ -415,11 +430,19 @@ export default function AuditLogs() {
415430
{item?.actor_name}
416431
</Typography>
417432
</TableCell>
418-
<TableCell align="center" id={`path-${item?.id}`}>
433+
<TableCell
434+
align="center"
435+
id={`path-${item?.id}`}
436+
sx={{
437+
whiteSpace: 'normal',
438+
wordBreak: 'break-word',
439+
overflowWrap: 'break-word',
440+
}}
441+
>
419442
<Box
420443
sx={{
421444
backgroundColor: 'var(--palette-background-inactive)',
422-
p: '0.4rem 0.4rem',
445+
p: '0.2rem 0.4rem',
423446
borderRadius: '4px',
424447
display: 'inline-flex',
425448
color: 'var(--palette-table-title-text-color)',

‎src/components/job/preheats/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import {
33
Typography,
44
Box,
55
Pagination,
6-
ThemeProvider,
7-
createTheme,
86
Chip,
97
Link as RouterLink,
108
Divider,

0 commit comments

Comments
 (0)