UI: Invoke Node Drains #6819

DingoEatingFuzz · 2019-12-07T08:00:55Z

This brings the ability to submit, update, stop, and force node drains from the UI. It also brings along the related task of toggling node eligibility.

The updated client detail page, including a drain control, an eligibility toggle, and rearranged title bar elements.

The drain options dropdown/popover, including deadline, force, and system job (equivalent to cli options).

The deadline option includes some convenient presets.

The custom deadline allows for text input of a well formatted duration.

When a drain is running, the number of running/migrating/completed allocations are shown and updated in realtime.

The stop and force actions use the familiar two-step pattern to prevents accidents.

If you are on the page when a drain completes, you will receive a completion notification.

backspace

Overall this seems great to me, I have a few suggestions and questions, but 🥳

backspace · 2019-12-09T20:55:28Z

ui/app/components/drain-popover.js

+    try {
+      deadline = parseDuration(this.deadline);
+    } catch (err) {
+      this.set('parseError', 'Failed to parse duration');


I tried this out locally and wondered why the parseDuration utility generated specific errors but those get made generic here, so the UI only shows this one message:

It seems like it would be more helpful to print the parse errors specifically, maybe with a fallback if the error is somehow unknown?

Also/if not, maybe there could be a link to documentation that spells out what the expectations are, apart from the placeholder example?

The reason is a pretty shallow one: I didn't want line wrapping. I agree this could use more attention though.

The new duration lib includes error messages which I included. Screenshot:

backspace · 2019-12-09T21:05:44Z

ui/app/templates/components/drain-popover.hbs

+          Drain System Jobs
+        {{/toggle}}
+        <span class="tooltip multiline" aria-label="Stop allocations for system jobs.">
+          {{x-icon "info-circle-outline" class="is-faded"}}


This isn’t quite as necessary as it seemed in this PR (see GIF) but I wonder if something like the is-right-aligned thing would be useful here to address the slight truncation I see:

Yeah, I think that makes sense here.

ui/app/styles/components/popover-menu.scss

backspace · 2019-12-09T21:25:12Z

ui/tests/integration/toggle-test.js

+
+    await Toggle.toggle();
+    assert.equal(props.onToggle.callCount, 1);
+  });


In the vein of the above comment on keyboard access, I tried it out and it all worked as expected (apart from a moment of 🤔 where triggering “Drain” with the keyboard happened too quickly for the progress indicator to even show that I’d actually done it successfully, but I think that’s something that won’t happen in a real scenario vs local testing), but what do you think of having an assertion for that at this level too? I find it somewhat unfortunate to having a multiplication of tests for different triggers but I also like to have some assertions that catch possible regressions… so maybe this could be Toggle.click and then Toggle.spaceBar in another test, or the like?

I had that at one point, but then I couldn't get it to work. Turns out the spacebar action on inputs actually invoke the click handler.

So I agree that it would be good to capture, since it's not hard to imagine the checkbox being replaced with a span or something at some point and we accidentally lose the keyboard support, but I'm not sure how to mock it since it isn't actually a different event.

I’ve tested keyboard things with page objects before; I haven’t tried it in this situation but maybe this would work:

spaceBar: triggerable('keypress', '[data-test-input]', { eventProperties: { keyCode: 32 } })

The issue isn't emulating the key event. It's that emulating the key event doesn't toggle the checkbox.

I don't know what the browser is doing, but when you press space when the checkbox is active, it sets checked and fires a click event.

When you emulate the space press, nothing happens. It's as if key controls for form inputs is a browser detail that gets translated into different DOM events before making it into javascript land.

I pushed up a commit to show you what I tried: 050f60a

oh wow, well that’s disappointing, sorry for misunderstanding 😞

backspace · 2019-12-09T21:28:05Z

ui/tests/integration/popover-menu-test.js

+    this.setProperties(props);
+    await this.render(commonTemplate);
+
+    assert.ok(Array.from(find('[data-test-popover-trigger]').classList).includes('is-special'));


Since qunit-dom is present, what do you think about something like this slightly-more-direct assertion?

assert.dom('[data-test-popover-trigger]').hasClass('is-special');

👍 I need to brush up on qunit-dom instead of continuing to reach for my primitive tools, ha.

backspace · 2019-12-09T21:32:05Z

ui/tests/integration/popover-menu-test.js

+
+    await PopoverMenu.focusNext();
+
+    assert.equal(document.activeElement, find('#mock-input-for-test'));


Similarly this could be isFocused 😀

backspace · 2019-12-09T21:34:03Z

ui/tests/acceptance/client-detail-test.js

