125 lines
3.2 KiB
JavaScript
125 lines
3.2 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import styled from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
import { Field } from 'redux-form';
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
|
import { Padding, Margin } from 'styled-components-spacing';
|
|
|
|
import {
|
|
Card,
|
|
Anchor,
|
|
CardHeader,
|
|
Divider,
|
|
ActionsIcon,
|
|
PopoverTarget,
|
|
Popover,
|
|
PopoverItem,
|
|
PopoverDivider,
|
|
PopoverContainer,
|
|
Radio,
|
|
FormLabel,
|
|
FormGroup
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
import { ImageType, OS } from '@root/constants';
|
|
|
|
const A = styled(Anchor)`
|
|
color: ${props => props.theme.text};
|
|
text-decoration: none;
|
|
font-weight: ${props => props.theme.font.weight.semibold};
|
|
`;
|
|
|
|
export const Image = ({ name, os, version, type }) => (
|
|
<Margin bottom={3}>
|
|
<Card>
|
|
<CardHeader white>
|
|
<Padding left={2} right={2}>
|
|
<Flex full alignCenter>
|
|
<Margin right={2}>
|
|
{React.createElement(OS[os], {
|
|
width: '24',
|
|
height: '24'
|
|
})}
|
|
</Margin>
|
|
<A to={`/${name}`} component={Link}>
|
|
{name}
|
|
</A>
|
|
</Flex>
|
|
</Padding>
|
|
</CardHeader>
|
|
<Flex justifyBetween>
|
|
<Padding left={2} top={2} bottom={2}>
|
|
<Flex justifyBetween>
|
|
<Flex>
|
|
<Flex>{version}</Flex>
|
|
<Margin left={1}>
|
|
<Divider width={remcalc(1)} height="100%" />
|
|
</Margin>
|
|
<Padding left={2}>{ImageType[type]}</Padding>
|
|
</Flex>
|
|
</Flex>
|
|
</Padding>
|
|
<PopoverContainer clickable>
|
|
<FlexItem basis={remcalc(48)}>
|
|
<PopoverTarget box style={{ borderLeft: '1px solid #D8D8D8' }}>
|
|
<ActionsIcon />
|
|
</PopoverTarget>
|
|
<Popover placement="bottom">
|
|
<PopoverItem disabled={false} onClick={() => {}}>
|
|
Create Instance
|
|
</PopoverItem>
|
|
<PopoverDivider />
|
|
<PopoverItem disabled={false} onClick={() => {}}>
|
|
Remove
|
|
</PopoverItem>
|
|
</Popover>
|
|
</FlexItem>
|
|
</PopoverContainer>
|
|
</Flex>
|
|
</Card>
|
|
</Margin>
|
|
);
|
|
|
|
export const Filters = () => (
|
|
<Fragment>
|
|
<FormGroup name="image-type" value="all" field={Field} type="radio">
|
|
<Radio noMargin>
|
|
<Flex alignCenter>
|
|
<Margin right={2}>
|
|
<FormLabel>All</FormLabel>
|
|
</Margin>
|
|
</Flex>
|
|
</Radio>
|
|
</FormGroup>
|
|
<FormGroup
|
|
name="image-type"
|
|
value="hardware-virtual-machine"
|
|
field={Field}
|
|
type="radio"
|
|
>
|
|
<Radio noMargin>
|
|
<Flex alignCenter>
|
|
<Margin right={2}>
|
|
<FormLabel>Virtual machines</FormLabel>
|
|
</Margin>
|
|
</Flex>
|
|
</Radio>
|
|
</FormGroup>
|
|
<FormGroup
|
|
name="image-type"
|
|
value="infrastructure-container"
|
|
field={Field}
|
|
type="radio"
|
|
>
|
|
<Radio noMargin>
|
|
<Flex alignCenter>
|
|
<Margin right={2}>
|
|
<FormLabel>Infrastructure container</FormLabel>
|
|
</Margin>
|
|
</Flex>
|
|
</Radio>
|
|
</FormGroup>
|
|
</Fragment>
|
|
);
|