yunohost-admin/app/src/views/tool/ToolLog.vue

144 lines
3.9 KiB
Vue
Raw Normal View History

2020-08-30 17:12:15 +02:00
<template>
<view-base
2021-02-19 18:52:54 +01:00
:queries="queries" @queries-response="onQueriesResponse"
ref="view" skeleton="card-info-skeleton"
>
2020-08-30 17:12:15 +02:00
<!-- INFO CARD -->
<card :title="description" icon="info-circle">
2020-11-03 19:10:30 +01:00
<b-row
v-for="(value, prop) in info" :key="prop"
no-gutters class="row-line"
>
<b-col md="3" xl="2">
2020-11-03 19:10:30 +01:00
<strong>{{ $t('logs_' + prop) }}</strong>
</b-col>
2020-11-03 19:10:30 +01:00
<b-col>
<span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
2020-11-03 19:10:30 +01:00
<div v-else-if="prop === 'suboperations'">
<div v-for="operation in value" :key="operation.name">
2021-03-22 21:47:17 +01:00
<icon v-if="operation.success !== true" iname="times" class="text-danger" />
2020-11-03 19:10:30 +01:00
<b-link :to="{ name: 'tool-log', params: { name: operation.name } }">
{{ operation.description }}
</b-link>
</div>
</div>
2020-11-03 19:10:30 +01:00
<span v-else>{{ value }}</span>
</b-col>
</b-row>
</card>
2020-08-30 17:12:15 +02:00
<div v-if="info.error" class="alert alert-danger my-5">
2021-01-19 18:16:00 +01:00
<icon iname="exclamation-circle" /> <span v-html="$t('operation_failed_explanation')" />
</div>
2020-08-30 17:12:15 +02:00
<!-- LOGS CARD -->
<card :title="$t('logs')" icon="file-text" no-body>
<template #header-buttons>
<b-button @click="shareLogs" variant="success">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
2020-08-30 17:12:15 +02:00
</template>
2020-08-30 17:12:15 +02:00
<b-button
v-if="moreLogsAvailable"
variant="white" class="w-100 rounded-0"
2021-01-19 18:16:00 +01:00
@click="$refs.view.fetchQueries()"
2020-08-30 17:12:15 +02:00
>
<icon iname="plus" /> {{ $t('logs_more') }}
</b-button>
<pre class="log"><code v-html="logs" /></pre>
<b-button @click="shareLogs" variant="success" class="w-100 rounded-0">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</card>
</view-base>
2020-08-30 17:12:15 +02:00
</template>
<script>
import api, { objectToParams } from '@/api'
import { escapeHtml } from '@/helpers/commons'
2020-11-03 16:27:30 +01:00
import { readableDate } from '@/helpers/filters/date'
2020-08-30 17:12:15 +02:00
export default {
name: 'ToolLog',
props: {
name: { type: String, required: true }
2020-08-30 17:12:15 +02:00
},
data () {
return {
// Log data
description: undefined,
2020-11-03 19:10:30 +01:00
info: {},
logs: undefined,
2020-08-30 17:12:15 +02:00
// Logs line display
2020-11-03 19:10:30 +01:00
numberOfLines: 25,
2020-08-30 17:12:15 +02:00
moreLogsAvailable: false
}
},
computed: {
queries () {
2020-09-10 19:10:37 +02:00
const queryString = objectToParams({
2020-08-30 17:12:15 +02:00
filter_irrelevant: '',
2020-11-03 19:10:30 +01:00
with_suboperations: '',
2020-08-30 17:12:15 +02:00
number: this.numberOfLines
2020-09-10 19:10:37 +02:00
})
2021-02-19 18:52:54 +01:00
return [['GET', `logs/${this.name}?${queryString}`]]
}
},
2020-08-30 17:12:15 +02:00
methods: {
2021-02-19 18:52:54 +01:00
onQueriesResponse (log) {
if (log.logs.length === this.numberOfLines) {
this.moreLogsAvailable = true
this.numberOfLines *= 10
} else {
this.moreLogsAvailable = false
}
this.description = log.description
const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
this.logs = log.logs.map(line => {
2021-01-19 18:16:00 +01:00
const escaped = escapeHtml(line)
for (const level of levels) {
if (line.includes(level + ' -')) {
return `<span class="alert-${level === 'ERROR'
? 'danger'
2021-01-19 18:16:00 +01:00
: level.toLowerCase()}">${escaped}</span>`
2020-08-30 17:12:15 +02:00
}
}
2021-01-19 18:16:00 +01:00
return escaped
}).join('\n')
// eslint-disable-next-line
const { started_at, ended_at, error, success, suboperations } = log.metadata
const info = { path: log.log_path, started_at, ended_at }
if (!success) info.error = error
if (suboperations && suboperations.length) info.suboperations = suboperations
2021-03-22 21:47:17 +01:00
// eslint-disable-next-line
if (!ended_at) delete info.ended_at
this.info = info
2020-08-30 17:12:15 +02:00
},
shareLogs () {
2021-04-09 21:47:19 +02:00
api.get(
`logs/${this.name}/share`,
null,
{ key: 'share_logs', name: this.name },
{ websocket: true }
).then(({ url }) => {
2020-08-30 17:12:15 +02:00
window.open(url, '_blank')
})
}
},
filters: { readableDate }
2020-08-30 17:12:15 +02:00
}
</script>