156 lines
3.5 KiB
Vue
156 lines
3.5 KiB
Vue
<template>
|
|
<div
|
|
class="flex items-center justify-center"
|
|
v-if="$resources.getPlan?.loading"
|
|
>
|
|
<LoadingText />
|
|
</div>
|
|
<div v-else-if="$resources.getPlan?.data?.monitor_access">
|
|
<Card>
|
|
<Report
|
|
title="Request Logs"
|
|
:columns="[
|
|
{ label: 'Time', name: 'time', class: 'w-2/12' },
|
|
{ label: 'Method', name: 'method', class: 'w-1/12' },
|
|
{ label: 'Path', name: 'path', class: 'w-5/12' },
|
|
{ label: 'Status Code', name: 'status', class: 'w-2/12' },
|
|
{ label: 'CPU Time (seconds)', name: 'cpu_time', class: 'w-2/12' }
|
|
]"
|
|
:data="formatData"
|
|
:filters="[sortFilter, dateFilter]"
|
|
/>
|
|
|
|
<div
|
|
class="px-2 py-2 text-base text-gray-600"
|
|
v-if="
|
|
$resources.requestLogs.loading &&
|
|
$resources.requestLogs.data.length == 0
|
|
"
|
|
>
|
|
<LoadingText />
|
|
</div>
|
|
<div
|
|
class="py-2 text-base text-gray-600"
|
|
v-if="
|
|
!$resources.requestLogs.loading &&
|
|
$resources.requestLogs.data.length == 0
|
|
"
|
|
>
|
|
No data
|
|
</div>
|
|
<Button
|
|
v-if="$resources.requestLogs.data && $resources.requestLogs.data.length"
|
|
:loading="$resources.requestLogs.loading"
|
|
loadingText="Loading..."
|
|
@click="start += 10"
|
|
>
|
|
Load more
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
<div class="flex justify-center" v-else>
|
|
<span class="mt-16 text-base text-gray-700">
|
|
Your plan doesn't support this feature. Please upgrade your plan.
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { DateTime } from 'luxon';
|
|
import Report from '@/components/Report.vue';
|
|
|
|
export default {
|
|
name: 'SiteRequestLogs',
|
|
props: ['site'],
|
|
components: {
|
|
Report
|
|
},
|
|
data() {
|
|
return {
|
|
date: null,
|
|
sort: 'CPU Time (Descending)',
|
|
start: 0,
|
|
sortFilter: {
|
|
name: 'sort',
|
|
options: [
|
|
'Time (Ascending)',
|
|
'Time (Descending)',
|
|
'CPU Time (Descending)'
|
|
],
|
|
type: 'select',
|
|
value: 'CPU Time (Descending)'
|
|
},
|
|
dateFilter: {
|
|
name: 'date',
|
|
type: 'date',
|
|
value: null
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
sort(value) {
|
|
this.reset();
|
|
}
|
|
},
|
|
resources: {
|
|
requestLogs() {
|
|
return {
|
|
url: 'jcloud.api.analytics.request_logs',
|
|
params: {
|
|
name: this.site?.name,
|
|
timezone: DateTime.local().zoneName,
|
|
sort: this.sortFilter.value,
|
|
date: this.dateFilter.value || this.today,
|
|
start: this.start
|
|
},
|
|
auto: Boolean(this.today),
|
|
pageLength: 10,
|
|
keepData: true,
|
|
initialData: []
|
|
};
|
|
},
|
|
getPlan() {
|
|
return {
|
|
url: 'jcloud.api.site.current_plan',
|
|
params: {
|
|
name: this.site?.name
|
|
},
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
reset() {
|
|
this.$resources.requestLogs.reset();
|
|
this.start = 0;
|
|
}
|
|
},
|
|
computed: {
|
|
today() {
|
|
return DateTime.local().toISODate();
|
|
},
|
|
formatData() {
|
|
let requestData = this.$resources.requestLogs.data;
|
|
let data = [];
|
|
requestData.forEach(log => {
|
|
log.time = this.formatDate(log.timestamp, 'TIME_24_WITH_SHORT_OFFSET');
|
|
log.method = log.request.method;
|
|
log.path = log.request.path;
|
|
log.status = log.request.status_code;
|
|
log.cpu_time = this.$formatCPUTime(log.duration);
|
|
|
|
let row = [
|
|
{ name: 'Time', value: log.time, class: 'w-2/12' },
|
|
{ name: 'Method', value: log.method, class: 'w-1/12' },
|
|
{ name: 'Path', value: log.path, class: 'w-5/12 break-all pr-2' },
|
|
{ name: 'Status', value: log.status, class: 'w-2/12' },
|
|
{ name: 'CPU Time', value: log.cpu_time, class: 'w-2/12' }
|
|
];
|
|
data.push(row);
|
|
});
|
|
return data;
|
|
}
|
|
}
|
|
};
|
|
</script>
|