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
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index 4456dd2..9d6218f 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 0000000..6987cf7
--- /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 127df61..b730b81 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 61f91e0..037a496 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 69ccf8d..d5e9b21 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 @@
} 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>