diff options
author | Sandeepa Singh <sandeepa.singh@ibm.com> | 2021-07-14 13:32:22 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-10 22:20:42 +0300 |
commit | 68cbbe9014cbdcf7229a878f564d38f6d6199f25 (patch) | |
tree | cd7138959f405cb44b5d62000da9d364ed238b91 /src/views/Operations/SerialOverLan | |
parent | 7affc529b7fba41193c4d48764707e9961cdd22d (diff) | |
download | webui-vue-68cbbe9014cbdcf7229a878f564d38f6d6199f25.tar.xz |
IA update: Update control section to operations
This is the third update to the information architecture changes and
has the following changes:
- The control section has been updated to operations
- The server led page has been removed
- The firmware page is moved to operations section
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4
Diffstat (limited to 'src/views/Operations/SerialOverLan')
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLan.vue | 24 | ||||
-rw-r--r-- | src/views/Operations/SerialOverLan/SerialOverLanConsole.vue | 148 | ||||
-rw-r--r-- | src/views/Operations/SerialOverLan/index.js | 2 |
3 files changed, 174 insertions, 0 deletions
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue new file mode 100644 index 00000000..48a68345 --- /dev/null +++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue @@ -0,0 +1,24 @@ +<template> + <b-container fluid="xl"> + <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" /> + + <page-section class="mb-0"> + <serial-over-lan-console :is-full-window="false" /> + </page-section> + </b-container> +</template> + +<script> +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; +import SerialOverLanConsole from './SerialOverLanConsole'; + +export default { + name: 'SerialOverLan', + components: { + PageSection, + PageTitle, + SerialOverLanConsole, + }, +}; +</script> diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue new file mode 100644 index 00000000..0bda43db --- /dev/null +++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue @@ -0,0 +1,148 @@ +<template> + <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'"> + <b-row class="d-flex"> + <b-col class="d-flex flex-column justify-content-end"> + <dl class="mb-2" sm="6" md="6"> + <dt class="d-inline font-weight-bold mr-1"> + {{ $t('pageSerialOverLan.status') }}: + </dt> + <dd class="d-inline"> + <status-icon :status="serverStatusIcon" /> {{ connectionStatus }} + </dd> + </dl> + </b-col> + + <b-col v-if="!isFullWindow" class="d-flex justify-content-end"> + <b-button variant="link" type="button" @click="openConsoleWindow()"> + <icon-launch /> + {{ $t('pageSerialOverLan.openNewTab') }} + </b-button> + </b-col> + </b-row> + <div id="terminal" ref="panel"></div> + </div> +</template> + +<script> +import { AttachAddon } from 'xterm-addon-attach'; +import { FitAddon } from 'xterm-addon-fit'; +import { Terminal } from 'xterm'; +import { throttle } from 'lodash'; +import IconLaunch from '@carbon/icons-vue/es/launch/20'; +import StatusIcon from '@/components/Global/StatusIcon'; + +export default { + name: 'SerialOverLanConsole', + components: { + IconLaunch, + StatusIcon, + }, + props: { + isFullWindow: { + type: Boolean, + default: true, + }, + }, + data() { + return { + resizeConsoleWindow: null, + }; + }, + computed: { + serverStatus() { + return this.$store.getters['global/serverStatus']; + }, + serverStatusIcon() { + return this.serverStatus === 'on' ? 'success' : 'danger'; + }, + connectionStatus() { + return this.serverStatus === 'on' + ? this.$t('pageSerialOverLan.connected') + : this.$t('pageSerialOverLan.disconnected'); + }, + }, + created() { + this.$store.dispatch('global/getServerStatus'); + }, + mounted() { + this.openTerminal(); + }, + beforeDestroy() { + window.removeEventListener('resize', this.resizeConsoleWindow); + }, + 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(); + + this.resizeConsoleWindow = throttle(() => { + fitAddon.fit(); + }, 1000); + window.addEventListener('resize', this.resizeConsoleWindow); + + 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); + } + }, + 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 lang="scss" scoped> +@import '~xterm/css/xterm.css'; + +#terminal { + overflow: auto; +} + +.full-window-container { + width: 97%; + margin: 1.5%; +} +</style> diff --git a/src/views/Operations/SerialOverLan/index.js b/src/views/Operations/SerialOverLan/index.js new file mode 100644 index 00000000..7c8bc7c0 --- /dev/null +++ b/src/views/Operations/SerialOverLan/index.js @@ -0,0 +1,2 @@ +import SerialOverLan from './SerialOverLan.vue'; +export default SerialOverLan; |