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

fix cv in mobile pandora_enterprise#12196

This commit is contained in:
daniel 2023-10-06 12:59:33 +02:00
parent e1d8f862ae
commit 588f19fa18
32 changed files with 253 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pandora_console/include/ajax/visual_console.ajax.php
View File

@ -96,9 +96,6 @@ if ($force_remote_check) {
if ($load_css_cv === true) {
$uniq = get_parameter('uniq', 0);
$ratio = get_parameter('ratio', 0);
$output = css_label_styles_visual_console($uniq, $ratio);
echo $output;
return;
}

1
pandora_console/include/functions_config.php
View File

@ -1497,7 +1497,6 @@ function config_update_config()
$interval_values = implode(',', $interval_values_array);
}
hd($interval_values, true);
if (config_update_value('interval_values', $interval_values, true) === false) {
$error_update[] = __('Delete interval');
}

52
pandora_console/include/functions_visual_map.php
View File

@ -4548,54 +4548,4 @@ function visual_map_load_client_resources()
closedir($dh);
}
}
}
/**
* Labels styles visual console.
*
* @param string $uniq Uniq str.
* @param integer $ratio Ratio.
*
* @return string Css output.
*/
function css_label_styles_visual_console($uniq, $ratio=1)
{
global $config;
$output = '';
// Horrible trick! due to the use of tinyMCE
// it is necessary to modify specific classes of each
// of the visual consoles.
$output .= '.c-'.$uniq.' a {color: #3f3f3f } ';
$output .= '.c-'.$uniq.' .label p strong span {display: inline-block !important; line-height: normal !important} ';
$output .= '.c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio).'pt; line-height:'.(8 * ($ratio)).'pt; }';
$output .= '.c-'.$uniq.' .visual-console-item-label table tr td { padding: 0; margin: 0; white-space: pre-wrap; }';
$output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio).'pt !important; line-height:'.(4 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio).'pt !important; line-height:'.(6 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio).'pt !important; line-height:'.(8 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio).'pt !important; line-height:'.(10 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio).'pt !important; line-height:'.(12 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio).'pt !important; line-height:'.(14 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio).'pt !important; line-height:'.(18 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio).'pt !important; line-height:'.(24 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio).'pt !important; line-height:'.(28 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio).'pt !important; line-height:'.(36 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio).'pt !important; line-height:'.(48 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio).'pt !important; line-height:'.(60 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio).'pt !important; line-height:'.(72 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio).'pt !important; line-height:'.(84 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio).'pt !important; line-height:'.(96 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio).'pt !important; line-height:'.(116 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio).'pt !important; line-height:'.(128 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio).'pt !important; line-height:'.(140 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio).'pt !important; line-height:'.(154 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio).'pt !important; line-height:'.(196 * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(($config['font_size'] - 2) * $ratio).'pt !important; line-height:'.(($config['font_size'] - 2) * ($ratio)).'pt !important; }';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio).'px !important; line-height: '.(50 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio).'px !important; line-height: '.(8 * $ratio).'px !important;}';
$output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio).' !important; height: '.(15 * $ratio).' !important;}';
return $output;
}
}

75
pandora_console/include/javascript/pandora_dashboards.js
View File

