diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js index 929e8b70f3..b252d4b976 100755 --- a/pandora_console/godmode/reporting/visual_console_builder.editor.js +++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js @@ -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 = $(""); + $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 = $('
' + + '
' + + '
' + ); + 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); +} diff --git a/pandora_console/godmode/reporting/visual_console_builder.elements.php b/pandora_console/godmode/reporting/visual_console_builder.elements.php index 898c9b09ff..d402726456 100755 --- a/pandora_console/godmode/reporting/visual_console_builder.elements.php +++ b/pandora_console/godmode/reporting/visual_console_builder.elements.php @@ -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: diff --git a/pandora_console/images/color_cloud_item.disabled.png b/pandora_console/images/color_cloud_item.disabled.png new file mode 100644 index 0000000000..adddae83f8 Binary files /dev/null and b/pandora_console/images/color_cloud_item.disabled.png differ diff --git a/pandora_console/images/color_cloud_item.png b/pandora_console/images/color_cloud_item.png new file mode 100644 index 0000000000..cf04ef25e1 Binary files /dev/null and b/pandora_console/images/color_cloud_item.png differ diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php index a68d906918..737396cd4a 100755 --- a/pandora_console/include/ajax/visual_console_builder.ajax.php +++ b/pandora_console/include/ajax/visual_console_builder.ajax.php @@ -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; diff --git a/pandora_console/include/constants.php b/pandora_console/include/constants.php index c223738b2a..22f46257dc 100644 --- a/pandora_console/include/constants.php +++ b/pandora_console/include/constants.php @@ -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); diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php index 932e8a3457..1a589306d6 100644 --- a/pandora_console/include/functions_html.php +++ b/pandora_console/include/functions_html.php @@ -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 = ''; + + if ($return) return $output; + echo $output; +} + /** * Render an submit input button element. * diff --git a/pandora_console/include/functions_visual_map.php b/pandora_console/include/functions_visual_map.php index d512fb0f5c..6b3886aebd 100755 --- a/pandora_console/include/functions_visual_map.php +++ b/pandora_console/include/functions_visual_map.php @@ -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(); +?> + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/include/functions_visual_map_editor.php b/pandora_console/include/functions_visual_map_editor.php index 9799c65b62..3891cc2352 100755 --- a/pandora_console/include/functions_visual_map_editor.php +++ b/pandora_console/include/functions_visual_map_editor.php @@ -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'] = '' . __('Agent') . ''; $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'] = '' . __('Module') . ' ' . @@ -510,7 +513,12 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) { __('Max value') . ' ' . html_print_input_text('max_percentile', 0, '', 3, 5, true) . ''; - $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'] = '' . __('Type') . ' ' . - html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) . + html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false) . ''; $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'] = '' . __('Value to show') . ' ' . - html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true) . + html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false) . ''; } @@ -580,7 +588,66 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) { '' . __('Show statistics') . ' ' . html_print_checkbox('show_statistics', 1, '', true) . ''; + + // 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"] = + "" . __("Diameter") . " + " . + html_print_input_text("diameter", $default_diameter, "", 3, 5, true) . + ""; + + // 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"] = + "" . __("Default color") . " + " . + html_print_input_color("default_color", $default_color, false, true) . + ""; + + // 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"] = + "" . __("Color ranges") . "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "" . + "
" . __("From value") . "" . + html_print_input_text("from_value_new", "", "", 5, 255, true) . + "" . + "" . + html_print_image("images/add.png", true) . + "" . + "
" . __("To value") . "" . + html_print_input_text("to_value_new", "", "", 5, 255, true) . + "
" . __("Color") . "" . + html_print_input_color("color_new", $default_color, false, true) . + "
" . + ""; + // 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') . ' ' . html_print_select($bars_graph_types, 'bars_graph_type', 'vertical', '', '', '', true) . ''; - + //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'] = ' ' . __('Position') . ' (' . 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'] = ''. __('Restrict access to group') . '' . '' . @@ -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 'The data displayed in editor mode is not real'; diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index c3eff053c1..ea6e92a956 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -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;