parent
7a393278eb
commit
2bede6e669
29
frontend/src/components/services/unmanaged-instances.js
Normal file
29
frontend/src/components/services/unmanaged-instances.js
Normal 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;
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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}
|
||||
`};
|
||||
`;
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -7,7 +7,7 @@ import GraphLink from './graph-link';
|
||||
import React from 'react';
|
||||
|
||||
const StyledSvg = styled.svg`
|
||||
width: 1024px;
|
||||
width: 100%;
|
||||
height: 860px;
|
||||
`;
|
||||
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user