2017-05-18 21:21:33 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Card,
|
|
|
|
CardView,
|
|
|
|
CardMeta,
|
|
|
|
CardTitle,
|
|
|
|
CardSubTitle,
|
|
|
|
CardDescription,
|
|
|
|
CardGroupView,
|
|
|
|
CardOptions,
|
|
|
|
CardHeader,
|
2017-06-28 20:36:54 +03:00
|
|
|
CardInfo,
|
2017-05-18 21:21:33 +03:00
|
|
|
Anchor
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
2017-06-28 20:36:54 +03:00
|
|
|
import { InstancesIcon, HealthyIcon, P } from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
import InstanceStatuses from './instance-statuses';
|
|
|
|
|
2017-06-01 12:28:59 +03:00
|
|
|
const StyledCardHeader = styled(CardHeader)`
|
|
|
|
position: relative;
|
|
|
|
`;
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
const TitleInnerContainer = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const ServiceListItem = ({
|
2017-06-01 12:28:59 +03:00
|
|
|
onQuickActionsClick = () => {},
|
2017-05-18 21:21:33 +03:00
|
|
|
deploymentGroup = '',
|
|
|
|
service = {}
|
|
|
|
}) => {
|
|
|
|
const isChild = Boolean(service.parent);
|
|
|
|
|
|
|
|
const children = service.children
|
2017-06-09 07:26:25 +03:00
|
|
|
? service.children.map(service =>
|
2017-05-18 21:21:33 +03:00
|
|
|
<ServiceListItem
|
2017-06-01 17:05:10 +03:00
|
|
|
key={service.id}
|
2017-05-18 21:21:33 +03:00
|
|
|
deploymentGroup={deploymentGroup}
|
|
|
|
service={service}
|
|
|
|
/>
|
2017-06-09 07:26:25 +03:00
|
|
|
)
|
2017-05-18 21:21:33 +03:00
|
|
|
: null;
|
|
|
|
|
|
|
|
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
|
|
|
|
|
|
|
|
const title = service.parent
|
|
|
|
? <CardTitle>
|
|
|
|
{service.name}
|
|
|
|
</CardTitle>
|
|
|
|
: <CardTitle>
|
|
|
|
<TitleInnerContainer>
|
|
|
|
<Anchor secondary to={to}>
|
|
|
|
{service.name}
|
|
|
|
</Anchor>
|
|
|
|
</TitleInnerContainer>
|
|
|
|
</CardTitle>;
|
|
|
|
|
2017-06-26 15:25:46 +03:00
|
|
|
const subtitle = (
|
2017-06-28 20:36:54 +03:00
|
|
|
<CardSubTitle>
|
|
|
|
{service.instances.length}{' '}
|
|
|
|
{service.instances.length > 1 ? 'instances' : 'instance'}
|
|
|
|
</CardSubTitle>
|
2017-06-26 15:25:46 +03:00
|
|
|
);
|
2017-05-18 21:21:33 +03:00
|
|
|
|
2017-06-01 12:28:59 +03:00
|
|
|
const handleCardOptionsClick = evt => {
|
2017-06-19 15:10:57 +03:00
|
|
|
onQuickActionsClick(evt, service);
|
2017-06-01 12:28:59 +03:00
|
|
|
};
|
|
|
|
|
2017-06-28 20:36:54 +03:00
|
|
|
const instancesCount = service.children
|
|
|
|
? service.children.reduce(
|
|
|
|
(count, child) => count + child.instances.length,
|
|
|
|
0
|
|
|
|
)
|
|
|
|
: service.instances.length;
|
2017-06-26 15:25:46 +03:00
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
const header = isChild
|
|
|
|
? null
|
2017-06-01 12:28:59 +03:00
|
|
|
: <StyledCardHeader>
|
2017-06-28 20:36:54 +03:00
|
|
|
{title}
|
|
|
|
<CardDescription>
|
|
|
|
<CardInfo
|
|
|
|
icon={<InstancesIcon />}
|
|
|
|
iconPosition="left"
|
|
|
|
label={`${instancesCount} ${instancesCount > 1
|
|
|
|
? 'instances'
|
|
|
|
: 'instance'}`}
|
|
|
|
color="light"
|
|
|
|
/>
|
|
|
|
</CardDescription>
|
2017-06-01 12:28:59 +03:00
|
|
|
<CardOptions onClick={handleCardOptionsClick} />
|
|
|
|
</StyledCardHeader>;
|
2017-07-05 16:33:16 +03:00
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
const view = children
|
|
|
|
? <CardGroupView>
|
|
|
|
{children}
|
|
|
|
</CardGroupView>
|
|
|
|
: <CardView>
|
2017-06-28 20:36:54 +03:00
|
|
|
{isChild && title}
|
|
|
|
{isChild && subtitle}
|
|
|
|
<CardDescription>
|
2017-06-30 13:52:55 +03:00
|
|
|
<InstanceStatuses instanceStatuses={service.instanceStatuses} />
|
2017-06-28 20:36:54 +03:00
|
|
|
<CardInfo
|
|
|
|
icon={<HealthyIcon />}
|
|
|
|
iconPosition="left"
|
|
|
|
label="Healthy"
|
|
|
|
color="dark"
|
|
|
|
/>
|
|
|
|
</CardDescription>
|
2017-05-18 21:21:33 +03:00
|
|
|
</CardView>;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card
|
|
|
|
collapsed={service.collapsed}
|
|
|
|
flat={isChild}
|
|
|
|
headed={!isChild}
|
2017-06-01 17:05:10 +03:00
|
|
|
key={service.id}
|
2017-05-18 21:21:33 +03:00
|
|
|
stacked={isChild && service.instances > 1}
|
|
|
|
>
|
|
|
|
{header}
|
|
|
|
{view}
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
ServiceListItem.propTypes = {
|
2017-06-01 12:28:59 +03:00
|
|
|
onQuickActionsClick: PropTypes.func,
|
2017-05-18 21:21:33 +03:00
|
|
|
deploymentGroup: PropTypes.string,
|
2017-05-25 23:03:39 +03:00
|
|
|
service: PropTypes.object.isRequired // Define better
|
2017-05-18 21:21:33 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ServiceListItem;
|