1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 14:10:04 +02:00

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 React from 'react';
import Styled from 'styled-components';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
import ServicesView from '@components/services/view'; import ServicesView from '@components/services/view';
import Button from '@ui/components/button';
import { import {
orgByIdSelector, orgByIdSelector,
@ -19,6 +21,25 @@ const Services = (props) => {
push push
} = props; } = 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' ? const toggleValue = path === '/:org/projects/:projectId/services' ?
'topology' : 'list'; 'topology' : 'list';
@ -35,6 +56,7 @@ const Services = (props) => {
toggleValue={toggleValue} toggleValue={toggleValue}
services={services} services={services}
> >
{ instances() }
{children} {children}
</ServicesView> </ServicesView>
); );

View File

@ -2,6 +2,7 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from '@root/prop-types'; import PropTypes from '@root/prop-types';
import ServiceItem from '@components/service/item'; import ServiceItem from '@components/service/item';
import UnmanagedInstances from '@components/services/unmanaged-instances';
import { import {
orgByIdSelector, orgByIdSelector,
@ -16,6 +17,7 @@ const Services = (props) => {
services = [] services = []
} = props; } = props;
const instances = 5;
const serviceList = services.map((service) => ( const serviceList = services.map((service) => (
<ServiceItem <ServiceItem
key={service.uuid} key={service.uuid}
@ -28,6 +30,7 @@ const Services = (props) => {
return ( return (
<div> <div>
{ serviceList } { serviceList }
{ instances && <UnmanagedInstances instances={instances} /> }
</div> </div>
); );
}; };

View File

@ -935,7 +935,7 @@
}] }]
}, { }, {
"uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76", "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
"name": "percona-secundary", "name": "percona-secondary",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "4ee4103e-1a52-4099-a48e-01588f597c70", "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "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 { colors, boxes } from '../../shared/constants';
import { remcalc } from '../../shared/functions'; import { remcalc } from '../../shared/functions';
import isString from 'lodash.isstring'; import isString from 'lodash.isstring';
@ -14,41 +18,55 @@ const {
const background = match({ const background = match({
secondary: base.white, secondary: base.white,
disabled: inactive.default disabled: inactive.default,
tertiary: 'transparent'
}, base.primary); }, base.primary);
const backgroundHover = match({ const backgroundHover = match({
secondary: base.whiteHover, secondary: base.whiteHover,
disabled: inactive.default disabled: inactive.default,
tertiary: 'transparent'
}, base.primaryHover); }, base.primaryHover);
const backgroundActive = match({ const backgroundActive = match({
secondary: base.whiteActive, secondary: base.whiteActive,
disabled: inactive.default disabled: inactive.default,
tertiary: 'transparent'
}, base.primaryHover); }, base.primaryHover);
const border = match({ const border = match({
secondary: base.grey, secondary: base.grey,
disabled: inactive.grey disabled: inactive.grey,
tertiary: inactive.text
}, base.primaryDesaturated); }, base.primaryDesaturated);
const borderHover = match({ const borderHover = match({
secondary: base.grey, secondary: base.grey,
disabled: inactive.default disabled: inactive.default,
tertiary: inactive.text
}, base.primaryDark); }, base.primaryDark);
const borderActive = match({ const borderActive = match({
secondary: base.grey, secondary: base.grey,
disabled: inactive.default disabled: inactive.default,
tertiary: inactive.text
}, base.primaryDesaturatedHover); }, base.primaryDesaturatedHover);
const color = match({ const color = match({
secondary: base.secondary, secondary: base.secondary,
disabled: inactive.text disabled: inactive.text,
tertiary: inactive.grey
}, base.white); }, base.white);
const boxShadow = match({
secondary: 'box-shadow: ${boxes.bottomShaddow};',
disabled: 'box-shadow: ${boxes.bottomShaddow};',
tertiary: paperEffect
}, '');
const borderRadius = match({ const borderRadius = match({
rect: 0 rect: 0,
tertiary: 0
}, boxes.borderRadius); }, boxes.borderRadius);
// based on bootstrap 4 // based on bootstrap 4
@ -84,7 +102,7 @@ const style = css`
border-radius: ${borderRadius}; border-radius: ${borderRadius};
border: solid ${remcalc(1)} ${border}; border: solid ${remcalc(1)} ${border};
box-shadow: ${boxes.bottomShaddow}; ${boxShadow};
&:focus { &:focus {
outline: 0; outline: 0;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import camelCase from 'camel-case'; import camelCase from 'camel-case';
import { boxes } from '../constants'; import { boxes, colors } from '../constants';
import { unitcalc } from '../functions'; import { unitcalc, remcalc } from '../functions';
import { import {
libreFranklin, 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 = { export const typography = {
libreFranklin, libreFranklin,
bold, bold,