UI: Client and Server Monitor #8177

DingoEatingFuzz · 2020-06-16T20:03:43Z

This adds nomad monitor support to the UI.

As a consequence of adding the Servers > Server > Monitor route, the server detail page had to be redesigned to accommodate a subnav. I don't think anyone will miss the old design.

Along with these changes come one bug fix and one new feature that affects all the places where we stream output like this (task logs and file system viewer).

Bug Fix: The output window will actually follow your output now. It used to be that if you scrolled to the bottom of the output window and more output came in, sometimes it followed but most of the time it did not. This should always work now.
New Feature: Using cmd+a or ctrl+a to select all will now only select the text within the output window. This makes it much easier to copy logs and share them around.

These are based on the source code for selectChoose. I would have liked to have used selectChoose, but the implementation has two await settled()s in it which prevented me from writing the tests I needed to write. These new extension helpers separate selectChoose into two pieces so logic can be placed between the two async actions.

… pages

github-actions · 2020-06-16T20:08:58Z

Ember Asset Size action

As of 34e8e1f

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+24.3 kB	+2.26 kB
nomad-ui.css	+361 B	+48 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-16T20:26:56Z

Ember Test Audit comparison

	master	`34e8e1f`	change
passes	1354	1391	+37
failures	0	0	0
flaky	0	1	+1
duration	5m 21s 642ms	5m 26s 505ms	+04s 863ms

rkettelerij · 2020-06-16T21:09:33Z

Nice feature! 🥇

backspace

I ran this locally, looks great. I didn’t exercise the ACL-checking, though. I appreciate the tests 😍

I left some minor comments, I guess requestFrame is an important one unless I’m misunderstanding.

backspace · 2020-06-16T21:01:09Z

ui/app/abilities/agent.js

+
+  @computed('token.selfTokenPolicies.[]')
+  get policiesIncludeAgentReadOrWrite() {
+    const policies = (this.get('token.selfTokenPolicies') || [])


Should this also use get instead of this.get? I’m semi-surprised it doesn’t warn about this but maybe that’s because AbstractAbility is already @classic. (ETA I have since found it’s because I didn’t include the ESLint rules 😞)

backspace · 2020-06-16T21:24:36Z

ui/tests/utils/ember-power-select-extensions.js

@@ -0,0 +1,82 @@
+import { click, settled } from '@ember/test-helpers';
+// TODO: Contribute these helpers back upstream once we are on the latest version of
+// ember-power-select (4.x)


I hope they accept! It always saddens me to run into this kind of thing.

backspace · 2020-06-16T21:26:41Z

ui/tests/pages/clients/monitor.js

+    const contentId = await selectOpen('[data-test-level-switcher]');
+    run.later(run, run.cancelTimers, 500);
+    await selectOpenChoose(contentId, level);
+  },


Nice abstraction 🤩

backspace · 2020-06-16T21:34:45Z

ui/tests/integration/streaming-file-test.js

+        .toString()
+        .trim(),
+      find('[data-test-output]').textContent.trim()
+    );


I love it!!! Great test

backspace · 2020-06-16T21:53:55Z

ui/app/templates/allocations/allocation/index.hbs

@@ -1,5 +1,5 @@
 {{title "Allocation " model.name}}
-{{allocation-subnav allocation=model}}
+<AllocationSubnav @allocation={{model}} />


backspace · 2020-06-16T21:55:52Z

ui/app/controllers/servers/server/monitor.js

+
+@classic
+export default class ServerMonitorController extends Controller {
+  queryParams = [{ level: 'level' }];


It doesn’t really matter but I think this could be ['level'], the object format I think is only needed when relabeling a query parameter? Also maybe this doesn’t need to be @classic.

backspace · 2020-06-17T12:38:24Z

ui/app/controllers/clients/client/monitor.js

+import Controller from '@ember/controller';
+import classic from 'ember-classic-decorator';
+
+@classic


I think this can be de-@classic-ed 🤓

backspace · 2020-06-17T12:42:08Z

ui/app/components/streaming-file.js

@@ -41,8 +50,42 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
    }
  }

