minor updates to how we display data in events view page.
This commit is contained in:
ArabCoders
@@ -1,235 +1,258 @@
|
||||
<style scoped>
|
||||
.text-container {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left" v-if="toggleFilter">
|
||||
<input type="search" v-model.lazy="query" class="input" id="filter" placeholder="Filter">
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter"
|
||||
:disabled="!item?.logs || item.logs.length < 1" v-tooltip.bottom="'Filter event logs.'">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="control">
|
||||
<button class="button is-warning" @click="resetEvent(0 === item.status ? 4 : 0)"
|
||||
:disabled="1 === item.status" v-tooltip.bottom="'Reset event.'">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{ 'fa-trash-arrow-up': 0 !== item.status, 'fa-power-off': 0 === item.status }"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-danger" @click="deleteItem" :disabled="1 === item.status"
|
||||
v-tooltip.bottom="'Delete event.'">
|
||||
<span class="icon"><i class="fas fa-trash" /></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="loadContent()" :class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading" v-tooltip.bottom="'Reload event data.'">
|
||||
<span class="icon"><i class="fas fa-sync" /></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left" v-if="toggleFilter">
|
||||
<input type="search" v-model.lazy="query" class="input" id="filter" placeholder="Filter">
|
||||
<span class="icon is-left"><i class="fas fa-filter"/></span>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="isLoading">
|
||||
<Message v-if="isLoading" message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..." />
|
||||
<div class="control">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter"
|
||||
:disabled="!item?.logs || item.logs.length < 1" v-tooltip.bottom="'Filter event logs.'">
|
||||
<span class="icon"><i class="fas fa-filter"/></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="control">
|
||||
<button class="button is-warning" @click="resetEvent(0 === item.status ? 4 : 0)"
|
||||
:disabled="1 === item.status" v-tooltip.bottom="'Reset event.'">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{ 'fa-trash-arrow-up': 0 !== item.status, 'fa-power-off': 0 === item.status }"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-danger" @click="deleteItem" :disabled="1 === item.status"
|
||||
v-tooltip.bottom="'Delete event.'">
|
||||
<span class="icon"><i class="fas fa-trash"/></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-purple" @click="wrapLines = !wrapLines" v-tooltip.bottom="'Toggle wrap line'">
|
||||
<span class="icon"><i class="fas fa-text-width"/></span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="loadContent()" :class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading" v-tooltip.bottom="'Reload event data.'">
|
||||
<span class="icon"><i class="fas fa-sync"/></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isLoading" class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<div class="notification">
|
||||
<p class="title is-5">
|
||||
Event <span class="tag is-info">{{ item.event }}</span>
|
||||
<template v-if="item.reference">
|
||||
with reference <span class="tag is-info is-light">{{ item.reference }}</span>
|
||||
</template>
|
||||
was created
|
||||
<span class="tag is-warning">
|
||||
<time class="has-tooltip" v-tooltip="moment(item.created_at).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment(item.created_at).fromNow() }}
|
||||
</time>
|
||||
</span>, and last updated
|
||||
<span class="tag is-danger">
|
||||
<span v-if="!item.updated_at">not started</span>
|
||||
<time v-else class="has-tooltip"
|
||||
v-tooltip="moment(item.updated_at).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment(item.updated_at).fromNow() }}
|
||||
</time>
|
||||
</span>,
|
||||
with status of <span class="tag" :class="getStatusClass(item.status)">{{ item.status }}:
|
||||
{{ item.status_name }}</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.event_data && Object.keys(item.event_data).length > 0">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleData = !toggleData">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleData, 'fa-arrow-up': toggleData }"></i>
|
||||
</span>
|
||||
<span>Show attached data</span>
|
||||
</h2>
|
||||
<div v-if="toggleData" class="is-relative">
|
||||
<code style="word-break: break-word" class="is-pre-wrap is-block">
|
||||
{{ JSON.stringify(item.event_data, null, 2) }}
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy event data'"
|
||||
@click="() => copyText(JSON.stringify(item.event_data, null, 2))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.logs && item.logs.length > 0">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleLogs = !toggleLogs">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleLogs, 'fa-arrow-up': toggleLogs }"></i>
|
||||
</span>
|
||||
<span>Show event logs</span>
|
||||
</h2>
|
||||
<div v-if="toggleLogs" class="is-relative">
|
||||
<code class="is-pre-wrap is-block">
|
||||
<span class="is-log-line is-block pt-1" v-for="(item, index) in filteredRows" :key="'log_line-' + index"
|
||||
v-text="item" />
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy logs'" @click="() => copyText(filteredRows.join('\n'))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.options">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleOptions = !toggleOptions">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleOptions, 'fa-arrow-up': toggleOptions }"></i>
|
||||
</span>
|
||||
<span>Show attached options</span>
|
||||
</h2>
|
||||
<div v-if="toggleOptions" class="is-relative">
|
||||
<code style="word-break: break-word" class="is-pre-wrap is-block">
|
||||
{{ JSON.stringify(item.options, null, 2) }}
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy options'"
|
||||
@click="() => copyText(JSON.stringify(item.options, null, 2))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="isLoading && !item?.id">
|
||||
<Message v-if="isLoading" message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isLoading || item?.id" class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<div class="notification">
|
||||
<p class="title is-5">
|
||||
Event <span class="tag is-info">{{ item.event }}</span>
|
||||
<template v-if="item.reference">
|
||||
with reference <span class="tag is-info is-light">{{ item.reference }}</span>
|
||||
</template>
|
||||
was created
|
||||
<span class="tag is-warning">
|
||||
<time class="has-tooltip" v-tooltip="moment(item.created_at).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment(item.created_at).fromNow() }}
|
||||
</time>
|
||||
</span>, and last updated
|
||||
<span class="tag is-danger">
|
||||
<span v-if="!item.updated_at">not started</span>
|
||||
<time v-else class="has-tooltip"
|
||||
v-tooltip="moment(item.updated_at).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment(item.updated_at).fromNow() }}
|
||||
</time>
|
||||
</span>,
|
||||
with status of <span class="tag" :class="getStatusClass(item.status)">{{ item.status }}:
|
||||
{{ item.status_name }}</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.event_data && Object.keys(item.event_data).length > 0">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleData = !toggleData">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleData, 'fa-arrow-up': toggleData }"/>
|
||||
</span>
|
||||
<span>{{ !toggleData ? 'Show' : 'Hide' }} attached data</span>
|
||||
</h2>
|
||||
<div v-if="toggleData" class="is-relative">
|
||||
<code class="text-container is-block" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
|
||||
{{ JSON.stringify(item.event_data, null, 2) }}
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy event data'"
|
||||
@click="() => copyText(JSON.stringify(item.event_data, null, 2))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.logs && item.logs.length > 0">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleLogs = !toggleLogs">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleLogs, 'fa-arrow-up': toggleLogs }"/>
|
||||
</span>
|
||||
<span>{{ !toggleLogs ? 'Show' : 'Hide' }} event logs</span>
|
||||
</h2>
|
||||
<div v-if="toggleLogs" class="is-relative">
|
||||
<code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
|
||||
<span class="is-log-line is-block pt-1" v-for="(item, index) in filteredRows" :key="'log_line-' + index"
|
||||
v-text="item"/>
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy logs'" @click="() => copyText(filteredRows.join('\n'))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="item?.options && Object.keys(item.options).length > 0">
|
||||
<h2 class="title is-4 is-clickable is-unselectable" @click="toggleOptions = !toggleOptions">
|
||||
<span class="icon">
|
||||
<i class="fas" :class="{ 'fa-arrow-down': !toggleOptions, 'fa-arrow-up': toggleOptions }"></i>
|
||||
</span>
|
||||
<span>{{ !toggleOptions ? 'Show' : 'Hide' }} attached options</span>
|
||||
</h2>
|
||||
<div v-if="toggleOptions" class="is-relative">
|
||||
<code class="is-block text-container" :class="{ 'is-pre': !wrapLines, 'is-pre-wrap': wrapLines }">
|
||||
{{ JSON.stringify(item.options, null, 2) }}
|
||||
</code>
|
||||
<button class="button m-4" v-tooltip="'Copy options'"
|
||||
@click="() => copyText(JSON.stringify(item.options, null, 2))"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { copyText, notification, parse_api_response, TOOLTIP_DATE_FORMAT } from '~/utils/index'
|
||||
import {copyText, notification, parse_api_response, TOOLTIP_DATE_FORMAT} from '~/utils/index'
|
||||
import request from '~/utils/request'
|
||||
import moment from 'moment'
|
||||
import { getStatusClass, makeName } from '~/utils/events/helpers'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import {getStatusClass, makeName} from '~/utils/events/helpers'
|
||||
import {useStorage} from '@vueuse/core'
|
||||
|
||||
const emitter = defineEmits(['closeOverlay', 'deleted'])
|
||||
const props = defineProps({ id: { type: Number, required: true } })
|
||||
const props = defineProps({id: {type: Number, required: true}})
|
||||
|
||||
const query = ref()
|
||||
const item = ref({})
|
||||
const isLoading = ref(true)
|
||||
const toggleFilter = ref(false)
|
||||
|
||||
const timer = ref()
|
||||
const toggleLogs = useStorage('events_toggle_logs', true)
|
||||
const toggleData = useStorage('events_toggle_data', true)
|
||||
const toggleOptions = useStorage('events_toggle_options', true)
|
||||
const wrapLines = useStorage('logs_wrap_lines', false)
|
||||
|
||||
watch(toggleFilter, () => {
|
||||
if (!toggleFilter.value) {
|
||||
query.value = ''
|
||||
}
|
||||
if (!toggleFilter.value) {
|
||||
query.value = ''
|
||||
}
|
||||
});
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if (!query.value) {
|
||||
return item.value.logs ?? []
|
||||
}
|
||||
return item.value.logs.filter(m => m.toLowerCase().includes(query.value.toLowerCase()));
|
||||
if (!query.value) {
|
||||
return item.value.logs ?? []
|
||||
}
|
||||
return item.value.logs.filter(m => m.toLowerCase().includes(query.value.toLowerCase()));
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!props.id) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: 'Error ID not provided.'
|
||||
})
|
||||
}
|
||||
return await loadContent()
|
||||
if (!props.id) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: 'Error ID not provided.'
|
||||
})
|
||||
}
|
||||
return await loadContent()
|
||||
})
|
||||
|
||||
const loadContent = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
const response = await request(`/system/events/${props.id}`,)
|
||||
const json = await parse_api_response(response)
|
||||
try {
|
||||
isLoading.value = true
|
||||
const response = await request(`/system/events/${props.id}`,)
|
||||
const json = await parse_api_response(response)
|
||||
|
||||
if (200 !== response.status) {
|
||||
notification('error', 'Error', `Errors viewItem request error. ${json.error.code}: ${json.error.message}`)
|
||||
return
|
||||
}
|
||||
|
||||
item.value = json
|
||||
|
||||
useHead({ title: `Event: ${json.id}` })
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
notification('crit', 'Error', `Errors viewItem Request failure. ${e.message}`
|
||||
)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
if (200 !== response.status) {
|
||||
notification('error', 'Error', `Errors viewItem request error. ${json.error.code}: ${json.error.message}`)
|
||||
return
|
||||
}
|
||||
|
||||
if (1 === json.status) {
|
||||
if (!timer.value) {
|
||||
timer.value = setInterval(async () => await loadContent(), 5000)
|
||||
}
|
||||
} else {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value)
|
||||
timer.value = null
|
||||
}
|
||||
}
|
||||
|
||||
item.value = json
|
||||
|
||||
useHead({title: `Event: ${json.id}`})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
notification('crit', 'Error', `Errors viewItem Request failure. ${e.message}`
|
||||
)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const deleteItem = async () => emitter('delete', item.value)
|
||||
|
||||
const resetEvent = async (status = 0) => {
|
||||
if (!confirm(`Reset '${makeName(item.value.id)}'?`)) {
|
||||
return
|
||||
if (!confirm(`Reset '${makeName(item.value.id)}'?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(`/system/events/${item.value.id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({
|
||||
status: status,
|
||||
reset_logs: true,
|
||||
})
|
||||
})
|
||||
|
||||
const json = await parse_api_response(response)
|
||||
|
||||
if (200 !== response.status) {
|
||||
notification('error', 'Error', `Events view patch Request error. ${json.error.code}: ${json.error.message}`)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(`/system/events/${item.value.id}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({
|
||||
status: status,
|
||||
reset_logs: true,
|
||||
})
|
||||
})
|
||||
|
||||
const json = await parse_api_response(response)
|
||||
|
||||
if (200 !== response.status) {
|
||||
notification('error', 'Error', `Events view patch Request error. ${json.error.code}: ${json.error.message}`)
|
||||
return
|
||||
}
|
||||
|
||||
item.value = json
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
notification('crit', 'Error', `Events view patch Request failure. ${e.message}`
|
||||
)
|
||||
}
|
||||
item.value = json
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
notification('crit', 'Error', `Events view patch Request failure. ${e.message}`
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -10,25 +10,25 @@
|
||||
<div class="field is-grouped">
|
||||
<div class="control has-icons-left" v-if="toggleFilter || query">
|
||||
<input type="search" v-model.lazy="query" class="input" id="filter" placeholder="Filter">
|
||||
<span class="icon is-left"><i class="fas fa-filter" /></span>
|
||||
<span class="icon is-left"><i class="fas fa-filter"/></span>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
|
||||
<span class="icon"><i class="fas fa-filter" /></span>
|
||||
<span class="icon"><i class="fas fa-filter"/></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-danger" @click="deleteAll" v-tooltip.bottom="'Remove All non pending events.'">
|
||||
<span class="icon"><i class="fas fa-trash" /></span>
|
||||
<span class="icon"><i class="fas fa-trash"/></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="loadContent(page, false)" :class="{ 'is-loading': isLoading }"
|
||||
:disabled="isLoading">
|
||||
<span class="icon"><i class="fas fa-sync" /></span>
|
||||
:disabled="isLoading">
|
||||
<span class="icon"><i class="fas fa-sync"/></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
@@ -41,16 +41,16 @@
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="total && last_page > 1">
|
||||
<Pager @navigate="ePage => loadContent(ePage)" :last_page="last_page" :page="page" :is-loading="isLoading" />
|
||||
<Pager @navigate="ePage => loadContent(ePage)" :last_page="last_page" :page="page" :is-loading="isLoading"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline" v-if="filteredRows.length < 1">
|
||||
<div class="column is-12">
|
||||
<Message v-if="isLoading" message_class="has-background-info-90 has-text-dark" title="Loading"
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..." />
|
||||
icon="fas fa-spinner fa-spin" message="Loading data. Please wait..."/>
|
||||
<Message v-else class="has-background-warning-80 has-text-dark" title="Warning"
|
||||
icon="fas fa-exclamation-triangle">
|
||||
icon="fas fa-exclamation-triangle">
|
||||
<p>No items found.</p>
|
||||
<p v-if="query">Search for <strong>{{ query }}</strong> returned no results.</p>
|
||||
</Message>
|
||||
@@ -62,21 +62,21 @@
|
||||
<div class="card">
|
||||
<header class="card-header is-align-self-flex-end">
|
||||
<div class="card-header-title is-block">
|
||||
<NuxtLink @click="quick_view = item.id" v-text="makeName(item.id)" />
|
||||
<NuxtLink @click="quick_view = item.id" v-text="makeName(item.id)"/>
|
||||
<div class="is-pulled-right is-hidden-tablet">
|
||||
<span class="tag" :class="getStatusClass(item.status)">{{ statuses[item.status].name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header-icon">
|
||||
<span class="icon" @click="item._display = !item._display" v-if="Object.keys(item.event_data).length > 0">
|
||||
<i class="fas" :class="{ 'fa-arrow-up': item?._display, 'fa-arrow-down': !item?._display }" />
|
||||
<i class="fas" :class="{ 'fa-arrow-up': item?._display, 'fa-arrow-down': !item?._display }"/>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card-content p-0 m-0" v-if="item._display">
|
||||
<pre class="p-0 is-pre" style="position: relative; max-height:30vh; overflow-y:scroll;"><code>{{
|
||||
JSON.stringify(item.event_data, null, 2)
|
||||
}}</code><button class="button is-small m-4"
|
||||
JSON.stringify(item.event_data, null, 2)
|
||||
}}</code><button class="button is-small m-4"
|
||||
@click="() => copyText(JSON.stringify(item.event_data), false)"
|
||||
style="position: absolute; top:0; right:0;">
|
||||
<span class="icon"><i class="fas fa-copy"></i></span></button></pre>
|
||||
@@ -107,7 +107,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<div class="card-footer-item" v-text="item.event" />
|
||||
<div class="card-footer-item" v-text="item.event"/>
|
||||
<div class="card-footer-item">
|
||||
<button class="button is-warning is-fullwidth" @click="resetEvent(item, 0 === item.status ? 4 : 0)">
|
||||
<span class="icon"><i class="fas fa-trash-arrow-up"></i></span>
|
||||
@@ -128,7 +128,7 @@
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" :toggle="show_page_tips"
|
||||
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
|
||||
@toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
|
||||
<ul>
|
||||
<li>Resetting event will return it to the queue to be dispatched again.</li>
|
||||
<li>Stopping event will prevent it from being dispatched.</li>
|
||||
@@ -140,20 +140,20 @@
|
||||
|
||||
<template v-if="quick_view">
|
||||
<Overlay @closeOverlay="quick_view = null" :title="`#${makeName(quick_view)}`">
|
||||
<EventView :id="quick_view" @delete="item => deleteItem(item)" />
|
||||
<EventView :id="quick_view" @delete="item => deleteItem(item)"/>
|
||||
</Overlay>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { copyText, notification, parse_api_response } from '~/utils/index'
|
||||
import {copyText, notification, parse_api_response} from '~/utils/index'
|
||||
import request from '~/utils/request'
|
||||
import moment from 'moment'
|
||||
import Pager from '~/components/Pager'
|
||||
import { getStatusClass, makeName } from '~/utils/events/helpers'
|
||||
import {getStatusClass, makeName} from '~/utils/events/helpers'
|
||||
import Message from '~/components/Message'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import {useStorage} from '@vueuse/core'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
@@ -228,7 +228,7 @@ const loadContent = async (pageNumber, updateHistory = true) => {
|
||||
|
||||
let title = `Events - Page #${pageNumber}`
|
||||
|
||||
useHead({ title })
|
||||
useHead({title})
|
||||
|
||||
if (true === Boolean(updateHistory)) {
|
||||
let history_query = {
|
||||
@@ -240,7 +240,7 @@ const loadContent = async (pageNumber, updateHistory = true) => {
|
||||
history_query.filter = query.value
|
||||
}
|
||||
|
||||
await useRouter().push({ path: '/events', query: history_query })
|
||||
await useRouter().push({path: '/events', query: history_query})
|
||||
}
|
||||
|
||||
if ('paging' in json) {
|
||||
@@ -287,7 +287,7 @@ const deleteItem = async item => {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(`/system/events/${item.id}`, { method: 'DELETE' })
|
||||
const response = await request(`/system/events/${item.id}`, {method: 'DELETE'})
|
||||
|
||||
if (200 !== response.status) {
|
||||
const json = await parse_api_response(response)
|
||||
@@ -346,7 +346,7 @@ const deleteAll = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await request(`/system/events/`, { method: 'DELETE' })
|
||||
const response = await request(`/system/events/`, {method: 'DELETE'})
|
||||
if (200 !== response.status) {
|
||||
const json = await parse_api_response(response)
|
||||
notification('error', 'Error', `Failed to delete events. ${json.error.code}: ${json.error.message}`)
|
||||
|
||||
Reference in New Issue
Block a user