Improve TreeView

This commit is contained in:
Jose Gonzalez 2023-01-26 13:25:24 +01:00
parent 6f4b55e076
commit 17c0e78d06
13 changed files with 392 additions and 235 deletions

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#95A3BF;}
.st1{fill:#FFFFFF;}
</style>
<g>
<circle class="st0" cx="10" cy="10" r="10"/>
</g>
<path class="st1" d="M15.6,11.4H4.4C3.6,11.4,3,10.8,3,10v0c0-0.8,0.6-1.4,1.4-1.4h11.1c0.8,0,1.4,0.6,1.4,1.4v0
C17,10.8,16.4,11.4,15.6,11.4z"/>
</svg>

After

Width:  |  Height:  |  Size: 639 B

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#95A3BF;}
.st1{fill:#FFFFFF;}
</style>
<g>
<circle class="st0" cx="10" cy="10" r="10"/>
</g>
<path class="st1" d="M15.6,11.4H4.4C3.6,11.4,3,10.8,3,10v0c0-0.8,0.6-1.4,1.4-1.4h11.1c0.8,0,1.4,0.6,1.4,1.4v0
C17,10.8,16.4,11.4,15.6,11.4z"/>
<path class="st1" d="M8.6,15.6V4.4C8.6,3.6,9.2,3,10,3h0c0.8,0,1.4,0.6,1.4,1.4v11.1c0,0.8-0.6,1.4-1.4,1.4h0
C9.2,17,8.6,16.4,8.6,15.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 779 B

View File

@ -669,6 +669,7 @@ class Tree
} }
$module['statusImageHTML'] = ui_print_status_image($statusType, htmlspecialchars($statusTitle), true); $module['statusImageHTML'] = ui_print_status_image($statusType, htmlspecialchars($statusTitle), true);
$module['statusImageHTML'] = 'cipote';
// HTML of the server type image. // HTML of the server type image.
$module['serverTypeHTML'] = ui_print_servertype_icon((int) $module['server_type']); $module['serverTypeHTML'] = ui_print_servertype_icon((int) $module['server_type']);

View File

