diff --git a/docs/NETWORK_TREE.md b/docs/NETWORK_TREE.md index e6914264..465b9a11 100755 --- a/docs/NETWORK_TREE.md +++ b/docs/NETWORK_TREE.md @@ -51,6 +51,8 @@ Let’s walk through setting up a device named `raspberrypi` to act as a network - Optionally assign a **Parent Node** (where this device connects to) and the **Relationship type** of the connection. The `nic` relationship type can affect parent notifications — see the setting description and [Notifications documentation](./NOTIFICATIONS.md) for more. +![Device details](./img/NETWORK_TREE/Network_Device_Details_Parent.png) + > [!NOTE] > Only certain device types can act as network nodes: > `AP`, `Firewall`, `Gateway`, `Hypervisor`, `PLC`, `Powerline`, `Router`, `Switch`, `USB LAN Adapter`, `USB WIFI Adapter`, `WLAN` @@ -60,7 +62,7 @@ Let’s walk through setting up a device named `raspberrypi` to act as a network --- -### 2. Confirm It Appears as a Network Node +### 2. Confirm The Device Appears as a Network Node You can confirm that `raspberrypi` now acts as a network device in two places: @@ -83,7 +85,7 @@ You can confirm that `raspberrypi` now acts as a network device in two places: ![Assigned nodes](./img/NETWORK_TREE/Network_Assigned_Nodes.png) -- Relationship lines may vary in color based on the selected Relationship type. These are editable on the device details page where you assign a parent node. +- Relationship lines may vary in color based on the selected Relationship type. These are editable on the device details page where you can also assign a parent node. ![Hover detail](./img/NETWORK_TREE/Network_tree_setup_hover.png) diff --git a/docs/img/NETWORK_TREE/Network_Device_Details.png b/docs/img/NETWORK_TREE/Network_Device_Details.png index a8173093..d009636f 100755 Binary files a/docs/img/NETWORK_TREE/Network_Device_Details.png and b/docs/img/NETWORK_TREE/Network_Device_Details.png differ diff --git a/docs/img/NETWORK_TREE/Network_Device_Details_Parent.png b/docs/img/NETWORK_TREE/Network_Device_Details_Parent.png new file mode 100755 index 00000000..a44725e6 Binary files /dev/null and b/docs/img/NETWORK_TREE/Network_Device_Details_Parent.png differ diff --git a/docs/img/NETWORK_TREE/Network_tree_setup_hover.png b/docs/img/NETWORK_TREE/Network_tree_setup_hover.png index 49334f4b..1a020a5d 100755 Binary files a/docs/img/NETWORK_TREE/Network_tree_setup_hover.png and b/docs/img/NETWORK_TREE/Network_tree_setup_hover.png differ diff --git a/front/css/app.css b/front/css/app.css index 61ceee5d..6fd5a099 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1671,7 +1671,7 @@ input[readonly] { /* AdminLTE overrides */ #networkTree .box { - /* border-top:1px; */ + border-width:1px; border-top-color:grey; padding:0px; margin:0px; @@ -1707,6 +1707,7 @@ input[readonly] { opacity: 0.3; display: initial; float: left; + width: 1em; } #networkTree @@ -1791,6 +1792,14 @@ input[readonly] { box-shadow: var(--color-gray) 0px 0px 10px; } +#networkTree .network-hw-icon +{ + position: absolute; + margin-left: -0.4em; + opacity: 0.3; + margin-top: 0.1em; +} + #networkTree .highlightedNode { /* border: solid; */ @@ -1821,6 +1830,11 @@ input[readonly] { /* margin-left: 0.2em; */ } +.networkTable +{ + padding-bottom: 1px; +} + .networkNodeTabHeaders .icon i { padding-top: 8px !important; diff --git a/front/network.php b/front/network.php index 17c9b46b..fd2ab907 100755 --- a/front/network.php +++ b/front/network.php @@ -668,7 +668,7 @@ function initTree(myHierarchy) (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `` : portBckgIcon = ``; - portHtml = (port == "" || port == 0 || port == 'None' ) ? "" : port; + portHtml = (port == "" || port == 0 || port == 'None' ) ? "   " : port; // Build HTML for individual nodes in the network diagram deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ? @@ -688,7 +688,7 @@ function initTree(myHierarchy) // generate +/- icon if node has children nodes collapseExpandHtml = nodeData.data.hasChildren ? `
@@ -701,6 +701,10 @@ function initTree(myHierarchy) cssNodeType = nodeData.data.devIsNetworkNodeDynamic ? " node-network-device " : " node-standard-device "; + networkHardwareIcon = nodeData.data.devIsNetworkNodeDynamic ? ` + + ` : ""; + const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '') return result = `
${devicePort} ${deviceIcon} ${nodeData.data.name} + ${networkHardwareIcon}
@@ -743,11 +748,9 @@ function initTree(myHierarchy) idKey: "mac", hasFlatData: false, relationnalField: "children", - linkWidth: (nodeData) => 3, + linkWidth: (nodeData) => 2, linkColor: (nodeData) => { - relConf = getRelationshipConf(nodeData.data.relType) - return relConf.color; } // onNodeClick: (nodeData) => handleNodeClick(nodeData), @@ -798,8 +801,6 @@ function initTab() } - - // --------------------------------------------------------------------------- function initSelectedNodeHighlighting() { diff --git a/front/pluginsCore.php b/front/pluginsCore.php index 5633d950..5a53eb63 100755 --- a/front/pluginsCore.php +++ b/front/pluginsCore.php @@ -4,12 +4,6 @@ require_once $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php'; ?> - - - - - -
- -