diff --git a/src/locales/zh.json b/src/locales/zh.json index c8f72544..2ed73845 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -1025,7 +1025,7 @@ "Gibraltar": "直布罗陀", "Given IP": "指定IP", "Glance": "", - "Glance Image": "本地镜像(Glance)", + "Glance Image": "本地镜像", "Global Setting": "平台配置", "GlusterFS": "", "Grant Databases Access": "设置数据库访问", diff --git a/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx b/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx index 8ecf7f00..36e943b9 100644 --- a/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx +++ b/src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx @@ -19,6 +19,7 @@ import { containerStatus, imageDrivers, exitPolicies, + containerTaskStatus, } from 'resources/zun/container'; import { stringifyContent } from 'utils/content'; import { isEmpty } from 'lodash'; @@ -67,6 +68,7 @@ export class BaseDetail extends Base { { label: t('Task State'), dataIndex: 'task_state', + valueMap: containerTaskStatus, }, ]; @@ -202,6 +204,19 @@ export class BaseDetail extends Base { dataIndex: 'addresses', render: stringifyContent, }, + { + label: t('IP Address'), + dataIndex: 'addrs', + render: (value = []) => ( + <> + {value.length + ? value.map((it) => { + return
{it.addr}
; + }) + : '-'} + + ), + }, { label: t('Networks'), dataIndex: 'networks', @@ -218,6 +233,23 @@ export class BaseDetail extends Base { ), }, + { + label: t('Subnets'), + dataIndex: 'subnets', + render: (value = []) => ( + <> + {value.length + ? value.map((it) => { + const link = this.getLinkRender('subnetDetail', it.subnet, { + networkId: it.network, + id: it.subnet, + }); + return
{link}
; + }) + : '-'} + + ), + }, { label: t('Ports'), dataIndex: 'ports', @@ -225,10 +257,7 @@ export class BaseDetail extends Base { <> {value.length ? value.map((it) => { - const link = this.getLinkRender('portDetail', it, { - id: it, - }); - return
{link}
; + return
{it}
; }) : '-'} diff --git a/src/pages/container-service/containers/Containers/Detail/index.jsx b/src/pages/container-service/containers/Containers/Detail/index.jsx index e43ada3f..2fe7b5ec 100644 --- a/src/pages/container-service/containers/Containers/Detail/index.jsx +++ b/src/pages/container-service/containers/Containers/Detail/index.jsx @@ -51,7 +51,7 @@ export class ContainerDetail extends Base { dataIndex: 'name', }, { - title: t('Status'), + title: t('Container Status'), dataIndex: 'status', valueMap: containerStatus, }, diff --git a/src/pages/container-service/containers/Containers/index.jsx b/src/pages/container-service/containers/Containers/index.jsx index 23badd3d..ae3b14ad 100644 --- a/src/pages/container-service/containers/Containers/index.jsx +++ b/src/pages/container-service/containers/Containers/index.jsx @@ -12,6 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. +import React from 'react'; import Base from 'containers/List'; import { inject, observer } from 'mobx-react'; import globalContainersStore from 'src/stores/zun/containers'; @@ -60,7 +61,52 @@ export class Containers extends Base { valueMap: imageDrivers, }, { - title: t('Status'), + title: t('IP Address'), + isHideable: true, + dataIndex: 'addrs', + render: (value = []) => ( + <> + {value.length + ? value.map((it) => { + return
{it.addr}
; + }) + : '-'} + + ), + }, + { + title: t('Ports'), + isHideable: true, + dataIndex: 'ports', + render: (value = []) => ( + <> + {value.length + ? value.map((it) => { + return
{it}
; + }) + : '-'} + + ), + }, + { + title: t('Networks'), + isHideable: true, + dataIndex: 'networks', + render: (value = []) => ( + <> + {value.length + ? value.map((it) => { + const link = this.getLinkRender('networkDetail', it, { + id: it, + }); + return
{link}
; + }) + : '-'} + + ), + }, + { + title: t('Container Status'), isHideable: true, dataIndex: 'status', valueMap: containerStatus, @@ -80,6 +126,11 @@ export class Containers extends Base { label: t('Name'), name: 'name', }, + { + label: t('Image Driver'), + name: 'image_driver', + options: getOptions(imageDrivers), + }, { label: t('Status'), name: 'status', diff --git a/src/stores/zun/containers.js b/src/stores/zun/containers.js index b75251cf..a6de3c7e 100644 --- a/src/stores/zun/containers.js +++ b/src/stores/zun/containers.js @@ -15,7 +15,6 @@ import Base from 'stores/base'; import client from 'client'; import { action } from 'mobx'; -import { isEmpty } from 'lodash'; export class ContainersStore extends Base { get client() { @@ -27,11 +26,27 @@ export class ContainersStore extends Base { } get mapper() { - return (data) => ({ - ...data, - id: data.uuid, - task_state: data.task_state === null ? 'free' : data.task_state, - }); + return (data) => { + const { addresses = {} } = data; + const networks = Object.keys(addresses); + const addrs = []; + const subnets = []; + Object.entries(addresses).forEach(([key, val]) => { + (val || []).forEach((v) => { + addrs.push({ network: key, addr: v.addr }); + subnets.push({ network: key, subnet: v.subnet_id }); + }); + }); + + return { + ...data, + id: data.uuid, + task_state: data.task_state === null ? 'free' : data.task_state, + networks, + addrs, + subnets, + }; + }; } @action @@ -90,26 +105,18 @@ export class ContainersStore extends Base { } async detailDidFetch(item) { - const { uuid, status, addresses = {}, image_driver, image } = item; + const { uuid, status, image_driver, image } = item; let stats = {}; if (status === 'Running') { stats = (await this.client.stats.list(uuid)) || {}; } - const networks = Object.keys(addresses); - let { ports = [] } = item; - if (isEmpty(ports)) { - ports = Object.values(addresses) - .reduce((ret, cur) => { - ret = ret.concat(cur); - return ret; - }, []) - .map((it) => it.port); - } if (image_driver === 'glance') { - const info = await this.imageClient.show(image); - item.imageInfo = info; + try { + const info = await this.imageClient.show(image); + item.imageInfo = info; + } catch (error) {} } - return { ...item, stats, networks, ports }; + return { ...item, stats }; } async fetchLogs(id) {