UI: add exec terminal #6697

backspace · 2019-11-13T22:46:08Z

This is but a prototype, but it works locally! At the moment it won’t work in Mirage and hence in the Netlify deployments, but maybe we can add a minimal toy faux backend for the socket.

Many things remain to be explored, like:

is it a problem that xterm.js does not support any legacy encoding and probably never will?
it has the command hard-coded as /bin/bash
you can only exec into a task, but maybe the equivalent to the CLI’s allocation- and task-choosing is helpful?
should there be a popout option? a drawer? etc etc

This is adapted from helpful posts in this thread: ember-cli/ember-cli#2508 Without this, the origin header wasn’t being rewritten so I was unable to open a websocket to the API running on a different port.

The communication between the socket and xterm.js terminal instance might better be extracted, I’m not sure whether the component integration test even makes sense. I originally tried an acceptance test, but that seemed worse.

henrikjohansen · 2019-11-15T09:49:34Z

Hard-coding the command as /bin/bash is problematic for many containers ... some only provide /bin/sh or similar.

backspace · 2019-11-15T14:57:47Z

Understood, @henrikjohansen, this is in very early stages and we plan to make it configurable, thanks.

# Conflicts: # ui/yarn.lock

This seems quite fiddly, hopefully not Too Much™ 😳

It’s not that much of a navbar even… just not sure about how much sharing is even worth it here 🤔

This approach… not sure about it: • how to test the contents of the terminal without storing on window? • passing the terminal in seems a bit weird but otherwise was considering some event interface, but that seems like overkill…?!?

This isn’t responsive to resize events etc yet but at least looks better.

This seems a bit strange but…? Maybe a component would make sense to wrap everything in but then would it be rerendering as you navigate deeper into the hierarchy…? Maybe there’s some breakage if you navigate between task groups and something closes that you opened yourself but since I don’t anticipate actually changing the route when you click a task group (vs a task, which will), it seems safe to ignore.

I haven’t started to include allocations in all of this yet so this is pretty unrealistic.

This is becoming quite sprawling but I believe having good acceptance tests will help me clean up when I’ve covered the myriad approaches.

I decided to keep this test…?

backspace · 2020-03-24T15:39:29Z

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

+    </div>
+    <div>
+      {{#if model.isRunning}}
+        <div class="two-step-button">


I considered having a duplication of this class called something like .like-two-step-button because this isn’t an actual two-step button but using this class made it align properly with the other buttons in this section. It seemed maybe unnecessary…?

Yeah, it's fine for now. I think the entire way we handle buttons in titles needs a larger rethink.

backspace · 2020-03-24T15:58:16Z

This is ready for review! I’ve extracted the nice-to-haves from that list above into issues and added links to them to the list.

DingoEatingFuzz · 2020-03-24T17:53:36Z

I think at least a couple of these scrollbar placeholders can be removed by setting overflow-y: auto. (yes I know there's a macos setting to make these go away, but in windows and linux environments they might still be present).

backspace · 2020-03-24T18:56:30Z

ah good catch, thank you! It is indeed a problem on Windows:

DingoEatingFuzz

This looks really great! Definitely good enough for the beta.

I had a few little things scattered throughout, but the only big thing that jumped out is the mock server. I'm not entirely sure what it's doing or why it was added.

But we can chat about that later, this is good to be merged now 😄

DingoEatingFuzz · 2020-03-24T19:55:19Z

ui/.ember-cli

@@ -5,6 +5,5 @@

    Setting `disableAnalytics` to true will prevent any data from being sent.
  */
-  "disableAnalytics": false,
-  "proxy": "http://127.0.0.1:4646"
+  "disableAnalytics": false


Is this to prevent the errors and socket pool saturation when nomad isn't running in the background? I have also ran into that, but I dunno if I'm ready to remove the proxy from here.

Thoughts on this?

eep sorry, I meant to explain this. Just as I was starting to prototype this, I found that I was completely unable to connect to a websocket through that proxy because the Origin didn’t match and the request was rejected by the API. The Javascript socket interface doesn’t give you any control over that for security reasons, so I switched to the technique described here because it gives you fine-grained control. The crux for this feature is this section where the origin gets rewritten in the proxy outside the browser. It’s a shame to lose this simplicity but it seems unavoidable :////////

Wow. TIL. Definitely a shame when things don't just work, but given the amount of oddities in our use of HTTP, I'm surprised the default proxy even got us this far.

ui/app/components/exec-terminal.js

DingoEatingFuzz · 2020-03-24T20:48:58Z

ui/app/components/exec/task-group-parent.js

+        return activeStateTaskNames;
+      },
+      []
+    );


I see what you mean now about how hairy this traversal gets.

It doesn't make it any better, and in fact I think this is technically (but insignificant at this scale), but this approach with more method chaining might be more readable?

const activeStateTaskNames = this.taskGroup.allocations .mapBy('states') .reduce((allStates, states) => allStates.concat(states), []) .filterBy('isActive') .filter(taskState => taskState.task.taskGroup.name === this.taskGroup.name) .mapBy('name');

yeah, I conceptually like reduce but I agree that this is Too Much. I tried replacing with your suggestion and found it was rejecting everything, I don’t understand it:

this.taskGroup.allocations .mapBy('states') .reduce((allStates, states) => allStates.concat(states), []) .mapBy('name') // ["states", "states", "states", "states", "states", "states"] this.taskGroup.allocations .mapBy('states') .reduce((allStates, states) => allStates.concat(states), []) .filterBy('isActive') // [undefined, undefined, undefined, undefined, undefined, undefined]

I don’t know what’s different about it but the collected and flattened objects don’t seem like the true task states…? I would like to do something like what you suggested though, so I opened this issue to help remember, thanks.

DingoEatingFuzz · 2020-03-24T20:55:05Z

ui/app/controllers/exec.js

+        this.terminal.writeln('');
+      }
+
+      this.terminal.writeln('Customize your command, then hit ‘return’ to run.');


