Update SOL console page alert message

- if the status of the SOL console is disconnected, an
alert message will be displays that System must be
powered on to connect

Signed-off-by: Nikhil Ashoka <a.nikhil@ibm.com>
Change-Id: I4cdf99954f3a4e129404facf2992dadf63e62f70
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index d10763e..b764099 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -812,6 +812,9 @@
     }
   },
   "pageSerialOverLan": {
+    "alert": {
+      "disconnectedAlertMessage" : "System must be powered on to connect"
+    },
     "connected": "Connected",
     "disconnected": "Disconnected",
     "openNewTab": "Open in new tab",
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index 0bda43d..ce8549d 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -1,6 +1,20 @@
 <template>
   <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'">
     <b-row class="d-flex">
+      <b-col sm="4" md="6">
+        <alert
+          v-if="serverStatus === 'on' ? false : true"
+          variant="warning"
+          :small="true"
+          class="mt-4"
+        >
+          <p class="col-form-label">
+            {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }}
+          </p>
+        </alert>
+      </b-col>
+    </b-row>
+    <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">
@@ -24,6 +38,7 @@
 </template>
 
 <script>
+import Alert from '@/components/Global/Alert';
 import { AttachAddon } from 'xterm-addon-attach';
 import { FitAddon } from 'xterm-addon-fit';
 import { Terminal } from 'xterm';
@@ -34,6 +49,7 @@
 export default {
   name: 'SerialOverLanConsole',
   components: {
+    Alert,
     IconLaunch,
     StatusIcon,
   },