diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-05-20 13:02:57 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-09 01:23:38 +0300 |
commit | 96f69ca98f92ff64cc50104a70b3978595683c72 (patch) | |
tree | b06a51b88e92f332a49de1cefc6b4d3503dc2144 /src/views/Control/SerialOverLan | |
parent | 55888a1ca827da6247323036947c4ca30f2e9798 (diff) | |
download | webui-vue-96f69ca98f92ff64cc50104a70b3978595683c72.tar.xz |
Add code for Serial Over LAN
- The output of serial connection of the hosts on the workstation
terminal.
- The library used is xterm which will provide the terminal to show the
data.
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I6000cae42f237fffe216e2079cf2a6c39db236fd
Diffstat (limited to 'src/views/Control/SerialOverLan')
-rw-r--r-- | src/views/Control/SerialOverLan/SerialOverLan.vue | 55 | ||||
-rw-r--r-- | src/views/Control/SerialOverLan/SerialOverLanConsole.vue | 74 | ||||
-rw-r--r-- | src/views/Control/SerialOverLan/index.js | 2 |
3 files changed, 131 insertions, 0 deletions
diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue new file mode 100644 index 00000000..61f91e0e --- /dev/null +++ b/src/views/Control/SerialOverLan/SerialOverLan.vue @@ -0,0 +1,55 @@ +<template> + <b-container fluid="xl"> + <page-title /> + + <page-section :section-title="$t('pageSerialoverLAN.subTitle')"> + <p>{{ $t('pageSerialoverLAN.subTitleDesc') }}</p> + + <div class="terminal-container"> + <serial-over-lan-console /> + </div> + <div class="text-right"> + <b-button + variant="link" + type="button" + class="button-launch" + @click="openConsoleWindow()" + > + <icon-launch /> + + {{ $t('pageSerialoverLAN.openNewTab') }} + </b-button> + </div> + </page-section> + </b-container> +</template> + +<script> +import IconLaunch from '@carbon/icons-vue/es/launch/32'; +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import SerialOverLanConsole from './SerialOverLanConsole'; + +export default { + name: 'SerialOverLan', + components: { IconLaunch, PageSection, PageTitle, SerialOverLanConsole }, + methods: { + openConsoleWindow() { + window.open( + '#/console/serial-over-lan-console', + '_blank', + 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550' + ); + } + } +}; +</script> + +<style scoped> +.button-launch > svg { + height: 25px; +} +.terminal-container { + width: 100%; +} +</style> diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue new file mode 100644 index 00000000..69ccf8df --- /dev/null +++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue @@ -0,0 +1,74 @@ +<template> + <div id="terminal" ref="panel"></div> +</template> + +<script> +import { AttachAddon } from 'xterm-addon-attach'; +import { FitAddon } from 'xterm-addon-fit'; +import { Terminal } from 'xterm'; + +export default { + name: 'SerialOverLanConsole', + mounted() { + this.openTerminal(); + }, + methods: { + openTerminal() { + const token = this.$store.getters['authentication/token']; + + const ws = new WebSocket(`wss://${window.location.host}/console0`, [ + token + ]); + + // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons. + + const term = new Terminal({ + fontSize: 15, + fontFamily: + 'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace' + }); + + const attachAddon = new AttachAddon(ws); + term.loadAddon(attachAddon); + + const fitAddon = new FitAddon(); + term.loadAddon(fitAddon); + + const SOL_THEME = { + background: '#19273c', + cursor: 'rgba(83, 146, 255, .5)', + scrollbar: 'rgba(83, 146, 255, .5)' + }; + term.setOption('theme', SOL_THEME); + + term.open(this.$refs.panel); + fitAddon.fit(); + + try { + ws.onopen = function() { + console.log('websocket console0/ opened'); + }; + ws.onclose = function(event) { + console.log( + 'websocket console0/ closed. code: ' + + event.code + + ' reason: ' + + event.reason + ); + }; + } catch (error) { + console.log(error); + } + } + } +}; +</script> + +<style scoped> +@import '~xterm/css/xterm.css'; + +#terminal { + height: 25em; + overflow: hidden; +} +</style> diff --git a/src/views/Control/SerialOverLan/index.js b/src/views/Control/SerialOverLan/index.js new file mode 100644 index 00000000..7c8bc7c0 --- /dev/null +++ b/src/views/Control/SerialOverLan/index.js @@ -0,0 +1,2 @@ +import SerialOverLan from './SerialOverLan.vue'; +export default SerialOverLan; |