Add code for Serial Over LAN

- The output of serial connection of the hosts on the workstation
terminal.
- The library used is xterm which will provide the terminal to show the
data.

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I6000cae42f237fffe216e2079cf2a6c39db236fd

1 files changed, 55 insertions, 0 deletions

diff --git a/src/views/Control/SerialOverLan/SerialOverLan.vue b/src/views/Control/SerialOverLan/SerialOverLan.vue
new file mode 100644
index 00000000..61f91e0e
--- /dev/null
+++ b/src/views/Control/SerialOverLan/SerialOverLan.vue
@@ -0,0 +1,55 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <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>
+  </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'
+      );
+    }
+  }
+};
+</script>
+
+<style scoped>
+.button-launch > svg {
+  height: 25px;
+}
+.terminal-container {
+  width: 100%;
+}
+</style>