Adding unmanaged instances and "paper" composer

fixes #284
fixes #273

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;

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>
   );

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>
   );
 };

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",

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;

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

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;

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)};
+    ${paperEffect}
-    box-shadow: ${paper};
   `};
 `;
 

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>
   );

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;
 `;
 

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 { boxes, colors } from '../constants';
-import { unitcalc } from '../functions';
+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,