luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Refactor tomography graph component to glimmer and remove deprecation (#9219) 

* ui: Refactor tomograph graph component to glimmer and remove deprecation

* Avoid ember-data deprecation error
This commit is contained in:
John Cowen 2020-11-18 18:55:59 +00:00 committed by GitHub
parent 3b093f7b7c
commit bc5bc038d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 108 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs
View File

@ -1,35 +1,46 @@
<svg width="{{size}}" height="{{size}}">
<g class="tomography" transform="translate({{div size 2}}, {{div size 2}})">
<g>
<circle class="background" r="{{circle.[0]}}"/>
<circle class="axis" r="{{circle.[1]}}"/>
<circle class="axis" r="{{circle.[2]}}"/>
<circle class="axis" r="{{circle.[3]}}"/>
<circle class="border" r="{{circle.[4]}}"/>
</g>
<g class="lines">
{{#each distances as |item|}}
<line transform="rotate({{item.rotate}})" y2="{{item.y2}}" data-node="{{item.d}}" data-distance="{{item.distance}}" data-segment="{{item.segment}}"/>
{{/each}}
</g>
<g class="labels">
<circle class="point" r="5"/>
<g class="tick" transform="translate(0, {{labels.[0]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[0] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[1]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[1] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[2]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[2] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{labels.[3]}})">
<line x2="70"/>
<text x="75" y="0" dy=".32em">{{format-number milliseconds.[3] maximumFractionDigits=2}}ms</text>
</g>
</g>
</g>
</svg>
<div
class="tomography-graph"
...attributes
>
<svg width={{this.size}} height={{this.size}}>
<g transform="translate({{div this.size 2}}, {{div this.size 2}})">
<g>
<circle class="background" r={{this.circle.[0]}} />
<circle class="axis" r={{this.circle.[1]}} />
<circle class="axis" r={{this.circle.[2]}} />
<circle class="axis" r={{this.circle.[3]}} />
<circle class="border" r={{this.circle.[4]}} />
</g>
<g class="lines">
{{#each this.distances as |item|}}
<line
transform="rotate({{item.rotate}})"
y2={{item.y2}}
data-node={{item.d}}
data-distance={{item.distance}}
data-segment={{item.segment}}
/>
{{/each}}
</g>
<g class="labels">
<circle class="point" r="5" />
<g class="tick" transform="translate(0, {{this.labels.[0]}})">
<line x2="70" />
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[0] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{this.labels.[1]}})">
<line x2="70" />
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[1] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{this.labels.[2]}})">
<line x2="70" />
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[2] maximumFractionDigits=2}}ms</text>
</g>
<g class="tick" transform="translate(0, {{this.labels.[3]}})">
<line x2="70" />
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[3] maximumFractionDigits=2}}ms</text>
</g>
</g>
</g>
</svg>
</div>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

65
ui/packages/consul-ui/app/components/consul/tomography/graph/index.js
View File

