add checkbox to service item

fixes #283

frontend/src/components/service/item.js

@@ -1,9 +1,10 @@
-import React from 'react';
-import forceArray from 'force-array';
-
+import styled from 'styled-components';
 import { Link } from '@ui/components/anchor';
 import MetricsOutlet from '@components/metrics-outlet';
+import { Checkbox, FormGroup } from '@ui/components/form';
 import PropTypes from '@root/prop-types';
+import forceArray from 'force-array';
+import React from 'react';
 
 import {
   ListItem,
@@ -17,6 +18,17 @@ import {
   ListItemHeader
 } from '@ui/components/list';
 
+const StyledFormGroup = styled(FormGroup)`
+  width: auto;
+`;
+
+const TitleInnerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
 const ServiceItem = ({
   org = '',
   project = '',
@@ -36,12 +48,19 @@ const ServiceItem = ({
   const to = `/${org}/projects/${project}/services/${service.id}`;
 
   const title = isChild ? (
-    <ListItemTitle>{service.name}</ListItemTitle>
+    <ListItemTitle>
+      {service.name}
+    </ListItemTitle>
   ) : (
     <ListItemTitle>
-      <Link secondary to={to}>
-        {service.name}
-      </Link>
+      <TitleInnerContainer>
+        <StyledFormGroup>
+          <Checkbox />
+        </StyledFormGroup>
+        <Link secondary to={to}>
+          {service.name}
+        </Link>
+      </TitleInnerContainer>
     </ListItemTitle>
   );