|
@@ -22,14 +22,16 @@ function initCytoscape() {
|
|
|
'background-color': function(ele) {
|
|
'background-color': function(ele) {
|
|
|
return getNodeColor(ele.data('type'));
|
|
return getNodeColor(ele.data('type'));
|
|
|
},
|
|
},
|
|
|
- 'width': 60,
|
|
|
|
|
- 'height': 60,
|
|
|
|
|
|
|
+ 'width': 70,
|
|
|
|
|
+ 'height': 70,
|
|
|
'border-width': 3,
|
|
'border-width': 3,
|
|
|
'border-color': '#667eea',
|
|
'border-color': '#667eea',
|
|
|
'text-valign': 'bottom',
|
|
'text-valign': 'bottom',
|
|
|
'text-halign': 'center',
|
|
'text-halign': 'center',
|
|
|
- 'font-size': '12px',
|
|
|
|
|
- 'font-weight': 'bold'
|
|
|
|
|
|
|
+ 'font-size': '11px',
|
|
|
|
|
+ 'font-weight': 'bold',
|
|
|
|
|
+ 'text-wrap': 'wrap',
|
|
|
|
|
+ 'text-max-width': '80px'
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
@@ -201,13 +203,20 @@ async function loadTopology() {
|
|
|
|
|
|
|
|
// 添加节点
|
|
// 添加节点
|
|
|
graph.nodes.forEach(node => {
|
|
graph.nodes.forEach(node => {
|
|
|
|
|
+ // 显示格式: 主机名 + IP地址
|
|
|
|
|
+ let label = node.ip; // 默认显示IP
|
|
|
|
|
+ if (node.hostname && node.hostname !== '') {
|
|
|
|
|
+ label = `${node.hostname}\n${node.ip}`;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
cy.add({
|
|
cy.add({
|
|
|
group: 'nodes',
|
|
group: 'nodes',
|
|
|
data: {
|
|
data: {
|
|
|
id: node.id,
|
|
id: node.id,
|
|
|
- label: node.hostname || node.ip,
|
|
|
|
|
|
|
+ label: label,
|
|
|
type: node.type,
|
|
type: node.type,
|
|
|
- ip: node.ip
|
|
|
|
|
|
|
+ ip: node.ip,
|
|
|
|
|
+ hostname: node.hostname
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|