@ -1,5 +1,5 @@
import Component from '@ember/component';
import { computed, set, get } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
const size = 336;
const insetSize = size / 2 - 8;
@ -9,52 +9,39 @@ const inset = function(num) {
const milliseconds = function(num, max) {
return max > 0 ? parseInt(max * num) / 100 : 0;
};
export default Component.extend({
size: size,
tomography: 0,
max: -999999999,
init: function() {
this._super(...arguments);
this.circle = [inset(1), inset(0.25), inset(0.5), inset(0.75), inset(1)];
this.labels = [inset(-0.25), inset(-0.5), inset(-0.75), inset(-1)];
},
milliseconds: computed('distances', 'max', function() {
const max = get(this, 'max');
return [
milliseconds(25, max),
milliseconds(50, max),
milliseconds(75, max),
milliseconds(100, max),
];
}),
distances: computed('tomography', function() {
const tomography = get(this, 'tomography');
let distances = get(tomography, 'distances') || [];
// TODO: This should probably be moved into the milliseconds computedProperty
/*eslint ember/no-side-effects: "warn"*/
distances.forEach((d, i) => {
if (d.distance > get(this, 'max')) {
set(this, 'max', d.distance);
}
});
let n = get(distances, 'length');
if (n > 360) {
export default class TomographyGraph extends Component {
@tracked max = -999999999;
size = size;
circle = [inset(1), inset(0.25), inset(0.5), inset(0.75), inset(1)];
labels = [inset(-0.25), inset(-0.5), inset(-0.75), inset(-1)];
get milliseconds() {
const distances = this.args.distances || [];
const max = distances.reduce((prev, d) => Math.max(prev, d.distance), this.max);
return [25, 50, 75, 100].map(item => milliseconds(item, max));
}
get distances() {
const distances = this.args.distances || [];
const max = distances.reduce((prev, d) => Math.max(prev, d.distance), this.max);
const len = distances.length;
if (len > 360) {
// We have more nodes than we want to show, take a random sampling to keep
// the number around 360.
const sampling = 360 / n;
const sampling = 360 / len;
distances = distances.filter(function(_, i) {
return i == 0 || i == n - 1 || Math.random() < sampling;
return i == 0 || i == len - 1 || Math.random() < sampling;
});
n = get(distances, 'length');
}
return distances.map((d, i) => {
return {
rotate: (i * 360) / n,
y2: -insetSize * (d.distance / get(this, 'max')),
rotate: (i * 360) / distances.length,
y2: -insetSize * (d.distance / max),
node: d.node,
distance: d.distance,
segment: d.segment,
};
});
}),
});
}
}

33
ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss Normal file
View File

@ -0,0 +1,33 @@
.tomography-graph {
.background {
fill: $gray-050;
}
.axis {
fill: none;
stroke: $gray-300;
stroke-dasharray: 4 4;
}
.border {
fill: none;
stroke: $gray-300;
}
.point {
stroke: $gray-400;
fill: $magenta-600;
}
.lines line {
stroke: $magenta-600;
}
.lines line:hover {
stroke: $gray-300;
stroke-width: 2px;
}
.tick line {
stroke: $gray-300;
}
.tick text {
font-size: $typo-size-600;
text-anchor: start;
color: $gray-900;
}
}

2
ui/packages/consul-ui/app/services/repository/coordinate.js
View File

@ -30,7 +30,7 @@ export default class CoordinateService extends RepositoryService {
if (get(coordinates, 'length') > 1) {
results = tomography(
node,
coordinates.map(item => get(item, 'data'))
coordinates
);
}
results.meta = get(coordinates, 'meta');

2
ui/packages/consul-ui/app/styles/components.scss
View File

@ -22,7 +22,6 @@
@import './components/healthcheck-output';
@import './components/freetext-filter';
@import './components/filter-bar';
@import './components/tomography-graph';
@import './components/flash-message';
@import './components/code-editor';
@import './components/confirmation-dialog';
@ -55,6 +54,7 @@
@import 'consul-ui/components/notice';
@import 'consul-ui/components/modal-dialog';
@import 'consul-ui/components/consul/tomography/graph';
@import 'consul-ui/components/consul/discovery-chain';
@import 'consul-ui/components/consul/upstream-instance/list';
@import 'consul-ui/components/consul/exposed-path/list';

31
ui/packages/consul-ui/app/styles/components/tomography-graph.scss
View File

@ -1,31 +0,0 @@
.tomography .background {
fill: $gray-050;
}
.tomography .axis {
fill: none;
stroke: $gray-300;
stroke-dasharray: 4 4;
}
.tomography .border {
fill: none;
stroke: $gray-300;
}
.tomography .point {
stroke: $gray-400;
fill: $magenta-600;
}
.tomography .lines line {
stroke: $magenta-600;
}
.tomography .lines line:hover {
stroke: $gray-300;
stroke-width: 2px;
}
.tomography .tick line {
stroke: $gray-300;
}
.tomography .tick text {
font-size: $typo-size-600;
text-anchor: start;
color: $gray-900;
}

2
ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs
View File

@ -22,7 +22,7 @@
</dd>
</dl>
</div>
<Consul::Tomography::Graph @tomography={{tomography}} />
<Consul::Tomography::Graph @distances={{tomography.distances}} />
</div>
</div>