jcloud/dashboard/src2/pages/devtools/log-browser/LogBrowser.vue

<template>
	<div class="flex flex-col">
		<Header class="bg-white">
			<div
				class="flex w-full flex-col gap-2 md:flex-row md:items-center md:justify-between"
			>
				<div class="flex flex-row items-center gap-2">
					<!-- 标题 -->
					<Breadcrumbs
						:items="[
							{ label: '开发工具', route: { name: 'Log Browser' } }, // Dev tools has no seperate page as its own, so it doesn't need a different route
							{ label: '日志浏览器', route: { name: 'Log Browser' } }
						]"
					/>
				</div>
				<div class="flex flex-row gap-2">
					<FormControl
						class="w-20"
						type="select"
						:options="[
							{
								label: '选择模式',
								disabled: true
							},
							{
								label: '工作台',
								value: 'bench'
							},
							{
								label: '站点',
								value: 'site'
							}
						]"
						:modelValue="mode"
						@update:modelValue="
							e => $router.push({ name: 'Log Browser', params: { mode: e } })
						"
					/>
					<LinkControl
						v-show="mode === 'site'"
						:options="{
							pagetype: 'Site',
							filters: { status: 'Active' },
							initialData: [{ label: site, value: site }]
						}"
						placeholder="选择一个站点"
						:modelValue="site"
						@update:modelValue="
							site => {
								this.site = site;
								$router.push({
									name: 'Log Browser',
									params: { mode: 'site', docName: site }
								});
							}
						"
					/>
					<LinkControl
						class="w-52"
						v-show="mode === 'bench'"
						:options="{
							pagetype: 'Bench',
							filters: { status: 'Active' },
							initialData: [
								{
									label: bench,
									value: bench
								}
							]
						}"
						placeholder="选择一个工作台"
						:modelValue="bench"
						@update:modelValue="
							bench => {
								this.bench = bench;
								$router.push({
									name: 'Log Browser',
									params: { mode: 'bench', docName: bench }
								});
							}
						"
					/>
					<Tooltip text="这是一个实验性功能">
						<div class="rounded-md bg-purple-100 p-1.5">
							<i-lucide-flask-conical class="h-4 w-4 text-purple-500" />
						</div>
					</Tooltip>
					<Button
						link="https://jingrow.com/docs/devtools/log-browser"
						target="_blank"
					>
						<i-lucide-help-circle class="h-4 w-4" />
					</Button>
				</div>
			</div>
		</Header>
		<div class="flex">
			<div
				v-if="(mode === 'bench' && !bench) || (mode === 'site' && !site)"
				class="w-full"
			>
				<p
					class="flex h-full min-h-[80vh] w-full items-center justify-center gap-2 text-gray-700"
				>
					选择一个{{ mode }}以查看日志
				</p>
			</div>
			<div v-else-if="mode" class="flex h-full w-full">
				<LogList :mode="mode" :docName="docName" />
				<div class="m-4 flex h-full w-3/4 flex-col">
					<div
						v-if="$resources.log.loading"
						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-gray-700"
					>
						<Spinner class="h-4 w-4" />
						<span> 正在获取日志... </span>
					</div>
					<ErrorMessage
						v-else-if="$resources.log.error"
						:message="$resources.log.error"
					/>
					<LogViewer v-else-if="logId" :log="log" />
					<div
						v-else
						class="flex h-full min-h-[90vh] w-full items-center justify-center gap-2 text-gray-700"
					>
						选择一个日志以查看
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Header from '../../../components/Header.vue';
import LinkControl from '../../../components/LinkControl.vue';
import LogList from './LogList.vue';
import LogViewer from './LogViewer.vue';
import { Breadcrumbs } from 'jingrow-ui';

export default {
	components: {
		Header,
		LogList,
		LogViewer,
		LinkControl,
		Breadcrumbs
	},
	props: {
		mode: String,
		logId: String,
		docName: String
	},
	mounted() {
		if (!this.mode) {
			this.$router.push({ name: '日志浏览器', params: { mode: 'bench' } });
		}
	},
	updated() {
		if (!this.mode) {
			this.$router.push({ name: '日志浏览器', params: { mode: 'bench' } });
		}
	},
	data() {
		return {
			site: this.mode === 'site' ? this.docName : null || null,
			bench: this.mode === 'bench' ? this.docName : null || null,
			searchLogQuery: ''
		};
	},
	resources: {
		log() {
			return {
				url: 'jcloud.api.log_browser.get_log',
				params: {
					log_type: this.mode,
					pg_name: this.docName,
					log_name: this.logId
				},
				initialData: [],
				auto: this.logId
			};
		}
	},
	computed: {
		log() {
			return this.$resources.log?.data;
		}
	}
};
</script>