+    await waitUntil(() => server.pretender.handledRequests.findBy('method', 'POST'));
+
+    assert.ok(ClientDetail.eligibilityToggle.isDisabled);
+    server.pretender.resolve(server.pretender.requestReferences[0].request);


ooh nice, I haven’t seen this before, useful!

backspace · 2019-12-09T21:37:31Z

ui/tests/acceptance/client-detail-test.js

+    assert.notOk(ClientDetail.eligibilityError.isPresent);
+  });
+
+  test('when navigating away from a client that as an error message to another client, the error is not shown', async function(assert) {


Tiny typo here, as ➡️ has?

backspace · 2019-12-09T21:37:48Z

ui/tests/acceptance/client-detail-test.js

+
+    await ClientDetail.visit({ id: node2.id });
+
+    assert.notOk(ClientDetail.eligibilityError.isPresent);


I love the thoroughness of these tests 😍

backspace · 2019-12-09T21:46:27Z

ui/app/templates/clients/client.hbs

+          <p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
+        </div>
+        <div class="column is-centered is-minimum">
+          <button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}}>Okay</button>


I see that there’s a clickable dismiss in the page object but I didn’t see any use of it in any tests, is it an oversight? I did try it out with this particular notification and it could be overkill to have assertions that dismissal works for every variation, but maybe the major one could have one? Or maybe that clickable can just be removed.

It's used a few times in the acceptance tests.

nomad/ui/tests/acceptance/client-detail-test.js

Lines 811 to 812 in 73c9ce4

await ClientDetail.stopDrainError.dismiss();

assert.notOk(ClientDetail.stopDrainError.isPresent);

Github may have auto-hid the diff and tricked you if you were trying to cmd+f for it.

oops, that’s entirely true, thanks 😯

joshklekamp

Looking good! I had a couple of questions and requests, but it is looking great!

joshklekamp · 2019-12-09T22:15:19Z

ui/app/styles/components/toggle.scss

@@ -0,0 +1,75 @@
+$size: 10px;


This should be 12px so that there is a 2px padding on the top, bottom, and outer edge of the 8px knob.

Tweaked some numbers:

joshklekamp · 2019-12-09T22:18:12Z

ui/app/styles/components/node-status-light.scss

@@ -1,4 +1,4 @@
-$size: 0.75em;
+$size: 1.3rem;


Can we add the icons to the status light as well? And possibly update the striped gray fill for initializing? https://share.goabstract.com/54443b43-f285-4873-8dd6-711acc63ad8c?sha=74bc51e24f125d7b56cab17f39ca674bc6c3b793

Yep, I plan on doing this in a follow up PR (but still before we release this without it) if that's alright.

joshklekamp · 2019-12-09T22:24:30Z

ui/app/templates/clients/client.hbs

+        onDrain=(action "drainNotify")
+        onError=(action "drainError")}}
+    </div>
+  </div>

  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">


Can we remove the Draining and Eligibility status from here now that the UI accounts for it via the eligibility toggle and the drain strategy component? Not sure this is the right spot to comment but wanted to make sure you saw this.

joshklekamp · 2019-12-09T22:26:54Z

ui/app/styles/core/title.scss

@@ -8,4 +8,8 @@
  &.with-headroom {
    margin-top: 1rem;
  }
+
+  &.with-subheading {
+    margin-bottom: 0.5rem;


Can we bump this to .85rem? The 16px I had before was probably a little too generous, but .85 gets us to 12px, which is still a standard spacing class for Structure.

johncowen · 2019-12-11T14:09:32Z

ui/app/utils/parse-duration.js

+  duration *= 1000000;
+
+  return duration;
+};


I was wondering if using something like https://github.com/jkroso/parse-duration might be a replacement for this? That's the first one I saw when I looked, but it seems well tested, zero dependency, small and well used. Might not be ideal, or you might have to use Nomad specific things that I'm not aware of, but thought I'd ask just incase.

Yeah, I will probably end up switching this out for Duration.js since Vault is already using that one.

I was determined to write this implementation without regex, but I'll swallow my pride and use a lib 😄

Sounds good to me!

Officially swapped.

backspace · 2020-01-16T16:06:34Z

Thanks for the followup changes, seems ready to merge to me 🥳

johncowen · 2020-01-16T16:12:20Z

+1 to that ^ 🥳

github-actions · 2023-01-19T02:17:48Z

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 requested review from backspace and a team December 7, 2019 08:00

backspace suggested changes Dec 9, 2019

View reviewed changes

joshklekamp reviewed Dec 9, 2019

View reviewed changes

