tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

RC for networklink VC

This commit is contained in:
fbsanchez 2020-11-16 17:12:27 +01:00
parent 916537ea11
commit 34cb7ad771
8 changed files with 136 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
pandora_console/include/rest-api/models/VisualConsole/Items/NetworkLink.php
View File

@ -439,6 +439,7 @@ final class NetworkLink extends Model
'pos_y' => '<'.$startY,
'pos_x`+`width' => '>'.$startX,
'pos_y`+`height' => '>'.$startY,
'type' => '!'.NETWORK_LINK,
'order' => [
[
'field' => 'show_on_top',
@ -462,6 +463,7 @@ final class NetworkLink extends Model
'pos_y' => '<'.$endY,
'pos_x`+`width' => '>'.$endX,
'pos_y`+`height' => '>'.$endY,
'type' => '!'.NETWORK_LINK,
'order' => [
[
'field' => 'show_on_top',
@ -530,24 +532,30 @@ final class NetworkLink extends Model
$outOctets = 0;
$inOctets = 0;
$unitIn = '';
$unitOut = '';
if (isset($interface['ifOutOctets']) === true) {
$outOctets = $interface['ifOutOctets']->lastValue();
$unitOut = $interface['ifOutOctets']->unit();
} else if (isset($interface['ifHCOutOctets']) === true) {
$outOctets = $interface['ifHCOutOctets']->lastValue();
$unitOut = $interface['ifHCOutOctets']->unit();
}
if (isset($interface['ifInOctets']) === true) {
$inOctets = $interface['ifInOctets']->lastValue();
$unitIn = $interface['ifInOctets']->unit();
} else if (isset($interface['ifHCInOctets']) === true) {
$inOctets = $interface['ifHCInOctets']->lastValue();
$unitIn = $interface['ifHCInOctets']->unit();
}
$labelStart = $interface_name;
$labelStart .= ': '.$outOctets;
$labelStart .= ' (out): '.$outOctets.' '.$unitOut;
$labelEnd = $interface_name;
$labelEnd .= ': '.$inOctets;
$labelEnd .= ' (in): '.$inOctets.' '.$unitIn;
}
}
}
@ -571,24 +579,30 @@ final class NetworkLink extends Model
$outOctets = 0;
$inOctets = 0;
$unitIn = '';
$unitOut = '';
if (isset($interface['ifOutOctets']) === true) {
$outOctets = $interface['ifOutOctets']->lastValue();
$unitOut = $interface['ifOutOctets']->unit();
} else if (isset($interface['ifHCOutOctets']) === true) {
$outOctets = $interface['ifHCOutOctets']->lastValue();
$unitOut = $interface['ifHCOutOctets']->unit();
}
if (isset($interface['ifInOctets']) === true) {
$inOctets = $interface['ifInOctets']->lastValue();
$unitIn = $interface['ifInOctets']->unit();
} else if (isset($interface['ifHCInOctets']) === true) {
$inOctets = $interface['ifHCInOctets']->lastValue();
$unitIn = $interface['ifHCInOctets']->unit();
}
$labelStart .= '<br>'.$interface_name;
$labelStart .= ': '.$outOctets;
$labelStart .= ' (out): '.$outOctets.' '.$unitOut;
$labelEnd .= '<br>'.$interface_name;
$labelEnd .= ': '.$inOctets;
$labelEnd .= ' (in): '.$inOctets.' '.$unitIn;
}
}
}

18
pandora_console/include/visual-console-client/vc.main.css
View File

