Improved logs
This commit is contained in:
parent
f69165dd77
commit
e8db1f6a33
|
@ -18,6 +18,9 @@ function time(date) {
|
||||||
return format(new Date(date), 'HH:mm', { locale })
|
return format(new Date(date), 'HH:mm', { locale })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function conciseDate(date) {
|
||||||
|
return format(new Date(date), 'yy/MM/dd HH:mm:ss')
|
||||||
|
}
|
||||||
Vue.filter('dateAndTime', dateAndTime)
|
Vue.filter('dateAndTime', dateAndTime)
|
||||||
|
|
||||||
Vue.filter('shortDate', shortDate)
|
Vue.filter('shortDate', shortDate)
|
||||||
|
@ -26,4 +29,6 @@ Vue.filter('from', from)
|
||||||
|
|
||||||
Vue.filter('time', time)
|
Vue.filter('time', time)
|
||||||
|
|
||||||
|
Vue.filter('conciseDate', conciseDate)
|
||||||
|
|
||||||
export { dateAndTime, shortDate, from, time }
|
export { dateAndTime, shortDate, from, time }
|
||||||
|
|
|
@ -1,14 +1,66 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-toolbar> <v-text-field v-model="search" /> </v-toolbar>
|
<v-toolbar flat height="115">
|
||||||
|
<v-text-field
|
||||||
|
v-model="search"
|
||||||
|
rounded
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
hide-details
|
||||||
|
label="Pesquisar"
|
||||||
|
/>
|
||||||
|
<v-btn icon @click="$apollo.queries.logs.refetch()">
|
||||||
|
<v-icon>mdi-refresh</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-progress-linear :indeterminate="$apollo.queries.logs.loading" />
|
||||||
<div>
|
<div>
|
||||||
<v-data-table
|
<v-data-table
|
||||||
:items="items"
|
:items="items"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
:search="search"
|
:search="search"
|
||||||
|
calculate-widths
|
||||||
:footer-props="{ itemsPerPageOptions: [20, 40, 60, 80, 100] }"
|
:footer-props="{ itemsPerPageOptions: [20, 40, 60, 80, 100] }"
|
||||||
dense
|
>
|
||||||
></v-data-table>
|
<template slot="item.timestamp" slot-scope="{ item }">
|
||||||
|
<v-chip dense small>
|
||||||
|
{{ item.timestamp | conciseDate }}
|
||||||
|
</v-chip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="item.level" slot-scope="{ item }">
|
||||||
|
<v-alert border="left" dense dark :color="item.level.toLowerCase()">
|
||||||
|
{{ item.level.capitalize() }}
|
||||||
|
</v-alert>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="item.tags" slot-scope="{ item }">
|
||||||
|
<v-chip v-for="tag in item.tags" :key="tag" class="ml-1" small>{{
|
||||||
|
tag
|
||||||
|
}}</v-chip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="item.data" slot-scope="{ item }">
|
||||||
|
<v-dialog>
|
||||||
|
<template #activator="{ on }">
|
||||||
|
<v-btn icon v-on="on"><v-icon>mdi-magnify</v-icon> </v-btn>
|
||||||
|
</template>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
{{ item.message }}
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<vue-json-pretty
|
||||||
|
:data="item"
|
||||||
|
:show-double-quotes="false"
|
||||||
|
highlight-mouseover-node
|
||||||
|
show-line
|
||||||
|
show-length
|
||||||
|
/></v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -16,7 +68,13 @@
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
|
|
||||||
|
import VueJsonPretty from 'vue-json-pretty'
|
||||||
|
|
||||||
|
import 'vue-json-pretty/lib/styles.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { VueJsonPretty },
|
||||||
data: () => ({
|
data: () => ({
|
||||||
search: '',
|
search: '',
|
||||||
showLow: true,
|
showLow: true,
|
||||||
|
@ -30,17 +88,21 @@ export default {
|
||||||
text: 'Timestamp',
|
text: 'Timestamp',
|
||||||
value: 'timestamp'
|
value: 'timestamp'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
text: 'Tags',
|
|
||||||
value: 'tags'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: 'Mensagem',
|
text: 'Mensagem',
|
||||||
value: 'message'
|
value: 'message'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: 'Tags',
|
||||||
|
value: 'tags'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
text: 'Severidade',
|
text: 'Severidade',
|
||||||
value: 'level'
|
value: 'level'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Detalhes',
|
||||||
|
value: 'data'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
|
@ -48,7 +110,7 @@ export default {
|
||||||
items() {
|
items() {
|
||||||
return this.logs?.map(log => ({
|
return this.logs?.map(log => ({
|
||||||
...log,
|
...log,
|
||||||
timestamp: format(new Date(log.timestamp), 'yy/MM/dd HH:mm:ss')
|
data: JSON.parse(log.data)
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user