+  scrollHandler() {
+    const cli = this.element;
+    window.requestAnimationFrame(() => {


Should this be wrapped in an if to check on the value of requestFrame? It looks like the value of that field is updated but never checked.

Haaaaaaaa yep. Thank you for catching this.

backspace · 2020-06-17T12:47:57Z

ui/app/components/agent-monitor.js

+    if (currentTail) {
+      currentTail += `\n...changing log level to ${this.level}...\n\n`;
+    }
+    this.set(


I believe that using this.set means this needs to be @classic. I see now that I failed to follow the part of the instructions that would cause this to be a linting error, so I’m sorry about that, I’ll open a PR 😳

DingoEatingFuzz · 2020-06-17T22:08:10Z

Thanks for the review @backspace! Everything should be addressed now. I should also read more about the classic decorator so I actually know when I am and am not supposed to use it.

backspace

Thanks for making the changes! The documentation lists what @classic is for but also this PR will help us too when it’s ready.

analytically · 2020-07-11T02:24:36Z

Does this work with the ACL subsystem disabled?

backspace · 2020-07-13T14:34:47Z

It does, @analytically! I just tried it locally to confirm. The bypassAuthorization property is what causes permissions to be ignored if ACLs aren’t turned on. But let us know if you have any trouble? 💞

github-actions · 2022-12-29T02:16:37Z

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 19 commits June 16, 2020 10:23

Create new monitor route for clients

2eceffa

Monitor component and query param interaction

cc8aed8

Implement the log streaming portion of the AgentMonitor component

9e59488

Reimplement synchronizeScrollPosition in a way that actually works

f02beee

Refactor AgentMonitor levels handling to be simpler

0a4cde3

Inline-block the buttons to remove weird text-flow spacing

47969c4

Preserve the log when switching log levels on monitor

88e7e7e

Test coverage for the AgentMonitor component

f896a62

Test coverage for the client monitor page

d0a0ffd

Ability for agent:read

a4a8c9e

New component version of the forbidden-message partial

c3b4999

Show a helpful forbidden message when monitor access is not authorized

a0fce03

Refactor the servers/server pages to match the subnav style of nested…

9e5cd53

… pages

Add nested monitor route to servers/server

9294a7a

Redesign the server detail page to be inline with everything else

7185757

Test coverage for new features of the server detail page

53027ba

Server monitor page

a0c6cc2

Select all shortcut support for the streaming file component

5bb3c43

DingoEatingFuzz added the theme/ui label Jun 16, 2020

DingoEatingFuzz added this to the 0.12.0 milestone Jun 16, 2020

DingoEatingFuzz requested review from backspace and a team June 16, 2020 20:03

backspace suggested changes Jun 17, 2020

View reviewed changes

backspace mentioned this pull request Jun 17, 2020

UI: Add linting for classic decorator #8182

Merged

DingoEatingFuzz added 2 commits June 17, 2020 14:50

Guard the request animation frame with the existing requestFrame flag

619aea8

Code review feedback

34e8e1f

DingoEatingFuzz requested a review from backspace June 17, 2020 22:08

backspace approved these changes Jun 18, 2020

View reviewed changes

DingoEatingFuzz merged commit 50cc295 into master Jun 18, 2020

DingoEatingFuzz deleted the f-ui/monitor branch June 18, 2020 16:07

github-actions bot locked as resolved and limited conversation to collaborators Dec 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Client and Server Monitor #8177

UI: Client and Server Monitor #8177

DingoEatingFuzz commented Jun 16, 2020

github-actions bot commented Jun 16, 2020 •

edited

Loading

github-actions bot commented Jun 16, 2020 •

edited

Loading

rkettelerij commented Jun 16, 2020

backspace left a comment

backspace Jun 16, 2020

backspace Jun 16, 2020

backspace Jun 16, 2020

backspace Jun 16, 2020

backspace Jun 16, 2020

backspace Jun 16, 2020

backspace Jun 17, 2020

backspace Jun 17, 2020

DingoEatingFuzz Jun 17, 2020

backspace Jun 17, 2020

DingoEatingFuzz commented Jun 17, 2020

backspace left a comment

analytically commented Jul 11, 2020

backspace commented Jul 13, 2020

github-actions bot commented Dec 29, 2022

UI: Client and Server Monitor #8177

UI: Client and Server Monitor #8177

Conversation

DingoEatingFuzz commented Jun 16, 2020

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

Ember Asset Size action

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

Ember Test Audit comparison

rkettelerij commented Jun 16, 2020

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

DingoEatingFuzz commented Jun 17, 2020

backspace left a comment

Choose a reason for hiding this comment

analytically commented Jul 11, 2020

backspace commented Jul 13, 2020

github-actions bot commented Dec 29, 2022

github-actions bot commented Jun 16, 2020 •

edited

Loading

github-actions bot commented Jun 16, 2020 •

edited

Loading