Fix: docker ports parse

frontend/src/tools/common.ts

@@ -101,29 +101,49 @@ function leftZero4(str: string) {
   return str || "";
 }
 
-export const dockerPortsParse = (list: string[]) => {
-  let line = [];
-  list.forEach((v, index) => {
-    if (index >= 50) return;
-    const tmp = v.split("/");
-    if (tmp.length != 2) return;
-    const protocol = tmp[1];
-    const p = tmp[0].split(":");
-    if (p.length >= 2) {
-      line.push({
-        p1: p[0],
-        p2: p[1],
-        protocol: String(protocol).toUpperCase()
-      });
+export const dockerPortsParse = (ports: string[]) => {
+  let p1 = [];
+  let p2 = [];
+
+  for (let i = 0; i < ports.length; i++) {
+    if (
+      (isInt(ports[0]) && ports.length === 3 && i < 1) ||
+      (!isInt(ports[0]) && ports.length === 3 && i < 2) ||
+      (ports.length === 4 && i < 2)
+    ) {
+      p1.push(ports[i]);
+    } else {
+      p2.push(ports[i]);
     }
-  });
-  if (list.length >= 50) {
-    line.push({
-      p1: null,
-      p2: null,
-      protocol: null,
-      more: true
-    });
   }
-  return line;
+
+  return { port1: p1.join(":"), port2: p2.join(":") };
+};
+
+export const dockerPortsArray = (ports: string[]) => {
+  const portArray = ports.map((iterator) => {
+    const pad = iterator.split("/");
+    const ports = pad[0];
+    const protocol = pad[1];
+    const { port1, port2 } = dockerPortsParse(ports.split(":"));
+    return {
+      host: port1,
+      container: port2,
+      protocol
+    };
+  });
+  return portArray;
+};
+
+export const isInt = (x: any) => {
+  if (x === null || x === "") {
+    return false;
+  }
+  for (let i = 0; i < x.length; i++) {
+    const char = x[i];
+    if (char < "0" || char > "9") {
+      return false;
+    }
+  }
+  return true;
 };

frontend/src/widgets/instance/BaseInfo.vue

@@ -8,7 +8,7 @@ import { useInstanceInfo } from "@/hooks/useInstance";
 import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
 import { parseTimestamp } from "../../tools/time";
-import { dockerPortsParse } from "@/tools/common";
+import { dockerPortsArray } from "@/tools/common";
 import DockerInfo from "./dialogs/DockerInfo.vue";
 
 const props = defineProps<{
@@ -85,18 +85,15 @@ onMounted(async () => {
         {{ t("可用端口：") }}
         <div style="padding: 10px 0px 0px 16px">
           <div
-            v-for="(item, index) in dockerPortsParse(instanceInfo?.config.docker.ports ?? [])"
+            v-for="(item, index) in dockerPortsArray(instanceInfo?.config.docker.ports ?? [])"
             :key="index"
             style="margin-bottom: 2px"
           >
-            <template v-if="!item.more">
-              <span>{{ t("主机") }}: {{ item.p1 }}</span>
-              <span style="margin-left: 6px">{{ t("容器") }}: {{ item.p2 }}</span>
-              <span style="margin-left: 8px">
-                <a-tag color="green">{{ item.protocol }}</a-tag>
-              </span>
-            </template>
-            <template v-else>...</template>
+            <span>{{ t("主机") }}: {{ item.host }}</span>
+            <span style="margin-left: 6px">{{ t("容器") }}: {{ item.container }}</span>
+            <span style="margin-left: 8px">
+              <a-tag color="green">{{ item.protocol }}</a-tag>
+            </span>
           </div>
         </div>
       </a-typography-paragraph>

frontend/src/widgets/instance/dialogs/DockerInfo.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { t } from "@/lang/i18n";
 import type { IGlobalInstanceDockerConfig } from "../../../../../common/global";
-import { dockerPortsParse } from "@/tools/common";
+import { dockerPortsArray } from "@/tools/common";
 const props = defineProps<{
   dockerInfo?: IGlobalInstanceDockerConfig;
 }>();
@@ -35,18 +35,15 @@ defineExpose({
       <a-descriptions-item v-if="props.dockerInfo?.ports" :label="t('可用端口')">
         <div>
           <div
-            v-for="(item, index) in dockerPortsParse(props.dockerInfo.ports)"
+            v-for="(item, index) in dockerPortsArray(props?.dockerInfo.ports ?? [])"
             :key="index"
             style="margin-bottom: 2px"
           >
-            <template v-if="!item.more">
-              <span>{{ t("主机") }}: {{ item.p1 }}</span>
-              <span style="margin-left: 6px">{{ t("容器") }}: {{ item.p2 }}</span>
-              <span style="margin-left: 8px">
-                <a-tag color="green">{{ item.protocol }}</a-tag>
-              </span>
-            </template>
-            <template v-else>...</template>
+            <span>{{ t("主机") }}: {{ item.host }}</span>
+            <span style="margin-left: 6px">{{ t("容器") }}: {{ item.container }}</span>
+            <span style="margin-left: 8px">
+              <a-tag color="green">{{ item.protocol }}</a-tag>
+            </span>
           </div>
         </div>
       </a-descriptions-item>

frontend/src/widgets/instance/dialogs/InstanceDetails.vue

@@ -17,6 +17,7 @@ import _ from "lodash";
 import { GLOBAL_INSTANCE_NAME } from "../../../config/const";
 import { dayjsToTimestamp, timestampToDayjs } from "../../../tools/time";
 import { useCmdAssistantDialog, usePortEditDialog, useVolumeEditDialog } from "@/components/fc";
+import { dockerPortsArray } from "@/tools/common";
 
 interface FormDetail extends InstanceDetail {
   dayjsEndTime?: Dayjs;
@@ -164,22 +165,10 @@ const openCmdAssistDialog = async () => {
   const cmd = await useCmdAssistantDialog();
   if (options.value && cmd) options.value.config.startCommand = cmd;
 };
-
 const handleEditDockerConfig = async (type: "port" | "volume") => {
   if (type === "port" && options.value?.config) {
     // "25565:25565/tcp 8080:8080/tcp" -> Array
-    const portArray = (options.value?.config.docker.ports || []).map((iterator) => {
-      const pad = iterator.split("/");
-      const ports = pad[0];
-      const protocol = pad[1];
-      const port1 = ports.split(":")[0];
-      const port2 = ports.split(":")[1];
-      return {
-        host: port1,
-        container: port2,
-        protocol
-      };
-    });
+    const portArray = dockerPortsArray(options.value?.config.docker.ports || []);
     const result = await usePortEditDialog(portArray);
     const portsArray = result.map((v) => `${v.host}:${v.container}/${v.protocol}`);
     options.value.config.docker.ports = portsArray;