From 96b37af1433f635fc6bb107961a352721a720326 Mon Sep 17 00:00:00 2001
From: Mateusz Gapski <mateuszx.gapski@intel.com>
Date: Fri, 4 Sep 2020 14:11:55 +0200
Subject: Fix responsiveness of KVM

More info: https://github.com/openbmc/webui-vue/issues/24

Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: I150e7816ea08f462300566276ddbfc117e9f2e0c
---
 src/assets/styles/bmc/custom/_index.scss |   1 +
 src/assets/styles/bmc/custom/_kvm.scss   |  12 +++
 src/views/Control/Kvm/Kvm.vue            |  33 +-------
 src/views/Control/Kvm/KvmConsole.vue     | 128 ++++++++++++++++++++++++++-----
 4 files changed, 126 insertions(+), 48 deletions(-)
 create mode 100644 src/assets/styles/bmc/custom/_kvm.scss

(limited to 'src')

diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index b67712bb..4456dd29 100644
--- a/src/assets/styles/bmc/custom/_index.scss
+++ b/src/assets/styles/bmc/custom/_index.scss
@@ -9,6 +9,7 @@
 @import "./card";
 @import "./dropdown";
 @import "./forms";
+@import "./kvm";
 @import "./modal";
 @import "./pagination";
 @import "./tables";
diff --git a/src/assets/styles/bmc/custom/_kvm.scss b/src/assets/styles/bmc/custom/_kvm.scss
new file mode 100644
index 00000000..a7223844
--- /dev/null
+++ b/src/assets/styles/bmc/custom/_kvm.scss
@@ -0,0 +1,12 @@
+#terminal-kvm {
+  height: calc(100vh - 300px);
+  display: flex;
+  &.full-window {
+   height: calc(100vh - 80px); 
+  }
+  div:nth-child(1) {
+    background: transparent !important;
+    display: block !important;
+    overflow: hidden !important;
+  }
+}
\ No newline at end of file
diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue
index 195948b0..66b2e5f7 100644
--- a/src/views/Control/Kvm/Kvm.vue
+++ b/src/views/Control/Kvm/Kvm.vue
@@ -1,44 +1,19 @@
 <template>
   <b-container fluid="xl">
     <page-title />
-
-    <page-section :section-title="$t('pageKvm.subTitle')">
-      <div>
-        <b-button
-          variant="link"
-          type="button"
-          class="button-launch"
-          @click="openConsoleWindow()"
-        >
-          <icon-launch />
-          {{ $t('pageKvm.openNewTab') }}
-        </b-button>
-      </div>
-      <div class="terminal-container">
-        <kvm-console />
-      </div>
-    </page-section>
+    <div class="terminal-container">
+      <kvm-console :is-full-window="false" />
+    </div>
   </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 KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
-  components: { IconLaunch, PageSection, PageTitle, KvmConsole },
-  methods: {
-    openConsoleWindow() {
-      window.open(
-        '#/console/kvm',
-        '_blank',
-        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
-      );
-    }
-  }
+  components: { PageTitle, KvmConsole }
 };
 </script>
 
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 6881b690..8438b35c 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -1,31 +1,96 @@
 <template>
