Skip to content
GitLab
Unverified Commit 7ab9db8b authored by jo-hnny's avatar jo-hnny Committed by GitHub
Browse files

fix(console): virtual node cpu&memory display wrong (#1211) 

* fix(console): virtual node cpu&memory display wrong

* fix(console): use [ , ] let number readable
parent e015eaef
master dev-api-1.19.7 fix-dev github_env_test industry-cloud-1.9 release-1.7 release-1.8 release-1.9 revert-1247-add-registered-cluster revert-1394-feat/enable-container-runtime revert-1751-ingress-version support-cilium test v1.9.0 v1.8.1 v1.8.0 v1.7.1 v1.7.0
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 84 additions and 72 deletions
+84 -72
web/console/helpers/format.ts 0 → 100644
+ 23
- 0
View file @ 7ab9db8b
// 所有单位都换算成byte
const memoryMap1000 = ['K', 'M', 'G', 'T', 'P', 'E'].reduce(
(all, key, index) => Object.assign(all, { [key]: Math.pow(1000, index + 1) }),
{}
);
const memoryMap1024 = ['KI', 'MI', 'GI', 'TI', 'PI', 'EI'].reduce(
(all, key, index) => Object.assign(all, { [key]: Math.pow(1024, index + 1) }),
{}
);
const memoryMap = Object.assign(memoryMap1000, memoryMap1024);
export const formatMemory = (
memory: string,
finalUnit: 'K' | 'M' | 'G' | 'T' | 'P' | 'E' | 'Ki' | 'Mi' | 'Gi' | 'Ti' | 'Pi' | 'Ei'
) => {
const unit = memory.toUpperCase().match(/[KMGTPEI]+/)[0] ?? 'MI';
const memoryNum = parseInt(memory);
return `${((memoryNum * memoryMap[unit]) / memoryMap[finalUnit.toUpperCase()]).toLocaleString()} ${finalUnit}`;
};
web/console/helpers/index.ts
+ 1
- 0
View file @ 7ab9db8b
......@@ -20,3 +20,4 @@ export * from './appUtil';
export { getCookie } from './cookieUtil';
export { reduceK8sQueryString, reduceK8sRestfulPath, reduceNs, parseQueryString, cutNsStartClusterId } from './urlUtil';
export * from './request';
export * from './format';
web/console/src/modules/cluster/components/resource/nodeManage/ComputerActionPanel.tsx
+ 43
- 43
View file @ 7ab9db8b
......@@ -22,25 +22,25 @@ interface State {
showOsTips?: boolean;
selectCluster?: any;
}
const mapDispatchToProps = (dispatch) =>
const mapDispatchToProps = dispatch =>
Object.assign({}, bindActionCreators({ actions: allActions }, dispatch), { dispatch });
@connect((state) => state, mapDispatchToProps)
@connect(state => state, mapDispatchToProps)
export class ComputerActionPanel extends React.Component<RootProps, State> {
state = {
monitorPanelProps: null,
showOsTips: false,
selectCluster: null,
selectCluster: null
};
componentDidMount() {
let { actions, route } = this.props;
let { rid, clusterId } = route.queries;
const { actions, route } = this.props;
const { rid, clusterId } = route.queries;
actions.computer.poll({ clusterId, regionId: +rid });
actions.computer.pollMachine({ clusterId, regionId: +rid });
}
componentWillUnmount() {
let { actions } = this.props;
const { actions } = this.props;
actions.computer.performSearch('');
actions.computer.clearPolling();
actions.computer.machine.clearPolling();
......@@ -48,18 +48,18 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
}
downloadHandle(computers: Computer[]) {
let rows = [],
const rows = [],
head = ['ID', t('状态'), t('角色'), t('配置'), t('ip地址'), t('PodCIDR'), t('创建时间')];
computers.forEach((item: Computer) => {
let row = [
const row = [
item.metadata.name,
item.status.phase,
item.metadata.role,
this._reduceCapacity(item),
`cpu: ${item.status.capacity.cpu ?? '-'} 核; 内存: ${item.status.capacity.memory ?? '-'}`,
this._reduceIp(item),
item.spec.podCIDR,
dateFormatter(new Date(item.metadata.creationTimestamp), 'YYYY-MM-DD HH:mm:ss'),
dateFormatter(new Date(item.metadata.creationTimestamp), 'YYYY-MM-DD HH:mm:ss')
];
rows.push(row);
});
......@@ -68,26 +68,26 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
}
_reduceCapacity(node: Computer) {
let capacity = node.status.capacity;
let capacityInfo = {
const capacity = node.status.capacity;
const capacityInfo = {
cpu: capacity.cpu,
memory: capacity.memory,
memory: capacity.memory
};
let finalCpu = ReduceRequest('cpu', capacityInfo),
const finalCpu = ReduceRequest('cpu', capacityInfo),
finalmem = (ReduceRequest('memory', capacity) / 1024).toFixed(2);
return finalCpu + '核,' + finalmem + 'GB';
}
_reduceIp(node: Computer) {
let finalIPInfo = node.status.addresses.filter((item) => item.type !== 'Hostname');
let ips = finalIPInfo.map((item, index) => item.address);
const finalIPInfo = node.status.addresses.filter(item => item.type !== 'Hostname');
const ips = finalIPInfo.map((item, index) => item.address);
return ips.join('、');
}
/** 处理 封锁 和 取消封锁的按钮的信息提示 */
handleNodeErrTips(nodeArr) {
if (nodeArr.length <= 3) {
return nodeArr.map((item) => item.instanceId).join('、');
return nodeArr.map(item => item.instanceId).join('、');
} else {
return (
'' +
......@@ -191,9 +191,9 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
}
/** 处理监控的相关操作 */
private _handleMonitor(monitorType?: string, nodeName?: string) {
let { computerState } = this.props.subRoot;
const { computerState } = this.props.subRoot;
let monitorPanelProps =
const monitorPanelProps =
monitorType === 'nodeMonitor'
? {
tables: [
......@@ -201,26 +201,26 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
table: 'k8s_node',
conditions: [
['tke_cluster_instance_id', '=', this.props.route.queries.clusterId],
['node_role', '=', 'Node'],
['node_role', '=', 'Node']
],
fields: nodeMonitorFields,
},
fields: nodeMonitorFields
}
],
groupBy: [{ value: 'node' }],
instance: {
columns: [
{
key: 'node',
name: t('节点名'),
},
name: t('节点名')
}
],
list: computerState.computer.list.data.records.map((d) => ({
list: computerState.computer.list.data.records.map(d => ({
node: d.metadata.name,
isChecked:
!computerState.computer.selections.length ||
computerState.computer.selections.find((ins) => ins.metadata.name === d.metadata.name),
})),
},
computerState.computer.selections.find(ins => ins.metadata.name === d.metadata.name)
}))
}
}
: {
tables: [
......@@ -234,22 +234,22 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
nodeName ||
(computerState.computer.list.data.records[0]
? computerState.computer.list.data.records[0].metadata.name
: ''),
],
: '')
]
],
fields: podMonitorFields,
},
fields: podMonitorFields
}
],
groupBy: [{ value: 'pod_name' }],
instance: {
columns: [
{
key: 'pod_name',
name: t('Pod名称'),
},
name: t('Pod名称')
}
],
list: [],
},
list: []
}
};
this.setState({
......@@ -267,11 +267,11 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
<div className="tc-15-rich-radio" role="radiogroup">
{[
{ label: t('节点'), key: 'nodeMonitor' },
{ label: 'Pod', key: 'podMonitor' },
].map((item) => (
{ label: 'Pod', key: 'podMonitor' }
].map(item => (
<button
key={item.key}
onClick={(e) => this._handleMonitor(item.key)}
onClick={e => this._handleMonitor(item.key)}
className={'tc-15-btn m ' + (monitorType === item.key ? 'checked' : '')}
role="radio"
>
......@@ -291,11 +291,11 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
<div className="form-unit">
<select
className="tc-15-select m"
onChange={(e) => {
onChange={e => {
this._handleMonitor(monitorType, e.target.value);
}}
>
{computerState.computer.list.data.records.map((item) => (
{computerState.computer.list.data.records.map(item => (
<option key={item.metadata.name} value={item.metadata.name}>{`${item.metadata.name}`}</option>
))}
</select>
......@@ -304,8 +304,8 @@ export class ComputerActionPanel extends React.Component<RootProps, State> {
</li>
)}
</ul>
),
},
)
}
});
}
}
web/console/src/modules/cluster/components/resource/nodeManage/ComputerTablePanel.tsx
+ 5
- 13
View file @ 7ab9db8b
......@@ -17,6 +17,7 @@ import { Computer, DialogNameEnum } from '../../../models';
import { router } from '../../../router';
import { RootProps } from '../../ClusterApp';
import { ReduceRequest } from '../resourceDetail/ResourcePodPanel';
import { formatMemory } from '@helper';
export const ComputerStatus = {
Running: 'success',
......@@ -275,22 +276,13 @@ export class ComputerTablePanel extends React.Component<RootProps, State> {
header: t('配置'),
width: '12%',
render: x => {
const capacity = x.status.capacity;
const capacityInfo = {
cpu: capacity ? capacity.cpu : '0',
memory: capacity ? capacity.memory : '0'
};
const finalCpu = ReduceRequest('cpu', capacityInfo),
finalmem = (ReduceRequest('memory', capacity) / 1024).toFixed(2);
const capacity = x?.status?.capacity;
return (
<React.Fragment>
<Text verticalAlign="middle">
{t('{{count}} 核, ', {
count: finalCpu
})}
</Text>
<Text verticalAlign="middle">{`${finalmem} GB`}</Text>
<Text verticalAlign="middle">cpu: {capacity.cpu ?? '-'} 核</Text>
<br />
<Text verticalAlign="middle">内存: {formatMemory(capacity.memory ?? '0', 'Gi')}</Text>
</React.Fragment>
);
}
......
web/console/src/modules/cluster/components/resource/resourceDetail/ResourceNodeDetailPanel.tsx
+ 12
- 16
View file @ 7ab9db8b
......@@ -5,7 +5,7 @@ import { Bubble, Text } from '@tea/component';
import { bindActionCreators } from '@tencent/ff-redux';
import { t, Trans } from '@tencent/tea-app/lib/i18n';
import { dateFormatter } from '../../../../../../helpers';
import { dateFormatter, formatMemory } from '../../../../../../helpers';
import { Clip, ListItem } from '../../../../common/components';
import { DetailLayout } from '../../../../common/layouts';
import { allActions } from '../../../actions';
......@@ -26,15 +26,15 @@ const mapDispatchToProps = dispatch =>
@connect(state => state, mapDispatchToProps)
export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
render() {
let { subRoot, route } = this.props,
const { subRoot, route } = this.props,
{ resourceDetailState } = subRoot,
{ resourceDetailInfo } = resourceDetailState;
// 当前选中的node节点
let resourceIns = resourceDetailInfo.selection;
const resourceIns = resourceDetailInfo.selection;
// 当前的地域
let regionId = route.queries['rid'];
const regionId = route.queries['rid'];
// 获取当前机器的配置
......@@ -114,9 +114,9 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
/** 处理节点的状态展示 */
private _renderNodeStatus(conditions: any[]) {
let nodeCondition = conditions.find(item => item.type === 'Ready');
const nodeCondition = conditions.find(item => item.type === 'Ready');
let isNodeReady = nodeCondition.status === 'True' ? true : false;
const isNodeReady = nodeCondition.status === 'True' ? true : false;
return (
<ListItem label={t('状态')}>
......@@ -168,7 +168,7 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
* @param label: string ListItem展示的数据
*/
private _renderKvData(showData: any, label: string) {
let keys = Object.keys(showData);
const keys = Object.keys(showData);
return (
<ListItem label={label}>
......@@ -208,7 +208,7 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
* @param allocatable:{} 需要处理的具体数据
*/
private _renderAllocatableResource(allocatable: { cpu: string; memory: string }) {
let finalCpu = ReduceRequest('cpu', allocatable),
const finalCpu = ReduceRequest('cpu', allocatable),
finalMem = (ReduceRequest('memory', allocatable) / 1024).toFixed(2);
return (
......@@ -231,26 +231,22 @@ export class ResourceNodeDetailPanel extends React.Component<RootProps, {}> {
/** 展示机器的配置 */
private _renderComputerConfig(capacityConfig: any) {
let capacity = {
const capacity = {
cpu: capacityConfig.cpu,
memory: capacityConfig.memory
};
let finalCpu = ReduceRequest('cpu', capacity),
const finalCpu = ReduceRequest('cpu', capacity),
finalMem = (ReduceRequest('memory', capacity) / 1024).toFixed(2);
return (
<ListItem label={t('配置')}>
<Text verticalAlign="middle" theme="label">{`CPU: `}</Text>
<Text verticalAlign="middle">
{t('{{count}} 核，', {
count: finalCpu
})}
</Text>
<Text verticalAlign="middle">{capacityConfig.cpu ?? '-'} 核</Text>
<Text verticalAlign="middle" theme="label">
{t('内存: ')}
</Text>
<Text verticalAlign="middle">{`${finalMem} GB，`}</Text>
<Text verticalAlign="middle">{formatMemory(capacity.memory ?? '0', 'Gi')}</Text>
<Text verticalAlign="middle" theme="label">{`Pods: `}</Text>
<Text verticalAlign="middle">{capacityConfig.pods || 0}</Text>
</ListItem>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

免费DevSecOps平台，让您的项目体验完整的DevSecOps流程，让项目更安全