176 lines
4.2 KiB
JavaScript
176 lines
4.2 KiB
JavaScript
|
import React from 'react';
|
|||
|
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
|||
|
import styled from 'styled-components';
|
|||
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|||
|
import { Margin, Padding } from 'styled-components-spacing';
|
|||
|
import { Link } from 'react-router-dom';
|
|||
|
import { Field } from 'redux-form';
|
|||
|
|
|||
|
import {
|
|||
|
Card,
|
|||
|
CardOutlet,
|
|||
|
H4,
|
|||
|
P,
|
|||
|
Button,
|
|||
|
FormGroup,
|
|||
|
FormLabel,
|
|||
|
Radio,
|
|||
|
StatusLoader,
|
|||
|
Table,
|
|||
|
TableThead,
|
|||
|
TableTr,
|
|||
|
TableTh,
|
|||
|
TableTd,
|
|||
|
TableTbody,
|
|||
|
ExternalIcon
|
|||
|
} from 'joyent-ui-toolkit';
|
|||
|
|
|||
|
const Name = styled.span`
|
|||
|
color: ${props => props.theme.text};
|
|||
|
text-decoration: none;
|
|||
|
font-weight: ${props => props.theme.font.weight.semibold};
|
|||
|
`;
|
|||
|
|
|||
|
export const EmptyCard = () => (
|
|||
|
<Card>
|
|||
|
<CardOutlet>
|
|||
|
<Row center="xs">
|
|||
|
<Col xs="12" sm="9" md="8" lg="6">
|
|||
|
<Padding all="5">
|
|||
|
<H4 bold>No templates found</H4>
|
|||
|
<P>
|
|||
|
In order to deploy a Service Group, you’ll need to first create a
|
|||
|
template to base your instances off of. Click below to continue
|
|||
|
</P>
|
|||
|
<Margin top="3">
|
|||
|
<Button
|
|||
|
type="button"
|
|||
|
component={Link}
|
|||
|
to="/templates/~create/name"
|
|||
|
secondary
|
|||
|
icon
|
|||
|
>
|
|||
|
<Margin right="2">
|
|||
|
<ExternalIcon />
|
|||
|
</Margin>
|
|||
|
<span>Create template</span>
|
|||
|
</Button>
|
|||
|
</Margin>
|
|||
|
</Padding>
|
|||
|
</Col>
|
|||
|
</Row>
|
|||
|
</CardOutlet>
|
|||
|
</Card>
|
|||
|
);
|
|||
|
|
|||
|
export const EmptyRow = () => (
|
|||
|
<TableTr colSpan="5">
|
|||
|
<TableTd colSpan="5" middle center>
|
|||
|
<Padding vertical="4">
|
|||
|
<P>You have no templates that match your query</P>
|
|||
|
</Padding>
|
|||
|
</TableTd>
|
|||
|
</TableTr>
|
|||
|
);
|
|||
|
|
|||
|
export const LoadingRow = ({ children }) => (
|
|||
|
<TableTr colSpan="5">
|
|||
|
<TableTd colSpan="5" middle center>
|
|||
|
<Margin vertical="5">
|
|||
|
<StatusLoader>{children}</StatusLoader>
|
|||
|
</Margin>
|
|||
|
</TableTd>
|
|||
|
</TableTr>
|
|||
|
);
|
|||
|
|
|||
|
export const Item = ({ id = '', name, image, created, ...template }) => (
|
|||
|
<TableTr>
|
|||
|
<TableTd colSpan="2" middle left>
|
|||
|
<FormGroup name="template" value={id} type="radio" field={Field}>
|
|||
|
<Radio onBlur={null} noMargin>
|
|||
|
<Margin left="5">
|
|||
|
<FormLabel noMargin actionable>
|
|||
|
<Name>{name}</Name>
|
|||
|
</FormLabel>
|
|||
|
</Margin>
|
|||
|
</Radio>
|
|||
|
</FormGroup>
|
|||
|
</TableTd>
|
|||
|
<TableTd xs="0" sm="160" middle left>
|
|||
|
{image.substring(0, 7)}
|
|||
|
</TableTd>
|
|||
|
<TableTd xs="0" sm="160" middle left>
|
|||
|
{template.package.substring(0, 7)}
|
|||
|
</TableTd>
|
|||
|
<TableTd middle left>
|
|||
|
{distanceInWordsToNow(created)}
|
|||
|
</TableTd>
|
|||
|
</TableTr>
|
|||
|
);
|
|||
|
|
|||
|
export default ({
|
|||
|
sortBy = 'name',
|
|||
|
sortOrder = 'desc',
|
|||
|
submitting = false,
|
|||
|
checked = false,
|
|||
|
onToggleCheckAll = () => null,
|
|||
|
onSortBy = () => null,
|
|||
|
children
|
|||
|
}) => (
|
|||
|
<form>
|
|||
|
<Table>
|
|||
|
<TableThead>
|
|||
|
<TableTr>
|
|||
|
<TableTh xs="42" middle left />
|
|||
|
<TableTh
|
|||
|
sortOrder={sortOrder}
|
|||
|
showSort={sortBy === 'name'}
|
|||
|
onClick={() => onSortBy('name')}
|
|||
|
left
|
|||
|
middle
|
|||
|
actionable
|
|||
|
>
|
|||
|
<span>Name</span>
|
|||
|
</TableTh>
|
|||
|
<TableTh
|
|||
|
xs="0"
|
|||
|
sm="160"
|
|||
|
sortOrder={sortOrder}
|
|||
|
showSort={sortBy === 'image'}
|
|||
|
onClick={() => onSortBy('image')}
|
|||
|
left
|
|||
|
middle
|
|||
|
actionable
|
|||
|
>
|
|||
|
<span>Image</span>
|
|||
|
</TableTh>
|
|||
|
<TableTh
|
|||
|
xs="0"
|
|||
|
sm="160"
|
|||
|
sortOrder={sortOrder}
|
|||
|
showSort={sortBy === 'package'}
|
|||
|
onClick={() => onSortBy('package')}
|
|||
|
left
|
|||
|
middle
|
|||
|
actionable
|
|||
|
>
|
|||
|
<span>Package</span>
|
|||
|
</TableTh>
|
|||
|
<TableTh
|
|||
|
xs="180"
|
|||
|
sortOrder={sortOrder}
|
|||
|
showSort={sortBy === 'created'}
|
|||
|
onClick={() => onSortBy('created')}
|
|||
|
left
|
|||
|
middle
|
|||
|
actionable
|
|||
|
>
|
|||
|
<span>Created</span>
|
|||
|
</TableTh>
|
|||
|
</TableTr>
|
|||
|
</TableThead>
|
|||
|
<TableTbody>{children}</TableTbody>
|
|||
|
</Table>
|
|||
|
</form>
|
|||
|
);
|