From 9fa15aa70049cd2f58f84c38d5e2e6d702a955dd Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Wed, 22 Mar 2017 16:50:26 +0000 Subject: [PATCH] Add topology bg colour and LayoutContainer --- frontend/src/components/article/index.js | 11 +--- frontend/src/components/layout/container.js | 13 +++++ frontend/src/components/layout/index.js | 1 + .../src/components/metric-charts/index.js | 2 + frontend/src/components/section/index.js | 11 ++-- frontend/src/components/services/view.js | 52 +++++++++++-------- frontend/src/containers/home/index.js | 11 ++-- frontend/src/containers/metrics/index.js | 15 +++--- frontend/src/containers/org/people.js | 5 +- frontend/src/containers/org/projects.js | 5 +- frontend/src/containers/org/settings.js | 5 +- frontend/src/containers/project/feed.js | 5 +- frontend/src/containers/project/instances.js | 14 ++--- frontend/src/containers/project/manifest.js | 5 +- frontend/src/containers/project/people.js | 5 +- frontend/src/containers/project/rollback.js | 5 +- frontend/src/containers/project/settings.js | 5 +- .../src/containers/service/activity-feed.js | 5 +- frontend/src/containers/service/firewall.js | 5 +- frontend/src/containers/service/instances.js | 5 +- frontend/src/containers/service/networks.js | 5 +- .../containers/service/service-manifest.js | 5 +- frontend/src/containers/service/summary.js | 5 +- .../src/containers/service/tags-metadata.js | 5 +- frontend/src/containers/services/list.js | 5 +- frontend/src/containers/services/topology.js | 25 +++++---- frontend/src/mock-state-testing.json | 2 +- frontend/src/mock-state.json | 2 +- ui/src/components/colors/story.js | 1 + ui/src/components/list/meta.js | 2 +- ui/src/components/metric/full/view.js | 1 - .../table-simple-table/table-body.js | 1 + ui/src/components/table-simple-table/table.js | 1 + ui/src/components/tabs/tab/index.js | 3 +- 34 files changed, 161 insertions(+), 87 deletions(-) create mode 100644 frontend/src/components/layout/container.js create mode 100644 frontend/src/components/layout/index.js diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js index 6828abe5..b9f663c1 100644 --- a/frontend/src/components/article/index.js +++ b/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``; diff --git a/frontend/src/components/layout/container.js b/frontend/src/components/layout/container.js new file mode 100644 index 00000000..69e5e9ab --- /dev/null +++ b/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; diff --git a/frontend/src/components/layout/index.js b/frontend/src/components/layout/index.js new file mode 100644 index 00000000..d0d40032 --- /dev/null +++ b/frontend/src/components/layout/index.js @@ -0,0 +1 @@ +export { default as LayoutContainer } from './container'; diff --git a/frontend/src/components/metric-charts/index.js b/frontend/src/components/metric-charts/index.js index 05477f25..9808002b 100644 --- a/frontend/src/components/metric-charts/index.js +++ b/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} /> ); diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index c5035cef..6d81d0ba 100644 --- a/frontend/src/components/section/index.js +++ b/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 (
- - - {navLinks} - + + + + {navLinks} + + {children}
); diff --git a/frontend/src/components/services/view.js b/frontend/src/components/services/view.js index fb937aac..aff0921d 100644 --- a/frontend/src/components/services/view.js +++ b/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' - ? ( - - - - ) : null; + const filter = ( + + + + ); const toggle = services ? ( + + + View + + Topology + List + + + + ) : null; + + const controls = services ? ( - - - View - - Topology - List - - - + { toggle } { filter } ) : null; @@ -68,13 +72,17 @@ const ServicesView = ({ ); return ( - - -

Services

- { toggle } - { content } -
-
+
+ + + +

Services

