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

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>