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

330 lines
8.8 KiB
JavaScript
Raw Normal View History

import React, { Fragment } from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc';
2018-02-01 12:38:12 +02:00
import styled from 'styled-components';
import titleCase from 'title-case';
import { Link } from 'react-router-dom';
import { Field } from 'redux-form';
import Flex from 'styled-flex-component';
import queryString from 'query-string';
2017-09-27 17:44:57 +03:00
import {
Anchor,
2017-09-27 17:44:57 +03:00
FormGroup,
Checkbox,
Table,
TableThead,
TableTr,
TableTh,
TableTd,
TableTbody,
PaginationTableFoot,
PaginationItem,
StatusLoader,
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
PopoverDivider,
DotIcon,
ActionsIcon
2017-09-27 17:44:57 +03:00
} from 'joyent-ui-toolkit';
import GLOBAL, { Global } from '@state/global';
2018-03-06 03:14:33 +02:00
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
2018-02-01 12:38:12 +02:00
const A = styled(Anchor)`
color: ${props => props.theme.text};
text-decoration: none;
font-weight: ${props => props.theme.font.weight.semibold};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
`;
2018-02-01 12:38:12 +02:00
const ItemAnchor = styled(Anchor)`
color: ${props => props.theme.text};
-webkit-text-fill-color: currentcolor;
text-decoration: none;
`;
const Actions = styled(Flex)`
height: ${remcalc(48)};
`;
export const FetchingItem = () => (
<TableTr colSpan="6">
<TableTd colSpan="6" middle center>
<StatusLoader />
</TableTd>
</TableTr>
);
export const Item = ({
id = '',
name,
state = 'RUNNING',
created,
allowedActions = {},
mutating = false,
onCreateImage,
onStart,
onStop,
onReboot,
onRemove,
onClick
}) => (
<TableTr>
<TableTd padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup name={id} paddingTop={remcalc(4)} field={Field}>
<Checkbox noMargin />
</FormGroup>
</TableTd>
<TableTd middle left>
<A to={`/instances/${id}`} component={Link}>
{name}
</A>
</TableTd>
<TableTd middle left>
{mutating ? (
<StatusLoader small />
) : (
<span>
<DotIcon size={remcalc(12)} color={stateColor[state]} />{' '}
{titleCase(state)}
</span>
)}
</TableTd>
<TableTd xs="0" sm="160" middle left>
{distanceInWordsToNow(created)}
</TableTd>
<TableTd xs="0" sm="130" middle left>
<code>{id.substring(0, 7)}</code>
</TableTd>
{!mutating ? (
<PopoverContainer clickable>
<TableTd padding="0" hasBorder="left">
<PopoverTarget box>
<Actions alignCenter justifyCenter>
<ActionsIcon />
</Actions>
</PopoverTarget>
2018-01-08 17:13:05 +02:00
<Popover placement="bottom">
<PopoverItem disabled={!allowedActions.start} onClick={onStart}>
Start
</PopoverItem>
<PopoverItem disabled={!allowedActions.stop} onClick={onStop}>
Stop
</PopoverItem>
<PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
Reboot
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={false} onClick={onCreateImage}>
<ItemAnchor
href={`${GLOBAL.origin}/images/~create/${id}`}
target="__blank"
rel="noopener noreferrer"
>
Create Image
</ItemAnchor>
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Remove
</PopoverItem>
</Popover>
</TableTd>
</PopoverContainer>
) : (
<TableTd padding="0" hasBorder="left" center middle>
<ActionsIcon disabled />
</TableTd>
)}
</TableTr>
);
2017-09-27 17:44:57 +03:00
export default ({
sortBy = 'name',
sortOrder = 'desc',
submitting = false,
allSelected = false,
toggleSelectAll = () => null,
onSortBy = () => null,
children,
noInstances,
limit = 0,
offset = 0,
total = 0
}) => {
const numPages = Math.ceil(total / limit);
const currPage = Math.ceil((offset + limit) / limit);
const isLast = currPage === numPages;
const isFirst = currPage === 1;
return (
<form>
<Table>
<TableThead>
<TableTr>
<TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Checkbox
checked={allSelected}
disabled={submitting || noInstances}
onChange={toggleSelectAll}
noMargin
/>
</FormGroup>
</TableTh>
<TableTh
onClick={() => onSortBy('name')}
sortOrder={sortOrder}
showSort={sortBy === 'name'}
left
middle
actionable
>
<span>Name </span>
</TableTh>
<TableTh
xs="150"
onClick={() => onSortBy('state')}
sortOrder={sortOrder}
showSort={sortBy === 'state'}
left
middle
actionable
>
<span>Status </span>
</TableTh>
<TableTh
xs="0"
sm="160"
onClick={() => onSortBy('created')}
sortOrder={sortOrder}
showSort={sortBy === 'created'}
left
middle
actionable
>
<span>Created </span>
</TableTh>
<TableTh
xs="0"
sm="130"
onClick={() => onSortBy('id')}
sortOrder={sortOrder}
showSort={sortBy === 'id'}
left
middle
actionable
>
<span>Short ID </span>
</TableTh>
<TableTh xs="60" padding="0" />
</TableTr>
</TableThead>
<TableTbody>{children}</TableTbody>
{!noInstances ? (
<PaginationTableFoot colSpan="6">
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset - limit
})}`}
component={Link}
disabled={isFirst}
prev
>
Prev
</PaginationItem>
{currPage - 2 > 0 ? (
<Fragment>
{currPage - 2 > 1 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: 0
})}`}
component={Link}
>
1
</PaginationItem>
) : null}
<PaginationItem disabled>...</PaginationItem>
</Fragment>
) : null}
{currPage > 1 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset - limit
})}`}
component={Link}
>
{currPage - 1}
</PaginationItem>
) : null}
<PaginationItem active>{currPage}</PaginationItem>
{numPages > currPage ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset + limit
})}`}
component={Link}
>
{currPage + 1}
</PaginationItem>
) : null}
{currPage + 2 <= numPages ? (
<Fragment>
<PaginationItem disabled>...</PaginationItem>
{numPages - currPage > 2 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: total - limit
})}`}
component={Link}
>
{numPages}
</PaginationItem>
) : null}
</Fragment>
) : null}
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset + limit
})}`}
component={Link}
disabled={isLast}
next
>
Next
</PaginationItem>
</PaginationTableFoot>
) : null}
</Table>
</form>
);
};