113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{
|
|
title: 'Query Logs',
|
|
size: '2xl',
|
|
}"
|
|
>
|
|
<template #body-content>
|
|
<ObjectList :options="listOptions" v-if="!selectedRow" />
|
|
<div v-else>
|
|
<div class="flex flex-row items-center justify-between">
|
|
<Button icon="arrow-left" @click="selectedRow = null">Back</Button>
|
|
<Button variant="outline" iconLeft="play" @click="rerunQuery"
|
|
>Re-run Query</Button
|
|
>
|
|
</div>
|
|
<div class="mt-4">
|
|
<p class="text-sm text-gray-600">Query</p>
|
|
<pre
|
|
class="mt-1.5 max-h-52 overflow-y-auto whitespace-pre-wrap rounded bg-gray-50 px-2 py-1.5 text-sm text-gray-600"
|
|
>{{ selectedRow.query }}</pre
|
|
>
|
|
</div>
|
|
<div class="mt-3">
|
|
<p class="text-sm text-gray-600">Timestamp</p>
|
|
<p class="mt-1.5 text-sm text-gray-700">
|
|
{{ new Date(selectedRow.creation).toLocaleString() }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-3">
|
|
<p class="text-sm text-gray-600">Committed in DB</p>
|
|
<p class="mt-1.5 text-sm text-gray-700">
|
|
{{ selectedRow.committed ? 'Yes' : 'No' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
<script>
|
|
import ObjectList from '../../ObjectList.vue';
|
|
export default {
|
|
name: 'DatabaseSQLPlaygroundLog',
|
|
props: ['site'],
|
|
emits: ['rerunQuery'],
|
|
components: {
|
|
ObjectList,
|
|
},
|
|
data() {
|
|
return {
|
|
selectedRow: null,
|
|
};
|
|
},
|
|
computed: {
|
|
listOptions() {
|
|
return {
|
|
url: 'jcloude.api.client.get_list',
|
|
pagetype: 'SQL Playground Log',
|
|
filters: {
|
|
site: this.site,
|
|
},
|
|
fields: ['query', 'committed', 'creation'],
|
|
pageLength: 10,
|
|
orderBy: 'creation desc',
|
|
emptyStateMessage: 'No Logs found.',
|
|
columns: [
|
|
{
|
|
label: 'Query',
|
|
width: 2,
|
|
fieldname: 'query',
|
|
format(value) {
|
|
if (value.length > 40) {
|
|
return value.substring(0, 40) + '...';
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
{
|
|
label: 'Timestamp',
|
|
width: 1,
|
|
align: 'center',
|
|
fieldname: 'creation',
|
|
format(value) {
|
|
return new Date(value).toLocaleString();
|
|
},
|
|
},
|
|
{
|
|
label: 'Committed',
|
|
fieldname: 'committed',
|
|
align: 'center',
|
|
width: 0.5,
|
|
type: 'Icon',
|
|
Icon(value) {
|
|
return value ? 'check' : 'x';
|
|
},
|
|
},
|
|
],
|
|
onRowClick: (row) => {
|
|
this.selectedRow = row;
|
|
},
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
rerunQuery() {
|
|
const query = this.selectedRow.query;
|
|
this.selectedRow = null;
|
|
this.$emit('rerunQuery', query);
|
|
},
|
|
},
|
|
};
|
|
</script>
|