github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Round Trip Time Tooltips (#9290)

pull/9294/head^2
John Cowen 2020-11-30 17:02:54 +00:00 committed by GitHub
parent cb4c3b83b9
commit f46ef3e3ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
View File

@ -59,7 +59,6 @@
<h2> <h2>
Resolvers Resolvers
<span {{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}> <span {{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}>
</span> </span>
</h2> </h2>
</header> </header>

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

@ -13,12 +13,19 @@
</g> </g>
<g class="lines"> <g class="lines">
{{#each this.distances as |item|}} {{#each this.distances as |item|}}
<line <rect
{{tooltip
(concat item.node ' - ' (format-number item.distance maximumFractionDigits=2) 'ms'
(if item.segment (concat '<br />(Segment: ' item.segment ')'))
)
options=(hash
followCursor=true
allowHTML=true
)
}}
transform="rotate({{item.rotate}})" transform="rotate({{item.rotate}})"
y2={{item.y2}} width={{item.y2}}
data-node={{item.d}} height="1"
data-distance={{item.distance}}
data-segment={{item.segment}}
/> />
{{/each}} {{/each}}
</g> </g>

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

@ -37,7 +37,7 @@ export default class TomographyGraph extends Component {
return distances.map((d, i) => { return distances.map((d, i) => {
return { return {
rotate: (i * 360) / distances.length, rotate: (i * 360) / distances.length,
y2: -insetSize * (d.distance / max), y2: insetSize * (d.distance / max),
node: d.node, node: d.node,
distance: d.distance, distance: d.distance,
segment: d.segment, segment: d.segment,

13
ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
View File

@ -15,12 +15,15 @@
stroke: $gray-400; stroke: $gray-400;
fill: $magenta-600; fill: $magenta-600;
} }
.lines line { .lines rect {
stroke: $magenta-600; fill: $magenta-600;
stroke: transparent;
stroke-width: 5px;
} }
.lines line:hover { .lines rect:hover {
stroke: $gray-300; fill: $gray-300;
stroke-width: 2px; height: 3px;
y: -1px;
} }
.tick line { .tick line {
stroke: $gray-300; stroke: $gray-300;

49
ui/packages/consul-ui/mock-api/v1/coordinate/nodes
View File

@ -1,29 +1,34 @@
[ [
${ ${
range( [0].map(
env( item => {
'CONSUL_NODE_COUNT', const segment = env('CONSUL_NSPACES_ENABLE', false) ? fake.hacker.noun() : '';
Math.floor( return range(
( env(
Math.random() * env('CONSUL_NODE_MAX', 10) 'CONSUL_NODE_COUNT',
) + parseInt(env('CONSUL_NODE_MIN', 1)) Math.floor(
) (
) Math.random() * env('CONSUL_NODE_MAX', 10)
).map( ) + parseInt(env('CONSUL_NODE_MIN', 1))
function(item, i) )
{ )
return ` ).map(
function(item, i)
{ {
"Node":"node-${i}", return `
"Segment":"", {
"Coord":{ "Node":"node-${i}",
"Vec":[${range(7).map((item, i) => fake.random.number())}], "Segment":"${segment}",
"Error":1.5, "Coord":{
"Adjustment":0, "Vec":[${range(8).map((item, i) => (fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1))}],
"Height":0.0000${fake.random.number()} "Error": ${(fake.random.number() * 1e-3) * (fake.random.boolean() ? -1 : 1)},
} "Adjustment":${(fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1)},
"Height": ${(fake.random.number() * 1e-9) * (fake.random.boolean() ? -1 : 1)}
}
}
`;
} }
`; )
} }
) )
} }