Working in the new elements for the visualmap. Ticket #1478

This commit is contained in:
mdtrooper 2014-11-21 10:42:14 +01:00
parent 381a526bf3
commit e0e2ab89fc
9 changed files with 266 additions and 84 deletions

View File

@ -10,7 +10,7 @@ ALTER TABLE tlayout DROP COLUMN fullscreen;
ALTER TABLE tlayout_data DROP COLUMN no_link_color;
ALTER TABLE tlayout_data DROP COLUMN label_color;
ALTER TABLE tlayout_data ADD COLUMN `border_width` INTEGER UNSIGNED NOT NULL default 0;
ALTER TABLE tlayout_data ADD COLUMN `border_color` varchar(200) DEFAULT "";
ALTER TABLE tlayout_data ADD COLUMN `fill_color` varchar(200) DEFAULT "";

View File

@ -10,3 +10,6 @@ ALTER TABLE tlayout DROP COLUMN fullscreen;
ALTER TABLE tlayout_data DROP COLUMN no_link_color;
ALTER TABLE tlayout_data DROP COLUMN label_color;
ALTER TABLE tlayout_data ADD COLUMN border_width INTEGER NOT NULL default 0;
ALTER TABLE tlayout_data ADD COLUMN border_color varchar(200) DEFAULT "";
ALTER TABLE tlayout_data ADD COLUMN fill_color varchar(200) DEFAULT "";

View File

@ -10,3 +10,6 @@ ALTER TABLE "tlayout" DROP COLUMN "fullscreen";
ALTER TABLE "tlayout_data" DROP COLUMN "no_link_color";
ALTER TABLE "tlayout_data" DROP COLUMN "label_color";
ALTER TABLE "tlayout_data" ADD COLUMN "border_width" INTEGER NOT NULL default 0;
ALTER TABLE "tlayout_data" ADD COLUMN "border_color" varchar(200) DEFAULT "";
ALTER TABLE "tlayout_data" ADD COLUMN "fill_color" varchar(200) DEFAULT "";

View File

