Refactor log line view to prevent HTML render log lines.

This commit processes log lis and renders them as different fields
removing the use of <pre> and also `v-html` which renders HTML strings
from log lines.

frontend/src/assets/style.scss

@@ -628,11 +628,22 @@ section.campaign {
   .lines {
     height: 70vh;
     overflow-y: scroll;
+    font-family: monospace;
+    font-size: 0.90rem;
 
-    .stamp {
+    padding: 15px;
+    border: 1px solid $grey-lightest;
+
+    .line {
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .timestamp {
       color: $primary;
       display: inline-block;
-      min-width: 160px;
+      min-width: 175px;
+      margin-right: 5px;
     }
 
     .line:hover {

frontend/src/components/LogView.vue

@@ -1,15 +1,23 @@
 <template>
     <section class="log-view">
-    <b-loading :active="loading" :is-full-page="false" />
-    <pre class="lines" ref="lines">
-<template v-for="(l, i) in lines"><span v-html="formatLine(l)" :key="i" class="line"></span>
-</template></pre>
+      <b-loading :active="loading" :is-full-page="false" />
+      <div class="lines" ref="lines">
+        <template v-for="(l, i) in lines">
+          <span :set="line = splitLine(l)" :key="i" class="line">
+            <span class="timestamp" :title="line.file">{{ line.timestamp }}</span>
+            <span class="message">{{ line.message }}</span>
+          </span>
+        </template>
+      </div>
     </section>
 </template>
 
 
 <script>
-const reFormatLine = new RegExp(/^(.*) (.+?)\.go:[0-9]+:\s/g);
+// Regexp for splitting log lines in the following format to
+// [timestamp] [file] [message].
+// 2021/05/01 00:00:00 init.go:99: reading config: config.toml
+const reFormatLine = new RegExp(/^([0-9\s:/]+) (.+?\.go:[0-9]+):\s/g);
 
 export default {
   name: 'LogView',
@@ -23,6 +31,15 @@ export default {
   },
 
   methods: {
+    splitLine: (l) => {
+      const parts = l.split(reFormatLine);
+      return {
+        timestamp: parts[1],
+        file: parts[2],
+        message: parts[3],
+      };
+    },
+
     formatLine: (l) => l.replace(reFormatLine, '<span class="stamp">$1</span> '),
   },