368 lines
10 KiB
JavaScript
368 lines
10 KiB
JavaScript
|
import React from 'react';
|
|||
|
|
import { Link } from 'react-router-dom';
|
|||
|
|
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
|
|||
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|||
|
|
import { Padding, Margin } from 'styled-components-spacing';
|
|||
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
|||
|
|
import styled from 'styled-components';
|
|||
|
|
import remcalc from 'remcalc';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
Card,
|
|||
|
|
CardOutlet,
|
|||
|
|
H2,
|
|||
|
|
H3,
|
|||
|
|
P,
|
|||
|
|
Label,
|
|||
|
|
FormGroup,
|
|||
|
|
FormLabel,
|
|||
|
|
Input,
|
|||
|
|
Checkbox,
|
|||
|
|
Anchor,
|
|||
|
|
Button,
|
|||
|
|
Hr,
|
|||
|
|
Table,
|
|||
|
|
TableThead,
|
|||
|
|
TableTbody,
|
|||
|
|
PaginationTableFoot,
|
|||
|
|
PaginationItem,
|
|||
|
|
TableTr,
|
|||
|
|
TableTh,
|
|||
|
|
TableTd,
|
|||
|
|
DeleteIcon,
|
|||
|
|
ArrowIcon
|
|||
|
|
} from 'joyent-ui-toolkit';
|
|||
|
|
|
|||
|
|
const GreyLabel = styled(Label)`
|
|||
|
|
opacity: 0.5;
|
|||
|
|
padding-right: ${remcalc(3)};
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
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)};
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
export const Meta = ({
|
|||
|
|
id,
|
|||
|
|
name,
|
|||
|
|
capacity,
|
|||
|
|
template,
|
|||
|
|
created,
|
|||
|
|
updated,
|
|||
|
|
status,
|
|||
|
|
onRemove,
|
|||
|
|
removing = false
|
|||
|
|
}) => (
|
|||
|
|
<Card>
|
|||
|
|
<CardOutlet>
|
|||
|
|
<Padding all="5">
|
|||
|
|
<H2>{name}</H2>
|
|||
|
|
<Margin top="2">
|
|||
|
|
<P>{capacity} desired instances</P>
|
|||
|
|
</Margin>
|
|||
|
|
<Margin top="3" bottom="3">
|
|||
|
|
<Hr />
|
|||
|
|
</Margin>
|
|||
|
|
<Margin bottom="3">
|
|||
|
|
<Flex>
|
|||
|
|
<FlexItem>
|
|||
|
|
<Padding right="3">
|
|||
|
|
<GreyLabel inline>Template: </GreyLabel>
|
|||
|
|
<Label inline>
|
|||
|
|
{' '}
|
|||
|
|
<Anchor
|
|||
|
|
to={`/templates/${template.id}`}
|
|||
|
|
component={Link}
|
|||
|
|
tertiary
|
|||
|
|
>
|
|||
|
|
{template.name}
|
|||
|
|
</Anchor>
|
|||
|
|
</Label>
|
|||
|
|
</Padding>
|
|||
|
|
</FlexItem>
|
|||
|
|
<VerticalDivider />
|
|||
|
|
<FlexItem>
|
|||
|
|
<Padding right="3">
|
|||
|
|
<GreyLabel inline>Created: </GreyLabel>
|
|||
|
|
<Label inline> {distanceInWordsToNow(created)} ago</Label>
|
|||
|
|
</Padding>
|
|||
|
|
</FlexItem>
|
|||
|
|
<VerticalDivider />
|
|||
|
|
<FlexItem>
|
|||
|
|
<Padding horizontal="3">
|
|||
|
|
<GreyLabel inline>Updated: </GreyLabel>
|
|||
|
|
<Label inline> {distanceInWordsToNow(updated)} ago</Label>
|
|||
|
|
</Padding>
|
|||
|
|
</FlexItem>
|
|||
|
|
</Flex>
|
|||
|
|
</Margin>
|
|||
|
|
<Row between="xs">
|
|||
|
|
<Col xs="6">
|
|||
|
|
<Margin right="1" inline>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
to={`/service-groups/~edit/${id}/name`}
|
|||
|
|
component={Link}
|
|||
|
|
bold
|
|||
|
|
icon
|
|||
|
|
>
|
|||
|
|
<span>Edit Service Group</span>
|
|||
|
|
</Button>
|
|||
|
|
</Margin>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
to={`/instances?sg=${id}`}
|
|||
|
|
component={Link}
|
|||
|
|
secondary
|
|||
|
|
bold
|
|||
|
|
icon
|
|||
|
|
>
|
|||
|
|
<span>View instances</span>
|
|||
|
|
</Button>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs="6">
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
onClick={onRemove}
|
|||
|
|
loading={removing}
|
|||
|
|
secondary
|
|||
|
|
bold
|
|||
|
|
right
|
|||
|
|
icon
|
|||
|
|
error
|
|||
|
|
>
|
|||
|
|
<Margin right="2">
|
|||
|
|
<DeleteIcon fill="red" />
|
|||
|
|
</Margin>
|
|||
|
|
<span>Remove</span>
|
|||
|
|
</Button>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Padding>
|
|||
|
|
</CardOutlet>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
export const EventLogContainer = () => (
|
|||
|
|
<Card>
|
|||
|
|
<CardOutlet>
|
|||
|
|
<Padding all="5">
|
|||
|
|
<H3>Event log</H3>
|
|||
|
|
<Margin top="5" bottom="3">
|
|||
|
|
<Flex justifyBetween alignEnd>
|
|||
|
|
<FormGroup name="filter">
|
|||
|
|
<Margin bottom="0.5">
|
|||
|
|
<FormLabel>Filter</FormLabel>
|
|||
|
|
</Margin>
|
|||
|
|
<Flex alignCenter>
|
|||
|
|
<FlexItem>
|
|||
|
|
<Margin right="5">
|
|||
|
|
<Input />
|
|||
|
|
</Margin>
|
|||
|
|
</FlexItem>
|
|||
|
|
<FlexItem>
|
|||
|
|
<FormGroup>
|
|||
|
|
<Margin right="3">
|
|||
|
|
<Checkbox>
|
|||
|
|
<Margin left="2">
|
|||
|
|
<Label>Show census checks</Label>
|
|||
|
|
</Margin>
|
|||
|
|
</Checkbox>
|
|||
|
|
</Margin>
|
|||
|
|
</FormGroup>
|
|||
|
|
</FlexItem>
|
|||
|
|
<FlexItem>
|
|||
|
|
<FormGroup>
|
|||
|
|
<Margin right="3">
|
|||
|
|
<Checkbox>
|
|||
|
|
<Margin left="2">
|
|||
|
|
<Label>Show users activity</Label>
|
|||
|
|
</Margin>
|
|||
|
|
</Checkbox>
|
|||
|
|
</Margin>
|
|||
|
|
</FormGroup>
|
|||
|
|
</FlexItem>
|
|||
|
|
</Flex>
|
|||
|
|
</FormGroup>
|
|||
|
|
</Flex>
|
|||
|
|
</Margin>
|
|||
|
|
<Margin bottom="5">
|
|||
|
|
<Hr />
|
|||
|
|
</Margin>
|
|||
|
|
<Table>
|
|||
|
|
<TableThead>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTh xs="200" left middle actionable>
|
|||
|
|
<span>Time & date</span>
|
|||
|
|
</TableTh>
|
|||
|
|
<TableTh left middle actionable>
|
|||
|
|
<span>Log description</span>
|
|||
|
|
</TableTh>
|
|||
|
|
<TableTh xs="230" left middle actionable>
|
|||
|
|
<span>Actor ID</span>
|
|||
|
|
</TableTh>
|
|||
|
|
</TableTr>
|
|||
|
|
</TableThead>
|
|||
|
|
<TableTbody>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>09:52 - 28/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>5 of 5 instances running</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Census check</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>09:50 - 28/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Destroying instances</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>tritionServiceGroups</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>09:45 - 28/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>10 of 5 instances running</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Census checks</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:17 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>‘Desired instances’ set to 5</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>raoulmillais</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr disabled>
|
|||
|
|
<TableTd colSpan="3" middle left shrinken>
|
|||
|
|
<Anchor>
|
|||
|
|
Show hidden actions (63) <ArrowIcon fill="primary" />
|
|||
|
|
</Anchor>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:16 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Provisioning instances</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>tritionServiceGroups</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:16 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>7 of 10 instances running</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Census checks</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:11 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>10 of 10 instances running</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Census checks</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:11 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Provisioning instances</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>tritionServiceGroups</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:10 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>0 of 10 instance running</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Census checks</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:09 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Job working</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>tritionServiceGroups</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>09:51 - 28/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Job submission</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>tritionServiceGroups</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
<TableTr>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>12:08 - 26/03/2018</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>Service group deployed</span>
|
|||
|
|
</TableTd>
|
|||
|
|
<TableTd middle left>
|
|||
|
|
<span>raoulmillais</span>
|
|||
|
|
</TableTd>
|
|||
|
|
</TableTr>
|
|||
|
|
</TableTbody>
|
|||
|
|
<PaginationTableFoot colSpan="3">
|
|||
|
|
<PaginationItem to="" component={Link} disabled prev>
|
|||
|
|
Prev
|
|||
|
|
</PaginationItem>
|
|||
|
|
<PaginationItem to="" component={Link} active>
|
|||
|
|
1
|
|||
|
|
</PaginationItem>
|
|||
|
|
<PaginationItem to="" component={Link} disabled next>
|
|||
|
|
Next
|
|||
|
|
</PaginationItem>
|
|||
|
|
</PaginationTableFoot>
|
|||
|
|
</Table>
|
|||
|
|
</Padding>
|
|||
|
|
</CardOutlet>
|
|||
|
|
</Card>
|
|||
|
|
);
|