111 lines
2.6 KiB
Vue
111 lines
2.6 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="`MariaDB Process List`"
|
|
:columns="[
|
|
{ label: 'ID', name: 'id', class: 'w-1/12' },
|
|
{ label: 'User', name: 'user', class: 'w-2/12' },
|
|
{ label: 'Time', name: 'time', class: 'w-1/12' },
|
|
{ label: 'Command', name: 'command', class: 'w-1/12' },
|
|
{ label: 'State', name: 'state', class: 'w-2/12' },
|
|
{ label: 'Query', name: 'query', class: 'w-5/12' }
|
|
]"
|
|
:data="processData"
|
|
>
|
|
<template #actions>
|
|
<Button
|
|
@click="$resources.processList.reload()"
|
|
:loading="$resources.processList.loading"
|
|
>Refresh</Button
|
|
>
|
|
</template>
|
|
</Report>
|
|
<div
|
|
class="px-2 py-2 text-base text-gray-600"
|
|
v-if="
|
|
$resources.processList.loading &&
|
|
$resources.processList.data.length == 0
|
|
"
|
|
>
|
|
<LoadingText />
|
|
</div>
|
|
<div
|
|
class="py-2 text-base text-gray-600"
|
|
v-if="
|
|
!$resources.processList.loading &&
|
|
$resources.processList.data.length == 0
|
|
"
|
|
>
|
|
No data
|
|
</div>
|
|
</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 Report from '@/components/Report.vue';
|
|
export default {
|
|
name: 'SiteMariaDBProcessList',
|
|
props: ['site'],
|
|
components: {
|
|
Report
|
|
},
|
|
data() {
|
|
return {
|
|
max_lines: 20
|
|
};
|
|
},
|
|
resources: {
|
|
processList() {
|
|
return {
|
|
url: 'jcloud.api.analytics.mariadb_processlist',
|
|
params: {
|
|
site: this.site?.name
|
|
},
|
|
auto: true,
|
|
pageLength: this.max_lines,
|
|
keepData: true,
|
|
initialData: []
|
|
};
|
|
},
|
|
getPlan() {
|
|
return {
|
|
url: 'jcloud.api.site.current_plan',
|
|
params: {
|
|
name: this.site?.name
|
|
},
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
processData() {
|
|
let data = [];
|
|
this.$resources.processList.data.forEach(row => {
|
|
let out = [
|
|
{ name: 'ID', value: row.Id, class: 'w-1/12' },
|
|
{ name: 'User', value: row.User, class: 'w-2/12' },
|
|
{ name: 'Time', value: row.Time, class: 'w-1/12' },
|
|
{ name: 'Command', value: row.Command, class: 'w-1/12' },
|
|
{ name: 'State', value: row.State, class: 'w-2/12' },
|
|
{ name: 'Query', value: row.Info, class: 'w-5/12' }
|
|
];
|
|
data.push(out);
|
|
});
|
|
return data;
|
|
}
|
|
}
|
|
};
|
|
</script>
|