From 2a8a80638a5584dee4e0eb831b2136a75021ae63 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 23 Oct 2020 09:45:39 -0400
Subject: [PATCH] ui: Fix the pointer events to view the tooltips when hovering
 over the icons (#9014)

* Fix the pointer events to view the tooltips when hovering over the icons

* Update to use class instead of id
---
 .../consul-ui/app/components/topology-metrics/index.hbs     | 2 +-
 .../consul-ui/app/components/topology-metrics/index.js      | 6 +++---
 .../consul-ui/app/components/topology-metrics/layout.scss   | 2 --
 .../app/components/topology-metrics/series/layout.scss      | 1 +
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
index da71d33323..ad1d63e92a 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
@@ -20,7 +20,7 @@
   </div>
 {{/if}}
   <div id="metrics-container">
-    <div>
+    <div class="metrics-header">
       {{@service.Service.Service}}
     </div>
     {{#if this.hasMetricsProvider }}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js
index a1e5445dfa..d5ebb79e44 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.js
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js
@@ -24,7 +24,7 @@ export default class TopologyMetrics extends Component {
     const order = ['allow', 'deny'];
     const dest = {
       x: this.centerDimensions.x,
-      y: this.centerDimensions.y + this.centerDimensions.height / 4,
+      y: this.centerDimensions.y + this.centerDimensions.height / 2,
     };
 
     return items
@@ -51,7 +51,7 @@ export default class TopologyMetrics extends Component {
     const order = ['allow', 'deny'];
     const src = {
       x: this.centerDimensions.x + 20,
-      y: this.centerDimensions.y + this.centerDimensions.height / 4,
+      y: this.centerDimensions.y + this.centerDimensions.height / 2,
     };
 
     return items
@@ -83,7 +83,7 @@ export default class TopologyMetrics extends Component {
 
     // Get Card elements positions
     const downCards = [...document.querySelectorAll('#downstream-container .card')];
-    const grafanaCard = document.querySelector('#metrics-container');
+    const grafanaCard = document.querySelector('.metrics-header');
     const upCards = [...document.querySelectorAll('#upstream-column .card')];
 
     // Set center positioning points
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
index 341712754f..771201b721 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/layout.scss
@@ -14,12 +14,10 @@
 #downstream-lines {
   grid-row: 1 / 3;
   grid-column: 2 / 5;
-  pointer-events: none;
 }
 #upstream-lines {
   grid-row: 1 / 3;
   grid-column: 6 / 9;
-  pointer-events: none;
 }
 #upstream-column {
   grid-row: 1 / 3;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss b/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
index 036b002df4..f79dc4df6c 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/series/layout.scss
@@ -4,6 +4,7 @@
   padding: 0;
   margin: 0;
   height: 70px;
+  z-index: 2;
 
   svg.sparkline {
     width: 100%;