fix: Fix the issue of excessively long container detail ports (#10924)

This commit is contained in:
ssongliu 2025-11-11 22:52:57 +08:00 committed by GitHub
parent cf4274afdc
commit 944463e9a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 26 deletions

View file

@ -98,7 +98,7 @@
show-overflow-tooltip
>
<template #default="{ row }">
<el-text type="primary" class="cursor-pointer" @click="onInspect(row.containerID)">
<el-text type="primary" class="cursor-pointer" @click="onInspect(row)">
{{ row.name }}
</el-text>
</template>
@ -571,9 +571,9 @@ const onTerminal = (row: any) => {
dialogTerminalRef.value!.acceptParams({ containerID: row.containerID, title: title });
};
const onInspect = async (id: string) => {
const res = await inspect({ id: id, type: 'container' });
containerInspectRef.value!.acceptParams({ data: res.data });
const onInspect = async (row: any) => {
const res = await inspect({ id: row.containerID, type: 'container' });
containerInspectRef.value!.acceptParams({ data: res.data, ports: row.ports });
};
const onClean = () => {

View file

@ -87,10 +87,8 @@
{{ inspectData?.Config?.Domainname || '-' }}
</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.port')">
<div v-for="item of getPortBindings()" :key="item">
<span>{{ item.hostIp }}:{{ item.hostPort }}</span>
<span class="mx-2"></span>
<span>{{ item.containerPort }}</span>
<div v-for="item of ports" :key="item">
<span>{{ item }}</span>
</div>
</el-descriptions-item>
</el-descriptions>
@ -175,14 +173,17 @@ const inspectData = ref<any>(null);
const rawJson = ref('');
const showRawJson = ref(false);
const ports = ref([]);
interface DialogProps {
data: any;
ports: string[];
}
const acceptParams = (props: DialogProps): void => {
visible.value = true;
activeTab.value = 'overview';
showRawJson.value = false;
ports.value = props.ports || [];
try {
if (typeof props.data === 'string') {
@ -231,24 +232,6 @@ const formatDate = (dateStr: string): string => {
}
};
const getPortBindings = (): any[] => {
const ports: any[] = [];
const portBindings = inspectData.value?.HostConfig?.PortBindings || {};
for (const [containerPort, bindings] of Object.entries(portBindings)) {
if (Array.isArray(bindings)) {
for (const binding of bindings) {
ports.push({
containerPort,
hostIp: (binding as any).HostIp || '0.0.0.0',
hostPort: (binding as any).HostPort,
});
}
}
}
return ports;
};
const getEnvKey = (env: string): string => {
const index = env.indexOf('=');
return index > 0 ? env.substring(0, index) : env;