add ansi-to-html dependence, show task log ansi with colors

frontend/src/components/ScrollView/LogItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="log-item">
     <div class="line-no">{{index}}</div>
-    <div class="line-content">{{data}}</div>
+    <div class="line-content" ><span v-if="isAnsi" v-html="data">{{data}}</span><span v-else="">{{data}}</span></div>
   </div>
 </template>
 
@@ -16,11 +16,16 @@ export default {
     data: {
       type: String,
       default: ''
+    },
+    isAnsi: {
+      type: Boolean,
+      default: false
     }
   }
 }
 </script>
 
+
 <style scoped>
   .log-item {
     display: table;

frontend/src/components/ScrollView/LogView.vue

@@ -13,7 +13,9 @@
 <script>
 import LogItem from './LogItem'
 import VirtualList from 'vue-virtual-scroll-list'
-
+import Convert from 'ansi-to-html'
+import hasAnsi from 'has-ansi'
+const convert = new Convert();
 export default {
   name: 'LogView',
   components: {
@@ -44,12 +46,14 @@ export default {
   methods: {
     getItemProps (index) {
       const logItem = this.logData[index]
+      const isAnsi = hasAnsi(logItem.data)
       return {
         // <item/> will render with itemProps.
         // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
         props: {
           index: logItem.index,
-          data: logItem.data
+          data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
+          isAnsi,
         }
       }
     }