Not super important but return is one of those OS specific languages at this point. Not sure what the best way tot distinguish enter vs. return or if it's even important enough to do.

I wondered about it and decided to follow what the design had but I don’t love the lack of general term 😐

DingoEatingFuzz · 2020-03-24T20:57:38Z

ui/app/routes/exec.js

+    return this.store
+      .findRecord('job', fullId, { reload: true })
+      .then(job => {
+        return RSVP.all([job.get('allocations'), job.get('evaluations')]).then(() => job);


Are evaluations used for exec?

hah they indeed are not, the perils of copypaste! I’ve removed it, thank you.

DingoEatingFuzz · 2020-03-24T21:16:21Z

ui/app/utils/classes/exec-socket-xterm-adapter.js

+function encodeString(string) {
+  let encoded = new TextEncoderLite('utf-8').encode(string);
+  return base64js.fromByteArray(encoded);
+}


🎉 We're gonna need to use this for log and fs streaming as well. We have emoji issues over there.

DingoEatingFuzz · 2020-03-24T21:18:16Z

ui/app/utils/open-exec-url.js

@@ -0,0 +1,3 @@
+export default function openExecUrl(url) {
+  window.open(url, '_blank', 'width=973,height=490,location=1');


I wonder if down the road we can do something fancier here by detecting native resolution or something.

DingoEatingFuzz · 2020-03-24T21:21:30Z

ui/public/images/icons/console.svg

+            </g>
+        </g>
+    </g>
+</svg>


Ember Inline SVG will do this at build time, but I think this should be run through svgo and saved that way. Just be mindful of preserving the viewBox.

Makes sense, done, thanks!

DingoEatingFuzz · 2020-03-24T21:27:21Z

ui/server/index.js

+
+  mocks.forEach(route => route(app, options));
+  proxies.forEach(route => route(app, options));
+};


You'll have to walk me through what's going on here. I'm assuming this is all in an effort to mock web sockets?

yeah, this is boilerplate that I think just replicates what was previous set up in .ember-cli. I created #7465 so I can revisit this and maybe remove some parts. For instance, I suspect mocks are superfluous.

DingoEatingFuzz · 2020-03-24T21:31:14Z

ui/tests/unit/utils/generate-exec-url-test.js

+  test('it generates an exec job URL', function(assert) {
+    generateExecUrl(this.router, { job: 'job-name' });
+
+    assert.ok(this.urlForSpy.calledWith('exec', 'job-name', emptyOptions));


Cool use of a spy.

The perils of copypaste!

I used this: svgo public/images/icons/console.svg --disable=removeViewBox

github-actions · 2023-01-14T02:13:06Z

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.

backspace added 5 commits November 13, 2019 14:59

Add proxy that properly handles websockets

7256769

This is adapted from helpful posts in this thread: ember-cli/ember-cli#2508 Without this, the origin header wasn’t being rewritten so I was unable to open a websocket to the API running on a different port.

Add xterm.js

11b0da4

Add comment about proxy being preliminary

a6aed62

Add prototype task-attached exec terminal

caccb4b

The communication between the socket and xterm.js terminal instance might better be extracted, I’m not sure whether the component integration test even makes sense. I originally tried an acceptance test, but that seemed worse.

Fix lint errors

3f9fcb4

backspace added type/enhancement theme/ui labels Nov 13, 2019

Fix encoding to handle emoji 🥳

9bef4ad

backspace added 20 commits January 27, 2020 12:43

Merge branch 'master' into f-ui/exec

dd4ecf9

# Conflicts: # ui/yarn.lock

Add preliminary exec popup sidebar

1b92691

Add show/hide of task group task list

55ef273

Add preliminary styling

dce93dd

This seems quite fiddly, hopefully not Too Much™ 😳

Change icon selector to have correct scope

a0a8f88

Correct colour for exit icon

4bc5838

Add preliminary header with job details

16160e1

Change region/namespace to show conditionally

43370ea

Add styling for popup navbar

922ebd9

It’s not that much of a navbar even… just not sure about how much sharing is even worth it here 🤔

Remove new-window target for documentation for now

0eaf145

Add terminal with task selection message

1710751

This approach… not sure about it: • how to test the contents of the terminal without storing on window? • passing the terminal in seems a bit weird but otherwise was considering some event interface, but that seems like overkill…?!?

Remove integration test for now

61c09b6

Add auto-fit for terminal

75c2c57

This isn’t responsive to resize events etc yet but at least looks better.

Add width for exec sidebar

6bd195e

Add padding around terminal element

0256014

Change task group to be closed by default

8747919

Change task items to links

94e50b2

Add first step toward editable command output

e6c469a

I haven’t started to include allocations in all of this yet so this is pretty unrealistic.

Add handling for assigning/specifying allocations

20b7b14

This is becoming quite sprawling but I believe having good acceptance tests will help me clean up when I’ve covered the myriad approaches.

backspace added 5 commits March 24, 2020 10:23

Remove outdated comment

d60076f

I decided to keep this test…?

Remove unused variable

41a8046

Remove duplication of exec session command

e1d5918

Add link to issue for remembering command changes

7c486fa

Remove superfluous CSS comments

9e8b5da

backspace commented Mar 24, 2020

View reviewed changes

backspace added 4 commits March 24, 2020 10:40

Remove extraneous whitespace

53f2972

Replace TODO with issue link

f98619d

Remove mock server comments

754df0a

Add explanation of key event simulation

14b59af

backspace marked this pull request as ready for review March 24, 2020 15:58

backspace requested review from DingoEatingFuzz and a team March 24, 2020 15:58

Change scrollbars to not be visible by default

c39c801

DingoEatingFuzz approved these changes Mar 24, 2020

View reviewed changes

backspace added 7 commits March 24, 2020 16:47

Replace custom resize-handling with mixin

984195b

Remove unneeded data-fetching

056f1f6

The perils of copypaste!

Change component to be multi-line for readability

36ad190

Remove unused import

a0335af

Extract xterm backspacing string for clarity

4744ddf

Replace console SVG with svgo-processed version

8a989c3

I used this: svgo public/images/icons/console.svg --disable=removeViewBox

Change name of SVG circle for active task

415c982

backspace merged commit 27df92a into master Mar 24, 2020

backspace deleted the f-ui/exec branch March 24, 2020 23:22

DingoEatingFuzz mentioned this pull request Mar 30, 2020

UI: decode unicode properly in log page #7470

Merged

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: add exec terminal #6697

UI: add exec terminal #6697

backspace commented Nov 13, 2019

henrikjohansen commented Nov 15, 2019

backspace commented Nov 15, 2019

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

backspace commented Mar 24, 2020

DingoEatingFuzz commented Mar 24, 2020

backspace commented Mar 24, 2020

DingoEatingFuzz left a comment

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020 •

edited

Loading

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

backspace Mar 24, 2020

DingoEatingFuzz Mar 24, 2020

github-actions bot commented Jan 14, 2023

		@@ -0,0 +1,3 @@
		export default function openExecUrl(url) {
		window.open(url, '_blank', 'width=973,height=490,location=1');

UI: add exec terminal #6697

UI: add exec terminal #6697

Conversation

backspace commented Nov 13, 2019

henrikjohansen commented Nov 15, 2019

backspace commented Nov 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

backspace commented Mar 24, 2020

DingoEatingFuzz commented Mar 24, 2020

backspace commented Mar 24, 2020

DingoEatingFuzz 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

backspace Mar 24, 2020 • edited Loading

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

github-actions bot commented Jan 14, 2023

backspace Mar 24, 2020 •

edited

Loading