johncowen reviewed Dec 11, 2019

View reviewed changes

DingoEatingFuzz added the theme/ui label Dec 13, 2019

DingoEatingFuzz force-pushed the f-ui-node-drain branch 2 times, most recently from 9f0e16d to 1eb9e51 Compare December 13, 2019 20:34

DingoEatingFuzz added 20 commits January 23, 2020 16:34

Mock the eligibility endpoint in mirage

a43d108

Implement eligibility toggling in the data layer

649be7f

Add isMigrating property to the allocation model

b22047e

Mock the drain endpoint

1cbbba0

drain and forceDrain adapter methods

4ddcd60

Update drain methods to properly wrap DrainSpec params

0b031f0

cancelDrain adapter method

4d05f53

Reformat the client detail page to use the two-row header design

3ad8987

Add tooltip to the eligibility control

09b62eb

Update the underlying node model when toggling eligibility in mirage

44904ba

Eligibility toggling behavior

8788d39

PopoverMenu component

de03d82

Update the dropdown styles to be more similar to button styles

b02f05f

Multiline modifier for tooltips

5098b55

More form styles as needed for the drain form

030b449

Initial layout of the drain options popover

0a8c27d

Let dropdowns assume their full width

7eb71ca

Add triggerClass support to the popover menu

d401a11

Factor out the drain popover and implement its behaviors

e47d255

Extract the duration parsing into a util

faffb83

DingoEatingFuzz added 25 commits January 23, 2020 16:34

Fill in the drain strategy ribbon values

ad8df16

Fill out the metrics and time since values in the drain summary

e886361

Drain complete notification

fabf956

Drain stop and update and notifications

96522e7

Modifiers to the two-step-button

504a7af

Make outline buttons have a solid white background

4bcd47c

Force drain button in the drain info box

6a0a77c

New toggle component

2e39c0a

Swap the eligiblity checkbox out for a toggle

595f3c9

Toggle bugs: focus and multiline alignment

a36290d

Switch drain popover checkboxes for toggles

3009ad3

Clear all notifications when resetting the controller

8f67e4b

Model the notification pattern as a page object component

da941d2

Update the client detail page object

b03e1e6

Integration tests for the toggle component

8dadd3d

PopoverMenu integration tests

413681e

Update existing tests

b11c82c

New test coverage for the drain capabilities

93eaaab

Stack the popover menu under the subnav

1d6799e

Use qunit-dom where applicable

4cc6702

Increase the size and spacing of the toggle component

66ea7c1

Remove superfluous information from the client details ribbon

deb2b31

Tweak vertical spacing of headings

40d6531

Update client detail test given change to the compositeStatus property

b9b6cda

Replace custom parse-duration implementation with an existing lib

4793dc9

DingoEatingFuzz force-pushed the f-ui-node-drain branch from 1eb9e51 to 4793dc9 Compare January 24, 2020 00:38

DingoEatingFuzz merged commit fea44b0 into master Jan 24, 2020

DingoEatingFuzz deleted the f-ui-node-drain branch January 24, 2020 00:48

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Invoke Node Drains #6819

UI: Invoke Node Drains #6819

DingoEatingFuzz commented Dec 7, 2019

backspace left a comment

backspace Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 13, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 13, 2019

backspace Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 9, 2019

backspace Dec 9, 2019

backspace Dec 9, 2019

backspace Dec 9, 2019

backspace Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

backspace Dec 13, 2019

joshklekamp left a comment

joshklekamp Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

joshklekamp Dec 9, 2019

DingoEatingFuzz Dec 13, 2019

joshklekamp Dec 9, 2019

joshklekamp Dec 9, 2019

johncowen Dec 11, 2019

DingoEatingFuzz Dec 13, 2019

johncowen Dec 13, 2019

DingoEatingFuzz Dec 13, 2019

backspace commented Jan 16, 2020

johncowen commented Jan 16, 2020

github-actions bot commented Jan 19, 2023


		await PopoverMenu.focusNext();

		assert.equal(document.activeElement, find('#mock-input-for-test'));


		await ClientDetail.visit({ id: node2.id });

		assert.notOk(ClientDetail.eligibilityError.isPresent);

	await ClientDetail.stopDrainError.dismiss();
	assert.notOk(ClientDetail.stopDrainError.isPresent);

UI: Invoke Node Drains #6819

UI: Invoke Node Drains #6819

Conversation

DingoEatingFuzz commented Dec 7, 2019

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

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

joshklekamp 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

backspace commented Jan 16, 2020

johncowen commented Jan 16, 2020

github-actions bot commented Jan 19, 2023