feat: 已安装应用增加日志页面 (#2403)

backend/app/api/v1/container.go

@@ -706,3 +706,31 @@ func (b *BaseApi) ComposeUpdate(c *gin.Context) {
 	}
 	helper.SuccessWithData(c, nil)
 }
+
+// @Tags Container Compose
+// @Summary Container Compose logs
+// @Description docker-compose 日志
+// @Param compose query string false "compose 文件地址"
+// @Param since query string false "时间筛选"
+// @Param follow query string false "是否追踪"
+// @Param tail query string false "显示行号"
+// @Security ApiKeyAuth
+// @Router /containers/compose/search/log [post]
+func (b *BaseApi) ComposeLogs(c *gin.Context) {
+	wsConn, err := upGrader.Upgrade(c.Writer, c.Request, nil)
+	if err != nil {
+		global.LOG.Errorf("gin context http handler failed, err: %v", err)
+		return
+	}
+	defer wsConn.Close()
+
+	compose := c.Query("compose")
+	since := c.Query("since")
+	follow := c.Query("follow") == "true"
+	tail := c.Query("tail")
+
+	if err := containerService.ComposeLogs(wsConn, compose, since, tail, follow); err != nil {
+		_ = wsConn.WriteMessage(1, []byte(err.Error()))
+		return
+	}
+}

backend/app/service/container.go

@@ -66,6 +66,7 @@ type IContainerService interface {
 	Prune(req dto.ContainerPrune) (dto.ContainerPruneReport, error)
 
 	LoadContainerLogs(req dto.OperationWithNameAndType) string
+	ComposeLogs(wsConn *websocket.Conn, composePath, since, tail string, follow bool) error
 }
 
 func NewIContainerService() IContainerService {

backend/app/service/container_compose.go

@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"errors"
 	"fmt"
+	"github.com/gorilla/websocket"
 	"io"
 	"os"
 	"os/exec"
@@ -261,3 +262,45 @@ func (u *ContainerService) loadPath(req *dto.ComposeCreate) error {
 	}
 	return nil
 }
+
+func (u *ContainerService) ComposeLogs(wsConn *websocket.Conn, composePath, since, tail string, follow bool) error {
+	if cmd.CheckIllegal(composePath, since, tail) {
+		return buserr.New(constant.ErrCmdIllegal)
+	}
+	command := fmt.Sprintf("docker-compose -f %s logs", composePath)
+	if tail != "0" {
+		command += " --tail " + tail
+	}
+	if since != "all" {
+		command += " --since " + since
+	}
+	if follow {
+		command += " -f"
+	}
+	command += " 2>&1"
+	cmd := exec.Command("bash", "-c", command)
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		return err
+	}
+	if err := cmd.Start(); err != nil {
+		return err
+	}
+
+	buffer := make([]byte, 1024)
+	for {
+		n, err := stdout.Read(buffer)
+		if err != nil {
+			if err == io.EOF {
+				break
+			}
+			global.LOG.Errorf("read bytes from compose log failed, err: %v", err)
+			continue
+		}
+		if err = wsConn.WriteMessage(websocket.TextMessage, buffer[:n]); err != nil {
+			global.LOG.Errorf("send message with compose log to ws failed, err: %v", err)
+			break
+		}
+	}
+	return nil
+}

backend/app/service/runtime_utils.go

