feat: Optimize Supervisord log reading (#10634)

agent/app/api/v2/host_tool.go

@@ -95,28 +95,6 @@ func (b *BaseApi) OperateToolConfig(c *gin.Context) {
 	helper.SuccessWithData(c, config)
 }
 
-// @Tags Host tool
-// @Summary Get tool logs
-// @Accept json
-// @Param request body request.HostToolLogReq true "request"
-// @Success 200 {string} logContent
-// @Security ApiKeyAuth
-// @Security Timestamp
-// @Router /hosts/tool/log [post]
-func (b *BaseApi) GetToolLog(c *gin.Context) {
-	var req request.HostToolLogReq
-	if err := helper.CheckBindAndValidate(&req, c); err != nil {
-		return
-	}
-
-	logContent, err := hostToolService.GetToolLog(req)
-	if err != nil {
-		helper.InternalServer(c, err)
-		return
-	}
-	helper.SuccessWithData(c, logContent)
-}
-
 // @Tags Host tool
 // @Summary Create Supervisor process
 // @Accept json

agent/app/service/file.go

@@ -8,6 +8,7 @@ import (
 	"github.com/1Panel-dev/1Panel/agent/app/task"
 	"github.com/1Panel-dev/1Panel/agent/i18n"
 	"github.com/1Panel-dev/1Panel/agent/utils/convert"
+	"github.com/1Panel-dev/1Panel/agent/utils/ini_conf"
 	"io"
 	"io/fs"
 	"os"
@@ -566,6 +567,13 @@ func (f *FileService) ReadLogByLine(req request.FileReadByLineReq) (*response.Fi
 			return nil, err
 		}
 		logFilePath = php.GetSlowLogPath()
+	case constant.Supervisord:
+		configPath := "/etc/supervisord.conf"
+		pathSet, _ := settingRepo.Get(settingRepo.WithByKey(constant.SupervisorConfigPath))
+		if pathSet.ID != 0 || pathSet.Value != "" {
+			configPath = pathSet.Value
+		}
+		logFilePath, _ = ini_conf.GetIniValue(configPath, "supervisord", "logfile")
 	}
 
 	file, err := os.Open(logFilePath)

agent/app/service/host_tool.go

@@ -261,25 +261,6 @@ func (h *HostToolService) OperateToolConfig(req request.HostToolConfig) (*respon
 	return res, nil
 }
 
-func (h *HostToolService) GetToolLog(req request.HostToolLogReq) (string, error) {
-	fileOp := files.NewFileOp()
-	logfilePath := ""
-	switch req.Type {
-	case constant.Supervisord:
-		configPath := "/etc/supervisord.conf"
-		pathSet, _ := settingRepo.Get(settingRepo.WithByKey(constant.SupervisorConfigPath))
-		if pathSet.ID != 0 || pathSet.Value != "" {
-			configPath = pathSet.Value
-		}
-		logfilePath, _ = ini_conf.GetIniValue(configPath, "supervisord", "logfile")
-	}
-	oldContent, err := fileOp.GetContent(logfilePath)
-	if err != nil {
-		return "", err
-	}
-	return string(oldContent), nil
-}
-
 func (h *HostToolService) OperateSupervisorProcess(req request.SupervisorProcessConfig) error {
 	var (
 		supervisordDir = path.Join(global.Dir.DataDir, "tools", "supervisord")

agent/router/ro_host.go

@@ -47,7 +47,6 @@ func (s *HostRouter) InitRouter(Router *gin.RouterGroup) {
 		hostRouter.POST("/tool/init", baseApi.InitToolConfig)
 		hostRouter.POST("/tool/operate", baseApi.OperateTool)
 		hostRouter.POST("/tool/config", baseApi.OperateToolConfig)
-		hostRouter.POST("/tool/log", baseApi.GetToolLog)
 		hostRouter.POST("/tool/supervisor/process", baseApi.OperateProcess)
 		hostRouter.GET("/tool/supervisor/process", baseApi.GetProcess)
 		hostRouter.POST("/tool/supervisor/process/file", baseApi.GetProcessFile)

frontend/package.json

@@ -27,7 +27,6 @@
         "@codemirror/legacy-modes": "^6.5.1",
         "@codemirror/theme-one-dark": "^6.1.3",
         "@element-plus/icons-vue": "^1.1.4",
-        "@highlightjs/vue-plugin": "^2.1.0",
         "@vue-office/docx": "^1.6.2",
         "@vue-office/excel": "^1.7.8",
         "@vueuse/core": "^8.9.4",

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

@@ -1,60 +0,0 @@
-<template>
-    <highlightjs
-        ref="editorRef"
-        language="JavaScript"
-        :style="customStyle"
-        :autodetect="false"
-        :code="content"
-    ></highlightjs>
-</template>
-
-<script lang="ts" setup>
-import { CSSProperties } from 'vue';
-
-const editorRef = ref();
-const scrollerElement = ref<HTMLElement | null>(null);
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: '',
-    },
-    heightDiff: {
-        type: Number,
-        default: 280,
-    },
-});
-
-const content = ref('');
-
-const customStyle = computed<CSSProperties>(() => ({
-    width: '100%',
-    overflow: 'auto',
-}));
-
-const initLog = async () => {
-    await nextTick();
-    if (editorRef.value && scrollerElement.value == undefined) {
-        const parentElement = editorRef.value.$el as HTMLElement;
-        scrollerElement.value = parentElement.querySelector('.hljs') as HTMLElement;
-        scrollerElement.value.style['height'] = 'calc(100vh - ' + props.heightDiff + 'px)';
-    }
-};
-
-watch(
-    () => props.modelValue,
-    async (newValue) => {
-        if (editorRef.value && scrollerElement.value != undefined && newValue != content.value) {
-            content.value = newValue;
-            scrollerElement.value.scrollTop = scrollerElement.value.scrollHeight;
-        } else {
-            initLog();
-        }
-    },
-    { immediate: true },
-);
-
-onMounted(() => {
-    initLog();
-});
-</script>

frontend/src/main.ts

@@ -6,8 +6,6 @@ import '@/styles/common.scss';
 import '@/assets/iconfont/iconfont.css';
 import '@/assets/iconfont/iconfont.js';
 import '@/styles/style.css';
-import 'highlight.js/styles/atom-one-dark.css';
-import 'highlight.js/lib/common';
 
 const styleModule = import.meta.glob('xpack/styles/index.scss');
 for (const path in styleModule) {
@@ -23,12 +21,10 @@ import Components from '@/components';
 import ElementPlus from 'element-plus';
 import Fit2CloudPlus from 'fit2cloud-ui-plus';
 import * as Icons from '@element-plus/icons-vue';
-import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 import directives from '@/directives/index';
 
 const app = createApp(App);
-app.use(hljsVuePlugin);
 app.component('SvgIcon', SvgIcon);
 app.use(ElementPlus);
 app.use(Fit2CloudPlus, { locale: i18n.global.messages.value[localStorage.getItem('lang') || 'zh'] });

frontend/src/views/toolbox/supervisor/config/index.vue

@@ -13,7 +13,12 @@
         </template>
         <template #main>
             <Source v-if="activeName === '1'"></Source>
-            <Log v-if="activeName === '2'"></Log>
+            <div v-if="activeName === '2'">
+                <LogFile
+                    :config="{ id: 0, type: 'supervisord', name: 'supervisor', colorMode: 'container' }"
+                    ref="logRef"
+                ></LogFile>
+            </div>
             <Basic v-if="activeName === '3'"></Basic>
         </template>
     </LayoutContent>
@@ -22,7 +27,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import Source from './source/index.vue';
-import Log from './log/index.vue';
+import LogFile from '@/components/log/file/index.vue';
 import Basic from './basic/index.vue';
 
 const activeName = ref('1');

frontend/src/views/toolbox/supervisor/config/log/index.vue

@@ -1,22 +0,0 @@
-<template>
-    <div v-loading="loading">
-        <HighlightLog v-model="content" :heightDiff="320" />
-    </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { getSupervisorLog } from '@/api/modules/host-tool';
-import HighlightLog from '@/components/log/hightlight-log/index.vue';
-
-let content = ref('');
-let loading = ref(false);
-
-const getConfig = async () => {
-    const res = await getSupervisorLog();
-    content.value = res.data;
-};
-
-onMounted(() => {
-    getConfig();
-});
-</script>