import React 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';
import { KeyValue } from '@components/instances';
import {
FormGroup,
StatusLoader,
Table,
TableThead,
TableTr,
TableTh,
TableTbody,
TableTd,
Checkbox,
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
ActionsIcon,
DotIcon
} from 'joyent-ui-toolkit';
const stateColor = {
QUEUED: 'primary',
CREATED: 'green'
};
export const Item = ({
name,
state,
created,
onStart,
onRemove,
updated,
mutating
}) => (
{!mutating ? (
[
,
{name}
,
{' '}
{titleCase(state)}
,
{distanceInWordsToNow(created)}
,
{distanceInWordsToNow(updated)}
,
Start
Remove
]
) : (
)}
);
export const AddForm = props => (
);
export default ({
snapshots = [],
selected = [],
error,
handleChange = () => null,
onAction = () => null,
submitting = false,
sortBy = 'name',
sortOrder = 'desc',
onSortBy = () => null,
allSelected = false,
toggleSelectAll = () => null,
onStart,
onRemove,
...rest
}) => {
return (
onSortBy('name', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'name'}
left
middle
actionable
>
Name
onSortBy('state', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'state'}
left
middle
actionable
>
Status
onSortBy('created', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'created'}
left
middle
actionable
>
Created
onSortBy('updated', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'updated'}
left
middle
actionable
>
Updated
{snapshots.map(snapshot => (
- onStart(snapshot)}
onRemove={() => onRemove(snapshot)}
key={snapshot.id}
{...snapshot}
/>
))}
);
};