feat: 容器列表增加状态筛选 (#2587)

Refs #2471

backend/app/dto/container.go

@@ -5,6 +5,7 @@ import "time"
 type PageContainer struct {
 	PageInfo
 	Name    string `json:"name"`
+	State   string `json:"state" validate:"required,oneof=all created running paused restarting removing exited dead"`
 	OrderBy string `json:"orderBy"`
 	Order   string `json:"order"`
 	Filters string `json:"filters"`

backend/app/service/container.go

@@ -102,6 +102,17 @@ func (u *ContainerService) Page(req dto.PageContainer) (int64, interface{}, erro
 			}
 		}
 	}
+	if req.State != "all" {
+		length, count := len(list), 0
+		for count < length {
+			if list[count].State != req.State {
+				list = append(list[:count], list[(count+1):]...)
+				length--
+			} else {
+				count++
+			}
+		}
+	}
 	switch req.OrderBy {
 	case "name":
 		sort.Slice(list, func(i, j int) bool {

cmd/server/docs/docs.go

@@ -14491,7 +14491,8 @@ const docTemplate = `{
             "type": "object",
             "required": [
                 "page",
-                "pageSize"
+                "pageSize",
+                "state"
             ],
             "properties": {
                 "filters": {
@@ -14511,6 +14512,19 @@ const docTemplate = `{
                 },
                 "pageSize": {
                     "type": "integer"
+                },
+                "state": {
+                    "type": "string",
+                    "enum": [
+                        "all",
+                        "created",
+                        "running",
+                        "paused",
+                        "restarting",
+                        "removing",
+                        "exited",
+                        "dead"
+                    ]
                 }
             }
         },

cmd/server/docs/swagger.json

@@ -14484,7 +14484,8 @@
             "type": "object",
             "required": [
                 "page",
-                "pageSize"
+                "pageSize",
+                "state"
             ],
             "properties": {
                 "filters": {
@@ -14504,6 +14505,19 @@
                 },
                 "pageSize": {
                     "type": "integer"
+                },
+                "state": {
+                    "type": "string",
+                    "enum": [
+                        "all",
+                        "created",
+                        "running",
+                        "paused",
+                        "restarting",
+                        "removing",
+                        "exited",
+                        "dead"
+                    ]
                 }
             }
         },

cmd/server/docs/swagger.yaml

@@ -1634,9 +1634,21 @@ definitions:
         type: integer
       pageSize:
         type: integer
+      state:
+        enum:
+        - all
+        - created
+        - running
+        - paused
+        - restarting
+        - removing
+        - exited
+        - dead
+        type: string
     required:
     - page
     - pageSize
+    - state
     type: object
   dto.PageInfo:
     properties:

frontend/src/api/interface/container.ts

