fix: 容器列表端口显示优化 (#2188)

Refs #2181
2023-09-05 17:32:15 +08:00 · 2023-09-05 17:32:15 +08:00 · 0a9fc26714
parent ed3d587046
commit 0a9fc26714
8 changed files with 92 additions and 48 deletions
--- a/backend/app/service/container.go
+++ b/backend/app/service/container.go
@ -147,14 +147,7 @@ func (u *ContainerService) Page(req dto.PageContainer) (int64, interface{}, erro
 			IsFromApp = true
 		}

-		var ports []string
-		for _, port := range item.Ports {
-			itemPortStr := fmt.Sprintf("%v/%s", port.PrivatePort, port.Type)
-			if port.PublicPort != 0 {
-				itemPortStr = fmt.Sprintf("%v->%v/%s", port.PublicPort, port.PrivatePort, port.Type)
-			}
-			ports = append(ports, itemPortStr)
-		}
+		ports := simplifyPort(item.Ports)
 		backDatas[i] = dto.ContainerInfo{
 			ContainerID:   item.ID,
 			CreateTime:    time.Unix(item.Created, 0).Format("2006-01-02 15:04:05"),
@ -937,3 +930,57 @@ func loadVolumeBinds(binds []string) []dto.VolumeHelper {
 	}
 	return datas
 }
+
+func simplifyPort(ports []types.Port) []string {
+	var datas []string
+	if len(ports) == 0 {
+		return datas
+	}
+	if len(ports) == 1 {
+		itemPortStr := fmt.Sprintf("%v/%s", ports[0].PrivatePort, ports[0].Type)
+		if ports[0].PublicPort != 0 {
+			itemPortStr = fmt.Sprintf("%v->%v/%s", ports[0].PublicPort, ports[0].PrivatePort, ports[0].Type)
+		}
+		datas = append(datas, itemPortStr)
+		return datas
+	}
+
+	sort.Slice(ports, func(i, j int) bool {
+		return ports[i].PrivatePort < ports[j].PrivatePort
+	})
+	start := ports[0]
+
+	for i := 1; i < len(ports); i++ {
+		if ports[i].PrivatePort != ports[i-1].PrivatePort+1 || ports[i].IP != ports[i-1].IP || ports[i].PublicPort != ports[i-1].PublicPort+1 || ports[i].Type != ports[i-1].Type {
+			if ports[i-1].PrivatePort == start.PrivatePort {
+				itemPortStr := fmt.Sprintf("%s:%v/%s", start.IP, start.PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v->%v/%s", start.IP, start.PublicPort, start.PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			} else {
+				itemPortStr := fmt.Sprintf("%s:%v-%v/%s", start.IP, start.PrivatePort, ports[i-1].PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v-%v->%v-%v/%s", start.IP, start.PublicPort, ports[i-1].PublicPort, start.PrivatePort, ports[i-1].PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			}
+			start = ports[i]
+		} else if i == len(ports)-1 {
+			if ports[i].PrivatePort == start.PrivatePort {
+				itemPortStr := fmt.Sprintf("%s:%v/%s", start.IP, start.PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v->%v/%s", start.IP, start.PublicPort, start.PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			} else {
+				itemPortStr := fmt.Sprintf("%s:%v-%v/%s", start.IP, start.PrivatePort, ports[i].PrivatePort, start.Type)
+				if start.PublicPort != 0 {
+					itemPortStr = fmt.Sprintf("%s:%v-%v->%v-%v/%s", start.IP, start.PublicPort, ports[i].PublicPort, start.PrivatePort, ports[i].PrivatePort, start.Type)
+				}
+				datas = append(datas, itemPortStr)
+			}
+		}
+	}
+	return datas
+}
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -78,7 +78,6 @@ const message = {
            interval: 'Interval',
            user: 'User',
            title: 'Title',
-            network: 'Network',
            port: 'Port',
            protocol: 'Protocol',
            tableSetting: 'Table setting',
@ -515,6 +514,7 @@ const message = {
            'Clearing logs requires restarting the container, and this operation cannot be rolled back. Do you want to continue?',
        newName: 'New name',
        source: 'Resource rate',
+        ip: 'IP address',
        cpuShare: 'CPU Share',
        cpuShareHelper:
            'The default CPU share for a container is 1024, which can be increased to give the container more CPU time.',
@ -532,7 +532,7 @@ const message = {
        targetImage: 'Target image',
        targetImageHelper: 'Please enter the target image version',
        appHelper:
-            'This container is sourced from the application store. Upgrading it may cause the service to be unavailable. Do you want to continue?',
+            'This container is sourced from the application store. Upgrading it may cause the service to be unavailable.',

        forcePull: 'forced image pull ',
        forcePullHelper: 'Ignore existing images on the server and pull again.',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -78,7 +78,6 @@ const message = {
            interval: '耗時',
            user: '用戶',
            title: '標題',
-            network: '網絡',
            port: '端口',
            protocol: '協議',
            tableSetting: '列表設置',
@ -501,6 +500,7 @@ const message = {
        cleanLogHelper: '清空日誌需要重啟容器，該操作無法回滾，是否繼續？',
        newName: '新名稱',
        source: '資源使用率',
+        ip: 'IP 地址',
        cpuShare: 'CPU 權重',
        cpuShareHelper: '容器默認份額為 1024 個 CPU，增大可使當前容器獲得更多的 CPU 時間',

@ -515,7 +515,7 @@ const message = {
        oldImage: '當前鏡像',
        targetImage: '目標鏡像',
        targetImageHelper: '請輸入目標鏡像版本',
-        appHelper: '該容器來源於應用商店，升級可能導致該服務不可用，是否繼續？',
+        appHelper: '該容器來源於應用商店，升級可能導致該服務不可用',

        forcePull: '強製拉取鏡像',
        forcePullHelper: '忽略服務器已存在的鏡像，重新拉取一次',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -78,7 +78,6 @@ const message = {
            interval: '耗时',
            user: '用户',
            title: '标题',
-            network: '网络',
            port: '端口',
            protocol: '协议',
            tableSetting: '列表设置',
@ -501,6 +500,7 @@ const message = {
        cleanLogHelper: '清空日志需要重启容器，该操作无法回滚，是否继续？',
        newName: '新名称',
        source: '资源使用率',
+        ip: 'IP 地址',
        cpuShare: 'CPU 权重',
        cpuShareHelper: '容器默认份额为 1024 个 CPU，增大可使当前容器获得更多的 CPU 时间',

@ -515,7 +515,7 @@ const message = {
        oldImage: '当前镜像',
        targetImage: '目标镜像',
        targetImageHelper: '请输入目标镜像版本',
-        appHelper: '该容器来源于应用商店，升级可能导致该服务不可用，是否继续？',
+        appHelper: '该容器来源于应用商店，升级可能导致该服务不可用',

        forcePull: '强制拉取镜像',
        forcePullHelper: '忽略服务器已存在的镜像，重新拉取一次',
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@ -83,12 +83,12 @@
                        min-width="80"
                        prop="imageName"
                    />
-                    <el-table-column :label="$t('commons.table.status')" min-width="80" prop="state" sortable fix>
+                    <el-table-column :label="$t('commons.table.status')" min-width="70" prop="state" sortable fix>
                        <template #default="{ row }">
                            <Status :key="row.state" :status="row.state"></Status>
                        </template>
                    </el-table-column>
-                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="100" fix>
+                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="80" fix>
                        <template #default="{ row }">
                            <div v-if="row.hasLoad">
                                <div class="source-font">CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
@ -101,12 +101,7 @@
                            </div>
                        </template>
                    </el-table-column>
-                    <el-table-column
-                        :label="$t('commons.table.network')"
-                        :width="mobile ? 80 : 'auto'"
-                        min-width="70"
-                        fix
-                    >
+                    <el-table-column :label="$t('container.ip')" :width="mobile ? 80 : 'auto'" min-width="70" fix>
                        <template #default="{ row }">
                            <div v-if="row.network">
                                <div v-for="(item, index) in row.network" :key="index">{{ item }}</div>
@ -116,7 +111,7 @@
                    <el-table-column
                        :label="$t('commons.table.port')"
                        :width="mobile ? 260 : 'auto'"
-                        min-width="120"
+                        min-width="130"
                        prop="ports"
                        fix
                    >
@ -124,20 +119,22 @@
                            <div v-if="row.ports">
                                <div v-for="(item, index) in row.ports" :key="index">
                                    <div v-if="row.expand || (!row.expand && index < 3)">
-                                        <el-button
-                                            v-if="item.indexOf('->') !== -1"
-                                            @click="goDashboard(item)"
-                                            class="tagMargin"
-                                            icon="Position"
-                                            type="primary"
-                                            plain
-                                            size="small"
-                                        >
-                                            {{ item }}
-                                        </el-button>
-                                        <el-button v-else class="tagMargin" type="primary" plain size="small">
-                                            {{ item }}
-                                        </el-button>
+                                        <el-tooltip :hide-after="20" :content="item" placement="top">
+                                            <el-button
+                                                v-if="item.indexOf('->') !== -1"
+                                                @click="goDashboard(item)"
+                                                class="tagMargin"
+                                                icon="Position"
+                                                type="primary"
+                                                plain
+                                                size="small"
+                                            >
+                                                {{ item.length > 25 ? item.substring(0, 25) + '...' : item }}
+                                            </el-button>
+                                            <el-button v-else class="tagMargin" type="primary" plain size="small">
+                                                {{ item }}
+                                            </el-button>
+                                        </el-tooltip>
                                    </div>
                                </div>
                                <div v-if="!row.expand && row.ports.length > 3">
@ -161,8 +158,8 @@
                        fix
                    />
                    <fu-table-operations
-                        width="300px"
-                        :ellipsis="4"
+                        width="180px"
+                        :ellipsis="2"
                        :buttons="buttons"
                        :label="$t('commons.table.operate')"
                        fix
@ -453,12 +450,6 @@ const onOperate = async (operation: string, row: Container.ContainerInfo | null)
 };

 const buttons = [
-    {
-        label: i18n.global.t('commons.button.edit'),
-        click: (row: Container.ContainerInfo) => {
-            onEdit(row.containerID);
-        },
-    },
    {
        label: i18n.global.t('file.terminal'),
        disabled: (row: Container.ContainerInfo) => {
@ -474,6 +465,12 @@ const buttons = [
            dialogContainerLogRef.value!.acceptParams({ containerID: row.containerID, container: row.name });
        },
    },
+    {
+        label: i18n.global.t('commons.button.edit'),
+        click: (row: Container.ContainerInfo) => {
+            onEdit(row.containerID);
+        },
+    },
    {
        label: i18n.global.t('commons.button.upgrade'),
        click: (row: Container.ContainerInfo) => {
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@ -10,7 +10,7 @@
                </div>
            </el-card>
        </div>
-        <LayoutContent :title="(currentDB?.type === 'mysql' ? 'MySQL' : 'MariaDB') + $t('menu.database')">
+        <LayoutContent :title="(currentDB?.type === 'mysql' ? 'MySQL ' : 'MariaDB ') + $t('menu.database')">
            <template #app v-if="currentDB?.from === 'local'">
                <AppStatus
                    :app-key="appKey"
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@ -2,7 +2,7 @@
    <div v-loading="loading">
        <LayoutContent>
            <template #title>
-                <back-button name="MySQL" :header="'MySQL ' + $t('database.remoteDB')" />
+                <back-button name="MySQL" :header="$t('database.remoteDB')" />
            </template>
            <template #toolbar>
                <el-row>
--- a/frontend/src/views/host/firewall/ip/operate/index.vue
+++ b/frontend/src/views/host/firewall/ip/operate/index.vue
@ -4,7 +4,7 @@
            <DrawerHeader :header="title" :back="handleClose" />
        </template>
        <div v-loading="loading">
-            <el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
+            <el-form ref="formRef" label-position="top" @submit.prevent :model="dialogData.rowData" :rules="rules">
                <el-row type="flex" justify="center">
                    <el-col :span="22">
                        <el-form-item :label="$t('firewall.address')" prop="address">