-  <div>
-    <span class="kvm-status">{{ $t('pageKvm.status') }}: {{ status }}</span>
-    <b-button
-      v-if="isConnected"
-      variant="link"
-      type="button"
-      class="button-launch button-ctrl-alt-delete"
-      @click="sendCtrlAltDel"
-    >
-      {{ $t('pageKvm.buttonCtrlAltDelete') }}
-    </b-button>
-    <div v-show="isConnected" id="terminal" ref="panel"></div>
+  <div :class="marginClass">
+    <div ref="toolbar" class="kvm-toolbar">
+      <b-row class="d-flex">
+        <b-col class="d-flex flex-column justify-content-end" cols="4">
+          <dl class="mb-2" sm="2" md="2">
+            <dt class="d-inline font-weight-bold mr-1">
+              {{ $t('pageKvm.status') }}:
+            </dt>
+            <dd class="d-inline">
+              <status-icon :status="hostStatusIcon" />
+              <span class="d-none d-md-inline"> {{ hostStatus }}</span>
+            </dd>
+          </dl>
+        </b-col>
+
+        <b-col class="d-flex justify-content-end">
+          <b-button
+            v-if="isConnected"
+            variant="link"
+            type="button"
+            class="pr-0 button-launch"
+            @click="sendCtrlAltDel"
+          >
+            <icon-arrow-down aria-hidden="true" />
+            {{ $t('pageKvm.buttonCtrlAltDelete') }}
+          </b-button>
+          <b-button
+            v-if="!isFullWindow"
+            variant="link"
+            type="button"
+            class="pr-0 button-launch"
+            @click="openConsoleWindow()"
+          >
+            <icon-launch aria-hidden="true" />
+            <span class="d-none d-md-inline">
+              {{ $t('pageKvm.openNewTab') }}
+            </span>
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+    <div id="terminal-kvm" ref="panel" :class="terminalClass"></div>
   </div>
 </template>
 
 <script>
 import RFB from '@novnc/novnc/core/rfb';
+import StatusIcon from '@/components/Global/StatusIcon';
+import IconLaunch from '@carbon/icons-vue/es/launch/20';
+import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16';
+
+const Connecting = 0;
+const Connected = 1;
+const Disconnected = 2;
 
 export default {
   name: 'KvmConsole',
+  components: { StatusIcon, IconLaunch, IconArrowDown },
+  props: {
+    isFullWindow: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       rfb: null,
       isConnected: false,
-      status: this.$t('pageKvm.connecting')
+      terminalClass: this.isFullWindow ? 'full-window' : '',
+      marginClass: this.isFullWindow ? 'margin-left-full-window' : '',
+      status: Connecting,
+      convasRef: null
     };
   },
+  computed: {
+    hostStatusIcon() {
+      if (this.status === Connected) {
+        return 'success';
+      } else if (this.status === Disconnected) {
+        return 'danger';
+      }
+      return 'secondary';
+    },
+    hostStatus() {
+      if (this.status === Connected) {
+        return this.$t('pageKvm.connected');
+      } else if (this.status === Disconnected) {
+        return this.$t('pageKvm.disconnected');
+      }
+      return this.$t('pageKvm.connecting');
+    }
+  },
   mounted() {
     this.openTerminal();
   },
@@ -42,25 +107,46 @@ export default {
       );
 
       this.rfb.scaleViewport = true;
+      this.rfb.clipViewport = true;
       const that = this;
+
+      window.addEventListener('resize', () => {
+        setTimeout(that.setWidthToolbar, 0);
+      });
+
       this.rfb.addEventListener('connect', () => {
         that.isConnected = true;
-        that.status = this.$t('pageKvm.connected');
+        that.status = Connected;
+        that.setWidthToolbar();
       });
 
       this.rfb.addEventListener('disconnect', () => {
-        that.status = this.$t('pageKvm.disconnected');
+        this.isConnected = false;
+        that.status = Disconnected;
       });
+    },
+    setWidthToolbar() {
+      if (
+        this.$refs.panel.children &&
+        this.$refs.panel.children.length > 0 &&
+        this.$refs.panel.children[0].children.length > 0
+      ) {
+        this.$refs.toolbar.style.width =
+          this.$refs.panel.children[0].children[0].clientWidth - 10 + 'px';
+      }
+    },
+    openConsoleWindow() {
+      window.open(
+        '#/console/kvm',
+        '_blank',
+        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=700,height=550'
+      );
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
-#terminal {
-  height: calc(100vh - 42px);
-}
-
 .button-ctrl-alt-delete {
   float: right;
 }
@@ -70,4 +156,8 @@ export default {
   padding-left: $spacer / 4;
   display: inline-block;
 }
+
+.margin-left-full-window {
+  margin-left: 5px;
+}
 </style>
-- 
cgit v1.2.3