import React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import titleCase from 'title-case';
import get from 'lodash.get';
import remcalc from 'remcalc';
import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button,
H2,
Label,
CopiableField,
QueryBreakpoints,
DotIcon,
DeleteIcon,
StartIcon,
StopIcon,
InstanceTypeIcon
} from 'joyent-ui-toolkit';
const { SmallOnly, Medium } = QueryBreakpoints;
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const VerticalDivider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(24)};
display: flex;
align-self: flex-end;
margin: 0 ${remcalc(12)};
@media (max-width: ${remcalc(767)}) {
display: none;
}
`;
export const Meta = ({
created,
updated,
state,
brand,
image,
...instance
}) => [
{instance.name}
,
{titleCase(state)}
Created:
Updated:
];
export default withTheme(
({
instance = {},
starting = false,
stopping = false,
rebooting = false,
removing = false,
onAction,
theme = {}
}) => (
{instance.image &&
instance.image.id && (
)}
{get(instance, 'ips.public', []).map((ip, i, ips) => (
1 ? i + 1 : ''}`}
text={ip}
/>
))}
{get(instance, 'ips.private', []).map((ip, i, ips) => (
1 ? i + 1 : ''}`}
text={ip}
/>
))}
)
);