status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Fix empty state conditional for Series Graph (#9221)

This commit is contained in:
Kenia 2020-11-18 14:02:13 -05:00 committed by hashicorp-ci
parent a8024825fc
commit cafbfec376
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs
View File

@ -8,20 +8,22 @@
{{on-window 'resize' (action 'redraw')}} {{on-window 'resize' (action 'redraw')}}
{{#if (not empty)}}
{{#if data.labels}} {{#if data.labels}}
<a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a> <a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a>
{{/if}} {{/if}}
{{/if}}
<div class="sparkline-wrapper"> <div class="sparkline-wrapper">
<div class="tooltip"> <div class="tooltip">
<div class="sparkline-time">Timestamp</div> <div class="sparkline-time">Timestamp</div>
</div> </div>
{{#unless data}} {{#if empty}}
<TopologyMetrics::Status <TopologyMetrics::Status
@noMetricsReason={{@noMetricsReason}} @noMetricsReason={{@noMetricsReason}}
@error={{error}} @error={{error}}
/> />
{{/unless}} {{/if}}
<svg class="sparkline"></svg> <svg class="sparkline"></svg>
</div> </div>

10
ui/packages/consul-ui/app/components/topology-metrics/series/index.js
View File

@ -7,6 +7,7 @@ import { scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale';
import { schemeTableau10 } from 'd3-scale-chromatic'; import { schemeTableau10 } from 'd3-scale-chromatic';
import { area, stack, stackOrderReverse } from 'd3-shape'; import { area, stack, stackOrderReverse } from 'd3-shape';
import { max, extent, bisector } from 'd3-array'; import { max, extent, bisector } from 'd3-array';
import { set } from '@ember/object';
dayjs.extend(Calendar); dayjs.extend(Calendar);
@ -21,7 +22,7 @@ function niceTimeWithSeconds(d) {
export default Component.extend({ export default Component.extend({
data: null, data: null,
empty: false,
actions: { actions: {
redraw: function(evt) { redraw: function(evt) {
this.drawGraphs(); this.drawGraphs();
@ -35,6 +36,7 @@ export default Component.extend({
drawGraphs: function() { drawGraphs: function() {
if (!this.data) { if (!this.data) {
set(this, 'empty', true);
return; return;
} }
@ -59,10 +61,10 @@ export default Component.extend({
if (series.length == 0 || keys.length == 0) { if (series.length == 0 || keys.length == 0) {
// Put the graph in an error state that might get fixed if metrics show up // Put the graph in an error state that might get fixed if metrics show up
// on next poll. // on next poll.
let loader = this.element.querySelector('.sparkline-loader'); set(this, 'empty', true);
loader.innerHTML = 'No Metrics Available';
loader.style.display = 'block';
return; return;
} else {
set(this, 'empty', false);
} }
let st = stack() let st = stack()