joyent-portal/packages/images/src/components/summary.js

174 lines
4.5 KiB
JavaScript
Raw Normal View History

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,
DotIcon,
FormLabel,
Input
2018-02-05 17:12:47 +02:00
} from 'joyent-ui-toolkit';
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>
);
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>
<Button
type="button"
href={`instances/~create/?image=${image.name}`}
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>
<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" />
<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>
));