press/dashboard/src2/components/site/SiteLogs.vue

<template>
	<ObjectList class="p-5" :options="logsOptions" />
</template>

<script>
import { h } from 'vue';
import LucideSparkleIcon from '~icons/lucide/sparkle';
import { date } from '../../utils/format';
import ObjectList from '../ObjectList.vue';

export default {
	name: 'SiteLogs',
	props: {
		name: {
			type: String,
			required: true
		},
		type: {
			type: String,
			required: false
		}
	},
	components: {
		ObjectList
	},
	resources: {
		logs() {
			return {
				url: 'press.api.site.logs',
				params: {
					name: this.name
				},
				auto: true,
				initialData: [],
				cache: ['ObjectList', 'press.api.site.logs', this.name]
			};
		}
	},
	computed: {
		logs() {
			const knownTypes = [
				'frappe',
				'scheduler',
				'database',
				'pdf',
				'wkhtmltopdf',
				'ipython'
			];

			if (this.type && !knownTypes.includes(this.type)) {
				return this.$resources.logs.data.filter(
					d => !knownTypes.includes(d.name.split('.')[0])
				);
			}

			// logs of a particular type
			return this.$resources.logs.data.filter(
				d => d.name.split('.')[0] === this.type
			);
		},
		logsOptions() {
			if (this.type) {
				return {
					data: () => this.logs,
					route(row) {
						return {
							name: 'Site Log',
							params: { logName: row.name }
						};
					},
					columns: [
						{
							label: 'Name',
							fieldname: 'name'
						},
						{
							label: 'Size',
							fieldname: 'size',
							class: 'text-gray-600',
							format(value) {
								return `${value} kB`;
							}
						},
						{
							label: 'Modified On',
							fieldname: 'modified',
							format(value) {
								return value ? date(value, 'lll') : '';
							}
						}
					],
					actions: () => [
						{
							slots: {
								prefix: () => h(LucideSparkleIcon)
							},
							label: 'View in Log Browser',
							onClick: () => {
								this.$router.push({
									name: 'Log Browser',
									params: { mode: 'site', docName: this.name }
								});
							}
						},
						{
							label: 'Refresh',
							icon: 'refresh-ccw',
							loading: this.$resources.logs.loading,
							onClick: () => this.$resources.logs.reload()
						}
					]
				};
			} else {
				return {
					data: () => [
						{
							title: 'Scheduler Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'scheduler'
								}
							}
						},
						{
							title: 'Database Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'database'
								}
							}
						},
						{
							title: 'Frappe Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'frappe'
								}
							}
						},
						{
							title: 'PDF Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'pdf'
								}
							}
						},
						{
							title: 'IPython Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'ipython'
								}
							}
						},
						{
							title: 'Wkhtmltopdf Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'wkhtmltopdf'
								}
							}
						},
						{
							title: 'Other Logs',
							route: {
								name: 'Site Logs',
								params: {
									name: this.name,
									type: 'other'
								}
							}
						}
					],
					columns: [
						{
							label: 'Title',
							fieldname: 'title',
							width: 0.3
						},
						{
							label: '',
							fieldname: 'action',
							type: 'Button',
							align: 'right',
							Button: ({ row }) => {
								return {
									label: 'View',
									type: 'primary',
									iconRight: 'arrow-right',
									onClick: () => {
										this.$router.push(row.route);
									}
								};
							}
						}
					],
					actions: () => [
						{
							slots: {
								prefix: () => h(LucideSparkleIcon)
							},
							label: 'View in Log Browser',
							onClick: () => {
								this.$router.push({
									name: 'Log Browser',
									params: { mode: 'site', docName: this.name }
								});
							}
						}
					]
				};
			}
		}
	}
};
</script>