fix: fix issue with download container log (#8111)

agent/app/service/container.go

@@ -934,11 +934,9 @@ func (u *ContainerService) DownloadContainerLogs(containerType, container, since
 	if cmd.CheckIllegal(container, since, tail) {
 		return buserr.New("ErrCmdIllegal")
 	}
-	commandName := "docker"
 	commandArg := []string{"logs", container}
 	if containerType == "compose" {
-		commandName = "docker compose"
-		commandArg = []string{"-f", container, "logs"}
+		commandArg = []string{"compose", "-f", container, "logs"}
 	}
 	if tail != "0" {
 		commandArg = append(commandArg, "--tail")
@@ -949,7 +947,7 @@ func (u *ContainerService) DownloadContainerLogs(containerType, container, since
 		commandArg = append(commandArg, since)
 	}
 
-	cmd := exec.Command(commandName, commandArg...)
+	cmd := exec.Command("docker", commandArg...)
 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
 		_ = cmd.Process.Signal(syscall.SIGTERM)

frontend/package.json

@@ -33,6 +33,7 @@
         "@vueuse/core": "^8.9.4",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.5.0",
+        "anser": "^2.3.2",
         "axios": "^1.7.2",
         "codemirror": "^6.0.1",
         "crypto-js": "^4.2.0",

frontend/src/components/log/compose/index.vue

@@ -12,7 +12,7 @@
             </el-tooltip>
         </template>
         <template #content>
-            <ContainerLog :compose="compose" />
+            <ContainerLog :compose="compose" :resource="resource" />
         </template>
     </DrawerPro>
 </template>

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

@@ -55,6 +55,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    resource: {
+        type: String,
+        default: '',
+    },
 });
 
 const logVisible = ref(false);
@@ -116,6 +120,10 @@ const searchLogs = async () => {
         MsgError(i18n.global.t('container.linesHelper'));
         return;
     }
+    if (!logSearch.isWatch) {
+        stopListening();
+        return;
+    }
     logs.value = [];
     let url = `/api/v2/containers/search/log?container=${logSearch.container}&since=${logSearch.mode}&tail=${logSearch.tail}&follow=${logSearch.isWatch}`;
     if (logSearch.compose !== '') {
@@ -139,20 +147,26 @@ const searchLogs = async () => {
 
 const onDownload = async () => {
     logSearch.tail = 0;
-    let msg = i18n.global.t('container.downLogHelper1', [logSearch.container]);
+    const container = logSearch.compose === '' ? logSearch.container : logSearch.compose;
+    let resource = container;
+    if (props.resource) {
+        resource = props.resource;
+    }
+    const containerType = logSearch.compose === '' ? 'container' : 'compose';
+    let msg = i18n.global.t('container.downLogHelper1', [resource]);
     ElMessageBox.confirm(msg, i18n.global.t('commons.button.download'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',
     }).then(async () => {
         let params = {
-            container: logSearch.container,
+            container: container,
             since: logSearch.mode,
             tail: logSearch.tail,
-            containerType: 'container',
+            containerType: containerType,
         };
         let addItem = {};
-        addItem['name'] = logSearch.container + '-' + dateFormatForName(new Date()) + '.log';
+        addItem['name'] = resource + '-' + dateFormatForName(new Date()) + '.log';
         DownloadFile(params).then((res) => {
             const downloadUrl = window.URL.createObjectURL(new Blob([res]));
             const a = document.createElement('a');

frontend/src/components/log/custom-hightlight/index.vue

@@ -1,9 +1,11 @@
 <template>
     <span v-for="(token, index) in tokens" :key="index" :class="['token', token.type]" :style="{ color: token.color }">
-        {{ token.text }}
+        <span v-if="token.type != 'html'">{{ token.text }}</span>
+        <span v-else v-html="token.text"></span>
     </span>
 </template>
 <script setup lang="ts">
+import anser from 'anser';
 interface TokenRule {
     type: string;
     pattern: RegExp;
@@ -14,6 +16,7 @@ interface Token {
     text: string;
     type: string;
     color: string;
+    html?: string;
 }
 
 const props = defineProps<{
@@ -128,7 +131,22 @@ const containerRules: TokenRule[] = [
     },
 ];
 
+function hasANSICodes(text: string) {
+    const ansiRegex = /\x1b\[[0-9;]*[mK]/;
+    return ansiRegex.test(text);
+}
+
 function tokenizeLog(log: string): Token[] {
+    if (hasANSICodes(log)) {
+        let html = anser.ansiToHtml(log);
+        return [
+            {
+                text: html,
+                type: 'html',
+                color: '',
+            },
+        ];
+    }
     const tokens: Token[] = [];
     let lastIndex = 0;
     let matches: { index: number; text: string; type: string; color: string }[] = [];