adding in filter + add new inputs

fixes #374
fixes #373

frontend/src/components/services/topology-filter.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  FormGroup,
+  Input
+} from '@ui/components/form';
+
+import Button from '@ui/components/button';
+import { remcalc } from '@ui/shared/functions';
+
+
+const StyledForm = styled(FormGroup)`
+  width: 60%;
+  float: left;
+  margin: 0;
+`;
+
+const StyledButton = styled(Button)`
+  margin-left: ${remcalc(48)};
+`;
+
+const StyledFilter = styled(Input)`
+  margin: 0;
+`;
+
+const handleAddService = () => console.log('Adding a service...');
+
+const TopologyFilter = ({
+  services = [],
+  projects = []
+}) => {
+
+  return (
+    <div>
+      <StyledForm name='topology-filter'>
+        <StyledFilter
+          placeholder='Filter'
+          services={services}
+        />
+      </StyledForm>
+
+      <StyledButton
+        secondary
+        onClick={handleAddService}
+      >
+        Add A Service
+      </StyledButton>
+    </div>
+  );
+};
+
+TopologyFilter.propTypes = {
+  projects: React.PropTypes.array,
+  services: React.PropTypes.array
+};
+
+export default TopologyFilter;

frontend/src/components/services/view.js

@@ -10,8 +10,9 @@ import {
   ToggleList,
   Legend
 } from '@ui/components/form';
+import TopologyFilter from '@components/services/topology-filter';
 import styled from 'styled-components';
-import { unitcalc } from '@ui/shared/functions';
+import { unitcalc, remcalc } from '@ui/shared/functions';
 
 const StyledLegend = styled(Legend)`
   float: left;
@@ -19,9 +20,14 @@ const StyledLegend = styled(Legend)`
   margin-right: ${unitcalc(1.5)};
 `;
 
+const PaddedRow = styled(Row)`
+  margin-bottom: ${remcalc(18)}
+`;
+
 const ServicesView = ({
   children,
   onToggle,
+  project,
   services,
   toggleValue
 }) => {
@@ -35,14 +41,26 @@ const ServicesView = ({
     }
   };
 
+  const filter = toggleValue === 'topology'
+    ? (
+      <Column xs={7}>
+        <TopologyFilter services={services} project={project} />
+      </Column>
+    ) : null;
+
   const toggle = services ? (
-    <FormGroup name='service-view' value={toggleValue}>
+    <PaddedRow>
-      <StyledLegend>View</StyledLegend>
+      <Column xs={5}>
-      <ToggleList>
+        <FormGroup name='service-view' value={toggleValue}>
-        <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
+          <StyledLegend>View</StyledLegend>
-        <Toggle value='list' onChange={onToggleChange}>List</Toggle>
+          <ToggleList>
-      </ToggleList>
+            <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
-    </FormGroup>
+            <Toggle value='list' onChange={onToggleChange}>List</Toggle>
+          </ToggleList>
+        </FormGroup>
+      </Column>
+      { filter }
+    </PaddedRow>
   ) : null;
 
   const content = services.length ? children : (
@@ -63,6 +81,7 @@ const ServicesView = ({
 ServicesView.propTypes = {
   children: React.PropTypes.node,
   onToggle: React.PropTypes.func.isRequired,
+  project: React.PropTypes.arrayOf(PropTypes.project),
   services: React.PropTypes.arrayOf(PropTypes.service),
   toggleValue: React.PropTypes.string.isRequired
 };

frontend/src/containers/services/index.js

@@ -55,6 +55,7 @@ const Services = (props) => {
   return (
     <ServicesView
       onToggle={onToggle}
+      project={project}
       toggleValue={toggleValue}
       services={services}
     >

frontend/src/containers/services/topology.js

@@ -5,6 +5,7 @@ import PropTypes from '@root/prop-types';
 import { TopologyGraph } from '@ui/components/topology';
 import ServicesTooltip from '@components/services/tooltip';
 
+
 import { toggleTooltip } from '@state/actions';
 
 import {

ui/src/components/icons/search.js

@@ -0,0 +1,9 @@
+import { Baseline } from '../../shared/composers';
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+
+import SearchIcon from './svg/close.svg';
+
+export default Baseline(
+  SearchIcon
+);