+ { controls } +
+
+
+ { content } +
); }; diff --git a/frontend/src/containers/home/index.js b/frontend/src/containers/home/index.js index 2b78902a..35dd6cb5 100644 --- a/frontend/src/containers/home/index.js +++ b/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 (
- - - - - - + + + +
); }; diff --git a/frontend/src/containers/metrics/index.js b/frontend/src/containers/metrics/index.js index 268dad9d..9a5e27b6 100644 --- a/frontend/src/containers/metrics/index.js +++ b/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 ( - + + + ); /*return ( diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index efb0026b..943c9c42 100644 --- a/frontend/src/containers/org/people.js +++ b/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) => (
- + + +
); diff --git a/frontend/src/containers/org/projects.js b/frontend/src/containers/org/projects.js index 9b124576..5f39df50 100644 --- a/frontend/src/containers/org/projects.js +++ b/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) => (
- + + +
); diff --git a/frontend/src/containers/org/settings.js b/frontend/src/containers/org/settings.js index 94fc368d..a69539e7 100644 --- a/frontend/src/containers/org/settings.js +++ b/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) => (
-

settings

+ +

settings

+
); diff --git a/frontend/src/containers/project/feed.js b/frontend/src/containers/project/feed.js index 7815a5d5..81588e5f 100644 --- a/frontend/src/containers/project/feed.js +++ b/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) => (
-

Project Feed

+ +

Project Feed

+
); diff --git a/frontend/src/containers/project/instances.js b/frontend/src/containers/project/instances.js index 8eb5f3de..29bc933f 100644 --- a/frontend/src/containers/project/instances.js +++ b/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 (
- {empty} - + + {empty} + +
); }; @@ -49,4 +52,3 @@ export default connect( mapStateToProps, mapDispatchToProps )(Instances); - diff --git a/frontend/src/containers/project/manifest.js b/frontend/src/containers/project/manifest.js index 633697b2..88eeaed5 100644 --- a/frontend/src/containers/project/manifest.js +++ b/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) => (
-

manifest

+ +

manifest

+
); diff --git a/frontend/src/containers/project/people.js b/frontend/src/containers/project/people.js index 498e4ab3..2addc87a 100644 --- a/frontend/src/containers/project/people.js +++ b/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) => (
- + + +
); diff --git a/frontend/src/containers/project/rollback.js b/frontend/src/containers/project/rollback.js index 81727099..cfa66bb3 100644 --- a/frontend/src/containers/project/rollback.js +++ b/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) => (
-

Rollback

+ +

Rollback

+
); diff --git a/frontend/src/containers/project/settings.js b/frontend/src/containers/project/settings.js index 6083a4a9..c7f879e0 100644 --- a/frontend/src/containers/project/settings.js +++ b/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) => (
-

settings

+ +

settings

+
); diff --git a/frontend/src/containers/service/activity-feed.js b/frontend/src/containers/service/activity-feed.js index ebc2d933..f05b36aa 100644 --- a/frontend/src/containers/service/activity-feed.js +++ b/frontend/src/containers/service/activity-feed.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

activity-feed

+ +

activity-feed

+
); diff --git a/frontend/src/containers/service/firewall.js b/frontend/src/containers/service/firewall.js index 0c16dcf4..69ecd8d9 100644 --- a/frontend/src/containers/service/firewall.js +++ b/frontend/src/containers/service/firewall.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

firewall

+ +

firewall

+
); diff --git a/frontend/src/containers/service/instances.js b/frontend/src/containers/service/instances.js index db2ddb70..7927e58d 100644 --- a/frontend/src/containers/service/instances.js +++ b/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 ( -
+ {empty} -
+ ); }; diff --git a/frontend/src/containers/service/networks.js b/frontend/src/containers/service/networks.js index cee7965f..c196b350 100644 --- a/frontend/src/containers/service/networks.js +++ b/frontend/src/containers/service/networks.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

networks

+ +

networks

+
); diff --git a/frontend/src/containers/service/service-manifest.js b/frontend/src/containers/service/service-manifest.js index 41c785f2..e2ece8c6 100644 --- a/frontend/src/containers/service/service-manifest.js +++ b/frontend/src/containers/service/service-manifest.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

service-manifest

+ +

service-manifest

+
); diff --git a/frontend/src/containers/service/summary.js b/frontend/src/containers/service/summary.js index 24290a72..f2cab771 100644 --- a/frontend/src/containers/service/summary.js +++ b/frontend/src/containers/service/summary.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

summary

+ +

summary

+
); diff --git a/frontend/src/containers/service/tags-metadata.js b/frontend/src/containers/service/tags-metadata.js index 45c09fe6..b4f2c8e1 100644 --- a/frontend/src/containers/service/tags-metadata.js +++ b/frontend/src/containers/service/tags-metadata.js @@ -1,5 +1,8 @@ import React from 'react'; +import { LayoutContainer } from '@components/layout'; export default () => ( -

tags-metadata

+ +

tags-metadata

+
); diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js index 510bc1be..5841c0a9 100644 --- a/frontend/src/containers/services/list.js +++ b/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 ( -
+ { instances && }
@@ -87,7 +88,7 @@ class Services extends React.Component {
-
+ ); } } diff --git a/frontend/src/containers/services/topology.js b/frontend/src/containers/services/topology.js index 5f6da987..1a891c56 100644 --- a/frontend/src/containers/services/topology.js +++ b/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 ( - - - - + + + + + + ); }; diff --git a/frontend/src/mock-state-testing.json b/frontend/src/mock-state-testing.json index 71550a2a..4e6cfcc1 100644 --- a/frontend/src/mock-state-testing.json +++ b/frontend/src/mock-state-testing.json @@ -309,7 +309,7 @@ "sections": [ "summary", "instances", - "metric-s", + "metrics", "networks", "tags-metadata", "activity-feed", diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index 7d4ae27a..2551e698 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -332,7 +332,7 @@ "sections": [ "summary", "instances", - "metric-s", + "metrics", "networks", "tags-metadata", "activity-feed", diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index f9233884..6487627f 100644 --- a/ui/src/components/colors/story.js +++ b/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'; diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js index 109a5b4c..e7a71ae0 100644 --- a/ui/src/components/list/meta.js +++ b/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'; diff --git a/ui/src/components/metric/full/view.js b/ui/src/components/metric/full/view.js index 44116f00..33e5fac8 100644 --- a/ui/src/components/metric/full/view.js +++ b/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}; diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js index bc88537c..3fba5593 100644 --- a/ui/src/components/table-simple-table/table-body.js +++ b/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'; diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js index 7d5b90d2..27c46b61 100644 --- a/ui/src/components/table-simple-table/table.js +++ b/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'; diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js index 8dbe5893..e2fd994d 100644 --- a/ui/src/components/tabs/tab/index.js +++ b/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`