Skip to content

feat(VncConsole): Introduce VncConsole component - #288

Merged
jeff-phillips-18 merged 2 commits into
patternfly:masterfrom
mareklibra:vncConsole
Jul 2, 2018
Merged

jeff-phillips-18 merged 2 commits into
patternfly:masterfrom
mareklibra:vncConsole

Conversation

@mareklibra

@mareklibra mareklibra commented Mar 26, 2018 •

Copy link
Copy Markdown
Contributor

What:
Provide reusable component to access server/virtual machine via VNC protocol.

Link to Storybook:
Mock VNC backend is not available, so storybook is just a formal one, not showing the functionality.
Screenshots will substitute it in this case.

Link: https://mareklibra.github.io/patternfly-react/

Additional issues:
Depends on: #160 (SerialConsole)

Future work:
If this change is accepted, higher-level <Consoles/> component wrapping selection of either VncConsole or SerialConsole will be implemented.

@mareklibra mareklibra changed the title feat(VncConsole): Introduce VncConsole component WIP: feat(VncConsole): Introduce VncConsole component Mar 26, 2018
@coveralls

Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 1055

  • 0 of 0 (NaN%) changed or added relevant lines in 0 files are covered.
  • 9 unchanged lines in 2 files lost coverage.
  • Overall coverage increased (+8.9%) to 80.609%

Files with Coverage Reduction New Missed Lines %
src/common/patternfly.js 1 71.43%
src/common/helpers.js 8 39.39%
Totals Coverage Status
Change from base Build 1043: 8.9%
Covered Lines: 852
Relevant Lines: 995

💛 - Coveralls

@coveralls

coveralls commented Mar 26, 2018 •

Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 1364

  • 26 of 48 (54.17%) changed or added relevant lines in 3 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage decreased (-18.2%) to 55.885%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/console/src/VncConsole/VncActions.js 3 4 75.0%
packages/console/src/VncConsole/VncConsole.js 21 42 50.0%
Totals Coverage Status
Change from base Build 1359: -18.2%
Covered Lines: 5744
Relevant Lines: 8678

💛 - Coveralls

@mareklibra

Copy link
Copy Markdown
Contributor Author

First use of the component will be in the cockpit-project.org.

@mareklibra

mareklibra commented Mar 26, 2018 •

Copy link
Copy Markdown
Contributor Author

Part of the pattern is the element with VNC session and action button sending Ctrl+Alt+Del to the VNC server.
Please note, the combo-box in the left upper corner is not part of the pattern - it will be included in a higher-level component later.

01


The component resizes according to backend:

02

@mareklibra

Copy link
Copy Markdown
Contributor Author

The npm test recently fails on ES6 code under node_modules.
Any suggestion how to fix that?

