cphipps/NetAlertX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Space out network icons, fix invalid markup, and overall slight cleanup

Browse Source
This commit is contained in:
Scott Roach
2023-10-06 23:20:22 -07:00
parent 2476a36661
commit 4aad8c12f8
1 changed files with 30 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
front/network.php
View File

@@ -628,11 +628,8 @@
$("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${$('.content-header').width()}px`) $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${$('.content-header').width()}px`)
console.log('here')
myTree = Treeviz.create({ myTree = Treeviz.create({
htmlId: "networkTree", htmlId: "networkTree",
renderNode: nodeData => { renderNode: nodeData => {
var fontSize = "font-size:"+emSize+"em;"; var fontSize = "font-size:"+emSize+"em;";
@@ -641,31 +638,32 @@
(port == "" || port == 0 ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`; (port == "" || port == 0 ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
// Build HTML for individual nodes in the network diagram // Build HTML for individual nodes in the network diagram
deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ? "<div class='netIcon ' ><i class='fa fa-"+nodeData.data.icon +"'></i></div>" : ""; deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ? `<div class="netIcon"><i class="fa fa-${nodeData.data.icon}"></i></div>` : "";
devicePort = `<div class='netPort ' style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em" >${port}</div> <div class="portBckgIcon" style="margin-left:-${emSize*sizeCoefficient}em;">${portBckgIcon}</div>`; devicePort = `<div class="netPort" style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em">${port}</div> <div class="portBckgIcon" style="margin-left:-${emSize*sizeCoefficient}em;">${portBckgIcon}</div>`;
collapseExpandIcon = nodeData.data.hiddenChildren ? "square-plus" :"square-minus"; collapseExpandIcon = nodeData.data.hiddenChildren ? "square-plus" : "square-minus";
collapseExpandHtml = (nodeData.data.hasChildren) ? "<div class='netCollapse' style='font-size:"+emSize*sizeCoefficient+"em;' data-mytreepath='"+nodeData.data.path+"' data-mytreemac='"+nodeData.data.mac+"'><i class='fa fa-"+ collapseExpandIcon +" pointer'></i></div>" : ""; collapseExpandHtml = nodeData.data.hasChildren ? `<div class="netCollapse" style="font-size:${emSize*sizeCoefficient}em;" data-mytreepath='${nodeData.data.path}" data-mytreemac="${nodeData.data.mac}"><i class='fa fa-${collapseExpandIcon} pointer"></i></div>` : "";
statusCss = " netStatus-" + nodeData.data.status; statusCss = ` netStatus-${nodeData.data.status}`;
selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac') selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
highlightedCss = nodeData.data.mac == selectedNodeMac ? " highlightedNode" : ""; highlightedCss = nodeData.data.mac == selectedNodeMac ? " highlightedNode" : "";
return result = `<div class='box ${(nodeData.data.hasChildren)? "pointer":""} ${statusCss} ${highlightedCss}' return result = `<div class="box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
data-mytreemacmain='${nodeData.data.mac}' data-mytreemacmain="${nodeData.data.mac}"
style='height:${nodeData.settings.nodeHeight}px;${fontSize} style="height:${nodeData.settings.nodeHeight}px;${fontSize}"
> >
<div class='netNodeText '>\ <div class="netNodeText">
<strong>${devicePort} ${deviceIcon} <strong>${devicePort} ${deviceIcon}
<span class='spanNetworkTree anonymizeDev'>${nodeData.data.name}</span>\ <span class="spanNetworkTree anonymizeDev">${nodeData.data.name}</span>
</strong> </strong>
${collapseExpandHtml} ${collapseExpandHtml}
</div></div>`; </div>
}, </div>`;
},
onNodeClick: nodeData => { onNodeClick: nodeData => {
console.log(this) console.log(this)
}, },
mainAxisNodeSpacing: 'auto', mainAxisNodeSpacing: 'auto',
// mainAxisNodeSpacing: 3, // mainAxisNodeSpacing: 3,
secondaryAxisNodeSpacing: 0.3, secondaryAxisNodeSpacing: 0.3,
@@ -679,13 +677,11 @@
linkWidth: (nodeData) => 3, linkWidth: (nodeData) => 3,
linkColor: (nodeData) => "#ffcc80", linkColor: (nodeData) => "#ffcc80",
onNodeClick: (nodeData) => handleNodeClick(nodeData), onNodeClick: (nodeData) => handleNodeClick(nodeData),
relationnalField: "children", relationnalField: "children",
}); });
console.log(myHierarchy) console.log(myHierarchy)
myTree.refresh(myHierarchy); myTree.refresh(myHierarchy);
} }