add ToolLogs View and route

This commit is contained in:
Axolotle 2020-08-08 20:17:12 +02:00
parent f25c51d560
commit ca48a5cc86
6 changed files with 101 additions and 3 deletions

View file

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

View file

@ -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",

View file

@ -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' }
]
}
}
]

View file

@ -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' },

View file

@ -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>

View file

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