@ -3004,7 +3004,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_AGENT_NO_MONITORS_BALL, STATUS_AGENT_NO_MONITORS_BALL,
__('No Monitors'), __('No Monitors'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true
@ -3016,7 +3019,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_ALERT_FIRED_BALL, STATUS_ALERT_FIRED_BALL,
__('Alert fired on agent'), __('Alert fired on agent'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true
@ -3028,7 +3034,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_AGENT_CRITICAL_BALL, STATUS_AGENT_CRITICAL_BALL,
__('At least one module in CRITICAL status'), __('At least one module in CRITICAL status'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true
@ -3038,7 +3047,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_AGENT_WARNING_BALL, STATUS_AGENT_WARNING_BALL,
__('At least one module in WARNING status'), __('At least one module in WARNING status'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true
@ -3048,7 +3060,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_AGENT_DOWN_BALL, STATUS_AGENT_DOWN_BALL,
__('At least one module is in UKNOWN status'), __('At least one module is in UKNOWN status'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true
@ -3058,7 +3073,10 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
STATUS_AGENT_OK_BALL, STATUS_AGENT_OK_BALL,
__('All Monitors OK'), __('All Monitors OK'),
true, true,
false, [
'is_tree_view',
true,
],
false, false,
// Use CSS shape instead of image. // Use CSS shape instead of image.
true true

View File

@ -55,29 +55,19 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
$table = new StdClass(); $table = new StdClass();
$table->width = '100%'; $table->width = '100%';
$table->class = 'floating_form'; $table->class = 'floating_form margin-top-10';
$table->id = 'tree_view_module_data'; $table->id = 'tree_view_module_data';
$table->style = []; $table->style = [];
$table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;'; $table->style['title'] = 'height: 32px; width: 30%; padding-right: 5px; text-align: end;';
$table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';'; $table->style['data'] = 'height: 32px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
$table->data = []; $table->data = [];
// Module name. // Module name.
if ($module['disabled']) { $cellName = ((bool) $module['disabled'] === true) ? '<em>'.$module['nombre'].'</em>'.ui_print_help_tip(__('Disabled'), true) : $module['nombre'];
$cellName = '<em>'.ui_print_truncate_text($module['nombre'], GENERIC_SIZE_TEXT, true, true, true, '[&hellip;]', 'text-transform: uppercase;').ui_print_help_tip(__('Disabled'), true).'<em>';
} else {
$cellName = ui_print_truncate_text($module['nombre'], GENERIC_SIZE_TEXT, true, true, true, '[&hellip;]', 'text-transform: uppercase;');
}
$row = []; $row = [];
$row['title'] = __('Name'); $row['title'] = __('Name');
$row['data'] = html_print_anchor( $row['data'] = $cellName;
[
'href' => $console_url.'index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente='.$module['id_agente'].'&tab=module&edit_module=1&id_agent_module='.$module['id_agente_modulo'].$url_hash,
'content' => $cellName,
],
true
);
$table->data['name'] = $row; $table->data['name'] = $row;
// Interval. // Interval.
@ -126,14 +116,7 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
$row = []; $row = [];
$row['title'] = __('Description'); $row['title'] = __('Description');
$row['data'] = ui_print_truncate_text( $row['data'] = $module['descripcion'];
$module['descripcion'],
'description',
true,
true,
true,
'[&hellip;]'
);
$table->data['description'] = $row; $table->data['description'] = $row;
// Tags. // Tags.
@ -321,6 +304,18 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
$row['data'] = $time_elapsed; $row['data'] = $time_elapsed;
$table->data['tags'] = $row; $table->data['tags'] = $row;
// Edit module button.
$row = [];
$row['title'] = html_print_button(
__('Edit module'),
'edit_module_link',
false,
'window.location.assign(\''.$console_url.'index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente='.$module['id_agente'].'&tab=module&edit_module=1&id_agent_module='.$module['id_agente_modulo'].$url_hash.'\')',
[ 'mode' => 'link' ],
true
);
$table->data['edit_button'] = $row;
$table->colspan['edit_button'] = 2;
// Title. // Title.
echo '<span style="position: relative; top: 12px; left: 12px;" class="subsection_header_title">'.__('Module information').'</span>'; echo '<span style="position: relative; top: 12px; left: 12px;" class="subsection_header_title">'.__('Module information').'</span>';
// End of table. // End of table.
@ -570,19 +565,15 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
$table->class = 'floating_form'; $table->class = 'floating_form';
$table->id = 'tree_view_agent_detail'; $table->id = 'tree_view_agent_detail';
$table->style = []; $table->style = [];
$table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;'; $table->style['title'] = 'height: 32px; width: 30%; padding-right: 5px; text-align: end;';
$table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';'; $table->style['data'] = 'height: 32px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
$table->head = []; $table->head = [];
$table->data = []; $table->data = [];
// Agent name. // Agent name.
if ($agent['disabled']) { $cellName = ((bool) $agent['disabled'] === true) ? '<em>' : '';
$cellName = '<em>';
} else {
$cellName = '';
}
if (is_metaconsole()) { if (is_metaconsole() === true) {
$pwd = $server_data['auth_token']; $pwd = $server_data['auth_token'];
// Create HASH login info. // Create HASH login info.
$user = $config['id_user']; $user = $config['id_user'];
@ -592,28 +583,18 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
$hashdata = $user.$pwd_deserialiced['auth_token']; $hashdata = $user.$pwd_deserialiced['auth_token'];
$hashdata = md5($hashdata); $hashdata = md5($hashdata);
$url = $server_data['server_url'].'/index.php?'.'sec=estado&'.'sec2=operation/agentes/ver_agente&'.'id_agente='.$agent['id_agente']; if ((bool) $grants_on_node === true && (bool) $user_access_node !== false) {
$urlAgent = 'sendHash(\''.$server_data['server_url'].'/index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente='.$agent['id_agente'].'\')';
if ($grants_on_node && (bool) $user_access_node !== false) {
$cellName .= html_print_anchor(
[
'onClick' => 'sendHash(\''.$url.'\')',
'content' => '<span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span>',
],
true
);
} else { } else {
$cellName .= '<b><span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span></b>'; $urlAgent = '';
} }
} else { } else {
$url = ui_get_full_url( $urlAgent = 'window.location.assign(\'index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;id_agente='.$agent['id_agente'].'\')';
'index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;id_agente='.$agent['id_agente']
);
$cellName .= '<a href="'.$url.'">';
$cellName .= '<b><span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span></b></a>';
} }
if ($agent['disabled']) { $cellName = $agent['alias'];
if ((bool) $agent['disabled'] === true) {
$cellName .= ui_print_help_tip(__('Disabled'), true).'</em>'; $cellName .= ui_print_help_tip(__('Disabled'), true).'</em>';
} }
@ -640,6 +621,10 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
); );
} }
if (empty($address) === true) {
$address = __('N/A');
}
$row = []; $row = [];
$row['title'] = __('IP Address'); $row['title'] = __('IP Address');
$row['data'] = $address; $row['data'] = $address;
@ -660,7 +645,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
// Last contact. // Last contact.
$last_contact = ui_print_timestamp($agent['ultimo_contacto'], true, ['class' => 'font_11']); $last_contact = ui_print_timestamp($agent['ultimo_contacto'], true, ['class' => 'font_11']);
if ($agent['ultimo_contacto_remoto'] == '01-01-1970 00:00:00') { if ($agent['ultimo_contacto_remoto'] === '01-01-1970 00:00:00') {
$last_remote_contact = __('Never'); $last_remote_contact = __('Never');
} else { } else {
$last_remote_contact = date_w_fixed_tz( $last_remote_contact = date_w_fixed_tz(
@ -669,9 +654,14 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
} }
$row = []; $row = [];
$row['title'] = __('Last contact').' / '.__('Remote'); $row['title'] = __('Last contact');
$row['data'] = "$last_contact / $last_remote_contact"; $row['data'] = $last_contact;
$table->data['contact'] = $row; $table->data['last_contact'] = $row;
$row = [];
$row['title'] = __('Remote contact');
$row['data'] = $last_remote_contact;
$table->data['remote_contact'] = $row;
// Next contact (agent). // Next contact (agent).
$progress = agents_get_next_contact($id_agente); $progress = agents_get_next_contact($id_agente);
@ -681,12 +671,28 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
$row['data'] = ui_progress( $row['data'] = ui_progress(
$progress, $progress,
'100%', '100%',
'1.5', '1.2',
'#82b92e', '#ececec',
true true,
'',
false,
'line-height: 13px;'
); );
$table->data['next_contact'] = $row; $table->data['next_contact'] = $row;
// Edit agent button.
$row = [];
$row['title'] = html_print_button(
__('Edit agent'),
'edit_agent_link',
false,
$urlAgent,
[ 'mode' => 'link' ],
true
);
$table->data['edit_button'] = $row;
$table->colspan['edit_button'] = 2;
// End of table. // End of table.
$agent_table = html_print_table($table, true); $agent_table = html_print_table($table, true);
/* /*
@ -711,7 +717,27 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
} }
*/ */
// Print agent data toggle. // Print agent data toggle.
ui_toggle($agent_table, '<span class="subsection_header_title">'.__('Agent data').'</span>', '', '', false, false, '', 'white-box-content', 'white_table_graph'); ui_toggle(
$agent_table,
'<span class="subsection_header_title">'.__('Agent data').'</span>',
'',
'',
false,
false,
'',
'white-box-content',
'white_table_graph',
'',
'',
false,
false,
false,
'',
'',
null,
null,
true
);
// Advanced data. // Advanced data.
$table = new StdClass(); $table = new StdClass();
@ -719,8 +745,8 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
$table->class = 'floating_form'; $table->class = 'floating_form';
$table->id = 'tree_view_agent_advanced'; $table->id = 'tree_view_agent_advanced';
$table->style = []; $table->style = [];
$table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;'; $table->style['title'] = 'height: 32px; width: 30%; padding-right: 5px; text-align: end;';
$table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';'; $table->style['data'] = 'height: 32px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
$table->head = []; $table->head = [];
$table->data = []; $table->data = [];
@ -803,8 +829,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
// End of table advanced. // End of table advanced.
$table_advanced = html_print_table($table, true); $table_advanced = html_print_table($table, true);
$table_advanced .= '<br>'; echo '<hr>';
ui_toggle( ui_toggle(
$table_advanced, $table_advanced,
'<span class="subsection_header_title">'.__('Advanced information').'</span>', '<span class="subsection_header_title">'.__('Advanced information').'</span>',
@ -814,7 +839,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
false, false,
'', '',
'white-box-content', 'white-box-content',
'white_table_graph' 'white_table_graph margin-top-20'
); );
if ($config['agentaccess']) { if ($config['agentaccess']) {
@ -825,7 +850,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
false false
); );
$access_graph .= '</div>'; $access_graph .= '</div>';
echo '<hr>';
ui_toggle( ui_toggle(
$access_graph, $access_graph,
'<span class="subsection_header_title">'.__('Agent access rate (24h)').'</span>', '<span class="subsection_header_title">'.__('Agent access rate (24h)').'</span>',
@ -835,7 +860,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
false, false,
'', '',
'white-box-content', 'white-box-content',
'white_table_graph' 'white_table_graph margin-top-20'
); );
} }
@ -853,7 +878,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
$server_id $server_id
); );
$events_graph .= '</div><br>'; $events_graph .= '</div><br>';
echo '<hr>';
ui_toggle( ui_toggle(
$events_graph, $events_graph,
'<span class="subsection_header_title">'.__('Events (24h)').'</span>', '<span class="subsection_header_title">'.__('Events (24h)').'</span>',
@ -863,7 +888,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
false, false,
'', '',
'white-box-content', 'white-box-content',
'white_table_graph' 'white_table_graph margin-top-20'
); );
// Table network interfaces // Table network interfaces

