2017-10-13 22:56:08 +03:00
|
|
|
import React from 'react';
|
|
|
|
import forceArray from 'force-array';
|
|
|
|
import find from 'lodash.find';
|
2017-11-23 14:18:38 +02:00
|
|
|
import { Field } from 'redux-form';
|
2018-01-05 17:42:09 +02:00
|
|
|
import titleCase from 'title-case';
|
2017-10-31 12:29:15 +02:00
|
|
|
import moment from 'moment';
|
2018-01-05 17:42:09 +02:00
|
|
|
import remcalc from 'remcalc';
|
|
|
|
import InstanceListActions from '@components/instances/footer';
|
|
|
|
import { KeyValue } from '@components/instances';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
|
|
|
import { Margin } from 'styled-components-spacing';
|
2017-10-13 22:56:08 +03:00
|
|
|
|
|
|
|
import {
|
|
|
|
FormGroup,
|
|
|
|
ViewContainer,
|
|
|
|
StatusLoader,
|
|
|
|
Message,
|
|
|
|
MessageTitle,
|
|
|
|
MessageDescription,
|
2017-10-31 12:29:15 +02:00
|
|
|
Table,
|
|
|
|
TableThead,
|
|
|
|
TableTr,
|
|
|
|
TableTh,
|
|
|
|
TableTbody,
|
|
|
|
TableTd,
|
|
|
|
Checkbox,
|
2018-01-05 17:42:09 +02:00
|
|
|
Popover,
|
|
|
|
PopoverContainer,
|
|
|
|
PopoverTarget,
|
|
|
|
PopoverItem,
|
|
|
|
ActionsIcon,
|
|
|
|
DotIcon
|
2017-10-13 22:56:08 +03:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
2018-01-05 17:42:09 +02:00
|
|
|
const stateColor = {
|
|
|
|
QUEUED: 'primary',
|
|
|
|
CREATED: 'green'
|
|
|
|
};
|
2017-10-13 22:56:08 +03:00
|
|
|
|
2018-01-05 17:42:09 +02:00
|
|
|
export const Item = ({
|
|
|
|
name,
|
|
|
|
state,
|
|
|
|
created,
|
|
|
|
onStart,
|
|
|
|
onRemove,
|
|
|
|
updated,
|
|
|
|
mutating
|
|
|
|
}) => (
|
2017-10-31 12:29:15 +02:00
|
|
|
<TableTr>
|
2018-01-05 17:42:09 +02:00
|
|
|
{!mutating ? (
|
|
|
|
[
|
|
|
|
<TableTd padding="0" paddingLeft={remcalc(12)} middle left>
|
|
|
|
<FormGroup paddingTop={remcalc(4)} name={name} field={Field}>
|
|
|
|
<Checkbox noMargin />
|
|
|
|
</FormGroup>
|
|
|
|
</TableTd>,
|
|
|
|
<TableTd middle left>
|
|
|
|
{name}
|
|
|
|
</TableTd>,
|
|
|
|
<TableTd middle left>
|
|
|
|
<DotIcon
|
|
|
|
width={remcalc(11)}
|
|
|
|
height={remcalc(11)}
|
|
|
|
borderRadius={remcalc(11)}
|
|
|
|
color={stateColor[state]}
|
|
|
|
/>{' '}
|
|
|
|
{titleCase(state)}
|
|
|
|
</TableTd>,
|
|
|
|
<TableTd xs="0" sm="160" middle left>
|
|
|
|
{moment.unix(created).fromNow()}
|
|
|
|
</TableTd>,
|
|
|
|
<TableTd xs="0" sm="160" middle left>
|
|
|
|
{moment.unix(updated).fromNow()}
|
|
|
|
</TableTd>,
|
|
|
|
<PopoverContainer clickable>
|
|
|
|
<TableTd padding="0" hasBorder="left">
|
|
|
|
<PopoverTarget box>
|
|
|
|
<ActionsIcon />
|
|
|
|
</PopoverTarget>
|
|
|
|
<Popover placement="top">
|
|
|
|
<PopoverItem onClick={onStart}>Start</PopoverItem>
|
|
|
|
<PopoverItem onClick={onRemove}>Remove</PopoverItem>
|
|
|
|
</Popover>
|
|
|
|
</TableTd>
|
|
|
|
</PopoverContainer>
|
|
|
|
]
|
|
|
|
) : (
|
|
|
|
<TableTd colSpan="6">
|
|
|
|
<StatusLoader />
|
|
|
|
</TableTd>
|
|
|
|
)}
|
2017-10-31 12:29:15 +02:00
|
|
|
</TableTr>
|
|
|
|
);
|
|
|
|
|
2018-01-05 17:42:09 +02:00
|
|
|
export const AddForm = props => (
|
|
|
|
<KeyValue
|
|
|
|
{...props}
|
|
|
|
method="create"
|
|
|
|
input="input"
|
|
|
|
type="snapshot"
|
|
|
|
expanded
|
|
|
|
onlyName
|
|
|
|
noRemove
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2017-10-13 22:56:08 +03:00
|
|
|
export default ({
|
|
|
|
snapshots = [],
|
|
|
|
selected = [],
|
|
|
|
error,
|
|
|
|
handleChange = () => null,
|
|
|
|
onAction = () => null,
|
|
|
|
submitting = false,
|
2018-01-05 17:42:09 +02:00
|
|
|
sortBy = 'name',
|
|
|
|
sortOrder = 'desc',
|
|
|
|
onSortBy = () => null,
|
|
|
|
allSelected = false,
|
|
|
|
toggleSelectAll = () => null,
|
|
|
|
onStart,
|
|
|
|
onRemove,
|
2017-10-13 22:56:08 +03:00
|
|
|
...rest
|
|
|
|
}) => {
|
2018-01-05 17:42:09 +02:00
|
|
|
return (
|
2017-10-31 12:29:15 +02:00
|
|
|
<Table>
|
|
|
|
<TableThead>
|
|
|
|
<TableTr>
|
2018-01-05 17:42:09 +02:00
|
|
|
<TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
|
|
|
|
<FormGroup paddingTop={remcalc(4)}>
|
|
|
|
<Checkbox
|
|
|
|
checked={allSelected}
|
|
|
|
disabled={submitting}
|
|
|
|
onChange={toggleSelectAll}
|
|
|
|
noMargin
|
|
|
|
/>
|
|
|
|
</FormGroup>
|
|
|
|
</TableTh>
|
|
|
|
<TableTh
|
|
|
|
onClick={() => onSortBy('name', sortOrder)}
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
showSort={sortBy === 'name'}
|
|
|
|
left
|
|
|
|
middle
|
|
|
|
actionable
|
|
|
|
>
|
|
|
|
<span>Name </span>
|
2017-10-31 12:29:15 +02:00
|
|
|
</TableTh>
|
2018-01-05 17:42:09 +02:00
|
|
|
<TableTh
|
|
|
|
xs="150"
|
|
|
|
onClick={() => onSortBy('state', sortOrder)}
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
showSort={sortBy === 'state'}
|
|
|
|
left
|
|
|
|
middle
|
|
|
|
actionable
|
|
|
|
>
|
|
|
|
<span>Status </span>
|
2017-10-31 12:29:15 +02:00
|
|
|
</TableTh>
|
2018-01-05 17:42:09 +02:00
|
|
|
<TableTh
|
|
|
|
xs="0"
|
|
|
|
sm="160"
|
|
|
|
onClick={() => onSortBy('created', sortOrder)}
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
showSort={sortBy === 'created'}
|
|
|
|
left
|
|
|
|
middle
|
|
|
|
actionable
|
|
|
|
>
|
|
|
|
<span>Created </span>
|
|
|
|
</TableTh>
|
|
|
|
<TableTh
|
|
|
|
xs="0"
|
|
|
|
sm="160"
|
|
|
|
onClick={() => onSortBy('updated', sortOrder)}
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
showSort={sortBy === 'updated'}
|
|
|
|
left
|
|
|
|
middle
|
|
|
|
actionable
|
|
|
|
>
|
|
|
|
<span>Updated </span>
|
|
|
|
</TableTh>
|
|
|
|
<TableTh xs="60" padding="0" />
|
2017-10-31 12:29:15 +02:00
|
|
|
</TableTr>
|
|
|
|
</TableThead>
|
2017-11-02 15:33:43 +02:00
|
|
|
<TableTbody>
|
2018-01-05 17:42:09 +02:00
|
|
|
{snapshots.map(snapshot => (
|
|
|
|
<Item
|
|
|
|
onStart={() => onStart(snapshot)}
|
|
|
|
onRemove={() => onRemove(snapshot)}
|
|
|
|
key={snapshot.id}
|
|
|
|
{...snapshot}
|
|
|
|
/>
|
|
|
|
))}
|
2017-11-02 15:33:43 +02:00
|
|
|
</TableTbody>
|
2017-10-31 12:29:15 +02:00
|
|
|
</Table>
|
|
|
|
);
|
2017-10-13 22:56:08 +03:00
|
|
|
};
|