feat(fe): new style of the task log window

web2/src/App.vue

@@ -41,7 +41,8 @@
     <EditDialog
       v-model="taskLogDialog"
       save-button-text="Delete"
-      :max-width="800"
+      :max-width="1000"
+      :hide-buttons="true"
       @close="onTaskLogDialogClosed()"
     >
       <template v-slot:title={}>
@@ -52,6 +53,12 @@
         >{{ template ? template.alias : null }}</router-link>
         <v-icon>mdi-chevron-right</v-icon>
         <span class="breadcrumbs__item">Task #{{ task ? task.id : null }}</span>
+        <v-spacer></v-spacer>
+        <v-btn
+          icon
+        >
+          <v-icon @click="taskLogDialog = false; onTaskLogDialogClosed()">mdi-close</v-icon>
+        </v-btn>
       </template>
       <template v-slot:form="{}">
         <TaskLogView :project-id="projectId" :item-id="task ? task.id : null" />

web2/src/components/EditDialog.vue

@@ -23,7 +23,7 @@
         ></slot>
       </v-card-text>
 
-      <v-card-actions>
+      <v-card-actions v-if="!hideButtons">
         <v-spacer></v-spacer>
 
         <v-btn
@@ -64,6 +64,7 @@ export default {
     value: Boolean,
     maxWidth: Number,
     eventName: String,
+    hideButtons: Boolean,
   },
 
   data() {

web2/src/components/TaskLogView.vue

@@ -38,16 +38,20 @@
         <v-col>
           <v-list-item class="pa-0">
             <v-list-item-content>
-              <v-list-item-title>Ended</v-list-item-title>
-              <v-list-item-subtitle>{{ item.end | formatDate }}</v-list-item-subtitle>
+              <v-list-item-title>Duration</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ [item.start, item.end] | formatMilliseconds }}
+              </v-list-item-subtitle>
             </v-list-item-content>
           </v-list-item>
         </v-col>
       </v-row>
     </v-container>
-    <div class="task-log-view">
+    <div class="task-log-view" ref="output">
       <div class="task-log-view__record" v-for="record in output" :key="record.id">
-        <div class="task-log-view__time">{{ record.time | formatTime }}</div>
+        <div class="task-log-view__time">
+          {{ record.time | formatTime }}
+        </div>
         <div class="task-log-view__output">{{ record.output }}</div>
       </div>
     </div>
@@ -55,11 +59,13 @@
 </template>
 <style lang="scss">
   .task-log-view {
-    height: 400px;
+    background: black;
+    color: white;
+    height: calc(100vh - 300px);
     overflow: auto;
-    border: 1px solid gray;
-    border-radius: 4px;
     font-family: monospace;
+    margin: 0 -24px -20px;
+    padding: 5px 10px;
   }
 
   .task-log-view__record {
@@ -69,11 +75,12 @@
   }
 
   .task-log-view__time {
-    width: 150px;
+    width: 120px;
+    min-width: 120px;
   }
 
   .task-log-view__output {
-    width: calc(100% - 250px);
+    width: 100%;
   }
 </style>
 <script>
@@ -131,6 +138,9 @@ export default {
           break;
         case 'log':
           this.output.push(data);
+          setTimeout(() => {
+            this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
+          }, 200);
           break;
         default:
           break;

web2/src/main.js

@@ -8,7 +8,37 @@ Vue.config.productionTip = false;
 
 Vue.filter('formatDate', (value) => (value ? moment(String(value)).fromNow() : '—'));
 Vue.filter('formatTime', (value) => (value ? moment(String(value)).format('LTS') : '—'));
-Vue.filter('formatMilliseconds', (value) => (value ? moment.duration(parseInt(value, 10), 'milliseconds').humanize() : '—'));
+Vue.filter('formatMilliseconds', (value) => {
+  if (value == null || value === '') {
+    return '—';
+  }
+
+  let duration;
+  if (typeof value === 'string') {
+    duration = parseInt(value, 10);
+  } else if (typeof value === 'number') {
+    duration = value;
+  } else if (Array.isArray(value)) {
+    if (value.length !== 2) {
+      throw new Error('formatMilliseconds: invalid value format');
+    }
+
+    if (value[0] == null || value[0] === '') {
+      return '—';
+    }
+    const start = typeof value[0] === 'string' ? new Date(value[0]) : value[0];
+    let end;
+
+    if (value[1] == null || value[1] === '') {
+      end = Date.now();
+    } else {
+      end = typeof value[1] === 'string' ? new Date(value[1]) : value[1];
+    }
+
+    duration = end - start;
+  }
+  return moment.duration(duration, 'milliseconds').humanize();
+});
 
 new Vue({
   router,

web2/src/views/project/History.vue

@@ -32,7 +32,7 @@
       </template>
 
       <template v-slot:item.end="{ item }">
-        {{ (new Date(item.end) - new Date(item.start)) | formatMilliseconds }}
+        {{ [item.start, item.end] | formatMilliseconds }}
       </template>
     </v-data-table>
   </div>

web2/src/views/project/TemplateView.vue

@@ -163,7 +163,6 @@
       </v-row>
     </v-container>
 
-<!--    <h4 class="ml-4 mt-1">Running History</h4>-->
     <v-data-table
       :headers="headers"
       :items="tasks"
@@ -183,7 +182,7 @@
       </template>
 
       <template v-slot:item.end="{ item }">
-          {{ (new Date(item.end) - new Date(item.start)) | formatMilliseconds }}
+        {{ [item.start, item.end] | formatMilliseconds }}
       </template>
     </v-data-table>
   </div>
@@ -234,7 +233,7 @@ export default {
         },
         {
           text: 'Duration',
-          value: 'start',
+          value: 'end',
           sortable: false,
         },
       ],