1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

Add topology bg colour and LayoutContainer

This commit is contained in:
JUDIT GRESKOVITS 2017-03-22 16:50:26 +00:00 committed by Sérgio Ramos
parent fdb0478889
commit 9fa15aa700
34 changed files with 161 additions and 87 deletions

View File

@ -1,13 +1,4 @@
import styled from 'styled-components';
import { breakpoints, colors } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
// Main content Wrapper Styles
export default styled.article`
padding: 2rem;
// border-top: ${remcalc(1)} solid ${colors.base.grey};
${breakpoints.large`
padding: 0;
`}
`;
export default styled.article``;

View File

@ -0,0 +1,13 @@
import styled from 'styled-components';
import Container from '@ui/components/container';
import { breakpoints } from '@ui/shared/constants';
const LayoutContainer = styled(Container)`
padding: 2rem;
${breakpoints.large`
padding: 0;
`}
`;
export default LayoutContainer;

View File

@ -0,0 +1 @@
export { default as LayoutContainer } from './container';

View File

@ -64,6 +64,8 @@ const MetricCharts = ({
yMax={type.max}
yMeasurement={type.measurement}
yMin={type.min}
width={940}
height={262}
/>
</MetricView>
);

View File

@ -9,6 +9,7 @@ import { remcalc } from '@ui/shared/functions';
import PropTypes from '@root/prop-types';
import Ul from '@ui/components/horizontal-list/ul';
import Breadcrumb from '@components/breadcrumb';
import { LayoutContainer } from '@components/layout';
const StyledHorizontalList = styled(Ul)`
padding: 0;
@ -46,10 +47,12 @@ const Section = (props) => {
return (
<div>
<Breadcrumb {...props} />
<StyledHorizontalList name='project-nav'>
{navLinks}
</StyledHorizontalList>
<LayoutContainer>
<Breadcrumb {...props} />
<StyledHorizontalList name='project-nav'>
{navLinks}
</StyledHorizontalList>
</LayoutContainer>
{children}
</div>
);

View File

@ -3,6 +3,7 @@ import EmptyServices from '@components/empty/services';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import { LayoutContainer } from '@components/layout';
import { H2 } from '@ui/components/base-elements';
import {
FormGroup,
@ -41,24 +42,27 @@ const ServicesView = ({
}
};
const filter = toggleValue === 'topology'
? (
<Column xs={7}>
<TopologyFilter services={services} project={project} />
</Column>
) : null;
const filter = (
<Column xs={7}>
<TopologyFilter services={services} project={project} />
</Column>
);
const toggle = services ? (
<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>
) : null;
const controls = services ? (
<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>
{ toggle }
{ filter }
</PaddedRow>
) : null;
@ -68,13 +72,17 @@ const ServicesView = ({
);
return (
<Row>
<Column xs={12}>
<H2>Services</H2>
{ toggle }
{ content }
</Column>
</Row>
<div>
<LayoutContainer>
<Row>
<Column xs={12}>
<H2>Services</H2>
{ controls }
</Column>
</Row>
</LayoutContainer>
{ content }
</div>
);
};

View File

@ -2,7 +2,6 @@ import React from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import Container from '@ui/components/container';
import Org from '@containers/org';
import PropTypes from '@root/prop-types';
import Redirect from '@components/redirect';
@ -18,12 +17,10 @@ const Home = ({
return (
<div>
<Container>
<Switch>
<Route component={Org} path='/:org/:section?' />
<Route component={notFound} />
</Switch>
</Container>
<Switch>
<Route component={Org} path='/:org/:section?' />
<Route component={notFound} />
</Switch>
</div>
);
};

View File

@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { LayoutContainer } from '@components/layout';
import { toggleMonitorView } from '@state/actions';
// import AddMetrics from '@root/components/metric-charts/add-metrics';
@ -24,12 +25,14 @@ const Metrics = ({
const onRemoveMetric = (ev) => null;
return (
<MetricCharts
datasets={datasets}
onDurationChange={metricDurationChange}
onRemoveMetric={onRemoveMetric}
onSettingsClick={onMonitorsClick}
/>
<LayoutContainer>
<MetricCharts
datasets={datasets}
onDurationChange={metricDurationChange}
onRemoveMetric={onRemoveMetric}
onSettingsClick={onMonitorsClick}
/>
</LayoutContainer>
);
/*return (

View File

@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { LayoutContainer } from '@components/layout';
import PeopleSection from '@components/people-list';
import Section from './section';
@ -21,7 +22,9 @@ import {
const People = (props) => (
<Section {...props}>
<PeopleSection {...props} />
<LayoutContainer>
<PeopleSection {...props} />
</LayoutContainer>
</Section>
);

View File

@ -1,13 +1,16 @@
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Section from './section';
import { LayoutContainer } from '@components/layout';
import Projects from '@containers/projects';
import Project from '@containers/project';
export default () => {
const list = (props) => (
<Section {...props}>
<Projects {...props} />
<LayoutContainer>
<Projects {...props} />
</LayoutContainer>
</Section>
);

View File

@ -1,10 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import Section from './section';
import { LayoutContainer } from '@components/layout';
const Settings = (props) => (
<Section {...props}>
<p>settings</p>
<LayoutContainer>
<p>settings</p>
</LayoutContainer>
</Section>
);

View File

@ -1,8 +1,11 @@
import React from 'react';
import Section from './section';
import { LayoutContainer } from '@components/layout';
export default (props) => (
<Section {...props}>
<p>Project Feed</p>
<LayoutContainer>
<p>Project Feed</p>
</LayoutContainer>
</Section>
);

View File

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { toggleInstanceCollapsed } from '@state/actions';
import { LayoutContainer } from '@components/layout';
import EmptyInstances from '@components/empty/instances';
import PropTypes from '@root/prop-types';
import Section from './section';
@ -19,11 +20,13 @@ const Instances = (props) => {
return (
<Section {...props}>
{empty}
<InstanceList
instances={instances}
toggleCollapsed={toggleCollapsed}
/>
<LayoutContainer>
{empty}
<InstanceList
instances={instances}
toggleCollapsed={toggleCollapsed}
/>
</LayoutContainer>
</Section>
);
};
@ -49,4 +52,3 @@ export default connect(
mapStateToProps,
mapDispatchToProps
)(Instances);

View File

@ -1,8 +1,11 @@
import React from 'react';
import Section from './section';
import { LayoutContainer } from '@components/layout';
export default (props) => (
<Section {...props}>
<p>manifest</p>
<LayoutContainer>
<p>manifest</p>
</LayoutContainer>
</Section>
);

View File

@ -1,5 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import { LayoutContainer } from '@components/layout';
import PeopleSection from '@components/people-list';
import Section from './section';
@ -21,7 +22,9 @@ import {
const People = (props) => (
<Section {...props}>
<PeopleSection {...props} />
<LayoutContainer>
<PeopleSection {...props} />
</LayoutContainer>
</Section>
);

View File

@ -1,8 +1,11 @@
import React from 'react';
import Section from './section';
import { LayoutContainer } from '@components/layout';
export default (props) => (
<Section {...props}>
<p>Rollback</p>
<LayoutContainer>
<p>Rollback</p>
</LayoutContainer>
</Section>
);

View File

@ -1,8 +1,11 @@
import React from 'react';
import Section from './section';
import { LayoutContainer } from '@components/layout';
export default (props) => (
<Section {...props}>
<p>settings</p>
<LayoutContainer>
<p>settings</p>
</LayoutContainer>
</Section>
);

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>activity-feed</p>
<LayoutContainer>
<p>activity-feed</p>
</LayoutContainer>
);

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>firewall</p>
<LayoutContainer>
<p>firewall</p>
</LayoutContainer>
);

View File

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { toggleInstanceCollapsed } from '@state/actions';
import { LayoutContainer } from '@components/layout';
import EmptyInstances from '@components/empty/instances';
import PropTypes from '@root/prop-types';
import InstanceList from '@components/instance-list';
@ -15,13 +16,13 @@ const Instances = ({
);
return (
<div>
<LayoutContainer>
{empty}
<InstanceList
instances={instances}
toggleCollapsed={toggleCollapsed}
/>
</div>
</LayoutContainer>
);
};

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>networks</p>
<LayoutContainer>
<p>networks</p>
</LayoutContainer>
);

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>service-manifest</p>
<LayoutContainer>
<p>service-manifest</p>
</LayoutContainer>
);

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>summary</p>
<LayoutContainer>
<p>summary</p>
</LayoutContainer>
);

View File

@ -1,5 +1,8 @@
import React from 'react';
import { LayoutContainer } from '@components/layout';
export default () => (
<p>tags-metadata</p>
<LayoutContainer>
<p>tags-metadata</p>
</LayoutContainer>
);

View File

@ -2,6 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import PropTypes from '@root/prop-types';
import { LayoutContainer } from '@components/layout';
import ServiceItem from '@components/service/item';
import UnmanagedInstances from '@components/services/unmanaged-instances';
import { toggleTooltip } from '@state/actions';
@ -79,7 +80,7 @@ class Services extends React.Component {
));
return (
<div>
<LayoutContainer>
{ instances && <UnmanagedInstances instances={instances} /> }
<StyledContainer>
<div ref={this.ref('container')}>
@ -87,7 +88,7 @@ class Services extends React.Component {
<ServicesTooltip {...uiTooltip} />
</div>
</StyledContainer>
</div>
</LayoutContainer>
);
}
}

View File

@ -2,10 +2,11 @@ import React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';
import PropTypes from '@root/prop-types';
import { colors } from '@ui/shared/constants';
import { TopologyGraph } from '@ui/components/topology';
import { LayoutContainer } from '@components/layout';
import ServicesTooltip from '@components/services/tooltip';
import { toggleTooltip } from '@state/actions';
import {
@ -15,7 +16,11 @@ import {
serviceUiTooltipSelector
} from '@state/selectors';
const StyledContainer = styled.div`
const StyledBackground = styled.div`
background-color: ${colors.base.whiteActive};
`;
const StyledContainer = styled(LayoutContainer)`
position: relative;
`;
@ -31,13 +36,15 @@ const Services = (props) => {
};
return (
<StyledContainer>
<TopologyGraph
onQuickActions={onQuickActions}
services={services}
/>
<ServicesTooltip {...uiTooltip} />
</StyledContainer>
<StyledBackground>
<StyledContainer>
<TopologyGraph
onQuickActions={onQuickActions}
services={services}
/>
<ServicesTooltip {...uiTooltip} />
</StyledContainer>
</StyledBackground>
);
};

