Merge branch 'ent-2997-color-cloud-vc-items' into 'develop'
Add the Color Cloud item to the Visual Console See merge request artica/pandorafms!2075 Former-commit-id: e40e442631628db94c8f21c52cd8c04a0adbb6d6
This commit is contained in:
vgilc
commit
1b4cd37d5f
|
|
@ -145,7 +145,9 @@ function visual_map_main() {
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
bindColorRangeEvents();
|
||||
|
||||
draw_lines(lines, 'background', true);
|
||||
|
||||
draw_user_lines("", 0, 0, 0 , 0, 0, true);
|
||||
|
|
@ -651,6 +653,9 @@ function update_button_palette_callback() {
|
|||
var image = values['image'] + ".png";
|
||||
set_image("image", idItem, image);
|
||||
break;
|
||||
case "color_cloud":
|
||||
setColorCloud(id_visual_console, idItem);
|
||||
break;
|
||||
default:
|
||||
if($('input[name=width]').val() == ''){
|
||||
alert('Undefined width');
|
||||
|
|
@ -813,6 +818,25 @@ function readFields() {
|
|||
values['clock_animation'] = $("select[name=clock_animation]").val();
|
||||
values['show_last_value'] = $("select[name=last_value]").val();
|
||||
|
||||
// Color Cloud values
|
||||
if (selectedItem == "color_cloud" || creationItem == "color_cloud") {
|
||||
var diameter = $("input[name=diameter]").val();
|
||||
values["diameter"] = values["width"] = values["height"] = diameter;
|
||||
var defaultColor = $("input[name=default_color]").val();
|
||||
values["default_color"] = defaultColor;
|
||||
|
||||
// Ranges
|
||||
$('input[name="color_range_from_values[]"]').each(function (index, element) {
|
||||
values["color_range_from_values[" + index + "]"] = $(element).val();
|
||||
});
|
||||
$('input[name="color_range_to_values[]"]').each(function (index, element) {
|
||||
values["color_range_to_values[" + index + "]"] = $(element).val();
|
||||
});
|
||||
$('input[name="color_range_color_values[]"]').each(function (index, element) {
|
||||
values["color_range_colors[" + index + "]"] = $(element).val();
|
||||
});
|
||||
}
|
||||
|
||||
if (is_metaconsole()) {
|
||||
values['metaconsole'] = 1;
|
||||
values['id_agent'] = $("#hidden-agent").val();
|
||||
|
|
@ -1179,6 +1203,7 @@ function toggle_item_palette() {
|
|||
activeToolboxButton('line_item', true);
|
||||
activeToolboxButton('auto_sla_graph', true);
|
||||
activeToolboxButton('donut_graph', true);
|
||||
activeToolboxButton('color_cloud', true);
|
||||
|
||||
if (typeof(enterprise_activeToolboxButton) == 'function') {
|
||||
enterprise_activeToolboxButton(true);
|
||||
|
|
@ -1209,6 +1234,7 @@ function toggle_item_palette() {
|
|||
activeToolboxButton('group_item', false);
|
||||
activeToolboxButton('box_item', false);
|
||||
activeToolboxButton('line_item', false);
|
||||
activeToolboxButton('color_cloud', false);
|
||||
|
||||
activeToolboxButton('copy_item', false);
|
||||
activeToolboxButton('edit_item', false);
|
||||
|
|
@ -1615,6 +1641,26 @@ function loadFieldsFromDB(item) {
|
|||
.css('background-color', val);
|
||||
}
|
||||
|
||||
// Color Cloud values
|
||||
if (key === "diameter") $("input[name='diameter']").val(val);
|
||||
if (key === "dynamic_data") {
|
||||
if (val == null) val = {};
|
||||
var defaultColor = val["default_color"] || "#FFFFFF";
|
||||
$('input[name="default_color"]').val(defaultColor);
|
||||
|
||||
var colorRanges = val["color_ranges"] || [];
|
||||
var $colorRangeCreationTable = $("table.color-range-creation");
|
||||
|
||||
if ($colorRangeCreationTable.length > 0) {
|
||||
colorRanges.forEach(function (range) {
|
||||
$colorRangeTable = getColorRangeTable(
|
||||
$colorRangeCreationTable,
|
||||
range
|
||||
);
|
||||
$colorRangeTable.insertBefore($colorRangeCreationTable);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#count_items').html(1);
|
||||
|
|
@ -1896,6 +1942,14 @@ function hiddenFields(item) {
|
|||
$("#line_case").css('display', 'none');
|
||||
$("#line_case." + item).css('display', '');
|
||||
|
||||
// Color cloud rows
|
||||
$("#color_cloud_diameter_row").hide();
|
||||
$("#color_cloud_diameter_row." + item).show();
|
||||
$("#color_cloud_def_color_row").hide();
|
||||
$("#color_cloud_def_color_row." + item).show();
|
||||
$("#color_cloud_color_ranges_row").hide();
|
||||
$("#color_cloud_color_ranges_row." + item).show();
|
||||
|
||||
$("input[name='radio_choice']").trigger('change');
|
||||
|
||||
if (typeof(enterprise_hiddenFields) == 'function') {
|
||||
|
|
@ -1949,6 +2003,13 @@ function cleanFields(item) {
|
|||
$("select[name='timezone']").val('Europe/Madrid');
|
||||
$("select[name='clock_animation']").val('analogic_1');
|
||||
|
||||
// Color cloud fields
|
||||
$("input[name='diameter']").val(100);
|
||||
$("input[name='default_color']").val("#FFFFFF");
|
||||
// Clean dynamic fields
|
||||
$("table.color-range-creation input[type=text]").val("");
|
||||
$("table.color-range-creation input[type=color]").val("#FFFFFF");
|
||||
$("table.color-range:not(table.color-range-creation)").remove();
|
||||
|
||||
$("#preview").empty();
|
||||
|
||||
|
|
@ -2717,6 +2778,43 @@ function setPercentileBubble(id_data, values) {
|
|||
});
|
||||
}
|
||||
|
||||
function setColorCloud (visualConsoleId, dataId, $container) {
|
||||
$container = $container || $("#" + dataId + ".item.color_cloud");
|
||||
if ($container.length === 0) return;
|
||||
|
||||
var $spinner = $container.find("#image_" + dataId);
|
||||
var $svg = $container.children("svg");
|
||||
|
||||
if ($svg.length === 0) {
|
||||
$svg = $("<svg />");
|
||||
$container.append($svg);
|
||||
}
|
||||
|
||||
if ($spinner.length > 0) $svg.hide();
|
||||
|
||||
jQuery
|
||||
.post(
|
||||
get_url_ajax(),
|
||||
{
|
||||
"page": "include/ajax/visual_console_builder.ajax",
|
||||
"action": "get_color_cloud",
|
||||
"id_visual_console": visualConsoleId,
|
||||
"id_element": dataId
|
||||
},
|
||||
null,
|
||||
"html"
|
||||
)
|
||||
.done(function (data) {
|
||||
var $newSvg = $(data);
|
||||
// Check if $newSvg contains a svg
|
||||
if ($newSvg.is("svg")) $svg.replaceWith($newSvg);
|
||||
})
|
||||
.always(function () {
|
||||
if ($spinner.length > 0) $spinner.remove();
|
||||
$svg.show();
|
||||
});
|
||||
}
|
||||
|
||||
function get_image_url(img_src) {
|
||||
var img_url= null;
|
||||
var parameter = Array();
|
||||
|
|
@ -2765,9 +2863,6 @@ function set_color_line_status(lines, id_data, values) {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function createItem(type, values, id_data) {
|
||||
var sizeStyle = '';
|
||||
var imageSize = '';
|
||||
|
|
@ -2775,7 +2870,6 @@ function createItem(type, values, id_data) {
|
|||
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
|
||||
switch (type) {
|
||||
case 'box_item':
|
||||
|
||||
|
|
@ -3586,6 +3680,15 @@ function createItem(type, values, id_data) {
|
|||
var image = values['image'] + ".png";
|
||||
set_image("image", id_data, image);
|
||||
break;
|
||||
case 'color_cloud':
|
||||
var diameter = values["diameter"] || values["width"] || 100;
|
||||
|
||||
item = $('<div id="' + id_data + '" class="item color_cloud" style="text-align: left; position: absolute; width: ' + diameter + 'px; height: ' + diameter + 'px; top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img id="image_' + id_data + '" class="image" src="images/spinner.gif" width="' + diameter + '" height="' + diameter + '" /><br />' +
|
||||
'</div>'
|
||||
);
|
||||
setColorCloud(id_visual_console, id_data, item);
|
||||
break;
|
||||
default:
|
||||
//Maybe create in any Enterprise item.
|
||||
if (typeof(enterprise_createItem) == 'function') {
|
||||
|
|
@ -3822,6 +3925,15 @@ function updateDB_visual(type, idElement , values, event, top, left) {
|
|||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case 'color_cloud':
|
||||
var diameter = values["diameter"];
|
||||
var $container = $("#" + idElement + ".item.color_cloud");
|
||||
$container
|
||||
.children("svg")
|
||||
.attr("width", diameter)
|
||||
.attr("height", diameter);
|
||||
setColorCloud(id_visual_console, idElement, $container);
|
||||
break;
|
||||
case 'background':
|
||||
if(values['width'] == '0' || values['height'] == '0'){
|
||||
|
|
@ -4277,6 +4389,15 @@ function eventsItems(drag) {
|
|||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('color_cloud')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'color_cloud';
|
||||
idItem = $(divParent).attr('id');
|
||||
activeToolboxButton('copy_item', true);
|
||||
activeToolboxButton('edit_item', true);
|
||||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('handler_start')) {
|
||||
idItem = $(divParent).attr('id')
|
||||
.replace("handler_start_", "");
|
||||
|
|
@ -4464,6 +4585,9 @@ function eventsItems(drag) {
|
|||
if ($(event.target).hasClass('clock')) {
|
||||
selectedItem = 'clock';
|
||||
}
|
||||
if ($(event.target).hasClass('color_cloud')) {
|
||||
selectedItem = 'color_cloud';
|
||||
}
|
||||
if ($(event.target).hasClass('handler_start')) {
|
||||
selectedItem = 'handler_start';
|
||||
}
|
||||
|
|
@ -4802,6 +4926,10 @@ function click_button_toolbox(id) {
|
|||
toolbuttonActive = creationItem = 'line_item';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'color_cloud':
|
||||
toolbuttonActive = creationItem = 'color_cloud';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'copy_item':
|
||||
click_copy_item_callback();
|
||||
break;
|
||||
|
|
@ -4836,6 +4964,7 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('group_item', false);
|
||||
activeToolboxButton('auto_sla_graph', false);
|
||||
activeToolboxButton('donut_graph', false);
|
||||
activeToolboxButton('color_cloud', false);
|
||||
activeToolboxButton('copy_item', false);
|
||||
activeToolboxButton('edit_item', false);
|
||||
activeToolboxButton('delete_item', false);
|
||||
|
|
@ -4869,6 +4998,7 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('group_item', true);
|
||||
activeToolboxButton('auto_sla_graph', true);
|
||||
activeToolboxButton('donut_graph', true);
|
||||
activeToolboxButton('color_cloud', true);
|
||||
}
|
||||
break;
|
||||
case 'save_visualmap':
|
||||
|
|
@ -5218,3 +5348,96 @@ function onLinkedMapStatusCalculationTypeChange (event) {
|
|||
var value = event.target.value || "default";
|
||||
linkedMapStatusCalculationTypeChanged($linkedMapStatusCalcRow, value);
|
||||
}
|
||||
|
||||
function validateColorRange (values) {
|
||||
return (
|
||||
(values["from_value"].length > 0 || values["to_value"].length > 0) &&
|
||||
values["color"].length > 0 &&
|
||||
!Number.isNaN(Number.parseFloat(values["from_value"])) &&
|
||||
!Number.isNaN(Number.parseFloat(values["to_value"]))
|
||||
)
|
||||
}
|
||||
|
||||
function getColorRangeTable ($colorRangeCreationTable, values) {
|
||||
var $colorRangeTable = $colorRangeCreationTable.clone();
|
||||
$colorRangeTable.attr("id", "").removeClass("color-range-creation");
|
||||
|
||||
// ref inputs
|
||||
var $fromValueInput = $colorRangeTable.find('input[name="from_value_new"]');
|
||||
var $toValueInput = $colorRangeTable.find('input[name="to_value_new"]');
|
||||
var $colorInput = $colorRangeTable.find('input[name="color_new"]');
|
||||
|
||||
// Override input values
|
||||
if (values != null) {
|
||||
if (values["from_value"] != null) {
|
||||
$fromValueInput.val(values["from_value"]);
|
||||
}
|
||||
if (values["to_value"] != null) {
|
||||
$toValueInput.val(values["to_value"]);
|
||||
}
|
||||
if (values["color"] != null) {
|
||||
$colorInput.val(values["color"]);
|
||||
}
|
||||
}
|
||||
|
||||
// Change the name of the new inputs (and clear the id attr)
|
||||
$fromValueInput.attr("name", "color_range_from_values[]").attr("id", "");
|
||||
$toValueInput.attr("name", "color_range_to_values[]").attr("id", "");
|
||||
$colorInput.attr("name", "color_range_color_values[]").attr("id", "");
|
||||
|
||||
// Change the add button
|
||||
$colorRangeAddBtn = $colorRangeTable.find("a.color-range-add");
|
||||
if ($colorRangeAddBtn.length > 0) {
|
||||
$colorRangeAddBtn
|
||||
.removeClass("color-range-add")
|
||||
.addClass("color-range-delete")
|
||||
.click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$colorRangeTable.remove();
|
||||
});
|
||||
|
||||
// Change img
|
||||
$colorRangeAddImg = $colorRangeAddBtn.children("img");
|
||||
if ($colorRangeAddImg.length > 0) {
|
||||
$colorRangeAddImg.prop("src", "images/delete.png");
|
||||
}
|
||||
}
|
||||
|
||||
return $colorRangeTable;
|
||||
}
|
||||
|
||||
function handleColorRangeCreation (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
var $creationBtn = $(event.target);
|
||||
var $colorRangeCreationTable = $creationBtn.parents("table.color-range-creation");
|
||||
|
||||
// ref inputs
|
||||
var $fromValueInput = $colorRangeCreationTable.find('input[name="from_value_new"]');
|
||||
var $toValueInput = $colorRangeCreationTable.find('input[name="to_value_new"]');
|
||||
var $colorInput = $colorRangeCreationTable.find('input[name="color_new"]');
|
||||
|
||||
// TODO: Show info about validation
|
||||
var values = {
|
||||
"from_value": $fromValueInput.val(),
|
||||
"to_value": $toValueInput.val(),
|
||||
"color": $colorInput.val()
|
||||
}
|
||||
if (!validateColorRange(values)) return;
|
||||
|
||||
var $newColorRangeTable = getColorRangeTable($colorRangeCreationTable);
|
||||
|
||||
// Clear creation inputs
|
||||
$fromValueInput.val("");
|
||||
$toValueInput.val("");
|
||||
$colorInput.val("#FFFFFF");
|
||||
|
||||
// Add the new table
|
||||
$newColorRangeTable.insertBefore($colorRangeCreationTable);
|
||||
}
|
||||
|
||||
function bindColorRangeEvents () {
|
||||
$("a.color-range-add").click(handleColorRangeCreation);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,6 +202,11 @@ foreach ($layoutDatas as $layoutData) {
|
|||
html_print_image('images/line_item.png', true,
|
||||
array('title' => __('Line')));
|
||||
break;
|
||||
case COLOR_CLOUD:
|
||||
$table->data[$i + 1]['icon'] =
|
||||
html_print_image('images/color_cloud_item.png', true,
|
||||
array('title' => __('Color cloud')));
|
||||
break;
|
||||
default:
|
||||
if (enterprise_installed()) {
|
||||
$table->data[$i + 1]['icon'] =
|
||||
|
|
@ -259,6 +264,11 @@ foreach ($layoutDatas as $layoutData) {
|
|||
// hasn't the width and height.
|
||||
$table->data[$i + 1][2] = '';
|
||||
break;
|
||||
case COLOR_CLOUD:
|
||||
$table->data[$i + 1][2] = html_print_input_text('width_' . $idLayoutData, $layoutData['width'], '', 2, 5, true) .
|
||||
' x ' .
|
||||
html_print_input_text('height_' . $idLayoutData, $layoutData['width'], '', 2, 5, true);
|
||||
break;
|
||||
default:
|
||||
$table->data[$i + 1][2] = html_print_input_text('width_' . $idLayoutData, $layoutData['width'], '', 2, 5, true) .
|
||||
' x ' .
|
||||
|
|
@ -284,6 +294,7 @@ foreach ($layoutDatas as $layoutData) {
|
|||
switch ($layoutData['type']) {
|
||||
case BOX_ITEM:
|
||||
case LINE_ITEM:
|
||||
case COLOR_CLOUD:
|
||||
$table->data[$i + 1][4] = "";
|
||||
break;
|
||||
default:
|
||||
|
|
@ -485,6 +496,7 @@ foreach ($layoutDatas as $layoutData) {
|
|||
case LINE_ITEM:
|
||||
case BOX_ITEM:
|
||||
case AUTO_SLA_GRAPH:
|
||||
case COLOR_CLOUD:
|
||||
$table->data[$i + 2][4] = "";
|
||||
break;
|
||||
default:
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 505 B |
Binary file not shown.
|
After Width: | Height: | Size: 502 B |
|
|
@ -15,9 +15,7 @@
|
|||
// Login check
|
||||
global $config;
|
||||
|
||||
check_login ();
|
||||
|
||||
|
||||
check_login();
|
||||
|
||||
$get_image_path_status = get_parameter('get_image_path_status', 0);
|
||||
if ($get_image_path_status){
|
||||
|
|
@ -165,6 +163,12 @@ $timezone = get_parameter('timezone', 'Europe/Madrid');
|
|||
|
||||
$show_last_value = get_parameter('show_last_value', null);
|
||||
|
||||
$diameter = (int) get_parameter("diameter", $width);
|
||||
$default_color = get_parameter("default_color", "#FFFFFF");
|
||||
$color_range_from_values = get_parameter("color_range_from_values", array());
|
||||
$color_range_to_values = get_parameter("color_range_to_values", array());
|
||||
$color_range_colors = get_parameter("color_range_colors", array());
|
||||
|
||||
switch ($action) {
|
||||
case 'get_font':
|
||||
$return = array();
|
||||
|
|
@ -538,7 +542,10 @@ switch ($action) {
|
|||
echo json_encode($return);
|
||||
break;
|
||||
|
||||
|
||||
case 'get_color_cloud':
|
||||
$layoutData = db_get_row_filter('tlayout_data', array('id' => $id_element));
|
||||
echo visual_map_get_color_cloud_element($layoutData);
|
||||
break;
|
||||
|
||||
case 'update':
|
||||
case 'move':
|
||||
|
|
@ -835,6 +842,36 @@ switch ($action) {
|
|||
$values['fill_color'] = $fill_color;
|
||||
}
|
||||
break;
|
||||
case "color_cloud":
|
||||
$values['width'] = $diameter;
|
||||
$values['height'] = $diameter;
|
||||
// Fill Color Cloud values
|
||||
$extra = array(
|
||||
"default_color" => $default_color,
|
||||
"color_ranges" => array()
|
||||
);
|
||||
|
||||
$num_ranges = count($color_range_colors);
|
||||
for ($i = 0; $i < $num_ranges; $i++) {
|
||||
if (
|
||||
!isset($color_range_from_values[$i]) ||
|
||||
!isset($color_range_to_values[$i]) ||
|
||||
!isset($color_range_colors[$i])
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
$extra["color_ranges"][] = array(
|
||||
"from_value" => (float) $color_range_from_values[$i],
|
||||
"to_value" => (float) $color_range_to_values[$i],
|
||||
"color" => $color_range_colors[$i] // already html encoded
|
||||
);
|
||||
}
|
||||
|
||||
// Yes, we are using the label to store the extra info.
|
||||
// Sorry not sorry.
|
||||
$values["label"] = json_encode($extra);
|
||||
break;
|
||||
default:
|
||||
if (enterprise_installed()) {
|
||||
if ($image !== null) {
|
||||
|
|
@ -896,6 +933,12 @@ switch ($action) {
|
|||
unset($values['width']);
|
||||
unset($values['height']);
|
||||
break;
|
||||
case 'color_cloud':
|
||||
unset($values['width']);
|
||||
unset($values['height']);
|
||||
unset($values['diameter']);
|
||||
unset($values['label']);
|
||||
break;
|
||||
// -- line_item --
|
||||
case 'handler_start':
|
||||
case 'handler_end':
|
||||
|
|
@ -952,6 +995,7 @@ switch ($action) {
|
|||
case 'clock':
|
||||
case 'auto_sla_graph':
|
||||
case 'donut_graph':
|
||||
case 'color_cloud':
|
||||
$elementFields = db_get_row_filter('tlayout_data',
|
||||
array('id' => $id_element));
|
||||
|
||||
|
|
@ -1092,6 +1136,16 @@ switch ($action) {
|
|||
$elementFields['fill_color'] = $elementFields['fill_color'];
|
||||
break;
|
||||
|
||||
case 'color_cloud':
|
||||
$elementFields["diameter"] = $elementFields["width"];
|
||||
$elementFields["dynamic_data"] = null;
|
||||
try {
|
||||
// Yes, it's using the label field to store the extra data
|
||||
$elementFields["dynamic_data"] = json_decode($elementFields["label"], true);
|
||||
} catch (Exception $ex) {}
|
||||
$elementFields["label"] = "";
|
||||
break;
|
||||
|
||||
// -- line_item --
|
||||
case 'handler_start':
|
||||
case 'handler_end':
|
||||
|
|
@ -1347,6 +1401,37 @@ switch ($action) {
|
|||
$values['width'] = $width;
|
||||
$values['height'] = $height;
|
||||
break;
|
||||
case 'color_cloud':
|
||||
$values['type'] = COLOR_CLOUD;
|
||||
$values['width'] = $diameter;
|
||||
$values['height'] = $diameter;
|
||||
|
||||
$extra = array(
|
||||
"default_color" => $default_color,
|
||||
"color_ranges" => array()
|
||||
);
|
||||
|
||||
$num_ranges = count($color_range_colors);
|
||||
for ($i = 0; $i < $num_ranges; $i++) {
|
||||
if (
|
||||
!isset($color_range_from_values[$i]) ||
|
||||
!isset($color_range_to_values[$i]) ||
|
||||
!isset($color_range_colors[$i])
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
$extra["color_ranges"][] = array(
|
||||
"from_value" => (int) $color_range_from_values[$i],
|
||||
"to_value" => (int) $color_range_to_values[$i],
|
||||
"color" => $color_range_colors[$i] // already html encoded
|
||||
);
|
||||
}
|
||||
|
||||
// Yes, we are using the label to store the extra info.
|
||||
// Sorry not sorry.
|
||||
$values["label"] = json_encode($extra);
|
||||
break;
|
||||
default:
|
||||
if (enterprise_installed()) {
|
||||
enterprise_ajax_insert_fill_values_insert($type, $values);
|
||||
|
|
@ -1391,7 +1476,6 @@ switch ($action) {
|
|||
|
||||
$text = visual_map_create_internal_name_item($label, $type, $image, $agent, $id_module, $idData);
|
||||
|
||||
$values['label'] = io_safe_output($values['label']);
|
||||
$values['left'] = $values['pos_x'];
|
||||
$values['top'] = $values['pos_y'];
|
||||
$values['parent'] = $values['parent_item'];
|
||||
|
|
@ -1423,9 +1507,22 @@ switch ($action) {
|
|||
$return['values']['type_percentile'] = 'percentile';
|
||||
break;
|
||||
|
||||
|
||||
case COLOR_CLOUD:
|
||||
$return["values"]["diameter"] = $values["width"];
|
||||
|
||||
try {
|
||||
// Yes, it's using the label field to store the extra data
|
||||
$return["values"]["dynamic_data"] = json_decode($values["label"], true);
|
||||
} catch (Exception $ex) {
|
||||
$return["values"]["dynamic_data"] = array();
|
||||
}
|
||||
$values["label"] = "";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't move this piece of code
|
||||
$return["values"]["label"] = io_safe_output($values['label']);
|
||||
|
||||
echo json_encode($return);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -204,6 +204,7 @@ define('CIRCULAR_INTERIOR_PROGRESS_BAR', 16);
|
|||
define('DONUT_GRAPH', 17);
|
||||
define('BARS_GRAPH', 18);
|
||||
define('CLOCK', 19);
|
||||
define('COLOR_CLOUD', 20);
|
||||
//Some styles
|
||||
define('MIN_WIDTH', 300);
|
||||
define('MIN_HEIGHT', 120);
|
||||
|
|
|
|||
|
|
@ -97,6 +97,15 @@ function hd ($var, $file = '', $oneline = false) {
|
|||
html_debug_print ($var, $file, $oneline);
|
||||
}
|
||||
|
||||
function debug () {
|
||||
$args_num = func_num_args();
|
||||
$arg_list = func_get_args();
|
||||
|
||||
for ($i = 0; $i < $args_num; $i++) {
|
||||
html_debug_print($arg_list[$i], true);
|
||||
}
|
||||
}
|
||||
|
||||
function html_f2str($function, $params) {
|
||||
ob_start();
|
||||
|
||||
|
|
@ -1338,6 +1347,36 @@ function html_print_input_hidden_extended($name, $value, $id, $return = false, $
|
|||
echo $output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a color input element.
|
||||
*
|
||||
* The element will have an id like: "hidden-$name"
|
||||
*
|
||||
* @param string $name Input name.
|
||||
* @param int $value Input value. Decimal representation of the color's hexadecimal value.
|
||||
* @param string $class Set the class of input.
|
||||
* @param bool $return Whether to return an output string or echo now (optional, echo by default).
|
||||
*
|
||||
* @return string HTML code if return parameter is true.
|
||||
*/
|
||||
function html_print_input_color ($name, $value, $class = false, $return = false) {
|
||||
$attr_type = 'type="color"';
|
||||
$attr_id = 'id="color-' . htmlspecialchars($name, ENT_QUOTES) . '"';
|
||||
$attr_name = 'name="' . htmlspecialchars($name, ENT_QUOTES) . '"';
|
||||
$attr_value = 'value="' . htmlspecialchars($value, ENT_QUOTES) . '"';
|
||||
$attr_class = 'class="' . ($class !== false ? htmlspecialchars($class, ENT_QUOTES) : "") . '"';
|
||||
|
||||
$output = '<input '
|
||||
. $attr_type . ' '
|
||||
. $attr_id . ' '
|
||||
. $attr_name . ' '
|
||||
. $attr_value . ' '
|
||||
. $attr_class . ' />';
|
||||
|
||||
if ($return) return $output;
|
||||
echo $output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render an submit input button element.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1569,6 +1569,9 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
case BOX_ITEM:
|
||||
$class .= "box_item";
|
||||
break;
|
||||
case COLOR_CLOUD:
|
||||
$class .= "color_cloud";
|
||||
break;
|
||||
default:
|
||||
if (!empty($element_enterprise)) {
|
||||
$class .= $element_enterprise['class'];
|
||||
|
|
@ -2181,6 +2184,9 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
|
||||
}
|
||||
break;
|
||||
case COLOR_CLOUD:
|
||||
echo visual_map_get_color_cloud_element($layoutData);
|
||||
break;
|
||||
default:
|
||||
if (!empty($element_enterprise)) {
|
||||
echo $element_enterprise['item'];
|
||||
|
|
@ -3883,6 +3889,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
|
|||
case 'group_item':
|
||||
$text = __('Group') . " - ";
|
||||
break;
|
||||
case COLOR_CLOUD:
|
||||
case 'color_cloud':
|
||||
$text = __('Color cloud') . " - ";
|
||||
break;
|
||||
case 'icon':
|
||||
case ICON:
|
||||
$text = __('Icon') . " - " .
|
||||
|
|
@ -4020,6 +4030,8 @@ function visual_map_type_in_js($type) {
|
|||
break;
|
||||
case LINE_ITEM:
|
||||
return 'line_item';
|
||||
case COLOR_CLOUD:
|
||||
return 'color_cloud';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -4035,5 +4047,63 @@ function visual_map_macro($label,$module){
|
|||
return $label;
|
||||
}
|
||||
|
||||
function visual_map_get_color_cloud_element ($data) {
|
||||
$id = (int) $data["id"];
|
||||
$diameter = (int) $data["width"];
|
||||
$dynamic_fields = array();
|
||||
|
||||
try {
|
||||
// Yes, the dynamic fields object is stored into the label field. ¯\_(ツ)_/¯
|
||||
if (!empty($data["label"])) {
|
||||
$dynamic_fields = json_decode($data["label"], true);
|
||||
}
|
||||
} catch (Exception $ex) {}
|
||||
|
||||
$default_color = !empty($dynamic_fields["default_color"])
|
||||
? $dynamic_fields["default_color"]
|
||||
: "#FFFFFF";
|
||||
$color = $default_color;
|
||||
// The svg gradient needs a unique identifier
|
||||
$gradient_id = "grad_" . $id;
|
||||
|
||||
// Color ranges
|
||||
if (
|
||||
!empty($dynamic_fields["color_ranges"]) &&
|
||||
!empty($data["id_agente_modulo"])
|
||||
) {
|
||||
// TODO: Metaconsole support.
|
||||
$value = modules_get_last_value($data["id_agente_modulo"]);
|
||||
|
||||
if ($value !== false) {
|
||||
/* TODO: It would be ok to give support to string values in the future?
|
||||
* It can be done by matching the range value with the value if it is a
|
||||
* string. I think the function to retrieve the value only supports
|
||||
* numeric values.
|
||||
*/
|
||||
$value = (float) $value;
|
||||
foreach ($dynamic_fields["color_ranges"] as $range) {
|
||||
if ($range["from_value"] <= $value && $range["to_value"] >= $value) {
|
||||
$color = $range["color"];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<svg height="<?php echo $diameter; ?>" width="<?php echo $diameter; ?>">
|
||||
<defs>
|
||||
<radialGradient id="<?php echo $gradient_id; ?>" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
||||
<stop offset="0%" style="stop-color:<?php echo $color; ?>;stop-opacity:0.9" />
|
||||
<!-- <stop offset="50%" style="stop-color:<?php echo $color; ?>;stop-opacity:0.6" /> -->
|
||||
<stop offset="100%" style="stop-color:<?php echo $color; ?>;stop-opacity:0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="50%" cy="50%" r="50%" fill="url(#<?php echo $gradient_id; ?>)" />
|
||||
</svg>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -62,7 +62,9 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
'clock' => __('Clock'),
|
||||
'group_item' => __('Group'),
|
||||
'box_item' => __('Box'),
|
||||
'line_item' => __('Line'));
|
||||
'line_item' => __('Line'),
|
||||
'color_cloud' => __('Color cloud')
|
||||
);
|
||||
|
||||
if (enterprise_installed()) {
|
||||
enterprise_visual_map_editor_add_title_palette($titles);
|
||||
|
|
@ -328,7 +330,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items['agent_row'] = array();
|
||||
$form_items['agent_row']['items'] = array('static_graph',
|
||||
'percentile_bar', 'percentile_item', 'module_graph',
|
||||
'simple_value', 'datos', 'auto_sla_graph');
|
||||
'simple_value', 'datos', 'auto_sla_graph', 'color_cloud');
|
||||
$form_items['agent_row']['html'] = '<td align="left">' .
|
||||
__('Agent') . '</td>';
|
||||
$params = array();
|
||||
|
|
@ -395,7 +397,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items['module_row'] = array();
|
||||
$form_items['module_row']['items'] = array('static_graph',
|
||||
'percentile_bar', 'percentile_item', 'module_graph',
|
||||
'simple_value', 'datos', 'auto_sla_graph', 'donut_graph', 'bars_graph');
|
||||
'simple_value', 'datos', 'auto_sla_graph', 'donut_graph', 'bars_graph',
|
||||
'color_cloud');
|
||||
$form_items['module_row']['html'] = '<td align="left">' .
|
||||
__('Module') . '</td>
|
||||
<td align="left">' .
|
||||
|
|
@ -510,7 +513,12 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
__('Max value') . '</td>
|
||||
<td align="left">' . html_print_input_text('max_percentile', 0, '', 3, 5, true) . '</td>';
|
||||
|
||||
$percentile_type = array('percentile' => __('Percentile'), 'bubble' => __('Bubble'), 'circular_progress_bar' => __('Circular progress bar'), 'interior_circular_progress_bar' => __('Circular progress bar (interior)'));
|
||||
$percentile_type = array(
|
||||
"percentile" => __("Percentile"),
|
||||
"bubble" => __("Bubble"),
|
||||
"circular_progress_bar" => __("Circular porgress bar"),
|
||||
"interior_circular_progress_bar" => __("Circular progress bar (interior)")
|
||||
);
|
||||
$percentile_value = array('percent' => __('Percent'), 'value' => __('Value'));
|
||||
if (is_metaconsole()){
|
||||
$form_items['percentile_item_row_3'] = array();
|
||||
|
|
@ -534,14 +542,14 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items['percentile_item_row_3']['html'] = '<td align="left">' .
|
||||
__('Type') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false) .
|
||||
'</td>';
|
||||
|
||||
$form_items['percentile_item_row_4'] = array();
|
||||
$form_items['percentile_item_row_4']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_4']['html'] = '<td align="left">' . __('Value to show') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true) .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false) .
|
||||
'</td>';
|
||||
}
|
||||
|
||||
|
|
@ -580,7 +588,66 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
'<td align="left" style="">' . __('Show statistics') . '</td>
|
||||
<td align="left" style="">' .
|
||||
html_print_checkbox('show_statistics', 1, '', true) . '</td>';
|
||||
|
||||
// Start of Color Cloud rows
|
||||
|
||||
// Diameter
|
||||
$default_diameter = 100;
|
||||
$form_items["color_cloud_diameter_row"] = array();
|
||||
$form_items["color_cloud_diameter_row"]["items"] = array("color_cloud");
|
||||
$form_items["color_cloud_diameter_row"]["html"] =
|
||||
"<td align=\"left\">" . __("Diameter") . "</td>
|
||||
<td align=\"left\">" .
|
||||
html_print_input_text("diameter", $default_diameter, "", 3, 5, true) .
|
||||
"</td>";
|
||||
|
||||
// Default color
|
||||
$default_color = "#FFFFFF";
|
||||
$form_items["color_cloud_def_color_row"] = array();
|
||||
$form_items["color_cloud_def_color_row"]["items"] = array("color_cloud");
|
||||
$form_items["color_cloud_def_color_row"]["html"] =
|
||||
"<td align=\"left\">" . __("Default color") . "</td>
|
||||
<td align=\"left\">" .
|
||||
html_print_input_color("default_color", $default_color, false, true) .
|
||||
"</td>";
|
||||
|
||||
// Color ranges
|
||||
$form_items["color_cloud_color_ranges_row"] = array();
|
||||
$form_items["color_cloud_color_ranges_row"]["items"] = array("color_cloud");
|
||||
$form_items["color_cloud_color_ranges_row"]["html"] =
|
||||
"<td align=\"left\">" . __("Color ranges") . "</td>" .
|
||||
"<td align=\"left\">" .
|
||||
"<table id=\"new-color-range\" class=\"databox color-range color-range-creation\">" .
|
||||
"<tr>" .
|
||||
"<td>" . __("From value") . "</td>" .
|
||||
"<td>" .
|
||||
html_print_input_text("from_value_new", "", "", 5, 255, true) .
|
||||
"</td>" .
|
||||
"<td rowspan=\"4\">" .
|
||||
"<a class=\"color-range-add\" href=\"#\">" .
|
||||
html_print_image("images/add.png", true) .
|
||||
"</a>" .
|
||||
"</td>" .
|
||||
"</tr>" .
|
||||
"<td>" . __("To value") . "</td>" .
|
||||
"<td>" .
|
||||
html_print_input_text("to_value_new", "", "", 5, 255, true) .
|
||||
"</td>" .
|
||||
"<td></td>" .
|
||||
"<tr>" .
|
||||
"</tr>" .
|
||||
"<tr>" .
|
||||
"<td>" . __("Color") . "</td>" .
|
||||
"<td>" .
|
||||
html_print_input_color("color_new", $default_color, false, true) .
|
||||
"</td>" .
|
||||
"<td></td>" .
|
||||
"</tr>" .
|
||||
"</table>" .
|
||||
"</td>";
|
||||
|
||||
// End of Color Cloud rows
|
||||
|
||||
$form_items['show_on_top_row'] = array();
|
||||
$form_items['show_on_top_row']['items'] = array('group_item');
|
||||
$form_items['show_on_top_row']['html'] =
|
||||
|
|
@ -616,7 +683,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
__('Type') . '</td>
|
||||
<td align="left">' . html_print_select($bars_graph_types, 'bars_graph_type', 'vertical', '', '', '', true) . '</td>';
|
||||
|
||||
|
||||
|
||||
//Insert and modify before the buttons to create or update.
|
||||
if (enterprise_installed()) {
|
||||
enterprise_visual_map_editor_modify_form_items_palette($form_items);
|
||||
|
|
@ -661,7 +728,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items_advance['position_row']['items'] = array('static_graph',
|
||||
'percentile_bar', 'percentile_item', 'module_graph',
|
||||
'simple_value', 'label', 'icon', 'datos', 'box_item',
|
||||
'auto_sla_graph', 'bars_graph','clock', 'donut_graph');
|
||||
'auto_sla_graph', 'bars_graph','clock', 'donut_graph', 'color_cloud');
|
||||
$form_items_advance['position_row']['html'] = '
|
||||
<td align="left">' . __('Position') . '</td>
|
||||
<td align="left">(' . html_print_input_text('left', '0', '', 3, 5, true) .
|
||||
|
|
@ -870,7 +937,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items_advance['element_group_row']['items'] = array(
|
||||
'group_item', 'static_graph', 'percentile_bar',
|
||||
'percentile_item', 'module_graph', 'simple_value',
|
||||
'icon', 'label', 'datos', 'donut_graph');
|
||||
'icon', 'label', 'datos', 'donut_graph', 'color_cloud');
|
||||
$form_items_advance['element_group_row']['html'] = '<td align="left">'.
|
||||
__('Restrict access to group') . '</td>' .
|
||||
'<td align="left">' .
|
||||
|
|
@ -1021,6 +1088,7 @@ function visual_map_editor_print_toolbox() {
|
|||
visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
|
||||
visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
|
||||
visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
|
||||
visual_map_print_button_editor('color_cloud', __('Color cloud'), 'left', false, 'color_cloud_min', true);
|
||||
if(defined("METACONSOLE")){
|
||||
echo '<a href="javascript:" class="tip"><img src="'.$config['homeurl_static'].'/images/tip.png" data-title="The data displayed in editor mode is not real" data-use_title_for_force_title="1"
|
||||
class="forced_title" alt="The data displayed in editor mode is not real"></a>';
|
||||
|
|
|
|||
|
|
@ -886,6 +886,12 @@ input.group_item_min {
|
|||
input.group_item_min[disabled] {
|
||||
background: #fefefe url(../../images/group_green.disabled.png) no-repeat center !important;
|
||||
}
|
||||
input.color_cloud_min {
|
||||
background: #fefefe url(../../images/color_cloud_item.png) no-repeat center !important;
|
||||
}
|
||||
input.color_cloud_min[disabled] {
|
||||
background: #fefefe url(../../images/color_cloud_item.disabled.png) no-repeat center !important;
|
||||
}
|
||||
|
||||
div#cont {
|
||||
position: fixed;
|
||||
|
|
|
|||
Loading…
Reference in New Issue