feat: Add container orchestration navigation in app store

agent/app/dto/container.go

@@ -229,15 +229,16 @@ type BatchDelete struct {
 }
 
 type ComposeInfo struct {
-	Name            string             `json:"name"`
-	CreatedAt       string             `json:"createdAt"`
-	CreatedBy       string             `json:"createdBy"`
-	ContainerNumber int                `json:"containerNumber"`
-	ConfigFile      string             `json:"configFile"`
-	Workdir         string             `json:"workdir"`
-	Path            string             `json:"path"`
-	Containers      []ComposeContainer `json:"containers"`
-	Env             []string           `json:"env"`
+	Name           string             `json:"name"`
+	CreatedAt      string             `json:"createdAt"`
+	CreatedBy      string             `json:"createdBy"`
+	ContainerCount int                `json:"containerCount"`
+	RunningCount   int                `json:"runningCount"`
+	ConfigFile     string             `json:"configFile"`
+	Workdir        string             `json:"workdir"`
+	Path           string             `json:"path"`
+	Containers     []ComposeContainer `json:"containers"`
+	Env            []string           `json:"env"`
 }
 type ComposeContainer struct {
 	ContainerID string `json:"containerID"`

agent/app/service/container_compose.go

@@ -10,12 +10,9 @@ import (
 	"strings"
 	"time"
 
-	"github.com/1Panel-dev/1Panel/agent/app/repo"
-
-	"github.com/docker/docker/api/types/container"
-
 	"github.com/1Panel-dev/1Panel/agent/app/dto"
 	"github.com/1Panel-dev/1Panel/agent/app/model"
+	"github.com/1Panel-dev/1Panel/agent/app/repo"
 	"github.com/1Panel-dev/1Panel/agent/app/task"
 	"github.com/1Panel-dev/1Panel/agent/buserr"
 	"github.com/1Panel-dev/1Panel/agent/constant"
@@ -24,6 +21,7 @@ import (
 	"github.com/1Panel-dev/1Panel/agent/utils/cmd"
 	"github.com/1Panel-dev/1Panel/agent/utils/compose"
 	"github.com/1Panel-dev/1Panel/agent/utils/docker"
+	"github.com/docker/docker/api/types/container"
 	"github.com/docker/docker/api/types/filters"
 	"golang.org/x/net/context"
 )
@@ -54,14 +52,13 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 	}
 
 	composeCreatedByLocal, _ := composeRepo.ListRecord()
-
 	composeLocalMap := make(map[string]dto.ComposeInfo)
 	for _, localItem := range composeCreatedByLocal {
 		composeItemLocal := dto.ComposeInfo{
-			ContainerNumber: 0,
-			CreatedAt:       localItem.CreatedAt.Format(constant.DateTimeLayout),
-			ConfigFile:      localItem.Path,
-			Workdir:         strings.TrimSuffix(localItem.Path, "/docker-compose.yml"),
+			ContainerCount: 0,
+			CreatedAt:      localItem.CreatedAt.Format(constant.DateTimeLayout),
+			ConfigFile:     localItem.Path,
+			Workdir:        strings.TrimSuffix(localItem.Path, "/docker-compose.yml"),
 		}
 		composeItemLocal.CreatedBy = "1Panel"
 		composeItemLocal.Path = localItem.Path
@@ -78,18 +75,24 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 				CreateTime:  time.Unix(container.Created, 0).Format(constant.DateTimeLayout),
 			}
 			if compose, has := composeMap[name]; has {
-				compose.ContainerNumber++
+				compose.ContainerCount++
+				if strings.ToLower(containerItem.State) == "running" {
+					compose.RunningCount++
+				}
 				compose.Containers = append(compose.Containers, containerItem)
 				composeMap[name] = compose
 			} else {
 				config := container.Labels[composeConfigLabel]
 				workdir := container.Labels[composeWorkdirLabel]
 				composeItem := dto.ComposeInfo{
-					ContainerNumber: 1,
-					CreatedAt:       time.Unix(container.Created, 0).Format(constant.DateTimeLayout),
-					ConfigFile:      config,
-					Workdir:         workdir,
-					Containers:      []dto.ComposeContainer{containerItem},
+					ContainerCount: 1,
+					CreatedAt:      time.Unix(container.Created, 0).Format(constant.DateTimeLayout),
+					ConfigFile:     config,
+					Workdir:        workdir,
+					Containers:     []dto.ComposeContainer{containerItem},
+				}
+				if strings.ToLower(containerItem.State) == "running" {
+					composeItem.RunningCount = 1
 				}
 				createdBy, ok := container.Labels[composeCreatedBy]
 				if ok {
@@ -118,8 +121,8 @@ func (u *ContainerService) PageCompose(req dto.SearchWithPage) (int64, interface
 	}
 	for key, item := range composeMap {
 		if existingItem, exists := mergedMap[key]; exists {
-			if item.ContainerNumber > 0 {
-				if existingItem.ContainerNumber <= 0 {
+			if item.ContainerCount > 0 {
+				if existingItem.ContainerCount <= 0 {
 					mergedMap[key] = item
 				}
 			}

frontend/src/api/interface/container.ts

@@ -275,7 +275,8 @@ export namespace Container {
         name: string;
         createdAt: string;
         createdBy: string;
-        containerNumber: number;
+        containerCount: number;
+        runningCount: number;
         configFile: string;
         workdir: string;
         path: string;

frontend/src/lang/modules/en.ts

@@ -930,7 +930,7 @@ const message = {
         containerNumber: 'Container number',
         containerStatus: 'Container status',
         exited: 'Exited',
-        running: 'Running',
+        running: 'Running ( {0} / {1} )',
         composeDetailHelper:
             'The compose is created external to 1Panel. The start and stop operations are not supported.',
         composeOperatorHelper: '{1} operation will be performed on {0}. Do you want to continue?',

frontend/src/lang/modules/ja.ts

@@ -904,7 +904,7 @@ const message = {
         containerNumber: 'コンテナ番号',
         containerStatus: 'コンテナステータス',
         exited: '終了',
-        running: 'ランニング',
+        running: 'ランニング ( {0} / {1} )',
         composeDetailHelper: '構成は1パネルの外部に作成されます。開始および停止操作はサポートされていません。',
         composeOperatorHelper: '{1}操作は{0}で実行されます。続けたいですか？',
         composeDownHelper:

frontend/src/lang/modules/ko.ts

@@ -895,7 +895,7 @@ const message = {
         containerNumber: '컨테이너 수',
         containerStatus: '컨테이너 상태',
         exited: '종료됨',
-        running: '실행 중',
+        running: '실행 중 ( {0} / {1} )',
         composeDetailHelper: '이 컴포즈는 1Panel 외부에서 생성되었습니다. 시작 및 중지 작업은 지원되지 않습니다.',
         composeOperatorHelper: '{1} 작업이 {0}에서 수행됩니다. 계속 하시겠습니까?',
         composeDownHelper:

frontend/src/lang/modules/ms.ts

@@ -923,7 +923,7 @@ const message = {
         containerNumber: 'Bilangan kontena',
         containerStatus: 'Status kontena',
         exited: 'Keluar',
-        running: 'Berjalan',
+        running: 'Berjalan ( {0} / {1} )',
         composeDetailHelper: 'Komposisi dibuat di luar 1Panel. Operasi mula dan berhenti tidak disokong.',
         composeOperatorHelper: 'Operasi {1} akan dilakukan pada {0}. Adakah anda mahu meneruskan?',
         composeDownHelper:

frontend/src/lang/modules/pt-br.ts

@@ -917,7 +917,7 @@ const message = {
         containerNumber: 'Número de containers',
         containerStatus: 'Status do container',
         exited: 'Finalizado',
-        running: 'Em execução',
+        running: 'Em execução ( {0} / {1} )',
         composeDetailHelper:
             'A composição foi criada externamente ao 1Panel. As operações de iniciar e parar não são suportadas.',
         composeOperatorHelper: 'A operação {1} será realizada no {0}. Deseja continuar?',

frontend/src/lang/modules/ru.ts

@@ -917,7 +917,7 @@ const message = {
         containerNumber: 'Количество контейнеров',
         containerStatus: 'Статус контейнера',
         exited: 'Завершен',
-        running: 'Работает',
+        running: 'Работает ( {0} / {1} )',
         composeDetailHelper: 'Compose создан вне 1Panel. Операции запуска и остановки не поддерживаются.',
         composeOperatorHelper: 'Операция {1} будет выполнена для {0}. Хотите продолжить?',
         composeDownHelper: 'Это остановит и удалит все контейнеры и сети под compose {0}. Хотите продолжить?',

frontend/src/lang/modules/tr.ts

@@ -943,7 +943,7 @@ const message = {
         containerNumber: 'Konteyner sayısı',
         containerStatus: 'Konteyner durumu',
         exited: 'Çıktı',
-        running: 'Çalışıyor',
+        running: 'Çalışıyor ( {0} / {1} )',
         composeDetailHelper: 'Compose, 1Panel dışında oluşturulmuştur. Başlatma ve durdurma işlemleri desteklenmez.',
         composeOperatorHelper: '{0} üzerinde {1} işlemi gerçekleştirilecek. Devam etmek istiyor musunuz?',
         composeDownHelper:

frontend/src/lang/modules/zh-Hant.ts

@@ -891,7 +891,7 @@ const message = {
         containerNumber: '容器數量',
         containerStatus: '容器狀態',
         exited: '已停止',
-        running: '運行中',
+        running: '運行中 ( {0} / {1} )',
         composeDetailHelper: '該 compose 為 1Panel 編排外部創建。暫不支持啟停操作。',
         composeOperatorHelper: '將對 {0} 進行 {1} 操作，是否繼續？',
         composeDownHelper: '將停止並刪除 {0} 編排下所有容器及網絡，是否繼續？',

frontend/src/lang/modules/zh.ts

@@ -889,7 +889,7 @@ const message = {
         containerNumber: '容器数量',
         containerStatus: '容器状态',
         exited: '已停止',
-        running: '运行中',
+        running: '运行中 ( {0} / {1} )',
         composeDetailHelper: '该 compose 为 1Panel 编排外部创建。暂不支持启停操作。',
         composeOperatorHelper: '将对 {0} 进行 {1} 操作，是否继续？',
         composeDownHelper: '将停止并删除 {0} 编排下所有容器及网络，是否继续？',

frontend/src/routers/index.ts

@@ -73,6 +73,8 @@ 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

@@ -57,7 +57,7 @@ const containerRouter = {
                     },
                 },
                 {
-                    path: 'composeDetail/:filters?',
+                    path: 'compose/detail',
                     name: 'ComposeDetail',
                     component: () => import('@/views/container/compose/detail/index.vue'),
                     props: true,

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

@@ -150,6 +150,29 @@
                                                                     </el-button>
                                                                 </el-tooltip>
                                                             </span>
+                                                            <span class="ml-1">
+                                                                <el-tooltip
+                                                                    v-if="mode !== 'upgrade'"
+                                                                    effect="dark"
+                                                                    :content="$t('container.compose')"
+                                                                    placement="top"
+                                                                >
+                                                                    <el-button
+                                                                        type="primary"
+                                                                        link
+                                                                        @click="
+                                                                            routerToNameWithQuery('ComposeDetail', {
+                                                                                name: installed.name,
+                                                                                uncached: 'true',
+                                                                            })
+                                                                        "
+                                                                    >
+                                                                        <el-icon>
+                                                                            <SvgIcon iconName="p-docker" />
+                                                                        </el-icon>
+                                                                    </el-button>
+                                                                </el-tooltip>
+                                                            </span>
                                                             <span class="ml-1" v-if="mode === 'installed'">
                                                                 <el-tooltip
                                                                     effect="dark"
@@ -433,7 +456,7 @@ import IgnoreApp from '@/views/app-store/installed/ignore/create/index.vue';
 import { getAgentSettingByKey } from '@/api/modules/setting';
 import Tags from '@/views/app-store/components/tag.vue';
 import SvgIcon from '@/components/svg-icon/svg-icon.vue';
-import { routerToFileWithPath } from '@/utils/router';
+import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
 
 const data = ref<any>();
 const loading = ref(false);