@@ -276,7 +276,11 @@ func handleParams(create request.RuntimeCreate, projectDir string) (composeConte
 	if err != nil {
 		return
 	}
-	env, err := gotenv.Read(path.Join(projectDir, ".env"))
+	envPath := path.Join(projectDir, ".env")
+	if !fileOp.Stat(envPath) {
+		_ = fileOp.CreateFile(envPath)
+	}
+	env, err := gotenv.Read(envPath)
 	if err != nil {
 		return
 	}
@@ -316,7 +320,7 @@ func handleParams(create request.RuntimeCreate, projectDir string) (composeConte
 	if err != nil {
 		return
 	}
-	if err = gotenv.Write(env, path.Join(projectDir, ".env")); err != nil {
+	if err = gotenv.Write(env, envPath); err != nil {
 		return
 	}
 	envContent = []byte(envStr)

backend/router/ro_container.go

@@ -45,6 +45,7 @@ func (s *ContainerRouter) InitContainerRouter(Router *gin.RouterGroup) {
 		baRouter.POST("/compose/test", baseApi.TestCompose)
 		baRouter.POST("/compose/operate", baseApi.OperatorCompose)
 		baRouter.POST("/compose/update", baseApi.ComposeUpdate)
+		baRouter.GET("/compose/search/log", baseApi.ComposeLogs)
 
 		baRouter.GET("/template", baseApi.ListComposeTemplate)
 		baRouter.POST("/template/search", baseApi.SearchComposeTemplate)

cmd/server/docs/docs.go

@@ -1232,6 +1232,47 @@ const docTemplate = `{
                 }
             }
         },
+        "/containers/compose/search/log": {
+            "post": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "docker-compose 日志",
+                "tags": [
+                    "Container Compose"
+                ],
+                "summary": "Container Compose logs",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "compose 文件地址",
+                        "name": "compose",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "时间筛选",
+                        "name": "since",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "是否追踪",
+                        "name": "follow",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "显示行号",
+                        "name": "tail",
+                        "in": "query"
+                    }
+                ],
+                "responses": {}
+            }
+        },
         "/containers/compose/test": {
             "post": {
                 "security": [

cmd/server/docs/swagger.json

@@ -1225,6 +1225,47 @@
                 }
             }
         },
+        "/containers/compose/search/log": {
+            "post": {
+                "security": [
+                    {
+                        "ApiKeyAuth": []
+                    }
+                ],
+                "description": "docker-compose 日志",
+                "tags": [
+                    "Container Compose"
+                ],
+                "summary": "Container Compose logs",
+                "parameters": [
+                    {
+                        "type": "string",
+                        "description": "compose 文件地址",
+                        "name": "compose",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "时间筛选",
+                        "name": "since",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "是否追踪",
+                        "name": "follow",
+                        "in": "query"
+                    },
+                    {
+                        "type": "string",
+                        "description": "显示行号",
+                        "name": "tail",
+                        "in": "query"
+                    }
+                ],
+                "responses": {}
+            }
+        },
         "/containers/compose/test": {
             "post": {
                 "security": [

cmd/server/docs/swagger.yaml

@@ -4893,6 +4893,32 @@ paths:
       summary: Page composes
       tags:
       - Container Compose
+  /containers/compose/search/log:
+    post:
+      description: docker-compose 日志
+      parameters:
+      - description: compose 文件地址
+        in: query
+        name: compose
+        type: string
+      - description: 时间筛选
+        in: query
+        name: since
+        type: string
+      - description: 是否追踪
+        in: query
+        name: follow
+        type: string
+      - description: 显示行号
+        in: query
+        name: tail
+        type: string
+      responses: {}
+      security:
+      - ApiKeyAuth: []
+      summary: Container Compose logs
+      tags:
+      - Container Compose
   /containers/compose/test:
     post:
       consumes:

frontend/.env

@@ -5,7 +5,7 @@ VITE_GLOB_APP_TITLE = '1Panel'
 VITE_PORT = 4004
 
 # open 运行 npm run dev 时自动打开浏览器
-VITE_OPEN = true
+VITE_OPEN = false
 
 # 是否生成包预览文件
 VITE_REPORT = false

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

@@ -0,0 +1,196 @@
+<template>
+    <el-drawer v-model="open" :size="globalStore.isFullScreen ? '100%' : '50%'">
+        <template #header>
+            <DrawerHeader :header="$t('commons.button.log')" :resource="resource" :back="handleClose">
+                <template #extra v-if="!mobile">
+                    <el-tooltip :content="loadTooltip()" placement="top">
+                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+                    </el-tooltip>
+                </template>
+            </DrawerHeader>
+        </template>
+        <div class="flex flex-wrap">
+            <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-select @change="searchLogs" class="ml-5 selectWidth" v-model.number="logSearch.tail">
+                <template #prefix>{{ $t('container.lines') }}</template>
+                <el-option :value="0" :label="$t('commons.table.all')" />
+                <el-option :value="100" :label="100" />
+                <el-option :value="200" :label="200" />
+                <el-option :value="500" :label="500" />
+                <el-option :value="1000" :label="1000" />
+            </el-select>
+            <div class="ml-5">
+                <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
+                    {{ $t('commons.button.watch') }}
+                </el-checkbox>
+            </div>
+            <el-button class="ml-5" @click="onDownload" icon="Download">
+                {{ $t('file.download') }}
+            </el-button>
+        </div>
+
+        <codemirror
+            :autofocus="true"
+            :placeholder="$t('commons.msg.noneData')"
+            :indent-with-tab="true"
+            :tabSize="4"
+            style="margin-top: 10px; height: calc(100vh - 375px)"
+            :lineWrapping="true"
+            :matchBrackets="true"
+            theme="cobalt"
+            :styleActiveLine="true"
+            :extensions="extensions"
+            @ready="handleReady"
+            v-model="logInfo"
+            :disabled="true"
+        />
+    </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import i18n from '@/lang';
+import { dateFormatForName, downloadWithContent } from '@/utils/util';
+import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { MsgError } from '@/utils/message';
+import { GlobalStore } from '@/store';
+import screenfull from 'screenfull';
+
+const extensions = [javascript(), oneDark];
+
+const logInfo = ref();
+const view = shallowRef();
+const handleReady = (payload) => {
+    view.value = payload.view;
+};
+const terminalSocket = ref<WebSocket>();
+const open = ref(false);
+const resource = ref('');
+const globalStore = GlobalStore();
+const logVisiable = ref(false);
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
+const logSearch = reactive({
+    isWatch: true,
+    compose: '',
+    mode: 'all',
+    tail: 1000,
+});
+
+const handleClose = () => {
+    open.value = false;
+    terminalSocket.value?.close();
+};
+
+function toggleFullscreen() {
+    if (screenfull.isEnabled) {
+        screenfull.toggle();
+    }
+}
+const loadTooltip = () => {
+    return i18n.global.t('commons.button.' + (screenfull.isFullscreen ? 'quitFullscreen' : 'fullscreen'));
+};
+
+watch(logVisiable, (val) => {
+    if (screenfull.isEnabled && !val && !mobile.value) screenfull.exit();
+});
+
+const timeOptions = ref([
+    { label: i18n.global.t('container.all'), value: 'all' },
+    {
+        label: i18n.global.t('container.lastDay'),
+        value: new Date(new Date().getTime() - 3600 * 1000 * 24 * 1).getTime() / 1000 + '',
+    },
+    {
+        label: i18n.global.t('container.last4Hour'),
+        value: new Date(new Date().getTime() - 3600 * 1000 * 4).getTime() / 1000 + '',
+    },
+    {
+        label: i18n.global.t('container.lastHour'),
+        value: new Date(new Date().getTime() - 3600 * 1000).getTime() / 1000 + '',
+    },
+    {
+        label: i18n.global.t('container.last10Min'),
+        value: new Date(new Date().getTime() - 600 * 1000).getTime() / 1000 + '',
+    },
+]);
+
+const searchLogs = async () => {
+    if (Number(logSearch.tail) < 0) {
+        MsgError(i18n.global.t('container.linesHelper'));
+        return;
+    }
+    terminalSocket.value?.close();
+    logInfo.value = '';
+    const href = window.location.href;
+    const protocol = href.split('//')[0] === 'http:' ? 'ws' : 'wss';
+    const host = href.split('//')[1].split('/')[0];
+    terminalSocket.value = new WebSocket(
+        `${protocol}://${host}/api/v1/containers/compose/search/log?compose=${logSearch.compose}&since=${logSearch.mode}&tail=${logSearch.tail}&follow=${logSearch.isWatch}`,
+    );
+    terminalSocket.value.onmessage = (event) => {
+        logInfo.value += event.data;
+        const state = view.value.state;
+        view.value.dispatch({
+            selection: { anchor: state.doc.length, head: state.doc.length },
+            scrollIntoView: true,
+        });
+    };
+};
+
+const onDownload = async () => {
+    let msg =
+        logSearch.tail === 0
+            ? i18n.global.t('app.downloadLogHelper1', [resource.value])
+            : i18n.global.t('app.downloadLogHelper2', [resource.value, 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, resource.value + '-' + dateFormatForName(new Date()) + '.log');
+    });
+};
+
+interface DialogProps {
+    compose: string;
+    resource: string;
+}
+
+const acceptParams = (props: DialogProps): void => {
+    logSearch.compose = props.compose;
+    logSearch.tail = 1000;
+    logSearch.mode = timeOptions.value[3].value;
+    logSearch.isWatch = true;
+    resource.value = props.resource;
+    searchLogs();
+    open.value = true;
+    if (!mobile.value) {
+        screenfull.on('change', () => {
+            globalStore.isFullScreen = screenfull.isFullscreen;
+        });
+    }
+};
+
+onBeforeUnmount(() => {
+    terminalSocket.value?.close();
+});
+
+defineExpose({
+    acceptParams,
+});
+</script>
+
+<style scoped lang="scss">
+.selectWidth {
+    width: 200px;
+}
+</style>

frontend/src/lang/modules/en.ts

@@ -1295,6 +1295,9 @@ const message = {
         delete: 'Delete',
         openrestyDeleteHelper:
             'Forcibly deleting OpenResty will delete all websites, please confirm the risk before operation',
+        downloadLogHelper1: 'All logs of {0} application are about to be downloaded. Do you want to continue? ',
+        downloadLogHelper2:
+            'The latest {1} logs of {0} application are about to be downloaded. Do you want to continue? ',
     },
     website: {
         website: 'Website',

frontend/src/lang/modules/tw.ts

@@ -1230,6 +1230,8 @@ const message = {
         backupAppHelper: '升級失敗可以使用應用備份回滾',
         delete: '刪除',
         openrestyDeleteHelper: '強制刪除 OpenResty 會刪除所有的網站，請確認風險後操作',
+        downloadLogHelper1: '即將下載 {0} 套用所有日誌，是否繼續？ ',
+        downloadLogHelper2: '即將下載 {0} 應用最近 {1} 條日誌，是否繼續？ ',
     },
     website: {
         website: '網站',

frontend/src/lang/modules/zh.ts

@@ -1230,6 +1230,8 @@ const message = {
         backupAppHelper: '升级失败可以使用应用备份回滚',
         delete: '删除',
         openrestyDeleteHelper: '强制删除 OpenResty 会删除所有的网站，请确认风险之后操作',
+        downloadLogHelper1: '即将下载 {0} 应用所有日志，是否继续？',
+        downloadLogHelper2: '即将下载 {0} 应用最近 {1} 条日志，是否继续？',
     },
     website: {
         website: '网站',

frontend/src/views/app-store/installed/index.vue

@@ -261,6 +261,7 @@
     <AppUpgrade ref="upgradeRef" @close="search" />
     <PortJumpDialog ref="dialogPortJumpRef" />
     <AppIgnore ref="ignoreRef" @close="search" />
+    <ComposeLogs ref="composeLogRef" />
 </template>
 
 <script lang="ts" setup>
@@ -282,6 +283,7 @@ import AppDelete from './delete/index.vue';
 import AppParams from './detail/index.vue';
 import AppUpgrade from './upgrade/index.vue';
 import AppIgnore from './ignore/index.vue';
+import ComposeLogs from '@/components/compose-log/index.vue';
 import { App } from '@/api/interface/app';
 import Status from '@/components/status/index.vue';
 import { getAge } from '@/utils/util';
@@ -314,6 +316,7 @@ const appParamRef = ref();
 const upgradeRef = ref();
 const ignoreRef = ref();
 const dialogPortJumpRef = ref();
+const composeLogRef = ref();
 const tags = ref<App.Tag[]>([]);
 const activeTag = ref('all');
 const searchReq = reactive({
@@ -496,6 +499,15 @@ const buttons = [
             return row.status === 'DownloadErr' || row.status === 'Upgrading' || row.status === 'Rebuilding';
         },
     },
+    {
+        label: i18n.global.t('commons.button.log'),
+        click: (row: any) => {
+            openLog(row);
+        },
+        disabled: (row: any) => {
+            return row.status === 'DownloadErr';
+        },
+    },
 ];
 
 const openBackups = (key: string, name: string) => {
@@ -528,6 +540,10 @@ const quickJump = () => {
     router.push({ name: 'ContainerSetting' });
 };
 
+const openLog = (row: any) => {
+    composeLogRef.value.acceptParams({ compose: row.path + '/docker-compose.yml', resource: row.name });
+};
+
 onMounted(() => {
     const path = router.currentRoute.value.path;
     if (path == '/apps/upgrade') {

frontend/src/views/website/runtime/node/index.vue

@@ -73,7 +73,7 @@
             </template>
         </LayoutContent>
         <OperateNode ref="operateRef" @close="search" />
-        <Delete ref="deleteRef" @close="search()" />
+        <Delete ref="deleteRef" @close="search" />
     </div>
 </template>