Adding unmanaged instances and "paper" composer

fixes #284
fixes #273
This commit is contained in:
Alex Windett 2017-03-07 12:03:55 +00:00 committed by Sérgio Ramos
parent 7a393278eb
commit 2bede6e669
11 changed files with 105 additions and 27 deletions

View File

@ -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
}) => (
<StyledButton tertiary>
<strong>+ {instances} legacy instances.</strong>
These instances do not belong to any particular service.
</StyledButton>
);
UnmanagedInstances.propTypes = {
instances: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.array
])
};
export default UnmanagedInstances;

View File

@ -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 (
<StyledButton tertiary>
You have 5 instances
</StyledButton>
);
};
const toggleValue = path === '/:org/projects/:projectId/services' ?
'topology' : 'list';
@ -35,6 +56,7 @@ const Services = (props) => {
toggleValue={toggleValue}
services={services}
>
{ instances() }
{children}
</ServicesView>
);

View File

@ -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) => (
<ServiceItem
key={service.uuid}
@ -27,7 +29,8 @@ const Services = (props) => {
return (
<div>
{serviceList}
{ serviceList }
{ instances && <UnmanagedInstances instances={instances} /> }
</div>
);
};

View File

@ -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",

View File

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

View File

@ -11,6 +11,10 @@ storiesOf('Button', module)
<Button secondary>
Inspire the brave
</Button>
)).add('Tertiary', () => (
<Button tertiary>
Inspire the tertiary
</Button>
)).add('Disabled', () => (
<Button disabled>
Inspire the liars

View File

@ -56,6 +56,7 @@ const Column = styled.div`
// If no column size is passed, make it full width
width: 100%;
position: relative;
${flexed`
flex: 0 0 auto;

View File

@ -1,18 +1,11 @@
import styled from 'styled-components';
import { Broadcast, Subscriber } from 'react-broadcast';
import { Baseline } from '../../shared/composers';
import { Baseline, paperEffect } from '../../shared/composers';
import { boxes, colors } from '../../shared/constants';
import { remcalc, is, isAnd } from '../../shared/functions';
import Row from '../row';
import React from 'react';
const paper = `
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.background},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.grey},
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.background},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.grey};
`;
const StyledItem = styled(Row)`
position: relative;
height: auto;
@ -37,8 +30,7 @@ const StyledItem = styled(Row)`
`};
${is('stacked')`
margin-bottom: ${remcalc(16)};
box-shadow: ${paper};
${paperEffect}
`};
`;

View File

@ -38,7 +38,7 @@ const GraphNodeInfo = ({
y={12}
connected={connected}
>
{`${datacentres} inst.`}
{`${instances} inst.`}
</GraphText>
<g transform={'translate(82, 0)'}>
<StyledDataCentresIcon connected={connected} />
@ -48,7 +48,7 @@ const GraphNodeInfo = ({
y={12}
connected={connected}
>
{`${instances} DCs`}
{`${datacentres} DCs`}
</GraphText>
</g>
);

View File

@ -7,7 +7,7 @@ import GraphLink from './graph-link';
import React from 'react';
const StyledSvg = styled.svg`
width: 1024px;
width: 100%;
height: 860px;
`;

View File

@ -1,7 +1,7 @@
import styled, { css } from 'styled-components';
import camelCase from 'camel-case';
import { boxes } from '../constants';
import { unitcalc } from '../functions';
import { boxes, colors } from '../constants';
import { unitcalc, remcalc } from '../functions';
import {
libreFranklin,
@ -105,6 +105,15 @@ export const clearfix = css`
}
`;
export const paperEffect = css`
box-shadow:
0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.background},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.grey},
0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.background},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.grey};
margin-bottom: ${remcalc(16)};
`;
export const typography = {
libreFranklin,
bold,