From b0a266a0208063ead1dfbbd057fc595d4db48cbe Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Thu, 23 Mar 2017 12:19:30 +0000
Subject: [PATCH] Add metrics link to topology

Add metrics link to topology

Add metrics link to topology

Add metrics link to topology

Add tooltip data to list view too

Add metrics link to quick actions
---
 frontend/src/components/services/tooltip.js  | 72 +++++++++++---------
 frontend/src/containers/services/list.js     |  7 +-
 frontend/src/containers/services/topology.js | 17 ++++-
 frontend/src/state/reducers/services.js      |  6 +-
 4 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/services/tooltip.js b/frontend/src/components/services/tooltip.js
index ac7bb974..a9311116 100644
--- a/frontend/src/components/services/tooltip.js
+++ b/frontend/src/components/services/tooltip.js
@@ -1,43 +1,53 @@
 import React from 'react';
 import Tooltip, { TooltipButton, TooltipDivider } from '@ui/components/tooltip';
 
-// eslint-disable-next-line max-len
-const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
-
 const ServicesTooltip = ({
   show,
   position,
+  data,
   ...rest
-}) => show ? (
-  <Tooltip {...position} {...rest}>
-    <li>
-      <TooltipButton href={scaleLink}>
-        Scale
-      </TooltipButton>
-    </li>
-    <li>
-      <TooltipButton>Rollback</TooltipButton>
-    </li>
-    <li>
-      <TooltipButton>Reprovision</TooltipButton>
-    </li>
-    <li>
-      <TooltipButton>Transfer</TooltipButton>
-    </li>
-    <li>
-      <TooltipButton>Setup metrics</TooltipButton>
-    </li>
-    <TooltipDivider />
-    <li>
-      <TooltipButton>Stop</TooltipButton>
-    </li>
-    <li>
-      <TooltipButton>Delete</TooltipButton>
-    </li>
-  </Tooltip>
-) : null;
+}) => {
+  if(!show) {
+    return null;
+  }
+  // eslint-disable-next-line max-len
+  const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
+  // eslint-disable-next-line max-len
+  const metricsLink = `/${data.orgId}/projects/${data.projectId}/services/${data.serviceId}/metrics`;
+  return (
+    <Tooltip {...position} {...rest}>
+      <li>
+        <TooltipButton href={scaleLink}>
+          Scale
+        </TooltipButton>
+      </li>
+      <li>
+        <TooltipButton>Rollback</TooltipButton>
+      </li>
+      <li>
+        <TooltipButton>Reprovision</TooltipButton>
+      </li>
+      <li>
+        <TooltipButton>Transfer</TooltipButton>
+      </li>
+      <li>
+        <TooltipButton to={metricsLink}>
+          Setup metrics
+        </TooltipButton>
+      </li>
+      <TooltipDivider />
+      <li>
+        <TooltipButton>Stop</TooltipButton>
+      </li>
+      <li>
+        <TooltipButton>Delete</TooltipButton>
+      </li>
+    </Tooltip>
+  );
+};
 
 ServicesTooltip.propTypes = {
+  data: React.PropTypes.object,
   position: React.PropTypes.object,
   show: React.PropTypes.bool
 };
diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js
index 892b1ae3..22266ded 100644
--- a/frontend/src/containers/services/list.js
+++ b/frontend/src/containers/services/list.js
@@ -61,7 +61,12 @@ class Services extends React.Component {
 
       toggleTooltip({
         service: service,
-        position: position
+        position: position,
+        data: {
+          serviceId: service.id,
+          orgId: org.id,
+          projectId: project.id
+        }
       });
     };
 
diff --git a/frontend/src/containers/services/topology.js b/frontend/src/containers/services/topology.js
index 1a891c56..32ad3a64 100644
--- a/frontend/src/containers/services/topology.js
+++ b/frontend/src/containers/services/topology.js
@@ -27,12 +27,25 @@ const StyledContainer = styled(LayoutContainer)`
 const Services = (props) => {
   const {
     services = [],
+    org = {},
+    project = {},
     toggleTooltip,
     uiTooltip
   } = props;
 
   const onQuickActions = (evt, tooltipData) => {
-    toggleTooltip(tooltipData);
+    const service = services.reduce((acc, service) =>
+      service.uuid === tooltipData.service ? service : acc
+    , {});
+    const ttData = {
+      ...tooltipData,
+      data: {
+        serviceId: service.id,
+        orgId: org.id,
+        projectId: project.id
+      }
+    };
+    toggleTooltip(ttData);
   };
 
   return (
@@ -49,7 +62,9 @@ const Services = (props) => {
 };
 
 Services.propTypes = {
+  org: PropTypes.org,
   services: React.PropTypes.arrayOf(PropTypes.service),
+  project: PropTypes.project,
   toggleTooltip: React.PropTypes.func,
   uiTooltip: React.PropTypes.object
 };
diff --git a/frontend/src/state/reducers/services.js b/frontend/src/state/reducers/services.js
index 2b824fc1..e54d29e4 100644
--- a/frontend/src/state/reducers/services.js
+++ b/frontend/src/state/reducers/services.js
@@ -50,7 +50,8 @@ export default handleActions({
   [toggleTooltip.toString()]: (state, action) => {
     const {
       position,
-      service
+      service,
+      data
     } = action.payload;
 
     const show = state.ui.tooltip.service !== service;
@@ -60,7 +61,8 @@ export default handleActions({
       position: {
         ...position
       },
-      service: service
+      service: service,
+      data: data
     } : {
       show: false
     };