feat: Optimize compose navigation logic (#9968)

Refs #9959

frontend/src/routers/index.ts

@@ -73,8 +73,6 @@ router.afterEach((to) => {
                 localStorage.setItem('cachedRoute' + to.meta.activeMenu, '/cronjobs/cronjob');
             } else if (to.meta.activeMenu === '/containers' && to.path === '/containers/container/operate') {
                 localStorage.setItem('cachedRoute' + to.meta.activeMenu, '/containers/container');
-            } else if (to.meta.activeMenu === '/containers' && to.path === '/containers/compose/detail') {
-                localStorage.setItem('cachedRoute' + to.meta.activeMenu, '/containers/compose');
             } else if (to.meta.activeMenu === '/toolbox' && to.path === '/toolbox/clam/setting') {
                 localStorage.setItem('cachedRoute' + to.meta.activeMenu, '/toolbox/clam');
             } else {

frontend/src/routers/modules/container.ts

@@ -56,18 +56,6 @@ const containerRouter = {
                         ignoreTab: true,
                     },
                 },
-                {
-                    path: 'compose/detail',
-                    name: 'ComposeDetail',
-                    component: () => import('@/views/container/compose/detail/index.vue'),
-                    props: true,
-                    hidden: true,
-                    meta: {
-                        activeMenu: '/containers',
-                        requiresAuth: false,
-                        ignoreTab: true,
-                    },
-                },
                 {
                     path: 'image',
                     name: 'Image',

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

@@ -154,18 +154,13 @@
                                                                 <el-tooltip
                                                                     v-if="mode !== 'upgrade'"
                                                                     effect="dark"
-                                                                    :content="$t('container.compose')"
+                                                                    :content="$t('menu.container')"
                                                                     placement="top"
                                                                 >
                                                                     <el-button
                                                                         type="primary"
                                                                         link
-                                                                        @click="
+                                                                        @click="toContainer(installed)"
-                                                                            routerToNameWithQuery('ComposeDetail', {
-                                                                                name: installed.name,
-                                                                                uncached: 'true',
-                                                                            })
-                                                                        "
                                                                     >
                                                                         <el-icon>
                                                                             <SvgIcon iconName="p-docker" />
@@ -709,6 +704,10 @@ const buttons = [
     },
 ];
 
+const toContainer = async (row: App.AppInstalled) => {
+    routerToNameWithQuery('ContainerItem', { filters: 'com.docker.compose.project=' + row.name, uncached: true });
+};
+
 const openBackups = (key: string, name: string, status: string) => {
     let params = {
         type: 'app',

frontend/src/views/container/compose/detail/index.vue

@@ -1,304 +0,0 @@
-<template>
-    <div v-loading="loading">
-        <LayoutContent
-            back-name="Compose"
-            :title="$t('container.containerList') + ' [ ' + composeName + ' ]'"
-            :reload="true"
-        >
-            <template #main>
-                <el-button-group>
-                    <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
-                        {{ $t('commons.operate.start') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('stop', null)" @click="onOperate('stop', null)">
-                        {{ $t('commons.operate.stop') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('restart', null)" @click="onOperate('restart', null)">
-                        {{ $t('commons.button.restart') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('kill', null)" @click="onOperate('kill', null)">
-                        {{ $t('container.kill') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('pause', null)" @click="onOperate('pause', null)">
-                        {{ $t('container.pause') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('unpause', null)" @click="onOperate('unpause', null)">
-                        {{ $t('container.unpause') }}
-                    </el-button>
-                    <el-button :disabled="checkStatus('remove', null)" @click="onOperate('remove', null)">
-                        {{ $t('commons.button.delete') }}
-                    </el-button>
-                </el-button-group>
-                <ComplexTable
-                    :pagination-config="paginationConfig"
-                    v-model:selects="selects"
-                    style="margin-top: 20px"
-                    :data="data"
-                    @search="search"
-                >
-                    <el-table-column type="selection" fix />
-                    <el-table-column
-                        :label="$t('commons.table.name')"
-                        min-width="100"
-                        prop="name"
-                        fix
-                        show-overflow-tooltip
-                    >
-                        <template #default="{ row }">
-                            <el-button text type="primary" @click="onInspect(row.containerID)">
-                                {{ row.name }}
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        :label="$t('container.image')"
-                        show-overflow-tooltip
-                        min-width="100"
-                        prop="imageName"
-                    />
-                    <el-table-column :label="$t('commons.table.status')" min-width="100" prop="state" sortable>
-                        <template #default="{ row }">
-                            <el-dropdown placement="bottom">
-                                <Status :key="row.state" :status="row.state" :operate="true"></Status>
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('start', row)"
-                                            @click="onOperate('start', row)"
-                                        >
-                                            {{ $t('commons.operate.start') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('stop', row)"
-                                            @click="onOperate('stop', row)"
-                                        >
-                                            {{ $t('commons.operate.stop') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('restart', row)"
-                                            @click="onOperate('restart', row)"
-                                        >
-                                            {{ $t('commons.button.restart') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('kill', row)"
-                                            @click="onOperate('kill', row)"
-                                        >
-                                            {{ $t('container.kill') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('pause', row)"
-                                            @click="onOperate('pause', row)"
-                                        >
-                                            {{ $t('container.pause') }}
-                                        </el-dropdown-item>
-                                        <el-dropdown-item
-                                            :disabled="checkStatus('unpause', row)"
-                                            @click="onOperate('unpause', row)"
-                                        >
-                                            {{ $t('container.unpause') }}
-                                        </el-dropdown-item>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                        </template>
-                    </el-table-column>
-                    <el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
-                    <el-table-column
-                        prop="createTime"
-                        :label="$t('commons.table.date')"
-                        :formatter="dateFormat"
-                        show-overflow-tooltip
-                    />
-                    <fu-table-operations
-                        width="220"
-                        :ellipsis="10"
-                        :buttons="buttons"
-                        :label="$t('commons.table.operate')"
-                        fix
-                    />
-                </ComplexTable>
-
-                <CodemirrorDrawer ref="myDetail" />
-                <OpDialog ref="opRef" @search="search" />
-
-                <ContainerLogDialog ref="dialogContainerLogRef" />
-                <MonitorDialog ref="dialogMonitorRef" />
-                <TerminalDialog ref="dialogTerminalRef" />
-            </template>
-        </LayoutContent>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import MonitorDialog from '@/views/container/container/monitor/index.vue';
-import ContainerLogDialog from '@/components/log/container-drawer/index.vue';
-import TerminalDialog from '@/views/container/container/terminal/index.vue';
-import CodemirrorDrawer from '@/components/codemirror-pro/drawer.vue';
-import Status from '@/components/status/index.vue';
-import { dateFormat } from '@/utils/util';
-import { containerOperator, inspect, searchContainer } from '@/api/modules/container';
-import i18n from '@/lang';
-import { Container } from '@/api/interface/container';
-import router from '@/routers';
-
-const composeName = ref();
-const dialogContainerLogRef = ref();
-const opRef = ref();
-
-const data = ref();
-const selects = ref<any>([]);
-const paginationConfig = reactive({
-    cacheSizeKey: 'container-page-size',
-    currentPage: 1,
-    pageSize: 10,
-    total: 0,
-});
-
-const loading = ref(false);
-
-const search = async () => {
-    let params = {
-        name: '',
-        state: 'all',
-        page: paginationConfig.currentPage,
-        pageSize: paginationConfig.pageSize,
-        filters: 'com.docker.compose.project=' + composeName.value,
-        orderBy: 'createdAt',
-        order: 'null',
-    };
-    loading.value = true;
-    await searchContainer(params)
-        .then((res) => {
-            loading.value = false;
-            data.value = res.data.items || [];
-            paginationConfig.total = res.data.total;
-        })
-        .catch(() => {
-            loading.value = false;
-        });
-};
-
-const detailInfo = ref();
-const myDetail = ref();
-const onInspect = async (id: string) => {
-    const res = await inspect({ id: id, type: 'container' });
-    detailInfo.value = JSON.stringify(JSON.parse(res.data), null, 2);
-    let param = {
-        header: i18n.global.t('commons.button.view'),
-        detailInfo: detailInfo.value,
-        mode: 'yaml',
-    };
-    myDetail.value!.acceptParams(param);
-};
-
-const checkStatus = (operation: string, row: Container.ContainerInfo | null) => {
-    let opList = row ? [row] : selects.value;
-    if (opList.length < 1) {
-        return true;
-    }
-    switch (operation) {
-        case 'start':
-            for (const item of opList) {
-                if (item.state === 'running') {
-                    return true;
-                }
-            }
-            return false;
-        case 'stop':
-            for (const item of opList) {
-                if (item.state === 'stopped' || item.state === 'exited') {
-                    return true;
-                }
-            }
-            return false;
-        case 'pause':
-            for (const item of opList) {
-                if (item.state === 'paused' || item.state === 'exited') {
-                    return true;
-                }
-            }
-            return false;
-        case 'unpause':
-            for (const item of opList) {
-                if (item.state !== 'paused') {
-                    return true;
-                }
-            }
-            return false;
-    }
-};
-
-const onOperate = async (op: string, row: Container.ContainerInfo | null) => {
-    let opList = row ? [row] : selects.value;
-    let msg = i18n.global.t('container.operatorHelper', [i18n.global.t('container.' + op)]);
-    let names = [];
-    for (const item of opList) {
-        names.push(item.name);
-        if (item.isFromApp) {
-            msg = i18n.global.t('container.operatorAppHelper', [i18n.global.t('container.' + op)]);
-        }
-    }
-    const successMsg = `${i18n.global.t('container.' + op)}${i18n.global.t('commons.status.success')}`;
-    opRef.value.acceptParams({
-        title: i18n.global.t('container.' + op),
-        names: names,
-        msg: msg,
-        api: containerOperator,
-        params: { names: names, operation: op },
-        successMsg,
-    });
-};
-
-const dialogMonitorRef = ref();
-const onMonitor = (row: any) => {
-    dialogMonitorRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
-};
-
-const dialogTerminalRef = ref();
-const onTerminal = (row: any) => {
-    const title = i18n.global.t('menu.container') + ' ' + row.name;
-    dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, title: title });
-};
-
-const buttons = [
-    {
-        label: i18n.global.t('menu.terminal'),
-        disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running';
-        },
-        click: (row: Container.ContainerInfo) => {
-            onTerminal(row);
-        },
-    },
-    {
-        label: i18n.global.t('menu.monitor'),
-        disabled: (row: Container.ContainerInfo) => {
-            return row.state !== 'running';
-        },
-        click: (row: Container.ContainerInfo) => {
-            onMonitor(row);
-        },
-    },
-    {
-        label: i18n.global.t('commons.button.log'),
-        click: (row: Container.ContainerInfo) => {
-            dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
-        },
-    },
-];
-
-onMounted(() => {
-    if (router.currentRoute.value.query?.name) {
-        composeName.value = router.currentRoute.value.query.name;
-    }
-    search();
-});
-</script>
-
-<style lang="scss" scoped>
-.app-content {
-    height: 50px;
-}
-</style>

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

@@ -61,19 +61,27 @@
                             <el-text class="mx-1" v-if="row.containerCount == 0" type="danger">
                                 {{ $t('container.exited') }}
                             </el-text>
-                            <el-text
+                            <el-popover width="300px" v-else>
-                                v-else
+                                <template #reference>
-                                class="mx-1"
+                                    <el-text
-                                :type="row.containerCount === row.runningCount ? 'success' : 'warning'"
+                                        class="cursor-pointer"
-                            >
+                                        size="small"
-                                {{ $t('container.running', [row.runningCount, row.containerCount]) }}
+                                        :type="row.containerCount === row.runningCount ? 'success' : 'warning'"
-                            </el-text>
+                                    >
+                                        {{ $t('container.running', [row.runningCount, row.containerCount]) }}
+                                    </el-text>
+                                </template>
+                                <div v-for="(item, index) in row.containers" :key="index" class="mt-2">
+                                    <span>{{ item.name }}</span>
+                                    <Status class="float-right" :key="item.state" :status="item.state" />
+                                </div>
+                            </el-popover>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.createdAt')" prop="createdAt" min-width="80" fix />
                     <fu-table-operations
-                        width="300px"
+                        width="200px"
-                        :ellipsis="10"
+                        :ellipsis="2"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fix
@@ -82,6 +90,7 @@
             </template>
         </LayoutContent>
 
+        <ComposeLogs ref="composeLogRef" />
         <EditDialog ref="dialogEditRef" @search="search" />
         <CreateDialog @search="search" ref="dialogRef" />
         <DeleteDialog @search="search" ref="dialogDelRef" />
@@ -93,12 +102,13 @@ import { reactive, ref } from 'vue';
 import EditDialog from '@/views/container/compose/edit/index.vue';
 import CreateDialog from '@/views/container/compose/create/index.vue';
 import DeleteDialog from '@/views/container/compose/delete/index.vue';
+import ComposeLogs from '@/components/log/compose/index.vue';
 import { composeOperator, inspect, searchCompose } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
 import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
-import { MsgInfo, MsgSuccess } from '@/utils/message';
+import { MsgSuccess } from '@/utils/message';
 
 const data = ref();
 const selects = ref<any>([]);
@@ -112,6 +122,8 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
+const composeLogRef = ref();
+
 const isActive = ref(false);
 const isExist = ref(false);
 
@@ -141,7 +153,7 @@ const search = async () => {
 };
 
 const loadDetail = async (row: Container.ComposeInfo) => {
-    routerToNameWithQuery('ComposeDetail', { name: row.name });
+    routerToNameWithQuery('ContainerItem', { filters: 'com.docker.compose.project=' + row.name });
 };
 
 const dialogRef = ref();
@@ -172,10 +184,6 @@ const onEdit = async (row: Container.ComposeInfo) => {
 };
 
 const onComposeOperate = async (operation: string, row: any) => {
-    if (row.createdBy !== '1Panel' && row.createdBy !== 'App') {
-        MsgInfo(i18n.global.t('container.composeDetailHelper'));
-        return;
-    }
     let mes =
         operation === 'down'
             ? i18n.global.t('container.composeDownHelper', [row.name])
@@ -207,6 +215,14 @@ const onComposeOperate = async (operation: string, row: any) => {
     });
 };
 
+const openLog = (row: any) => {
+    composeLogRef.value.acceptParams({
+        compose: row.path,
+        resource: row.name,
+        container: row.container,
+    });
+};
+
 const buttons = [
     {
         label: i18n.global.t('commons.button.edit'),
@@ -217,6 +233,12 @@ const buttons = [
             return row.createdBy === 'Local';
         },
     },
+    {
+        label: i18n.global.t('commons.button.log'),
+        click: (row: Container.ComposeInfo) => {
+            openLog(row);
+        },
+    },
     {
         label: i18n.global.t('commons.operate.start'),
         click: (row: Container.ComposeInfo) => {

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

@@ -376,6 +376,7 @@ import i18n from '@/lang';
 import { MsgWarning } from '@/utils/message';
 import { GlobalStore } from '@/store';
 import { routerToName, routerToNameWithQuery } from '@/utils/router';
+import router from '@/routers';
 const globalStore = GlobalStore();
 
 const mobile = computed(() => {
@@ -441,7 +442,7 @@ const search = async (column?: any) => {
         return;
     }
     localStorage.setItem('includeAppStore', includeAppStore.value ? 'true' : 'false');
-    let filterItem = props.filters ? props.filters : '';
+    let filterItem = (router.currentRoute.value.query?.filters as string) || '';
     paginationConfig.orderBy = column?.order ? column.prop : paginationConfig.orderBy;
     paginationConfig.order = column?.order ? column.order : paginationConfig.order;
     let params = {

frontend/src/views/toolbox/clam/index.vue

@@ -29,6 +29,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" />
+                <TableRefresh @search="search()" />
+                <TableSetting title="clam-refresh" @search="search()" />
             </template>
             <el-card v-if="clamStatus.isExist && !clamStatus.isRunning && maskShow" class="mask-prompt">
                 <span>{{ $t('toolbox.clam.notStart') }}</span>