Skip to content

Commit 397bca4

Browse files
alexjenningsalexjennings
committed
Storages view with tabs
1 parent 2c61f2b commit 397bca4

20 files changed

+553
-296
lines changed

‎src/components/file/FileEntity.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import FileEntityForm from './FileEntityForm';
1414

1515
const FILE_ENTITY_FORM = 'FILE_ENTITY_FORM';
1616

17-
function FileEntity({ open, onClose, onSuccess, openSnackBar, submitForm }) {
17+
function FileEntity({ open, onClose, onSuccess, openSnackBar, submitForm, storageId }) {
1818
const onSubmitSuccess = (response, dispatch, props) => {
1919
const messageContent = 'File Created';
2020
openSnackBar({ messageContent });
@@ -37,6 +37,7 @@ function FileEntity({ open, onClose, onSuccess, openSnackBar, submitForm }) {
3737
onSubmitSuccess={onSubmitSuccess}
3838
onSubmitFail={onSubmitFail}
3939
onCancel={onClose}
40+
initialValues={{ storageId }}
4041
/>
4142
</DialogContent>
4243
<Divider />

‎src/components/file/FileListFilter.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ function FileListFilter({
2121
resetForm,
2222
form = 'FILE_FILTER_FORM',
2323
changeForm,
24+
storageId,
2425
initialValues = {
2526
queryParams: {
2627
first: 0,
@@ -60,6 +61,7 @@ function FileListFilter({
6061
onCancel={onClose}
6162
destroyOnUnmount={false}
6263
initialValues={initialValues}
64+
storageId={storageId}
6365
/>
6466
</AccordionDetails>
6567
<Divider />

‎src/components/file/FileListTable.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ function FileListTable({
2020
onChangeOrder,
2121
orderBy,
2222
orderDirection,
23+
storageId,
2324
}) {
2425
if (fileListDocument === undefined) {
2526
return null;
@@ -47,7 +48,7 @@ function FileListTable({
4748
orderBy={orderBy}
4849
orderDirection={orderDirection}
4950
/>
50-
<TableHeadCell name="Storage" />
51+
{storageId === undefined ? <TableHeadCell name="Storage" /> : null}
5152
<TableHeadCell
5253
name="size"
5354
onChangeOrder={onChangeOrder}
@@ -64,7 +65,7 @@ function FileListTable({
6465
</TableHead>
6566
<TableBody>
6667
{fileList.map((fileDocument) => (
67-
<FileRow key={fileDocument.id} fileDocument={fileDocument} />
68+
<FileRow key={fileDocument.id} fileDocument={fileDocument} storageId={storageId} />
6869
))}
6970
</TableBody>
7071
{onChangePage && onChangeRowsPerPage && (

‎src/components/file/FileRow.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,20 @@ import TableRowLink from '../ui/TableRowLink';
66

77
import FileStatus from './FileStatus';
88

9-
export default function FileRow({ fileDocument = {} }) {
9+
export default function FileRow({ fileDocument = {}, storageId }) {
1010
return (
11-
<TableRowLink to={`/file/${fileDocument.id}/`} hover>
11+
<TableRowLink
12+
to={
13+
storageId ? `/storage/${storageId}/file/${fileDocument.id}/` : `/file/${fileDocument.id}/`
14+
}
15+
hover
16+
>
1217
<TableCell>{fileDocument.path}</TableCell>
1318
<TableCell>{fileDocument.id}</TableCell>
1419
<TableCell>
1520
<FileStatus fileDocument={fileDocument} />
1621
</TableCell>
17-
<TableCell>{fileDocument.storage}</TableCell>
22+
{storageId === undefined ? <TableCell>{fileDocument.storage}</TableCell> : null}
1823
<TableCell>{bytesToSize(fileDocument.size)}</TableCell>
1924
<TableCell>
2025
{fileDocument.timestamp ? moment(fileDocument.timestamp).toString() : ''}

‎src/components/file/FileTitle.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function AbandonMenuItem({ fileDocument, abandonModal, onOpen }) {
2525

2626
function FileTitle({
2727
fileId,
28+
storageId,
2829
onOpen,
2930
stateModal,
3031
moveModal,
@@ -45,7 +46,9 @@ function FileTitle({
4546
<TitleHeader
4647
helpTo="/ref/storage/file.html"
4748
breadcrumbList={[
48-
{ title: 'File', to: routes.fileList() },
49+
storageId ? { title: 'Storage', to: routes.storageList() } : null,
50+
storageId ? { title: storageId, to: routes.storage({ storageId }) } : null,
51+
{ title: 'File', to: storageId ? routes.storageFile({ storageId }) : routes.fileList() },
4952
{ title: fileId, to: routes.file({ fileId }) },
5053
...breadcrumbList,
5154
]}

‎src/components/storage/StorageMethodDialog.jsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import Dialog from '@material-ui/core/Dialog';
22
import DialogContent from '@material-ui/core/DialogContent';
33
import DialogTitle from '@material-ui/core/DialogTitle';
4-
import { connect } from 'react-redux';
4+
import { compose } from 'redux';
55

6-
import * as actions from '../../actions';
76
import * as formActions from '../../formactions/storage';
7+
import withUI from '../../hoc/withUI';
88
import WizardForm from '../ui/WizardForm';
99

1010
import { StorageMethodForm } from './StorageForm';
1111

12-
function StorageMethodDialog({ closeModal, isOpen, openSnackBar, storageId, onRefresh }) {
12+
function StorageMethodDialog({ open, onClose, openSnackBar, storageId, onRefresh }) {
1313
const onSubmitSuccess = () => {
1414
const messageContent = 'Storage Method Added';
1515
openSnackBar({ messageContent });
1616
onRefresh();
17-
closeModal();
17+
onClose();
1818
};
1919
const onSubmitFail = () => {
2020
const messageContent = 'Error Adding Storage Method';
2121
openSnackBar({ messageContent, messageColor: 'secondary' });
2222
};
2323
return (
24-
<Dialog open={isOpen} onClose={closeModal} fullWidth maxWidth={false}>
24+
<Dialog open={open} onClose={onClose} fullWidth maxWidth={false}>
2525
<DialogTitle>New Storage Method</DialogTitle>
2626
<DialogContent>
2727
<WizardForm
@@ -30,16 +30,12 @@ function StorageMethodDialog({ closeModal, isOpen, openSnackBar, storageId, onRe
3030
onSubmit={formActions.onMethodCreate}
3131
onSubmitSuccess={onSubmitSuccess}
3232
onSubmitFail={onSubmitFail}
33-
onCancel={closeModal}
33+
onCancel={onClose}
3434
storageId={storageId}
3535
/>
3636
</DialogContent>
3737
</Dialog>
3838
);
3939
}
4040

41-
const mapDispatchToProps = {
42-
openSnackBar: actions.ui.openSnackBar,
43-
};
44-
45-
export default connect(null, mapDispatchToProps)(StorageMethodDialog);
41+
export default compose(withUI)(StorageMethodDialog);

‎src/components/storage/StorageRemove.jsx‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,57 @@ import Button from '@material-ui/core/Button';
22
import Dialog from '@material-ui/core/Dialog';
33
import DialogActions from '@material-ui/core/DialogActions';
44
import DialogTitle from '@material-ui/core/DialogTitle';
5+
import Divider from '@material-ui/core/Divider';
6+
import { compose } from 'redux';
57

6-
import { storage as api } from '@vidispine/vdt-api';
8+
import * as formActions from '../../formactions/storage';
9+
import withFormActions from '../../hoc/withFormActions';
10+
import withUI from '../../hoc/withUI';
11+
import DialogContent from '../ui/DialogContent';
712

8-
export default function StorageRemove({ closeModal, isOpen, storageId, history, openSnackBar }) {
9-
const onRemove = () => {
10-
api
11-
.removeStorage({ storageId })
12-
.then(() => {
13-
const messageContent = `Storage ${storageId} Removed`;
14-
openSnackBar({ messageContent });
15-
history.push('/storage/');
16-
closeModal();
17-
})
18-
.catch(() => {
19-
const messageContent = 'Error Removing Storage';
20-
openSnackBar({ messageContent, messageColor: 'secondary' });
21-
});
13+
import StorageRemoveForm from './StorageRemoveForm';
14+
15+
const STORAGE_REMOVE_FORM = 'STORAGE_REMOVE_FORM';
16+
17+
function StorageRemove({ open, onClose, onSuccess, onFail, openSnackBar, submitForm, storageId }) {
18+
const onSubmitSuccess = (response, dispatch, props) => {
19+
const messageContent = 'Storage Deleted';
20+
openSnackBar({ messageContent });
21+
if (onSuccess) {
22+
onSuccess(response, dispatch, props);
23+
}
24+
onClose();
25+
};
26+
const onSubmitFail = (error, dispatch, props) => {
27+
const messageContent = 'Error Deleting Storage';
28+
openSnackBar({ messageContent, messageColor: 'secondary' });
29+
if (onFail) {
30+
onFail(error, dispatch, props);
31+
}
2232
};
2333
return (
24-
<Dialog open={isOpen} onClose={closeModal} fullWidth maxWidth={false}>
25-
<DialogTitle>{`Remove Storage "${storageId}"?`}</DialogTitle>
34+
<Dialog open={open} onClose={onClose} fullWidth maxWidth={false}>
35+
<DialogTitle>{`Delete Storage ${storageId}`}</DialogTitle>
36+
<DialogContent>
37+
<StorageRemoveForm
38+
form={STORAGE_REMOVE_FORM}
39+
onSubmit={formActions.onRemove}
40+
onSubmitSuccess={onSubmitSuccess}
41+
onSubmitFail={onSubmitFail}
42+
storageId={storageId}
43+
/>
44+
</DialogContent>
45+
<Divider />
2646
<DialogActions>
27-
<Button onClick={closeModal} color="primary">
28-
Cancel
47+
<Button size="small" onClick={onClose}>
48+
Close
2949
</Button>
30-
<Button variant="text" onClick={onRemove} color="secondary" autoFocus>
31-
Remove
50+
<Button size="small" color="secondary" onClick={() => submitForm(STORAGE_REMOVE_FORM)}>
51+
Delete
3252
</Button>
3353
</DialogActions>
3454
</Dialog>
3555
);
3656
}
57+
58+
export default compose(withUI, withFormActions)(StorageRemove);

‎src/components/storage/StorageRemoveForm.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import FormControl from '@material-ui/core/FormControl';
2+
import InputLabel from '@material-ui/core/InputLabel';
3+
import MenuItem from '@material-ui/core/MenuItem';
4+
import Typography from '@material-ui/core/Typography';
5+
import { reduxForm } from 'redux-form';
6+
7+
import { required } from '../../utils/FieldValidation';
8+
import { TextField, Select } from '../form';
9+
import Field from '../ui/Field';
10+
import FormSection from '../ui/FormSection';
11+
12+
const queryParams = () => (
13+
<FormControl fullWidth>
14+
<InputLabel htmlFor="safe">Safe</InputLabel>
15+
<Field name="safe" component={Select}>
16+
<MenuItem value="true">true</MenuItem>
17+
<MenuItem value="true">false</MenuItem>
18+
</Field>
19+
</FormControl>
20+
);
21+
22+
function StorageRemoveForm({ error, handleSubmit, storageId }) {
23+
return (
24+
<form onSubmit={handleSubmit}>
25+
{error && <Typography color="error">{error}</Typography>}
26+
{!storageId && (
27+
<Field name="storageId" component={TextField} validate={[required]} fullWidth />
28+
)}
29+
<FormSection name="queryParams" component={queryParams} />
30+
<button type="submit" hidden />
31+
</form>
32+
);
33+
}
34+
35+
export default reduxForm()(StorageRemoveForm);

‎src/components/storage/StorageTitle.jsx‎

Lines changed: 7 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,21 @@
1-
import Typography from '@material-ui/core/Typography';
2-
3-
import { OK_STATES } from '../../const/StorageStates';
41
import { withModalNoRouter } from '../../hoc/withModal';
5-
import Menu, { MenuItem } from '../ui/Menu';
62
import TitleHeader from '../ui/TitleHeader';
73

84
import StorageStatus from './StorageStatus';
95

10-
function EvacuateMenuItem({ storageDocument, evacuateModal, evacuateCancelModal, onOpen }) {
11-
if (storageDocument === undefined) {
12-
return null;
13-
}
14-
const { state } = storageDocument;
15-
if (OK_STATES.includes(state)) {
16-
return (
17-
<MenuItem onClick={() => onOpen({ modalName: evacuateModal })}>
18-
<Typography color="secondary">Evacuate Storage</Typography>
19-
</MenuItem>
20-
);
21-
}
22-
if (state === 'EVACUATING') {
23-
return (
24-
<MenuItem onClick={() => onOpen({ modalName: evacuateCancelModal })}>
25-
<Typography color="secondary">Cancel Evacuate Storage</Typography>
26-
</MenuItem>
27-
);
28-
}
29-
return null;
30-
}
31-
32-
function StorageTitle({
33-
onOpen,
34-
storageId,
35-
typeModal,
36-
onRescan,
37-
evacuateModal,
38-
evacuateCancelModal,
39-
removeModal,
40-
code,
41-
...props
42-
}) {
6+
function StorageTitle({ onOpen, storageId, removeModal, code, title, ...props }) {
437
return (
448
<TitleHeader
45-
title={storageId}
46-
parentTitle="Storage"
47-
parentTo="/storage/"
9+
removeModal={removeModal}
10+
title={title}
11+
parentTitle={storageId}
12+
grandParentTitle="Storage"
13+
grandParentTo="/storage/"
4814
helpTo="/ref/storage/storage.html"
4915
entityId={storageId}
5016
entityType="storage"
5117
code={code}
52-
iconList={
53-
<>
54-
<StorageStatus storageDocument={code} />
55-
<Menu>
56-
<MenuItem onClick={() => onOpen({ modalName: typeModal })}>
57-
<Typography color="inherit">Change Storage Type</Typography>
58-
</MenuItem>
59-
<MenuItem onClick={onRescan}>
60-
<Typography color="inherit">Rescan</Typography>
61-
</MenuItem>
62-
<EvacuateMenuItem
63-
storageDocument={code}
64-
evacuateModal={evacuateModal}
65-
evacuateCancelModal={evacuateCancelModal}
66-
onOpen={onOpen}
67-
/>
68-
<MenuItem onClick={() => onOpen({ modalName: removeModal })}>
69-
<Typography color="secondary">Delete Storage</Typography>
70-
</MenuItem>
71-
</Menu>
72-
</>
73-
}
18+
iconList={<StorageStatus storageDocument={code} />}
7419
{...props}
7520
/>
7621
);

0 commit comments

Comments
 (0)