Tsu-ba-me
1 year ago
parent
d8e214715a
commit
34fc75b3d7
8 changed files with 1100 additions and 1 deletions
@ -0,0 +1,223 @@ |
|||||||
|
import { useFormik } from 'formik'; |
||||||
|
import { |
||||||
|
ChangeEventHandler, |
||||||
|
FC, |
||||||
|
ReactElement, |
||||||
|
useCallback, |
||||||
|
useMemo, |
||||||
|
useRef, |
||||||
|
} from 'react'; |
||||||
|
import { v4 as uuidv4 } from 'uuid'; |
||||||
|
|
||||||
|
import ActionGroup from '../ActionGroup'; |
||||||
|
import api from '../../lib/api'; |
||||||
|
import ContainedButton from '../ContainedButton'; |
||||||
|
import convertFormikErrorsToMessages from '../../lib/convertFormikErrorsToMessages'; |
||||||
|
import FileInputGroup from './FileInputGroup'; |
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
import handleAPIError from '../../lib/handleAPIError'; |
||||||
|
import MessageBox from '../MessageBox'; |
||||||
|
import MessageGroup from '../MessageGroup'; |
||||||
|
import fileListSchema from './schema'; |
||||||
|
import UploadFileProgress from './UploadFileProgress'; |
||||||
|
import useProtectedState from '../../hooks/useProtectedState'; |
||||||
|
|
||||||
|
const REQUEST_INCOMPLETE_UPLOAD_LIMIT = 99; |
||||||
|
|
||||||
|
const setUploadProgress: ( |
||||||
|
previous: UploadFiles | undefined, |
||||||
|
uuid: keyof UploadFiles, |
||||||
|
progress: UploadFiles[string]['progress'], |
||||||
|
) => UploadFiles | undefined = (previous, uuid, progress) => { |
||||||
|
if (!previous) return previous; |
||||||
|
|
||||||
|
previous[uuid].progress = progress; |
||||||
|
|
||||||
|
return { ...previous }; |
||||||
|
}; |
||||||
|
|
||||||
|
const AddFileForm: FC<AddFileFormProps> = (props) => { |
||||||
|
const { anvils, drHosts } = props; |
||||||
|
|
||||||
|
const filePickerRef = useRef<HTMLInputElement>(null); |
||||||
|
|
||||||
|
const [uploads, setUploads] = useProtectedState<UploadFiles | undefined>( |
||||||
|
undefined, |
||||||
|
); |
||||||
|
|
||||||
|
const formik = useFormik<FileFormikValues>({ |
||||||
|
initialValues: {}, |
||||||
|
onSubmit: (values) => { |
||||||
|
const files = Object.values(values); |
||||||
|
|
||||||
|
setUploads( |
||||||
|
files.reduce<UploadFiles>((previous, { file, name, uuid }) => { |
||||||
|
if (!file) return previous; |
||||||
|
|
||||||
|
previous[uuid] = { name, progress: 0, uuid }; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, {}), |
||||||
|
); |
||||||
|
|
||||||
|
files.forEach(({ file, name, uuid }) => { |
||||||
|
if (!file) return; |
||||||
|
|
||||||
|
const data = new FormData(); |
||||||
|
|
||||||
|
data.append('file', new File([file], name, { ...file })); |
||||||
|
|
||||||
|
api |
||||||
|
.post('/file', data, { |
||||||
|
headers: { |
||||||
|
'Content-Type': 'multipart/form-data', |
||||||
|
}, |
||||||
|
onUploadProgress: ( |
||||||
|
(fileUuid: string) => |
||||||
|
({ loaded, total }) => { |
||||||
|
setUploads((previous) => |
||||||
|
setUploadProgress( |
||||||
|
previous, |
||||||
|
fileUuid, |
||||||
|
Math.round( |
||||||
|
(loaded / total) * REQUEST_INCOMPLETE_UPLOAD_LIMIT, |
||||||
|
), |
||||||
|
), |
||||||
|
); |
||||||
|
} |
||||||
|
)(uuid), |
||||||
|
}) |
||||||
|
.then( |
||||||
|
((fileUuid: string) => () => { |
||||||
|
setUploads((previous) => |
||||||
|
setUploadProgress(previous, fileUuid, 100), |
||||||
|
); |
||||||
|
})(uuid), |
||||||
|
) |
||||||
|
.catch((error) => { |
||||||
|
handleAPIError(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
validationSchema: fileListSchema, |
||||||
|
}); |
||||||
|
|
||||||
|
const formikErrors = useMemo<Messages>( |
||||||
|
() => convertFormikErrorsToMessages(formik.errors), |
||||||
|
[formik.errors], |
||||||
|
); |
||||||
|
|
||||||
|
const disableProceed = useMemo<boolean>( |
||||||
|
() => |
||||||
|
!formik.dirty || |
||||||
|
!formik.isValid || |
||||||
|
formik.isValidating || |
||||||
|
formik.isSubmitting, |
||||||
|
[formik.dirty, formik.isSubmitting, formik.isValid, formik.isValidating], |
||||||
|
); |
||||||
|
|
||||||
|
const handleSelectFiles = useCallback<ChangeEventHandler<HTMLInputElement>>( |
||||||
|
(event) => { |
||||||
|
const { |
||||||
|
target: { files }, |
||||||
|
} = event; |
||||||
|
|
||||||
|
if (!files) return; |
||||||
|
|
||||||
|
const values = Array.from(files).reduce<FileFormikValues>( |
||||||
|
(previous, file) => { |
||||||
|
const fileUuid = uuidv4(); |
||||||
|
|
||||||
|
previous[fileUuid] = { |
||||||
|
file, |
||||||
|
name: file.name, |
||||||
|
uuid: fileUuid, |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
formik.setValues(values); |
||||||
|
}, |
||||||
|
[formik], |
||||||
|
); |
||||||
|
|
||||||
|
const fileInputs = useMemo<ReactElement[]>( |
||||||
|
() => |
||||||
|
formik.values && |
||||||
|
Object.values(formik.values).map((file) => { |
||||||
|
const { uuid: fileUuid } = file; |
||||||
|
|
||||||
|
return ( |
||||||
|
<FileInputGroup |
||||||
|
anvils={anvils} |
||||||
|
drHosts={drHosts} |
||||||
|
fileUuid={fileUuid} |
||||||
|
formik={formik} |
||||||
|
key={fileUuid} |
||||||
|
/> |
||||||
|
); |
||||||
|
}), |
||||||
|
[anvils, drHosts, formik], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<FlexBox> |
||||||
|
<MessageBox> |
||||||
|
Uploaded files will be listed automatically, but it may take a while for |
||||||
|
larger files to finish uploading and appear on the list. |
||||||
|
</MessageBox> |
||||||
|
{uploads ? ( |
||||||
|
<> |
||||||
|
<MessageBox> |
||||||
|
This dialog can be closed after all uploads complete. Closing before |
||||||
|
completion will stop the upload. |
||||||
|
</MessageBox> |
||||||
|
<UploadFileProgress uploads={uploads} /> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<FlexBox |
||||||
|
component="form" |
||||||
|
onSubmit={(event) => { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
formik.submitForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<input |
||||||
|
id="files" |
||||||
|
multiple |
||||||
|
name="files" |
||||||
|
onChange={handleSelectFiles} |
||||||
|
ref={filePickerRef} |
||||||
|
style={{ display: 'none' }} |
||||||
|
type="file" |
||||||
|
/> |
||||||
|
<ContainedButton |
||||||
|
onClick={() => { |
||||||
|
filePickerRef.current?.click(); |
||||||
|
}} |
||||||
|
> |
||||||
|
Browse |
||||||
|
</ContainedButton> |
||||||
|
{fileInputs} |
||||||
|
<MessageGroup count={1} messages={formikErrors} /> |
||||||
|
<ActionGroup |
||||||
|
actions={[ |
||||||
|
{ |
||||||
|
background: 'blue', |
||||||
|
children: 'Add', |
||||||
|
disabled: disableProceed, |
||||||
|
type: 'submit', |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</FlexBox> |
||||||
|
)} |
||||||
|
</FlexBox> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AddFileForm; |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
import { useFormik } from 'formik'; |
||||||
|
import { FC, useMemo } from 'react'; |
||||||
|
|
||||||
|
import ActionGroup from '../ActionGroup'; |
||||||
|
import api from '../../lib/api'; |
||||||
|
import convertFormikErrorsToMessages from '../../lib/convertFormikErrorsToMessages'; |
||||||
|
import FileInputGroup from './FileInputGroup'; |
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
import MessageGroup from '../MessageGroup'; |
||||||
|
import fileListSchema from './schema'; |
||||||
|
|
||||||
|
const toEditFileRequestBody = ( |
||||||
|
file: FileFormikFile, |
||||||
|
pfile: APIFileDetail, |
||||||
|
): APIEditFileRequestBody | undefined => { |
||||||
|
const { locations, name: fileName, type: fileType, uuid: fileUUID } = file; |
||||||
|
|
||||||
|
if (!locations || !fileType) return undefined; |
||||||
|
|
||||||
|
const fileLocations: APIEditFileRequestBody['fileLocations'] = []; |
||||||
|
|
||||||
|
Object.entries(locations.anvils).reduce< |
||||||
|
APIEditFileRequestBody['fileLocations'] |
||||||
|
>((previous, [anvilUuid, { active: isFileLocationActive }]) => { |
||||||
|
const { |
||||||
|
anvils: { |
||||||
|
[anvilUuid]: { locationUuids }, |
||||||
|
}, |
||||||
|
} = pfile; |
||||||
|
|
||||||
|
const current = locationUuids.map< |
||||||
|
APIEditFileRequestBody['fileLocations'][number] |
||||||
|
>((fileLocationUUID) => ({ |
||||||
|
fileLocationUUID, |
||||||
|
isFileLocationActive, |
||||||
|
})); |
||||||
|
|
||||||
|
previous.push(...current); |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, fileLocations); |
||||||
|
|
||||||
|
Object.entries(locations.drHosts).reduce< |
||||||
|
APIEditFileRequestBody['fileLocations'] |
||||||
|
>((previous, [drHostUuid, { active: isFileLocationActive }]) => { |
||||||
|
const { |
||||||
|
hosts: { |
||||||
|
[drHostUuid]: { locationUuids }, |
||||||
|
}, |
||||||
|
} = pfile; |
||||||
|
|
||||||
|
const current = locationUuids.map< |
||||||
|
APIEditFileRequestBody['fileLocations'][number] |
||||||
|
>((fileLocationUUID) => ({ |
||||||
|
fileLocationUUID, |
||||||
|
isFileLocationActive, |
||||||
|
})); |
||||||
|
|
||||||
|
previous.push(...current); |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, fileLocations); |
||||||
|
|
||||||
|
return { fileLocations, fileName, fileType, fileUUID }; |
||||||
|
}; |
||||||
|
|
||||||
|
const EditFileForm: FC<EditFileFormProps> = (props) => { |
||||||
|
const { anvils, drHosts, previous: file } = props; |
||||||
|
|
||||||
|
const formikInitialValues = useMemo<FileFormikValues>(() => { |
||||||
|
const { locations, name, type, uuid } = file; |
||||||
|
|
||||||
|
return { |
||||||
|
[uuid]: { |
||||||
|
locations: Object.values(locations).reduce<FileFormikLocations>( |
||||||
|
(previous, { active, anvilUuid, hostUuid }) => { |
||||||
|
let category: keyof FileFormikLocations = 'anvils'; |
||||||
|
let id = anvilUuid; |
||||||
|
|
||||||
|
if (hostUuid in drHosts) { |
||||||
|
category = 'drHosts'; |
||||||
|
id = hostUuid; |
||||||
|
} |
||||||
|
|
||||||
|
previous[category][id] = { active }; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
{ anvils: {}, drHosts: {} }, |
||||||
|
), |
||||||
|
name, |
||||||
|
type, |
||||||
|
uuid, |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, [drHosts, file]); |
||||||
|
|
||||||
|
const formik = useFormik<FileFormikValues>({ |
||||||
|
initialValues: formikInitialValues, |
||||||
|
onSubmit: (values) => { |
||||||
|
const body = toEditFileRequestBody(values[file.uuid], file); |
||||||
|
|
||||||
|
api.put(`/file/${file.uuid}`, body); |
||||||
|
}, |
||||||
|
validationSchema: fileListSchema, |
||||||
|
}); |
||||||
|
|
||||||
|
const formikErrors = useMemo<Messages>( |
||||||
|
() => convertFormikErrorsToMessages(formik.errors), |
||||||
|
[formik.errors], |
||||||
|
); |
||||||
|
|
||||||
|
const disableProceed = useMemo<boolean>( |
||||||
|
() => |
||||||
|
!formik.dirty || |
||||||
|
!formik.isValid || |
||||||
|
formik.isValidating || |
||||||
|
formik.isSubmitting, |
||||||
|
[formik.dirty, formik.isSubmitting, formik.isValid, formik.isValidating], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<FlexBox |
||||||
|
component="form" |
||||||
|
onSubmit={(event) => { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
formik.submitForm(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<FileInputGroup |
||||||
|
anvils={anvils} |
||||||
|
drHosts={drHosts} |
||||||
|
fileUuid={file.uuid} |
||||||
|
formik={formik} |
||||||
|
showSyncInputGroup |
||||||
|
showTypeInput |
||||||
|
/> |
||||||
|
<MessageGroup count={1} messages={formikErrors} /> |
||||||
|
<ActionGroup |
||||||
|
actions={[ |
||||||
|
{ |
||||||
|
background: 'blue', |
||||||
|
children: 'Edit', |
||||||
|
disabled: disableProceed, |
||||||
|
type: 'submit', |
||||||
|
}, |
||||||
|
]} |
||||||
|
/> |
||||||
|
</FlexBox> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default EditFileForm; |
||||||
@ -0,0 +1,217 @@ |
|||||||
|
import { FormGroup } from '@mui/material'; |
||||||
|
import { cloneDeep, debounce } from 'lodash'; |
||||||
|
import { FC, useCallback, useMemo } from 'react'; |
||||||
|
|
||||||
|
import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES'; |
||||||
|
|
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
import List from '../List'; |
||||||
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel'; |
||||||
|
import { ExpandablePanel } from '../Panels'; |
||||||
|
import SelectWithLabel from '../SelectWithLabel'; |
||||||
|
import { BodyText } from '../Text'; |
||||||
|
import UncontrolledInput from '../UncontrolledInput'; |
||||||
|
|
||||||
|
const FileInputGroup: FC<FileInputGroupProps> = (props) => { |
||||||
|
const { |
||||||
|
anvils, |
||||||
|
drHosts, |
||||||
|
fileUuid: fuuid, |
||||||
|
formik, |
||||||
|
showSyncInputGroup, |
||||||
|
showTypeInput, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const { handleBlur, handleChange } = formik; |
||||||
|
|
||||||
|
const debounceChangeEventHandler = useMemo( |
||||||
|
() => debounce(handleChange, 500), |
||||||
|
[handleChange], |
||||||
|
); |
||||||
|
|
||||||
|
const { nameChain, locationsChain, typeChain } = useMemo( |
||||||
|
() => ({ |
||||||
|
nameChain: `${fuuid}.name`, |
||||||
|
locationsChain: `${fuuid}.locations`, |
||||||
|
typeChain: `${fuuid}.type`, |
||||||
|
}), |
||||||
|
[fuuid], |
||||||
|
); |
||||||
|
|
||||||
|
const handleCheckAllLocations = useCallback( |
||||||
|
(type: keyof FileFormikLocations, checked: boolean) => { |
||||||
|
formik.setValues((previous) => { |
||||||
|
const current = cloneDeep(previous); |
||||||
|
const locations = current[fuuid].locations?.[type]; |
||||||
|
|
||||||
|
if (!locations) return previous; |
||||||
|
|
||||||
|
Object.keys(locations).forEach((key) => { |
||||||
|
locations[key].active = checked; |
||||||
|
}); |
||||||
|
|
||||||
|
return current; |
||||||
|
}); |
||||||
|
}, |
||||||
|
[formik, fuuid], |
||||||
|
); |
||||||
|
|
||||||
|
const getAllLocationsCheckboxProps = useCallback( |
||||||
|
(type: keyof FileFormikLocations): CheckboxProps => { |
||||||
|
const locations = formik.values[fuuid].locations?.[type]; |
||||||
|
|
||||||
|
if (!locations) return {}; |
||||||
|
|
||||||
|
return { |
||||||
|
checked: Object.values(locations).every(({ active }) => active), |
||||||
|
onChange: (event, checked) => { |
||||||
|
handleCheckAllLocations(type, checked); |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
[formik.values, fuuid, handleCheckAllLocations], |
||||||
|
); |
||||||
|
|
||||||
|
const getLocationCheckboxProps = useCallback( |
||||||
|
(type: keyof FileFormikLocations, uuid: string): CheckboxProps => { |
||||||
|
const gridChain = `${locationsChain}.${type}.${uuid}`; |
||||||
|
const activeChain = `${gridChain}.active`; |
||||||
|
|
||||||
|
return { |
||||||
|
id: activeChain, |
||||||
|
name: activeChain, |
||||||
|
checked: formik.values[fuuid].locations?.[type][uuid].active, |
||||||
|
onBlur: handleBlur, |
||||||
|
onChange: handleChange, |
||||||
|
}; |
||||||
|
}, |
||||||
|
[formik.values, fuuid, handleBlur, handleChange, locationsChain], |
||||||
|
); |
||||||
|
|
||||||
|
const enableCheckAllLocations = useCallback( |
||||||
|
(type: keyof FileFormikLocations) => { |
||||||
|
const locations = formik.values[fuuid].locations?.[type]; |
||||||
|
|
||||||
|
return locations && Object.keys(locations).length > 1; |
||||||
|
}, |
||||||
|
[formik.values, fuuid], |
||||||
|
); |
||||||
|
|
||||||
|
const nameInput = useMemo( |
||||||
|
() => ( |
||||||
|
<UncontrolledInput |
||||||
|
input={ |
||||||
|
<OutlinedInputWithLabel |
||||||
|
id={nameChain} |
||||||
|
label="File name" |
||||||
|
name={nameChain} |
||||||
|
onBlur={handleBlur} |
||||||
|
onChange={debounceChangeEventHandler} |
||||||
|
value={formik.values[fuuid].name} |
||||||
|
/> |
||||||
|
} |
||||||
|
/> |
||||||
|
), |
||||||
|
[debounceChangeEventHandler, formik.values, fuuid, handleBlur, nameChain], |
||||||
|
); |
||||||
|
|
||||||
|
const syncNodeInputGroup = useMemo( |
||||||
|
() => |
||||||
|
showSyncInputGroup && ( |
||||||
|
<ExpandablePanel |
||||||
|
header="Sync with node(s)" |
||||||
|
panelProps={{ mb: 0, mt: 0, width: '100%' }} |
||||||
|
> |
||||||
|
<List |
||||||
|
allowCheckAll={enableCheckAllLocations('anvils')} |
||||||
|
allowCheckItem |
||||||
|
edit |
||||||
|
header |
||||||
|
listItems={anvils} |
||||||
|
getListCheckboxProps={() => getAllLocationsCheckboxProps('anvils')} |
||||||
|
getListItemCheckboxProps={(uuid) => |
||||||
|
getLocationCheckboxProps('anvils', uuid) |
||||||
|
} |
||||||
|
renderListItem={(anvilUuid, { description, name }) => ( |
||||||
|
<BodyText> |
||||||
|
{name}: {description} |
||||||
|
</BodyText> |
||||||
|
)} |
||||||
|
/> |
||||||
|
</ExpandablePanel> |
||||||
|
), |
||||||
|
[ |
||||||
|
anvils, |
||||||
|
enableCheckAllLocations, |
||||||
|
getAllLocationsCheckboxProps, |
||||||
|
getLocationCheckboxProps, |
||||||
|
showSyncInputGroup, |
||||||
|
], |
||||||
|
); |
||||||
|
|
||||||
|
const syncDrHostInputGroup = useMemo( |
||||||
|
() => |
||||||
|
showSyncInputGroup && ( |
||||||
|
<ExpandablePanel |
||||||
|
header="Sync with DR host(s)" |
||||||
|
panelProps={{ mb: 0, mt: 0, width: '100%' }} |
||||||
|
> |
||||||
|
<List |
||||||
|
allowCheckAll={enableCheckAllLocations('drHosts')} |
||||||
|
allowCheckItem |
||||||
|
edit |
||||||
|
header |
||||||
|
listItems={drHosts} |
||||||
|
getListCheckboxProps={() => getAllLocationsCheckboxProps('drHosts')} |
||||||
|
getListItemCheckboxProps={(uuid) => |
||||||
|
getLocationCheckboxProps('drHosts', uuid) |
||||||
|
} |
||||||
|
renderListItem={(anvilUuid, { hostName }) => ( |
||||||
|
<BodyText>{hostName}</BodyText> |
||||||
|
)} |
||||||
|
/> |
||||||
|
</ExpandablePanel> |
||||||
|
), |
||||||
|
[ |
||||||
|
drHosts, |
||||||
|
enableCheckAllLocations, |
||||||
|
getAllLocationsCheckboxProps, |
||||||
|
getLocationCheckboxProps, |
||||||
|
showSyncInputGroup, |
||||||
|
], |
||||||
|
); |
||||||
|
|
||||||
|
const typeInput = useMemo( |
||||||
|
() => |
||||||
|
showTypeInput && ( |
||||||
|
<SelectWithLabel |
||||||
|
id={typeChain} |
||||||
|
label="File type" |
||||||
|
name={typeChain} |
||||||
|
onBlur={handleBlur} |
||||||
|
onChange={handleChange} |
||||||
|
selectItems={UPLOAD_FILE_TYPES_ARRAY.map( |
||||||
|
([value, [, displayValue]]) => ({ |
||||||
|
displayValue, |
||||||
|
value, |
||||||
|
}), |
||||||
|
)} |
||||||
|
value={formik.values[fuuid].type} |
||||||
|
/> |
||||||
|
), |
||||||
|
[formik.values, fuuid, handleBlur, handleChange, showTypeInput, typeChain], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<FormGroup sx={{ '& > :not(:first-child)': { marginTop: '1em' } }}> |
||||||
|
<FlexBox sm="row" xs="column"> |
||||||
|
{nameInput} |
||||||
|
{typeInput} |
||||||
|
</FlexBox> |
||||||
|
{syncNodeInputGroup} |
||||||
|
{syncDrHostInputGroup} |
||||||
|
</FormGroup> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default FileInputGroup; |
||||||
@ -0,0 +1,383 @@ |
|||||||
|
import { dSizeStr } from 'format-data-size'; |
||||||
|
import { FC, useCallback, useMemo, useRef, useState } from 'react'; |
||||||
|
|
||||||
|
import API_BASE_URL from '../../lib/consts/API_BASE_URL'; |
||||||
|
import { UPLOAD_FILE_TYPES } from '../../lib/consts/UPLOAD_FILE_TYPES'; |
||||||
|
|
||||||
|
import AddFileForm from './AddFileForm'; |
||||||
|
import api from '../../lib/api'; |
||||||
|
import ConfirmDialog from '../ConfirmDialog'; |
||||||
|
import { DialogWithHeader } from '../Dialog'; |
||||||
|
import Divider from '../Divider'; |
||||||
|
import EditFileForm from './EditFileForm'; |
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
import handleAPIError from '../../lib/handleAPIError'; |
||||||
|
import List from '../List'; |
||||||
|
import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup'; |
||||||
|
import { Panel, PanelHeader } from '../Panels'; |
||||||
|
import periodicFetch from '../../lib/fetchers/periodicFetch'; |
||||||
|
import Spinner from '../Spinner'; |
||||||
|
import { BodyText, HeaderText, MonoText } from '../Text'; |
||||||
|
import useChecklist from '../../hooks/useChecklist'; |
||||||
|
import useConfirmDialogProps from '../../hooks/useConfirmDialogProps'; |
||||||
|
import useFetch from '../../hooks/useFetch'; |
||||||
|
import useProtectedState from '../../hooks/useProtectedState'; |
||||||
|
|
||||||
|
const toAnvilOverviewHostList = ( |
||||||
|
data: APIAnvilOverviewArray[number]['hosts'], |
||||||
|
) => |
||||||
|
data.reduce<APIAnvilOverview['hosts']>( |
||||||
|
(previous, { hostName: name, hostType: type, hostUUID: uuid }) => { |
||||||
|
previous[uuid] = { name, type, uuid }; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
const toAnvilOverviewList = (data: APIAnvilOverviewArray) => |
||||||
|
data.reduce<APIAnvilOverviewList>( |
||||||
|
( |
||||||
|
previous, |
||||||
|
{ |
||||||
|
anvilDescription: description, |
||||||
|
anvilName: name, |
||||||
|
anvilUUID: uuid, |
||||||
|
hosts, |
||||||
|
}, |
||||||
|
) => { |
||||||
|
previous[uuid] = { |
||||||
|
description, |
||||||
|
hosts: toAnvilOverviewHostList(hosts), |
||||||
|
name, |
||||||
|
uuid, |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
const toFileOverviewList = (rows: string[][]) => |
||||||
|
rows.reduce<APIFileOverviewList>((previous, row) => { |
||||||
|
const [uuid, name, size, type, checksum] = row; |
||||||
|
|
||||||
|
previous[uuid] = { |
||||||
|
checksum, |
||||||
|
name, |
||||||
|
size, |
||||||
|
type: type as FileType, |
||||||
|
uuid, |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, {}); |
||||||
|
|
||||||
|
const toFileDetail = (rows: string[][]) => { |
||||||
|
const { 0: first } = rows; |
||||||
|
|
||||||
|
if (!first) return undefined; |
||||||
|
|
||||||
|
const [uuid, name, size, type, checksum] = first; |
||||||
|
|
||||||
|
return rows.reduce<APIFileDetail>( |
||||||
|
(previous, row) => { |
||||||
|
const { |
||||||
|
5: locationUuid, |
||||||
|
6: locationActive, |
||||||
|
7: anvilUuid, |
||||||
|
8: anvilName, |
||||||
|
9: anvilDescription, |
||||||
|
10: hostUuid, |
||||||
|
11: hostName, |
||||||
|
12: hostType, |
||||||
|
} = row; |
||||||
|
|
||||||
|
if (!previous.anvils[anvilUuid]) { |
||||||
|
previous.anvils[anvilUuid] = { |
||||||
|
description: anvilDescription, |
||||||
|
locationUuids: [], |
||||||
|
name: anvilName, |
||||||
|
uuid: anvilUuid, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
if (!previous.hosts[hostUuid]) { |
||||||
|
previous.hosts[hostUuid] = { |
||||||
|
locationUuids: [], |
||||||
|
name: hostName, |
||||||
|
type: hostType, |
||||||
|
uuid: hostUuid, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
if (hostType === 'dr') { |
||||||
|
previous.hosts[hostUuid].locationUuids.push(locationUuid); |
||||||
|
} else { |
||||||
|
previous.anvils[anvilUuid].locationUuids.push(locationUuid); |
||||||
|
} |
||||||
|
|
||||||
|
const active = Number(locationActive) === 1; |
||||||
|
|
||||||
|
previous.locations[locationUuid] = { |
||||||
|
anvilUuid, |
||||||
|
active, |
||||||
|
hostUuid, |
||||||
|
uuid: locationUuid, |
||||||
|
}; |
||||||
|
|
||||||
|
return previous; |
||||||
|
}, |
||||||
|
{ |
||||||
|
anvils: {}, |
||||||
|
checksum, |
||||||
|
hosts: {}, |
||||||
|
locations: {}, |
||||||
|
name, |
||||||
|
size, |
||||||
|
type: type as FileType, |
||||||
|
uuid, |
||||||
|
}, |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const ManageFilePanel: FC = () => { |
||||||
|
const addFormDialogRef = useRef<DialogForwardedRefContent>(null); |
||||||
|
const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({}); |
||||||
|
const editFormDialogRef = useRef<DialogForwardedRefContent>(null); |
||||||
|
const messageGroupRef = useRef<MessageGroupForwardedRefContent>({}); |
||||||
|
|
||||||
|
const [confirmDialogProps, setConfirmDialogProps] = useConfirmDialogProps(); |
||||||
|
const [edit, setEdit] = useState<boolean>(false); |
||||||
|
const [file, setFile] = useProtectedState<APIFileDetail | undefined>( |
||||||
|
undefined, |
||||||
|
); |
||||||
|
const [loadingFile, setLoadingFile] = useProtectedState<boolean>(false); |
||||||
|
|
||||||
|
const { data: rows, isLoading: loadingFiles } = periodicFetch<string[][]>( |
||||||
|
`${API_BASE_URL}/file`, |
||||||
|
); |
||||||
|
|
||||||
|
const files = useMemo( |
||||||
|
() => (rows ? toFileOverviewList(rows) : undefined), |
||||||
|
[rows], |
||||||
|
); |
||||||
|
|
||||||
|
const { |
||||||
|
buildDeleteDialogProps, |
||||||
|
checks, |
||||||
|
getCheck, |
||||||
|
hasAllChecks, |
||||||
|
hasChecks, |
||||||
|
multipleItems, |
||||||
|
setAllChecks, |
||||||
|
setCheck, |
||||||
|
} = useChecklist({ |
||||||
|
list: files, |
||||||
|
}); |
||||||
|
|
||||||
|
const setApiMessage = useCallback( |
||||||
|
(message: Message) => |
||||||
|
messageGroupRef.current.setMessage?.call(null, 'api', message), |
||||||
|
[], |
||||||
|
); |
||||||
|
|
||||||
|
const getFileDetail = useCallback( |
||||||
|
(fileUuid: string) => { |
||||||
|
setLoadingFile(true); |
||||||
|
|
||||||
|
api |
||||||
|
.get<string[][]>(`file/${fileUuid}`) |
||||||
|
.then(({ data }) => { |
||||||
|
setFile(toFileDetail(data)); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
const emsg = handleAPIError(error); |
||||||
|
|
||||||
|
emsg.children = <>Failed to get file detail. {emsg.children}</>; |
||||||
|
|
||||||
|
setApiMessage(emsg); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
setLoadingFile(false); |
||||||
|
}); |
||||||
|
}, |
||||||
|
[setApiMessage, setFile, setLoadingFile], |
||||||
|
); |
||||||
|
|
||||||
|
const { data: rawAnvils, loading: loadingAnvils } = |
||||||
|
useFetch<APIAnvilOverviewArray>('/anvil', { |
||||||
|
onError: (error) => { |
||||||
|
setApiMessage({ |
||||||
|
children: <>Failed to get node list. {error}</>, |
||||||
|
type: 'warning', |
||||||
|
}); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const anvils = useMemo( |
||||||
|
() => rawAnvils && toAnvilOverviewList(rawAnvils), |
||||||
|
[rawAnvils], |
||||||
|
); |
||||||
|
|
||||||
|
const { data: drHosts, loading: loadingDrHosts } = |
||||||
|
useFetch<APIHostOverviewList>('/host?types=dr', { |
||||||
|
onError: (error) => { |
||||||
|
setApiMessage({ |
||||||
|
children: <>Failed to get DR host list. {error}</>, |
||||||
|
type: 'warning', |
||||||
|
}); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const list = useMemo( |
||||||
|
() => ( |
||||||
|
<List |
||||||
|
allowCheckAll={multipleItems} |
||||||
|
allowEdit |
||||||
|
allowItemButton={edit} |
||||||
|
disableDelete={!hasChecks} |
||||||
|
edit={edit} |
||||||
|
getListCheckboxProps={() => ({ |
||||||
|
checked: hasAllChecks, |
||||||
|
onChange: (event, checked) => { |
||||||
|
setAllChecks(checked); |
||||||
|
}, |
||||||
|
})} |
||||||
|
getListItemCheckboxProps={(uuid) => ({ |
||||||
|
checked: getCheck(uuid), |
||||||
|
onChange: (event, checked) => { |
||||||
|
setCheck(uuid, checked); |
||||||
|
}, |
||||||
|
})} |
||||||
|
header |
||||||
|
listEmpty="No file(s) found." |
||||||
|
listItems={files} |
||||||
|
onAdd={() => { |
||||||
|
addFormDialogRef.current?.setOpen(true); |
||||||
|
}} |
||||||
|
onDelete={() => { |
||||||
|
setConfirmDialogProps( |
||||||
|
buildDeleteDialogProps({ |
||||||
|
onProceedAppend: () => { |
||||||
|
checks.forEach((fileUuid) => api.delete(`/file/${fileUuid}`)); |
||||||
|
}, |
||||||
|
getConfirmDialogTitle: (count) => |
||||||
|
`Delete the following ${count} file(s)?`, |
||||||
|
renderEntry: ({ key }) => ( |
||||||
|
<BodyText>{files?.[key].name}</BodyText> |
||||||
|
), |
||||||
|
}), |
||||||
|
); |
||||||
|
|
||||||
|
confirmDialogRef.current.setOpen?.call(null, true); |
||||||
|
}} |
||||||
|
onEdit={() => { |
||||||
|
setEdit((previous) => !previous); |
||||||
|
}} |
||||||
|
onItemClick={(value, uuid) => { |
||||||
|
editFormDialogRef.current?.setOpen(true); |
||||||
|
getFileDetail(uuid); |
||||||
|
}} |
||||||
|
renderListItem={(uuid, { checksum, name, size, type }) => ( |
||||||
|
<FlexBox columnSpacing={0} fullWidth md="row" xs="column"> |
||||||
|
<FlexBox spacing={0} flexGrow={1}> |
||||||
|
<FlexBox row spacing=".5em"> |
||||||
|
<MonoText>{name}</MonoText> |
||||||
|
<Divider flexItem orientation="vertical" /> |
||||||
|
<BodyText>{UPLOAD_FILE_TYPES.get(type)?.[1]}</BodyText> |
||||||
|
</FlexBox> |
||||||
|
<BodyText>{dSizeStr(size, { toUnit: 'ibyte' })}</BodyText> |
||||||
|
</FlexBox> |
||||||
|
<MonoText>{checksum}</MonoText> |
||||||
|
</FlexBox> |
||||||
|
)} |
||||||
|
/> |
||||||
|
), |
||||||
|
[ |
||||||
|
buildDeleteDialogProps, |
||||||
|
checks, |
||||||
|
edit, |
||||||
|
files, |
||||||
|
getCheck, |
||||||
|
getFileDetail, |
||||||
|
hasAllChecks, |
||||||
|
hasChecks, |
||||||
|
multipleItems, |
||||||
|
setAllChecks, |
||||||
|
setCheck, |
||||||
|
setConfirmDialogProps, |
||||||
|
], |
||||||
|
); |
||||||
|
|
||||||
|
const panelContent = useMemo( |
||||||
|
() => (loadingFiles ? <Spinner /> : list), |
||||||
|
[loadingFiles, list], |
||||||
|
); |
||||||
|
|
||||||
|
const messageArea = useMemo( |
||||||
|
() => ( |
||||||
|
<MessageGroup count={1} ref={messageGroupRef} usePlaceholder={false} /> |
||||||
|
), |
||||||
|
[], |
||||||
|
); |
||||||
|
|
||||||
|
const loadingAddForm = useMemo<boolean>( |
||||||
|
() => loadingFiles || loadingAnvils || loadingDrHosts, |
||||||
|
[loadingAnvils, loadingDrHosts, loadingFiles], |
||||||
|
); |
||||||
|
|
||||||
|
const loadingEditForm = useMemo<boolean>( |
||||||
|
() => loadingFiles || loadingAnvils || loadingDrHosts || loadingFile, |
||||||
|
[loadingAnvils, loadingDrHosts, loadingFile, loadingFiles], |
||||||
|
); |
||||||
|
|
||||||
|
const addForm = useMemo( |
||||||
|
() => |
||||||
|
anvils && drHosts && <AddFileForm anvils={anvils} drHosts={drHosts} />, |
||||||
|
[anvils, drHosts], |
||||||
|
); |
||||||
|
|
||||||
|
const editForm = useMemo( |
||||||
|
() => |
||||||
|
anvils && |
||||||
|
drHosts && |
||||||
|
file && ( |
||||||
|
<EditFileForm anvils={anvils} drHosts={drHosts} previous={file} /> |
||||||
|
), |
||||||
|
[anvils, drHosts, file], |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Panel> |
||||||
|
<PanelHeader> |
||||||
|
<HeaderText>Files</HeaderText> |
||||||
|
</PanelHeader> |
||||||
|
{messageArea} |
||||||
|
{panelContent} |
||||||
|
</Panel> |
||||||
|
<DialogWithHeader |
||||||
|
header="Add file(s)" |
||||||
|
loading={loadingAddForm} |
||||||
|
ref={addFormDialogRef} |
||||||
|
showClose |
||||||
|
wide |
||||||
|
> |
||||||
|
{addForm} |
||||||
|
</DialogWithHeader> |
||||||
|
<DialogWithHeader |
||||||
|
header={`Update file ${file?.name}`} |
||||||
|
loading={loadingEditForm} |
||||||
|
ref={editFormDialogRef} |
||||||
|
showClose |
||||||
|
wide |
||||||
|
> |
||||||
|
{editForm} |
||||||
|
</DialogWithHeader> |
||||||
|
<ConfirmDialog wide {...confirmDialogProps} ref={confirmDialogRef} /> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ManageFilePanel; |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
import { Box as MuiBox } from '@mui/material'; |
||||||
|
import { FC } from 'react'; |
||||||
|
|
||||||
|
import { ProgressBar } from '../Bars'; |
||||||
|
import FlexBox from '../FlexBox'; |
||||||
|
import { BodyText } from '../Text'; |
||||||
|
|
||||||
|
const UploadFileProgress: FC<UploadFileProgressProps> = (props) => { |
||||||
|
const { uploads } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<FlexBox columnSpacing=".2em"> |
||||||
|
{Object.values(uploads).map(({ name, progress, uuid }) => ( |
||||||
|
<MuiBox |
||||||
|
key={`upload-${uuid}`} |
||||||
|
sx={{ |
||||||
|
alignItems: { md: 'center' }, |
||||||
|
display: 'flex', |
||||||
|
flexDirection: { xs: 'column', md: 'row' }, |
||||||
|
|
||||||
|
'& > :first-child': { |
||||||
|
minWidth: 100, |
||||||
|
overflow: 'hidden', |
||||||
|
overflowWrap: 'normal', |
||||||
|
textOverflow: 'ellipsis', |
||||||
|
whiteSpace: 'nowrap', |
||||||
|
width: { xs: '100%', md: 200 }, |
||||||
|
wordBreak: 'keep-all', |
||||||
|
}, |
||||||
|
|
||||||
|
'& > :last-child': { flexGrow: 1 }, |
||||||
|
}} |
||||||
|
> |
||||||
|
<BodyText>{name}</BodyText> |
||||||
|
<ProgressBar progressPercentage={progress} /> |
||||||
|
</MuiBox> |
||||||
|
))} |
||||||
|
</FlexBox> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default UploadFileProgress; |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
type FileFormikLocations = { |
||||||
|
anvils: { |
||||||
|
[anvilUuid: string]: { |
||||||
|
active: boolean; |
||||||
|
}; |
||||||
|
}; |
||||||
|
drHosts: { |
||||||
|
[hostUuid: string]: { |
||||||
|
active: boolean; |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type FileFormikFile = { |
||||||
|
file?: File; |
||||||
|
locations?: FileFormikLocations; |
||||||
|
name: string; |
||||||
|
type?: FileType; |
||||||
|
uuid: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type FileFormikValues = { |
||||||
|
[fileUuid: string]: FileFormikFile; |
||||||
|
}; |
||||||
|
|
||||||
|
/** ---------- Component types ---------- */ |
||||||
|
|
||||||
|
/** FileInputGroup */ |
||||||
|
|
||||||
|
type FileInputGroupOptionalProps = { |
||||||
|
showSyncInputGroup?: boolean; |
||||||
|
showTypeInput?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
type FileInputGroupProps = FileInputGroupOptionalProps & { |
||||||
|
anvils: APIAnvilOverviewList; |
||||||
|
drHosts: APIHostOverviewList; |
||||||
|
fileUuid: string; |
||||||
|
formik: ReturnType<typeof import('formik').useFormik<FileFormikValues>>; |
||||||
|
}; |
||||||
|
|
||||||
|
/** AddFileForm */ |
||||||
|
|
||||||
|
type UploadFiles = { |
||||||
|
[fileUuid: string]: Pick<FileFormikFile, 'name' | 'uuid'> & { |
||||||
|
progress: number; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
type AddFileFormProps = Pick<FileInputGroupProps, 'anvils' | 'drHosts'>; |
||||||
|
|
||||||
|
/** EditFileForm */ |
||||||
|
|
||||||
|
type EditFileFormProps = Pick<FileInputGroupProps, 'anvils' | 'drHosts'> & { |
||||||
|
previous: APIFileDetail; |
||||||
|
}; |
||||||
|
|
||||||
|
/** UploadFileProgress */ |
||||||
|
|
||||||
|
type UploadFileProgressProps = { |
||||||
|
uploads: UploadFiles; |
||||||
|
}; |
||||||
Loading…
Reference in new issue