mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
parent
263d1518af
commit
9a1a84510f
58
frontend/src/components/services/topology-filter.js
Normal file
58
frontend/src/components/services/topology-filter.js
Normal 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;
|
@ -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}>
|
||||
<StyledLegend>View</StyledLegend>
|
||||
<ToggleList>
|
||||
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
|
||||
<Toggle value='list' onChange={onToggleChange}>List</Toggle>
|
||||
</ToggleList>
|
||||
</FormGroup>
|
||||
<PaddedRow>
|
||||
<Column xs={5}>
|
||||
<FormGroup name='service-view' value={toggleValue}>
|
||||
<StyledLegend>View</StyledLegend>
|
||||
<ToggleList>
|
||||
<Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
|
||||
<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
|
||||
};
|
||||
|
@ -55,6 +55,7 @@ const Services = (props) => {
|
||||
return (
|
||||
<ServicesView
|
||||
onToggle={onToggle}
|
||||
project={project}
|
||||
toggleValue={toggleValue}
|
||||
services={services}
|
||||
>
|
||||
|
@ -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 {
|
||||
|
9
ui/src/components/icons/search.js
Normal file
9
ui/src/components/icons/search.js
Normal 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
|
||||
);
|
Loading…
Reference in New Issue
Block a user