@ -754,6 +754,24 @@ div.module-graph .gauge_d3_class {
text-decoration: none;
}
.vc-item-nl-label {
border-radius: 5px;
background-color: #fff;
padding: 5px;
padding-left: 1em;
font-size: 14px;
}
.arrow-head {
border: 5px solid transparent;
border-top: 0;
border-right-color: transparent;
border-left-color: transparent;
display: block;
width: 0px;
height: 0px;
}
/* Styles for the solid icons */
.fa {

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

5
visual_console_client/src/VisualConsole.ts
View File

@ -303,7 +303,10 @@ export default class VisualConsole {
* @param item ItemProps instance.
*/
private coordinatesInItem(x: number, y: number, props: ItemProps) {
if (props.type == ItemType.LINE_ITEM) {
if (
props.type == ItemType.LINE_ITEM ||
props.type == ItemType.NETWORK_LINK
) {
return false;
}

130
visual_console_client/src/items/NetworkLink.ts
View File

@ -1,10 +1,5 @@
import { AnyObject, Position, ItemMeta } from "../lib/types";
import {
debounce,
addMovementListener,
notEmptyStringOr,
parseIntOr
} from "../lib";
import { debounce, notEmptyStringOr, parseIntOr } from "../lib";
import { ItemType } from "../Item";
import Line, { LineProps, linePropsDecoder } from "./Line";
@ -162,31 +157,45 @@ export default class NetworkLink extends Line {
const fontsize = 10;
const adjustment = 50;
const lineX1 = startPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
const lineY1 = startPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
const lineX2 = endPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
const lineY2 = endPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
let x1 = startPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
let y1 = startPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
let x2 = endPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
let y2 = endPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
// Calculate angle (rotation).
let g = (Math.atan((y2 - y1) / (x2 - x1)) * 180) / Math.PI;
if (Math.abs(g) > 0) {
g = 0;
}
let g = (Math.atan((lineY2 - lineY1) / (lineX2 - lineX1)) * 180) / Math.PI;
// Calculate effective 'text' box sizes.
const fontheight = 25;
if (labelStartWidth <= 0) {
labelStartWidth = labelStart.length * fontsize;
let lines = labelStart.split("<br>");
labelStartWidth = 0;
lines.forEach(l => {
if (l.length > labelStartWidth) {
labelStartWidth = l.length * fontsize;
}
});
if (labelStartHeight <= 0) {
labelStartHeight = lines.length * fontheight;
}
}
if (labelEndWidth <= 0) {
labelEndWidth = labelEnd.length * fontsize;
}
if (labelStartHeight <= 0) {
labelStartHeight = fontheight;
}
if (labelEndHeight <= 0) {
labelEndHeight = fontheight;
let lines = labelEnd.split("<br>");
labelEndWidth = 0;
lines.forEach(l => {
if (l.length > labelEndWidth) {
labelEndWidth = l.length * fontsize;
}
});
if (labelEndHeight <= 0) {
labelEndHeight = lines.length * fontheight;
}
}
if (x1 < x2) {
@ -217,50 +226,61 @@ export default class NetworkLink extends Line {
color = "#000";
}
// Clean.
if (element.parentElement !== null) {
const labels = element.parentElement.getElementsByClassName(
"vc-item-nl-label"
);
while (labels.length > 0) {
const label = labels.item(0);
if (label) label.remove();
}
}
if (labelStart != "") {
let start = document.createElementNS(svgNS, "g");
let sr = document.createElementNS(svgNS, "rect");
sr.setAttribute("x", `${x1}`);
sr.setAttribute("y", `${y1}`);
sr.setAttribute("width", `${labelStartWidth + fontsize * 2}`);
sr.setAttribute("height", `${labelStartHeight}`);
sr.setAttribute("stroke", `${color}`);
sr.setAttribute("stroke-width", "2");
sr.setAttribute("fill", "#FFF");
start.append(sr);
let htmlLabelStart: HTMLElement = document.createElement("div");
let st = document.createElementNS(svgNS, "text");
st.setAttribute("x", `${x1 + fontsize}`);
st.setAttribute("y", `${y1 + (fontheight * 2) / 3}`);
st.setAttribute("fill", "#000");
st.setAttribute("font-size", `${fontsize}`);
st.textContent = labelStart;
start.append(st);
try {
htmlLabelStart.innerHTML = labelStart;
htmlLabelStart.style.position = "absolute";
htmlLabelStart.style.left = `${x1}px`;
htmlLabelStart.style.top = `${y1}px`;
htmlLabelStart.style.width = `${labelStartWidth}px`;
htmlLabelStart.style.border = `2px solid ${color}`;
svg.append(start);
htmlLabelStart.classList.add("vc-item-nl-label", "label-start");
} catch (error) {
console.error(error);
}
if (element.parentElement !== null) {
element.parentElement.appendChild(htmlLabelStart);
}
}
if (labelEnd != "") {
let end = document.createElementNS(svgNS, "g");
let er = document.createElementNS(svgNS, "rect");
er.setAttribute("x", `${x2}`);
er.setAttribute("y", `${y2}`);
er.setAttribute("width", `${labelEndWidth + fontsize * 2}`);
er.setAttribute("height", `${labelEndHeight}`);
er.setAttribute("stroke", `${color}`);
er.setAttribute("stroke-width", "2");
er.setAttribute("fill", "#FFF");
end.append(er);
let htmlLabelEnd: HTMLElement = document.createElement("div");
let et = document.createElementNS(svgNS, "text");
et.setAttribute("x", `${x2 + fontsize}`);
et.setAttribute("y", `${y2 + (fontheight * 2) / 3}`);
et.setAttribute("fill", "#000");
et.setAttribute("font-size", `${fontsize}`);
et.textContent = labelEnd;
end.append(et);
try {
htmlLabelEnd.innerHTML = labelEnd;
htmlLabelEnd.style.position = "absolute";
htmlLabelEnd.style.left = `${x2}px`;
htmlLabelEnd.style.top = `${y2}px`;
htmlLabelEnd.style.width = `${labelEndWidth}px`;
htmlLabelEnd.style.border = `2px solid ${color}`;
svg.append(end);
htmlLabelEnd.classList.add("vc-item-nl-label", "label-end");
} catch (error) {
console.error(error);
}
if (element.parentElement !== null) {
element.parentElement.appendChild(htmlLabelEnd);
}
if (element.parentElement !== null) {
element.parentElement.appendChild(htmlLabelEnd);
}
}
}
}

18
visual_console_client/src/main.css
View File

@ -563,3 +563,21 @@ div.module-graph .gauge_d3_class {
.textDecorationNone:hover {
text-decoration: none;
}
.vc-item-nl-label {
border-radius: 5px;
background-color: #fff;
padding: 5px;
padding-left: 1em;
font-size: 14px;
}
.arrow-head {
border: 5px solid transparent;
border-top: 0;
border-right-color: transparent;
border-left-color: transparent;
display: block;
width: 0px;
height: 0px;
}