diff --git a/frontend/src/components/services/topology-filter.js b/frontend/src/components/services/topology-filter.js
new file mode 100644
index 00000000..2104c4af
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ Add A Service
+
+
+ );
+};
+
+TopologyFilter.propTypes = {
+ projects: React.PropTypes.array,
+ services: React.PropTypes.array
+};
+
+export default TopologyFilter;
diff --git a/frontend/src/components/services/view.js b/frontend/src/components/services/view.js
index adbcbc43..fb937aac 100644
--- a/frontend/src/components/services/view.js
+++ b/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'
+ ? (
+
+
+
+ ) : null;
+
const toggle = services ? (
-
- View
-
- Topology
- List
-
-
+
+
+
+ View
+
+ Topology
+ List
+
+
+
+ { filter }
+
) : 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
};
diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js
index a145de22..7b52dfa5 100644
--- a/frontend/src/containers/services/index.js
+++ b/frontend/src/containers/services/index.js
@@ -55,6 +55,7 @@ const Services = (props) => {
return (
diff --git a/frontend/src/containers/services/topology.js b/frontend/src/containers/services/topology.js
index a4bd6fc9..5f6da987 100644
--- a/frontend/src/containers/services/topology.js
+++ b/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 {
diff --git a/ui/src/components/icons/search.js b/ui/src/components/icons/search.js
new file mode 100644
index 00000000..c31f8c67
--- /dev/null
+++ b/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
+);