2018-02-05 17:12:47 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|
|
|
import { Margin, Padding } from 'styled-components-spacing';
|
|
|
|
import styled, { withTheme } from 'styled-components';
|
|
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
|
|
|
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
|
|
|
import titleCase from 'title-case';
|
|
|
|
import remcalc from 'remcalc';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Card,
|
|
|
|
CardOutlet,
|
|
|
|
H2,
|
|
|
|
P,
|
|
|
|
Label,
|
|
|
|
Divider,
|
|
|
|
Button,
|
|
|
|
QueryBreakpoints,
|
|
|
|
CopiableField,
|
|
|
|
DuplicateIcon,
|
|
|
|
DeleteIcon,
|
2018-02-13 22:33:03 +02:00
|
|
|
DotIcon,
|
|
|
|
FormLabel,
|
|
|
|
Input
|
2018-02-05 17:12:47 +02:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
2018-03-06 03:14:33 +02:00
|
|
|
import GLOBAL from '@state/global';
|
2018-02-13 22:03:57 +02:00
|
|
|
import { ImageType, OS } from '@root/constants';
|
2018-02-05 17:12:47 +02:00
|
|
|
|
|
|
|
const { SmallOnly, Medium } = QueryBreakpoints;
|
|
|
|
|
|
|
|
const VerticalDivider = styled.div`
|
|
|
|
width: ${remcalc(1)};
|
|
|
|
background: ${props => props.theme.grey};
|
|
|
|
height: ${remcalc(24)};
|
|
|
|
display: flex;
|
|
|
|
align-self: flex-end;
|
|
|
|
margin: 0 ${remcalc(18)};
|
|
|
|
|
|
|
|
@media (max-width: ${remcalc(767)}) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const GreyLabel = styled(Label)`
|
|
|
|
opacity: 0.5;
|
|
|
|
padding-right: ${remcalc(3)};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const StateColor = {
|
|
|
|
ACTIVE: 'green',
|
|
|
|
UNACTIVATED: 'grey',
|
|
|
|
DISABLED: 'secondaryActive',
|
|
|
|
CREATING: 'primary',
|
|
|
|
FAILED: 'red'
|
|
|
|
};
|
|
|
|
|
2018-02-06 12:32:47 +02:00
|
|
|
// eslint-disable-next-line camelcase
|
2018-02-05 17:12:47 +02:00
|
|
|
export const Meta = ({ name, version, type, published_at, state, os }) => (
|
|
|
|
<Fragment>
|
|
|
|
<Flex alignCenter>
|
|
|
|
<FlexItem>
|
|
|
|
<Margin right="2">
|
|
|
|
{React.createElement(OS[os], {
|
|
|
|
width: '30',
|
|
|
|
height: '30'
|
|
|
|
})}
|
|
|
|
</Margin>
|
|
|
|
</FlexItem>
|
|
|
|
<FlexItem>
|
|
|
|
<H2 bold>{name}</H2>
|
|
|
|
</FlexItem>
|
|
|
|
</Flex>
|
|
|
|
<Margin top={2} bottom={3}>
|
|
|
|
<Flex>
|
|
|
|
<Label>{version}</Label>
|
|
|
|
<VerticalDivider />
|
|
|
|
<Label>{ImageType[type]}</Label>
|
|
|
|
<VerticalDivider />
|
|
|
|
<Fragment>
|
|
|
|
<GreyLabel>Created:</GreyLabel>
|
|
|
|
<Label> {distanceInWordsToNow(published_at)} ago</Label>
|
|
|
|
</Fragment>
|
|
|
|
<VerticalDivider />
|
|
|
|
<Flex>
|
|
|
|
<FlexItem>
|
|
|
|
<DotIcon
|
|
|
|
right={remcalc(6)}
|
|
|
|
size={remcalc(15)}
|
|
|
|
color={StateColor[state]}
|
|
|
|
/>
|
|
|
|
</FlexItem>
|
|
|
|
<FlexItem>
|
|
|
|
<Label>{titleCase(state)}</Label>
|
|
|
|
</FlexItem>
|
|
|
|
</Flex>
|
|
|
|
</Flex>
|
|
|
|
</Margin>
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
2018-02-14 21:36:31 +02:00
|
|
|
export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
|
2018-02-05 17:12:47 +02:00
|
|
|
<Row>
|
|
|
|
<Col xs={12} sm={12} md={9}>
|
|
|
|
<Card>
|
|
|
|
<CardOutlet>
|
|
|
|
<Padding all={4}>
|
|
|
|
<Meta {...image} />
|
|
|
|
<Row between="xs">
|
|
|
|
<Col xs={9}>
|
|
|
|
<SmallOnly>
|
|
|
|
<Button type="button" small icon>
|
|
|
|
<DuplicateIcon light />
|
|
|
|
</Button>
|
|
|
|
</SmallOnly>
|
|
|
|
<Medium>
|
2018-02-14 21:36:31 +02:00
|
|
|
<Button
|
|
|
|
type="button"
|
2018-03-06 03:47:30 +02:00
|
|
|
href={`${GLOBAL.origin}/instances/~create/?image=${
|
|
|
|
image.name
|
|
|
|
}`}
|
2018-02-15 16:37:59 +02:00
|
|
|
target="__blank"
|
|
|
|
rel="noopener noreferrer"
|
2018-02-14 21:36:31 +02:00
|
|
|
bold
|
|
|
|
icon
|
|
|
|
>
|
2018-02-05 17:12:47 +02:00
|
|
|
<DuplicateIcon light />
|
|
|
|
<span>Create Instance</span>
|
|
|
|
</Button>
|
|
|
|
</Medium>
|
|
|
|
</Col>
|
|
|
|
<Col xs={3}>
|
|
|
|
<SmallOnly>
|
|
|
|
<Button type="button" small icon error right>
|
|
|
|
<DeleteIcon fill={theme.red} />
|
|
|
|
</Button>
|
|
|
|
</SmallOnly>
|
|
|
|
<Medium>
|
2018-02-14 21:36:31 +02:00
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
loading={removing}
|
|
|
|
onClick={onRemove}
|
|
|
|
bold
|
|
|
|
icon
|
|
|
|
error
|
|
|
|
right
|
|
|
|
>
|
2018-02-05 17:12:47 +02:00
|
|
|
<DeleteIcon fill={theme.red} />
|
|
|
|
<span>Remove</span>
|
|
|
|
</Button>
|
|
|
|
</Medium>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Margin bottom="4" top="4">
|
|
|
|
<Divider height={remcalc(1)} />
|
|
|
|
</Margin>
|
|
|
|
<Margin bottom="2">
|
|
|
|
<P>{image.description}</P>
|
|
|
|
</Margin>
|
|
|
|
<CopiableField text={(image.id || '').split('-')[0]} label="ID" />
|
|
|
|
<CopiableField text={image.id} label="UUID" />
|
2018-02-13 22:33:03 +02:00
|
|
|
<Row>
|
|
|
|
<Col xs={12} md={7}>
|
|
|
|
<FormLabel>Operating system</FormLabel>
|
|
|
|
<Input
|
|
|
|
monospace
|
|
|
|
onBlur={null}
|
|
|
|
fluid
|
|
|
|
value={titleCase(image.os)}
|
|
|
|
/>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
2018-02-05 17:12:47 +02:00
|
|
|
</Padding>
|
|
|
|
</CardOutlet>
|
|
|
|
</Card>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
));
|