public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2026-11-15 05:16:16 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
harvester-ui-extension/pkg/harvester/components/novnc/NovncIcon.vue
T
Marcelo Fukumoto f3ca9e4c44 feat: redesign the VNC console (#1233) 
* chore: bump @rancher/shell to 3.0.15-rc.1 for the Rc components

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: rebuild the VNC console toolbar with Rc components

Name and namespace, a connection status pill with its own menu, Rc tertiary buttons with the design's icons, and the keyboard hint under the screen. noVNC's grey backdrop is gone and the screen keeps a thin frame that turns into the keyboard-focus ring.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: move VNC shortcut keys into one Rc dropdown menu

Saved shortcuts, Ctrl and Alt toggles that apply to the next key, Print Screen, F1 to F12 and the way into custom shortcuts now share the Shortcut keys menu, replacing the cascading popover and the separate custom keys menu. Saved shortcuts can carry a name; the old list format still reads. Focus goes back to the screen after a key is sent.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: replace the VNC settings popover with the View options panel

Automatic or Manual scaling on the shell ButtonGroup, a zoom slider with step buttons, JPEG quality and compression with their trade-off spelled out, and Reset to defaults. The screen now scales to fit by default, inside its focus ring. View only is gone with the old panel.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: confirm Ctrl+Alt+Del and Soft reboot in an RcModal

Small RcModal with the VM's name in the title and a destructive primary button, coloured the way the shell's own dialogs do it. Esc and the background now close it too, and the keyboard goes back to the screen afterwards.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: rebuild VNC custom shortcuts as an RcModal with a key recorder

Record a combination by pressing it, name it, and see the saved ones as RcTags with a delete button each. Every change is saved straight away. Keys keep the format older versions read; names live in their own preference so those versions keep working.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: show VNC connecting and connection failures as console overlays

A spinner with the VM's name while connecting (and the attempt count while retrying), and a card with an icon badge, title, explanation and Rc buttons when the console cannot be used: in use, unavailable, connection lost or failed. Take over confirms in an RcModal.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: float a compact VNC bar over the screen in full screen

Name, connection status and Exit full screen in a floating bar instead of the toolbar, with the keyboard on the screen. Take over leaves full screen first, since its modal opens outside the console.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: VNC console review fixes

Show a not-running state instead of connecting forever when the VM has no instance, and find the VM by its uid so the name shows. Keep a failed shortcut save from looking saved. Offer Take over only when another session holds the console, and Reconnect now while retrying. Wrap the toolbar on narrow windows, keep the screen black so overlays read in the light theme, keep the destructive button red on focus, announce only the status label, let Esc and Tab leave the key recorder, release held modifiers when the menu closes, and let Ctrl+T and Ctrl+N through in full screen.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: use the redrawn VNC console icons

Power, maximize, minimize and wifi-off on the design's 24px grid, the 20px connecting spinner, and a status card badge that stays dark on the black screen. The screen is only black while there is no live picture.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: run standalone Harvester Prime with the SUSE brand

Standalone Harvester reports ui-brand=harvester, which has no stylesheet, so Prime only got a green primary on top of the default palette: 33 of the 36 SUSE theme tokens differed from Rancher Prime (blue tertiary buttons, another green, dark text on primary buttons, no SUSE font). On the Prime flavor the brand is now switched to suse in this browser, and all 36 match Rancher Prime in light and dark.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: name recorded VNC shortcut letters after the key pressed

macOS Option turns letters into symbols (Option+G gives ©), so a recorded Alt+Cmd+G was labelled and sent as ©. Letter keys now take their name from the key code when recording, labelling and sending, which also fixes shortcuts saved before.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: give the VNC shortcut menu chips the secondary button colours

The key chips, held modifiers and the manage item used the link colour, so they stayed blue under the SUSE brand. They now take RcButton's secondary, active and tertiary tokens and follow the brand like the toolbar buttons.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: VNC console review fixes, round three

Wait for the instance to run before connecting and retry refusals right after a start, keep Reconnect now counting retries, stop key sending once the VM is down, only rename option-mangled letters (Alt without Ctrl, dead keys) so other layouts keep their keys, give the keyboard back to View when its panel closes, add a shortcut with Enter, keep long shortcut names to two lines, only replace Harvester's own brand and refresh the favicon, and stop relying on stylesheet order for the spinner and danger button.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: change the VNC menu keys with the held modifiers

The keys under Hold modifiers follow what is held, so the menu sends what the old cascading menu did: Ctrl+N/T/W/Y with Ctrl, Ctrl+Alt+Del with Ctrl and Alt (through the same confirmation as its button), and Print Screen and F1-F12 alone or with Alt. Ctrl+Alt+F1-F12 stays for switching Linux consoles. The recorder points to the menu for browser-reserved combinations.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: bring View only back to the VNC View menu

The View menu has a View only switch again, as the old settings panel did: the screen stays live but no mouse or keyboard input reaches the VM, the status reads Connected (view only), the key menus are disabled and the hint says how to turn it off. The design does not have it yet.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: move View only into the VNC connection menu

View only is how this session uses the connection, so it sits in the Connected menu (also in full screen) as a checkbox item, and the View menu is only about how the screen is shown.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: keep the VNC console's controls usable around the connection

Full screen goes over the whole page and its bar gets Shortcut keys and Ctrl+Alt+Del, so menus and the confirmation show there too and Take over no longer has to leave full screen. Soft reboot works whatever the console's state, since it does not go through it. The Shortcut keys menu always opens: while keys cannot be sent it says why and disables only the keys, so custom shortcuts can still be managed. The focus ring now sits 2px off the screen so it shows against a dark framebuffer edge in the light theme.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: disable the VNC console's input controls while View only is on

View only sends nothing to the VM, so Shortcut keys (managing shortcuts included), Ctrl+Alt+Del and Soft reboot are disabled instead of the menu opening to explain why. The menu still opens while disconnected, as there are shortcuts to manage. The hint under the screen takes the new wording, read raw since t() would escape its quotes.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: fill the window with the VNC console in full screen

The screen takes the whole window, with no padding, ring or inset, and black around a picture of another shape. It always fits in full screen, whatever View mode is saved, which comes back on leaving. The bar floats over the screen, slightly transparent until it is hovered, holds the keyboard focus or has a menu open, and no longer has Ctrl+Alt+Del, which stays in the Shortcut keys menu.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: show the mouse over the VNC console

noVNC hides the mouse over the screen until the guest sends a pointer image, and a text console or a guest that draws its own pointer never does. Show the system pointer unless one arrives, so it can be seen in the window and in full screen. A guest that sends an image keeps it.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: close the VNC console's menus on a click on the screen in Firefox

Firefox delivers the click to the canvas, where noVNC stops it, so an open menu never saw a click outside it. Full screen makes this matter, with little else left to click. noVNC does nothing else with a click, so let it through.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: make View only a toggle in the VNC console toolbar

View only moves from the Connected menu to the shared ToggleSwitch between the connection status and Shortcut keys, in the toolbar and in the full screen bar, so its state is always in view and the status no longer has to repeat it. Turning it off hands the keyboard back to the console. The full screen bar no longer gets only half the window from its left: 50%, which would have squeezed its buttons with the wider content; it wraps when it really does not fit.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: leave View only out of the VNC console's full screen bar

View only is set from the toolbar. A session that enters full screen with it on stays that way, with Shortcut keys disabled, and changes it after leaving.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* feat: make View only a checkbox in the VNC console toolbar

It takes the shared Checkbox instead of ToggleSwitch, in the same place between the connection status and Shortcut keys. Clicking its label now turns it off as well as on.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: save the VNC view settings only when the user changes them

The previous console wrote its defaults to localStorage the first time it
opened, so Manual zoom at 100% looked like a choice and the new Automatic
default never reached anyone who had used the console. Settings now live
under a new key and are saved only when the user changes them.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep View only on when the VNC View panel resets its settings

View only moved to the toolbar, but Reset to defaults in the View panel
still set it back to off, so the screen started sending the mouse and
keyboard to the VM again. The reset now leaves View only as it is.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: give the VNC quality and compression sliders their full height

The slider rule's flex: 1 is meant for the zoom row. In the quality and
compression sections, which are columns, it set the height instead and
left those two sliders 4px tall, so a click on the visible thumb missed.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: reach the VNC shortcut keys from the keyboard after holding a modifier

RcDropdown collects its items when the menu opens, and holding Ctrl or
Alt swaps the keys below the toggles while it is open, so the arrow keys
stopped at Alt. The menu now collects its items again on each key press,
as RcDropdown does for its submenus.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: show a failed custom shortcut save inside the dialog

The dialog only reported a failed save with a growl, and the console
page's layout has no growls, so a delete or an add that could not be
saved changed nothing and said nothing. The error now shows as an alert
in the dialog until the next change or until it closes.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep the focus in the custom shortcuts dialog after adding or deleting

The delete buttons and Add shortcut were disabled while a change saved,
and disabling the button that was just pressed dropped the keyboard's
focus to the page. They now stay enabled, and a change made while one saves is
ignored. After a delete the next row's button takes the focus, or the last
one's, and after an add, or once the list is empty, the recorder does.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: record a modifier pressed on its own as a custom VNC shortcut

The recorder held every modifier for the key that ends the combination,
so the Windows key on its own could not be saved any more, while the old
dialog could. Modifiers released before any other key are now the
combination, once the last of them is released.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: stop the custom shortcut form saying a new shortcut is already saved

The list shows a new shortcut while it saves, and the form kept it until
the save came back, so every add showed "This key combination is already
saved." as an alert for as long as the save took. The form now empties
as soon as Add shortcut is pressed, and the shortcut goes back in it if
the save fails, unless the next one was started meanwhile.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: make the VNC Reconnect button an RcButton

The plain button took the global 40px button height inside the 32px
Disconnected pill, so its focus ring stuck out above and below the pill.
As a small ghost RcButton it is 24px tall and its ring stays inside.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: carry View only over from the previous VNC console

The new storage key dropped a View only that someone turned on in the
previous console, so their mouse and keyboard reached the VM again
after the upgrade. View only was off unless the user turned it on, so
it is read from the previous key until this console saves its own
settings; the display settings still start fresh.

The comment on the key now says the settings are written once the user
changes one, rather than only the ones changed.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: warn that a VNC soft reboot loses unsaved work

The soft reboot confirmation said the console disconnects while the VM
restarts and reconnects when it is back, which it does not: a soft
reboot restarts the guest in the same VM instance and pod, so the
console stays connected. It also dropped the previous dialog's warning
that unsaved work is lost, which is back.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

---------

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
2026-11-13 04:43:04 +01:00

74 lines
6.7 KiB
Vue
Raw Permalink Blame History

<script>
// Icons the console needs that RcIcon does not have yet. Paths come from the VNC console design, on
// its 24px grid.
const ICONS = {
power: {
viewBox: '0 0 24 24',
paths: [
'M11.1253 12V2C11.1253 1.51675 11.517 1.125 12.0003 1.125C12.4835 1.125 12.8753 1.51675 12.8753 2V12C12.8753 12.4832 12.4835 12.875 12.0003 12.875C11.517 12.875 11.1253 12.4832 11.1253 12Z',
'M17.7812 5.98086C18.123 5.63921 18.6779 5.64006 19.0195 5.98184C20.398 7.361 21.337 9.11746 21.7187 11.0297C22.1004 12.9421 21.9076 14.9251 21.1641 16.7279C20.4204 18.5309 19.1592 20.0733 17.54 21.1605C15.921 22.2477 14.0166 22.8311 12.0664 22.8373C10.1161 22.8434 8.20695 22.2728 6.58105 21.1957C4.95519 20.1186 3.68464 18.5838 2.92968 16.7855C2.1748 14.9875 1.96928 13.006 2.33886 11.0912C2.70859 9.17628 3.63766 7.41274 5.00781 6.0248C5.3473 5.68128 5.90132 5.67771 6.24511 6.01699C6.58896 6.35643 6.59224 6.91038 6.25292 7.2543C5.12564 8.39621 4.36185 9.84678 4.05761 11.4223C3.75341 12.9978 3.92278 14.6283 4.54394 16.1078C5.16512 17.5874 6.21008 18.8505 7.54785 19.7367C8.88557 20.6229 10.4559 21.0923 12.0605 21.0873C13.6651 21.0823 15.2323 20.6028 16.5644 19.7084C17.8966 18.8138 18.934 17.5443 19.5459 16.0609C20.1578 14.5775 20.317 12.9461 20.0029 11.3725C19.6888 9.79885 18.9157 8.35303 17.7812 7.21816C17.4399 6.87639 17.4396 6.3224 17.7812 5.98086Z',
],
},
maximize: {
viewBox: '0 0 24 24',
paths: [
'M2.125 19V16C2.125 15.5168 2.51675 15.125 3 15.125C3.48325 15.125 3.875 15.5168 3.875 16V19C3.875 19.2984 3.99312 19.5849 4.2041 19.7959C4.41508 20.0069 4.70163 20.125 5 20.125H8C8.48325 20.125 8.875 20.5168 8.875 21C8.875 21.4832 8.48325 21.875 8 21.875H5C4.2375 21.875 3.50596 21.5724 2.9668 21.0332C2.42763 20.494 2.125 19.7625 2.125 19ZM20.125 19V16C20.125 15.5168 20.5168 15.125 21 15.125C21.4832 15.125 21.875 15.5168 21.875 16V19C21.875 19.7625 21.5724 20.494 21.0332 21.0332C20.494 21.5724 19.7625 21.875 19 21.875H16C15.5168 21.875 15.125 21.4832 15.125 21C15.125 20.5168 15.5168 20.125 16 20.125H19C19.2984 20.125 19.5849 20.0069 19.7959 19.7959C20.0069 19.5849 20.125 19.2984 20.125 19ZM2.125 8V5C2.125 4.2375 2.42763 3.50596 2.9668 2.9668C3.50596 2.42763 4.2375 2.125 5 2.125H8C8.48325 2.125 8.875 2.51675 8.875 3C8.875 3.48325 8.48325 3.875 8 3.875H5C4.70163 3.875 4.41508 3.99312 4.2041 4.2041C3.99312 4.41508 3.875 4.70163 3.875 5V8C3.875 8.48325 3.48325 8.875 3 8.875C2.51675 8.875 2.125 8.48325 2.125 8ZM20.125 8V5C20.125 4.70163 20.0069 4.41508 19.7959 4.2041C19.5849 3.99312 19.2984 3.875 19 3.875H16C15.5168 3.875 15.125 3.48325 15.125 3C15.125 2.51675 15.5168 2.125 16 2.125H19C19.7625 2.125 20.494 2.42763 21.0332 2.9668C21.5724 3.50596 21.875 4.2375 21.875 5V8C21.875 8.48325 21.4832 8.875 21 8.875C20.5168 8.875 20.125 8.48325 20.125 8Z',
],
},
minimize: {
viewBox: '0 0 24 24',
paths: [
'M7.125 21V18C7.125 17.7016 7.00688 17.4151 6.7959 17.2041C6.58492 16.9931 6.29837 16.875 6 16.875H3C2.51675 16.875 2.125 16.4832 2.125 16C2.125 15.5168 2.51675 15.125 3 15.125H6C6.7625 15.125 7.49404 15.4276 8.0332 15.9668C8.57237 16.506 8.875 17.2375 8.875 18V21C8.875 21.4832 8.48325 21.875 8 21.875C7.51675 21.875 7.125 21.4832 7.125 21ZM15.125 21V18C15.125 17.2375 15.4276 16.506 15.9668 15.9668C16.506 15.4276 17.2375 15.125 18 15.125H21C21.4832 15.125 21.875 15.5168 21.875 16C21.875 16.4832 21.4832 16.875 21 16.875H18C17.7016 16.875 17.4151 16.9931 17.2041 17.2041C16.9931 17.4151 16.875 17.7016 16.875 18V21C16.875 21.4832 16.4832 21.875 16 21.875C15.5168 21.875 15.125 21.4832 15.125 21ZM7.125 6V3C7.125 2.51675 7.51675 2.125 8 2.125C8.48325 2.125 8.875 2.51675 8.875 3V6C8.875 6.7625 8.57237 7.49404 8.0332 8.0332C7.49404 8.57237 6.7625 8.875 6 8.875H3C2.51675 8.875 2.125 8.48325 2.125 8C2.125 7.51675 2.51675 7.125 3 7.125H6C6.29837 7.125 6.58492 7.00688 6.7959 6.7959C7.00688 6.58492 7.125 6.29837 7.125 6ZM15.125 6V3C15.125 2.51675 15.5168 2.125 16 2.125C16.4832 2.125 16.875 2.51675 16.875 3V6C16.875 6.29837 16.9931 6.58492 17.2041 6.7959C17.4151 7.00688 17.7016 7.125 18 7.125H21C21.4832 7.125 21.875 7.51675 21.875 8C21.875 8.48325 21.4832 8.875 21 8.875H18C17.2375 8.875 16.506 8.57237 15.9668 8.0332C15.4276 7.49404 15.125 6.7625 15.125 6Z',
],
},
'wifi-off': {
viewBox: '0 0 24 24',
paths: [
'M1.38128 1.38128C1.72299 1.03957 2.27785 1.03957 2.61956 1.38128L22.6196 21.3813C22.9613 21.723 22.9613 22.2779 22.6196 22.6196C22.2779 22.9613 21.723 22.9613 21.3813 22.6196L15.9448 17.183C15.6121 17.3797 15.1772 17.3385 14.8881 17.0551C14.117 16.2993 13.0802 15.8764 12.0004 15.8764C10.9207 15.8764 9.88381 16.2993 9.11273 17.0551C8.76768 17.3933 8.21371 17.3883 7.87542 17.0434C7.53715 16.6983 7.54301 16.1434 7.88812 15.8051C8.98629 14.7288 10.4628 14.1264 12.0004 14.1264C12.3272 14.1264 12.651 14.1543 12.9692 14.2075L9.88714 11.1254C8.27735 11.5087 6.79851 12.3224 5.61273 13.4848C5.26764 13.8231 4.71371 13.8182 4.37542 13.4731C4.03714 13.128 4.04303 12.5741 4.38812 12.2358C5.55033 11.0965 6.94797 10.2366 8.47503 9.71331L5.98577 7.22405C4.74971 7.80461 3.60363 8.56219 2.58343 9.47308C2.22296 9.79494 1.66993 9.76324 1.34808 9.40277C1.02629 9.04229 1.05697 8.48925 1.41741 8.16741C2.40785 7.28308 3.5045 6.52832 4.68011 5.91839L1.38128 2.61956C1.03957 2.27785 1.03957 1.72299 1.38128 1.38128ZM12.0102 19.1254C12.4934 19.1254 12.8852 19.5172 12.8852 20.0004C12.8852 20.4837 12.4934 20.8754 12.0102 20.8754H12.0004C11.5172 20.8754 11.1254 20.4837 11.1254 20.0004C11.1254 19.5172 11.5172 19.1254 12.0004 19.1254H12.0102ZM16.2426 10.9028C16.4843 10.4845 17.0195 10.341 17.4379 10.5825C18.2294 11.0398 18.9602 11.5956 19.6127 12.2358C19.9576 12.5741 19.9636 13.1281 19.6254 13.4731C19.287 13.818 18.7331 13.8231 18.3881 13.4848C17.8406 12.9476 17.2271 12.4818 16.5629 12.0981C16.1445 11.8563 16.001 11.3212 16.2426 10.9028ZM10.6352 4.1889C12.7929 4.00208 14.9661 4.25848 17.0209 4.94281C19.0757 5.62716 20.9686 6.72516 22.5834 8.16839C22.9436 8.49044 22.9748 9.04348 22.6528 9.40374C22.3308 9.76385 21.7777 9.7949 21.4174 9.47308C19.9807 8.18898 18.2964 7.21188 16.4682 6.60296C14.6399 5.99405 12.7055 5.7658 10.7856 5.93206C10.3043 5.97356 9.88011 5.61739 9.83831 5.13616C9.79662 4.65472 10.1537 4.23059 10.6352 4.1889Z',
],
},
};
export default {
name: 'NovncIcon',
props: {
type: {
type: String,
required: true,
validator: (value) => Object.keys(ICONS).includes(value),
},
},
computed: {
icon() {
return ICONS[this.type];
},
},
};
</script>
<template>
<svg
class="novnc-icon"
:viewBox="icon.viewBox"
fill="currentColor"
aria-hidden="true"
focusable="false"
>
<path
v-for="(d, i) in icon.paths"
:key="i"
:d="d"
/>
</svg>
</template>
<style lang="scss" scoped>
.novnc-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
</style>
Reference in New Issue View Git Blame Copy Permalink