joyent-portal/packages/my-joy-instances/src/components/instances/snapshots.js

172 lines
4.1 KiB
JavaScript
Raw Normal View History

2018-02-01 12:38:12 +02:00
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import titleCase from 'title-case';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc';
2017-10-13 22:56:08 +03:00
import {
FormGroup,
StatusLoader,
Table,
TableThead,
TableTr,
TableTh,
TableTbody,
TableTd,
Checkbox,
2018-02-05 17:12:47 +02:00
KeyValue,
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
ActionsIcon,
DotIcon
2017-10-13 22:56:08 +03:00
} from 'joyent-ui-toolkit';
2018-02-01 12:38:12 +02:00
import Empty from '@components/empty';
const stateColor = {
QUEUED: 'primary',
CREATED: 'green'
};
2017-10-13 22:56:08 +03:00
const loadingState = {
start: 'Starting...',
remove: 'Removing...'
};
export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
<TableTr>
{!mutating ? (
2018-02-01 12:38:12 +02:00
<Fragment>
<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 size={remcalc(12)} color={stateColor[state]} />{' '}
{titleCase(state)}
</TableTd>
<TableTd xs="0" sm="160" middle left>
{distanceInWordsToNow(created)}
</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>
2018-02-01 12:38:12 +02:00
</Fragment>
) : (
<TableTd colSpan="5">
<StatusLoader msg={loadingState[mutating]} />
</TableTd>
)}
</TableTr>
);
export const AddForm = props => (
<KeyValue
{...props}
method="create"
input="input"
type="snapshot"
typeLabel="name"
expanded
onlyName
noRemove
/>
);
2017-10-13 22:56:08 +03:00
export default ({
snapshots = [],
selected = [],
error,
handleChange = () => null,
onAction = () => null,
submitting = false,
sortBy = 'name',
sortOrder = 'desc',
onSortBy = () => null,
allSelected = false,
toggleSelectAll = () => null,
onStart,
onRemove,
2017-10-13 22:56:08 +03:00
...rest
2018-02-01 12:38:12 +02:00
}) => (
<Fragment>
<Table>
<TableThead>
<TableTr>
<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>
</TableTh>
<TableTh
xs="150"
onClick={() => onSortBy('state', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'state'}
left
middle
actionable
>
<span>Status </span>
</TableTh>
<TableTh
xs="0"
sm="160"
onClick={() => onSortBy('created', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'created'}
left
middle
actionable
>
<span>Created </span>
</TableTh>
<TableTh xs="60" padding="0" />
</TableTr>
</TableThead>
2017-11-02 15:33:43 +02:00
<TableTbody>
2018-02-01 12:38:12 +02:00
{snapshots.length
? snapshots.map(snapshot => (
<Item
onStart={() => onStart(snapshot)}
onRemove={() => onRemove(snapshot)}
key={snapshot.id}
{...snapshot}
/>
))
: null}
2017-11-02 15:33:43 +02:00
</TableTbody>
</Table>
{!snapshots.length ? <Empty borderTop>You have no Snapshots</Empty> : null}
2018-02-01 12:38:12 +02:00
</Fragment>
);