Add topology bg colour and LayoutContainer

frontend/src/components/article/index.js

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

frontend/src/components/layout/container.js

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

frontend/src/components/layout/index.js

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

frontend/src/components/metric-charts/index.js

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

frontend/src/components/section/index.js

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

frontend/src/components/services/view.js

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

frontend/src/containers/home/index.js

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

frontend/src/containers/metrics/index.js

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

frontend/src/containers/org/people.js

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

frontend/src/containers/org/projects.js

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

frontend/src/containers/org/settings.js

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

frontend/src/containers/project/feed.js

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

frontend/src/containers/project/instances.js

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

frontend/src/containers/project/manifest.js

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

frontend/src/containers/project/people.js

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

frontend/src/containers/project/rollback.js

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

frontend/src/containers/project/settings.js

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

frontend/src/containers/service/activity-feed.js

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

frontend/src/containers/service/firewall.js

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

frontend/src/containers/service/instances.js

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

frontend/src/containers/service/networks.js

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

frontend/src/containers/service/service-manifest.js

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

frontend/src/containers/service/summary.js

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

frontend/src/containers/service/tags-metadata.js

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

frontend/src/containers/services/list.js

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

frontend/src/containers/services/topology.js

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

frontend/src/mock-state-testing.json

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

frontend/src/mock-state.json

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

ui/src/components/colors/story.js

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

ui/src/components/list/meta.js

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

ui/src/components/metric/full/view.js

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

ui/src/components/table-simple-table/table-body.js

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

ui/src/components/table-simple-table/table.js

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

ui/src/components/tabs/tab/index.js

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