stylish the log terminal

dashboard/src/components/CVPM-Log.vue

@@ -2,14 +2,18 @@
   <div class="terminal">
     <div class="header">
       <h4>{{title}}</h4>
+        <ul class="shell-dots">
+          <v-icon color="blue darken-2" @click="navHelp()">help_outline</v-icon>
+        </ul>
     </div>
     <div
       style="position:absolute;top:0;left:0;right:0;overflow:auto;z-index:1;margin-top:30px;max-height:500px"
       ref="terminalWindow"
     >
       <div class="terminal-window" id="terminalWindow">
-        <p v-for="(item, index) in messageList" :key="index">
-          <span class="cmd">{{item}}</span>
+        <p v-for="(item, index) in parsedMessageList" :key="index">
+          <span v-if="item.type" :class="item.type">{{item.type}}</span>
+          <span class="cmd">{{item.text}}</span>
         </p>
       </div>
     </div>
@@ -22,7 +26,23 @@ export default {
     return {
     }
   },
-  props: ['title', 'messageList']
+  computed: {
+    parsedMessageList: function () {
+      return this.messageList.map(function (each) {
+        if (each.indexOf('error') > -1) {
+          return {'type': 'error', 'text': each}
+        } else {
+          return {'text': each}
+        }
+      })
+    }
+  },
+  props: ['title', 'messageList'],
+  methods: {
+    navHelp () {
+      window.open('https://cvpm.autoai.org')
+    }
+  }
 }
 </script>
 

dashboard/src/pages/Detail.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

dashboard/src/pages/SystemLog.vue

@@ -7,7 +7,7 @@ import Log from '@/components/CVPM-Log'
 export default {
   data () {
     return {
-      messageList: []
+      messageList: ['an error occured', 'everything works fine']
     }
   },
   components: {