mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-04-08 18:55:09 +02:00
2014-02-10 Sergio Martin <sergio.martin@artica.es>
* mobile/include/style/main.css mobile/index.php mobile/operation/visualmap.php mobile/operation/tactical.php mobile/operation/module_graph.php mobile/operation/modules.php mobile/operation/agent.php: More improvements on visual styles in mobile console. Layouts, adaption of graphs dinamically to the screen using ajax, etc. git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@9423 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
This commit is contained in:
zarzuelo
parent
604a8e3ac4
commit
be97c59274
@ -1,3 +1,15 @@
|
||||
2014-02-10 Sergio Martin <sergio.martin@artica.es>
|
||||
|
||||
* mobile/include/style/main.css
|
||||
mobile/index.php
|
||||
mobile/operation/visualmap.php
|
||||
mobile/operation/tactical.php
|
||||
mobile/operation/module_graph.php
|
||||
mobile/operation/modules.php
|
||||
mobile/operation/agent.php: More improvements on
|
||||
visual styles in mobile console. Layouts, adaption
|
||||
of graphs dinamically to the screen using ajax, etc.
|
||||
|
||||
2014-02-10 Sergio Martin <sergio.martin@artica.es>
|
||||
|
||||
* mobile/operation/agents.php
|
||||
|
||||
@ -28,6 +28,12 @@ body {
|
||||
|
||||
/*INIT----------Tactical styles-----------------------------------------*/
|
||||
/* Common */
|
||||
|
||||
#tactical1, #tactical2, #agent_graphs, #agent_details {
|
||||
border-radius: 6px;
|
||||
|
||||
}
|
||||
|
||||
#tactical1 *, #tactical2 * {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -527,7 +533,7 @@ table.event_details td.cell_event_name {
|
||||
}
|
||||
|
||||
#list_agents td:hover, #list_networkmaps td:hover,
|
||||
#list_events td:hover, #list_Modules td:hover,
|
||||
#list_events td:hover, #list_Modules td:hover, #list_agent_Modules td:hover,
|
||||
#list_visualmaps td:hover, #last_agent_events td:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -777,99 +783,13 @@ table.event_details td.cell_event_name {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
#list_Modules_Embedded .cell_1 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_4 .ui-table-cell-label {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_4 .ui-table-cell-label {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_3 {
|
||||
display: none !important
|
||||
}
|
||||
#list_Modules_Embedded .cell_4 {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_0 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_1 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_3 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_4 .ui-table-cell-label {
|
||||
#list_agent_Modules .ui-table-cell-label,
|
||||
#list_agent_Modules .cell_2,
|
||||
#list_agent_Modules .cell_3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .show_collapside {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .data {
|
||||
/*
|
||||
white-space: nowrap;
|
||||
*/
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_2,
|
||||
#list_Modules_Embedded .cell_4 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .show_collapside > img {
|
||||
display: none !important;
|
||||
}
|
||||
#list_Modules_Embedded .cell_3 .show_collapside {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_4 a,
|
||||
#list_Modules_Embedded .cell_1 a {
|
||||
color: #000000 !important;
|
||||
}
|
||||
/*
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
#list_Modules_Embedded .cell_1 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_6 .ui-table-cell-label {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_6 .ui-table-cell-label {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_3,
|
||||
#list_Modules_Embedded .cell_4 {
|
||||
display: inline !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_0 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_1 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_3 .ui-table-cell-label,
|
||||
#list_Modules_Embedded .cell_4 .ui-table-cell-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .show_collapside {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_2 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#list_Modules_Embedded .cell_4 a {
|
||||
color: #000000 !important;
|
||||
}
|
||||
*/
|
||||
/*END------------Modules styles---------------------------------------*/
|
||||
|
||||
|
||||
@ -918,16 +838,21 @@ li.ui-btn {
|
||||
|
||||
.cell_0 {
|
||||
border-top: solid 1px #666;
|
||||
margin-top: 4px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#list_events .cell_0 {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
/* Hack to align table titles in mobile mode */
|
||||
.ui-table-cell-label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
.ui-table th, .ui-table td {
|
||||
padding: 3px !important;
|
||||
padding: 8px !important;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
@ -1245,7 +1170,7 @@ span.nobold * {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#list_Modules *, #list_agents *, #list_alerts *, #list_networkmaps *, #list_visualmaps * {
|
||||
#list_Modules *, #list_agent_Modules *, #list_agents *, #list_alerts *, #list_networkmaps *, #list_visualmaps * {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
@ -72,6 +72,10 @@ switch ($action) {
|
||||
$agents = new Agents();
|
||||
$agents->ajax($parameter2);
|
||||
break;
|
||||
case 'agent':
|
||||
$agent = new Agent();
|
||||
$agent->ajax($parameter2);
|
||||
break;
|
||||
case 'modules':
|
||||
$modules = new Modules();
|
||||
$modules->ajax($parameter2);
|
||||
|
||||
@ -60,6 +60,25 @@ class Agent {
|
||||
$home->show($error);
|
||||
}
|
||||
|
||||
|
||||
public function ajax($parameter2 = false) {
|
||||
$system = System::getInstance();
|
||||
|
||||
if (!$this->correct_acl) {
|
||||
return;
|
||||
}
|
||||
else {
|
||||
switch ($parameter2) {
|
||||
case 'render_events_bar':
|
||||
$agent_id = $system->getRequest('agent_id', '0');
|
||||
$width = $system->getRequest('width', '400');
|
||||
graph_graphic_agentevents(
|
||||
$this->id, $width, 30, 86400, ui_get_full_url(false));
|
||||
exit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function show_agent() {
|
||||
$ui = Ui::getInstance();
|
||||
$system = System::getInstance();
|
||||
@ -132,7 +151,7 @@ class Agent {
|
||||
$html .= $description;
|
||||
$html .= '</div>';
|
||||
|
||||
$ui->contentGridAddCell($html);
|
||||
$ui->contentGridAddCell($html, 'agent_details');
|
||||
ob_start();
|
||||
$html = '<div class="agent_graphs">';
|
||||
$html .= "<b>" . __('Modules by status') . "</b><br />";
|
||||
@ -142,11 +161,10 @@ class Agent {
|
||||
unset($this->agent['fired_count']);
|
||||
$html .= '<span class="agents_tiny_stats agents_tiny_stats_tactical">' . reporting_tiny_stats($this->agent, true) . ' </span><br>';
|
||||
$html .= "<b>" . __('Events (24h)') . "</b><br /><br />";
|
||||
$html .= graph_graphic_agentevents(
|
||||
$this->id, 250, 15, 86400, ui_get_full_url(false), true);
|
||||
$html .= '<div id="events_bar"></div>';
|
||||
$html .= '<br>';
|
||||
$html .= '</div>';
|
||||
$ui->contentGridAddCell($html);
|
||||
$ui->contentGridAddCell($html, 'agent_graphs');
|
||||
$ui->contentEndGrid();
|
||||
|
||||
|
||||
@ -187,7 +205,7 @@ class Agent {
|
||||
|
||||
$ui->contentAddLinkListener('last_agent_events');
|
||||
$ui->contentAddLinkListener('list_events');
|
||||
$ui->contentAddLinkListener('list_Modules');
|
||||
$ui->contentAddLinkListener('list_agent_Modules');
|
||||
|
||||
$ui->contentAddHtml("<script type=\"text/javascript\">
|
||||
$(document).ready(function(){
|
||||
@ -203,16 +221,6 @@ class Agent {
|
||||
$('.agent_details').height(max_height);
|
||||
}
|
||||
}
|
||||
|
||||
$( window ).resize(function() {
|
||||
if ($('.ui-block-a').css('float') == 'none') {
|
||||
$('.agent_graphs').height('auto');
|
||||
$('.agent_details').height('auto');
|
||||
}
|
||||
else {
|
||||
set_same_heigth();
|
||||
}
|
||||
});
|
||||
|
||||
if ($('.ui-block-a').css('float') != 'none') {
|
||||
set_same_heigth();
|
||||
@ -220,7 +228,46 @@ class Agent {
|
||||
|
||||
$('.ui-collapsible').bind('expand', function () {
|
||||
refresh_link_listener_last_agent_events();
|
||||
refresh_link_listener_list_Modules();
|
||||
refresh_link_listener_list_agent_Modules();
|
||||
});
|
||||
|
||||
function ajax_load_events_bar() {
|
||||
$('#events_bar').html('<div style=\"text-align: center\"> " . __('Loading...') . "<br /><img src=\"images/ajax-loader.gif\" /></div>');
|
||||
|
||||
var bar_width = $('.agent_graphs').width() * 0.9;
|
||||
|
||||
postvars = {};
|
||||
postvars[\"action\"] = \"ajax\";
|
||||
postvars[\"parameter1\"] = \"agent\";
|
||||
postvars[\"parameter2\"] = \"render_events_bar\";
|
||||
postvars[\"agent_id\"] = \"" . $this->id . "\";
|
||||
postvars[\"width\"] = bar_width;
|
||||
$.post(\"index.php\",
|
||||
postvars,
|
||||
function (data) {
|
||||
$('#events_bar').html(data);
|
||||
},
|
||||
\"html\");
|
||||
}
|
||||
|
||||
ajax_load_events_bar();
|
||||
|
||||
// Detect orientation change to refresh dinamic content
|
||||
$(window).on({
|
||||
orientationchange: function(e) {
|
||||
// Refresh events bar
|
||||
ajax_load_events_bar();
|
||||
|
||||
// Keep same height on boxes
|
||||
if ($('.ui-block-a').css('float') == 'none') {
|
||||
$('.agent_graphs').height('auto');
|
||||
$('.agent_details').height('auto');
|
||||
}
|
||||
else {
|
||||
set_same_heigth();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>");
|
||||
|
||||
@ -277,7 +277,9 @@ class ModuleGraph {
|
||||
<script type="text/javascript">
|
||||
$(document).bind('ready', function() {
|
||||
function load_graph() {
|
||||
$("#graph_content")
|
||||
$("#loading_graph").show();
|
||||
|
||||
$("#graph_content").html($('#loading_graph').html())
|
||||
.height(($(window).height()
|
||||
- $(".ui-header").height()
|
||||
- $(".ui-collapsible").height()
|
||||
@ -288,8 +290,12 @@ class ModuleGraph {
|
||||
|
||||
load_graph();
|
||||
|
||||
$( window ).resize(function() {
|
||||
load_graph();
|
||||
// Detect orientation change to refresh dinamic content
|
||||
$(window).on({
|
||||
orientationchange: function(e) {
|
||||
// Reload dinamic content
|
||||
load_graph();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -455,7 +461,7 @@ class ModuleGraph {
|
||||
$html = $ui->getEndForm();
|
||||
$ui->contentCollapsibleAddItem($html);
|
||||
$ui->contentEndCollapsible();
|
||||
$ui->contentAddHtml('<div id="graph_content" style="display: none; width: 100%; height: 100%;"></div>
|
||||
$ui->contentAddHtml('<div id="graph_content" style="display: none; width: 100%; height: 100%; text-align: center;"></div>
|
||||
<div id="loading_graph" style="width: 100%; text-align: center;">' . __('Loading...') . '<br /><img src="images/ajax-loader.gif" /></div>
|
||||
<div id="error_graph" style="display: none; color: red; width: 100%; text-align: center;">' . __('Error get the graph') . '</div>');
|
||||
$ui->contentAddHtml($this->javascript_code());
|
||||
|
||||
@ -570,7 +570,7 @@ class Modules {
|
||||
}
|
||||
|
||||
$table = new Table();
|
||||
$table->id = 'list_Modules';
|
||||
$table->id = 'list_agent_Modules';
|
||||
|
||||
$table->importFromHash($listModules['modules']);
|
||||
|
||||
|
||||
@ -102,12 +102,14 @@ class Tactical {
|
||||
$links['monitor_ok'] = "index.php?page=modules&status=0";
|
||||
$links['monitor_unknown'] = "index.php?page=modules&status=3";
|
||||
$links['monitor_not_init'] = "index.php?page=modules&status=5";
|
||||
/*
|
||||
$modules_status_untiny = reporting_get_stats_modules_status($data, 230, 150, $links);
|
||||
$modules_status_tiny = reporting_get_stats_modules_status($data, 175, 100, $links);
|
||||
//$formatted_data = $alerts_stats . "<br />\n";
|
||||
$modules_status_tiny = reporting_get_stats_modules_status($data, 175, 100, $links);
|
||||
$formatted_data = "<div class='tiny'>" . $modules_status_untiny . "</div>";
|
||||
$formatted_data .= "<div class='untiny'>" . $modules_status_tiny . "</div>";
|
||||
//$formatted_data .= "<br />\n" . $agents_monitors;
|
||||
*/
|
||||
$modules_status = reporting_get_stats_modules_status($data, 230, 150, $links);
|
||||
$formatted_data = "<div>" . $modules_status . "</div>";
|
||||
$graph_js = ob_get_clean();
|
||||
$formatted_data = $graph_js . $formatted_data;
|
||||
$ui->contentGridAddCell($formatted_data, 'tactical2');
|
||||
@ -120,6 +122,40 @@ class Tactical {
|
||||
$table->importFromHash($this->getLastActivity());
|
||||
$ui->contentCollapsibleAddItem($table->getHTML());
|
||||
$ui->contentEndCollapsible();
|
||||
$ui->contentAddHtml("<script type=\"text/javascript\">
|
||||
$(document).ready(function(){
|
||||
function set_same_heigth() {
|
||||
//Set same height to boxes
|
||||
var max_height = 0;
|
||||
if ($('#tactical1').height() > $('#tactical2').height()) {
|
||||
max_height = $('#tactical1').height();
|
||||
$('#tactical2').height(max_height);
|
||||
}
|
||||
else {
|
||||
max_height = $('#tactical2').height();
|
||||
$('#tactical1').height(max_height);
|
||||
}
|
||||
}
|
||||
|
||||
// Detect orientation change to refresh dinamic content
|
||||
$(window).on({
|
||||
orientationchange: function(e) {
|
||||
// Keep same height on boxes
|
||||
if ($('.ui-block-b').css('float') == 'none') {
|
||||
$('#tactical1').height('auto');
|
||||
$('#tactical2').height('auto');
|
||||
}
|
||||
else {
|
||||
set_same_heigth();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if ($('.ui-block-b').css('float') != 'none') {
|
||||
set_same_heigth();
|
||||
}
|
||||
});
|
||||
</script>");
|
||||
$ui->endContent();
|
||||
$ui->showPage();
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ class Visualmap {
|
||||
$ui->contentAddHtml($rendered_map);
|
||||
$ui->contentAddHtml("<script type=\"text/javascript\">
|
||||
function ajax_load_map() {
|
||||
//$('#rendered_visual_map').html('<img src=\"images/spinner.gif\">);
|
||||
$('#rendered_visual_map').html('<div style=\"text-align: center\"> " . __('Loading...') . "<br /><img src=\"images/ajax-loader.gif\" /></div>');
|
||||
|
||||
var map_max_width = window.innerWidth * 0.90;
|
||||
var map_max_height = (window.innerHeight - 47) * 0.90;
|
||||
@ -134,8 +134,11 @@ class Visualmap {
|
||||
|
||||
ajax_load_map();
|
||||
|
||||
$( window ).resize(function() {
|
||||
ajax_load_map();
|
||||
// Detect orientation change to refresh dinamic content
|
||||
$(window).on({
|
||||
orientationchange: function(e) {
|
||||
ajax_load_map();
|
||||
}
|
||||
});
|
||||
</script>");
|
||||
$ui->endContent();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user