View File

@ -2813,6 +2813,7 @@ function ui_print_status_image(
if ($image_with_css === true) { if ($image_with_css === true) {
$shape_status = get_shape_status_set($type); $shape_status = get_shape_status_set($type);
$shape_status['is_tree_view'] = true;
return ui_print_status_sets($type, $title, $return, $shape_status, $extra_info); return ui_print_status_sets($type, $title, $return, $shape_status, $extra_info);
} else { } else {
$imagepath .= '/'.$type; $imagepath .= '/'.$type;
@ -2970,7 +2971,9 @@ function ui_print_status_sets(
$options['style'] .= ' background: '.modules_get_color_status($status).';'; $options['style'] .= ' background: '.modules_get_color_status($status).';';
} }
if (isset($options['class']) === true) { if (isset($options['is_tree_view']) === true) {
$options['class'] = 'item_status_tree_view';
} else if (isset($options['class']) === true) {
$options['class'] = $options['class']; $options['class'] = $options['class'];
} }
@ -2992,6 +2995,16 @@ function ui_print_status_sets(
$output .= '>&nbsp;</div>'; $output .= '>&nbsp;</div>';
if (isset($options['is_tree_view']) === true) {
$output = html_print_div(
[
'class' => '',
'content' => $output,
],
true
);
}
if ($return === false) { if ($return === false) {
echo $output; echo $output;
} else { } else {
@ -3004,13 +3017,13 @@ function ui_print_status_sets(
* Generates a progress bar CSS based. * Generates a progress bar CSS based.
* Requires css progress.css * Requires css progress.css
* *
* @param integer $progress Progress. * @param integer $progress Progress.
* @param string $width Width. * @param string $width Width.
* @param integer $height Height in 'em'. * @param integer $height Height in 'em'.
* @param string $color Color. * @param string $color Color.
* @param boolean $return Return or paint (if false). * @param boolean $return Return or paint (if false).
* @param boolean $text Text to be displayed,by default progress %. * @param boolean $text Text to be displayed,by default progress %.
* @param array $ajax Ajax: [ 'page' => 'page', 'data' => 'data' ] Sample: * @param array $ajax Ajax: [ 'page' => 'page', 'data' => 'data' ] Sample:
* [ * [
* 'page' => 'operation/agentes/ver_agente', Target page. * 'page' => 'operation/agentes/ver_agente', Target page.
* 'interval' => 100 / $agent["intervalo"], Ask every interval seconds. * 'interval' => 100 / $agent["intervalo"], Ask every interval seconds.
@ -3021,6 +3034,8 @@ function ui_print_status_sets(
* ], * ],
* ]. * ].
* *
* @param string $otherStyles Raw styles for control.
*
* @return string HTML code. * @return string HTML code.
*/ */
function ui_progress( function ui_progress(
@ -3030,7 +3045,8 @@ function ui_progress(
$color='#82b92e', $color='#82b92e',
$return=true, $return=true,
$text='', $text='',
$ajax=false $ajax=false,
$otherStyles=''
) { ) {
if (!$progress) { if (!$progress) {
$progress = 0; $progress = 0;
@ -3052,7 +3068,7 @@ function ui_progress(
ui_require_css_file('progress'); ui_require_css_file('progress');
$output = '<span id="'.$id.'" class="progress_main" data-label="'.$text; $output = '<span id="'.$id.'" class="progress_main" data-label="'.$text;
$output .= '" style="width: '.$width.'; height: '.$height.'em; border-color: '.$color.'">'; $output .= '" style="width: '.$width.'; height: '.$height.'em; border-color: '.$color.'; '.$otherStyles.'">';
$output .= '<span id="'.$id.'_progress" class="progress" style="width: '.$progress.'%; background: '.$color.'"></span>'; $output .= '<span id="'.$id.'_progress" class="progress" style="width: '.$progress.'%; background: '.$color.'"></span>';
$output .= '</span>'; $output .= '</span>';
@ -4100,6 +4116,7 @@ function ui_print_event_priority(
* @param string $toggl_attr Main box extra attributes. * @param string $toggl_attr Main box extra attributes.
* @param boolean|null $switch_on Switch enabled disabled or depending on hidden_Default. * @param boolean|null $switch_on Switch enabled disabled or depending on hidden_Default.
* @param string|null $switch_name Use custom switch input name or generate one. * @param string|null $switch_name Use custom switch input name or generate one.
* @param boolean|null $disableToggle If True, the toggle is disabled.
* *
* @return string HTML. * @return string HTML.
*/ */
@ -4121,23 +4138,33 @@ function ui_toggle(
$attributes_switch='', $attributes_switch='',
$toggl_attr='', $toggl_attr='',
$switch_on=null, $switch_on=null,
$switch_name=null $switch_name=null,
$disableToggle=false
) { ) {
// Generate unique Id. // Generate unique Id.
$uniqid = uniqid(''); $uniqid = uniqid('');
$image_a = html_print_image( if (empty($img_a) === false) {
$img_a, $image_a = html_print_image(
true, $img_a,
[ 'style' => 'object-fit: contain;' ], true,
true [ 'style' => 'object-fit: contain;' ],
); true
$image_b = html_print_image( );
$img_b, } else {
true, $image_a = '';
[ 'style' => 'object-fit: contain;' ], }
true
); if (empty($img_b) === false) {
$image_b = html_print_image(
$img_b,
true,
[ 'style' => 'object-fit: contain;' ],
true
);
} else {
$image_b = '';
}
// Options. // Options.
$style = 'overflow:hidden;width: -webkit-fill-available;width: -moz-fill-available;'; $style = 'overflow:hidden;width: -webkit-fill-available;width: -moz-fill-available;';
@ -4165,7 +4192,7 @@ function ui_toggle(
// Link to toggle. // Link to toggle.
$output = '<div class="'.$main_class.'" id="'.$id.'" '.$toggl_attr.'>'; $output = '<div class="'.$main_class.'" id="'.$id.'" '.$toggl_attr.'>';
$output .= '<div class="'.$header_class.'" style="cursor: pointer;" id="tgl_ctrl_'.$uniqid.'">'; $output .= '<div class="'.$header_class.'" '.(($disableToggle === false) ? 'style="cursor: pointer;" ' : '').' id="tgl_ctrl_'.$uniqid.'">';
if ($reverseImg === false) { if ($reverseImg === false) {
if ($switch === true) { if ($switch === true) {
if (empty($switch_name) === true) { if (empty($switch_name) === true) {
@ -4241,45 +4268,48 @@ function ui_toggle(
$output .= '</div>'; $output .= '</div>';
$output .= '</div>'; $output .= '</div>';
// JQuery Toggle. if ($disableToggle === false) {
$output .= '<script type="text/javascript">'."\n"; // JQuery Toggle.
$output .= ' var hide_tgl_ctrl_'.$uniqid.' = '.(int) $hidden_default.";\n"; $output .= '<script type="text/javascript">'."\n";
$output .= ' var is_metaconsole = '.(int) is_metaconsole().";\n"; $output .= ' var hide_tgl_ctrl_'.$uniqid.' = '.(int) $hidden_default.";\n";
$output .= ' /* <![CDATA[ */'."\n"; $output .= ' var is_metaconsole = '.(int) is_metaconsole().";\n";
$output .= " $(document).ready (function () {\n"; $output .= ' /* <![CDATA[ */'."\n";
$output .= " $('#checkbox-".$switch_name."').click(function() {\n"; $output .= " $(document).ready (function () {\n";
$output .= ' if (is_metaconsole == 0) {'; $output .= " $('#checkbox-".$switch_name."').click(function() {\n";
$output .= ' if (hide_tgl_ctrl_'.$uniqid.") {\n"; $output .= ' if (is_metaconsole == 0) {';
$output .= ' hide_tgl_ctrl_'.$uniqid." = 0;\n"; $output .= ' if (hide_tgl_ctrl_'.$uniqid.") {\n";
$output .= " $('#tgl_div_".$uniqid."').css('height', 'auto');\n"; $output .= ' hide_tgl_ctrl_'.$uniqid." = 0;\n";
$output .= " $('#tgl_div_".$uniqid."').css('position', 'relative');\n"; $output .= " $('#tgl_div_".$uniqid."').css('height', 'auto');\n";
$output .= " }\n"; $output .= " $('#tgl_div_".$uniqid."').css('position', 'relative');\n";
$output .= " else {\n"; $output .= " }\n";
$output .= ' hide_tgl_ctrl_'.$uniqid." = 1;\n"; $output .= " else {\n";
$output .= " $('#tgl_div_".$uniqid."').css('height', 0);\n"; $output .= ' hide_tgl_ctrl_'.$uniqid." = 1;\n";
$output .= " $('#tgl_div_".$uniqid."').css('position', 'absolute');\n"; $output .= " $('#tgl_div_".$uniqid."').css('height', 0);\n";
$output .= " }\n"; $output .= " $('#tgl_div_".$uniqid."').css('position', 'absolute');\n";
$output .= " }\n"; $output .= " }\n";
$output .= " });\n"; $output .= " }\n";
$output .= " $('#tgl_ctrl_".$uniqid."').click(function() {\n"; $output .= " });\n";
$output .= ' if (hide_tgl_ctrl_'.$uniqid.") {\n"; $output .= " $('#tgl_ctrl_".$uniqid."').click(function() {\n";
$output .= ' hide_tgl_ctrl_'.$uniqid." = 0;\n"; $output .= ' if (hide_tgl_ctrl_'.$uniqid.") {\n";
$output .= " $('#tgl_div_".$uniqid."').css('height', 'auto');\n"; $output .= ' hide_tgl_ctrl_'.$uniqid." = 0;\n";
$output .= " $('#tgl_div_".$uniqid."').css('position', 'relative');\n"; $output .= " $('#tgl_div_".$uniqid."').css('height', 'auto');\n";
$output .= " $('#image_".$uniqid."').attr({src: '".$image_a."'});\n"; $output .= " $('#tgl_div_".$uniqid."').css('position', 'relative');\n";
$output .= " $('#checkbox-".$switch_name."').prop('checked', true);\n"; $output .= " $('#image_".$uniqid."').attr({src: '".$image_a."'});\n";
$output .= " }\n"; $output .= " $('#checkbox-".$switch_name."').prop('checked', true);\n";
$output .= " else {\n"; $output .= " }\n";
$output .= ' hide_tgl_ctrl_'.$uniqid." = 1;\n"; $output .= " else {\n";
$output .= " $('#tgl_div_".$uniqid."').css('height', 0);\n"; $output .= ' hide_tgl_ctrl_'.$uniqid." = 1;\n";
$output .= " $('#tgl_div_".$uniqid."').css('position', 'absolute');\n"; $output .= " $('#tgl_div_".$uniqid."').css('height', 0);\n";
$output .= " $('#image_".$uniqid."').attr({src: '".$image_b."'});\n"; $output .= " $('#tgl_div_".$uniqid."').css('position', 'absolute');\n";
$output .= " $('#checkbox-".$switch_name."').prop('checked', false);\n"; $output .= " $('#image_".$uniqid."').attr({src: '".$image_b."'});\n";
$output .= " }\n"; $output .= " $('#checkbox-".$switch_name."').prop('checked', false);\n";
$output .= " });\n"; $output .= " }\n";
$output .= " });\n"; $output .= " });\n";
$output .= '/* ]]> */'; $output .= " });\n";
$output .= '</script>'; $output .= '/* ]]> */';
$output .= '</script>';
}
$output .= '</div>'; $output .= '</div>';
if (!$return) { if (!$return) {

View File

@ -101,13 +101,17 @@
self._renderHead = function(head) { self._renderHead = function(head) {
head = head || self._head; head = head || self._head;
var headBody = $("<div></div>");
headBody.addClass("fixed-bottom-box-head-body");
var headClose = $("<span></span>"); var headClose = $("<span></span>");
headClose.addClass("fixed-bottom-box-head-close").click(function(event) { headClose.addClass("fixed-bottom-box-head-close").click(function(event) {
self.close(); self.close();
}); });
self._box.head = $("<div></div>"); self._box.head = $("<div></div>");
self._box.head.addClass("fixed-bottom-box-head").append(headClose); self._box.head
.addClass("fixed-bottom-box-head")
.append(headClose, headBody);
self._box.append(self._box.head); self._box.append(self._box.head);
self.emit("head-rendered", { self.emit("head-rendered", {

View File

@ -239,8 +239,10 @@ var TreeController = {
} }
if (type == "services") { if (type == "services") {
var $counters = $("<div></div>"); var $counters = $("<span></span>");
$counters.addClass("tree-node-counters"); $counters
.addClass("tree-node-counters")
.addClass("tree-node-service-counters");
if ( if (
counters.total_services + counters.total_services +
@ -648,11 +650,11 @@ var TreeController = {
element.icon.length > 0 element.icon.length > 0
) { ) {
$content.append( $content.append(
'<div class="node-icon"><img src="' + '<div class="node-icon"><div class="node-icon-container"><img src="' +
(controller.baseURL.length > 0 ? controller.baseURL : "") + (controller.baseURL.length > 0 ? controller.baseURL : "") +
"images/" + "images/" +
element.icon + element.icon +
'" /></div>' '" /></div></div>'
); );
} else if ( } else if (
typeof element.iconHTML != "undefined" && typeof element.iconHTML != "undefined" &&
@ -728,8 +730,11 @@ var TreeController = {
typeof element.statusImageHTML != "undefined" && typeof element.statusImageHTML != "undefined" &&
element.statusImageHTML.length > 0 element.statusImageHTML.length > 0
) { ) {
console.log("es aqui pollito agente");
var $statusImage = $(element.statusImageHTML); var $statusImage = $(element.statusImageHTML);
$statusImage.addClass("agent-status"); $statusImage.addClass("node-icon");
$statusImage.addClass("node-status");
//$statusImage.addClass("agent-status");
$content.append($statusImage); $content.append($statusImage);
} }
@ -809,8 +814,6 @@ var TreeController = {
} }
if (element.name !== null) { if (element.name !== null) {
console.log(element.name);
console.log("2");
$content.append("&nbsp;&nbsp;&nbsp;" + element.name); $content.append("&nbsp;&nbsp;&nbsp;" + element.name);
} }
@ -853,13 +856,12 @@ var TreeController = {
} }
if (element.name !== null) { if (element.name !== null) {
console.log(element.name);
console.log("3");
$content.append("&nbsp;&nbsp;&nbsp;" + element.name); $content.append("&nbsp;&nbsp;&nbsp;" + element.name);
} }
break; break;
case "services": case "services":
$content.addClass("node-service");
if ( if (
typeof element.statusImageHTML != "undefined" && typeof element.statusImageHTML != "undefined" &&
element.statusImageHTML.length > 0 element.statusImageHTML.length > 0
@ -874,7 +876,7 @@ var TreeController = {
(element.title ? element.title : element.name) + (element.title ? element.title : element.name) +
'" data-use_title_for_force_title="1" src="' + '" data-use_title_for_force_title="1" src="' +
(controller.baseURL.length > 0 ? controller.baseURL : "") + (controller.baseURL.length > 0 ? controller.baseURL : "") +
'images/info@svg.svg" class="img_help" ' + 'images/info@svg.svg" style="width: 16px" class="img_help" ' +
' alt="' + ' alt="' +
element.name + element.name +
'"/></span> '; '"/></span> ';
@ -903,14 +905,24 @@ var TreeController = {
typeof element.elementDescription !== "undefined" && typeof element.elementDescription !== "undefined" &&
element.elementDescription != "" element.elementDescription != ""
) { ) {
$content.append(" " + element.elementDescription); $content.append(
'<span style="flex: 1 1 50%;">' +
element.elementDescription +
"</span>"
);
} else if ( } else if (
typeof element.description !== "undefined" && typeof element.description !== "undefined" &&
element.description != "" element.description != ""
) { ) {
$content.append(" " + element.description); $content.append(
'<span style="flex: 1 1 50%;">' +
element.description +
"</span>"
);
} else { } else {
$content.append('<span class="">' + element.name + "</span>"); $content.append(
'<span style="flex: 1 1 50%;">' + element.name + "</span>"
);
} }
} else { } else {
$content.remove($node); $content.remove($node);
@ -975,6 +987,8 @@ var TreeController = {
$statusImage.addClass("module-status"); $statusImage.addClass("module-status");
$content.append($statusImage); $content.append($statusImage);
} else {
$content.addClass("module-only-caption");
} }
element.name = htmlDecode(element.name); element.name = htmlDecode(element.name);
@ -1174,7 +1188,7 @@ var TreeController = {
element.icon.length > 0 element.icon.length > 0
) { ) {
$content.append( $content.append(
'<div class="node-icon"><img src="' + '<div class="node-icon"><div class="node-icon-container"><img src="' +
(controller.baseURL.length > 0 ? controller.baseURL : "") + (controller.baseURL.length > 0 ? controller.baseURL : "") +
"images/" + "images/" +
element.icon + element.icon +
@ -1231,7 +1245,7 @@ var TreeController = {
break; break;
default: default:
$content.append( $content.append(
'<span class="module-name module-name-parent">' + '<span class="module-name module-name-parent module-only-caption">' +
element.name + element.name +
"</span>" "</span>"
); );

View File

@ -571,15 +571,17 @@ class TreeViewWidget extends Widget
$base_url = \ui_get_full_url('/'); $base_url = \ui_get_full_url('/');
// Spinner. // Spinner.
$output .= \html_print_image( $output .= ui_print_spinner(__('Loading'), true);
/*
$output .= \html_print_image(
'images/spinner.gif', 'images/spinner.gif',
true, true,
[ [
'class' => 'loading_tree', 'class' => 'loading_tree',
'style' => 'display: none;', 'style' => 'display: none;',
] ]
); );
*/
// Container tree. // Container tree.
$style = 'height:'.$height.'px; width:'.$width.'px;'; $style = 'height:'.$height.'px; width:'.$width.'px;';
$style .= 'text-align: left; padding:10px;'; $style .= 'text-align: left; padding:10px;';

View File

@ -25,20 +25,12 @@ div.fixed-bottom-box {
/* Overrides end */ /* Overrides end */
div.fixed-bottom-box > div.fixed-bottom-box-head { div.fixed-bottom-box > div.fixed-bottom-box-head {
width: 20px !important; width: 100% !important;
height: 30px; height: 40px;
line-height: 30px; line-height: 30px;
vertical-align: middle; vertical-align: middle;
position: absolute; position: absolute;
top: 10px; border-bottom: 1px solid #aeaeae;
right: 20px;
/* background-color: #3f3f3f; */
/* border-radius: 10px 10px 0 0; */
/* -moz-border-radius: 10px 10px 0 0; */
/* -webkit-border-radius: 10px 10px 0 0; */
/* -o-border-radius: 10px 10px 0 0; */
/* -ms-border-radius: 10px 10px 0 0; */
/* -khtml-border-radius: 10px 10px 0 0; */
} }
div.fixed-bottom-box div.fixed-bottom-box
@ -60,39 +52,21 @@ div.fixed-bottom-box
background-image: url(../../images/close@svg.svg); background-image: url(../../images/close@svg.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
float: right; position: absolute;
top: 10px;
right: 20px;
} }
div.fixed-bottom-box div.fixed-bottom-box
> div.fixed-bottom-box-head > div.fixed-bottom-box-head
> div.fixed-bottom-box-head-body:hover { > div.fixed-bottom-box-head-body:hover {
cursor: pointer; cursor: pointer;
/*
background-color: #747474;
border-radius: inherit;
-moz-border-radius: inherit;
-webkit-border-radius: inherit;
-o-border-radius: inherit;
-ms-border-radius: inherit;
-khtml-border-radius: inherit;
*/
} }
div.fixed-bottom-box div.fixed-bottom-box
> div.fixed-bottom-box-head > div.fixed-bottom-box-head
> span.fixed-bottom-box-head-close:hover { > span.fixed-bottom-box-head-close:hover {
cursor: pointer; cursor: pointer;
/*
background-color: #747474;
border-radius: 0 10px 0 0;
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
-o-border-radius: 0 10px 0 0;
-ms-border-radius: 0 10px 0 0;
-khtml-border-radius: 0 10px 0 0;
*/
} }
div.fixed-bottom-box.fixed-bottom-box-hided div.fixed-bottom-box.fixed-bottom-box-hided
@ -119,5 +93,6 @@ div.fixed-bottom-box > div.fixed-bottom-box-content {
box-sizing: border-box; box-sizing: border-box;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
max-height: 100% !important;
border-left: 1px solid #aeaeae; border-left: 1px solid #aeaeae;
} }

View File

@ -1123,6 +1123,9 @@ p.center {
margin-bottom: 10px; margin-bottom: 10px;
} }
.margin-top-20 {
margin-top: 20px;
}
.margin-bottom-20 { .margin-bottom-20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -11007,3 +11010,11 @@ p.trademark-copyright {
height: 80%; height: 80%;
overflow: auto; overflow: auto;
} }
.item_status_tree_view {
position: absolute;
top: 7px;
left: 8px;
width: 24px;
height: 24px;
}

View File

@ -19,20 +19,42 @@
float: right; float: right;
} }
.tree-node .node-content.node-service {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.tree-node img { .tree-node img {
padding: 10px; padding: 10px;
} }
.tree-node .node-icon { .tree-node .node-icon {
background-position: 10px;
background-repeat: no-repeat;
width: 40px; width: 40px;
height: 38px;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #aeaeae; border-right: 1px solid #aeaeae;
} }
.tree-node .node-icon .node-icon-container {
display: flex;
align-items: center;
justify-content: center;
height: 38px;
}
.tree-node .node-icon .node-icon-container img {
padding: 0;
width: 20px;
}
.tree-node .node-status {
width: 40px;
height: 38px;
border-radius: 7px 0 0 7px;
padding: 1px;
box-sizing: border-box;
position: absolute;
}
.tree-node .node-name { .tree-node .node-name {
position: relative; position: relative;
top: -15px; top: -15px;
@ -51,6 +73,7 @@
background-repeat: repeat-y; background-repeat: repeat-y;
*/ */
min-height: 26px; min-height: 26px;
margin-top: 8px;
} }
div.tree-node { div.tree-node {
@ -67,10 +90,9 @@ div.tree-node span {
.node-content { .node-content {
border: 1px solid #aeaeae; border: 1px solid #aeaeae;
border-radius: 8px; border-radius: 8px;
width: calc(100% - 40px); width: calc(100% - 50px);
box-sizing: border-box; box-sizing: border-box;
height: 40px; height: 40px;
/*height: 26px;*/
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -80,7 +102,7 @@ div.tree-node span {
.node-content > img { .node-content > img {
position: relative; position: relative;
top: -2px; /*top: -2px;*/
} }
.node-content:hover { .node-content:hover {
@ -93,8 +115,7 @@ div.tree-node span {
.leaf-icon { .leaf-icon {
width: 18px; width: 18px;
/*height: 20px;*/ height: 32px;
height: 35px;
} }
.node-content, .node-content,
@ -108,45 +129,28 @@ div.tree-node span {
} }
.tree-node.leaf-open > .leaf-icon { .tree-node.leaf-open > .leaf-icon {
background-image: url(../../images/tree/last_expanded.png); background-image: url(../../images/minus.svg);
cursor: pointer;
}
.tree-node.tree-first.leaf-open > .leaf-icon {
background-image: url(../../images/tree/first_expanded.png);
cursor: pointer;
} }
.tree-node.leaf-closed > .leaf-icon { .tree-node.leaf-closed > .leaf-icon {
background-image: url(../../images/tree/last_closed.png); background-image: url(../../images/plus.svg);
cursor: pointer;
} }
.tree-node.leaf-open > .leaf-icon,
.tree-node.tree-first.leaf-closed > .leaf-icon { .tree-node.tree-first.leaf-open > .leaf-icon,
background-image: url(../../images/tree/first_closed.png); .tree-node.leaf-closed > .leaf-icon,
cursor: pointer; .tree-node.tree-first.leaf-closed > .leaf-icon,
} .tree-node.leaf-loading > .leaf-icon,
.tree-node.leaf-empty > .leaf-icon,
.tree-node.leaf-loading > .leaf-icon { .tree-node.tree-first.leaf-empty > .leaf-icon,
background-image: url(../../images/tree/last_expanded.png);
}
.tree-node.leaf-empty > .leaf-icon {
background-image: url(../../images/tree/last_leaf.png);
}
.tree-node.tree-first.leaf-empty > .leaf-icon {
background-image: url(../../images/tree/first_leaf.png);
}
.tree-node.leaf-error > .leaf-icon { .tree-node.leaf-error > .leaf-icon {
background-image: url(../../images/tree/last_leaf.png); cursor: pointer;
} }
.tree-node > .leaf-icon { .tree-node > .leaf-icon {
background-position: 0px 0px; background-position: 0px 11px;
background-repeat: no-repeat; background-repeat: no-repeat;
width: 17px; float: left;
margin-right: 10px;
} }
.tree-node > .node-content > img { .tree-node > .node-content > img {
@ -168,31 +172,48 @@ div.tree-node span {
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
height: 38px; height: 38px;
position: relative; position: relative;
}
.tree-node > .node-content > .agent-status.status_balls {
top: -1px; top: -1px;
} }
.tree-node > .node-content > .module-status.status_small_balls { .tree-node > .node-content > .module-status.status_small_balls {
top: -8px; /*top: -8px;*/
} }
.tree-node > .node-content > .module-name { .tree-node > .node-content > .module-name {
margin: 0 0 0 1em; margin: 0 0 0 1em;
/*width: 250px;*/ /*width: 250px;*/
width: 55%; width: 55%;
display: inline-block; /*display: inline-block;*/
flex: 1 1 80%;
position: relative; position: relative;
font-weight: bold; font-weight: bold;
} }
.tree-node > .node-content > .module-name-parent.module-only-caption {
top: 9px;
}
.tree-node > .node-content.module-only-caption > .module-name {
top: 7px;
}
/*.node-content.module.module-only-caption:not(:first-of-type) {
margin-top: 8px;
}*/
.tree-node > .node-content > .module-name-alias { .tree-node > .node-content > .module-name-alias {
font-size: 12pt; font-size: 12pt;
font-weight: normal; font-weight: normal;
top: 8px; top: 8px;
margin-left: 3.3em;
} }
.tree-node > .node-content > .module-name-parent { .tree-node > .node-content > .module-name-parent {
font-size: 12pt; font-size: 12pt;
margin-left: 0.5em; margin-left: 0.5em;
top: -14px; top: -4px;
} }
.tree-node > .node-content > .module-value { .tree-node > .node-content > .module-value {
@ -233,6 +254,9 @@ div.tree-node span {
right: 10px; right: 10px;
} }
.tree-node > .node-content > .tree-node-counters.tree-node-service-counters {
top: 0;
}
.tree-node > .node-content > img { .tree-node > .node-content > img {
vertical-align: middle; vertical-align: middle;
} }
@ -272,15 +296,21 @@ div#tree-controller-recipient {
.tree-group .node-content { .tree-group .node-content {
position: relative; position: relative;
top: -10px; /*top: -10px;*/
} }
.tree-group .node-content.module { .tree-group .node-content.module {
top: -12px; /*top: -12px;*/
/* top: -35px; */
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
width: calc(100% - 50px);
margin: 8px 0 0 8px;
} }
.node-content .module-button { .node-content .module-button {
margin-top: 5px;
padding: 6px; padding: 6px;
} }
@ -289,3 +319,17 @@ div#tree-controller-recipient {
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
} }
.tree-group .node-content.module:last-child {
margin-bottom: 15px;
}
.tree-node.leaf-open:last-child,
.tree-node.leaf-closed:last-child,
.tree-node.leaf-empty:last-child {
margin-bottom: 8px;
}
.tree-root > .tree-node {
margin-top: 0;
margin-bottom: 10px;
}

View File

@ -310,16 +310,17 @@ ui_include_time_picker();
ui_require_jquery_file('ui.datepicker-'.get_user_language(), 'include/javascript/i18n/'); ui_require_jquery_file('ui.datepicker-'.get_user_language(), 'include/javascript/i18n/');
ui_require_javascript_file('TreeController', 'include/javascript/tree/'); ui_require_javascript_file('TreeController', 'include/javascript/tree/');
ui_print_spinner(__('Loading'));
html_print_image( /*
html_print_image(
'images/spinner.gif', 'images/spinner.gif',
false, false,
[ [
'class' => 'loading_tree', 'class' => 'loading_tree',
'style' => 'display: none;', 'style' => 'display: none;',
] ]
); );
*/
html_print_div( html_print_div(
[ [
'id' => 'tree-controller-recipient', 'id' => 'tree-controller-recipient',
@ -356,7 +357,8 @@ enterprise_hook('close_meta_frame');
if (typeof treeController.recipient != 'undefined' && treeController.recipient.length > 0) if (typeof treeController.recipient != 'undefined' && treeController.recipient.length > 0)
treeController.recipient.empty(); treeController.recipient.empty();
$(".loading_tree").show(); showSpinner();
//$(".loading_tree").show();
var parameters = {}; var parameters = {};
parameters['page'] = "include/ajax/tree.ajax"; parameters['page'] = "include/ajax/tree.ajax";
@ -407,7 +409,8 @@ enterprise_hook('close_meta_frame');
data: parameters, data: parameters,
success: function(data) { success: function(data) {
if (data.success) { if (data.success) {
$(".loading_tree").hide(); hideSpinner();
//$(".loading_tree").hide();
var foundMessage = ''; var foundMessage = '';
if (data.tree.length === 0) { if (data.tree.length === 0) {
foundMessage = "<?php echo __('No data found'); ?>"; foundMessage = "<?php echo __('No data found'); ?>";