UI: Showed host reservations and allocation utilization by task on existing stats charts #10208

DingoEatingFuzz · 2021-03-22T15:58:35Z

This applies the new chart patterns to add more information to the existing memory and CPU utilization charts on the client detail, allocation detail, and task detail pages.

Client Detail

The client detail charts will now show a horizontal annotation (or "high water mark") denoting the reserved capacity for the metric if one has been set.

Allocation Detail

The allocation detail charts will now break down utilization by task for allocations with multiple tasks.

Task Detail

The task detail is unchanged. It shows the same data as the allocation detail charts but narrowed down to the single task.

Implementation

Since each instance of the previous PrimaryMetric component has now deviated, it made sense to refactor it into three components, one for each variation. This resulted in some repetition, but that seemed better than adding even more conditionals and overloading the existing implementation.

There are also some details that arose from using the StatsTrackers with Glimmer components.

github-actions · 2021-03-22T16:03:45Z

Ember Asset Size action

As of c15bf65

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+12.9 kB	+1.92 kB
nomad-ui.css	+54 B	+18 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
vendor.css	0 B	0 B

github-actions · 2021-03-22T16:33:53Z

Ember Test Audit comparison

	main	`c15bf65`	change
passes	1002	1019	+17
failures	0	0	0
flaky	0	0	0
duration	7m 53s 133ms	8m 52s 223ms	+59s 090ms

backspace

agreed re the desirability of having an overly-general shared component, breaking it up for the variations makes sense to me.

I found a significant problem in that tooltips are broken for me on the allocation chart, but apart from a few tiny notes, this looks good 😀

backspace · 2021-03-23T14:14:57Z

ui/app/components/primary-metric/allocation.hbs

+              <span class="value">{{datum.formatttedY}}</span>
+            {{/if}}
+          </li>
+        </c.Tooltip>


I’m not sure what it is but there’s something broken in allocation chart tooltips when I run locally:

Hmm. Looks like this happens for allocs with lifecycle tasks that haven't started yet. Is that when you encountered it too?

backspace · 2021-03-23T15:10:05Z

ui/app/components/primary-metric/allocation.js

