adding in filter + add new inputs

fixes #374
fixes #373
This commit is contained in:
Alex Windett 2017-03-17 16:54:10 +00:00 committed by Judit Greskovits
parent 263d1518af
commit 9a1a84510f
5 changed files with 96 additions and 8 deletions

View File

@ -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;

View File

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

View File

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

View File

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

View File

@ -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
);