mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
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 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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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",
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
|
@ -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};
|
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user