Tests for unrelated components (like Toolbar) are failing since they import other patternfly-react components via src/index.js which transitively imports src/VncConsole/index.js and so the failing node_modules/@novnc/novnc/core/*.js .

Selected node_modules subdirectories need to be babelized for jest.

There is no such issue for npm run build, just for the tests.

For consuming application, it can be fixed i.e. like within cockpit-project/cockpit#8894 (see change to webpack.config.js).

@mareklibra

Copy link
Copy Markdown
Contributor Author

The issue is fixed similar way as for Cockpit - by adding transformIgnorePatterns to jest configuration

@mareklibra

Copy link
Copy Markdown
Contributor Author

Remains issue with noVNC in missing 'MutationObserver' in novnc/core/util/events.js.
Will fix in the noVNC project.

@mareklibra

Copy link
Copy Markdown
Contributor Author

Workaround for missing MutationObserver class within jest testing is added.
Keep trying to fix it in noVNC.

@mareklibra

Copy link
Copy Markdown
Contributor Author

Added babel-loader for node_modules/@novnc required by storybook build

@mareklibra
mareklibra force-pushed the vncConsole branch 2 times, most recently from 887bb9a to 0fd32af Compare April 16, 2018 12:47
@mareklibra

Copy link
Copy Markdown
Contributor Author

Rebased

@jeff-phillips-18

Copy link
Copy Markdown
Member

@mareklibra with the merge of #311, we've updated where the consoles code should live. Can you please update your code to be under https://github.com/patternfly/patternfly-react/tree/master/packages/console ?

@mareklibra

Copy link
Copy Markdown
Contributor Author

Rebased since #160 is merged.

@mareklibra

Copy link
Copy Markdown
Contributor Author

This is ready for review.

@mareklibra mareklibra changed the title WIP: feat(VncConsole): Introduce VncConsole component feat(VncConsole): Introduce VncConsole component May 3, 2018
@mareklibra

Copy link
Copy Markdown
Contributor Author

Rebased after #332

@mareklibra

Copy link
Copy Markdown
Contributor Author

May I ask for review, please?

{textSendShortcut}

<Button
bsClass="btn btn-default console-actions-buttons-pf"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need for btn or btn-default

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@michalskrivanek

Copy link
Copy Markdown

@michalskrivanek , ideas?
I.e. Alt-F4 ? Ctrl-W ?

take a look at virt-viewer;-)

@mareklibra

Copy link
Copy Markdown
Contributor Author

I.e. Alt-F4 ? Ctrl-W ?

take a look at virt-viewer;-)

So what to include in the pattern? All the shurtcuts implemented within virt-viewer?
It would mean: Ctrl+Alt+Backspace , Ctrl+Alt+Del , Ctrl+Alt+F1 .. F12 , Printscreen

In addition, Alt-F4 is handed by browser recently, causing it's window to be closed.

Or provide an extension mechanism to add additional ones?

@serenamarie125

Copy link
Copy Markdown
Member

@mareklibra might it be possible to allow for the following by default Ctrl+Alt+Backspace , Ctrl+Alt+Del & Printscreen (but allow them to be not shown)? You could also allow for a mechanism to add additional commands, but that could be a future contribution as well.

onCtrlAltDel: noop,

textCtrlAltDel: 'Ctrl+Alt+Del',
textSendShortcut: 'Send key'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use initial caps ... "Send Key"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

bsStyle="default"
id="console-send-shortcut"
onClick={[Function]}
title="Send key"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use initial caps ... "Send Key"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@mareklibra

mareklibra commented Jun 22, 2018 •

Copy link
Copy Markdown
Contributor Author

@serenamarie125 , this makes sense.
I can add mechanism to append custom combinations with handful predefined ones.

If it is ok, I would postpone that work to a follow-up to avoid further prolonging merge of this.

@mareklibra

Copy link
Copy Markdown
Contributor Author

Rebased.
Build is recently failing on unrelated issues

  • ApplicationLauncherWrapper
  • styling

@serenamarie125

Copy link
Copy Markdown
Member

If it is ok, I would postpone that work to a follow-up to avoid further prolonging merge of this.

+1 sounds good, thank you! I've created #422 to track the enhancement.

serenamarie125
serenamarie125 previously approved these changes Jun 22, 2018

@serenamarie125 serenamarie125 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution!

Comment thread src/test.env.js

// referenced from '@novnc/nvnc/core/util/events.js'
// The MutationObserver is available in supported browsers, this is workaround for "jest"
global.MutationObserver = global.MutationObserver || MutationObserverPolyfill;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like the right way to do this. I am not sure if the noVNC lib will be able to fix this since it is a test environment specific thing. I am good with leaving this here if others are.

Comment thread package.json Outdated
"<rootDir>/scripts"
],
"transformIgnorePatterns": [
"node_modules/(?!@novnc)"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this needs to be added to the one on line 165. Looks like a rebase issue.

 "transformIgnorePatterns": [
       "node_modules/(?!@patternfly)",
       "node_modules/(?!@novnc)"
  ],

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That should fix the build

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right, a rebase issue.
Thanks for spotting this.

@jeff-phillips-18 jeff-phillips-18 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM once the build is working again.

beanh66
beanh66 previously approved these changes Jun 25, 2018

@beanh66 beanh66 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks @mareklibra!

@mareklibra

Copy link
Copy Markdown
Contributor Author

Rebased and fixed the former rebase issue with package.json

affects: @patternfly/react-console

New VncComponent is introduced for patternfly/react-console.
The component wraps HTML-based noVNC
client [1]

[1] https://github.com/novnc/noVNC
…environment

affects: @patternfly/react-console, patternfly-react

Referenced from noVNC (@novnc/nvnc/core/util/events.js).

Workaround for the 'jest' testing only
since the MutationObserver is available in browsers otherwise.

Attempt to fix the issue by using
'browser' jest configuration option did not work in this case.
@mareklibra

Copy link
Copy Markdown
Contributor Author

May I ask for (final) review? @dmiller9911 , @jeff-phillips-18

@jeff-phillips-18

Copy link
Copy Markdown
Member

Going to merge this though we dropped coverage. Hopefully we can address this soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants