copilot/frontend/src/components/service/item.js

const forceArray = require('force-array');
const React = require('react');
const ReactRouter = require('react-router-dom');

const Anchor = require('@ui/components/anchor');
const List = require('@ui/components/list');
const MetricsOutlet = require('@components/metrics-outlet');
const PropTypes = require('@root/prop-types');

const {
  Link
} = ReactRouter;

const {
  ListItem,
  ListItemView,
  ListItemMeta,
  ListItemTitle,
  ListItemSubTitle,
  ListItemDescription,
  ListItemGroupView,
  ListItemOptions,
  ListItemHeader
} = List;

const ServiceItem = ({
  org = '',
  project = '',
  service = {}
}) => {
  const isChild = !!service.parent;

  const childs = forceArray(service.services).map((service) => (
    <ServiceItem
      key={service.uuid}
      org={org}
      project={project}
      service={service}
    />
  ));

  const to = `/${org}/projects/${project}/services/${service.id}`;

  const title = isChild ? (
    <ListItemTitle>{service.name}</ListItemTitle>
  ) : (
    <ListItemTitle>
      <Link to={to}>
        {Anchor.fn(
          <Anchor secondary>
            {service.name}
          </Anchor>
        )}
      </Link>
    </ListItemTitle>
  );

  const subtitle = (
    <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
  );

  const description = (
    <ListItemDescription>Flags</ListItemDescription>
  );

  const header = isChild ? null : (
    <ListItemHeader>
      <ListItemMeta>
        {title}
        {subtitle}
        {description}
      </ListItemMeta>
      <ListItemOptions>…</ListItemOptions>
    </ListItemHeader>
  );

  const view = childs.length ? (
    <ListItemGroupView>
      {childs}
    </ListItemGroupView>
  ) : (
    <ListItemView>
      <ListItemMeta>
        {isChild && title}
        {isChild && subtitle}
        {description}
      </ListItemMeta>
      <MetricsOutlet datasets={service.metrics} />
    </ListItemView>
  );

  return (
    <ListItem
      collapsed={service.collapsed}
      flat={isChild}
      headed={!isChild}
      key={service.uuid}
      stacked={isChild && (service.instances > 1)}
    >
      {header}
      {view}
    </ListItem>
  );
};

ServiceItem.propTypes = {
  org: React.PropTypes.string,
  project: React.PropTypes.string,
  service: PropTypes.service
};

module.exports = ServiceItem;