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

pandora_console/ChangeLog

@@ -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

pandora_console/mobile/include/style/main.css

@@ -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_agent_Modules .ui-table-cell-label,
-	#list_Modules_Embedded .cell_4 .ui-table-cell-label {
+	#list_agent_Modules .cell_2, 
-		min-width: auto !important;
+	#list_agent_Modules .cell_3 {
-	}
-	
-	#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 {
 		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;
 }
 

pandora_console/mobile/index.php

@@ -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);

pandora_console/mobile/operation/agent.php

@@ -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(
+					$html .= '<div id="events_bar"></div>';
-						$this->id, 250, 15, 86400, ui_get_full_url(false), true);
 					$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>");

pandora_console/mobile/operation/module_graph.php

@@ -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() {
+				// Detect orientation change to refresh dinamic content
-					load_graph();
+				$(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());

pandora_console/mobile/operation/modules.php

@@ -570,7 +570,7 @@ class Modules {
 				}
 				
 				$table = new Table();
-				$table->id = 'list_Modules';
+				$table->id = 'list_agent_Modules';
 				
 				$table->importFromHash($listModules['modules']);
 				

pandora_console/mobile/operation/tactical.php

@@ -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);				
+				$modules_status_tiny = reporting_get_stats_modules_status($data, 175, 100, $links);
-				//$formatted_data = $alerts_stats . "<br />\n";
 				$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();
 	}

pandora_console/mobile/operation/visualmap.php

@@ -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() {
+				// Detect orientation change to refresh dinamic content
-					ajax_load_map();
+				$(window).on({
+					orientationchange: function(e) {
+						ajax_load_map();
+					}
 				});
 			</script>");
 		$ui->endContent();