baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update some data in zun detail

Browse Source 
1. Hide containers card if value is empty
2. Fix addrss showing
3. Fix networks,ports and security groups showing
4. Remove links and labels in detail

Change-Id: I4a04893a370b387d7a3e9ebcc5073f02d508aeaa
This commit is contained in:
xusongfu 2022-08-15 15:05:51 +08:00
parent 686bbe3ba9
commit bef7387e1c
4 changed files with 57 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/container-service/containers/Capsules/Detail/BaseDetail.jsx
View File

@ -13,10 +13,16 @@
import Base from 'containers/BaseDetail';
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col } from 'antd';
import { stringifyContent } from 'utils/content';
export class BaseDetail extends Base {
get leftCards() {
const cards = [this.baseInfoCard, this.containersCard];
const { containers = [] } = this.detailData;
const cards = [this.baseInfoCard];
if (containers.length) {
cards.push(this.containersCard);
}
return cards;
}
@ -54,18 +60,20 @@ export class BaseDetail extends Base {
render: (value) =>
value.map((it) => {
return (
<div key={it.uuid}>
<b>{t('Container Name')}</b> : {it.name}
<br />
<b>{t('Container ID')}</b>: {it.uuid}
</div>
<Row key={it.uuid}>
<Col style={{ marginRight: 8 }}>{t('ID/Name')}:</Col>
<Col>
<p>{it.name}</p>
<p>{it.uuid}</p>
</Col>
</Row>
);
}),
},
];
return {
title: t('Containers'),
title: t('Containers Info'),
options,
labelCol: 0,
contentCol: 24,
@ -79,34 +87,17 @@ export class BaseDetail extends Base {
dataIndex: 'cpu',
},
{
label: t('Memory'),
label: t('Memory (MiB)'),
dataIndex: 'memory',
},
{
label: t('Restart Policy'),
dataIndex: 'restart_policy',
},
{
label: t('Labels'),
dataIndex: 'labels',
render: (value) => value || ' - ',
},
{
label: t('Links'),
dataIndex: 'links',
render: (value) =>
value.map((it) => {
return (
<div key={it.href}>
{it.href} : {it.rel}
</div>
);
}),
},
{
label: t('Addresses'),
dataIndex: 'addresses',
render: (value) => (value.length != null ? value : '-'),
render: stringifyContent,
},
];

43
src/pages/container-service/containers/Containers/Detail/BaseDetail.jsx
View File

@ -16,6 +16,7 @@ import Base from 'containers/BaseDetail';
import React from 'react';
import { inject, observer } from 'mobx-react';
import { containerStatus } from 'resources/zun/container';
import { stringifyContent } from 'utils/content';
import { isEmpty } from 'lodash';
export class BaseDetail extends Base {
@ -32,17 +33,6 @@ export class BaseDetail extends Base {
return [this.specCard];
}
get stringifyContent() {
return (value) =>
isEmpty(value) ? (
'-'
) : (
<div>
<pre>{JSON.stringify(value, null, 4)}</pre>
</div>
);
}
get baseInfoCard() {
const options = [
{
@ -61,7 +51,7 @@ export class BaseDetail extends Base {
{
label: t('Command'),
dataIndex: 'command',
render: this.stringifyContent,
render: stringifyContent,
},
];
@ -84,18 +74,13 @@ export class BaseDetail extends Base {
{
label: t('Environment'),
dataIndex: 'environment',
render: this.stringifyContent,
render: stringifyContent,
},
{
label: t('Interactive'),
dataIndex: 'interactive',
valueRender: 'yesNo',
},
{
label: t('Labels'),
dataIndex: 'labels',
render: this.stringifyContent,
},
];
return {
@ -141,7 +126,7 @@ export class BaseDetail extends Base {
{
label: t('Restart Policy'),
dataIndex: 'restart_policy',
render: this.stringifyContent,
render: stringifyContent,
},
{
label: t('Auto Remove'),
@ -154,19 +139,21 @@ export class BaseDetail extends Base {
{
label: t('Addresses'),
dataIndex: 'addresses',
render: this.stringifyContent,
render: stringifyContent,
},
{
label: t('Networks'),
dataIndex: 'networks',
render: (value = []) => (
<>
{value.map((it) => {
{value.length
? value.map((it) => {
const link = this.getLinkRender('networkDetail', it, {
id: it,
});
return <div key={it}>{link}</div>;
})}
})
: '-'}
</>
),
},
@ -175,12 +162,14 @@ export class BaseDetail extends Base {
dataIndex: 'ports',
render: (value = []) => (
<>
{value.map((it) => {
{value.length
? value.map((it) => {
const link = this.getLinkRender('virtualAdapterDetail', it, {
id: it,
});
return <div key={it}>{link}</div>;
})}
})
: '-'}
</>
),
},
@ -189,12 +178,14 @@ export class BaseDetail extends Base {
dataIndex: 'security_groups',
render: (value = []) => (
<>
{value.map((it) => {
{value.length
? value.map((it) => {
const link = this.getLinkRender('securityGroupDetail', it, {
id: it,
});
return <div key={it}>{link}</div>;
})}
})
: '-'}
</>
),
},

25
src/pages/container-service/containers/Hosts/Detail/BaseDetail.jsx
View File

@ -21,11 +21,6 @@ export class BaseDetail extends Base {
return cards;
}
get rightCards() {
const cards = [this.miscellaneousCard];
return cards;
}
get containersInfoCard() {
const options = [
{
@ -65,26 +60,6 @@ export class BaseDetail extends Base {
options,
};
}
get miscellaneousCard() {
const options = [
{
label: t('Labels'),
dataIndex: 'labels',
render: (value = {}) => JSON.stringify(value),
},
{
label: t('Links'),
dataIndex: 'links',
render: (value = []) => JSON.stringify(value),
},
];
return {
title: t('Miscellaneous'),
options,
};
}
}
export default inject('rootStore')(observer(BaseDetail));

11
src/utils/content.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { isEmpty } from 'lodash';
export const stringifyContent = (value) =>
isEmpty(value) ? (
'-'
) : (
<div>
<pre>{JSON.stringify(value, null, 4)}</pre>
</div>
);