This commit is contained in:
fbsanchez 2020-11-17 16:54:40 +01:00
parent 4e73d8045a
commit e3b26011a8
9 changed files with 83 additions and 44 deletions

View File

@ -551,11 +551,22 @@ final class NetworkLink extends Model
$unitIn = $interface['ifHCInOctets']->unit();
}
$labelStart = $interface_name;
$labelStart .= ' (out): '.$outOctets.' '.$unitOut;
if (empty($outOctets) === true) {
$outOctets = 0;
}
$labelEnd = $interface_name;
$labelEnd .= ' (in): '.$inOctets.' '.$unitIn;
if (empty($inOctets) === true) {
$inOctets = 0;
}
$outOctets = sprintf('%0.3f %s', $outOctets, $unitOut);
$inOctets = sprintf('%0.3f %s', $inOctets, $unitIn);
$labelStart = $interface_name;
$labelStart .= ' (in): '.$inOctets;
$labelStart .= '<br>'.$interface_name;
$labelStart .= ' (out): '.$outOctets;
}
}
}
@ -598,11 +609,22 @@ final class NetworkLink extends Model
$unitIn = $interface['ifHCInOctets']->unit();
}
$labelStart .= '<br>'.$interface_name;
$labelStart .= ' (out): '.$outOctets.' '.$unitOut;
if (empty($outOctets) === true) {
$outOctets = 0;
}
if (empty($inOctets) === true) {
$inOctets = 0;
}
$outOctets = sprintf('%0.3f %s', $outOctets, $unitOut);
$inOctets = sprintf('%0.3f %s', $inOctets, $unitIn);
$labelEnd = $interface_name;
$labelEnd .= ' (in): '.$inOctets;
$labelEnd .= '<br>'.$interface_name;
$labelEnd .= ' (in): '.$inOctets.' '.$unitIn;
$labelEnd .= ' (out): '.$outOctets;
}
}
}
@ -839,6 +861,10 @@ final class NetworkLink extends Model
if ($values['tabSelected'] === 'specific') {
// Width.
if ($values['borderWidth'] === null) {
$values['borderWidth'] = 5;
}
if ($values['borderWidth'] < 1) {
$values['borderWidth'] = 1;
}

View File

@ -673,7 +673,8 @@ class View extends \HTML
$interface_name
);
echo '<div class="margin-top-10 interface-status from w90p flex-row-vcenter">';
echo '<h3 class="center">'.__('NetworkLink from').'</h3>';
echo '<div class="margin-top-10 interface-status from w90p centered flex-row-vcenter">';
ui_print_module_status($data['status']->lastStatus());
echo '<span style="margin-left: 1em;">';
echo __('Interface %s status', $interface_name);
@ -721,7 +722,8 @@ class View extends \HTML
$interface_name
);
echo '<div class="interface-status from w90p flex-row-vcenter">';
echo '<h3 class="center">'.__('NetworkLink to').'</h3>';
echo '<div class="interface-status from w90p centered flex-row-vcenter">';
ui_print_module_status($data['status']->lastStatus());
echo '<span style="margin-left: 1em;">';
echo __('Interface %s status', $interface_name);

View File

@ -762,16 +762,6 @@ div.module-graph .gauge_d3_class {
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 {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1204,7 +1204,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
};
this.initMovementListener(this.elementRef);
if (this.props.type !== ItemType.LINE_ITEM) {
if (
this.props.type !== ItemType.LINE_ITEM &&
this.props.type !== ItemType.NETWORK_LINK
) {
this.initResizementListener(this.elementRef);
}
}

View File

@ -148,14 +148,9 @@ export default class NetworkLink extends Line {
return;
}
if (labelStart == "" && labelEnd == "") {
// No more actions are required.
return;
}
// Font size and text adjustments.
const fontsize = 10;
const adjustment = 50;
const adjustment = 25;
const lineX1 = startPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
const lineY1 = startPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
@ -168,7 +163,8 @@ export default class NetworkLink extends Line {
let y2 = endPosition.y - y + lineWidth / 2 + viewportOffsetY / 2;
// Calculate angle (rotation).
let g = (Math.atan((lineY2 - lineY1) / (lineX2 - lineX1)) * 180) / Math.PI;
let rad = Math.atan2(lineY2 - lineY1, lineX2 - lineX1);
let g = (rad * 180) / Math.PI;
// Calculate effective 'text' box sizes.
const fontheight = 25;
@ -235,6 +231,42 @@ export default class NetworkLink extends Line {
const label = labels.item(0);
if (label) label.remove();
}
const arrows = element.parentElement.getElementsByClassName(
"vc-item-nl-arrow"
);
while (arrows.length > 0) {
const arrow = arrows.item(0);
if (arrow) arrow.remove();
}
}
let arrowSize = lineWidth * 2;
let arrowPosX = lineX1 + (lineX2 - lineX1) / 2 - arrowSize;
let arrowPosY = lineY1 + (lineY2 - lineY1) / 2 - arrowSize;
let arrowStart: HTMLElement = document.createElement("div");
arrowStart.classList.add("vc-item-nl-arrow");
arrowStart.style.position = "absolute";
arrowStart.style.border = `${arrowSize}px solid transparent`;
arrowStart.style.borderBottom = `${arrowSize}px solid ${color}`;
arrowStart.style.left = `${arrowPosX}px`;
arrowStart.style.top = `${arrowPosY}px`;
arrowStart.style.transform = `rotate(${90 + g}deg)`;
let arrowEnd: HTMLElement = document.createElement("div");
arrowEnd.classList.add("vc-item-nl-arrow");
arrowEnd.style.position = "absolute";
arrowEnd.style.border = `${arrowSize}px solid transparent`;
arrowEnd.style.borderBottom = `${arrowSize}px solid ${color}`;
arrowEnd.style.left = `${arrowPosX}px`;
arrowEnd.style.top = `${arrowPosY}px`;
arrowEnd.style.transform = `rotate(${270 + g}deg)`;
if (element.parentElement !== null) {
element.parentElement.appendChild(arrowStart);
element.parentElement.appendChild(arrowEnd);
}
if (labelStart != "") {
@ -277,10 +309,6 @@ export default class NetworkLink extends Line {
if (element.parentElement !== null) {
element.parentElement.appendChild(htmlLabelEnd);
}
if (element.parentElement !== null) {
element.parentElement.appendChild(htmlLabelEnd);
}
}
}
}

View File

@ -571,13 +571,3 @@ div.module-graph .gauge_d3_class {
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;
}