add ToolLog view

app/src/router/routes.js

@@ -1,10 +1,10 @@
 import Home from '@/views/Home'
 import Login from '@/views/Login'
+import ToolList from '@/views/tool/ToolList'
 import { UserList, UserCreate, UserInfo, UserEdit } from '@/views/user'
 import { GroupList, GroupCreate } from '@/views/group'
 import { DomainList, DomainAdd, DomainInfo, DomainDns, DomainCert } from '@/views/domain'
 import { ServiceList, ServiceInfo } from '@/views/service'
-import { ToolList, ToolLogs } from '@/views/tool'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -188,11 +188,24 @@ const routes = [
   {
     name: 'tool-logs',
     path: '/tools/logs',
-    component: ToolLogs,
+    component: () => import(/* webpackChunkName: "views/tools" */ '@/views/tool/ToolLogs'),
     meta: {
       breadcrumb: [
         { name: 'tool-list', trad: 'tools' },
-        { name: 'tool-list', trad: 'logs' }
+        { name: 'tool-logs', trad: 'logs' }
+      ]
+    }
+  },
+  {
+    name: 'tool-log',
+    path: '/tools/:name',
+    component: () => import(/* webpackChunkName: "views/tools" */ '@/views/tool/ToolLog'),
+    props: true,
+    meta: {
+      breadcrumb: [
+        { name: 'tool-list', trad: 'tools' },
+        { name: 'tool-logs', trad: 'logs' },
+        { name: 'tool-log', param: 'name' }
       ]
     }
   }

app/src/views/tool/ToolLog.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="tool-log">
+    <!-- INFO CARD -->
+    <b-card class="mb-3">
+      <template v-slot:header>
+        <h2><icon iname="info-circle" /> {{ description }}</h2>
+      </template>
+
+      <dl>
+        <dt v-t="'logs_path'" />
+        <dd>{{ log_path }}</dd>
+        <hr>
+
+        <template v-if="metadata.started_at">
+          <dt v-t="'logs_started_at'" />
+          <dd>{{ metadata.started_at | readableDate }}</dd>
+          <hr>
+        </template>
+
+        <template v-if="metadata.ended_at">
+          <dt v-t="'logs_ended_at'" />
+          <dd>{{ metadata.ended_at | readableDate }}</dd>
+          <hr>
+        </template>
+
+        <template v-if="metadata.error">
+          <dt v-t="'logs_ended_at'" />
+          <dd>{{ metadata.error }}</dd>
+          <hr>
+        </template>
+      </dl>
+    </b-card>
+
+    <b-alert v-if="metadata.error" variant="danger" show>
+      <icon iname="exclamation-circle" /> {{ $t('operation_failed_explanation') }}
+    </b-alert>
+
+    <!-- LOGS CARD -->
+    <b-card class="log">
+      <template v-slot:header>
+        <div class="d-sm-flex justify-content-sm-between">
+          <h2><icon iname="file-text" /> {{ metadata ? $t('logs') : log_path }}</h2>
+          <b-button @click="shareLogs">
+            <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+          </b-button>
+        </div>
+      </template>
+      <b-button
+        v-if="moreLogsAvailable"
+        variant="info" class="w-100 rounded-0"
+        @click="fetchData"
+      >
+        <icon iname="plus" /> {{ $t('logs_more') }}
+      </b-button>
+      <pre><code v-html="logs" /></pre>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+import { readableDate } from '@/filters/date'
+
+export default {
+  name: 'ToolLog',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      // Log data
+      description: '',
+      log_path: '',
+      logs: '',
+      metadata: {},
+      // Logs line display
+      numberOfLines: 50,
+      moreLogsAvailable: false
+    }
+  },
+
+  filters: {
+    readableDate
+  },
+
+  methods: {
+    fetchData () {
+      const params = {
+        path: this.name,
+        filter_irrelevant: '',
+        number: this.numberOfLines
+      }
+
+      api.get('logs/display', params).then(log => {
+        if (log.logs.length === this.numberOfLines) {
+          this.moreLogsAvailable = true
+          this.numberOfLines *= 10
+        } else {
+          this.moreLogsAvailable = false
+        }
+        this.description = log.description
+        this.log_path = log.log_path
+        this.metadata = log.metadata
+
+        const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
+        this.logs = log.logs.map(line => {
+          for (const level of levels) {
+            if (line.includes(level + ' -')) {
+              return `<span class="alert-${level === 'ERROR' ? 'danger' : level.toLowerCase()}">${line}</span>`
+            }
+          }
+          return line
+        }).join('\n')
+      })
+    },
+
+    shareLogs () {
+      api.get('/logs/display', { path: this.name, share: '' }).then(({ url }) => {
+        window.open(url, '_blank')
+      })
+    }
+  },
+
+  created () {
+    this.fetchData()
+  }
+}
+</script>