import React, { Fragment } from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc';
import styled from 'styled-components';
import titleCase from 'title-case';
import { Link } from 'react-router-dom';
import { Field } from 'redux-form';
import Flex from 'styled-flex-component';
import queryString from 'query-string';
import {
Anchor,
FormGroup,
Checkbox,
Table,
TableThead,
TableTr,
TableTh,
TableTd,
TableTbody,
PaginationTableFoot,
PaginationItem,
StatusLoader,
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
PopoverDivider,
DotIcon,
ActionsIcon
} from 'joyent-ui-toolkit';
import GLOBAL, { Global } from '@state/global';
const stateColor = {
PROVISIONING: 'primary',
RUNNING: 'green',
STOPPING: 'grey',
STOPPED: 'grey',
DELETED: 'secondaryActive',
FAILED: 'red'
};
const A = styled(Anchor)`
color: ${props => props.theme.text};
text-decoration: none;
font-weight: ${props => props.theme.font.weight.semibold};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
`;
const ItemAnchor = styled(Anchor)`
color: ${props => props.theme.text};
-webkit-text-fill-color: currentcolor;
text-decoration: none;
`;
const Actions = styled(Flex)`
height: ${remcalc(48)};
`;
export const FetchingItem = () => (
{id.substring(0, 7)}