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
This commit is contained in:
Kenia 2020-10-23 09:45:39 -04:00 committed by GitHub
parent 92abbbacc1
commit 2a8a80638a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 5 additions and 6 deletions

View File

@ -20,7 +20,7 @@
</div> </div>
{{/if}} {{/if}}
<div id="metrics-container"> <div id="metrics-container">
<div> <div class="metrics-header">
{{@service.Service.Service}} {{@service.Service.Service}}
</div> </div>
{{#if this.hasMetricsProvider }} {{#if this.hasMetricsProvider }}

View File

@ -24,7 +24,7 @@ export default class TopologyMetrics extends Component {
const order = ['allow', 'deny']; const order = ['allow', 'deny'];
const dest = { const dest = {
x: this.centerDimensions.x, x: this.centerDimensions.x,
y: this.centerDimensions.y + this.centerDimensions.height / 4, y: this.centerDimensions.y + this.centerDimensions.height / 2,
}; };
return items return items
@ -51,7 +51,7 @@ export default class TopologyMetrics extends Component {
const order = ['allow', 'deny']; const order = ['allow', 'deny'];
const src = { const src = {
x: this.centerDimensions.x + 20, x: this.centerDimensions.x + 20,
y: this.centerDimensions.y + this.centerDimensions.height / 4, y: this.centerDimensions.y + this.centerDimensions.height / 2,
}; };
return items return items
@ -83,7 +83,7 @@ export default class TopologyMetrics extends Component {
// Get Card elements positions // Get Card elements positions
const downCards = [...document.querySelectorAll('#downstream-container .card')]; 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')]; const upCards = [...document.querySelectorAll('#upstream-column .card')];
// Set center positioning points // Set center positioning points

View File

@ -14,12 +14,10 @@
#downstream-lines { #downstream-lines {
grid-row: 1 / 3; grid-row: 1 / 3;
grid-column: 2 / 5; grid-column: 2 / 5;
pointer-events: none;
} }
#upstream-lines { #upstream-lines {
grid-row: 1 / 3; grid-row: 1 / 3;
grid-column: 6 / 9; grid-column: 6 / 9;
pointer-events: none;
} }
#upstream-column { #upstream-column {
grid-row: 1 / 3; grid-row: 1 / 3;

View File

@ -4,6 +4,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 70px; height: 70px;
z-index: 2;
svg.sparkline { svg.sparkline {
width: 100%; width: 100%;