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

@@ -1,14 +1,20 @@
 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 ? (
+}) => {
+  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}>
@@ -25,7 +31,9 @@ const ServicesTooltip = ({
         <TooltipButton>Transfer</TooltipButton>
       </li>
       <li>
-      <TooltipButton>Setup metrics</TooltipButton>
+        <TooltipButton to={metricsLink}>
+          Setup metrics
+        </TooltipButton>
       </li>
       <TooltipDivider />
       <li>
@@ -35,9 +43,11 @@ const ServicesTooltip = ({
         <TooltipButton>Delete</TooltipButton>
       </li>
     </Tooltip>
-) : null;
+  );
+};
 
 ServicesTooltip.propTypes = {
+  data: React.PropTypes.object,
   position: React.PropTypes.object,
   show: React.PropTypes.bool
 };

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

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

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