View File

@ -309,7 +309,7 @@
"sections": [
"summary",
"instances",
"metric-s",
"metrics",
"networks",
"tags-metadata",
"activity-feed",

View File

@ -332,7 +332,7 @@
"sections": [
"summary",
"instances",
"metric-s",
"metrics",
"networks",
"tags-metadata",
"activity-feed",

View File

@ -2,6 +2,7 @@ import { storiesOf } from '@kadira/storybook';
import React from 'react';
import styled from 'styled-components';
import { colors } from '../../shared/constants';
import { remcalc } from '../../shared/functions';
import Column from '../column';
import Row from '../row';

View File

@ -1,7 +1,7 @@
import styled from 'styled-components';
import { Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers';
import { is, isNot } from '../../shared/functions';
import { is } from '../../shared/functions';
import Column from '../column';
import Row from '../row';
import View from './view';

View File

@ -9,7 +9,6 @@ const Container = styled.div`
box-sizing: border-box;
margin: ${remcalc(24)} 0;
width: 100%;
max-width: ${remcalc(940)};
box-shadow: ${boxes.bottomShaddow};
border: ${remcalc(1)} solid ${colors.base.grey};
background-color: ${colors.base.white};

View File

@ -1,4 +1,5 @@
import { clearfix, Baseline } from '../../shared/composers';
import { remcalc } from '../../shared/functions';
import styled from 'styled-components';
import React from 'react';

View File

@ -1,5 +1,6 @@
import { colors } from '../../shared/constants';
import { Baseline } from '../../shared/composers';
import { remcalc } from '../../shared/functions';
import styled from 'styled-components';
import React from 'react';

View File

@ -36,7 +36,8 @@ const StyledLabel = styled.label`
font-size: ${remcalc(20)};
margin: 0 0.5rem 0 0;
vertical-align: bottom;
box-shadow: inset ${remcalc(2)} ${remcalc(-6)} ${remcalc(10)} 0 rgba(0,0,0,0.06);
box-shadow: inset ${remcalc(2)} ${remcalc(-6)}
${remcalc(10)} 0 rgba(0,0,0,0.06);
`;
const StyledPanel = styled.div`