list services using ListItem

frontend/src/containers/services/index.js

@@ -1,10 +1,9 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
 
 const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
-const Row = require('@ui/components/row');
+const Service = require('./service');
 const selectors = require('@state/selectors');
 
 const {
@@ -17,10 +16,6 @@ const {
   servicesByProjectIdSelector
 } = selectors;
 
-const {
-  Link
-} = ReactRouter;
-
 const Services = ({
   org = {},
   project = {},
@@ -30,42 +25,19 @@ const Services = ({
     <EmptyServices />
   );
 
-  const serviceList = (services) => {
-    if (!services || !services.length) {
-      return null;
-    }
-
-    const list = services.map((service) => {
-      const to = `/${org.id}/projects/${project.id}/services/${service.id}`;
-      const childs = serviceList(service.services);
-
-      const name = childs ? service.name : (
-        <Link activeClassName='active' to={to}>
-          {service.name}
-        </Link>
-      );
-
-      return (
-        <li key={service.id}>
-          {name}
-          {childs}
-        </li>
-      );
-    });
-
-    return (
-      <ul>
-        {list}
-      </ul>
-    );
-  };
+  const serviceList = services.map((service) => (
+    <Service
+      key={service.uuid}
+      org={org.id}
+      project={project.id}
+      service={service}
+    />
+  ));
 
   return (
     <div>
       {empty}
-      <Row>
-        {serviceList(services)}
-      </Row>
+      {serviceList}
     </div>
   );
 };

frontend/src/containers/services/service.js

@@ -0,0 +1,84 @@
+const React = require('react');
+// const ReactRouter = require('react-router');
+
+const List = require('@ui/components/list');
+const PropTypes = require('@root/prop-types');
+
+// const {
+//   Link
+// } = ReactRouter;
+
+const {
+  ListItem,
+  ListItemView,
+  ListItemMeta,
+  ListItemTitle,
+  ListItemSubTitle,
+  ListItemDescription,
+  ListItemGroupView,
+  ListItemOutlet,
+  ListItemOptions,
+  ListItemHeader
+} = List;
+
+const Service = ({
+  org = '',
+  project = '',
+  service = {}
+}) => {
+  // const to = `/${org}/projects/${project}/services/${service.id}`;
+
+  const childs = service.services.map((service) => (
+    <ListItem
+      flat
+      key={service.uuid}
+      stacked={service.instances > 1}
+    >
+      <ListItemView>
+        <ListItemMeta>
+          <ListItemTitle>{service.name}</ListItemTitle>
+          <ListItemSubTitle>{service.instances} instances</ListItemSubTitle>
+        </ListItemMeta>
+        <ListItemOutlet>
+          Metrics
+        </ListItemOutlet>
+      </ListItemView>
+    </ListItem>
+  ));
+
+  const view = childs.length ? (
+    <ListItemGroupView>
+      {childs}
+    </ListItemGroupView>
+  ) : (
+    <ListItemView>
+      <ListItemMeta>
+        <ListItemDescription>Flags</ListItemDescription>
+      </ListItemMeta>
+      <ListItemOutlet>
+        Metrics
+      </ListItemOutlet>
+    </ListItemView>
+  );
+
+  return (
+    <ListItem headed>
+      <ListItemHeader>
+        <ListItemMeta>
+          <ListItemTitle>{service.name}</ListItemTitle>
+          <ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
+        </ListItemMeta>
+        <ListItemOptions>…</ListItemOptions>
+      </ListItemHeader>
+      {view}
+    </ListItem>
+  );
+};
+
+Service.propTypes = {
+  org: React.PropTypes.string,
+  project: React.PropTypes.string,
+  service: PropTypes.service
+};
+
+module.exports = Service;

frontend/src/mock-state.json

@@ -157,44 +157,52 @@
       "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
       "id": "nginx",
       "name": "Nginx",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }, {
       "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
       "id": "wordpress",
       "name": "Wordpress",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }, {
       "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
       "id": "nfs",
       "name": "NFS",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }, {
       "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
       "id": "memcached",
       "name": "Memcached",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }, {
       "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
       "id": "percona",
       "name": "Percona",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 5
     }, {
       "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
       "id": "primary",
       "name": "Primary",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }, {
       "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
       "id": "secondaries",
       "name": "Secondaries",
       "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 4
     }, {
       "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
       "id": "consul",
       "name": "Consul",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401"
+      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+      "instances": 1
     }]
   },
   "instances": {