VNC in new window #425

yfrimanm · 2020-06-25T15:36:59Z

In order to add an option to open the VNC console in a new window, we’ll add a new button ‘Open Console in new window’ and allow that to take action from the Admin console as well as from the Developer console. we'll also show how the detached window looks like.

@openshift/team-ux-leads

@openshift/team-ux-review (Administrator perspective)
@openshift/team-devconsole-ux (Developer perspective)

lizsurette

Looking great! I did add a link to an early design idea we had on exposing this as an option as well as "Expand to full screen". Just in case it's any sort of inspiration :)

lizsurette · 2020-06-25T18:29:42Z

designs/virtualization/4.x/vnc-in-new-window/vnc-in-new-window.md

+
+In order to add an option to open the VNC console in a new window, we’ll add a new button ‘Open Console in new window’ to the existing ‘VNC console’ dropdown with the ‘Disconnect before switching’ checkbox option and ‘Send key’ button.
+
+![oprn from the new button](img/Open-console-1c.png)


There were some early ideas around some text and iconography (long ago!!) for expanding this to a full window and opening in a new window/tab that I wanted to share incase it helps:
https://docs.google.com/document/d/1Fh2eb9TD0aq9JulVbLlss2ucdqYzx_uqTaThse_fcgE/edit#heading=h.3m45k77pubys

One thing I think this older design does is save some vertical space.

Oh wow, blast from the past. 😄

I was going to suggest the same, maybe placing this button to the left of the Send key button to save some vertical space (should Send key be a dropdown by the way?). An external link icon may also be good here since a new tab/window opens when clicked. That old design was inspired by the actions in the Logs and Terminal tabs you can see in a Pod Details page today.

Thanks @lizsurette and @andybraren.
The original design (as mentioned at the 'Note' in the google doc https://docs.google.com/document/d/1YFJDCWJj8NdodFhtXqq7KbhXz9EhHeBg9xyfybA0mVs/edit#heading=h.4kmd69x7yzsn) had all the buttons in one row to save some vertical space, but due to limitations of the buttons being part of the console component, we had to place the ‘Open Console in new window’ button in a separate row.
But now that I see it was already done in the past, maybe we can change it back. @glekner WDYT?

I don't think that part of the old design doc was ever implemented, but agreed, I'd be interested to hear if the component itself could be updated with the new button. Is the VNC Console component used anywhere else in the OpenShift UI? Maybe this is the only place? 🤷‍♂️

I don't think that part of the old design doc was ever implemented, but agreed, I'd be interested to hear if the component itself could be updated with the new button. Is the VNC Console component used anywhere else in the OpenShift UI? Maybe this is the only place? 🤷‍♂️

@yaacov any idea?

Thanks for that old link @lizsurette I totally forgot about that :)
I did confirm with the OCP stakeholders today that we don't have this surfacing anywhere else so it would be great to move this over to a PF4 approach. @glekner WDYT?

Its doable, but it should be a different PR.

+1 from me to move to PF4

Its doable, but it should be a different PR.

@glekner Yes, we discussed off-line that #5593 will use current component, and we will continue to make it closer to the design in follow-up PRs.

designs/virtualization/4.x/vnc-in-new-window/vnc-in-new-window.md

yaacov · 2020-06-30T14:12:57Z

@matthewcarleton @yfrimanm @glekner hi,

We discussed some topics in Slack:

a - opening the console in a new tab instead of a new window.
b - adding hint about how to drag the new tab into a new window
c - adding hint about using the cli to open a new VNC window.

@yfrimanm can you see how you can update the design to match this discussed topics ?

yaacov · 2020-06-30T14:21:54Z

@yfrimanm in the old design:

https://docs.google.com/document/d/1Fh2eb9TD0aq9JulVbLlss2ucdqYzx_uqTaThse_fcgE/edit#heading=h.3m45k77pubys

we have a help link "Remote connection settings" that explain how to open spice using the CLI, we can do the same here educating users how to install and use virtclt and virt-viewer to open the VNC console.

yaacov · 2020-07-01T10:58:38Z

designs/virtualization/4.x/vnc-in-new-window/vnc-in-new-window.md

+When users click the ‘Open Console’ button, they will get a new tab that represents another OS (no toolbar) with a dismissble inline info notification about the consoles tab features.
+They will be able to toggle between the 2 tabs: their original OpenShift cluster and the other OS tab they have opened.
+
+![new tab](img/Detached3-new-tab.png)


This image include a long info text, can you add the text as text here (and not just as an image) ?

@yaacov here it is and also added to the MD file

