From 68cbbe9014cbdcf7229a878f564d38f6d6199f25 Mon Sep 17 00:00:00 2001
From: Sandeepa Singh <sandeepa.singh@ibm.com>
Date: Wed, 14 Jul 2021 16:02:22 +0530
Subject: IA update: Update control section to operations

This is the third update to the information architecture changes and
has the following changes:

- The control section has been updated to operations
- The server led page has been removed
- The firmware page is moved to operations section

Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4
---
 .../Operations/SerialOverLan/SerialOverLan.vue     |  24 ++++
 .../SerialOverLan/SerialOverLanConsole.vue         | 148 +++++++++++++++++++++
 src/views/Operations/SerialOverLan/index.js        |   2 +
 3 files changed, 174 insertions(+)
 create mode 100644 src/views/Operations/SerialOverLan/SerialOverLan.vue
 create mode 100644 src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
 create mode 100644 src/views/Operations/SerialOverLan/index.js

(limited to 'src/views/Operations/SerialOverLan')

diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
new file mode 100644
index 00000000..48a68345
--- /dev/null
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -0,0 +1,24 @@
+<template>
+  <b-container fluid="xl">
+    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
+
+    <page-section class="mb-0">
+      <serial-over-lan-console :is-full-window="false" />
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import SerialOverLanConsole from './SerialOverLanConsole';
+
+export default {
+  name: 'SerialOverLan',
+  components: {
+    PageSection,
+    PageTitle,
+    SerialOverLanConsole,
+  },
+};
+</script>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
new file mode 100644
index 00000000..0bda43db
--- /dev/null
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -0,0 +1,148 @@
+<template>
+  <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'">
+    <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="serverStatusIcon" /> {{ connectionStatus }}
+          </dd>
+        </dl>
+      </b-col>
+
+      <b-col v-if="!isFullWindow" class="d-flex justify-content-end">
+        <b-button variant="link" type="button" @click="openConsoleWindow()">
+          <icon-launch />
+          {{ $t('pageSerialOverLan.openNewTab') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <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 { throttle } from 'lodash';
+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,
+    },
+  },
+  data() {
+    return {
+      resizeConsoleWindow: null,
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    serverStatusIcon() {
+      return this.serverStatus === 'on' ? 'success' : 'danger';
+    },
+    connectionStatus() {
+      return this.serverStatus === 'on'
+        ? this.$t('pageSerialOverLan.connected')
+        : this.$t('pageSerialOverLan.disconnected');
+    },
+  },
+  created() {
+    this.$store.dispatch('global/getServerStatus');
+  },
+  mounted() {
+    this.openTerminal();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeConsoleWindow);
+  },
+  methods: {
+    openTerminal() {
+      const token = this.$store.getters['authentication/token'];
+
+      const ws = new WebSocket(`wss://${window.location.host}/console0`, [
+        token,
+      ]);
+
+      // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
+
+      const term = new Terminal({
+        fontSize: 15,
+        fontFamily:
+          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+      });
+
+      const attachAddon = new AttachAddon(ws);
+      term.loadAddon(attachAddon);
+
+      const fitAddon = new FitAddon();
+      term.loadAddon(fitAddon);
+
+      const SOL_THEME = {
+        background: '#19273c',
+        cursor: 'rgba(83, 146, 255, .5)',
+        scrollbar: 'rgba(83, 146, 255, .5)',
+      };
+      term.setOption('theme', SOL_THEME);
+
+      term.open(this.$refs.panel);
+      fitAddon.fit();
+
+      this.resizeConsoleWindow = throttle(() => {
+        fitAddon.fit();
+      }, 1000);
+      window.addEventListener('resize', this.resizeConsoleWindow);
+
+      try {
+        ws.onopen = function () {
+          console.log('websocket console0/ opened');
+        };
+        ws.onclose = function (event) {
+          console.log(
+            'websocket console0/ closed. code: ' +
+              event.code +
+              ' reason: ' +
+              event.reason
+          );
+        };
+      } 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 lang="scss" scoped>
+@import '~xterm/css/xterm.css';
+
+#terminal {
+  overflow: auto;
+}
+
+.full-window-container {
+  width: 97%;
+  margin: 1.5%;
+}
+</style>
diff --git a/src/views/Operations/SerialOverLan/index.js b/src/views/Operations/SerialOverLan/index.js
new file mode 100644
index 00000000..7c8bc7c0
--- /dev/null
+++ b/src/views/Operations/SerialOverLan/index.js
@@ -0,0 +1,2 @@
+import SerialOverLan from './SerialOverLan.vue';
+export default SerialOverLan;
-- 
cgit v1.2.3