add more error & loading hint for dashboard loglist

api.go

@@ -1036,7 +1036,7 @@ func (cr *Cluster) apiV0LogFiles(rw http.ResponseWriter, req *http.Request) {
 }
 
 func (cr *Cluster) apiV0LogFile(rw http.ResponseWriter, req *http.Request) {
-	if checkRequestMethodOrRejectWithJson(rw, req, http.MethodGet) {
+	if checkRequestMethodOrRejectWithJson(rw, req, http.MethodGet, http.MethodHead) {
 		return
 	}
 	query := req.URL.Query()
@@ -1084,6 +1084,9 @@ func (cr *Cluster) apiV0LogFile(rw http.ResponseWriter, req *http.Request) {
 
 func (cr *Cluster) apiV0LogFileEncrypted(rw http.ResponseWriter, req *http.Request, r io.Reader, useGzip bool) {
 	rw.WriteHeader(http.StatusOK)
+	if req.Method == http.MethodHead {
+		return
+	}
 	if useGzip {
 		pr, pw := io.Pipe()
 		defer pr.Close()

dashboard/src/assets/lang/en-US.json

@@ -84,7 +84,8 @@
 		},
 		"settings": {
 			"login": {
-				"first": "Please login first before enable this feature"
+				"auth": "Require authuation",
+				"first": "You have to login before use this feature"
 			},
 			"notify": {
 				"cant.enable": "Cannot enable notification",
@@ -93,6 +94,9 @@
 			"webpush": {
 				"cant.enable": "Cannot enable Web Push",
 				"denied": "Web Push is denied by the browser"
+			},
+			"filelist": {
+				"cant.fetch": "Cannot fetch filelist"
 			}
 		}
 	},

dashboard/src/assets/lang/zh-CN.json

@@ -84,7 +84,8 @@
 		},
 		"settings": {
 			"login": {
-				"first": "启用此功能前请先登录"
+				"auth": "需要授权",
+				"first": "使用此功能前请先登录"
 			},
 			"notify": {
 				"cant.enable": "无法启用通知",
@@ -93,6 +94,9 @@
 			"webpush": {
 				"cant.enable": "无法启用推送",
 				"denied": "推送已被浏览器拒绝"
+			},
+			"filelist": {
+				"cant.fetch": "无法获取文件列表"
 			}
 		}
 	},

dashboard/src/components/FileContentCard.vue

@@ -1,16 +1,28 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
 import type { FileInfo } from '@/api/v0'
 
 defineProps<{
 	info: FileInfo
-	content: string
+	content: string | null
 }>()
 </script>
 <template>
 	<div>
 		<slot :info="info" :content="content" />
-		<pre class="code-box"><code>{{ content }}</code></pre>
+		<pre v-if="content" class="code-box"><code>{{ content }}</code></pre>
+		<div v-else class="loading-box">
+			<div class="flex-row-center">
+				<ProgressSpinner
+					style="width: 2em; height: 2em; margin: 0 0.5em 0 0"
+					strokeWidth="5"
+					fill="var(--surface-ground)"
+					animationDuration="1s"
+				/>
+				<i>Loading...</i>
+			</div>
+		</div>
 	</div>
 </template>
 <style scoped>
@@ -22,4 +34,9 @@ defineProps<{
 	background: var(--surface-c);
 	overflow: auto;
 }
+
+.loading-box {
+	height: 62vh;
+	padding: 1rem;
+}
 </style>

dashboard/src/views/LogListView.vue

@@ -14,20 +14,61 @@ const token = inject('token') as Ref<string | null>
 const logList = ref<FileInfo[] | null>(null)
 async function refreshFileList(): Promise<void> {
 	if (!token.value) {
+		toast.add({
+			severity: 'warn',
+			summary: tr('message.settings.login.auth'),
+			detail: tr('message.settings.login.first'),
+		})
 		return
 	}
-	logList.value = await getLogFiles(token.value)
+	try {
+		logList.value = await getLogFiles(token.value)
+	} catch (e) {
+		toast.add({
+			severity: 'error',
+			summary: tr('message.settings.filelist.cant.fetch'),
+			detail: String(e),
+		})
+	}
 }
 
 const showInfo = ref<FileInfo | null>(null)
 const fileContent = ref<string | null>(null)
 
 async function openFile(file: FileInfo): Promise<void> {
 	if (!token.value) {
+		toast.add({
+			severity: 'error',
+			summary: tr('message.settings.login.auth'),
+			detail: tr('message.settings.login.first'),
+			life: 10000,
+		})
+		return
+	}
+	if (showInfo.value) {
+		toast.add({
+			severity: 'error',
+			summary: 'Another file is opening',
+			life: 5000,
+		})
 		return
 	}
-	const buf = await getLogFile(token.value, file.name, true)
 	showInfo.value = file
+	fileContent.value = null
+	var buf: ArrayBuffer
+	try {
+		buf = await getLogFile(token.value, file.name, true)
+	} catch (e) {
+		toast.add({
+			severity: 'error',
+			summary: tr('message.settings.filelist.cant.fetch'),
+			detail: String(e),
+		})
+		return
+	}
+	if (showInfo.value.name !== file.name) {
+		return
+	}
 	fileContent.value = new TextDecoder().decode(new Uint8Array(buf))
 }
 
@@ -59,17 +100,12 @@ onMounted(() => {
 		</FileListCard>
 		<Dialog
 			:visible="!!showInfo"
-			@update:visible="(show) => !show && (showInfo = null)"
+			@update:visible="(show) => !show && ((showInfo = null), (fileContent = null))"
 			modal
 			:header="(showInfo && showInfo.name) || undefined"
 			:style="{ width: 'var(--dialog-width)' }"
 		>
-			<FileContentCard
-				v-if="showInfo && fileContent"
-				:info="showInfo"
-				:content="fileContent"
-				v-slot="{ info }"
-			>
+			<FileContentCard v-if="showInfo" :info="showInfo" :content="fileContent" v-slot="{ info }">
 				<div class="flex-row-center tool-box">
 					<Button
 						icon="pi pi-download"

dashboard/src/views/SettingsView.vue

@@ -119,7 +119,8 @@ async function onEnableNotify(): Promise<void> {
 	if (!token.value) {
 		toast.add({
 			severity: 'error',
-			summary: tr('message.settings.login.first'),
+			summary: tr('message.settings.login.auth'),
+			detail: tr('message.settings.login.first'),
 			life: 5000,
 		})
 		return