diff --git a/extras/chrome_extension/css/popup.css b/extras/chrome_extension/css/popup.css index 8f8d6f2c79..a736abea57 100644 --- a/extras/chrome_extension/css/popup.css +++ b/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; +} \ No newline at end of file diff --git a/extras/chrome_extension/images/error.png b/extras/chrome_extension/images/error.png new file mode 100644 index 0000000000..af676eb8f1 Binary files /dev/null and b/extras/chrome_extension/images/error.png differ diff --git a/extras/chrome_extension/images/gear.png b/extras/chrome_extension/images/gear.png index 77863fc470..bc064777f9 100644 Binary files a/extras/chrome_extension/images/gear.png and b/extras/chrome_extension/images/gear.png differ diff --git a/extras/chrome_extension/images/icon.png b/extras/chrome_extension/images/icon.png index a793b1ca3b..1fb89b2f3e 100644 Binary files a/extras/chrome_extension/images/icon.png and b/extras/chrome_extension/images/icon.png differ diff --git a/extras/chrome_extension/images/icon128.png b/extras/chrome_extension/images/icon128.png index 5fae8cedf8..1859358929 100644 Binary files a/extras/chrome_extension/images/icon128.png and b/extras/chrome_extension/images/icon128.png differ diff --git a/extras/chrome_extension/images/icon16.png b/extras/chrome_extension/images/icon16.png index 3bc0ff4040..59788e3458 100644 Binary files a/extras/chrome_extension/images/icon16.png and b/extras/chrome_extension/images/icon16.png differ diff --git a/extras/chrome_extension/images/icon19.png b/extras/chrome_extension/images/icon19.png index 79e819f62e..d3749f3f34 100644 Binary files a/extras/chrome_extension/images/icon19.png and b/extras/chrome_extension/images/icon19.png differ diff --git a/extras/chrome_extension/images/icon32.png b/extras/chrome_extension/images/icon32.png index a27ee9dc3f..33c63fbb56 100644 Binary files a/extras/chrome_extension/images/icon32.png and b/extras/chrome_extension/images/icon32.png differ diff --git a/extras/chrome_extension/images/icon48.png b/extras/chrome_extension/images/icon48.png index f6941faccf..1fb89b2f3e 100644 Binary files a/extras/chrome_extension/images/icon48.png and b/extras/chrome_extension/images/icon48.png differ diff --git a/extras/chrome_extension/images/icon64.png b/extras/chrome_extension/images/icon64.png index c9cb50c065..cdf016624c 100644 Binary files a/extras/chrome_extension/images/icon64.png and b/extras/chrome_extension/images/icon64.png differ diff --git a/extras/chrome_extension/images/logo.png b/extras/chrome_extension/images/logo.png index 16bf203322..3305749f7a 100644 Binary files a/extras/chrome_extension/images/logo.png and b/extras/chrome_extension/images/logo.png differ diff --git a/extras/chrome_extension/images/minus.gif b/extras/chrome_extension/images/minus.gif deleted file mode 100644 index 2e74ca7bb9..0000000000 Binary files a/extras/chrome_extension/images/minus.gif and /dev/null differ diff --git a/extras/chrome_extension/images/minus.png b/extras/chrome_extension/images/minus.png new file mode 100644 index 0000000000..380d9112b8 Binary files /dev/null and b/extras/chrome_extension/images/minus.png differ diff --git a/extras/chrome_extension/images/plus.gif b/extras/chrome_extension/images/plus.gif deleted file mode 100644 index 47db223eb0..0000000000 Binary files a/extras/chrome_extension/images/plus.gif and /dev/null differ diff --git a/extras/chrome_extension/images/plus.png b/extras/chrome_extension/images/plus.png new file mode 100644 index 0000000000..2666d189e3 Binary files /dev/null and b/extras/chrome_extension/images/plus.png differ diff --git a/extras/chrome_extension/images/refresh.png b/extras/chrome_extension/images/refresh.png index d4c16a67a0..3f81fdde0d 100644 Binary files a/extras/chrome_extension/images/refresh.png and b/extras/chrome_extension/images/refresh.png differ diff --git a/extras/chrome_extension/images/spinny.gif b/extras/chrome_extension/images/spinny.gif index bb6d8f7ca8..6bf2309a0b 100644 Binary files a/extras/chrome_extension/images/spinny.gif and b/extras/chrome_extension/images/spinny.gif differ diff --git a/extras/chrome_extension/js/background.js b/extras/chrome_extension/js/background.js index 3de478b61b..8f3b80e866 100644 --- a/extras/chrome_extension/js/background.js +++ b/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; + } } diff --git a/extras/chrome_extension/js/options.js b/extras/chrome_extension/js/options.js index c8ff5cd6c1..cee8033dde 100644 --- a/extras/chrome_extension/js/options.js +++ b/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(); }); - }); diff --git a/extras/chrome_extension/js/popup.js b/extras/chrome_extension/js/popup.js index c6213cbf4e..e9f41c328f 100644 --- a/extras/chrome_extension/js/popup.js +++ b/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(); } diff --git a/extras/chrome_extension/manifest.json b/extras/chrome_extension/manifest.json index 025e680ffa..662eaf24ee 100644 --- a/extras/chrome_extension/manifest.json +++ b/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" } diff --git a/extras/chrome_extension/options.html b/extras/chrome_extension/options.html index 7678782265..59410b8b05 100644 --- a/extras/chrome_extension/options.html +++ b/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> diff --git a/extras/chrome_extension/popup.html b/extras/chrome_extension/popup.html index e616020f50..951adfc0ca 100644 --- a/extras/chrome_extension/popup.html +++ b/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>