+  }
+
+  get reservedAmount() {
+    return this.metric === 'cpu' ? this.tracker.reservedCPU : this.tracker.reservedMemory;


Maybe it’s a fallback that never actually happens but it gives me pause to see a this.metric-based conditional here with only two branches while the two following ones have three 🤔

backspace · 2021-03-23T16:36:30Z

ui/tests/integration/components/primary-metric/task-test.js

+    await preload(this.store);
+
+    const resource = findResource(this.store);
+    console.log(resource, this.store.peekAll('allocation').get('firstObject').states);


backspace · 2021-03-23T17:05:21Z

ui/app/components/primary-metric/node.js

+
+  /** Args
+    node = null;
+    metric null; (one of 'cpu' or 'memory'


tiny: missing ) (repeated elsewhere)

Currently, PrimaryMetric is already overloaded on multiple dimensions: metric and resource type. This refactor will use multiple components as a form of control flow instead spidering conditionals, which are only getting worse as the charts for each resource type diverge.

This binds a function to a target before passing it along to another component. It's normal to expect to get to use `this` within functions on components and controllers, but (sans actions) that doesn't happen automatically.

This leverages the existing pre-processing being done in the allocation-stats-tracker to also create additive percentages relative to the allocation resources vs. the task resources. This can then be used in a chart to create a stacked area representation of consumption.

- Sorting must be done on copies to preserve orders. - Indices should be reversed since rendering is also reversed (the back layer (the tallest) is rendered first to create the stacking effect).

…onent

…tion In addition to this computation being wasteful, it introduces a bug where the allocation on a stats tracker can update twice in one render, which isn't allowed in Glimmer (ironically, Glimmmer's lack of auto-memoization introduced the issue).

…cedence

DingoEatingFuzz · 2021-03-24T22:13:29Z

Okay! I fixed the tooltip bug you caught and another bug with sorting tasks by their lifecycle phase.

backspace

nice, indeed fixed for me 🥳

github-actions · 2022-11-27T02:25:15Z

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

DingoEatingFuzz added the theme/ui label Mar 22, 2021

DingoEatingFuzz requested a review from backspace March 22, 2021 15:58

backspace suggested changes Mar 23, 2021

View reviewed changes

DingoEatingFuzz added 23 commits March 24, 2021 13:52

Pass the LineChart named blocks through to callers of StatsTimeSeries

febecbb

Compute and render reserved annotations for client stats

ce7f6d0

Simple bind helper

a6a9df5

This binds a function to a target before passing it along to another component. It's normal to expect to get to use `this` within functions on components and controllers, but (sans actions) that doesn't happen automatically.

Sort and index multi-series data correctly in line chart

8ab3014

- Sorting must be done on copies to preserve orders. - Indices should be reversed since rendering is also reversed (the back layer (the tallest) is rendered first to create the stacking effect).

Refactor stats-time-series to allow for multiple series

d72eaa1

Refactored multi-series allocation variant of the primary metric comp…

4f27bee

…onent

Apply the new multi-line primary metric to the alloc index page

745a55b

New PrimaryMetric::Task component

7b73460

Improved language around what the client stat charts represent

17cf4ad

Remove now unused chartClass arg from LineChart

2953542

Tests for PrimaryMetric::Node

2ed5b28

Tests for PrimaryMetric::Allocation

e3a1106

Tests for PrimaryMetric::Task

ead08e2

Updated old tests

91521d6

Update topology info box primary metric

5191693

Remove old primary metric

b009fc1

Use more explicit branching of reserved amounts based on metric type

2b1449c

Fix line-wrapping issue with chart tooltips

ebd91a9

Guard against empty data when determining active linechart data

1d8bc39

Correctly sort tasks in alloc stat tracker so the main task takes pre…

d9426df

…cedence

DingoEatingFuzz force-pushed the f-ui/use-new-chart-stuff branch from bf4bccc to d9426df Compare March 24, 2021 22:10

vercel bot temporarily deployed to Preview – nomad March 24, 2021 22:10 Inactive

vercel bot deployed to Preview – nomad-storybook-and-ui March 24, 2021 22:11 View deployment

Remove errant log line

c15bf65

DingoEatingFuzz requested a review from backspace March 24, 2021 22:35

vercel bot deployed to Preview – nomad-storybook-and-ui March 24, 2021 22:35 View deployment

vercel bot temporarily deployed to Preview – nomad March 24, 2021 22:35 Inactive

backspace approved these changes Mar 25, 2021

View reviewed changes

DingoEatingFuzz merged commit c4a7728 into main Mar 25, 2021

DingoEatingFuzz deleted the f-ui/use-new-chart-stuff branch March 25, 2021 16:18

DingoEatingFuzz mentioned this pull request Mar 25, 2021

UI doesn't report reserved resources correctly (cpu and memory) #8694

Open

github-actions bot locked as resolved and limited conversation to collaborators Nov 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Showed host reservations and allocation utilization by task on existing stats charts #10208

UI: Showed host reservations and allocation utilization by task on existing stats charts #10208

DingoEatingFuzz commented Mar 22, 2021

github-actions bot commented Mar 22, 2021 •

edited

Loading

github-actions bot commented Mar 22, 2021 •

edited

Loading

backspace left a comment

backspace Mar 23, 2021

DingoEatingFuzz Mar 24, 2021

backspace Mar 23, 2021

backspace Mar 23, 2021

backspace Mar 23, 2021

DingoEatingFuzz commented Mar 24, 2021

backspace left a comment

github-actions bot commented Nov 27, 2022

UI: Showed host reservations and allocation utilization by task on existing stats charts #10208

UI: Showed host reservations and allocation utilization by task on existing stats charts #10208

Conversation

DingoEatingFuzz commented Mar 22, 2021

Client Detail

Allocation Detail

Task Detail

Implementation

github-actions bot commented Mar 22, 2021 • edited Loading

Ember Asset Size action

github-actions bot commented Mar 22, 2021 • edited Loading

Ember Test Audit comparison

backspace left a comment

Choose a reason for hiding this comment

backspace Mar 23, 2021

Choose a reason for hiding this comment

DingoEatingFuzz Mar 24, 2021

Choose a reason for hiding this comment

backspace Mar 23, 2021

Choose a reason for hiding this comment

backspace Mar 23, 2021

Choose a reason for hiding this comment

backspace Mar 23, 2021

Choose a reason for hiding this comment

DingoEatingFuzz commented Mar 24, 2021

backspace left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 27, 2022

github-actions bot commented Mar 22, 2021 •

edited

Loading

github-actions bot commented Mar 22, 2021 •

edited

Loading