import React, { Component } from 'react'; import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import styled, { withTheme } from 'styled-components'; import { Margin, Padding } from 'styled-components-spacing'; import remcalc from 'remcalc'; import is from 'styled-is'; import titleCase from 'title-case'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import copy from 'clipboard-copy'; import { Card, CardOutlet, Divider, ResetIcon, Button, FormLabel, Input, H2, Label, QueryBreakpoints, DotIcon, DeleteIcon, StartIcon, StopIcon, TooltipContainer, TooltipTarget, Tooltip, ClipboardIcon } 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 InputIconWrapper = styled.div` display: flex; margin-bottom: ${remcalc(10)}; align-items: center; ${is('noMargin')` margin-bottom: ${remcalc(0)}; `}; input { padding-right: ${remcalc(30)}; } div { position: relative; left: ${remcalc(-26)}; } `; 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 ClipboardIconActionable = styled(ClipboardIcon)` cursor: pointer; `; export class CopyToClipboardTooltip extends Component { constructor() { super(); this.state = { copied: false }; } handleClick = () => { const { children: text } = this.props; copy(text); this.setState( { copied: true }, () => { setTimeout(() => { this.setState({ copied: false }); }, 4000); } ); }; render = () => ( {this.state.copied ? 'Copied To Clipboard' : 'Copy To Clipboard'} ); } export const CopiableField = ({ label, text, ...rest }) => ( {label} {text} ); export const Meta = ({ created, updated, state, brand, image, ...instance }) => [

{(instance.package || {}).name}

, {titleCase(state)} Created: Updated: ]; export default withTheme( ({ instance = {}, starting = false, stopping = false, rebooting = false, removing = false, onAction, theme = {} }) => ( {instance.image && instance.image.id && ( )} {(instance.ips || []).map((ip, i) => ( ))} ) );