feat: 容器日志行数增加所有选项 (#2191)

Refs #2143

backend/app/service/container.go

@@ -567,7 +567,7 @@ func (u *ContainerService) ContainerLogs(wsConn *websocket.Conn, container, sinc
 	}
 	command := fmt.Sprintf("docker logs %s", container)
 	if tail != "0" {
-		command += " -n " + tail
+		command += " --tail " + tail
 	}
 	if since != "all" {
 		command += " --since " + since

frontend/src/components/container-log/index.vue

@@ -1,15 +1,18 @@
 <template>
     <div>
         <div style="display: flex; flex-wrap: wrap">
-            <el-select @change="searchLogs" v-model="logSearch.mode" style="width: 150px">
+            <el-select @change="searchLogs" v-model="logSearch.mode" class="selectWidth">
                 <template #prefix>{{ $t('container.fetch') }}</template>
                 <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
             </el-select>
-            <el-input @change="searchLogs" class="margin-button" style="width: 100px" v-model.number="logSearch.tail">
+            <el-select @change="searchLogs" class="margin-button selectWidth" v-model.number="logSearch.tail">
-                <template #prefix>
+                <template #prefix>{{ $t('container.lines') }}</template>
-                    <div style="margin-left: 2px">{{ $t('container.lines') }}</div>
+                <el-option :value="0" :label="$t('commons.table.all')" />
-                </template>
+                <el-option :value="100" :label="100" />
-            </el-input>
+                <el-option :value="200" :label="200" />
+                <el-option :value="500" :label="500" />
+                <el-option :value="1000" :label="1000" />
+            </el-select>
             <div class="margin-button">
                 <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
                     {{ $t('commons.button.watch') }}
@@ -89,7 +92,7 @@ const timeOptions = ref([
 ]);
 
 const searchLogs = async () => {
-    if (!Number(logSearch.tail) || Number(logSearch.tail) < 0) {
+    if (Number(logSearch.tail) < 0) {
         MsgError(i18n.global.t('container.linesHelper'));
         return;
     }
@@ -112,7 +115,17 @@ const searchLogs = async () => {
 };
 
 const onDownload = async () => {
-    downloadWithContent(logInfo.value, logSearch.container + '-' + dateFormatForName(new Date()) + '.log');
+    let msg =
+        logSearch.tail === 0
+            ? i18n.global.t('container.downLogHelper1', [logSearch.container])
+            : i18n.global.t('container.downLogHelper2', [logSearch.container, logSearch.tail]);
+    ElMessageBox.confirm(msg, i18n.global.t('file.download'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        downloadWithContent(logInfo.value, logSearch.container + '-' + dateFormatForName(new Date()) + '.log');
+    });
 };
 
 interface DialogProps {
@@ -154,4 +167,7 @@ defineExpose({
 .margin-button {
     margin-left: 20px;
 }
+.selectWidth {
+    width: 150px;
+}
 </style>

frontend/src/lang/modules/en.ts

@@ -510,6 +510,8 @@ const message = {
         lastHour: 'Last Hour',
         last10Min: 'Last 10 Minutes',
         cleanLog: 'Clean log',
+        downLogHelper1: 'Are you sure you want to download all logs for container {0}?',
+        downLogHelper2: 'Are you sure you want to download the recent {1} logs for container {0}?',
         cleanLogHelper:
             'Clearing logs requires restarting the container, and this operation cannot be rolled back. Do you want to continue?',
         newName: 'New name',

frontend/src/lang/modules/tw.ts

@@ -497,6 +497,8 @@ const message = {
         lastHour: '最近 1 小時',
         last10Min: '最近 10 分鐘',
         cleanLog: '清空日誌',
+        downLogHelper1: '即將下載 {0} 容器所有日誌，是否繼續？',
+        downLogHelper2: '即將下載 {0} 容器最近 {1} 條日誌，是否繼續？',
         cleanLogHelper: '清空日誌需要重啟容器，該操作無法回滾，是否繼續？',
         newName: '新名稱',
         source: '資源使用率',

frontend/src/lang/modules/zh.ts

@@ -497,6 +497,8 @@ const message = {
         lastHour: '最近 1 小时',
         last10Min: '最近 10 分钟',
         cleanLog: '清空日志',
+        downLogHelper1: '即将下载 {0} 容器所有日志，是否继续？',
+        downLogHelper2: '即将下载 {0} 容器最近 {1} 条日志，是否继续？',
         cleanLogHelper: '清空日志需要重启容器，该操作无法回滚，是否继续？',
         newName: '新名称',
         source: '资源使用率',

frontend/src/views/container/container/log/index.vue

@@ -14,20 +14,18 @@
                 </DrawerHeader>
             </template>
             <div>
-                <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
+                <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
                     <template #prefix>{{ $t('container.fetch') }}</template>
                     <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
                 </el-select>
-                <el-input
+                <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
-                    @change="searchLogs"
+                    <template #prefix>{{ $t('container.lines') }}</template>
-                    class="margin-button"
+                    <el-option :value="0" :label="$t('commons.table.all')" />
-                    style="width: 20%; float: left"
+                    <el-option :value="100" :label="100" />
-                    v-model.number="logSearch.tail"
+                    <el-option :value="200" :label="200" />
-                >
+                    <el-option :value="500" :label="500" />
-                    <template #prefix>
+                    <el-option :value="1000" :label="1000" />
-                        <div style="margin-left: 2px">{{ $t('container.lines') }}</div>
+                </el-select>
-                    </template>
-                </el-input>
                 <div class="margin-button" style="float: left">
                     <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
                         {{ $t('commons.button.watch') }}
@@ -134,7 +132,7 @@ watch(logVisiable, (val) => {
     if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
 });
 const searchLogs = async () => {
-    if (!Number(logSearch.tail) || Number(logSearch.tail) < 0) {
+    if (Number(logSearch.tail) < 0) {
         MsgError(i18n.global.t('container.linesHelper'));
         return;
     }
@@ -157,7 +155,17 @@ const searchLogs = async () => {
 };
 
 const onDownload = async () => {
-    downloadWithContent(logInfo.value, logSearch.container + '-' + dateFormatForName(new Date()) + '.log');
+    let msg =
+        logSearch.tail === 0
+            ? i18n.global.t('container.downLogHelper1', [logSearch.container])
+            : i18n.global.t('container.downLogHelper2', [logSearch.container, logSearch.tail]);
+    ElMessageBox.confirm(msg, i18n.global.t('file.download'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        downloadWithContent(logInfo.value, logSearch.container + '-' + dateFormatForName(new Date()) + '.log');
+    });
 };
 
 const onClean = async () => {
@@ -209,4 +217,13 @@ defineExpose({
 .fullScreen {
     border: none;
 }
+.tailClass {
+    width: 20%;
+    float: left;
+    margin-left: 20px;
+}
+.fetchClass {
+    width: 30%;
+    float: left;
+}
 </style>