2017-10-13 22:56:08 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
|
|
|
import forceArray from 'force-array';
|
|
|
|
import find from 'lodash.find';
|
2017-10-31 12:29:15 +02:00
|
|
|
import moment from 'moment';
|
2017-10-13 22:56:08 +03:00
|
|
|
|
|
|
|
import {
|
|
|
|
FormGroup,
|
|
|
|
Input,
|
|
|
|
FormLabel,
|
|
|
|
ViewContainer,
|
|
|
|
StatusLoader,
|
|
|
|
Select,
|
|
|
|
Message,
|
|
|
|
MessageTitle,
|
|
|
|
MessageDescription,
|
|
|
|
Button,
|
2017-10-31 12:29:15 +02:00
|
|
|
QueryBreakpoints,
|
|
|
|
Table,
|
|
|
|
TableThead,
|
|
|
|
TableTr,
|
|
|
|
TableTh,
|
|
|
|
TableTbody,
|
|
|
|
TableTd,
|
|
|
|
Checkbox,
|
|
|
|
P
|
2017-10-13 22:56:08 +03:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
const { SmallOnly, Medium } = QueryBreakpoints;
|
|
|
|
|
2017-10-31 12:29:15 +02:00
|
|
|
const Item = ({ name, state, created }) => (
|
|
|
|
<TableTr>
|
|
|
|
<TableTd center middle>
|
|
|
|
<FormGroup name={name} reduxForm>
|
|
|
|
<Checkbox />
|
|
|
|
</FormGroup>
|
|
|
|
</TableTd>
|
|
|
|
<TableTd>{name}</TableTd>
|
|
|
|
<TableTd>{moment.unix(created).fromNow()}</TableTd>
|
|
|
|
</TableTr>
|
|
|
|
);
|
|
|
|
|
2017-10-13 22:56:08 +03:00
|
|
|
export default ({
|
|
|
|
snapshots = [],
|
|
|
|
selected = [],
|
|
|
|
loading,
|
|
|
|
error,
|
|
|
|
handleChange = () => null,
|
|
|
|
onAction = () => null,
|
|
|
|
handleSubmit,
|
|
|
|
submitting = false,
|
|
|
|
pristine = true,
|
|
|
|
...rest
|
|
|
|
}) => {
|
|
|
|
const allowedActions = {
|
|
|
|
delete: selected.length > 0,
|
|
|
|
start: selected.length === 1
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleActions = ev => {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
onAction({
|
|
|
|
name: ev.target.value,
|
|
|
|
items: selected
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const _snapshots = forceArray(snapshots);
|
|
|
|
|
|
|
|
const _loading = !_snapshots.length &&
|
2017-10-31 12:03:44 +02:00
|
|
|
loading && (
|
|
|
|
<ViewContainer center>
|
|
|
|
<StatusLoader />
|
|
|
|
</ViewContainer>
|
|
|
|
);
|
2017-10-13 22:56:08 +03:00
|
|
|
|
2017-10-31 12:29:15 +02:00
|
|
|
const items = _snapshots.map(snapshot => {
|
2017-10-13 22:56:08 +03:00
|
|
|
const { name } = snapshot;
|
|
|
|
const isSelected = Boolean(find(selected, ['name', name]));
|
|
|
|
const isSubmitting = isSelected && submitting;
|
|
|
|
|
2017-10-31 12:29:15 +02:00
|
|
|
return {
|
|
|
|
...snapshot,
|
|
|
|
isSubmitting,
|
|
|
|
isSelected
|
|
|
|
};
|
2017-10-13 22:56:08 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
const _error = error &&
|
2017-10-31 12:03:44 +02:00
|
|
|
!submitting && (
|
|
|
|
<Message error>
|
|
|
|
<MessageTitle>Ooops!</MessageTitle>
|
|
|
|
<MessageDescription>{error}</MessageDescription>
|
|
|
|
</Message>
|
|
|
|
);
|
2017-10-13 22:56:08 +03:00
|
|
|
|
2017-10-31 12:29:15 +02:00
|
|
|
const _table = !items.length ? null : (
|
|
|
|
<Table>
|
|
|
|
<TableThead>
|
|
|
|
<TableTr>
|
|
|
|
<TableTh xs="48" />
|
|
|
|
<TableTh left bottom>
|
|
|
|
<P>Name</P>
|
|
|
|
</TableTh>
|
|
|
|
<TableTh xs="120" left bottom>
|
|
|
|
<P>Created</P>
|
|
|
|
</TableTh>
|
|
|
|
</TableTr>
|
|
|
|
</TableThead>
|
|
|
|
<TableTbody>{items.map(snapshot => <Item key={snapshot.name} {...snapshot} />)}</TableTbody>
|
|
|
|
</Table>
|
|
|
|
);
|
|
|
|
|
2017-10-13 22:56:08 +03:00
|
|
|
return (
|
|
|
|
<form
|
|
|
|
onChange={() => handleSubmit(ctx => handleChange(ctx))}
|
|
|
|
onSubmit={handleSubmit}
|
|
|
|
>
|
|
|
|
<Row between="xs">
|
|
|
|
<Col xs={8} sm={8} lg={6}>
|
|
|
|
<Row>
|
|
|
|
<Col xs={7} sm={7} md={6} lg={6}>
|
|
|
|
<FormGroup name="filter" reduxForm>
|
|
|
|
<FormLabel>Filter snapshots</FormLabel>
|
|
|
|
<Input
|
|
|
|
placeholder="Search for name or state"
|
|
|
|
disabled={pristine && !items.length}
|
|
|
|
fluid
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={5} sm={3} lg={3}>
|
|
|
|
<FormGroup name="sort" reduxForm>
|
|
|
|
<FormLabel>Sort</FormLabel>
|
|
|
|
<Select disabled={!items.length} fluid>
|
|
|
|
<option value="name">Name</option>
|
|
|
|
<option value="state">State</option>
|
|
|
|
<option value="created">Created</option>
|
|
|
|
<option value="updated">Updated</option>
|
|
|
|
</Select>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
<Col xs={4} sm={4} lg={6}>
|
|
|
|
<Row end="xs">
|
|
|
|
<Col xs={6} sm={4} md={3} lg={2}>
|
|
|
|
<FormGroup>
|
|
|
|
<FormLabel>⁣</FormLabel>
|
|
|
|
<Select
|
|
|
|
value="actions"
|
|
|
|
disabled={!items.length || !selected.length}
|
|
|
|
onChange={handleActions}
|
|
|
|
fluid
|
|
|
|
>
|
|
|
|
<option value="actions" selected disabled>
|
|
|
|
≡
|
|
|
|
</option>
|
|
|
|
<option value="delete" disabled={!allowedActions.delete}>
|
|
|
|
Delete
|
|
|
|
</option>
|
|
|
|
<option value="start" disabled={!allowedActions.start}>
|
|
|
|
Start
|
|
|
|
</option>
|
|
|
|
</Select>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={6} sm={6} md={5} lg={2}>
|
|
|
|
<FormGroup>
|
|
|
|
<FormLabel>⁣</FormLabel>
|
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
small
|
|
|
|
icon
|
|
|
|
fluid
|
|
|
|
onClick={() => onAction({ name: 'create' })}
|
|
|
|
>
|
|
|
|
<SmallOnly>+</SmallOnly>
|
|
|
|
<Medium>Create</Medium>
|
|
|
|
</Button>
|
|
|
|
</FormGroup>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
{_loading}
|
|
|
|
{_error}
|
2017-10-31 12:29:15 +02:00
|
|
|
{_table}
|
2017-10-13 22:56:08 +03:00
|
|
|
</form>
|
|
|
|
);
|
|
|
|
};
|