2017-05-18 21:21:33 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled from 'styled-components';
|
2017-07-28 17:25:06 +03:00
|
|
|
import forceArray from 'force-array';
|
|
|
|
import sortBy from 'lodash.sortby';
|
2017-08-14 13:21:45 +03:00
|
|
|
import { isNot } from 'styled-is';
|
2017-05-18 21:21:33 +03:00
|
|
|
|
2017-08-21 15:39:02 +03:00
|
|
|
import { InstancesIcon, HealthyIcon } from 'joyent-ui-toolkit';
|
2017-07-27 20:45:44 +03:00
|
|
|
import Status from './status';
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
import {
|
|
|
|
Card,
|
|
|
|
CardView,
|
|
|
|
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-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;
|
2017-08-14 13:21:45 +03:00
|
|
|
justify-content: left;
|
2017-05-18 21:21:33 +03:00
|
|
|
align-items: center;
|
|
|
|
`;
|
|
|
|
|
2017-08-14 13:21:45 +03:00
|
|
|
const StyledAnchor = styled(Anchor)`
|
|
|
|
${isNot('active')`
|
|
|
|
color: ${props => props.theme.text}
|
|
|
|
`};
|
|
|
|
`;
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
const ServiceListItem = ({
|
2017-06-01 12:28:59 +03:00
|
|
|
onQuickActionsClick = () => {},
|
2017-05-18 21:21:33 +03:00
|
|
|
deploymentGroup = '',
|
2017-08-21 15:39:02 +03:00
|
|
|
service,
|
2017-07-19 19:20:22 +03:00
|
|
|
isChild = false
|
2017-05-18 21:21:33 +03:00
|
|
|
}) => {
|
2017-07-28 17:25:06 +03:00
|
|
|
const handleCardOptionsClick = evt => {
|
|
|
|
onQuickActionsClick(evt, service);
|
|
|
|
};
|
2017-05-18 21:21:33 +03:00
|
|
|
|
2017-07-28 19:56:03 +03:00
|
|
|
const children = sortBy(forceArray(service.children), ['slug']);
|
2017-08-14 13:21:45 +03:00
|
|
|
// const isServiceInactive = service.status && service.status !== 'ACTIVE';
|
2017-05-18 21:21:33 +03:00
|
|
|
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
|
|
|
|
|
2017-07-28 17:25:06 +03:00
|
|
|
const instancesCount = children.length
|
|
|
|
? children.reduce((count, child) => count + child.instances.length, 0)
|
|
|
|
: service.instances.length;
|
|
|
|
|
2017-08-21 15:39:02 +03:00
|
|
|
const childrenItems = children.length
|
2017-08-28 22:21:08 +03:00
|
|
|
? children.map(service => (
|
|
|
|
<ServiceListItem
|
|
|
|
key={service.id}
|
|
|
|
deploymentGroup={deploymentGroup}
|
|
|
|
service={service}
|
|
|
|
isChild
|
|
|
|
/>
|
|
|
|
))
|
|
|
|
: null;
|
|
|
|
|
|
|
|
const title = isChild ? (
|
|
|
|
<CardTitle>{service.name}</CardTitle>
|
|
|
|
) : (
|
|
|
|
<CardTitle>
|
|
|
|
<TitleInnerContainer>
|
|
|
|
<StyledAnchor to={to} secondary active={service.instancesActive}>
|
|
|
|
{service.name}
|
|
|
|
</StyledAnchor>
|
|
|
|
</TitleInnerContainer>
|
|
|
|
</CardTitle>
|
|
|
|
);
|
2017-05-18 21:21:33 +03:00
|
|
|
|
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-08-28 22:21:08 +03:00
|
|
|
const header = !isChild ? (
|
|
|
|
<StyledCardHeader>
|
|
|
|
{title}
|
|
|
|
<CardDescription>
|
|
|
|
<CardInfo
|
|
|
|
icon={<InstancesIcon />}
|
|
|
|
iconPosition="left"
|
|
|
|
label={`${instancesCount} ${instancesCount > 1
|
|
|
|
? 'instances'
|
|
|
|
: 'instance'}`}
|
|
|
|
color={!service.instancesActive ? 'disabled' : 'light'}
|
|
|
|
/>
|
|
|
|
</CardDescription>
|
|
|
|
<CardOptions onClick={handleCardOptionsClick} />
|
|
|
|
</StyledCardHeader>
|
|
|
|
) : null;
|
2017-07-05 16:33:16 +03:00
|
|
|
|
2017-08-14 13:21:45 +03:00
|
|
|
let healthyInfo = null;
|
2017-08-28 22:21:08 +03:00
|
|
|
if (service.instancesActive) {
|
2017-08-14 13:21:45 +03:00
|
|
|
const { total, healthy } = service.instancesHealthy;
|
|
|
|
const iconHealthy = total === healthy ? 'HEALTHY' : 'NOT HEALTHY';
|
|
|
|
const icon = <HealthyIcon healthy={iconHealthy} />;
|
|
|
|
const label = `${healthy} of ${total} healthy`;
|
|
|
|
|
|
|
|
healthyInfo = (
|
2017-08-28 22:21:08 +03:00
|
|
|
<CardInfo icon={icon} iconPosition="left" label={label} color="dark" />
|
|
|
|
);
|
2017-08-14 13:21:45 +03:00
|
|
|
}
|
2017-07-12 16:00:54 +03:00
|
|
|
|
2017-08-28 22:21:08 +03:00
|
|
|
const view = children.length ? (
|
|
|
|
<CardGroupView>{childrenItems}</CardGroupView>
|
|
|
|
) : (
|
|
|
|
<CardView>
|
|
|
|
{isChild && title}
|
|
|
|
{isChild && subtitle}
|
|
|
|
<CardDescription>
|
|
|
|
<Status service={service} />
|
|
|
|
{healthyInfo}
|
|
|
|
</CardDescription>
|
|
|
|
</CardView>
|
|
|
|
);
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Card
|
|
|
|
collapsed={service.collapsed}
|
2017-08-14 13:21:45 +03:00
|
|
|
active={service.instancesActive}
|
2017-05-18 21:21:33 +03:00
|
|
|
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;
|