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

190 lines
4.3 KiB
JavaScript
Raw Normal View History

2017-10-13 22:56:08 +03:00
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';
2017-10-13 22:56:08 +03:00
import {
FormGroup,
StatusLoader,
Table,
TableThead,
TableTr,
TableTh,
TableTbody,
TableTd,
Checkbox,
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
ActionsIcon,
DotIcon
2017-10-13 22:56:08 +03:00
} from 'joyent-ui-toolkit';
import KeyValue from '@components/key-value';
const stateColor = {
QUEUED: 'primary',
CREATED: 'green'
};
2017-10-13 22:56:08 +03:00
export const Item = ({
name,
state,
created,
onStart,
onRemove,
updated,
mutating
}) => (
<TableTr>
{!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>
{distanceInWordsToNow(created)}
</TableTd>,
<TableTd xs="0" sm="160" middle left>
{distanceInWordsToNow(updated)}
</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>
)}
</TableTr>
);
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,
sortBy = 'name',
sortOrder = 'desc',
onSortBy = () => null,
allSelected = false,
toggleSelectAll = () => null,
onStart,
onRemove,
2017-10-13 22:56:08 +03:00
...rest
}) => {
return (
<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="0"
sm="160"
onClick={() => onSortBy('updated', sortOrder)}
sortOrder={sortOrder}
showSort={sortBy === 'updated'}
left
middle
actionable
>
<span>Updated </span>
</TableTh>
<TableTh xs="60" padding="0" />
</TableTr>
</TableThead>
2017-11-02 15:33:43 +02:00
<TableTbody>
{snapshots.map(snapshot => (
<Item
onStart={() => onStart(snapshot)}
onRemove={() => onRemove(snapshot)}
key={snapshot.id}
{...snapshot}
/>
))}
2017-11-02 15:33:43 +02:00
</TableTbody>
</Table>
);
2017-10-13 22:56:08 +03:00
};