From 2bede6e66922a369cc8b750bdbd97bd26c6e245c Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 7 Mar 2017 12:03:55 +0000
Subject: [PATCH] Adding unmanaged instances and "paper" composer

fixes #284
fixes #273
---
 .../services/unmanaged-instances.js           | 29 ++++++++++++++
 frontend/src/containers/services/index.js     | 22 +++++++++++
 frontend/src/containers/services/list.js      |  5 ++-
 frontend/src/mock-state.json                  |  2 +-
 ui/src/components/button/index.js             | 38 ++++++++++++++-----
 ui/src/components/button/story.js             |  4 ++
 ui/src/components/column/index.js             |  1 +
 ui/src/components/list/item.js                | 12 +-----
 ui/src/components/topology/graph-node/info.js |  4 +-
 ui/src/components/topology/topology-graph.js  |  2 +-
 ui/src/shared/composers/index.js              | 13 ++++++-
 11 files changed, 105 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/services/unmanaged-instances.js

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
+}) => (
+  <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;
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 (
+      <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>
   );
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) => (
     <ServiceItem
       key={service.uuid}
@@ -27,7 +29,8 @@ const Services = (props) => {
 
   return (
     <div>
-      {serviceList}
+      { serviceList }
+      { instances && <UnmanagedInstances instances={instances} /> }
     </div>
   );
 };
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)
     <Button secondary>
       Inspire the brave
     </Button>
+  )).add('Tertiary', () => (
+    <Button tertiary>
+      Inspire the tertiary
+    </Button>
   )).add('Disabled', () => (
     <Button disabled>
       Inspire the liars
diff --git a/ui/src/components/column/index.js b/ui/src/components/column/index.js
index 22da8d36..8f8ca905 100644
--- a/ui/src/components/column/index.js
+++ b/ui/src/components/column/index.js
@@ -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;
diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js
index e5bd5490..61cc9afe 100644
--- a/ui/src/components/list/item.js
+++ b/ui/src/components/list/item.js
@@ -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}
   `};
 `;
 
diff --git a/ui/src/components/topology/graph-node/info.js b/ui/src/components/topology/graph-node/info.js
index 9bb8149f..589cd0ed 100644
--- a/ui/src/components/topology/graph-node/info.js
+++ b/ui/src/components/topology/graph-node/info.js
@@ -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>
   );
diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js
index e2918260..d5c11172 100644
--- a/ui/src/components/topology/topology-graph.js
+++ b/ui/src/components/topology/topology-graph.js
@@ -7,7 +7,7 @@ import GraphLink from './graph-link';
 import React from 'react';
 
 const StyledSvg = styled.svg`
-  width: 1024px;
+  width: 100%;
   height: 860px;
 `;
 
diff --git a/ui/src/shared/composers/index.js b/ui/src/shared/composers/index.js
index 70761174..6f7f5bd7 100644
--- a/ui/src/shared/composers/index.js
+++ b/ui/src/shared/composers/index.js
@@ -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,