Consoles tab
The Consoles tab allows the user to connect an in-browser or desktop-based Graphical and/or Serial console to the virtual machine.
You can change the console type using the dropdown selector. The Graphical VNC console is selected by default and will open in a separate tab of the console view when clicking the ‘Open console’ button link. You can drag the new tab into a new browser window.
The Expand action makes the console viewport fill the current window’s full width and height.

matthewcarleton · 2020-07-02T16:06:04Z

designs/virtualization/4.x/vnc-in-new-window/vnc-in-new-window.md

@@ -0,0 +1,47 @@
+---
+parent: Virtualization
+version: 4.x


I know this work is being implemented now. Can we confirm it isn't getting into 4.6?

matthewcarleton

just some small tweaks and then this should be GTG!

designs/virtualization/4.x/vnc-in-new-window/vnc-in-new-window.md

matthewcarleton · 2020-07-08T19:06:29Z

designs/virtualization/4.6/vnc-in-new-window/vnc-in-new-window.md

+
+![open from the kebab menu](img/Open-console2.png)
+
+## In the Developer console


I've reached out to @beaumorley @serenamarie125 about how we want to deal with the dev side of this. We may want to push it out to another release or put the design under the dev console designs.

ok we are ok I've confirmed that this is already pulled into the dev perspective.
I did noticed though that the icon for a new window/tab didn't get added so we could file a bug for that.

matthewcarleton

Nice work!

lizsurette

LGTM!

beanh66

LGTM

pr for vnc in new window

95f3c22

lizsurette reviewed Jun 25, 2020

View reviewed changes

yfrimanm added 4 commits June 28, 2020 10:59

shorter button text and relocation

aaac3c6

updates

e43738a

updates

a0a156a

reorder menu items

f29d604

yaacov mentioned this pull request Jun 29, 2020

open the VNC console in a new window openshift/console#5593

Merged

changing from new window to new tab

5257174

yaacov reviewed Jul 1, 2020

View reviewed changes

yfrimanm added 3 commits July 1, 2020 15:57

adding notification text message to md file

aba065b

adding open vnc in new window

c4dfa48

text nits in the notification

bd469a4

matthewcarleton reviewed Jul 2, 2020

View reviewed changes

yfrimanm added 2 commits July 5, 2020 08:21

text nits in md

11f6a05

moved vnc to 4.6

3345497

matthewcarleton reviewed Jul 8, 2020

View reviewed changes

matthewcarleton approved these changes Jul 8, 2020

View reviewed changes

lizsurette approved these changes Jul 8, 2020

View reviewed changes

beanh66 approved these changes Jul 9, 2020

View reviewed changes

beanh66 merged commit 235b97f into openshift:master Jul 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VNC in new window #425

VNC in new window #425

yfrimanm commented Jun 25, 2020

lizsurette left a comment

lizsurette Jun 25, 2020

andybraren Jun 25, 2020

yfrimanm Jun 28, 2020 •

edited

andybraren Jun 28, 2020

yfrimanm Jun 29, 2020

matthewcarleton Jun 29, 2020

glekner Jun 29, 2020

yaacov Jun 29, 2020

yaacov Jun 29, 2020

yaacov commented Jun 30, 2020 •

edited

yaacov commented Jun 30, 2020

yaacov Jul 1, 2020

yfrimanm Jul 1, 2020 •

edited

matthewcarleton Jul 2, 2020

matthewcarleton left a comment

matthewcarleton Jul 8, 2020

matthewcarleton Jul 8, 2020

matthewcarleton left a comment •

edited

lizsurette left a comment

beanh66 left a comment


		In order to add an option to open the VNC console in a new window, we’ll add a new button ‘Open Console in new window’ to the existing ‘VNC console’ dropdown with the ‘Disconnect before switching’ checkbox option and ‘Send key’ button.

		![oprn from the new button](img/Open-console-1c.png)


		![open from the kebab menu](img/Open-console2.png)

		## In the Developer console

VNC in new window #425

VNC in new window #425

Conversation

yfrimanm commented Jun 25, 2020

lizsurette left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yfrimanm Jun 28, 2020 • edited

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

yaacov commented Jun 30, 2020 • edited

yaacov commented Jun 30, 2020

Choose a reason for hiding this comment

yfrimanm Jul 1, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthewcarleton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthewcarleton left a comment • edited

Choose a reason for hiding this comment

lizsurette left a comment

Choose a reason for hiding this comment

beanh66 left a comment

Choose a reason for hiding this comment

yfrimanm Jun 28, 2020 •

edited

yaacov commented Jun 30, 2020 •

edited

yfrimanm Jul 1, 2020 •

edited

matthewcarleton left a comment •

edited