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', () => (