Refactor log view UI into a component.

frontend/src/assets/style.scss

@@ -438,8 +438,9 @@ section.import {
   .status {
     padding: 60px;
   }
-  .logs {
+  .log-view .lines {
     max-height: 240px;
+    text-align: left;
   }
 }
 
@@ -607,7 +608,7 @@ section.campaign {
 }
 
 /* Logs */
-.logs {
+.log-view {
   .lines {
     height: 70vh;
     overflow-y: scroll;

frontend/src/views/Import.vue

@@ -127,10 +127,9 @@
       </p>
       <br />
 
-      <p>
-        <b-input v-model="logs" id="import-log" class="logs"
-          type="textarea" readonly placeholder="Import log" />
-      </p>
+      <div class="import-logs">
+        <log-view :lines="logs" :loading="false" />
+      </div>
     </section>
   </section>
 </template>
@@ -139,10 +138,12 @@
 import Vue from 'vue';
 import { mapState } from 'vuex';
 import ListSelector from '../components/ListSelector.vue';
+import LogView from '../components/LogView.vue';
 
 export default Vue.extend({
   components: {
     ListSelector,
+    LogView,
   },
 
   props: {
@@ -242,7 +243,7 @@ export default Vue.extend({
 
     getLogs() {
       this.$api.getImportLogs().then((data) => {
-        this.logs = data;
+        this.logs = data.split('\n');
 
         Vue.nextTick(() => {
           // vue.$refs doesn't work as the logs textarea is rendered dynamically.

frontend/src/views/Logs.vue

@@ -2,38 +2,31 @@
   <section class="logs content relative">
     <h1 class="title is-4">Logs</h1>
     <hr />
-    <b-loading :active="loading.logs" :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>
+    <log-view :loading="loading.logs" :lines="lines"></log-view>
   </section>
 </template>
 
 <script>
 import Vue from 'vue';
 import { mapState } from 'vuex';
-
-const reFormatLine = new RegExp(/^(.*) (.+?)\.go:[0-9]+:\s/g);
+import LogView from '../components/LogView.vue';
 
 export default Vue.extend({
+  components: {
+    LogView,
+  },
+
   data() {
     return {
-      lines: '',
+      lines: [],
       pollId: null,
     };
   },
 
   methods: {
-    formatLine: (l) => l.replace(reFormatLine, '<span class="stamp">$1</span> '),
-
     getLogs() {
       this.$api.getLogs().then((data) => {
         this.lines = data;
-
-        this.$nextTick(() => {
-          this.$refs.lines.scrollTop = this.$refs.lines.scrollHeight;
-        });
       });
     },
   },

internal/subimporter/importer.go

@@ -139,7 +139,7 @@ func (im *Importer) NewSession(fName, mode string, overWrite bool, listIDs []int
 
 	s := &Session{
 		im:        im,
-		log:       log.New(im.status.logBuf, "", log.Ldate|log.Ltime),
+		log:       log.New(im.status.logBuf, "", log.Ldate|log.Ltime|log.Lshortfile),
 		subQueue:  make(chan SubReq, commitBatchSize),
 		mode:      mode,
 		overwrite: overWrite,