From 2bede6e66922a369cc8b750bdbd97bd26c6e245c Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Tue, 7 Mar 2017 12:03:55 +0000 Subject: [PATCH] Adding unmanaged instances and "paper" composer fixes #284 fixes #273 --- .../services/unmanaged-instances.js | 29 ++++++++++++++ frontend/src/containers/services/index.js | 22 +++++++++++ frontend/src/containers/services/list.js | 5 ++- frontend/src/mock-state.json | 2 +- ui/src/components/button/index.js | 38 ++++++++++++++----- ui/src/components/button/story.js | 4 ++ ui/src/components/column/index.js | 1 + ui/src/components/list/item.js | 12 +----- ui/src/components/topology/graph-node/info.js | 4 +- ui/src/components/topology/topology-graph.js | 2 +- ui/src/shared/composers/index.js | 13 ++++++- 11 files changed, 105 insertions(+), 27 deletions(-) create mode 100644 frontend/src/components/services/unmanaged-instances.js diff --git a/frontend/src/components/services/unmanaged-instances.js b/frontend/src/components/services/unmanaged-instances.js new file mode 100644 index 00000000..3bee18d4 --- /dev/null +++ b/frontend/src/components/services/unmanaged-instances.js @@ -0,0 +1,29 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { remcalc } from '@ui/shared/functions'; + +import Button from '@ui/components/button'; + +const StyledButton = styled(Button)` + width: 100%; + margin-top: ${remcalc(36)}; +`; + +const UnmanagedInstances = ({ + instances +}) => ( + + + {instances} legacy instances. + These instances do not belong to any particular service. + +); + +UnmanagedInstances.propTypes = { + instances: React.PropTypes.oneOfType([ + React.PropTypes.number, + React.PropTypes.array + ]) +}; + +export default UnmanagedInstances; diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 3284f04f..4fb01b14 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -1,7 +1,9 @@ import React from 'react'; +import Styled from 'styled-components'; import { connect } from 'react-redux'; import PropTypes from '@root/prop-types'; import ServicesView from '@components/services/view'; +import Button from '@ui/components/button'; import { orgByIdSelector, @@ -19,6 +21,25 @@ const Services = (props) => { push } = props; + + // TODO: Move into "components" and fix absolute + // positioning on responsive screens + const instances = (instances = 1) => { + + const StyledButton = Styled(Button)` + position: absolute; + top: 340px; + right: 193px; + `; + + if ( instances.length <= 0 ) return; + return ( + + You have 5 instances + + ); + }; + const toggleValue = path === '/:org/projects/:projectId/services' ? 'topology' : 'list'; @@ -35,6 +56,7 @@ const Services = (props) => { toggleValue={toggleValue} services={services} > + { instances() } {children} ); diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js index 7026abdf..84beab99 100644 --- a/frontend/src/containers/services/list.js +++ b/frontend/src/containers/services/list.js @@ -2,6 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from '@root/prop-types'; import ServiceItem from '@components/service/item'; +import UnmanagedInstances from '@components/services/unmanaged-instances'; import { orgByIdSelector, @@ -16,6 +17,7 @@ const Services = (props) => { services = [] } = props; + const instances = 5; const serviceList = services.map((service) => ( { return (
- {serviceList} + { serviceList } + { instances && }
); }; diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index dc1ed974..77766bfc 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -935,7 +935,7 @@ }] }, { "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76", - "name": "percona-secundary", + "name": "percona-secondary", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "service": "4ee4103e-1a52-4099-a48e-01588f597c70", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index c349c004..4ebc1cda 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -1,4 +1,8 @@ -import { Baseline, typography } from '../../shared/composers'; +import { + Baseline, + typography, + paperEffect +} from '../../shared/composers'; import { colors, boxes } from '../../shared/constants'; import { remcalc } from '../../shared/functions'; import isString from 'lodash.isstring'; @@ -14,41 +18,55 @@ const { const background = match({ secondary: base.white, - disabled: inactive.default + disabled: inactive.default, + tertiary: 'transparent' }, base.primary); const backgroundHover = match({ secondary: base.whiteHover, - disabled: inactive.default + disabled: inactive.default, + tertiary: 'transparent' }, base.primaryHover); const backgroundActive = match({ secondary: base.whiteActive, - disabled: inactive.default + disabled: inactive.default, + tertiary: 'transparent' }, base.primaryHover); const border = match({ secondary: base.grey, - disabled: inactive.grey + disabled: inactive.grey, + tertiary: inactive.text }, base.primaryDesaturated); const borderHover = match({ secondary: base.grey, - disabled: inactive.default + disabled: inactive.default, + tertiary: inactive.text }, base.primaryDark); const borderActive = match({ secondary: base.grey, - disabled: inactive.default + disabled: inactive.default, + tertiary: inactive.text }, base.primaryDesaturatedHover); const color = match({ secondary: base.secondary, - disabled: inactive.text + disabled: inactive.text, + tertiary: inactive.grey }, base.white); +const boxShadow = match({ + secondary: 'box-shadow: ${boxes.bottomShaddow};', + disabled: 'box-shadow: ${boxes.bottomShaddow};', + tertiary: paperEffect +}, ''); + const borderRadius = match({ - rect: 0 + rect: 0, + tertiary: 0 }, boxes.borderRadius); // based on bootstrap 4 @@ -84,7 +102,7 @@ const style = css` border-radius: ${borderRadius}; border: solid ${remcalc(1)} ${border}; - box-shadow: ${boxes.bottomShaddow}; + ${boxShadow}; &:focus { outline: 0; diff --git a/ui/src/components/button/story.js b/ui/src/components/button/story.js index 9cafe399..7702c49c 100644 --- a/ui/src/components/button/story.js +++ b/ui/src/components/button/story.js @@ -11,6 +11,10 @@ storiesOf('Button', module) + )).add('Tertiary', () => ( + )).add('Disabled', () => (