@ -1294,8 +1294,6 @@ function refresh_pagination_callback(
// eslint-disable-next-line no-unused-vars
function dashboardLoadVC(settings) {
var headerMobileFix = 40;
var container = document.getElementById(
"visual-console-container-" + settings.cellId
);
@ -1307,36 +1305,36 @@ function dashboardLoadVC(settings) {
var beforeUpdate = function(items, visualConsole, props, size) {
var ratio_visualconsole = props.height / props.width;
var ratio_w = size.width / props.width;
var ratio_h = size.height / props.height;
var acum_height = props.height;
var acum_width = props.width;
props.width = size.width;
props.height = size.width * ratio_visualconsole;
var ratio = ratio_w;
if (settings.mobile != undefined && settings.mobile === true) {
if (props.height < props.width) {
if (props.height > size.height) {
ratio = ratio_h;
props.height = size.height;
props.width = size.height / ratio_visualconsole;
}
} else {
ratio = ratio_w;
var height = (acum_height * size.width) / acum_width;
props.height = height;
props.width = height / ratio_visualconsole;
}
var ratio_ajax = size.width / props.width;
// 1.- Pantalla vertical:
if (size.width < size.height) {
props.width = size.width;
props.height = size.width * ratio_visualconsole;
} else {
if (props.height > size.height) {
ratio = ratio_h;
props.height = size.height;
props.width = size.height / ratio_visualconsole;
// 2.- Pantalla horizontal:
// 2.1. - Consola visual es alargada.
if (props.width < props.height) {
props.width = size.width;
props.height = size.width * ratio_visualconsole;
} else {
// 2.2. - Consola visual es estrecha.
var aspect_ratio_cv = props.width / props.height;
var aspect_ratio_screen = size.width / size.height;
// 2.2.1 - Consola visual si su aspect ratio es menor al de la pantalla ahustamos al alto.
if (aspect_ratio_cv < aspect_ratio_screen) {
ratio_ajax = size.height / props.height;
var width = props.width * (size.height / props.height);
props.width = width;
props.height = size.height;
} else {
// 2.2.2 - Consola visual si su aspect ratio es mayor al de la pantalla ahustamos al ancho.
props.width = size.width;
props.height = size.width * ratio_visualconsole;
}
}
}
props.ratio = ratio_ajax;
$.ajax({
method: "post",
url: settings.baseUrl + "ajax.php",
@ -1355,6 +1353,8 @@ function dashboardLoadVC(settings) {
// Add the datetime when the item was received.
items.map(function(item) {
item["receivedAt"] = receivedAt;
item["cellId"] = settings.cellId;
item["ratio"] = ratio_ajax;
return item;
});
@ -1383,21 +1383,18 @@ function dashboardLoadVC(settings) {
var regex_hash = /(hash=)[^&]+(&?)/gi;
var replacement_hash = "$1" + props.hash + "$2";
/*
var regex_width = /(width=)[^&]+(&?)/gi;
var replacement_width = "$1" + size.width + "$2";
var regex_height = /(height=)[^&]+(&?)/gi;
var replacement_height =
"$1" + (size.height + headerMobileFix) + "$2";
*/
var replacement_height = "$1" + (size.height + 45) + "$2";
// Change the URL (if the browser has support).
if ("history" in window) {
var href = window.location.href.replace(regex, replacement);
href = href.replace(regex_hash, replacement_hash);
//href = href.replace(regex_width, replacement_width);
//href = href.replace(regex_height, replacement_height);
href = href.replace(regex_width, replacement_width);
href = href.replace(regex_height, replacement_height);
window.history.replaceState({}, document.title, href);
}
@ -1436,6 +1433,12 @@ function dashboardLoadVC(settings) {
return item;
});
var ratio = settings.ratio;
settings.items.map(function(item) {
item["ratio"] = ratio;
return item;
});
var visualConsoleManager = createVisualConsole(
container,
settings.props,
@ -1459,7 +1462,7 @@ function dashboardLoadVC(settings) {
if (settings.mobile_view_orientation_vc === true) {
$(window).on("orientationchange", function() {
$(container).width($(window).height());
$(container).height($(window).width() - headerMobileFix);
$(container).height($(window).width());
//Remove spinner change VC.
container.classList.remove("is-updating");
container.classList.remove("cv-overflow");
@ -1486,7 +1489,7 @@ function dashboardLoadVC(settings) {
var dimensions = {
width: $(window).height(),
height: $(window).width() - 40
height: $(window).width() - 45
};
visualConsoleManager.changeDimensionsVc(dimensions, interval);

8
pandora_console/include/lib/Dashboard/Widgets/maps_made_by_user.php
View File

@ -417,7 +417,7 @@ class MapsMadeByUser extends Widget
$size['width'] = ($size['width'] + 30);
$ratio = $visualConsole->adjustToViewport($size, 'dashboard');
$ratio = $visualConsole->adjustToViewport($size);
$visualConsoleData = $visualConsole->toArray();
$uniq = uniqid();
@ -461,10 +461,6 @@ class MapsMadeByUser extends Widget
$ratio
);
$output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
$output .= css_label_styles_visual_console($uniq, $ratio);
$output .= '</style>';
$visualConsoleItems = array_reduce(
$visualConsoleItems,
function ($carry, $item) {
@ -486,7 +482,7 @@ class MapsMadeByUser extends Widget
),
'ratio' => $ratio,
'size' => $size,
'cellId' => $this->cellId,
'cellId' => (string) $this->cellId,
'hash' => User::generatePublicHash(),
'id_user' => $config['id_user'],
'page' => 'include/ajax/visual_console.ajax',

5
pandora_console/include/rest-api/index.php
View File

@ -125,17 +125,14 @@ if ($getVisualConsole === true) {
}
$size = get_parameter('size', []);
$width = get_parameter('widthScreen', 0);
$mode = get_parameter('mode', '');
$ratio = 0;
if (isset($size) === true
&& is_array($size) === true
&& empty($size) === false
) {
$ratio = $visualConsole->adjustToViewport($size, $mode);
$ratio = $visualConsole->adjustToViewport($size);
$visualConsoleData = $visualConsole->toArray();
}

67
pandora_console/include/rest-api/models/Model.php
View File

@ -214,52 +214,41 @@ abstract class Model
/**
* Calculate ratio for mobile.
* Calculate ratio for CV.
*
* @param array $size Size viewport.
* @param string $mode Mode calculate (dashboard or mobile).
* @param array $size Size viewport.
*
* @return float Ratio.
*/
public function adjustToViewport($size, $mode='')
public function adjustToViewport(array $size)
{
global $config;
$ratio_visualconsole = $this->getRatio();
$ratio_w = ($size['width'] / $this->data['width']);
$ratio_h = ($size['height'] / $this->data['height']);
$acum_height = $this->data['height'];
$acum_width = $this->data['width'];
$this->data['width'] = $size['width'];
$this->data['height'] = ($size['width'] * $ratio_visualconsole);
$ratio = $ratio_w;
if ($mode === 'mobile') {
if ((bool) $config['mobile_view_orientation_vc'] === true) {
if ($this->data['height'] < $this->data['width']) {
if ($this->data['height'] > $size['height']) {
$ratio = $ratio_h;
$this->data['height'] = $size['height'];
$this->data['width'] = ($size['height'] / $ratio_visualconsole);
}
} else {
$ratio = $ratio_w;
$height = (($acum_height * ($size['width'])) / $acum_width);
$this->data['height'] = $height;
$this->data['width'] = ($height / $ratio_visualconsole);
}
} else {
if ($this->data['height'] > $this->data['width']) {
$ratio = $ratio_h;
$this->data['height'] = $size['height'];
$this->data['width'] = ($size['height'] / $ratio_visualconsole);
}
}
$ratio = ($size['width'] / $this->data['width']);
// 1.- Pantalla vertical:
if ($size['width'] < $size['height']) {
$this->data['width'] = $size['width'];
$this->data['height'] = ($size['width'] * $ratio_visualconsole);
} else {
if ($this->data['height'] > $size['height']) {
$ratio = $ratio_h;
$this->data['height'] = $size['height'];
$this->data['width'] = ($size['height'] / $ratio_visualconsole);
// 2.- Pantalla horizontal:
// 2.1. - Consola visual es alargada.
if ($this->data['width'] < $this->data['height']) {
$this->data['width'] = $size['width'];
$this->data['height'] = ($size['width'] * $ratio_visualconsole);
} else {
// 2.2. - Consola visual es estrecha.
$aspect_ratio_cv = ($this->data['width'] / $this->data['height']);
$aspect_ratio_screen = ($size['width'] / $size['height']);
// 2.2.1 - Consola visual si su aspect ratio es menor al de la pantalla ahustamos al alto.
if ($aspect_ratio_cv < $aspect_ratio_screen) {
$ratio = ($size['height'] / $this->data['height']);
$width = ($this->data['width'] * ($size['height'] / $this->data['height']));
$this->data['width'] = $width;
$this->data['height'] = $size['height'];
} else {
// 2.2.2 - Consola visual si su aspect ratio es mayor al de la pantalla ahustamos al ancho.
$this->data['width'] = $size['width'];
$this->data['height'] = ($size['width'] * $ratio_visualconsole);
}
}
}

7
pandora_console/include/rest-api/models/VisualConsole/Item.php
View File

@ -806,13 +806,6 @@ class Item extends CachedModel
$row['link'] = static::buildLink($row);
}
if ($ratio != 0) {
$row['width'] = ($row['width'] * $ratio);
$row['height'] = ($row['height'] * $ratio);
$row['pos_x'] = ($row['pos_x'] * $ratio);
$row['pos_y'] = ($row['pos_y'] * $ratio);
}
if ($widthRatio != 0) {
$row['width'] = ($row['width'] * $widthRatio);
$row['pos_x'] = ($row['pos_x'] * $widthRatio);

3
pandora_console/include/rest-api/models/VisualConsole/Items/BarsGraph.php
View File

@ -284,9 +284,6 @@ final class BarsGraph extends Item
}
} else {
$size = $config['font_size'];
if ($ratio != 0) {
$size = ($config['font_size'] * $ratio);
}
$options = [
'width' => $width,

6
pandora_console/include/rest-api/models/VisualConsole/Items/Clock.php
View File

@ -429,16 +429,10 @@ final class Clock extends Item
// Default values.
if ((int) $data['width'] === 0) {
$data['width'] = 100;
if ($ratio != 0) {
$data['width'] *= $ratio;
}
}
if ((int) $data['height'] === 0) {
$data['height'] = 50;
if ($ratio != 0) {
$data['height'] *= $ratio;
}
}
return $data;

5
pandora_console/include/rest-api/models/VisualConsole/Items/EventsHistory.php
View File

@ -127,11 +127,6 @@ final class EventsHistory extends Item
if ((int) $data['width'] === 0 && (int) $data['height'] === 0) {
$data['width'] = 420;
$data['height'] = 80;
if ($ratio != 0) {
$data['width'] = ($data['width'] * $ratio);
$data['height'] = ($data['height'] * $ratio);
}
}
// $data['height'] = ($data['height'] - 20);

7
pandora_console/include/rest-api/models/VisualConsole/Items/Line.php
View File

@ -205,13 +205,6 @@ final class Line extends Model
throw new \Exception('error fetching the data from the DB');
}
if ($ratio != 0) {
$row['width'] = ($row['width'] * $ratio);
$row['height'] = ($row['height'] * $ratio);
$row['pos_x'] = ($row['pos_x'] * $ratio);
$row['pos_y'] = ($row['pos_y'] * $ratio);
}
if ($widthRatio != 0) {
$row['width'] = ($row['width'] * $widthRatio);
$row['pos_x'] = ($row['pos_x'] * $widthRatio);

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

@ -370,13 +370,6 @@ final class NetworkLink extends Model
throw new \Exception('error fetching the data from the DB');
}
if ($ratio != 0) {
$row['width'] = ($row['width'] * $ratio);
$row['height'] = ($row['height'] * $ratio);
$row['pos_x'] = ($row['pos_x'] * $ratio);
$row['pos_y'] = ($row['pos_y'] * $ratio);
}
if ($widthRatio != 0) {
$row['width'] = ($row['width'] * $widthRatio);
$row['pos_x'] = ($row['pos_x'] * $widthRatio);

5
pandora_console/include/rest-api/models/VisualConsole/Items/Odometer.php
View File

@ -251,11 +251,6 @@ final class Odometer extends Item
if ((int) $data['width'] === 0 && (int) $data['height'] === 0) {
$data['width'] = 250;
$data['height'] = 140;
if ($ratio != 0) {
$data['width'] = ($data['width'] * $ratio);
$data['height'] = ($data['height'] * $ratio);
}
}
$data['height'] = ($data['height'] - 20);

9
pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php
View File

@ -242,13 +242,8 @@ final class StaticGraph extends Item
if ($width === 0 || $height === 0) {
if (isset($imagePath) === true && $imagePath !== false) {
$sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
if ($ratio != 0) {
$data['width'] = ($sizeImage[0] * $ratio);
$data['height'] = ($sizeImage[1] * $ratio);
} else {
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
}
$data['width'] = $sizeImage[0];
$data['height'] = $sizeImage[1];
}
}

3
pandora_console/include/styles/dashboards.css
View File

@ -580,9 +580,6 @@ div#main_pure {
margin: 0 !important;
padding: 0 !important;
}
#main_page > .ui-content div.label > p {
margin: 0;
}
form.modal-dashboard ul.wizard li label {
max-width: 30%;

2
pandora_console/include/styles/pandora.css
View File

@ -12402,10 +12402,12 @@ div.parent_graph > p.legend_background > table > tbody > tr {
margin-top: -2px;
}
/*
div#visual-console-container * {
font-size: unset;
line-height: unset;
}
*/
.combo-oid-button {
display: flex !important;

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

@ -32,6 +32,10 @@
.visual-console-item * {
overflow: visible;
font-family: inherit;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.visual-console-item.is-editing {
@ -734,6 +738,11 @@ div.module-graph .gauge_d3_class {
border: 2px solid #002f33;
}
p {
margin-block-start: 1em;
margin-block-end: 1em;
}
/* 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

53
pandora_console/mobile/include/style/main.css
View File

@ -36,7 +36,7 @@
}
@font-face {
font-family: "lato";
font-family: "Lato";
src: url("../../../fonts/lato.woff2") format("woff");
font-weight: 400;
}
@ -46,7 +46,7 @@
font-size: 12px;
}
body {
body:not(.visual-console-container-dashboard) {
background-color: white;
border-style: none;
direction: ltr;
@ -1522,6 +1522,10 @@ div.nodata_container {
overflow: hidden !important;
}
div.container-center div.visual-console-container-dashboard a {
text-decoration: none !important;
}
.visual-console-container-dashboard a:visited {
color: inherit !important;
}
@ -2810,11 +2814,11 @@ div#start_date-container
}
div#graph_content > div.parent_graph {
width: 100% !important;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
margin: 0 auto;
}
div#container {
text-align: left;
}
.logout-text {
@ -3281,3 +3285,38 @@ table#list_servers tbody td span.data a {
margin-left: 10px !important;
}
}
div.visual-console-container-dashboard table > tbody > tr:nth-child(even),
table[id^="service-table-"] > tbody > tr:nth-child(even) {
background-color: transparent;
}
.ui-page-theme-a div.visual-console-container-dashboard a,
html .ui-bar-a div.visual-console-container-dashboard a,
html .ui-body-a div.visual-console-container-dashboard a,
html body .ui-group-theme-a div.visual-console-container-dashboard a {
font-weight: inherit;
}
.ui-overlay-a div.visual-console-container-dashboard,
.ui-page-theme-a div.visual-console-container-dashboard,
.ui-page-theme-a .ui-panel-wrapper div.visual-console-container-dashboard {
text-shadow: none;
}
body div.visual-console-container-dashboard {
line-height: 16pt;
}
body div.visual-console-container-dashboard .line {
line-height: 0px;
}
div.visual-console-container-dashboard table,
div.visual-console-container-dashboard fieldset {
padding: 0px !important;
}
.ui-page-theme-a div.visual-console-container-dashboard a {
color: inherit !important;
}

17
pandora_console/mobile/include/ui.class.php
View File

@ -534,7 +534,6 @@ class Ui
<script>
function show_hide_password(e, url) {
let inputPass = e.target.previousElementSibling.firstChild;
console.log(inputPass);
if (inputPass.type === "password") {
inputPass.type = "text";
@ -1033,22 +1032,6 @@ class Ui
$(document).ready(function () {
dashboardLoadVC(settings);
if(settings.mobile_view_orientation_vc === false) {
$("#main_page > .ui-content").css("display", "block");
$(".container-center").css("padding", "50% 0");
$(".container-center").css("height", "100vh");
$(".visual-console-container-dashboard").css("display", "block");
$(".visual-console-container-dashboard").css("transform-origin", "left top");
$(".visual-console-container-dashboard").css("transform", "rotate(-90deg) translate(-100%)");
$(".visual-console-container-dashboard").css("margin-top", "-50%");
$(".visual-console-container-dashboard").css("white-space", "nowrap");
if(settings.props.height > settings.props.width) {
$(".container-center").css("overflow", "auto");
}
}
});
</script>'
);

8
pandora_console/mobile/operation/module_graph.php
View File

@ -276,12 +276,8 @@ class ModuleGraph
$(document).ready(function() {
function load_graph() {
$("#loading_graph").show();
var heigth = $(document).height()
- $(".ui-header").height()
- $(".ui-collapsible").height()
- 55;
var width = $(document).width() - 25;
var heigth = $(document).width() / 2;
var width = $(document).width();
ajax_get_graph($("#id_module").val(), heigth, width, $("#server_id").val());
}

10
pandora_console/mobile/operation/visualmap.php
View File

@ -146,8 +146,7 @@ class Visualmap
$ui->retrieveViewPort();
}
// Header.
$this->height -= 40;
$this->height -= 45;
$this->visualmap = db_get_row(
'tlayout',
@ -287,7 +286,8 @@ class Visualmap
];
}
$ratio_t = $visualConsole->adjustToViewport($size, 'mobile');
$ratio_t = $visualConsole->adjustToViewport($size);
$visualConsoleData = $visualConsole->toArray();
$uniq = uniqid();
@ -333,10 +333,6 @@ class Visualmap
$ratio_t
);
$output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
$output .= css_label_styles_visual_console($uniq, $ratio_t);
$output .= '</style>';
$visualConsoleItems = array_reduce(
$visualConsoleItems,
function ($carry, $item) {

42
visual_console_client/src/Item.ts
View File

@ -19,7 +19,8 @@ import {
addMovementListener,
debounce,
addResizementListener,
t
t,
parseFloatOr
} from "./lib";
import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
import { FormContainer, InputGroup } from "./Form";
@ -65,8 +66,9 @@ export interface ItemProps extends Position, Size {
aclGroupId: number | null;
cacheExpiration: number | null;
colorStatus: string;
cellId: number | null;
cellId: string | null;
alertOutline: boolean;
ratio: number | null;
}
export interface ItemClickEvent {
@ -143,8 +145,9 @@ export function itemBasePropsDecoder(data: AnyObject): ItemProps | never {
aclGroupId: parseIntOr(data.aclGroupId, null),
cacheExpiration: parseIntOr(data.cacheExpiration, null),
colorStatus: notEmptyStringOr(data.colorStatus, "#CCC"),
cellId: parseIntOr(data.cellId, null),
cellId: notEmptyStringOr(data.cellId, ""),
alertOutline: parseBoolean(data.alertOutline),
ratio: parseFloatOr(data.ratio, null),
...sizePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
...positionPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
};
@ -506,6 +509,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// Resize element.
this.resizeElement(this.itemProps.width, this.itemProps.height);
// Set label position.
this.changeLabelPosition(this.itemProps.labelPosition);
}
@ -533,6 +537,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
if (this.props.isOnTop) {
box.classList.add("is-on-top");
}
box.style.left = `${this.props.x}px`;
box.style.top = `${this.props.y}px`;
@ -639,26 +644,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
table.appendChild(row);
table.appendChild(emptyRow2);
table.style.textAlign = "center";
// Change the table size depending on its position.
switch (this.props.labelPosition) {
case "up":
case "down":
if (this.props.width > 0) {
table.style.width = `${this.props.width}px`;
table.style.height = "";
}
break;
case "left":
case "right":
if (this.props.height > 0) {
table.style.width = "";
table.style.height = `${this.props.height}px`;
}
break;
}
// element.innerHTML = this.props.label;
element.appendChild(table);
}
@ -822,6 +807,14 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
prevMeta: ItemMeta | null = null
): void {
if (prevProps) {
if (this.props.ratio !== 1 && this.props.type != ItemType.LINE_ITEM) {
this.elementRef.style.scale = `${
this.props.ratio ? this.props.ratio : 1
}`;
this.elementRef.style.transformOrigin = "left top";
this.elementRef.style.minWidth = "max-content";
this.elementRef.style.minHeight = "max-content";
}
this.updateDomElement(this.childElementRef);
}
// Move box.
@ -835,6 +828,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
this.updateDomElement(this.childElementRef);
}
}
// Resize box.
if (!prevProps || this.sizeChanged(prevProps, this.props)) {
this.resizeElement(this.props.width, this.props.height);
@ -852,6 +846,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
if (oldLabelHtml !== newLabelHtml) {
this.labelElementRef.innerHTML = newLabelHtml;
}
// Change label position.
if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {
this.changeLabelPosition(this.props.labelPosition);
@ -864,6 +859,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
this.elementRef.classList.remove("is-on-top");
}
}
// Change link.
if (prevProps && prevProps.isLinkEnabled !== this.props.isLinkEnabled) {
const container = this.createContainerDomElement();

74
visual_console_client/src/VisualConsole.ts
View File

@ -300,11 +300,11 @@ export default class VisualConsole {
item.props.type !== 13 &&
item.props.type !== 21
) {
const movement_x = e.newPosition.x - e.item.props.x;
const movement_y = e.newPosition.y - e.item.props.y;
const movementX = e.newPosition.x - e.item.props.x;
const movementY = e.newPosition.y - e.item.props.y;
let newX = item.props.x + movement_x;
let newY = item.props.y + movement_y;
let newX = item.props.x + movementX;
let newY = item.props.y + movementY;
if (newX > this.props.width) {
newX = this.props.width;
@ -682,6 +682,7 @@ export default class VisualConsole {
return;
}
let line = this.elementsById[lineId] as Line;
if (line.props) {
let startX = line.props.startPosition.x;
let startY = line.props.startPosition.y;
@ -792,7 +793,20 @@ export default class VisualConsole {
*/
public addElement(item: AnyObject, context: this = this) {
try {
if (item.ratio == null) {
item.ratio = 1;
}
item.x *= item.ratio;
item.y *= item.ratio;
if (item.type == ItemType.LINE_ITEM) {
item.startX *= item.ratio;
item.startY *= item.ratio;
item.endX *= item.ratio;
item.endY *= item.ratio;
}
const itemInstance = itemInstanceFrom(item);
// Add the item to the list.
context.elementsById[itemInstance.props.id] = itemInstance;
context.elementIds.push(itemInstance.props.id);
@ -815,6 +829,13 @@ export default class VisualConsole {
itemInstance.onResizeFinished(context.handleElementResizementFinished);
}
if (item.ratio !== 1 && item.type != ItemType.LINE_ITEM) {
itemInstance.elementRef.style.scale = `${item.ratio ? item.ratio : 1}`;
itemInstance.elementRef.style.transformOrigin = "left top";
itemInstance.elementRef.style.minWidth = "max-content";
itemInstance.elementRef.style.minHeight = "max-content";
}
// Add the item to the DOM.
context.containerRef.append(itemInstance.elementRef);
return itemInstance;
@ -854,6 +875,16 @@ export default class VisualConsole {
} else {
// Update item.
try {
if (item.ratio != null) {
item.x *= item.ratio;
item.y *= item.ratio;
if (item.type == ItemType.LINE_ITEM) {
item.startX *= item.ratio;
item.startY *= item.ratio;
item.endX *= item.ratio;
item.endY *= item.ratio;
}
}
this.elementsById[item.id].props = decodeProps(item);
} catch (error) {
console.error(
@ -1103,8 +1134,14 @@ export default class VisualConsole {
position: Position,
element: Item<ItemProps>
): Position {
let x = position.x + element.elementRef.clientWidth / 2;
let y = position.y + element.elementRef.clientHeight / 2;
let ratio = 1;
if (element.props.ratio != null) {
ratio = element.props.ratio;
}
let x = position.x + (element.elementRef.clientWidth / 2) * ratio;
let y = position.y + (element.elementRef.clientHeight / 2) * ratio;
if (
typeof element.props.label !== "undefined" ||
element.props.label !== "" ||
@ -1114,33 +1151,38 @@ export default class VisualConsole {
case "up":
y =
position.y +
(element.elementRef.clientHeight +
((element.elementRef.clientHeight +
element.labelElementRef.clientHeight) /
2;
2) *
ratio;
break;
case "down":
y =
position.y +
(element.elementRef.clientHeight -
((element.elementRef.clientHeight -
element.labelElementRef.clientHeight) /
2;
2) *
ratio;
break;
case "right":
x =
position.x +
(element.elementRef.clientWidth -
((element.elementRef.clientWidth -
element.labelElementRef.clientWidth) /
2;
2) *
ratio;
break;
case "left":
x =
position.x +
(element.elementRef.clientWidth +
((element.elementRef.clientWidth +
element.labelElementRef.clientWidth) /
2;
2) *
ratio;
break;
}
}
return { x, y };
}
@ -1196,12 +1238,14 @@ export default class VisualConsole {
width: 0,
height: 0,
lineWidth: this.props.relationLineWidth,
color: notEmptyStringOr(child.props.colorStatus, "#CCC")
color: notEmptyStringOr(child.props.colorStatus, "#CCC"),
ratio: parent.props.ratio
}),
itemMetaDecoder({
receivedAt: new Date()
})
);
// Save a reference to the line item.
this.relations[identifier] = line;

26
visual_console_client/src/items/BasicChart.ts
View File

@ -71,7 +71,7 @@ export default class BasicChart extends Item<BasicChartProps> {
let value = "";
if (this.props.value !== null) {
value = this.number_format(this.props.value, false, "", 2, 1000);
value = this.numberFormat(this.props.value, false, "", 2, 1000);
}
const moduleValue = document.createElement("h2");
@ -131,7 +131,7 @@ export default class BasicChart extends Item<BasicChartProps> {
let value = "";
if (this.props.value !== null) {
value = this.number_format(this.props.value, false, "", 2, 1000);
value = this.numberFormat(this.props.value, false, "", 2, 1000);
}
const moduleValue = document.createElement("h2");
@ -164,31 +164,31 @@ export default class BasicChart extends Item<BasicChartProps> {
}
}
protected number_format(
protected numberFormat(
number: number,
force_integer: boolean,
forceInteger: boolean,
unit: string,
short_data: number,
shortData: number,
divisor: number
) {
divisor = typeof divisor !== "undefined" ? divisor : 1000;
var decimals = 2;
// Set maximum decimal precision to 99 in case short_data is not set.
if (!short_data) {
short_data = 99;
// Set maximum decimal precision to 99 in case shortData is not set.
if (!shortData) {
shortData = 99;
}
if (force_integer) {
if (forceInteger) {
if (Math.round(number) != number) {
return "";
}
} else {
short_data++;
const aux_decimals = this.pad("1", short_data, 0);
shortData++;
const auxDecimals = this.pad("1", shortData, 0);
number =
Math.round(number * Number.parseInt(aux_decimals)) /
Number.parseInt(aux_decimals);
Math.round(number * Number.parseInt(auxDecimals)) /
Number.parseInt(auxDecimals);
}
var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];

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

@ -100,6 +100,11 @@ export default class NetworkLink extends Line {
);
protected updateDomElement(element: HTMLElement): void {
if (this.itemProps.ratio != null) {
this.itemProps.x /= this.itemProps.ratio;
this.itemProps.y /= this.itemProps.ratio;
}
super.updateDomElement(element);
let {
@ -119,6 +124,11 @@ export default class NetworkLink extends Line {
labelStartHeight
} = this.props;
if (this.itemProps.ratio != null) {
this.itemProps.x *= this.itemProps.ratio;
this.itemProps.y *= this.itemProps.ratio;
}
const svgs = element.getElementsByTagName("svg");
let line;
let svg;

6
visual_console_client/src/items/Odometer.ts
View File

@ -226,8 +226,8 @@ export default class Odometer extends Item<OdometerProps> {
script.onload = () => {
odometerB.style.transform = `rotate(${rotate}turn)`;
};
var url_pandora = window.location.pathname.split("/")[1];
script.src = `${document.dir}/${url_pandora}/include/javascript/pandora_alerts.js`;
var urlPandora = window.location.pathname.split("/")[1];
script.src = `${document.dir}/${urlPandora}/include/javascript/pandora_alerts.js`;
odometerA.appendChild(h1);
odometerA.appendChild(h2);
odometerContainer.appendChild(odometerB);
@ -277,7 +277,7 @@ export default class Odometer extends Item<OdometerProps> {
/**
* To update the content element.
* @override Item.updateDomElement
* @override resize
*/
public resize(width: number): void {
this.resizeElement(this.props.width);

4
visual_console_client/src/items/Percentile.ts
View File

@ -286,7 +286,7 @@ export default class Percentile extends Item<PercentileProps> {
/**
* To update the content element.
* @override Item.updateDomElement
* @override resizeElement
*/
public resizeElement(width: number, height: number): void {
if (this.props.percentileType === "progress-bar") {
@ -298,7 +298,7 @@ export default class Percentile extends Item<PercentileProps> {
/**
* To update the content element.
* @override Item.updateDomElement
* @override resize
*/
public resize(width: number): void {
this.resizeElement(width, width);

9
visual_console_client/src/main.css
View File

@ -32,6 +32,10 @@
.visual-console-item * {
overflow: visible;
font-family: inherit;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.visual-console-item.is-editing {
@ -733,3 +737,8 @@ div.module-graph .gauge_d3_class {
height: 0px;
border: 2px solid #002f33;
}
p {
margin-block-start: 1em;
margin-block-end: 1em;
}