diff options
author | Sukanya Pandey <sukapan1@in.ibm.com> | 2020-08-19 16:43:49 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-05 20:44:13 +0300 |
commit | 615b3150c7504d76a105c57728b2bddc58d9e5f2 (patch) | |
tree | fd0c37daca410115b1fa5adc2b95a2bae54b8170 /src/views/Control/SerialOverLan/SerialOverLanConsole.vue | |
parent | 14d80dd65ad5ecc2e10c185415a7d2dd0af492a9 (diff) | |
download | webui-vue-615b3150c7504d76a105c57728b2bddc58d9e5f2.tar.xz |
Add changes related to SOL page
-Changes incorporated can be referred through below link:
-https://github.com/openbmc/webui-vue/issues/25
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I39d79259e0470d11c15e596908eefee7a799262a
Diffstat (limited to 'src/views/Control/SerialOverLan/SerialOverLanConsole.vue')
-rw-r--r-- | src/views/Control/SerialOverLan/SerialOverLanConsole.vue | 109 |
1 files changed, 104 insertions, 5 deletions
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue index 69ccf8df..d5e9b214 100644 --- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue +++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue @@ -1,14 +1,71 @@ <template> - <div id="terminal" ref="panel"></div> + <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'"> + <template> + <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="hostStatusIcon" /> {{ connectionStatus }} + </dd> + </dl> + </b-col> + + <b-col v-if="!isFullWindow" class="d-flex justify-content-end"> + <b-button + variant="link" + type="button" + class="pr-0 button-launch" + @click="openConsoleWindow()" + > + <icon-launch aria-hidden="true" /> + + {{ $t('pageSerialOverLan.openNewTab') }} + </b-button> + </b-col> + </b-row> + </template> + <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 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 + } + }, + computed: { + hostStatus() { + return this.$store.getters['global/hostStatus']; + }, + hostStatusIcon() { + return this.hostStatus === 'on' ? 'success' : 'danger'; + }, + connectionStatus() { + return this.hostStatus === 'on' + ? this.$t('pageSerialOverLan.connected') + : this.$t('pageSerialOverLan.disconnected'); + } + }, + created() { + this.$store.dispatch('global/getHostStatus'); + }, mounted() { this.openTerminal(); }, @@ -59,16 +116,58 @@ export default { } 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 scoped> +<style lang="scss" scoped> @import '~xterm/css/xterm.css'; -#terminal { - height: 25em; - overflow: hidden; +.terminal-container { + #terminal { + overflow: auto; + } +} +@include media-breakpoint-up(xs) { + .terminal-container { + width: 100%; + } +} +@include media-breakpoint-up(sm) { + .terminal-container { + width: 80%; + } +} +@include media-breakpoint-up(md) { + .terminal-container { + width: 65%; + } +} +@include media-breakpoint-up(lg) { + .terminal-container { + width: 80%; + } +} +@include media-breakpoint-up(xl) { + .terminal-container { + width: 60%; + } +} + +.full-window-container { + width: 97%; + max-width: 960px; + margin: 1.5%; + #terminal { + overflow: auto; + } } </style> |