diff options
| -rw-r--r-- | src/assets/styles/bmc/custom/_index.scss | 1 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_sol.scss | 3 | ||||
| -rw-r--r-- | src/locales/en-US.json | 14 | ||||
| -rw-r--r-- | src/views/Control/SerialOverLan/SerialOverLan.vue | 45 | ||||
| -rw-r--r-- | src/views/Control/SerialOverLan/SerialOverLanConsole.vue | 109 |
5 files changed, 123 insertions, 49 deletions
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss index 4456dd29..9d6218ff 100644 --- a/src/assets/styles/bmc/custom/_index.scss +++ b/src/assets/styles/bmc/custom/_index.scss @@ -12,5 +12,6 @@ @import "./kvm"; @import "./modal"; @import "./pagination"; +@import "./sol"; @import "./tables"; @import "./toasts";
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_sol.scss b/src/assets/styles/bmc/custom/_sol.scss new file mode 100644 index 00000000..6987cf79 --- /dev/null +++ b/src/assets/styles/bmc/custom/_sol.scss @@ -0,0 +1,3 @@ +#terminal .xterm .xterm-viewport { + overflow: auto; +}
\ No newline at end of file diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 127df614..b730b817 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -99,7 +99,7 @@ "primaryNavigation": "Primary navigation", "rebootBmc": "@:appPageTitle.rebootBmc", "sensors": "@:appPageTitle.sensors", - "serialOverLan": "@:appPageTitle.serialOverLan", + "serialOverLan": "SOL console", "serverLed": "@:appPageTitle.serverLed", "serverPowerOperations": "@:appPageTitle.serverPowerOperations", "snmpSettings": "@:appPageTitle.snmpSettings", @@ -123,7 +123,7 @@ "profileSettings": "Profile settings", "rebootBmc": "Reboot BMC", "sensors": "Sensors", - "serialOverLan": "Serial over LAN console", + "serialOverLan": "Serial over LAN (SOL) console", "serverLed": "Server LED", "serverPowerOperations": "Server power operations", "snmpSettings": "SNMP settings", @@ -446,7 +446,7 @@ "bmcTime": "BMC time", "editNetworkSettings": "Edit network settings", "serverLed": "Server LED", - "solConsole": "Serial over LAN console" + "solConsole": "@:appNavigation.serialOverLan" } }, "pageProfileSettings": { @@ -534,10 +534,12 @@ "upperCritical": "Upper critical" } }, - "pageSerialoverLAN": { + "pageSerialOverLan": { + "connected": "Connected", + "disconnected": "Disconnected", "openNewTab": "Open in new tab", - "subTitle": "Access the Serial over LAN console", - "subTitleDesc": "The Serial over LAN (SoL) console redirects the output of the server's serial port to a browser window on your workstation." + "status": "Status", + "subTitle": "SOL console redirects server's serial port output to this window." }, "pageServerLed": { "serverLedSubTitle": "Server indicator LED", diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue index 61f91e0e..037a4963 100644 --- a/src/views/Control/SerialOverLan/SerialOverLan.vue +++ b/src/views/Control/SerialOverLan/SerialOverLan.vue @@ -1,55 +1,24 @@ <template> <b-container fluid="xl"> - <page-title /> + <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" /> - <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 class="mb-0"> + <serial-over-lan-console :is-full-window="false" /> </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' - ); - } + components: { + PageSection, + PageTitle, + SerialOverLanConsole } }; </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 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> |