@@ -8,6 +8,7 @@ export namespace Container {
     }
     export interface ContainerSearch extends ReqPage {
         name: string;
+        state: string;
         filters: string;
         orderBy: string;
         order: string;

frontend/src/components/status/index.vue

@@ -28,6 +28,10 @@ const getType = (status: string) => {
         case 'stopped':
             return 'danger';
         case 'unhealthy':
+        case 'paused':
+        case 'exited':
+        case 'dead':
+        case 'removing':
             return 'warning';
         default:
             return '';
@@ -43,6 +47,7 @@ const loadingStatus = [
     'recreating',
     'creating',
     'starting',
+    'removing',
 ];
 
 const loadingIcon = (status: string): boolean => {

frontend/src/lang/modules/en.ts

@@ -212,6 +212,7 @@ const message = {
             removing: 'Removing',
             paused: 'Paused',
             exited: 'Exited',
+            dead: 'Dead',
             installing: 'Installing',
             enabled: 'Enabled',
             disabled: 'Disabled',

frontend/src/lang/modules/tw.ts

@@ -208,9 +208,10 @@ const message = {
             restarting: '重啟中',
             uploading: '上傳中',
             unhealthy: '異常',
-            removing: '遷移中',
+            removing: '移除中',
-            paused: '暫停',
+            paused: '已暫停',
-            exited: '停止',
+            exited: '已停止',
+            dead: '已結束',
             installing: '安裝中',
             enabled: '已啟用',
             disabled: '已停止',

frontend/src/lang/modules/zh.ts

@@ -208,9 +208,10 @@ const message = {
             restarting: '重启中',
             uploading: '上传中',
             unhealthy: '异常',
-            removing: '迁移中',
+            removing: '移除中',
-            paused: '暂停',
+            paused: '已暂停',
-            exited: '停止',
+            exited: '已停止',
+            dead: '已结束',
             installing: '安装中',
             enabled: '已启用',
             disabled: '已停止',
@@ -485,6 +486,7 @@ const message = {
         operatorHelper: '将对以下容器进行 {0} 操作，是否继续？',
         operatorAppHelper:
             '将对以下容器进行 {0} 操作，其中部分来源于应用商店，该操作可能会影响到该服务的正常使用，是否确认？',
+        dead: '',
         start: '启动',
         stop: '停止',
         restart: '重启',

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

@@ -55,6 +55,19 @@
                     </el-col>
                 </el-row>
             </template>
+            <template #search>
+                <el-select v-model="searchState" @change="search()" clearable>
+                    <template #prefix>{{ $t('commons.table.status') }}</template>
+                    <el-option :label="$t('commons.table.all')" value="all"></el-option>
+                    <el-option :label="$t('commons.status.created')" value="created"></el-option>
+                    <el-option :label="$t('commons.status.running')" value="running"></el-option>
+                    <el-option :label="$t('commons.status.paused')" value="paused"></el-option>
+                    <el-option :label="$t('commons.status.restarting')" value="restarting"></el-option>
+                    <el-option :label="$t('commons.status.removing')" value="removing"></el-option>
+                    <el-option :label="$t('commons.status.exited')" value="exited"></el-option>
+                    <el-option :label="$t('commons.status.dead')" value="dead"></el-option>
+                </el-select>
+            </template>
             <template #main>
                 <ComplexTable
                     :pagination-config="paginationConfig"
@@ -234,7 +247,7 @@
         <ReNameDialog @search="search" ref="dialogReNameRef" />
         <ContainerLogDialog ref="dialogContainerLogRef" />
         <OperateDialog @search="search" ref="dialogOperateRef" />
-        <UpgraeDialog @search="search" ref="dialogUpgradeRef" />
+        <UpgradeDialog @search="search" ref="dialogUpgradeRef" />
         <MonitorDialog ref="dialogMonitorRef" />
         <TerminalDialog ref="dialogTerminalRef" />
 
@@ -249,7 +262,7 @@ import TableSetting from '@/components/table-setting/index.vue';
 import PruneDialog from '@/views/container/container/prune/index.vue';
 import ReNameDialog from '@/views/container/container/rename/index.vue';
 import OperateDialog from '@/views/container/container/operate/index.vue';
-import UpgraeDialog from '@/views/container/container/upgrade/index.vue';
+import UpgradeDialog from '@/views/container/container/upgrade/index.vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';
 import ContainerLogDialog from '@/views/container/container/log/index.vue';
 import TerminalDialog from '@/views/container/container/terminal/index.vue';
@@ -288,6 +301,7 @@ const paginationConfig = reactive({
     order: 'null',
 });
 const searchName = ref();
+const searchState = ref('all');
 const dialogUpgradeRef = ref();
 const dialogPortJumpRef = ref();
 const handleRef = ref();
@@ -345,6 +359,7 @@ const search = async (column?: any) => {
     paginationConfig.order = column?.order ? column.order : paginationConfig.order;
     let params = {
         name: searchName.value,
+        state: searchState.value || 'all',
         page: paginationConfig.currentPage,
         pageSize: paginationConfig.pageSize,
         filters: filterItem,

sonar-project.properties

@@ -1,6 +1,8 @@
 sonar.projectKey=1Panel-dev_1Panel
 sonar.organization=1panel-dev
 
+sonar.exclusions= frontend/src/lang/modules/*
+
 # This is the name and version displayed in the SonarCloud UI.
 #sonar.projectName=1Panel
 #sonar.projectVersion=1.0