2017-05-18 21:21:33 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import styled from 'styled-components';
|
2017-05-25 23:03:39 +03:00
|
|
|
// Import forceArray from 'force-array';
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
// import ItemMetricGroup from '@components/item-metric-group';
|
|
|
|
import {
|
|
|
|
Card,
|
|
|
|
CardView,
|
|
|
|
CardMeta,
|
|
|
|
CardTitle,
|
|
|
|
CardSubTitle,
|
|
|
|
CardDescription,
|
|
|
|
CardGroupView,
|
|
|
|
CardOptions,
|
|
|
|
CardHeader,
|
|
|
|
// CardInfo,
|
|
|
|
Anchor
|
|
|
|
// DataCentersIcon,
|
|
|
|
// HealthyIcon,
|
|
|
|
// InstancesMultipleIcon
|
|
|
|
} 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;
|
|
|
|
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>;
|
|
|
|
|
|
|
|
const subtitle = <CardSubTitle>{service.instances} instances</CardSubTitle>;
|
|
|
|
|
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-05-18 21:21:33 +03:00
|
|
|
const header = isChild
|
|
|
|
? null
|
2017-06-01 12:28:59 +03:00
|
|
|
: <StyledCardHeader>
|
2017-05-18 21:21:33 +03:00
|
|
|
<CardMeta>
|
|
|
|
{title}
|
|
|
|
<CardDescription>
|
|
|
|
{/* <CardInfo
|
|
|
|
icon={<InstancesMultipleIcon />}
|
|
|
|
iconPosition="top"
|
|
|
|
label={`${service.instances} ${service.instances > 1 ? 'instances' : 'instance'}`}
|
|
|
|
/> */}
|
|
|
|
{/* <CardInfo
|
|
|
|
icon={<DataCentersIcon />}
|
|
|
|
label={service.datacenters[0].id}
|
|
|
|
/> */}
|
|
|
|
</CardDescription>
|
|
|
|
</CardMeta>
|
2017-06-01 12:28:59 +03:00
|
|
|
<CardOptions onClick={handleCardOptionsClick} />
|
|
|
|
</StyledCardHeader>;
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
const view = children
|
|
|
|
? <CardGroupView>
|
|
|
|
{children}
|
|
|
|
</CardGroupView>
|
|
|
|
: <CardView>
|
|
|
|
<CardMeta>
|
|
|
|
{isChild && title}
|
|
|
|
{isChild && subtitle}
|
|
|
|
<CardDescription>
|
|
|
|
{/* <CardInfo icon={<HealthyIcon />} label="Healthy" /> */}
|
|
|
|
</CardDescription>
|
|
|
|
</CardMeta>
|
|
|
|
{/* <ItemMetricGroup
|
|
|
|
datasets={service.metrics}
|
|
|
|
/> */}
|
|
|
|
</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;
|