Fixed some in chrome events extension

extras/chrome_extension/css/popup.css

@@ -1,84 +1,124 @@
-body {
-    min-width:425px;
-    min-height:540px;
-    margin:5px;
-    font-family:Tahoma, Geneva, Arial;
-    font-size:10pt;
+* {
+    font-family: "Open Sans", "Noto Sans", sans-serif
 }
-h1 { font-weight: bold; font-size:16px; margin:2px 0px 2px 0px; color:#237948; font-family:arial }
-h2{
+
+body {
+    min-width: 425px;
+    min-height: 540px;
+    margin: 5px;
+    font-family: Tahoma, Geneva, Arial;
+    font-size: 10pt;
+}
+h1 {
+    font-weight: bold;
+    font-size: 14px;
+    margin: 12px 0px 2px 0px;
+}
+h2 {
     color : black;
 }
-p
-{
-    font-family:"Times New Roman";
-    font-size:20px;
+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: 0px;
+}
+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.b p {
+    margin: 0 0 0 12px;
+    padding-top: 2px;
+    display: none;
+    color: #333;
+    font-size: 8pt;
 }
-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;
+    color: #333;
+    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: 100%;
+    background-color: #C8C8C8;
 }
 
-div.optionsG_textarea{
-    background-color : green;
-    width : 450px;
-    margin : 5px, 10px;
+div.optionsG_textarea {
+    background-color: green;
+    width: 450px;
+    margin: 5px, 10px;
 }
-div.options_textarea{
-    background-color : #ebebeb;
-    width : 550px;
-    margin : 10px 10px;
+div.options_textarea {
+    background-color: #ebebeb;
+    width: 550px;
+    margin: 10px 10px;
     padding: 10px;
-	-webkit-border-radius:10px;    
+	-webkit-border-radius: 10px;    
     border: 2px solid #c8c8c8;
 }
 
-div.options_footer{
-    width : 550px;
-    margin : 10px 10px;
+div.options_footer {
+    width: 550px;
+    margin: 10px 10px;
     padding: 10px;
 }
 
 .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 +127,47 @@ 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;
+}
 
+.error_text {
+    margin: 0 10px;
+}
+
+.result {
+    margin: 10px;
+    height: 520;
+    overflow-y: auto;
+}
+
+#events_title {
+    border: 1px solid #e5e5e5;
+    text-align: center;
+    padding: 5px 0;
+    margin: 0;
+}
+
+.event {
+    border: solid 1px #e5e5e5;
+    border-top: 0;
+    padding: 3px 0;
+}
+
+.sev-Warning { background: #FCED7E;}
+.sev-Critical { background: #FA7A7A;}
+.sev-Informational { background: #7FB9FA;}
+.sev-Normal { background: #A8D96C;}
+.sev-Maintenance { background: #BABDB6;}

extras/chrome_extension/js/popup.js

@@ -10,6 +10,7 @@ $(document).ready(function(){
 	// Display the information
 	if (bg.fetchEvents().length == 0) {
 		showError("Error in fetching data!! Check your internet connection");
+		$('#events_title').hide();
 	} else {
 		showEvents();
 	}
@@ -54,11 +55,13 @@ function unsetSpinner() {
 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(){
@@ -77,6 +80,7 @@ function showEvents(){
 	
 	var i=0;
 	if(allEvents.length>0){
+		$('#events_title').show();
 		while(i<max_events && i<allEvents.length){
 			var eve_title=document.createElement('div');
 			var img = document.createElement('img');
@@ -89,35 +93,18 @@ function showEvents(){
 			var a = document.createElement('a');
 			var temp_style;
 			
-			var agent_url;
-			if (allEvents[i]["agent_name"] == 0) {
-					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]['agent_name'];
-			}
+			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.innerText = allEvents[i]['title'];			
-			
-			switch (allEvents[i]['severity']){
-				case "Warning":
-					eve_title.setAttribute("style","background:#FCED7E; margin-bottom:-12px;"+temp_style);
-					break;
-				case "Critical":
-					eve_title.setAttribute("style","background:#FA7A7A; margin-bottom:-12px;"+temp_style);
-					break;
-				case "Informational":
-					eve_title.setAttribute("style","background:#7FB9FA; margin-bottom:-12px;"+temp_style);
-					break;
-				case "Normal":
-					eve_title.setAttribute("style","background:#A8D96C; margin-bottom:-12px;"+temp_style);
-					break;
-				case "Maintenance":
-					eve_title.setAttribute("style","background:#BABDB6; margin-bottom:-12px;"+temp_style);
-					break;
-			}
+			eve_title.setAttribute("class","event sev-" + allEvents[i]['severity']);
 
 			if (notVisitedEvents[allEvents[i]['id']] === true) {
 				eve_title.style.fontWeight = 600;
@@ -125,8 +112,6 @@ function showEvents(){
 			
 			eve_title.appendChild(a);
 			eve.appendChild(eve_title);
-			var b = document.createElement('br');
-			eve.appendChild(b);
 			
 			var time=allEvents[i]['date'].split(" ");
 			var time_text = time[0]+" "+time[1];
@@ -139,7 +124,7 @@ function showEvents(){
 		   
 			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++;
 		}
 	
@@ -169,17 +154,18 @@ function showHide() {
 
 	// Toggle information
 	if($('#' + pid).css('display') == 'none') {
-		$('#' + pid).slideDown("fast");
+		$('#' + pid).slideDown();
 		$(this).attr({src: 'images/minus.gif'});
 	}
 	else {
-		$('#' + pid).slideUp("fast");
+		$('#' + pid).slideUp();
 		$(this).attr({src: 'images/plus.gif'});
 	}
 }
 
 function mrefresh(){
 	localStorage["new_events"]=0;
+	if (bg.fetchEvents().length == 0) $('#events_title').hide();
 	bg.updateBadge();
 	clearError();
 	bg.resetInterval();

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>
@@ -17,11 +18,14 @@
             </div>
 
             <div class="error">
-                <h1>Error</h1>
-                <a href="options.html" target="_blank" ></a>
+                <img src="images/error.png" title="error">
+                <div class="error_text">
+                    <h1>ERROR</h1>
+                    <a href="options.html" target="_blank" ></a>
+                </div>
             </div>
             <div class="result" id="result">
-                <h1>Events</h1>
+                <h1 id="events_title">Events</h1>
                 <div class="b" id="events">
                     <div class="e" id="e" />
                 </div>