mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
Add topology bg colour and LayoutContainer
This commit is contained in:
parent
fdb0478889
commit
9fa15aa700
@ -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``;
|
||||
|
13
frontend/src/components/layout/container.js
Normal file
13
frontend/src/components/layout/container.js
Normal 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;
|
1
frontend/src/components/layout/index.js
Normal file
1
frontend/src/components/layout/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as LayoutContainer } from './container';
|
@ -64,6 +64,8 @@ const MetricCharts = ({
|
||||
yMax={type.max}
|
||||
yMeasurement={type.measurement}
|
||||
yMin={type.min}
|
||||
width={940}
|
||||
height={262}
|
||||
/>
|
||||
</MetricView>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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 (
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
|
||||
export default () => (
|
||||
<p>firewall</p>
|
||||
<LayoutContainer>
|
||||
<p>firewall</p>
|
||||
</LayoutContainer>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
|
||||
export default () => (
|
||||
<p>networks</p>
|
||||
<LayoutContainer>
|
||||
<p>networks</p>
|
||||
</LayoutContainer>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
import { LayoutContainer } from '@components/layout';
|
||||
|
||||
export default () => (
|
||||
<p>summary</p>
|
||||
<LayoutContainer>
|
||||
<p>summary</p>
|
||||
</LayoutContainer>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -309,7 +309,7 @@
|
||||
"sections": [
|
||||
"summary",
|
||||
"instances",
|
||||
"metric-s",
|
||||
"metrics",
|
||||
"networks",
|
||||
"tags-metadata",
|
||||
"activity-feed",
|
||||
|
@ -332,7 +332,7 @@
|
||||
"sections": [
|
||||
"summary",
|
||||
"instances",
|
||||
"metric-s",
|
||||
"metrics",
|
||||
"networks",
|
||||
"tags-metadata",
|
||||
"activity-feed",
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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';
|
||||
|
@ -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};
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { clearfix, Baseline } from '../../shared/composers';
|
||||
import { remcalc } from '../../shared/functions';
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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`
|
||||
|
Loading…
Reference in New Issue
Block a user