UI: Task Group Scaling Controls #8207

DingoEatingFuzz · 2020-06-19T06:50:12Z

A fan favorite feature from Hashi UI is finally landing in the Nomad UI 🎉

We have always been cautious about allowing casual changes to job definitions outside of the source control loop given our core principle of infrastructure as code. However! The new scaling APIs means we can do the best of both worlds.

With this feature, in its initial form, if you have a task group that specifies a scaling block, the UI will let you scale a task group up and down within the min/max range declared in the job.

This can be done one of two ways:

Quick action: From the job detail page, task group rows now have +/- buttons when appropriate. Clicking these buttons will hit the scale endpoint and change the underlying count for the task group going through the expected deployment process. These buttons are debounced, so if you quickly click the + button five times, only one deployment with count+5 will be created.
Precise action: From the task group detail page, a task group can be scaled using +/- buttons just like in the table row, but it can also be scaled using manual text entry. Debouncing is used here as well.

This prevents the svg from being a target in click events.

…alue onto separate lines

…component

This was a disturbing discovery. Requests in watch loops would recycle AbortControllers meaning once any request was aborted, all requests forever after were skipped. I noticed it with deployments and job summary on the job detail page. I suspect this regression occurred when jQuery was removed. This needs test coverage still to make sure it doesn't happen again.

…priately

github-actions · 2020-06-19T06:55:32Z

Ember Asset Size action

As of c70ea97

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+14 kB	+1.89 kB
nomad-ui.css	+4.77 kB	+706 B

Files that stayed the same size 🤷‍:

File	raw	gzip
auto-import-fastboot.js	0 B	0 B
vendor.js	0 B	0 B
vendor.css	0 B	0 B

github-actions · 2020-06-19T07:15:49Z

Ember Test Audit comparison

	master	`c70ea97`	change
passes	1392	1415	+23
failures	0	0	0
flaky	0	0	0
duration	5m 11s 322ms	5m 21s 826ms	+10s 504ms

backspace

I found this fun to toy around with, which to me is one aspect of a good design. I have some mega-detail UX suggestions but nothing blocking this from being merged. Success! 🥳

backspace · 2020-06-19T14:02:38Z

ui/app/abilities/job.js

+
+  @computed('rulesForActiveNamespace.@each.capabilities')
+  get policiesSupportScaling() {
+    return this.activeNamespaceIncludesCapability('scale-job');


I like that we are slowly building up useful abstractions here as appropriate 🤩

backspace · 2020-06-19T14:05:26Z

ui/tests/pages/components/stepper-input.js

+export default scope => ({
+  scope,
+
+  isPresent: isPresent(),


Really quite minor (ignorable even??) but since this is a page object “component”, isPresent comes for free.

🤯 Today I learned!

backspace · 2020-06-19T14:22:43Z

ui/tests/integration/task-group-row-test.js

+    );
+    assert.equal(scaleRequests.length, 1);
+    assert.equal(JSON.parse(scaleRequests[0].requestBody).Count, 4);
+  });


I love the granularity here 😀

backspace · 2020-06-19T14:45:13Z

ui/tests/integration/stepper-input-test.js

+    await StepperInput.input.esc();
+    assert.equal(StepperInput.input.value, this.value);
+  });
+});


If I enter a decimal value in the field, it results in a failed POST …/scale event with a string response (!):

json: cannot unmarshal number 3.5 into Go struct field ScalingRequest.Count of type int64

Some kind of error-handling would be nice to have, or maybe a few kinds. I’m not sure what the best approach to this specific case would be, maybe reverting to the last number that worked? 🤔 That could be confusing though if you enter a valid number and it fails for unrelated reasons, there’s not really anywhere obvious to indicate what happened.

UX suggestions:
• when I tried entering a non-number (“x”) or deleting the contents of the field, it reset to the minimum count, what if it reverted to the last number instead? Or maybe the current behaviour is fine but should have attendant edge case assertions?
• could clicking the pseudo-label of “count” cause the number to become highlighted for editing?
• and maybe even clicking the field itself could highlight it instead of showing the caret? But maybe that’s too much of a departure from standard input field UX

That’s a lot of tiny details though, more questions than things I would insist on 😀 AND I can tell there’s a lot of UX attention already, like handling the Escape key for instance, I love it!

I really appreciate you hammering on this component! I of course want the UX of all the components to be as good as possible.

I tried to keep as much of the default number input experience as possible, but I agree with your critique. I'll add the following to our known issues list:

invalid input should revert the value, not set to min (number input default)

clicking the label of the stepper input should focus the input field

when the input field is focused, the value should be highlighted so you don't have to deleting the existing value before providing a new one

backspace · 2020-06-19T14:52:43Z

ui/mirage/factories/task-group.js

