Adapted the tree view to show the elements detail info using the fixed-bottom-box module
This commit is contained in:
Alejandro Gallardo Escobar
parent
a14c24aba0
commit
bf287dd98b
|
|
@ -12,10 +12,7 @@
|
|||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
var TreeController;
|
||||
var TreeNodeDetailController;
|
||||
|
||||
TreeController = {
|
||||
var TreeController = {
|
||||
controllers: [],
|
||||
getController: function () {
|
||||
var controller = {
|
||||
|
|
@ -275,21 +272,58 @@ TreeController = {
|
|||
}
|
||||
|
||||
return hasCounters;
|
||||
// Load the counters asynchronously
|
||||
// else if (typeof element.searchCounters != 'undefined' && element.searchCounters) {
|
||||
// var $counters = $("<div></div>");
|
||||
// $counters
|
||||
// .addClass('tree-node-counters')
|
||||
// .append(' (')
|
||||
// .append('<img src="'+(controller.baseURL.length > 0 ? controller.baseURL : '')+'images/spinner.gif" />')
|
||||
// .append(')');
|
||||
|
||||
// $content.append($counters);
|
||||
// }
|
||||
}
|
||||
|
||||
// Load leaf
|
||||
function _processNode (container, element) {
|
||||
|
||||
// type, [id], [serverID], callback
|
||||
function _getTreeDetailData (type, id, serverID, callback) {
|
||||
var lastParam = arguments[arguments.length - 1];
|
||||
var callback;
|
||||
if (typeof lastParam === 'function')
|
||||
callback = lastParam;
|
||||
|
||||
var serverID;
|
||||
if (arguments.length >= 4)
|
||||
serverID = arguments[2];
|
||||
var id;
|
||||
if (arguments.length >= 3)
|
||||
id = arguments[1];
|
||||
var type;
|
||||
if (arguments.length >= 2)
|
||||
type = arguments[0];
|
||||
|
||||
if (typeof type === 'undefined')
|
||||
throw new TypeError('Type required');
|
||||
if (typeof callback === 'undefined')
|
||||
throw new TypeError('Callback required');
|
||||
|
||||
var postData = {
|
||||
page: controller.ajaxPage,
|
||||
getDetail: 1,
|
||||
type: type
|
||||
}
|
||||
|
||||
if (typeof id !== 'undefined')
|
||||
postData.id = id;
|
||||
if (typeof serverID !== 'undefined')
|
||||
postData.serverID = serverID;
|
||||
|
||||
$.ajax({
|
||||
url: controller.ajaxURL,
|
||||
type: 'POST',
|
||||
dataType: 'html',
|
||||
data: postData,
|
||||
success: function(data, textStatus, xhr) {
|
||||
callback(null, data);
|
||||
},
|
||||
error: function(xhr, textStatus, errorThrown) {
|
||||
callback(errorThrown);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var $node = $("<li></li>");
|
||||
var $leafIcon = $("<div></div>");
|
||||
var $content = $("<div></div>");
|
||||
|
|
@ -410,14 +444,13 @@ TreeController = {
|
|||
$alertsImage
|
||||
.addClass("module-alerts")
|
||||
.click(function (e) {
|
||||
TreeNodeDetailController.getController().init({
|
||||
recipient: controller.detailRecipient,
|
||||
type: 'alert',
|
||||
id: element.id,
|
||||
serverID: element.serverID,
|
||||
baseURL: controller.baseURL,
|
||||
ajaxURL: controller.ajaxURL,
|
||||
ajaxPage: controller.ajaxPage
|
||||
_getTreeDetailData('alert', element.id, element.serverID, function (error, data) {
|
||||
if (error) {
|
||||
// console.error(error);
|
||||
}
|
||||
else {
|
||||
controller.detailRecipient.render(element.name, data).open();
|
||||
}
|
||||
});
|
||||
|
||||
// Avoid the execution of the module detail event
|
||||
|
|
@ -457,17 +490,16 @@ TreeController = {
|
|||
var hasCounters = _processNodeCounters($content, element.counters, element.type);
|
||||
|
||||
// If exist the detail container, show the data
|
||||
if (typeof controller.detailRecipient != 'undefined' && controller.detailRecipient.length > 0) {
|
||||
if (typeof controller.detailRecipient !== 'undefined') {
|
||||
if (element.type == 'agent' || element.type == 'module') {
|
||||
$content.click(function (e) {
|
||||
TreeNodeDetailController.getController().init({
|
||||
recipient: controller.detailRecipient,
|
||||
type: element.type,
|
||||
id: element.id,
|
||||
serverID: element.serverID,
|
||||
baseURL: controller.baseURL,
|
||||
ajaxURL: controller.ajaxURL,
|
||||
ajaxPage: controller.ajaxPage
|
||||
_getTreeDetailData(element.type, element.id, element.serverID, function (error, data) {
|
||||
if (error) {
|
||||
// console.error(error);
|
||||
}
|
||||
else {
|
||||
controller.detailRecipient.render(element.name, data).open();
|
||||
}
|
||||
});
|
||||
})
|
||||
.css('cursor', 'pointer');
|
||||
|
|
@ -633,31 +665,31 @@ TreeController = {
|
|||
this.reload();
|
||||
},
|
||||
init: function (data) {
|
||||
if (typeof data.recipient != 'undefined' && data.recipient.length > 0) {
|
||||
if (typeof data.recipient !== 'undefined' && data.recipient.length > 0) {
|
||||
this.recipient = data.recipient;
|
||||
}
|
||||
if (typeof data.detailRecipient != 'undefined' && data.detailRecipient.length > 0) {
|
||||
if (typeof data.detailRecipient !== 'undefined') {
|
||||
this.detailRecipient = data.detailRecipient;
|
||||
}
|
||||
if (typeof data.tree != 'undefined') {
|
||||
if (typeof data.tree !== 'undefined') {
|
||||
this.tree = data.tree;
|
||||
}
|
||||
if (typeof data.emptyMessage != 'undefined' && data.emptyMessage.length > 0) {
|
||||
if (typeof data.emptyMessage !== 'undefined' && data.emptyMessage.length > 0) {
|
||||
this.emptyMessage = data.emptyMessage;
|
||||
}
|
||||
if (typeof data.errorMessage != 'undefined' && data.errorMessage.length > 0) {
|
||||
if (typeof data.errorMessage !== 'undefined' && data.errorMessage.length > 0) {
|
||||
this.errorMessage = data.errorMessage;
|
||||
}
|
||||
if (typeof data.baseURL != 'undefined' && data.baseURL.length > 0) {
|
||||
if (typeof data.baseURL !== 'undefined' && data.baseURL.length > 0) {
|
||||
this.baseURL = data.baseURL;
|
||||
}
|
||||
if (typeof data.ajaxURL != 'undefined' && data.ajaxURL.length > 0) {
|
||||
if (typeof data.ajaxURL !== 'undefined' && data.ajaxURL.length > 0) {
|
||||
this.ajaxURL = data.ajaxURL;
|
||||
}
|
||||
if (typeof data.ajaxPage != 'undefined' && data.ajaxPage.length > 0) {
|
||||
if (typeof data.ajaxPage !== 'undefined' && data.ajaxPage.length > 0) {
|
||||
this.ajaxPage = data.ajaxPage;
|
||||
}
|
||||
if (typeof data.filter != 'undefined') {
|
||||
if (typeof data.filter !== 'undefined') {
|
||||
this.filter = data.filter;
|
||||
}
|
||||
|
||||
|
|
@ -678,229 +710,3 @@ TreeController = {
|
|||
return controller;
|
||||
}
|
||||
}
|
||||
|
||||
// The controllers will be inside the 'controllers' object,
|
||||
// ordered by ['type']['id']
|
||||
TreeNodeDetailController = {
|
||||
controllers: {},
|
||||
controllerExist: function (type, id) {
|
||||
if (typeof this.controllers[type][id] != 'undefined') {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
removeControllers: function () {
|
||||
try {
|
||||
$.each(TreeNodeDetailController.controllers, function(type, elements) {
|
||||
$.each(elements, function(id, element) {
|
||||
element.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
// console.log(error);
|
||||
}
|
||||
},
|
||||
getController: function () {
|
||||
var controller = {
|
||||
recipient: '',
|
||||
type: 'none',
|
||||
id: -1,
|
||||
serverID: -1,
|
||||
emptyMessage: "No data found.",
|
||||
errorMessage: "Error",
|
||||
baseURL: "",
|
||||
ajaxURL: "ajax.php",
|
||||
ajaxPage: "include/ajax/tree.ajax",
|
||||
container: '',
|
||||
reload: function () {
|
||||
// Label
|
||||
var $label = $("<div></div>");
|
||||
$label
|
||||
.addClass("tree-element-detail-label")
|
||||
.click(function (e) {
|
||||
if ($label.hasClass('tree-element-detail-loaded'))
|
||||
controller.toggle();
|
||||
});
|
||||
|
||||
// Content
|
||||
var $content = $("<div></div>");
|
||||
$content.addClass("tree-element-detail-content");
|
||||
|
||||
// Container
|
||||
this.container = $("<div></div>");
|
||||
this.container
|
||||
.addClass("tree-element-detail")
|
||||
.addClass("tree-element-detail-closed")
|
||||
.append($label)
|
||||
.data('label', $label)
|
||||
.append($content)
|
||||
.data('content', $content);
|
||||
|
||||
$label.addClass('tree-element-detail-loading');
|
||||
$.ajax({
|
||||
url: this.ajaxURL,
|
||||
type: 'POST',
|
||||
dataType: 'html',
|
||||
async: true,
|
||||
data: {
|
||||
page: this.ajaxPage,
|
||||
getDetail: 1,
|
||||
type: this.type,
|
||||
id: this.id,
|
||||
serverID: this.serverID
|
||||
},
|
||||
complete: function(xhr, textStatus) {
|
||||
$label.removeClass('tree-element-detail-loading');
|
||||
},
|
||||
success: function(data, textStatus, xhr) {
|
||||
$label.addClass('tree-element-detail-loaded');
|
||||
$content.html(data);
|
||||
|
||||
// Add again the hover event to the 'force_callback' elements
|
||||
forced_title_callback();
|
||||
|
||||
controller.open();
|
||||
},
|
||||
error: function(xhr, textStatus, errorThrown) {
|
||||
$label.addClass('tree-element-detail-error');
|
||||
$content.html(controller.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
this.recipient.append(this.container);
|
||||
},
|
||||
load: function () {
|
||||
this.reload();
|
||||
},
|
||||
toggle: function () {
|
||||
if (typeof this.container == 'undefined' || this.container.length <= 0) {
|
||||
return false;
|
||||
}
|
||||
if (this.container.hasClass("tree-element-detail-closed")) {
|
||||
this.open();
|
||||
}
|
||||
else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
open: function () {
|
||||
if (typeof this.container == 'undefined' || this.container.length <= 0) {
|
||||
return false;
|
||||
}
|
||||
if (this.container.hasClass("tree-element-detail-closed")) {
|
||||
this.container
|
||||
.removeClass("tree-element-detail-closed")
|
||||
.data('content').show();
|
||||
}
|
||||
},
|
||||
close: function () {
|
||||
if (typeof this.container == 'undefined' || this.container.length <= 0) {
|
||||
return false;
|
||||
}
|
||||
if (!this.container.hasClass("tree-element-detail-closed")) {
|
||||
this.container
|
||||
.addClass("tree-element-detail-closed")
|
||||
.data('content').hide();
|
||||
}
|
||||
},
|
||||
init: function (data) {
|
||||
// Remove the other controllers
|
||||
TreeNodeDetailController.removeControllers();
|
||||
|
||||
// Required
|
||||
if (typeof data.recipient != 'undefined' && data.recipient.length > 0) {
|
||||
this.recipient = data.recipient;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
// Required
|
||||
if (typeof data.type != 'undefined' && data.type.length > 0) {
|
||||
this.type = data.type;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
// Required
|
||||
if (typeof data.id != 'undefined' && (data.id.length > 0 || !isNaN(data.id))) {
|
||||
this.id = data.id;
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
if (typeof data.serverID != 'undefined' && (data.serverID.length > 0 || !isNaN(data.serverID))) {
|
||||
this.serverID = data.serverID;
|
||||
}
|
||||
if (typeof data.emptyMessage != 'undefined' && data.emptyMessage.length > 0) {
|
||||
this.emptyMessage = data.emptyMessage;
|
||||
}
|
||||
if (typeof data.errorMessage != 'undefined' && data.errorMessage.length > 0) {
|
||||
this.errorMessage = data.errorMessage;
|
||||
}
|
||||
if (typeof data.baseURL != 'undefined' && data.baseURL.length > 0) {
|
||||
this.baseURL = data.baseURL;
|
||||
}
|
||||
if (typeof data.ajaxURL != 'undefined' && data.ajaxURL.length > 0) {
|
||||
this.ajaxURL = data.ajaxURL;
|
||||
}
|
||||
if (typeof data.ajaxPage != 'undefined' && data.ajaxPage.length > 0) {
|
||||
this.ajaxPage = data.ajaxPage;
|
||||
}
|
||||
if (typeof data.counterTitles != 'undefined') {
|
||||
this.counterTitles = data.counterTitles;
|
||||
}
|
||||
if (typeof data.shouldHaveCounters != 'undefined') {
|
||||
this.shouldHaveCounters = data.shouldHaveCounters;
|
||||
}
|
||||
|
||||
if (typeof TreeNodeDetailController.controllers[this.type] == 'undefined')
|
||||
TreeNodeDetailController.controllers[this.type] = {};
|
||||
TreeNodeDetailController.controllers[this.type][this.id] = this;
|
||||
this.load();
|
||||
},
|
||||
remove: function () {
|
||||
if (typeof this.recipient != 'undefined' && this.recipient.length > 0) {
|
||||
this.recipient.empty();
|
||||
}
|
||||
if (this.type != 'none' && this.id > -1) {
|
||||
try {
|
||||
delete TreeNodeDetailController.controllers[this.type][this.id];
|
||||
}
|
||||
catch (error) {
|
||||
// console.log('Item not deleted');
|
||||
}
|
||||
}
|
||||
},
|
||||
closeOther: function () {
|
||||
try {
|
||||
$.each(TreeNodeDetailController.controllers, function(type, elements) {
|
||||
$.each(elements, function(id, element) {
|
||||
if (controller.type != type && controller.id != id)
|
||||
element.close();
|
||||
});
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
// console.log(error);
|
||||
}
|
||||
},
|
||||
removeOther: function () {
|
||||
try {
|
||||
TreeNodeDetailController.controllers.forEach(function(elements, type) {
|
||||
elements.forEach(function(element, id) {
|
||||
if (controller.type != type && controller.id != id)
|
||||
element.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
// console.log(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
return controller;
|
||||
}
|
||||
}
|
||||
|
|
@ -131,41 +131,8 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
div.tree-table {
|
||||
display: table;
|
||||
div#tree-controller-recipient {
|
||||
text-align: left;
|
||||
width: 98%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.tree-table-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
div.tree-table-cell {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div.tree-table-cell.tree-table-cell-tree {
|
||||
/*width: 70%;*/
|
||||
max-width: 600px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
div.tree-table-cell.tree-table-cell-detail {
|
||||
padding-left: 10px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
div.tree-element-detail-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#tree-controller-recipient {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div#tree-controller-detail-recipient {
|
||||
/*text-align: right;*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ switch ($tab) {
|
|||
break;
|
||||
}
|
||||
|
||||
if (!defined('METACONSOLE')) {
|
||||
if (!is_metaconsole()) {
|
||||
if (!$strict_acl)
|
||||
$header_title = $header_title ." - ". $header_sub_title;
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ $row = array();
|
|||
$row[] = __('Agent status');
|
||||
$row[] = html_print_select($agent_status_arr, "status_agent", $status_agent, '', '', 0, true);
|
||||
$row[] = __('Search agent');
|
||||
if (defined('METACONSOLE'))
|
||||
if (is_metaconsole())
|
||||
$row[] = html_print_input_text("search_agent", $search_agent, '', 70, 30, true);
|
||||
else
|
||||
$row[] = html_print_input_text("search_agent", $search_agent, '', 40, 30, true);
|
||||
|
|
@ -149,7 +149,7 @@ $table->rowspan[][count($row)-1] = 2;
|
|||
|
||||
$table->data[] = $row;
|
||||
|
||||
if (!defined('METACONSOLE')) {
|
||||
if (!is_metaconsole()) {
|
||||
// Module filter
|
||||
$module_status_arr = array();
|
||||
$module_status_arr[-1] = __('All'); //default
|
||||
|
|
@ -168,7 +168,7 @@ if (!defined('METACONSOLE')) {
|
|||
$table->data[] = $row;
|
||||
}
|
||||
|
||||
if (defined('METACONSOLE')) {
|
||||
if (is_metaconsole()) {
|
||||
$table->width = "96%";
|
||||
$table->cellpadding = "0";
|
||||
$table->cellspacing = "0";
|
||||
|
|
@ -179,7 +179,7 @@ if (defined('METACONSOLE')) {
|
|||
$form_html = '<form id="tree_search" method="post" action="index.php?sec=monitoring&sec2=operation/tree&refr=0&tab='.$tab.'&pure='.$config['pure'].'">';
|
||||
$form_html .= html_print_table($table, true);
|
||||
$form_html .= '</form>';
|
||||
if (defined('METACONSOLE')) {
|
||||
if (is_metaconsole()) {
|
||||
echo "<div class='view_tree'>";
|
||||
ui_toggle($form_html, __('Show Options'));
|
||||
echo "<br>";
|
||||
|
|
@ -203,20 +203,10 @@ html_print_image('images/spinner.gif', false,
|
|||
array('class' => "loading_tree",
|
||||
'style' => 'display: none;'));
|
||||
|
||||
echo "<div class='tree-table'>";
|
||||
echo "<div class='tree-table-row'>";
|
||||
echo "<div class='tree-table-cell tree-table-cell-tree'>";
|
||||
echo "<div id='tree-controller-recipient'>";
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
echo "<div class='tree-table-cell tree-table-cell-detail'>";
|
||||
echo "<div id='tree-controller-detail-recipient'>";
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
echo "</div>";
|
||||
echo "<div id='tree-controller-recipient'>";
|
||||
echo "</div>";
|
||||
|
||||
if (defined('METACONSOLE')) {
|
||||
if (is_metaconsole()) {
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
|
|
@ -224,6 +214,12 @@ enterprise_hook('close_meta_frame');
|
|||
|
||||
?>
|
||||
|
||||
<? if (!is_metaconsole()): ?>
|
||||
<script type="text/javascript" src="include/javascript/fixed-bottom-box.js"></script>
|
||||
<? else: ?>
|
||||
<script type="text/javascript" src="../../include/javascript/fixed-bottom-box.js"></script>
|
||||
<? endif; ?>
|
||||
|
||||
<script type="text/javascript">
|
||||
var treeController = TreeController.getController();
|
||||
|
||||
|
|
@ -231,8 +227,6 @@ enterprise_hook('close_meta_frame');
|
|||
|
||||
$("form#tree_search").submit(function(e) {
|
||||
e.preventDefault();
|
||||
$(".tree-element-detail-content").hide();
|
||||
$(".tree-controller-detail-recipient").hide();
|
||||
processTreeSearch();
|
||||
});
|
||||
|
||||
|
|
@ -265,11 +259,11 @@ enterprise_hook('close_meta_frame');
|
|||
|
||||
treeController.init({
|
||||
recipient: $("div#tree-controller-recipient"),
|
||||
detailRecipient: $("div#tree-controller-detail-recipient"),
|
||||
detailRecipient: $.fixedBottomBox({ width: 400, height: 500 }),
|
||||
page: parameters['page'],
|
||||
emptyMessage: "<?php echo __('No data found'); ?>",
|
||||
tree: data.tree,
|
||||
baseURL: "<?php echo ui_get_full_url(false, false, false, defined('METACONSOLE')); ?>",
|
||||
baseURL: "<?php echo ui_get_full_url(false, false, false, is_metaconsole()); ?>",
|
||||
ajaxURL: "<?php echo ui_get_full_url('ajax.php', false, false, false); ?>",
|
||||
filter: parameters['filter'],
|
||||
counterTitles: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue