<commit_before>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
}) => [
  <Row middle="xs">
    <Col xs={12}>
      <H2>{instance.name}</H2>
    </Col>
  </Row>,
  <Margin top={2} bottom={3}>
    <Flex>
      <Label>
        {image && image.name ? titleCase(image.name) : 'Custom Image'}
      </Label>
      <VerticalDivider />
      <Label>
        {brand === 'LX'
          ? 'Infrastructure Container'
          : 'Hardware Virtual Machine'}
      </Label>
      <VerticalDivider />
      <Label>{(instance.package || {}).name}</Label>
      <VerticalDivider />
      <Flex>
        <DotIcon
          right={remcalc(6)}
          size={remcalc(15)}
          color={stateColor[state]}
        />
        {titleCase(state)}
      </Flex>
    </Flex>
    <Margin top={1}>
      <Flex>
        <Flex>
          <GreyLabel>Created: </GreyLabel>
          <Label> {distanceInWordsToNow(created)} ago</Label>
        </Flex>
        <VerticalDivider />
        <Flex>
          <GreyLabel>Updated: </GreyLabel>
          <Label> {distanceInWordsToNow(updated)} ago</Label>
        </Flex>
      </Flex>
    </Margin>
  </Margin>
];

export default withTheme(
  ({
    instance = {},
    starting = false,
    stopping = false,
    rebooting = false,
    removing = false,
    onAction,
    theme = {}
  }) => (
    <Row>
      <Col xs={12} sm={12} md={9}>
        <Card>
          <CardOutlet>
            <Padding all={4}>
              <Meta {...instance} />
              <Row between="xs">
                <Col xs={9}>
                  <Button
                    href={`http://localhost:3070/~create/${instance.name}`}
                    target="__blank"
                    rel="noopener noreferrer"
                    secondary
                    small
                  >
                    <InstanceTypeIcon />
                  </Button>
                  <SmallOnly>
                    <Button
                      type="button"
                      loading={starting}
                      disabled={instance.state !== 'STOPPED'}
                      onClick={() => onAction('start')}
                      secondary
                      small
                      icon
                    >
                      <StartIcon disabled={instance.state !== 'STOPPED'} />
                    </Button><commit_msg>fix(my-joy-beta): small create image button (tmp)<commit_after>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
}) => [
  <Row middle="xs">
    <Col xs={12}>
      <H2>{instance.name}</H2>
    </Col>
  </Row>,
  <Margin top={2} bottom={3}>
    <Flex>
      <Label>
        {image && image.name ? titleCase(image.name) : 'Custom Image'}
      </Label>
      <VerticalDivider />
      <Label>
        {brand === 'LX'
          ? 'Infrastructure Container'
          : 'Hardware Virtual Machine'}
      </Label>
      <VerticalDivider />
      <Label>{(instance.package || {}).name}</Label>
      <VerticalDivider />
      <Flex>
        <DotIcon
          right={remcalc(6)}
          size={remcalc(15)}
          color={stateColor[state]}
        />
        {titleCase(state)}
      </Flex>
    </Flex>
    <Margin top={1}>
      <Flex>
        <Flex>
          <GreyLabel>Created: </GreyLabel>
          <Label> {distanceInWordsToNow(created)} ago</Label>
        </Flex>
        <VerticalDivider />
        <Flex>
          <GreyLabel>Updated: </GreyLabel>
          <Label> {distanceInWordsToNow(updated)} ago</Label>
        </Flex>
      </Flex>
    </Margin>
  </Margin>
];

export default withTheme(
  ({
    instance = {},
    starting = false,
    stopping = false,
    rebooting = false,
    removing = false,
    onAction,
    theme = {}
  }) => (
    <Row>
      <Col xs={12} sm={12} md={9}>
        <Card>
          <CardOutlet>
            <Padding all={4}>
              <Meta {...instance} />
              <Row between="xs">
                <Col xs={9}>
                  <Button
                    href={`http://localhost:3070/~create/${instance.name}`}
                    target="__blank"
                    rel="noopener noreferrer"
                    secondary
                    bold
                    small
                    icon
                  >
                    <Padding top={0.5}><InstanceTypeIcon /></Padding>
                  </Button>
                  <SmallOnly>
                    <Button
                      type="button"
                      loading={starting}
                      disabled={instance.state !== 'STOPPED'}
                      onClick={() => onAction('start')}
                      secondary
                      small
                      icon
                    >
                      <StartIcon disabled={instance.state !== 'STOPPED'} />
                    </Button>
{'fraction_non_alphanumeric': 0.14620431115276475, 'fraction_numerical': 0.010175391618690587, 'mean_word_length': 1.8327645051194539, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6643905', 'n_tokens_mistral': 2415, 'n_tokens_neox': 2284, 'n_words': 480}