From 615b3150c7504d76a105c57728b2bddc58d9e5f2 Mon Sep 17 00:00:00 2001
From: Sukanya Pandey <sukapan1@in.ibm.com>
Date: Wed, 19 Aug 2020 19:13:49 +0530
Subject: 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
---
 src/assets/styles/bmc/custom/_index.scss           |   1 +
 src/assets/styles/bmc/custom/_sol.scss             |   3 +
 src/locales/en-US.json                             |  14 +--
 src/views/Control/SerialOverLan/SerialOverLan.vue  |  45 ++-------
 .../Control/SerialOverLan/SerialOverLanConsole.vue | 109 ++++++++++++++++++++-
 5 files changed, 123 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/styles/bmc/custom/_sol.scss

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>
-- 
cgit v1.2.3