@ -129,6 +129,8 @@ function update_button_palette_callback() {
idElement = 0;
break;
case 'box_item':
break;
case 'group_item':
case 'static_graph':
$("#text_" + idItem).html(values['label']);
@ -245,6 +247,14 @@ function readFields() {
values['id_group'] = $("select[name=group]").val();
values['id_custom_graph'] = parseInt(
$("#custom_graph option:selected").val());
values['width_box'] = parseInt(
$("input[name='width_box']").val());
values['height_box'] = parseInt(
$("input[name='height_box']").val());
values['border_color'] = $("input[name='border_color']").val();
values['border_width'] = parseInt(
$("input[name='border_width']").val());
values['fill_color'] = $("input[name='fill_color']").val();
if (metaconsole != 0) {
values['metaconsole'] = 1;
@ -271,6 +281,8 @@ function create_button_palette_callback() {
//VALIDATE DATA
var validate = true;
switch (creationItem) {
case 'box_item':
break;
case 'group_item':
case 'static_graph':
if ((values['label'] == '') && (values['image'] == '')) {
@ -362,6 +374,7 @@ function toggle_item_palette() {
activeToolboxButton('icon', true);
activeToolboxButton('percentile_item', true);
activeToolboxButton('group_item', true);
activeToolboxButton('box_item', true);
if (typeof(enterprise_activeToolboxButton) == 'function') {
enterprise_activeToolboxButton(true);
@ -386,6 +399,7 @@ function toggle_item_palette() {
activeToolboxButton('icon', false);
activeToolboxButton('percentile_item', false);
activeToolboxButton('group_item', false);
activeToolboxButton('box_item', false);
activeToolboxButton('copy_item', false);
activeToolboxButton('edit_item', false);
@ -553,14 +567,22 @@ function loadFieldsFromDB(item) {
$('#' + periodId + '_manual').show();
}
}
if (key == 'width') $("input[name=width]").val(val);
if (key == 'height') $("input[name=height]").val(val);
if (key == 'parent_item') $("select[name=parent]").val(val);
if (key == 'id_layout_linked') $("select[name=map_linked]").val(val);
if (key == 'width_percentile') $("input[name=width_percentile]").val(val);
if (key == 'max_percentile') $("input[name=max_percentile]").val(val);
if (key == 'width_module_graph') $("input[name=width_module_graph]").val(val);
if (key == 'height_module_graph') $("input[name=height_module_graph]").val(val);
if (key == 'width')
$("input[name=width]").val(val);
if (key == 'height')
$("input[name=height]").val(val);
if (key == 'parent_item')
$("select[name=parent]").val(val);
if (key == 'id_layout_linked')
$("select[name=map_linked]").val(val);
if (key == 'width_percentile')
$("input[name=width_percentile]").val(val);
if (key == 'max_percentile')
$("input[name=max_percentile]").val(val);
if (key == 'width_module_graph')
$("input[name=width_module_graph]").val(val);
if (key == 'height_module_graph')
$("input[name=height_module_graph]").val(val);
if (key == 'type_percentile') {
if (val == 'percentile') {
@ -597,6 +619,17 @@ function loadFieldsFromDB(item) {
$("#id_server_name").val(val);
}
}
if (key == 'width_box')
$("input[name='width_box']").val(val);
if (key == 'height_box')
$("input[name='height_box']").val(val);
if (key == 'border_color')
$("input[name='border_color']").val(val);
if (key == 'border_width')
$("input[name='border_width']").val(val);
if (key == 'fill_color')
$("input[name='fill_color']").val(val);
});
if (data.type == 1) {
@ -757,6 +790,18 @@ function hiddenFields(item) {
$("#custom_graph_row").css('display', 'none');
$("#custom_graph_row." + item).css('display', '');
$("#box_size_row").css('display', 'none');
$("#box_size_row." + item).css('display', '');
$("#border_color_row").css('display', 'none');
$("#border_color_row." + item).css('display', '');
$("#border_width_row").css('display', 'none');
$("#border_width_row." + item).css('display', '');
$("#fill_color_row").css('display', 'none');
$("#fill_color_row." + item).css('display', '');
$("input[name='radio_choice']").trigger('change');
if (typeof(enterprise_hiddenFields) == 'function') {
@ -791,6 +836,13 @@ function cleanFields(item) {
$("select[name=map_linked]").val('');
$("input[name=width_module_graph]").val(300);
$("input[name=height_module_graph]").val(180);
$("input[name='width_box']").val(300);
$("input[name='height_box']").val(180);
$("input[name='border_color']").val('#000000');
$("input[name='border_width']").val(3);
$("input[name='fill_color']").val('#ffffff');
$("#preview").empty();
@ -1138,6 +1190,8 @@ function createItem(type, values, id_data) {
}
switch (type) {
case 'box_item':
break;
case 'group_item':
case 'static_graph':
if ((values['width'] == 0) && (values['height'] == 0)) {
@ -1694,10 +1748,12 @@ function activeToolboxButton(id, active) {
}
if (active) {
$("input." + id + "[name=button_toolbox2]").removeAttr('disabled');
$("input." + id + "[name=button_toolbox2]")
.removeAttr('disabled');
}
else {
$("input." + id + "[name=button_toolbox2]").attr('disabled', true);
$("input." + id + "[name=button_toolbox2]")
.attr('disabled', true);
}
}
@ -1734,6 +1790,15 @@ function eventsItems(drag) {
unselectAll();
$(divParent).css('border', '2px blue dotted');
if ($(divParent).hasClass('box_item')) {
creationItem = null;
selectedItem = 'box_item';
idItem = $(divParent).attr('id');
activeToolboxButton('copy_item', true);
activeToolboxButton('edit_item', true);
activeToolboxButton('delete_item', true);
activeToolboxButton('show_grid', false);
}
if ($(divParent).hasClass('static_graph')) {
creationItem = null;
selectedItem = 'static_graph';
@ -1824,6 +1889,9 @@ function eventsItems(drag) {
$(event.target).css('border', '2px blue dotted');
selectedItem = null;
if ($(event.target).hasClass('box_item')) {
selectedItem = 'box_item';
}
if ($(event.target).hasClass('static_graph')) {
selectedItem = 'static_graph';
}
@ -1996,6 +2064,10 @@ function click_button_toolbox(id) {
toolbuttonActive = creationItem = 'group_item';
toggle_item_palette();
break;
case 'box_item':
toolbuttonActive = creationItem = 'box_item';
toggle_item_palette();
break;

View File

@ -71,6 +71,13 @@ $id_agent = get_parameter('id_agent', null);
$id_metaconsole = get_parameter('id_metaconsole', null);
$id_group = (int)get_parameter('id_group', 0);
$id_custom_graph = get_parameter('id_custom_graph', null);
$height_module_graph = get_parameter('id_custom_graph', null);
$width_module_graph = get_parameter('id_custom_graph', null);
$border_width = get_parameter('border_width', 0);
$border_color = get_parameter('border_color', '');
$fill_color = get_parameter('fill_color', '');
$width_box = get_parameter('width_box', 0);
$height_box = get_parameter('height_box', 0);
$get_element_status = get_parameter('get_element_status', 0);
$get_image_path_status = get_parameter('get_image_path_status', 0);
@ -612,6 +619,15 @@ switch ($action) {
$values['id_custom_graph'] = $id_custom_graph;
switch ($type) {
case 'box_item':
$values['type'] = BOX_ITEM;
$values['border_width'] = $border_width;
$values['border_color'] = $border_color;
$values['fill_color'] = $fill_color;
$values['period'] = $period;
$values['width'] = $width_box;
$values['height'] = $height_box;
break;
case 'module_graph':
$values['type'] = MODULE_GRAPH;
$values['height'] = $height_module_graph;

View File

@ -190,6 +190,7 @@ define('SIMPLE_VALUE_AVG', 8);
define('PERCENTILE_BUBBLE', 9);
define('SERVICE', 10); //Enterprise Item.
define('GROUP_ITEM', 11);
define('BOX_ITEM', 12);
//Some styles
define('MIN_WIDTH', 300);
define('MIN_HEIGHT', 120);

View File

@ -65,6 +65,9 @@ function visual_map_print_item($mode = "read", $layoutData,
$id_module = $layoutData['id_agente_modulo'];
$type = $layoutData['type'];
$period = $layoutData['period'];
$border_width = $layoutData['border_width'];
$border_color = $layoutData['border_color'];
$fill_color = $layoutData['fill_color'];
$sizeStyle = '';
$borderStyle = '';
@ -553,7 +556,9 @@ function visual_map_print_item($mode = "read", $layoutData,
}
}
$z_index = 1;
// + 1 for to avoid the box and lines items are on the top of
// others
$z_index = 1 + 1;
switch ($type) {
case STATIC_GRAPH:
@ -573,13 +578,13 @@ function visual_map_print_item($mode = "read", $layoutData,
}
if ($status == VISUAL_MAP_STATUS_CRITICAL_BAD)
$z_index = 3;
$z_index = 3 + 1;
elseif ($status == VISUAL_MAP_STATUS_WARNING)
$z_index = 2;
$z_index = 2 + 1;
elseif ($status == VISUAL_MAP_STATUS_CRITICAL_ALERT)
$z_index = 4;
$z_index = 4 + 1;
else
$z_index = 1;
$z_index = 1 + 1;
break;
case ICON:
if ($layoutData['image'] != null) {
@ -592,7 +597,7 @@ function visual_map_print_item($mode = "read", $layoutData,
$imageSize = 'width="' . $width . '" height="' . $height . '"';
}
$z_index = 4;
$z_index = 4 + 1;
break;
case PERCENTILE_BAR:
case PERCENTILE_BUBBLE:
@ -669,7 +674,10 @@ function visual_map_print_item($mode = "read", $layoutData,
$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
break;
case LABEL:
$z_index = 4;
$z_index = 4 + 1;
break;
case BOX_ITEM:
$z_index = 1;
break;
}
@ -701,6 +709,9 @@ function visual_map_print_item($mode = "read", $layoutData,
case ICON:
$class .= "icon";
break;
case BOX_ITEM:
$class .= "box_item";
break;
default:
if (!empty($element_enterprise)) {
$class .= $element_enterprise['class'];
@ -723,6 +734,16 @@ function visual_map_print_item($mode = "read", $layoutData,
}
switch ($type) {
case BOX_ITEM:
$style = "";
$style .= "width: " . $width . "px; ";
$style .= "height: " . $height . "px; ";
$style .= "border-style: solid; ";
$style .= "border-width: " . $border_width . "px; ";
$style .= "border-color: " . $border_color . "; ";
$style .= "background-color: " . $fill_color . "; ";
echo "<div style='" . $style . "'></div>";
break;
case STATIC_GRAPH:
case GROUP_ITEM:
if ($layoutData['image'] != null) {

View File

@ -57,7 +57,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
'simple_value' => __('Simple value'),
'label' => __('Label'),
'icon' => __('Icon'),
'group_item' => __('Group'));
'group_item' => __('Group'),
'box_item' => __('Box'));
if (enterprise_installed()) {
enterprise_visual_map_editor_add_title_palette($titles);
@ -75,6 +76,52 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
<?php
$form_items = array();
$form_items['box_size_row'] = array();
$form_items['box_size_row']['items'] = array('box_item');
$form_items['box_size_row']['html'] = '<td align="left">' . __('Size') . '</td>
<td align="left">' .
html_print_input_text('width_box', 300, '', 3, 5, true) .
' X ' .
html_print_input_text('height_box', 180, '', 3, 5, true) .
'</td>';
$form_items['border_color_row'] = array();
$form_items['border_color_row']['items'] = array('box_item');
$form_items['border_color_row']['html'] =
'<td align="left" valign="top" style="">' . __('Border color') . '</td>' .
'<td align="left" style="">' .
html_print_input_text_extended ('border_color',
'#000000', 'text-border_color', '', 7, 7, false, '',
'class="border_color"', true) .
'</td>';
$form_items['border_width_row'] = array();
$form_items['border_width_row']['items'] = array('box_item');
$form_items['border_width_row']['html'] = '<td align="left">' . __('Border width') . '</td>
<td align="left">' .
html_print_input_text('border_width', 3, '', 3, 5, true) .
'</td>';
$form_items['fill_color_row'] = array();
$form_items['fill_color_row']['items'] = array('box_item');
$form_items['fill_color_row']['html'] =
'<td align="left" valign="top" style="">' . __('Fill color') . '</td>' .
'<td align="left" style="">' .
html_print_input_text_extended ('fill_color', '#ffffff',
'text-fill_color', '', 7, 7, false, '',
'class="fill_color"', true) .
'</td>';
$form_items['module_graph_size_row'] = array();
$form_items['module_graph_size_row']['items'] = array('module_graph', 'datos');
$form_items['module_graph_size_row']['html'] = '<td align="left">' . __('Size') . '</td>
<td align="left">' .
html_print_input_text('width_module_graph', 300, '', 3, 5, true) .
' X ' .
html_print_input_text('height_module_graph', 180, '', 3, 5, true) .
'</td>';
$form_items['label_row'] = array();
$form_items['label_row']['items'] = array('label',
@ -358,7 +405,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items_advance['position_row'] = array();
$form_items_advance['position_row']['items'] = array('static_graph',
'percentile_bar', 'percentile_item', 'module_graph',
'simple_value', 'label', 'icon', 'datos');
'simple_value', 'label', 'icon', 'datos', 'box_item');
$form_items_advance['position_row']['html'] = '
<td align="left">' . __('Position') . '</td>
<td align="left">(' . html_print_input_text('left', '0', '', 3, 5, true) .
@ -420,6 +467,18 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
<?php
//------------------------------------------------------------------------------
echo '</div>';
ui_require_css_file ('color-picker');
ui_require_jquery_file ('colorpicker');
?>
<script type="text/javascript">
$(document).ready (function () {
$(".border_color").attachColorPicker();
$(".fill_color").attachColorPicker();
});
</script>
<?php
}
function visual_map_editor_print_toolbox() {
@ -434,6 +493,7 @@ function visual_map_editor_print_toolbox() {
visual_map_print_button_editor('label', __('Label'), 'left', false, 'label_min', true);
visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
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);
enterprise_hook("enterprise_visual_map_editor_print_toolbox");
@ -443,7 +503,7 @@ function visual_map_editor_print_toolbox() {
visual_map_print_button_editor('show_grid', __('Show grid'), 'right', true, 'grid_min', true);
visual_map_print_button_editor('edit_item', __('Update item'), 'right', true, 'config_min', true);
visual_map_print_button_editor('delete_item', __('Delete item'), 'right', true, 'delete_min', true);
visual_map_print_button_editor('copy_item', __('Copy item'), 'right', true, 'delete_min', true);
visual_map_print_button_editor('copy_item', __('Copy item'), 'right', true, 'copy_item', true);
echo '</div>';
echo '</div>';
echo '<div style="clear: right; margin-bottom: 10px;"></div>';

View File

@ -758,6 +758,12 @@ input.icon_min {
input.icon_min[disabled] {
background: #fefefe url(../../images/photo.disabled.png) no-repeat center !important;
}
input.box_item {
background: #fefefe url(../../images/photo.png) no-repeat center !important;
}
input.box_item[disabled] {
background: #fefefe url(../../images/photo.disabled.png) no-repeat center !important;
}
input.copy_item {
background: #fefefe url(../../images/copy_visualmap.png) no-repeat center !important;
}