import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
// Import forceArray from 'force-array';
// 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';
const StyledCardHeader = styled(CardHeader)`
position: relative;
`;
const TitleInnerContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const ServiceListItem = ({
onQuickActionsClick = () => {},
deploymentGroup = '',
service = {}
}) => {
const isChild = Boolean(service.parent);
const children = service.children
? service.children.map(service =>
)
: null;
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
const title = service.parent
?
{service.name}
:
{service.name}
;
const subtitle = {service.instances} instances;
const handleCardOptionsClick = evt => {
onQuickActionsClick({ service });
};
const header = isChild
? null
:
{title}
{/* }
iconPosition="top"
label={`${service.instances} ${service.instances > 1 ? 'instances' : 'instance'}`}
/> */}
{/* }
label={service.datacenters[0].id}
/> */}
;
const view = children
?
{children}
:
{isChild && title}
{isChild && subtitle}
{/* } label="Healthy" /> */}
{/* */}
;
return (
1}
>
{header}
{view}
);
};
ServiceListItem.propTypes = {
onQuickActionsClick: PropTypes.func,
deploymentGroup: PropTypes.string,
service: PropTypes.object.isRequired // Define better
};
export default ServiceListItem;