+              avg_conn: {
+                Source: 'prometheus',
+                Query:
+                  'scalar(avg((haproxy_server_current_sessions{backend="http_back"}) and (haproxy_server_up{backend="http_back"} == 1)))',


wildness 🙃

Right? I copied it straight from the autoscaler docs.

backspace · 2020-06-19T14:54:49Z

ui/app/templates/jobs/job/task-group.hbs

+        @max={{model.scaling.max}}
+        @value={{model.count}}
+        @class="is-primary is-small"
+        @disabled={{or model.job.runningDeployment (cannot "scale job")}}


The task group row tells you you lack permissions when it’s turned off but this one is just turned off with no indication of why (example on Netlify), maybe the same tooltip could show? I hope it’s not Hard 😳

Yeeeaaah. The reason (if you're curious) is there's a running deployment.

This definitely needs a tooltip, but it wasn't easy to shim it in with a good enough message, so I cut that corner to make the beta. I'll log it as a known issue though.

backspace · 2020-06-19T15:06:01Z

ui/app/adapters/job.js

@@ -68,4 +68,20 @@ export default class JobAdapter extends WatchableNamespaceIDs {
      },
    });
  }
+
+  scale(job, group, count, reason) {
+    const url = addToPath(this.urlForFindRecord(job.get('id'), 'job'), '/scale');


I hadn’t known about addToPath before, I feel like I could have used it at some point, I’ll try to remember it exists 😯

jippi · 2020-06-20T17:14:49Z

Nice, excited to see hashi-ui becoming less and less relevant!

github-actions · 2023-01-02T02:14:42Z

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 27 commits June 18, 2020 22:08

Model the scaling properties of a task group as a fragment

29ff3f9

LazyClick should also get interrupted by buttons

e28efc6

New xsmall button size

4e7b844

When an icon is intended as text, it shouldn't have pointer events

0137f8d

This prevents the svg from being a target in click events.

Extend button-bar support to buttons

158f776

Additional button-bar treatments for use in a table row

461980d

Prevent inline definition key/value pairs from breaking the key and v…

6b57adc

…alue onto separate lines

Add the min/max and policy y/n of a task group to the details ribbon

2e1adbc

Add the elements of the manual scaling actions to the task-group-row …

ed6c414

…component

Make sure buttons in a button bar have a very visible focus state

3768a63

New scale action for jobs (and a convenience task group method)

149dcda

Wire up the +/- buttons in task group rows to the job scale action

9a344e4

Mirage updates for task group scaling and scaling post endpoint

a1f1079

Add canScale ability for jobs

7fec4d8

Disable scale buttons when a deployment is running or ACL forbids it

1182203

Test coverage for the task group row scale actions

469b107

Slow the debounce time.

0b0be1b

Barebones StepperInput component

2b88651

StepperInput story

ed63958

Add count StepperInput to the task group page

140f9f6

Style the StepperInput component

6bde0e5

Test coverage for the StepperInput

110f491

Integrate the stepper input with the task group page

2227f24

Wire up the scale action on the task group page

eb901b5

Watch the latest deployment relationship to disable the stepper appro…

72161b0

…priately

Acceptance tests for task group scaling

61042e0

DingoEatingFuzz added the theme/ui label Jun 19, 2020

DingoEatingFuzz added this to the 0.12.0 milestone Jun 19, 2020

DingoEatingFuzz requested a review from backspace June 19, 2020 06:50

DingoEatingFuzz requested a review from a team June 19, 2020 06:50

backspace approved these changes Jun 19, 2020

View reviewed changes

DingoEatingFuzz modified the milestones: 0.12.0, 0.12.0-beta1 Jun 19, 2020

DingoEatingFuzz mentioned this pull request Jun 19, 2020

[Meta] Nomad 0.12.0-beta1 Known Issues #8213

Closed

Remove superfluous property from the StepperInput page object

c70ea97

DingoEatingFuzz merged commit fcf08db into master Jun 19, 2020

DingoEatingFuzz deleted the f-ui/manual-scaling-controls branch June 19, 2020 17:29

backspace mentioned this pull request Jun 22, 2020

Invalid calls to POST …/scale return JSON parse errors #8236

Open

github-actions bot locked as resolved and limited conversation to collaborators Jan 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Task Group Scaling Controls #8207

UI: Task Group Scaling Controls #8207

DingoEatingFuzz commented Jun 19, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading

backspace left a comment

backspace Jun 19, 2020

backspace Jun 19, 2020

DingoEatingFuzz Jun 19, 2020

backspace Jun 19, 2020

backspace Jun 19, 2020

DingoEatingFuzz Jun 19, 2020

backspace Jun 19, 2020

DingoEatingFuzz Jun 19, 2020

backspace Jun 19, 2020

DingoEatingFuzz Jun 19, 2020

backspace Jun 19, 2020

jippi commented Jun 20, 2020

github-actions bot commented Jan 2, 2023

UI: Task Group Scaling Controls #8207

UI: Task Group Scaling Controls #8207

Conversation

DingoEatingFuzz commented Jun 19, 2020 • edited Loading

github-actions bot commented Jun 19, 2020 • edited Loading

Ember Asset Size action

github-actions bot commented Jun 19, 2020 • edited Loading

Ember Test Audit comparison

backspace left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jippi commented Jun 20, 2020

github-actions bot commented Jan 2, 2023

DingoEatingFuzz commented Jun 19, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading

github-actions bot commented Jun 19, 2020 •

edited

Loading