import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import forceArray from 'force-array';
import sortBy from 'lodash.sortby';
import { isNot } from 'styled-is';
import { Col, Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc';
import { InstancesIcon, HealthyIcon } from 'joyent-ui-toolkit';
import Status from './status';
import {
Small,
MetricGraph,
Card,
CardView,
CardTitle,
CardDescription,
CardGroupView,
CardOptions,
CardHeader,
CardInfo,
Anchor
} from 'joyent-ui-toolkit';
const StyledCardHeader = styled(CardHeader)`
position: relative;
`;
const TitleInnerContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
`;
const StyledAnchor = styled(Anchor)`
${isNot('active')`
color: ${props => props.theme.text}
`};
`;
const GraphsContainer = styled(Row)`
background: #f6f7fe;
width: 50%;
margin: 0;
flex: 1;
`;
const GraphContainer = styled(Col)`
position: relative;
border-left: ${remcalc(1)} solid #d8d8d8;
padding-top: ${remcalc(20)};
`;
const GraphLeftShaddow = styled.div`
z-index: 99;
position: absolute;
margin-left: ${remcalc(-8)};
margin-top: ${remcalc(-20)};
width: ${remcalc(12)};
height: 100%;
background-image: linear-gradient(
to right,
rgba(213, 216, 231, 0.8),
rgba(243, 244, 249, 0)
);
`;
const GraphTitle = Small.extend`
z-index: 99;
position: absolute;
top: 0;
left: 0;
right: 0;
height: ${remcalc(20)};
border-bottom: ${remcalc(1)} solid #d8d8d8;
font-size: ${remcalc(13)};
text-align: center;
color: #494949;
`;
const ChildTitle = styled(CardTitle)`
padding: 0;
flex: 0 1 auto;
align-self: stretch;
`;
const ServiceView = styled(CardView)`
height: ${remcalc(120)};
`;
const StatusContainer = styled(CardDescription)`
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: stretch;
`;
const HealthInfoContainer = styled.div`
flex: 0 1 auto;
align-self: flex-end;
position: absolute;
bottom: 0;
`;
const ServiceListItem = ({
onQuickActionsClick = () => {},
deploymentGroup = '',
service,
isChild = false
}) => {
const handleCardOptionsClick = evt => {
onQuickActionsClick(evt, service);
};
const children = sortBy(forceArray(service.children), ['slug']);
// const isServiceInactive = service.status && service.status !== 'ACTIVE';
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
const instancesCount = children.length
? children.reduce((count, child) => count + child.instances.length, 0)
: service.instances.length;
const childrenItems = children.length
? children.map(service => (
))
: null;
const title = isChild ? (
{service.name}
) : (
{service.name}
);
const header = !isChild ? (
{title}
}
iconPosition="left"
label={`${instancesCount} ${instancesCount > 1
? 'instances'
: 'instance'}`}
color={!service.instancesActive ? 'disabled' : 'light'}
/>
) : null;
let healthyInfo = null;
if (service.instancesActive) {
const { total, healthy } = service.instancesHealthy;
const iconHealthy = total === healthy ? 'HEALTHY' : 'NOT HEALTHY';
const icon = ;
const label = `${healthy} of ${total} healthy`;
healthyInfo = (
);
}
const graphs =
!children.length && Object.keys(service.metrics).length
? Object.keys(service.metrics).map(key => (
{key}
))
: null;
const metrics = graphs ? {graphs} : null;
const view = children.length ? (
{childrenItems}
) : (
{isChild && title}
{healthyInfo}
{metrics}
);
return (
1}
>
{header}
{view}
);
};
ServiceListItem.propTypes = {
onQuickActionsClick: PropTypes.func,
deploymentGroup: PropTypes.string,
service: PropTypes.object.isRequired // Define better
};
export default ServiceListItem;