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>
This commit is contained in:
parent
a6802f8c78
commit
4e1e795811
|
@ -48,3 +48,7 @@
|
|||
.tableRow:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ import {
|
|||
TextField,
|
||||
} from '@mui/material';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import { SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import styles from './index.module.css';
|
||||
import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
|
||||
import { auditLogsResponse, getAuditLogs, getUsers, getUsersResponse } from '../../lib/api';
|
||||
|
@ -26,6 +26,7 @@ import Card from '../card';
|
|||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { getDatetime, useQuery } from '../../lib/utils';
|
||||
import { debounce } from 'lodash';
|
||||
import SearchCircularProgress from '../circular-progress';
|
||||
|
||||
export default function AuditLogs() {
|
||||
const [errorMessage, setErrorMessage] = useState(false);
|
||||
|
@ -43,6 +44,7 @@ export default function AuditLogs() {
|
|||
const [user, setUser] = useState('');
|
||||
const [operation, setOperation] = useState('ALL');
|
||||
const [status, setStatus] = useState('ALL');
|
||||
const [searchLodaing, setSearchLodaing] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
@ -128,28 +130,28 @@ export default function AuditLogs() {
|
|||
{ lable: 'Unknown', name: 'UNKNOWN' },
|
||||
];
|
||||
|
||||
const changeStatus = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
const handleSearchByStatus = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
if (event.target.value) {
|
||||
setStatus(event.target.value);
|
||||
navigate(`/audit`);
|
||||
}
|
||||
};
|
||||
|
||||
const changeActorType = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
const handleSearchByActorType = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
if (event.target.value) {
|
||||
setActorType(event.target.value);
|
||||
navigate(`/audit`);
|
||||
}
|
||||
};
|
||||
|
||||
const changeOperation = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
const handleSearchByOperation = (event: { target: { value: SetStateAction<string> } }) => {
|
||||
if (event.target.value) {
|
||||
setOperation(event.target.value);
|
||||
navigate(`/audit`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = useMemo(
|
||||
const handleSearchByUser = useMemo(
|
||||
() =>
|
||||
debounce((value: string) => {
|
||||
setUser(value);
|
||||
|
@ -158,15 +160,24 @@ export default function AuditLogs() {
|
|||
[navigate],
|
||||
);
|
||||
|
||||
const changePath = useMemo(
|
||||
const debounced = useMemo(
|
||||
() =>
|
||||
debounce((value: string) => {
|
||||
setSearch(value);
|
||||
debounce(async (currentSearch) => {
|
||||
setSearch(currentSearch);
|
||||
setSearchLodaing(false);
|
||||
navigate(`/audit`);
|
||||
}, 300),
|
||||
}, 500),
|
||||
[navigate],
|
||||
);
|
||||
|
||||
const handleSearchByPath = useCallback(
|
||||
(newSearch: any) => {
|
||||
debounced(newSearch);
|
||||
setSearchLodaing(true);
|
||||
},
|
||||
[debounced],
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Snackbar
|
||||
|
@ -197,10 +208,14 @@ export default function AuditLogs() {
|
|||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchPath(value);
|
||||
changePath(value);
|
||||
handleSearchByPath(value);
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
startAdornment: searchLodaing ? (
|
||||
<Box className={styles.searchIconContainer}>
|
||||
<SearchCircularProgress />
|
||||
</Box>
|
||||
) : (
|
||||
<Box className={styles.searchIconContainer}>
|
||||
<SearchIcon sx={{ color: '#919EAB' }} />
|
||||
</Box>
|
||||
|
@ -208,7 +223,7 @@ export default function AuditLogs() {
|
|||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Card>
|
||||
<Card className={styles.card}>
|
||||
<Box className={styles.filterWrapper}>
|
||||
<FormControl size="small" className={styles.userFilter}>
|
||||
<Autocomplete
|
||||
|
@ -217,7 +232,7 @@ export default function AuditLogs() {
|
|||
sx={{ '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': { p: '0.5rem' } }}
|
||||
value={user}
|
||||
onInputChange={(_event, newInputValue) => {
|
||||
handleInputChange(newInputValue);
|
||||
handleSearchByUser(newInputValue);
|
||||
}}
|
||||
options={(Array.isArray(users) && users.map((option) => option?.name)) || ['']}
|
||||
renderInput={(params) => (
|
||||
|
@ -231,7 +246,7 @@ export default function AuditLogs() {
|
|||
<Select
|
||||
id="operation-select"
|
||||
value={operation}
|
||||
label="changeStatus"
|
||||
label="Operation"
|
||||
open={openoperationSelect}
|
||||
onClose={() => {
|
||||
setOpenOperationSelect(false);
|
||||
|
@ -239,7 +254,7 @@ export default function AuditLogs() {
|
|||
onOpen={() => {
|
||||
setOpenOperationSelect(true);
|
||||
}}
|
||||
onChange={changeOperation}
|
||||
onChange={handleSearchByOperation}
|
||||
>
|
||||
{operationList.map((item) => (
|
||||
<MenuItem
|
||||
|
@ -261,7 +276,7 @@ export default function AuditLogs() {
|
|||
<Select
|
||||
id="actor-type-select"
|
||||
value={actorType}
|
||||
label="changeStatus"
|
||||
label="Actor Type"
|
||||
open={openActorTypeSelect}
|
||||
onClose={() => {
|
||||
setOpenActorTypeSelect(false);
|
||||
|
@ -269,7 +284,7 @@ export default function AuditLogs() {
|
|||
onOpen={() => {
|
||||
setOpenActorTypeSelect(true);
|
||||
}}
|
||||
onChange={changeActorType}
|
||||
onChange={handleSearchByActorType}
|
||||
>
|
||||
{actorTypeList.map((item) => (
|
||||
<MenuItem
|
||||
|
@ -291,7 +306,7 @@ export default function AuditLogs() {
|
|||
<Select
|
||||
id="states-select"
|
||||
value={status}
|
||||
label="changeStatus"
|
||||
label="States"
|
||||
open={openStatusSelect}
|
||||
onClose={() => {
|
||||
setOpenStatusSelect(false);
|
||||
|
@ -299,7 +314,7 @@ export default function AuditLogs() {
|
|||
onOpen={() => {
|
||||
setOpenStatusSelect(true);
|
||||
}}
|
||||
onChange={changeStatus}
|
||||
onChange={handleSearchByStatus}
|
||||
>
|
||||
{statusList.map((item) => (
|
||||
<MenuItem
|
||||
|
@ -415,11 +430,19 @@ export default function AuditLogs() {
|
|||
{item?.actor_name}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center" id={`path-${item?.id}`}>
|
||||
<TableCell
|
||||
align="center"
|
||||
id={`path-${item?.id}`}
|
||||
sx={{
|
||||
whiteSpace: 'normal',
|
||||
wordBreak: 'break-word',
|
||||
overflowWrap: 'break-word',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'var(--palette-background-inactive)',
|
||||
p: '0.4rem 0.4rem',
|
||||
p: '0.2rem 0.4rem',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-flex',
|
||||
color: 'var(--palette-table-title-text-color)',
|
||||
|
|
|
@ -3,8 +3,6 @@ import {
|
|||
Typography,
|
||||
Box,
|
||||
Pagination,
|
||||
ThemeProvider,
|
||||
createTheme,
|
||||
Chip,
|
||||
Link as RouterLink,
|
||||
Divider,
|
||||
|
|
|
@ -114,24 +114,24 @@ export default function NewPreheat() {
|
|||
const [bioError, setBioError] = useState(false);
|
||||
const [urlError, setURLError] = useState(false);
|
||||
const [tagError, setTagError] = useState(false);
|
||||
const [countError, setCountError] = useState(false);
|
||||
const [clusterError, setClusterError] = useState(false);
|
||||
const [contentForCalculatingTaskIDError, setContentForCalculatingTaskIDError] = useState(false);
|
||||
const [applicationError, setApplicationError] = useState(false);
|
||||
const [filterError, setFilterError] = useState(false);
|
||||
const [pieceLengthError, setPieceLengthError] = useState(false);
|
||||
const [loadingButton, setLoadingButton] = useState(false);
|
||||
const [headers, setheaders] = useState<
|
||||
const [headers, setHeaders] = useState<
|
||||
Array<{ key: { key: string; error: boolean }; value: { value: string; error: boolean } }>
|
||||
>([]);
|
||||
const [URLs, setURLS] = useState<Array<{ url: string; error: boolean }>>([]);
|
||||
const [cluster, setCluster] = useState([{ id: 0, name: '' }]);
|
||||
const [clusterError, setClusterError] = useState(false);
|
||||
const [filter, setFilter] = useState([]);
|
||||
const [clusterName, setClusterName] = useState<string[]>([]);
|
||||
const [clusterHelperText, setClusterHelperText] = useState('Select at least one option.');
|
||||
const [scope, setScope] = useState<string>('single_seed_peer');
|
||||
const [count, setCount] = useState<string>('all');
|
||||
const [filterHelperText, setFilterHelperText] = useState('Fill in the characters, the length is 0-100.');
|
||||
const [countError, setCountError] = useState(false);
|
||||
const [percentage, setPercentage] = useState(50);
|
||||
const [search, setSearch] = useState<string | null>('args');
|
||||
|
||||
|
@ -395,7 +395,7 @@ export default function NewPreheat() {
|
|||
},
|
||||
];
|
||||
|
||||
const clusterFrom = [
|
||||
const clusterForm = [
|
||||
{
|
||||
enterMultiple: true,
|
||||
scopesFormProps: {
|
||||
|
@ -441,13 +441,7 @@ export default function NewPreheat() {
|
|||
},
|
||||
];
|
||||
|
||||
const scopeList = [
|
||||
{ label: 'Single Seed Peer', name: 'single_seed_peer' },
|
||||
{ label: 'All Seed Peers', name: 'all_seed_peers' },
|
||||
{ label: 'All Peers', name: 'all_peers' },
|
||||
];
|
||||
|
||||
const calculatingTaskIDList = {
|
||||
const calculatingTaskIDForm = {
|
||||
formProps: {
|
||||
id: 'content-for-calculating-task-id',
|
||||
label: 'Content for Calculating Task ID',
|
||||
|
@ -459,7 +453,7 @@ export default function NewPreheat() {
|
|||
error: contentForCalculatingTaskIDError,
|
||||
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, calculatingTaskIDList);
|
||||
changeValidate(e.target.value, calculatingTaskIDForm);
|
||||
},
|
||||
},
|
||||
syncError: false,
|
||||
|
@ -471,6 +465,12 @@ export default function NewPreheat() {
|
|||
},
|
||||
};
|
||||
|
||||
const scopeList = [
|
||||
{ label: 'Single Seed Peer', name: 'single_seed_peer' },
|
||||
{ label: 'All Seed Peers', name: 'all_seed_peers' },
|
||||
{ label: 'All Peers', name: 'all_peers' },
|
||||
];
|
||||
|
||||
const handleSelectScope = (event: SelectChangeEvent) => {
|
||||
const selectedValues = event.target.value;
|
||||
const currentSelection = scopeList.find((scope) => scope.name === selectedValues);
|
||||
|
@ -478,6 +478,12 @@ export default function NewPreheat() {
|
|||
setCount('all');
|
||||
};
|
||||
|
||||
const handleChangeSearch = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
|
||||
if (newAlignment) {
|
||||
setSearch(newAlignment);
|
||||
}
|
||||
};
|
||||
|
||||
const URLValidate = (value: any) => {
|
||||
const regex = /^(?:https?|ftp):\/\/[^\s/$.?#].[^\s]{1,1000}$/;
|
||||
return regex.test(value);
|
||||
|
@ -518,6 +524,8 @@ export default function NewPreheat() {
|
|||
const pieceLength = event.currentTarget.elements.pieceLength.value;
|
||||
const filters = filter.join('&');
|
||||
|
||||
const data = new FormData(event.currentTarget);
|
||||
|
||||
let percentage = null;
|
||||
let countValue = null;
|
||||
|
||||
|
@ -529,7 +537,6 @@ export default function NewPreheat() {
|
|||
}
|
||||
}
|
||||
|
||||
const data = new FormData(event.currentTarget);
|
||||
if (filterText) {
|
||||
setFilterError(true);
|
||||
setFilterHelperText('Please press ENTER to end the filter creation');
|
||||
|
@ -573,14 +580,14 @@ export default function NewPreheat() {
|
|||
newURL[index].key.error = !isValidKey;
|
||||
newURL[index].value.error = !isValidValue;
|
||||
|
||||
setheaders(newURL);
|
||||
setHeaders(newURL);
|
||||
|
||||
return isValidKey && isValidValue;
|
||||
});
|
||||
|
||||
const urlList = URLs.map((item) => item.url);
|
||||
|
||||
urlList.push(url);
|
||||
urlList.unshift(url);
|
||||
|
||||
const validateCount = countValidate(countValue);
|
||||
|
||||
|
@ -634,6 +641,7 @@ export default function NewPreheat() {
|
|||
if (canSubmit) {
|
||||
try {
|
||||
const job = await createJob({ ...formDate });
|
||||
|
||||
setLoadingButton(false);
|
||||
navigate(`/jobs/preheats/${job.id}`);
|
||||
} catch (error) {
|
||||
|
@ -649,6 +657,14 @@ export default function NewPreheat() {
|
|||
} else {
|
||||
const contentForCalculatingTaskID = event.currentTarget.elements.contentForCalculatingTaskID.value;
|
||||
|
||||
let clusterIDValidate = true;
|
||||
|
||||
informationForm.forEach((item) => {
|
||||
const value = data.get(item.formProps.name);
|
||||
item.setError(!item.validate(value as string));
|
||||
item.syncError = !item.validate(value as string);
|
||||
});
|
||||
|
||||
informationForm.forEach((item) => {
|
||||
const value = data.get(item.formProps.name);
|
||||
item.setError(!item.validate(value as string));
|
||||
|
@ -656,10 +672,7 @@ export default function NewPreheat() {
|
|||
});
|
||||
|
||||
const urlList = URLs.map((item) => item.url);
|
||||
|
||||
urlList.push(url);
|
||||
|
||||
let clusterIDValidate = true;
|
||||
urlList.unshift(url);
|
||||
|
||||
if (clusterName.length === 0) {
|
||||
setClusterError(true);
|
||||
|
@ -669,7 +682,6 @@ export default function NewPreheat() {
|
|||
}
|
||||
|
||||
const clusterSet = new Set(clusterName);
|
||||
|
||||
const clusterID = cluster.filter((item) => clusterSet.has(item.name)).map((item) => item.id);
|
||||
|
||||
urlForm.setError(!urlForm.validate(url as string));
|
||||
|
@ -685,23 +697,17 @@ export default function NewPreheat() {
|
|||
return isValid;
|
||||
});
|
||||
|
||||
informationForm.forEach((item) => {
|
||||
const value = data.get(item.formProps.name);
|
||||
item.setError(!item.validate(value as string));
|
||||
item.syncError = !item.validate(value as string);
|
||||
});
|
||||
calculatingTaskIDForm.setError(!calculatingTaskIDForm.validate(contentForCalculatingTaskID));
|
||||
|
||||
calculatingTaskIDList.setError(!calculatingTaskIDList.validate(contentForCalculatingTaskID));
|
||||
|
||||
calculatingTaskIDList.syncError = !calculatingTaskIDList.validate(contentForCalculatingTaskID);
|
||||
calculatingTaskIDForm.syncError = !calculatingTaskIDForm.validate(contentForCalculatingTaskID);
|
||||
|
||||
const canSubmit = Boolean(
|
||||
!informationForm.filter((item) => item.syncError).length &&
|
||||
!urlForm.syncError &&
|
||||
!calculatingTaskIDList.syncError &&
|
||||
!calculatingTaskIDForm.syncError &&
|
||||
clusterIDValidate &&
|
||||
urlValidate &&
|
||||
!calculatingTaskIDList.syncError,
|
||||
!calculatingTaskIDForm.syncError,
|
||||
);
|
||||
|
||||
const formDate = {
|
||||
|
@ -718,6 +724,7 @@ export default function NewPreheat() {
|
|||
if (canSubmit) {
|
||||
try {
|
||||
const job = await createJob({ ...formDate });
|
||||
|
||||
setLoadingButton(false);
|
||||
navigate(`/jobs/preheats/${job.id}`);
|
||||
} catch (error) {
|
||||
|
@ -742,12 +749,6 @@ export default function NewPreheat() {
|
|||
setSuccessMessage(false);
|
||||
};
|
||||
|
||||
const handleChangeSearch = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
|
||||
if (newAlignment) {
|
||||
setSearch(newAlignment);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Snackbar
|
||||
|
@ -835,7 +836,7 @@ export default function NewPreheat() {
|
|||
</Tooltip>
|
||||
</Box>
|
||||
<FormControl className={styles.textField} required size="small" error={clusterError}>
|
||||
{clusterFrom.map((item) => (
|
||||
{clusterForm.map((item) => (
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
multiple
|
||||
|
@ -1150,7 +1151,7 @@ export default function NewPreheat() {
|
|||
justifyContent: 'space-between',
|
||||
p: '1.2rem 1rem',
|
||||
}}
|
||||
>
|
||||
>
|
||||
{count === 'percentage' ? (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<PrettoSlider
|
||||
|
@ -1272,11 +1273,10 @@ export default function NewPreheat() {
|
|||
onChange={(event) => {
|
||||
const newHeaders = [...headers];
|
||||
newHeaders[index].key.key = event.target.value;
|
||||
|
||||
const isValid = headersKeyValidate(event.target.value);
|
||||
newHeaders[index].key.error = !isValid;
|
||||
|
||||
setheaders(newHeaders);
|
||||
setHeaders(newHeaders);
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
|
@ -1293,11 +1293,10 @@ export default function NewPreheat() {
|
|||
onChange={(event) => {
|
||||
const newHeaders = [...headers];
|
||||
newHeaders[index].value.value = event.target.value;
|
||||
|
||||
const isValid = headersValueValidate(event.target.value);
|
||||
newHeaders[index].value.error = !isValid;
|
||||
|
||||
setheaders(newHeaders);
|
||||
setHeaders(newHeaders);
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
|
@ -1310,7 +1309,7 @@ export default function NewPreheat() {
|
|||
onClick={() => {
|
||||
const newheaders = [...headers];
|
||||
newheaders.splice(index, 1);
|
||||
setheaders(newheaders);
|
||||
setHeaders(newheaders);
|
||||
}}
|
||||
>
|
||||
<DoNotDisturbOnOutlinedIcon
|
||||
|
@ -1336,7 +1335,7 @@ export default function NewPreheat() {
|
|||
size="small"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => {
|
||||
setheaders([...headers, { key: { key: '', error: false }, value: { value: '', error: false } }]);
|
||||
setHeaders([...headers, { key: { key: '', error: false }, value: { value: '', error: false } }]);
|
||||
}}
|
||||
>
|
||||
add headers
|
||||
|
@ -1357,7 +1356,7 @@ export default function NewPreheat() {
|
|||
variant="outlined"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setheaders([...headers, { key: { key: '', error: false }, value: { value: '', error: false } }]);
|
||||
setHeaders([...headers, { key: { key: '', error: false }, value: { value: '', error: false } }]);
|
||||
}}
|
||||
>
|
||||
add headers
|
||||
|
@ -1366,7 +1365,7 @@ export default function NewPreheat() {
|
|||
</Box>
|
||||
) : (
|
||||
<Box key="content-for-calculating-task-id" sx={{ width: '37rem', height: '3rem', m: '0.8rem 0' }}>
|
||||
<TextField fullWidth variant="outlined" size="small" {...calculatingTaskIDList.formProps} sx={{ p: 0 }} />
|
||||
<TextField fullWidth variant="outlined" size="small" {...calculatingTaskIDForm.formProps} sx={{ p: 0 }} />
|
||||
</Box>
|
||||
)}
|
||||
<Divider sx={{ mt: '1rem', mb: '1.5rem' }} />
|
||||
|
|
|
@ -309,24 +309,24 @@ export default function ShowPreheat() {
|
|||
{preheat?.args?.urls?.[0] || '-'}
|
||||
</Typography>
|
||||
</CustomWidthTooltip>
|
||||
) : preheat?.args?.urls?.length > 1 ? (
|
||||
<Box className={styles.urlsWrapper}>
|
||||
{preheat?.args?.urls?.map((item, index) => (
|
||||
<CustomWidthTooltip key={index} title={item || '-'} placement="bottom">
|
||||
<Typography
|
||||
id={`url-${index}`}
|
||||
variant="body1"
|
||||
fontFamily="mabry-bold"
|
||||
className={styles.urls}
|
||||
component="div"
|
||||
>
|
||||
{item || '-'}
|
||||
</Typography>
|
||||
</CustomWidthTooltip>
|
||||
))}
|
||||
</Box>
|
||||
) : (
|
||||
<>-</>
|
||||
preheat?.args?.urls?.length > 1 && (
|
||||
<Box className={styles.urlsWrapper}>
|
||||
{preheat?.args?.urls?.map((item, index) => (
|
||||
<CustomWidthTooltip key={index} title={item || '-'} placement="bottom">
|
||||
<Typography
|
||||
id={`url-${index}`}
|
||||
variant="body1"
|
||||
fontFamily="mabry-bold"
|
||||
className={styles.urls}
|
||||
component="div"
|
||||
>
|
||||
{item || '-'}
|
||||
</Typography>
|
||||
</CustomWidthTooltip>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)) || (
|
||||
|
@ -435,7 +435,6 @@ export default function ShowPreheat() {
|
|||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{preheat?.args?.count && (
|
||||
<Box className={styles.informationContainer}>
|
||||
<Box className={styles.informationTitle}>
|
||||
|
@ -456,7 +455,6 @@ export default function ShowPreheat() {
|
|||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box className={styles.informationContainer}>
|
||||
<Box className={styles.informationTitle}>
|
||||
<Tag className={styles.informationTitleIcon} />
|
||||
|
|
|
@ -216,7 +216,7 @@ export default function Clear() {
|
|||
},
|
||||
};
|
||||
|
||||
const formList = [
|
||||
const urlForm = [
|
||||
{
|
||||
formProps: {
|
||||
id: 'pieceLength',
|
||||
|
@ -244,7 +244,7 @@ export default function Clear() {
|
|||
</Tooltip>
|
||||
),
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, formList[0]);
|
||||
changeValidate(e.target.value, urlForm[0]);
|
||||
setSearchDada({ ...searchData, piece_length: e.target.value });
|
||||
},
|
||||
},
|
||||
|
@ -285,7 +285,7 @@ export default function Clear() {
|
|||
),
|
||||
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, formList[1]);
|
||||
changeValidate(e.target.value, urlForm[1]);
|
||||
setSearchDada({ ...searchData, tag: e.target.value });
|
||||
},
|
||||
},
|
||||
|
@ -321,7 +321,7 @@ export default function Clear() {
|
|||
),
|
||||
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, formList[2]);
|
||||
changeValidate(e.target.value, urlForm[2]);
|
||||
setSearchDada({ ...searchData, application: e.target.value });
|
||||
},
|
||||
},
|
||||
|
@ -342,14 +342,14 @@ export default function Clear() {
|
|||
options: [],
|
||||
|
||||
onChange: (_e: any, newValue: any) => {
|
||||
if (!formList[3].formProps.error) {
|
||||
if (!urlForm[3].formProps.error) {
|
||||
setSearchDada({ ...searchData, filtered_query_params: newValue.join('&') });
|
||||
}
|
||||
},
|
||||
|
||||
onInputChange: (e: any) => {
|
||||
setFilterHelperText('Fill in the characters, the length is 0-100.');
|
||||
changeValidate(e.target.value, formList[3]);
|
||||
changeValidate(e.target.value, urlForm[3]);
|
||||
},
|
||||
|
||||
renderTags: (value: any, getTagProps: any) =>
|
||||
|
@ -383,7 +383,7 @@ export default function Clear() {
|
|||
},
|
||||
];
|
||||
|
||||
const taskIDList = {
|
||||
const taskIDForm = {
|
||||
formProps: {
|
||||
id: 'task-id',
|
||||
label: 'Task ID',
|
||||
|
@ -421,7 +421,7 @@ export default function Clear() {
|
|||
},
|
||||
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, taskIDList);
|
||||
changeValidate(e.target.value, taskIDForm);
|
||||
setSearchTask(e.target.value);
|
||||
|
||||
if (e.target.value === '') {
|
||||
|
@ -438,7 +438,7 @@ export default function Clear() {
|
|||
},
|
||||
};
|
||||
|
||||
const calculatingTaskIDList = {
|
||||
const calculatingTaskIDForm = {
|
||||
formProps: {
|
||||
id: 'content-for-calculating-task-id',
|
||||
label: 'Content for Calculating Task ID',
|
||||
|
@ -476,7 +476,7 @@ export default function Clear() {
|
|||
},
|
||||
|
||||
onChange: (e: any) => {
|
||||
changeValidate(e.target.value, calculatingTaskIDList);
|
||||
changeValidate(e.target.value, calculatingTaskIDForm);
|
||||
setSearchContentForCalculatingTaskID(e.target.value);
|
||||
|
||||
if (e.target.value === '') {
|
||||
|
@ -516,7 +516,7 @@ export default function Clear() {
|
|||
if (delet === 'DELETE') {
|
||||
if (schedulerClusterID && !deleteError) {
|
||||
if (task?.args?.url && task?.args?.url !== '') {
|
||||
const formList = {
|
||||
const urlForm = {
|
||||
args: {
|
||||
url: task?.args?.url,
|
||||
tag: task?.args?.tag,
|
||||
|
@ -529,7 +529,7 @@ export default function Clear() {
|
|||
type: 'delete_task',
|
||||
};
|
||||
|
||||
const tasks = await createTaskJob(formList);
|
||||
const tasks = await createTaskJob(urlForm);
|
||||
|
||||
if (tasks?.id) {
|
||||
setDeleteLoadingButton(false);
|
||||
|
@ -537,7 +537,7 @@ export default function Clear() {
|
|||
setOpenDeleteTask(false);
|
||||
}
|
||||
} else if (task?.args?.task_id) {
|
||||
const formList = {
|
||||
const urlForm = {
|
||||
args: {
|
||||
task_id: task?.args?.task_id,
|
||||
},
|
||||
|
@ -545,14 +545,14 @@ export default function Clear() {
|
|||
type: 'delete_task',
|
||||
};
|
||||
|
||||
const tasks = await createTaskJob(formList);
|
||||
const tasks = await createTaskJob(urlForm);
|
||||
if (tasks?.id) {
|
||||
setDeleteLoadingButton(false);
|
||||
navigate(`/resource/task/executions/${tasks?.id}`);
|
||||
setOpenDeleteTask(false);
|
||||
}
|
||||
} else if (task?.args?.content_for_calculating_task_id) {
|
||||
const formList = {
|
||||
const urlForm = {
|
||||
args: {
|
||||
content_for_calculating_task_id: task?.args?.content_for_calculating_task_id,
|
||||
},
|
||||
|
@ -560,7 +560,7 @@ export default function Clear() {
|
|||
type: 'delete_task',
|
||||
};
|
||||
|
||||
const tasks = await createTaskJob(formList);
|
||||
const tasks = await createTaskJob(urlForm);
|
||||
if (tasks?.id) {
|
||||
setDeleteLoadingButton(false);
|
||||
navigate(`/resource/task/executions/${tasks?.id}`);
|
||||
|
@ -596,11 +596,11 @@ export default function Clear() {
|
|||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
|
||||
const taskIDValue = data.get(taskIDList.formProps.name);
|
||||
taskIDList.setError(!taskIDList.validate(taskIDValue as string));
|
||||
taskIDList.syncError = !taskIDList.validate(taskIDValue as string);
|
||||
const taskIDValue = data.get(taskIDForm.formProps.name);
|
||||
taskIDForm.setError(!taskIDForm.validate(taskIDValue as string));
|
||||
taskIDForm.syncError = !taskIDForm.validate(taskIDValue as string);
|
||||
|
||||
if (searchTask !== '' && !taskIDList.syncError) {
|
||||
if (searchTask !== '' && !taskIDForm.syncError) {
|
||||
const data = {
|
||||
args: {
|
||||
task_id: searchTask,
|
||||
|
@ -636,7 +636,7 @@ export default function Clear() {
|
|||
const data = new FormData(event.currentTarget);
|
||||
const filterText = event.currentTarget.elements.filteredQueryParams?.value;
|
||||
|
||||
formList.forEach((item) => {
|
||||
urlForm.forEach((item) => {
|
||||
const value = data.get(item.formProps.name);
|
||||
item.setError(!item.validate(value as string));
|
||||
item.syncError = !item.validate(value as string);
|
||||
|
@ -650,7 +650,7 @@ export default function Clear() {
|
|||
setFilterHelperText('Fill in the characters, the length is 0-100.');
|
||||
}
|
||||
|
||||
formList.forEach((item) => {
|
||||
urlForm.forEach((item) => {
|
||||
if (item.formProps.name !== 'filteredQueryParams') {
|
||||
const value = data.get(item.formProps.name);
|
||||
item.setError(!item.validate(value as string));
|
||||
|
@ -665,7 +665,7 @@ export default function Clear() {
|
|||
urlList.syncError = !urlList.validate(urlValue as string);
|
||||
|
||||
const canSubmit = Boolean(
|
||||
!formList.filter((item) => item.syncError).length && Boolean(!filterText) && !urlList.syncError,
|
||||
!urlForm.filter((item) => item.syncError).length && Boolean(!filterText) && !urlList.syncError,
|
||||
);
|
||||
|
||||
const formDate = {
|
||||
|
@ -710,11 +710,11 @@ export default function Clear() {
|
|||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
|
||||
const taskIDValue = data.get(calculatingTaskIDList.formProps.name);
|
||||
calculatingTaskIDList.setError(!calculatingTaskIDList.validate(taskIDValue as string));
|
||||
calculatingTaskIDList.syncError = !calculatingTaskIDList.validate(taskIDValue as string);
|
||||
const taskIDValue = data.get(calculatingTaskIDForm.formProps.name);
|
||||
calculatingTaskIDForm.setError(!calculatingTaskIDForm.validate(taskIDValue as string));
|
||||
calculatingTaskIDForm.syncError = !calculatingTaskIDForm.validate(taskIDValue as string);
|
||||
|
||||
if (searchContentForCalculatingTaskID !== '' && !calculatingTaskIDList.syncError) {
|
||||
if (searchContentForCalculatingTaskID !== '' && !calculatingTaskIDForm.syncError) {
|
||||
const data = {
|
||||
args: {
|
||||
content_for_calculating_task_id: searchContentForCalculatingTaskID,
|
||||
|
@ -879,7 +879,7 @@ export default function Clear() {
|
|||
</Paper>
|
||||
{search === 'task-id' ? (
|
||||
<Box key="task-id" component="form" onSubmit={handleSearchByTaskID} sx={{ width: '38rem', height: '3rem' }}>
|
||||
<TextField fullWidth variant="outlined" size="small" {...taskIDList.formProps} sx={{ p: 0 }} />
|
||||
<TextField fullWidth variant="outlined" size="small" {...taskIDForm.formProps} sx={{ p: 0 }} />
|
||||
</Box>
|
||||
) : search === 'content-for-calculating-task-id' ? (
|
||||
<Box
|
||||
|
@ -888,7 +888,7 @@ export default function Clear() {
|
|||
onSubmit={handleSearchBySearchContentForCalculatingTaskID}
|
||||
sx={{ width: '38rem', height: '3rem' }}
|
||||
>
|
||||
<TextField fullWidth variant="outlined" size="small" {...calculatingTaskIDList.formProps} sx={{ p: 0 }} />
|
||||
<TextField fullWidth variant="outlined" size="small" {...calculatingTaskIDForm.formProps} sx={{ p: 0 }} />
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ position: 'relative', height: '3rem' }}>
|
||||
|
@ -916,7 +916,7 @@ export default function Clear() {
|
|||
{optional ? (
|
||||
<Box mt="1rem">
|
||||
<Box className={styles.optionalContainer}>
|
||||
{formList.map((item) => {
|
||||
{urlForm.map((item) => {
|
||||
return (
|
||||
<Box key={item.formProps.id} className={styles.filterInput}>
|
||||
<Box width="30%" display="flex" alignItems="center">
|
||||
|
|
|
@ -515,7 +515,7 @@ export default function ShowExecutions() {
|
|||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
{failure && Array.isArray(failure) && failure.length !== 0 ? (
|
||||
{failure && Array.isArray(failure) && failure.length !== 0 && (
|
||||
<Box id="failure-tasks">
|
||||
<Box m="2.5rem 0 1.5rem 0" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
|
@ -679,8 +679,6 @@ export default function ShowExecutions() {
|
|||
<></>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
|
|
@ -201,6 +201,7 @@ h5 {
|
|||
}
|
||||
|
||||
.MuiPaper-root.MuiAutocomplete-paper {
|
||||
box-shadow: none;
|
||||
background-color: var(--palette-background-menu);
|
||||
background-image: url(./assets/images/menu/cyan-blur.png), url(./assets/images/menu/red-blur.png);
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
|
@ -211,6 +212,7 @@ h5 {
|
|||
background-position: right top, left bottom;
|
||||
border-radius: var(--menu-border-radius);
|
||||
overflow: inherit;
|
||||
box-shadow: var(--custom-shadows-dropdown);
|
||||
}
|
||||
|
||||
.MuiAutocomplete-option {
|
||||
|
|
Loading…
Reference in New Issue