Merge branch 'ent-1624-extension-chrome-de-eventos-desactualizada' into 'develop'

Ent 1624 extension chrome de eventos desactualizada

See merge request artica/pandorafms!1152

extras/chrome_extension/css/popup.css

@@ -1,84 +1,170 @@
+* {
+    font-family: "Open Sans", "Noto Sans", sans-serif
+}
+
 body {
-    min-width:425px;
-    min-height:540px;
-    margin:5px;
-    font-family:Tahoma, Geneva, Arial;
-    font-size:10pt;
+    min-width: 425px;
+    min-height: 540px;
+    margin: 5px;
+    font-family: Tahoma, Geneva, Arial;
+    font-size: 10pt;
 }
-h1 { font-weight: bold; font-size:16px; margin:2px 0px 2px 0px; color:#237948; font-family:arial }
-h2{
-    color : black;
+h1 {
+    font-weight: bold;
+    font-size: 14px;
+    margin: 2px 0px 2px 0px;
 }
-p
-{
-    font-family:"Times New Roman";
-    font-size:20px;
+h2 {
+    color : #333;
+}
+p {
+    font-size: 20px;
+}
+a {
+    color: #254533;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+a:visited {
+    color: #254533; text-decoration:none;
+}
+a:visited:hover {
+    text-decoration: underline;
 }
 
-a { color: #254533; text-decoration:none; }
-a:hover { text-decoration:underline; }
-a:visited { color: #254533; text-decoration:none; }
-a:visited:hover { text-decoration:underline; }
+span.res {
+    font-size: 80%;
+    color: #555;
+}
 
-span.res { font-size:80%; color:#555; }
-
-img.pm { margin-right:3px;cursor:pointer; margin-top:0px; }
-div.main{
-    background-color : white;
+img.pm {
+    margin-right: 3px;
+    cursor: pointer;
+    margin-top: 2px;
+    float: right;
+}
+div.main {
+    background-color: white;
     height: 500px;
     width: 400px;
 }
-div.textarea{
-    background-color : #D5DED5;
-    width :100%
+div.textarea {
+    background-color: #D5DED5;
+    width: 100%
+}
+div.e {
+    text-align: right;
+    font-size:8pt;
+}
+div.b {
+    background-color:white;
+    display: none;
+}
+div.b p a {
+    font-size: 10pt;
 }
-div.e{ text-align:right; font-size:8pt; }
-div.b { background-color:white; border:1px solid #BABABA; margin:5px; padding:4px; display:none; }
-div.b p a { font-size: 10pt; }
-div.b p { margin:2px 0px 4px 0px; display:none; color:#333; font-size:9pt; }
 div.b div.items p {
-    margin:2px 0px 8px 0px; color:#333; width:355px;float:left;display:block;
+    margin: 2px 0px 8px 0px;
+    width: 355px;
+    float: left;
+    display: block;
 }
 div.b div.items p img {
-    float:left;margin:0px 3px 0px 0px;
+    float: left;
+    margin: 0px 3px 0px 0px;
 }
 
-div.options_header{
-    margin : 10px 10px;
+div.options_header {
+    margin: 10px 10px;
 }
 
-div.options_divider{
-    width : 100%;
-    background-color : #C8C8C8;
+div.options_divider {
+    width: 627px;
+    margin-top: 30px;
 }
 
-div.optionsG_textarea{
-    background-color : green;
-    width : 450px;
-    margin : 5px, 10px;
+div.options_divider h2{
+    margin: 20px 20px 0;
+    padding: 5px;
+    font-weight: 500;
+    border: 2px solid #82b92e;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    color: white;
+    text-align: center;
+    background: #82b92e;
+    font-size: 14px;
+    font-weight: 600;
 }
-div.options_textarea{
-    background-color : #ebebeb;
-    width : 550px;
-    margin : 10px 10px;
+
+div.options_textarea {
+    background-color: #f6f6f6;
+    width: 550px;
+    margin: 0 20px;
+    padding: 10px 10px 25px 25px;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border: 1px solid #e4e4e4;
+    border-top: 0;
+}
+
+div.options_footer {
+    width: 550px;
+    margin: 10px 10px;
     padding: 10px;
-	-webkit-border-radius:10px;    
-    border: 2px solid #c8c8c8;
 }
 
-div.options_footer{
-    width : 550px;
-    margin : 10px 10px;
-    padding: 10px;
+select {
+    background: white;
+    border: 1px solid #888;
+    font-size: smaller;
+    padding: 2px 1px;
+    width: 250px;
+}
+
+.sound_selector td:first-child {
+    padding-left: 25px;
+    width: 39%;
+}
+
+.options_textarea button {
+    background-color: #82b92e;
+    border: 1px solid #82b92e;
+    color: white;
+    padding: 6px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 12px;
+    border-radius: 2px;
+    margin: 25px 0px 0px 422px;
+}
+
+.options_textarea button:hover {
+    background-color: transparent;
+    color: #82b92e;
+    cursor: pointer;
+}
+
+.options_textarea h3 {
+    text-align: left;
+    font-size: 11.4pt;
+}
+
+button h3 {
+    margin: 0;
+    font-size: 10pt !important;
 }
 
 .tooltip {
-    display:none;
-    font-size:12px;
-    height:70px;
-    width:160px;
-    padding:25px;
-    color:#eee;
+    display: none;
+    font-size: 12px;
+    height: 70px;
+    width: 160px;
+    padding: 25px;
+    color: #eee;
 }
 
 .spinner {
@@ -87,11 +173,78 @@ div.options_footer{
     left: 50%;
     margin-left: -50px; 
     margin-top: -50px; 
-    text-align:center;
-    z-index:1234;
+    text-align: center;
+    z-index: 1234;
     overflow: auto;
     width: 100px; 
     height: 102px; 
 }
 
+.error {
+    display: flex;
+    border: solid #e4e4e4 1px;
+    border-radius: 2px;
+    background: #f6f6f6;
+    padding: 10px;
+    margin: 10px;
+    margin-top: 35px;
+}
 
+.error_text {
+    margin: 0 10px;
+}
+
+.result {
+    margin: 10px;
+    height: 500;
+    overflow-y: auto;
+}
+
+#events_title {
+    padding: 5px 0;
+    margin: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.event {
+    border: solid 1px #e5e5e5;
+    border-top: 0;
+    padding: 5px 6px;
+    color: white;
+}
+
+.event a {
+    margin-left: 5px;
+    color: white;
+    font-size: 9pt;
+}
+
+.sev-Warning a {
+    margin-left: 5px;
+    color: #333;
+}
+
+.event p {
+    margin: 0 0 0 6px;
+    padding-top: 2px;
+    display: none;
+    font-size: 8pt;
+}
+
+.sev-Warning {
+    background: #FDDD30;
+    color: #333;
+}
+.sev-Critical {
+    background: #F84348;
+}
+.sev-Informational {
+    background: #4CA8E0;
+}
+.sev-Normal {
+    background: #84B839;
+}
+.sev-Maintenance {
+    background: #A8A8A8;
+}

extras/chrome_extension/js/background.js

@@ -1,29 +1,35 @@
-var timer = null;
-var allEvents=new Array();
-var newEvents=new Array();
-var oldEvents=new Array();
-var api_div_numbers=21;
-
+var refreshTimer = null;
+var isFetching = null;
+var storedEvents = new Array();
+var notVisited = {};
 
 $(window).load(function() {
 	initilise();
-	if(timer) {
-		clearTimeout(timer);
-	}
-	timer =setTimeout(main , 100 );
+	// Wait some ms to throw main function
+	var delay = setTimeout(main, 100);
+	resetInterval();
 });
 
-
-
-function fetchEvents(){
-	return oldEvents;
+function fetchEvents() {
+	return storedEvents;
 }
 
+function fetchNotVisited() {
+	return notVisited;
+}
+
+function removeNotVisited(eventId) {
+	if (notVisited[eventId] === true) delete notVisited[eventId];
+}
 
 function main() {
-	var url=localStorage["ip_address"]+'/include/api.php?op=get&op2=events&return_type=csv&apipass='+localStorage["api_pass"]+'&user='+localStorage["user_name"]+'&pass='+localStorage["pass"];
-	var feedUrl = url;
-	localStorage["data_check"]="true";
+
+	chrome.runtime.sendMessage({text: "FETCH_EVENTS"});
+	// Do not fetch if is fetching now
+	if (isFetching) return;
+	isFetching = true;
+
+	var feedUrl = localStorage["ip_address"]+'/include/api.php?op=get&op2=events&return_type=csv&apipass='+localStorage["api_pass"]+'&user='+localStorage["user_name"]+'&pass='+localStorage["pass"];
 	req = new XMLHttpRequest();
 	req.onload = handleResponse;
 	req.onerror = handleError;
@@ -32,96 +38,85 @@ function main() {
 }
 
 function handleError() {
-	localStorage["data_check"]="false";
-		if(timer) {
-			clearTimeout(timer);
-		}
-		timer =setTimeout(main , 1000);
+	chrome.runtime.sendMessage({text: "FETCH_EVENTS_URL_ERROR"});
+	isFetching = false;
 }
 
 function handleResponse() {
 	var doc = req.responseText;
 	if (doc=="auth error") {
-		localStorage["data_check"]="false";
-		if(timer) {
-			clearTimeout(timer);
-		}
-		timer =setTimeout(main , 1000);
-	}
-	else{
-		var n=doc.search("404 Not Found");
-		if(n>0){
-			localStorage["data_check"]="false";
-			if(timer) {
-				clearTimeout(timer);
-			}
-			timer =setTimeout(main , 1000);
-		}
-		
-		else{
-			localStorage["data_check"]="true"
+		chrome.runtime.sendMessage({text: "FETCH_EVENTS_URL_ERROR"});
+	} else {
+		var n = doc.search("404 Not Found");
+		if (n>0) {
+			chrome.runtime.sendMessage({text: "FETCH_EVENTS_DATA_ERROR"});
+		} else {
 			getEvents(doc);
+			chrome.runtime.sendMessage({text: "FETCH_EVENTS_SUCCESS"});
 		}
 	}
+	isFetching = false;
 }
 
 function getEvents(reply){
-	if(check()){
-		all_event_array=reply.split("\n");
-		allEvents=divideArray(all_event_array);
-		if(oldEvents.length==0){
-			oldEvents=allEvents;
+	var fetchedEvents = parseReplyEvents(reply);
+
+	// If there is no events requested, mark all as visited
+	if (storedEvents.length == 0) {
+		notVisited = {};
+		storedEvents = fetchedEvents;
+		return;
+	}
+
+	// Discriminate the new events
+	newEvents=fetchNewEvents(fetchedEvents,storedEvents);
+	var newNotVisited = {};
+	var notVisitedCount = 0;
+	
+	// Check if popup is displayed to make some actions
+	var views = chrome.extension.getViews({ type: "popup" });
+	for(var k=0;k<newEvents.length;k++){
+		newNotVisited[newEvents[k]['id']] = true;
+		if (views.length == 0) {
+			notVisitedCount++;
+			displayNotification (newEvents[k])
+			alertsSound(newEvents[k]);
 		}
-		newEvents=fetchNewEvents(allEvents,oldEvents);
-		if(newEvents.length!=0){
-			for(var k=0;k<newEvents.length;k++){
-				 localStorage["new_events"]++;
-				showNotification(k);
-			}
+	}
+
+	// Make that the old events marked as not visited remains with the
+	// same status
+	for(var k=0;k<fetchedEvents.length;k++){
+		if (notVisited[fetchedEvents[k]['id']] === true) {
+			newNotVisited[fetchedEvents[k]['id']] = true;
+			notVisitedCount++;
 		}
-		oldEvents=allEvents;
-		if(localStorage["new_events"]!=0){
-				showBadge(localStorage["new_events"]);
-		}
-		else{
-				hideBadge();    
-		}
-		
-		
-		if(timer) {
-			clearTimeout(timer);
-		}
-		timer =setTimeout(main , localStorage["refresh"]*1000 );
+	}
+	notVisited = newNotVisited;
+
+	// Update the number
+	localStorage["new_events"] = (views.length == 0) ? notVisitedCount : 0;
+	updateBadge();
+
+	// Store the requested events
+	storedEvents = fetchedEvents;
+}
+
+function updateBadge() {
+	if (localStorage["new_events"] != 0) {
+		chrome.browserAction.setBadgeBackgroundColor({color:[0,200,0,255]});
+		chrome.browserAction.setBadgeText({ text: localStorage["new_events"] });
+	} else {
+		chrome.browserAction.setBadgeText({ text: "" });
 	}
 }
 
-function showBadge(txt) {
-chrome.browserAction.setBadgeBackgroundColor({color:[0,200,0,255]});
-chrome.browserAction.setBadgeText({ text: txt });
-}
-function hideBadge() {
-chrome.browserAction.setBadgeText({ text: "" });
-}
-function divideArray(e_array){
-	var Events=new Array();
-	for(var i=0;i<e_array.length;i++){
-		var event=e_array[i].split(";");
-		Events.push(event); 
-	}
-	return Events;
-}
-
-function hideNotification(){
-
-}
-
-
 function fetchNewEvents(A,B){
 	var arrDiff = new Array();
 	for(var i = 0; i < A.length; i++) {
 		var id = false;
 		for(var j = 0; j < B.length; j++) {
-			if(A[i][0] == B[j][0]) {
+			if(A[i]['id'] == B[j]['id']) {
 				id = true;
 				break;
 			}
@@ -134,115 +129,183 @@ function fetchNewEvents(A,B){
 }
 
 
-function showNotification(eventId){
-	var Severity;
-	if(localStorage["sound_alert"]=="on"){
-		if(newEvents[eventId][19]=="Critical"){
+function parseReplyEvents (reply) {
+
+	// Split the API response
+	var e_array = reply.split("\n");
+
+	// Form a properly object
+	var fetchedEvents=new Array();
+	for(var i=0;i<e_array.length;i++){
+		// Avoid to parse empty lines
+		if (e_array[i].length == 0) continue;
+
+		var event=e_array[i].split(";");
+		fetchedEvents.push({
+			'id' : event[0],
+			'agent_name' : event[1],
+			'agent' : event[2],
+			'date' : event[5],
+			'title' : event[6],
+			'module' : event[9],
+			'type' : event[14],
+			'source' : event[17],
+			'severity' : event[28],
+			'visited' : false
+		});
+	}
+	// Return the events
+	return fetchedEvents;
+}
+
+function alertsSound(pEvent){
+	if(localStorage["sound_alert"]!="on"){
+		return;
+	}
+
+	switch (pEvent['severity']) {
+		case "Critical":
 			playSound(localStorage["critical"]);
-		}
-		if(newEvents[eventId][19]=="Informational"){
+			break;
+		case "Informational":
 			playSound(localStorage["informational"]);
-		}
-		if(newEvents[eventId][19]=="Maintenance"){
+			break;
+		case "Maintenance":
 			playSound(localStorage["maintenance"]);
-		}
-		if(newEvents[eventId][19]=="Normal"){
+			break;
+		case "Normal":
 			playSound(localStorage["normal"]);
-		}
-		if(newEvents[eventId][19]=="Warning"){
+			break;
+		case "Warning":
 			playSound(localStorage["warning"]);
-		}
+			break;
 	}
-	var notification = webkitNotifications.createHTMLNotification(
-	"notification.html?event="+eventId  
-);
-	notification.show();
 }
 
-function getNotification(eventId){
-	var title=newEvents[eventId][6];
-	var id;
-	if(newEvents[eventId][9]==0){
-		id=".";
+function displayNotification (pEvent) {
+
+	// Check if the user is okay to get some notification
+	if (Notification.permission === "granted") {
+		// If it's okay create a notification
+		getNotification(pEvent);
 	}
-	else {
-		id= " in the module with Id "+ newEvents[eventId][9] + ".";
-	}
-			   
-	var event = newEvents[eventId][14]+" : "+newEvents[eventId][17]+". Event occured at "+ newEvents[eventId][5]+id;
-	return '<a>' + title + '</a> <br/> <span style="font-size:80%">' + event + '</span>';
 	
+	// Otherwise, we need to ask the user for permission
+	// Note, Chrome does not implement the permission static property
+	// So we have to check for NOT 'denied' instead of 'default'
+	else if (Notification.permission !== 'denied') {
+		Notification.requestPermission(function (permission) {
+			// Whatever the user answers, we make sure we store the information
+			if(!('permission' in Notification)) {
+				Notification.permission = permission;
+			}
+	
+			// If the user is okay, let's create a notification
+			if (permission === "granted") getNotification(pEvent);
+		});
+	}
 }
 
-function check(){
-	if (localStorage["data_check"]=="true" && localStorage["ip_address"] != null && localStorage["api_pass"] != null &&localStorage["user_name"]!=null &&localStorage["pass"]!=null && localStorage["ip_address"] != "" && localStorage["api_pass"] != "" &&localStorage["user_name"]!="" &&localStorage["pass"]!=""){
-		return true;
+function getNotification(pEvent){
+	
+	// Build the event text
+	var even = pEvent['type'];
+	if (pEvent['source'] != '')	even += " : " + pEvent['source'];
+	even += ". Event occured at " + pEvent['date'];
+	if(pEvent['module'] != 0) even += " in the module with Id "+ pEvent['module'];
+	even += ".";
+
+	var url = (pEvent['agent']=="")
+		? localStorage["ip_address"]+"/index.php?sec=eventos&sec2=operation/events/events"
+		: localStorage["ip_address"]+"/index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente=" + pEvent['agent'];
+
+	var notification = new Notification(
+		pEvent['title'],
+		{
+			body: even,
+			icon: "images/icon.png"
+		}
+	);
+
+	// Add the link
+	notification.onclick = function (event) {
+		event.preventDefault();
+		window.open(url, '_blank');
 	}
-	else 
-		return false;
+
+	// Close notification after 10 secs
+	setTimeout(function() {notification.close()}, 10000);
+}
+
+function resetInterval () {
+	if (refreshTimer) clearInterval(refreshTimer);
+	refreshTimer = setInterval(main, localStorage["refresh"]*1000);
 }
 
 function initilise(){
 
-		if(localStorage["ip_address"]==undefined){
-			localStorage["ip_address"]="http://firefly.artica.es/pandora_demo";
-					
-		}
-		
-		if(localStorage["api_pass"]==undefined){
-			localStorage["api_pass"]="doreik0";
-		}
-		
-		if(localStorage["user_name"]==undefined){
-			localStorage["user_name"]="demo";
-		}
-		
-		if(localStorage["pass"]==undefined){
-			localStorage["pass"]="demo";
-		}
-		if(localStorage["critical"]==null){
-			localStorage["critical"]="11";
-		}
-		if(localStorage["informational"]==null){
-			localStorage["informational"]="1";
-		}
-		if(localStorage["maintenance"]==null){
-			localStorage["maintenance"]="10";
-		}
-		if(localStorage["normal"]==null){
-			localStorage["normal"]="6";
-		}
-		if(localStorage["warning"]==null){
-			localStorage["warning"]="2";
-		}
-		if(localStorage["events"]==null){
-			localStorage["events"]=20;
-		}
-		if(localStorage["refresh"]==null){
-			localStorage["refresh"]="10";
-		}
-		if(localStorage["ip_address"]==null){
-			localStorage["ip_address"]="http://firefly.artica.es/pandora_demo";
-		}
-		
-		if(localStorage["api_pass"]==null){
-			localStorage["api_pass"]="doreik0";
-		}
-		
-		if(localStorage["user_name"]==null){
-			localStorage["user_name"]="demo";
-		}
-		
-		if(localStorage["pass"]==null){
-			localStorage["pass"]="demo";
-		}
-		if(localStorage["sound_alert"]==null){
-			localStorage["sound_alert"]="on";
-		}
-		if(localStorage["changed"]==null){
-			localStorage["changed"]="false";
-		}
-		if(localStorage["new_events"]==null){
-			localStorage["new_events"]=parseInt(localStorage["events"]);
-		}
+	if (isFetching == null) isFetching = false;
+	if(localStorage["ip_address"]==undefined){
+		localStorage["ip_address"]="http://firefly.artica.es/pandora_demo";
+	}
+	
+	if(localStorage["api_pass"]==undefined){
+		localStorage["api_pass"]="doreik0";
+	}
+	
+	if(localStorage["user_name"]==undefined){
+		localStorage["user_name"]="demo";
+	}
+	
+	if(localStorage["pass"]==undefined){
+		localStorage["pass"]="demo";
+	}
+	if(localStorage["critical"]==null){
+		localStorage["critical"]="11";
+	}
+	if(localStorage["informational"]==null){
+		localStorage["informational"]="1";
+	}
+	if(localStorage["maintenance"]==null){
+		localStorage["maintenance"]="10";
+	}
+	if(localStorage["normal"]==null){
+		localStorage["normal"]="6";
+	}
+	if(localStorage["warning"]==null){
+		localStorage["warning"]="2";
+	}
+	if(localStorage["events"]==null){
+		localStorage["events"]=20;
+	}
+	if(localStorage["refresh"]==null){
+		localStorage["refresh"]="10";
+	}
+	if(localStorage["ip_address"]==null){
+		localStorage["ip_address"]="http://firefly.artica.es/pandora_demo";
+	}
+	
+	if(localStorage["api_pass"]==null){
+		localStorage["api_pass"]="doreik0";
+	}
+	
+	if(localStorage["user_name"]==null){
+		localStorage["user_name"]="demo";
+	}
+	
+	if(localStorage["pass"]==null){
+		localStorage["pass"]="demo";
+	}
+	if(localStorage["sound_alert"]==null){
+		localStorage["sound_alert"]="on";
+	}
+	if(localStorage["changed"]==null){
+		localStorage["changed"]="false";
+	}
+	if(localStorage["new_events"]==null){
+		localStorage["new_events"]=parseInt(localStorage["events"]);
+	}
+	if(localStorage["error"]==null) {
+		localStorage["error"] = true;
+	}
 }

extras/chrome_extension/js/options.js

@@ -11,7 +11,7 @@ function initialise(){
 	document.getElementById('normal').value = localStorage["normal"]; 
 	document.getElementById('warning').value = localStorage["warning"];
 	document.getElementById('refresh').value = localStorage["refresh"];
-	document.getElementById('events').value = localStorage["events"];
+	document.getElementById('number_events').value = localStorage["events"];
 	if(localStorage["sound_alert"]=="on"){
 		disable(false);
 		document.getElementById('sound_alert_o').checked=true;
@@ -20,7 +20,6 @@ function initialise(){
 		disable(true);
 		document.getElementById('sound_alert_f').checked=true;
 	}
-                
 }
             
 function change(value, id){
@@ -46,16 +45,13 @@ function change_o(value, id){
 	if(id=="refresh"){
 		localStorage["refresh"]=value;
 	}
-	if(id=="events"){
+	if(id=="number_events"){
 		localStorage["events"]=value;
 	}
 }
 
 function change_global(value,id){
-	console.log("value => "+value);
-	console.log("id => "+id);
 	bg=chrome.extension.getBackgroundPage();
-	bg.location.reload();
 	if(id=="ip_address"){
 		localStorage["ip_address"]=value;
 	}
@@ -96,12 +92,6 @@ function disable(state){
 	}
 }
 
-function windowClose() {
-	//window.close();
-	console.log("close");
-}
-
-
 //Add callbacks to elements
 $(document).ready (function () {
 	
@@ -163,13 +153,12 @@ $(document).ready (function () {
 		change_o($(this).val(), "refresh");
 	});
 	
-	$("#events").change(function () {
-		change_o($(this).val(), "events");
+	$("#number_events").change(function () {
+		change_o($(this).val(), "number_events");
 	});
 		
 	//Close button
 	$("#close").click (function () {
 		window.close();
 	});
-	
 });

extras/chrome_extension/js/popup.js

@@ -1,5 +1,3 @@
-var timer = null;
-var event_array;
 var max_events;
 var bg;
 $(document).ready(function(){
@@ -8,198 +6,165 @@ $(document).ready(function(){
 		localStorage["events"]="20";
 	}
 	bg=chrome.extension.getBackgroundPage();
-	if(timer) {
-		 clearTimeout(timer);
-	}
-	timer =setTimeout(mainPoP , 2000 ); 
-});
 
-function mainPoP(){
-	if(bg.check()){
+	// Display the information
+	if (bg.fetchEvents().length == 0) {
+		showError("Error in fetching data!! Check your internet connection");
+	} else {
 		showEvents();
 	}
-	else
-	{
-		showUrlError();
-	}
-}
-function showUrlError(){
-	var res=document.createDocumentFragment();
-	var r = document.getElementById('e');              
-	var eve=document.createElement('div');
-	eve.id="event_temp";
-	eve.setAttribute("class","b");
-	
-	var p = document.createElement('a'); 
-	p.href="options.html";
-	p.target="_blank";
-	p.innerText="Configure ip address,API password, user name and password with correct values";
-	eve.appendChild(p);
-	res.appendChild(eve);
-	r.parentNode.insertBefore(res,r);
-	$('.loader').hide();
-	$('div.b').show();
-	
-	if(timer) {
-		clearTimeout(timer);
-	}
-	timer =setTimeout(refresh , 1000 );
+
+	// Adding buttons listeners
+	document.getElementById("m_refresh").addEventListener("click", mrefresh);
+
+	// Added listener to background messages
+	chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
+		switch (message.text) {
+			case "FETCH_EVENTS":
+				setSpinner();
+				//$('div.b').hide();
+				break;
+			case "FETCH_EVENTS_SUCCESS":
+				unsetSpinner();
+				showEvents();
+				break;
+			case "FETCH_EVENTS_DATA_ERROR":
+				unsetSpinner();
+				showError("Error in fetching data!! Check your internet connection");
+				break;
+			case "FETCH_EVENTS_URL_ERROR":
+				unsetSpinner();
+				showError("Configure ip address,API password, user name and password with correct values");
+				break;
+			default:
+				console.log("Unrecognized message: ", message.text);
+				break;
+		}
+	});
+});
+
+function setSpinner () {
+	$('#refr_img_id').attr("src", "images/spinny.gif");
 }
 
-function showDataError(){
-	var res=document.createDocumentFragment();
-	var r = document.getElementById('e');              
-	var eve=document.createElement('div');
-	eve.id="event_temp";
-	eve.setAttribute("class","b");
-	
-	var p = document.createElement('a'); 
-	p.innerText="Error in fetching data!! Check your internet connection";
-	eve.appendChild(p);
-	res.appendChild(eve);
-	r.parentNode.insertBefore(res,r);
-	$('.loader').hide();
-	$('div.b').show();
-	
-	if(timer) {
-		clearTimeout(timer);
-	}
-	timer =setTimeout(refresh , 1000 );
+function unsetSpinner() {
+	$('#refr_img_id').attr("src", "images/refresh.png");
+}
+
+function clearError() {
+	$('.error').hide();
+	$('.error a').text("");
+	$('.result').css('height', null);
+}
+
+function showError(text){
+	$('.error a').text(text);
+	$('.error').show();
+	$('.result').height(420);
 }
 
 function showEvents(){
-	var allEvents=bg.fetchEvents();
-	var r = document.getElementById('e'); 
-	var res=document.createDocumentFragment();               
+
+	clearError();
+	$('#events').empty();
+	var e_refr = document.getElementById('event_temp');
+	if(e_refr){
+			wrapper.removeChild(e_refr);
+	}
+	var allEvents = bg.fetchEvents();
+	var notVisitedEvents = bg.fetchNotVisited();
 	var eve=document.createElement('div');
 	eve.id="event_temp";
 	eve.setAttribute("class","b");
 	
 	var i=0;
 	if(allEvents.length>0){
-		while(i<max_events){               
+		while(i<max_events && i<allEvents.length){
 			var eve_title=document.createElement('div');
+			eve_title.id = 'e_' + i  + '_' + allEvents[i]['id'];
 			var img = document.createElement('img');
-			img.src = 'images/plus.gif';
-			img.width = '9';
-			img.height='9';
+			img.src = 'images/plus.png';
 			img.className ='pm';
-			img.id='i_' + i;
+			img.id='i_' + i  + '_' + allEvents[i]['id'];
 			eve_title.appendChild(img);
+			var div_empty = document.createElement('img');
 			var a = document.createElement('a');
 			var temp_style;
 			
-			var agent_url;
-			if(allEvents[i][1]==""){;
-					agent_url=localStorage["ip_address"]+"/index.php?sec=eventos&sec2=operation/events/events" ; 
-			}else{
-					agent_url=localStorage["ip_address"]+"/index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente="+allEvents[i][1];
-			}
+			var agent_url = (allEvents[i]["agent_name"] == 0)
+				? localStorage["ip_address"]
+					+ "/index.php?sec=eventos&sec2=operation/events/events"
+				: localStorage["ip_address"]
+					+ "/index.php?sec=estado&sec2=operation/agentes/ver_agente&id_agente="
+					+ allEvents[i]['agent_name'];
 			a.setAttribute("href",agent_url);
-			a.target="_blank";
+			a.target = "_blank";
+			a.className = 'a_2_mo';
 			
 			
-			a.innerText = allEvents[i][6];
-			
-			if(i<localStorage["new_events"]){
-					var temp_style="font-weight:bold;";
-			}
-			else{
-					var temp_style="font-weight:normal;";
+			a.innerText = allEvents[i]['title'];			
+			eve_title.setAttribute("class","event sev-" + allEvents[i]['severity']);
+
+			if (notVisitedEvents[allEvents[i]['id']] === true) {
+				eve_title.style.fontWeight = 600;
 			}
 			
-			
-			if(allEvents[i][19]=="Warning"){
-				eve_title.setAttribute("style","background:#FCED7E; margin-bottom:-12px;"+temp_style);
-			}
-			if(allEvents[i][19]=="Critical"){
-				eve_title.setAttribute("style","background:#FA7A7A; margin-bottom:-12px;"+temp_style);
-			}
-			if(allEvents[i][19]=="Informational"){
-				eve_title.setAttribute("style","background:#7FB9FA; margin-bottom:-12px;"+temp_style);
-			}
-			if(allEvents[i][19]=="Normal"){
-				eve_title.setAttribute("style","background:#A8D96C; margin-bottom:-12px;"+temp_style);
-			}
-			if(allEvents[i][19]=="Maintenance"){
-				eve_title.setAttribute("style","background:#BABDB6; margin-bottom:-12px;"+temp_style);
-			}
 			eve_title.appendChild(a);
 			eve.appendChild(eve_title);
-			var b = document.createElement('br');
-			eve.appendChild(b);
 			
-			var time=allEvents[i][5].split(" ");
+			var time=allEvents[i]['date'].split(" ");
 			var time_text = time[0]+" "+time[1];
 			
-			
 			var p = document.createElement('p');
-			var id;
-			if(allEvents[i][9]==0){
-				id=".";
-			}
-			else {
-				id= " in the module with Id "+ allEvents[i][9] + ".";
-			}
+			var id = (allEvents[i]['module']==0)
+				? "."
+				: " in the module with Id "+ allEvents[i]['module'] + ".";
 		   
-			p.innerText = allEvents[i][14]+" : "+allEvents[i][17]+". Event occured at "+ time_text+id;
+			p.innerText = allEvents[i]['type']+" : "+allEvents[i]['source']+". Event occured at "+ time_text+id;
 			p.id = 'p_' + i;
-			eve.appendChild(p);
+			eve_title.appendChild(p);
 			i++;
 		}
 	
-		res.appendChild(eve);
-		r.parentNode.insertBefore(res,r);
+		$('#events').append(eve);
 
 		$('img.pm').click(showHide);
-		$('.loader').hide();
 		$('div.b').show();
-	}
-	else{
-	showDataError();
+	} else {
+		showError("Error in fetching data!! Check your internet connection");
 	}
 	
 	localStorage["new_events"]=0;
-	bg.hideBadge();
-	if(timer) {
-		clearTimeout(timer);
-	}
-	timer =setTimeout(refresh , 30*1000 );
+	bg.updateBadge();
 }
 
 function showHide() {
 	var id = $(this).attr('id');
-	var num = id.split("_")[1];
-	var pid = "p_" + num;
+	// Image id has the form i_<position>_<eventId>
+	var nums = id.split('_');
+	var pid = "p_" + nums[1];
+
+	// Mark as visited if visited
+	if($(this).parent().css('font-weight') == '600') {
+		bg.removeNotVisited(nums[2]);
+		$(this).parent().css('font-weight', '');
+	}
+
+	// Toggle information
 	if($('#' + pid).css('display') == 'none') {
-		$('#' + pid).slideDown("fast");
-		$(this).attr({src: 'images/minus.gif'});
+		$('#' + pid).slideDown();
+		$(this).attr({src: 'images/minus.png'});
 	}
 	else {
-		$('#' + pid).slideUp("fast");
-		$(this).attr({src: 'images/plus.gif'});
+		$('#' + pid).slideUp();
+		$(this).attr({src: 'images/plus.png'});
 	}
 }
 
-function refresh(){
-	localStorage["new_events"]=0;
-	bg.hideBadge();
-	var e = document.getElementById('event_temp');
-	if(e){
-			e.parentNode.removeChild(e);
-	}
-	mainPoP();
-}
-
-
 function mrefresh(){
 	localStorage["new_events"]=0;
-	bg.hideBadge();
-	var bg=chrome.extension.getBackgroundPage();
-	bg.location.reload();
-	var e = document.getElementById('event_temp');
-	if(e){
-			e.parentNode.removeChild(e);
-	}
-	mainPoP();
+	bg.updateBadge();
+	clearError();
+	bg.resetInterval();
+	bg.main();
 }

extras/chrome_extension/manifest.json

@@ -20,10 +20,10 @@
     },
     "options_page": "options.html",
     "permissions": [
-    "tabs",
-    "notifications",
-    "http://*/*",
-    "background"
+        "tabs",
+        "notifications",
+        "http://*/*",
+        "background"
     ],
     "default_locale": "en"
  }

extras/chrome_extension/options.html

@@ -3,6 +3,7 @@
 	<head>
         <title>Pandora FMS extension</title>
         <link rel="stylesheet" href="css/popup.css" type="text/css" /> 
+        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,500,600' rel='stylesheet' type='text/css'>
         <script src="js/jquery-1.7.2.min.js"></script>
         <script src="js/sound.js"></script>
         <script src="js/options.js"></script>
@@ -35,23 +36,18 @@
                     <td> <input type="password" size=50px name="pass" id="pass"> </td>
                 </tr>
             </table>
-	</div>
-	<div class="options_textarea">
+            <br/>
             <table width=450px>
                 <caption><h3>Event Alert Sounds Configuration</h3></caption>
                 <tr>
-                    <td title="All sound alerts of notifications on/off" style="cursor:help">Sound Alerts </td>
-                    <td>
+                    <td style='padding-bottom: 15px;' title="All sound alerts of notifications on/off" style="cursor:help">Sound Alerts </td>
+                    <td style='padding-bottom: 15px;'>
                         <input type="radio" id="sound_alert_o" name="sound_alert" value="on" /> On
                         <input type="radio" id="sound_alert_f" name="sound_alert" value="off" /> Off
 
                     </td>
                 </tr>
-                <tr>
-                    <td><b>Severity</b></td>
-                    <td ><b>Sound Type</b></td>
-                </tr>
-                <tr>
+                <tr class="sound_selector">
                     <td>Critical</td>
                     <td>
                         <select id="critical">
@@ -69,7 +65,7 @@
                         </select>
                     </td>
                 </tr>
-                <tr>
+                <tr class="sound_selector">
                     <td>Informational</td>
                     <td>
                         <select id="informational">
@@ -87,7 +83,7 @@
                         </select>
                     </td>
                 </tr>
-                <tr>
+                <tr class="sound_selector">
                     <td>Maintenance</td>
                     <td>
                         <select id="maintenance">
@@ -105,7 +101,7 @@
                         </select>
                     </td>
                 </tr>
-                <tr>
+                <tr class="sound_selector">
                     <td>Normal</td>
                     <td>
                         <select id="normal">
@@ -123,7 +119,7 @@
                         </select>
                     </td>
                 </tr>
-                <tr>
+                <tr class="sound_selector">
                     <td>Warning</td>
                     <td>
                         <select id="warning">
@@ -142,8 +138,8 @@
                     </td>
                 </tr>
                 <tr>
-                    <td title="Automatic Refresh time to fetch new events" style="cursor:help">Auto Refresh Time</td>
-                    <td>
+                    <td style='padding-top: 15px;' title="Automatic Refresh time to fetch new events" style="cursor:help">Auto Refresh Time</td>
+                    <td style='padding-top: 15px;'>
                         <select id="refresh">
                             <option value="5">5 seconds</option>
                             <option value="10">10 seconds</option>
@@ -161,7 +157,7 @@
                 <tr>
                     <td title="Number of events to be displayed in pop up window" style="cursor:help">Number of events</td>
                     <td>
-                        <select id="events">
+                        <select id="number_events">
                             <option value="5">5</option>
                             <option value="10">10</option>
                             <option value="12">12</option>
@@ -173,10 +169,11 @@
                     </td>
                 </tr>
             </table>
+
+			<button id="close" type="button"><h3>Close</h3></button>
         </div>
         <div class="options_footer">
-			<button id="close" type="button"><h3>Close</h3></button>
-			<p style="font-family:arial;font-style:italic;color:black;font-size:11px;">Author Information : R.Hareesan (rharishan@gmail.com)</p>
+			<p style="display: none;font-family:arial;font-style:italic;color:black;font-size:11px;">Author Information : R.Hareesan (rharishan@gmail.com)</p>
         </div>
     </body>
     </html>

extras/chrome_extension/popup.html

@@ -1,5 +1,6 @@
 <html>
     <head>
+        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
         <link rel="stylesheet" href="css/popup.css" type="text/css" /> 
         <script src="js/jquery-1.7.2.min.js"></script>
         <script src="js/popup.js"></script>
@@ -7,16 +8,28 @@
     <body>
         <div>
             <div id="head"> 
-                <a href=""><img src="images/logo.png" border="0"/></a><a href="options.html" target="_blank"><img src="images/gear.png" style='float:right;padding:5px 5px 0 0;border:0px' title="Options"></a>
-                <a onclick="mrefresh();" style="cursor:pointer" id="m_refresh"><img src="images/refresh.png"  style='float:right;padding:5px 5px 0 0;border:0px' title="Refresh"></a>
-            </div> 
-
-            <div class="loader">   <img src='images/spinny.gif'/> Loading... </div>
-            <div class="result" id="result" >
-                <div class="b" id="event">
-                    <h1>Events</h1>
-                    <div class="e" id="e">
+                <a href=""><img src="images/logo.png" border="0"/></a>
+                <a href="options.html" target="_blank">
+                    <img src="images/gear.png" style='float:right;padding:5px 5px 0 0;border:0px' title="Options">
+                </a>
+                <a style="cursor:pointer" id="m_refresh">
+                    <img src="images/refresh.png" id="refr_img_id" style='float:right;padding:5px 5px 0 0;border:0px' title="Refresh">
+                </a>
+            </div>
 
+            <div style="margin-top: 35px">
+                <div class="error">
+                    <div>
+                        <img src="images/error.png" title="error">
+                    </div>
+                    <div class="error_text">
+                        <h1>ERROR</h1>
+                        <a href="options.html" target="_blank" ></a>
+                    </div>
+                </div>
+                <div class="result" id="result">
+                    <div class="b" id="events">
+                        <div class="e" id="e" />
                     </div>
                 </div>
             </div>