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>
{{/if}}
<div id="metrics-container">
<div>
<div class="metrics-header">
{{@service.Service.Service}}
</div>
{{#if this.hasMetricsProvider }}

View File

@ -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

View File

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

View File

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