add ToolLogs View and route

app/src/components/globals/Icon.vue

@@ -20,6 +20,7 @@ export default {
   &.lg {
     width: 3rem;
     font-size: 1.5rem;
+    min-width: 3rem;
   }
 
   &.fs-sm {

app/src/locales/en.json

@@ -275,7 +275,8 @@
         "domain": "Search for domains...",
         "group": "Search for groups...",
         "service": "Search for services",
-        "user": "Search for users..."
+        "user": "Search for users...",
+        "logs": "Search in logs..."
     },
     "search_for_apps": "Search for apps...",
     "select_all": "Select all",

app/src/routes.js

@@ -4,7 +4,7 @@ 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 } from './views/tool'
+import { ToolList, ToolLogs } from './views/tool'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
@@ -184,6 +184,17 @@ const routes = [
         { name: 'tool-list', trad: 'tools' }
       ]
     }
+  },
+  {
+    name: 'tool-logs',
+    path: '/tools/logs',
+    component: ToolLogs,
+    meta: {
+      breadcrumb: [
+        { name: 'tool-list', trad: 'tools' },
+        { name: 'tool-list', trad: 'logs' }
+      ]
+    }
   }
 ]
 

app/src/views/tool/ToolList.vue

@@ -22,7 +22,7 @@ export default {
   data: () => {
     return {
       menu: [
-        { id: 0, routeName: 'tool-logs', icon: 'file-text-o', translation: 'logs' },
+        { id: 0, routeName: 'tool-logs', icon: 'book', translation: 'logs' },
         { id: 1, routeName: 'tool-migrations', icon: 'share', translation: 'migrations' },
         { id: 2, routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
         { id: 3, routeName: 'tool-adminpw', icon: 'key-modern', translation: 'tools_adminpw' },

app/src/views/tool/ToolLogs.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="tool-logs">
+    <div class="actions">
+      <b-input-group>
+        <b-input-group-prepend is-text>
+          <icon iname="search" />
+        </b-input-group-prepend>
+        <b-form-input id="search-logs" v-model="search" :placeholder="$t('search.logs')" />
+      </b-input-group>
+    </div>
+
+    <b-card no-body v-if="operations">
+      <template v-slot:header>
+        <h2><icon iname="wrench" /> {{ $t('logs_operation') }}</h2>
+      </template>
+      <b-list-group flush>
+        <!-- FIXME format title and span date as text and text'ago -->
+        <b-list-group-item
+          v-for="log in filteredOperations" :key="log.name"
+          :to="{ name: 'tool-log', params: { name: log.name } }"
+          :title="log.started_at"
+        >
+          <small class="mr-3">{{ log.started_at }} </small>
+          <icon :iname="log.icon" :class="'text-' + log.class" />
+          {{ log.description }}
+        </b-list-group-item>
+      </b-list-group>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import api from '@/helpers/api'
+
+export default {
+  name: 'ServiceList',
+
+  data: function () {
+    return {
+      search: '',
+      operations: undefined
+    }
+  },
+
+  computed: {
+    filteredOperations () {
+      if (!this.operations) return
+      const search = this.search.toLowerCase()
+      return this.operations.filter(({ description }) => {
+        return description.toLowerCase().includes(search)
+      })
+    }
+  },
+
+  methods: {
+    fetchData () {
+      // simply use the api helper since we will not store the request's result.
+      // FIXME only prints operation for now (can't receive 'history', 'app', 'service', etc.)
+      api.get('logs?limit=25&with_details').then(({ operation }) => {
+        operation.forEach((log, index) => {
+          if (log.success === '?') {
+            operation[index].icon = 'question'
+            operation[index].class = 'warning'
+          } else if (log.success) {
+            operation[index].icon = 'check'
+            operation[index].class = 'success'
+          } else {
+            operation[index].icon = 'close'
+            operation[index].class = 'success'
+          }
+        })
+        this.operations = operation
+      })
+    }
+  },
+
+  created () {
+    this.fetchData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

app/src/views/tool/index.js

@@ -1 +1,2 @@
 export { default as ToolList } from './ToolList'
+export { default as ToolLogs } from './ToolLogs'