Merge pull request #338 from shinken-monitoring/develop

Version 2.0.1
shinken-monitoring · Sep 9, 2015 · 4f27c71 · 4f27c71
2 parents 0733eb8 + 8b9c173
commit 4f27c71
Show file tree

Hide file tree

Showing 13 changed files with 270 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Shinken Web User Interface
 
 ## Dependencies
 
-Dependencies are listed in the `requirements.txt` file.
+Dependencies are listed in the [`requirements.txt`](https://github.com/shinken-monitoring/mod-webui/blob/develop/requirements.txt)  file.
 
 ## Report a bug
 

diff --git a/etc/modules/webui2.cfg b/etc/modules/webui2.cfg
@@ -2,8 +2,8 @@
 ## Loaded by:   Broker
 # The Shinken web interface and integrated web server.
 define module {
-   module_name         webui
-   module_type         webui
+   module_name         webui2
+   module_type         webui2
 
 
    ## Modules for WebUI
@@ -12,32 +12,69 @@ define module {
    # - auth-htpasswd (internal)     : Use an htpasswd file for auth backend.
    # You may remove the modules 'auth-cfg-password' and 'auth-htpasswd' from your
    # configuration because the WebUI embeds those authentication methods.
+   #
+   # You may use these external modules:
    # - auth-ws-glpi                 : Use the Glpi Web Services for user authentication
    # - auth-active-directory        : Use AD for auth backend (and retrieve photos).
-   
+
    # htpasswd (apache like) file containing username/passwords
    # Use an Apache htpasswd file or build your own (http://www.htaccesstools.com/htpasswd-generator/)
    htpasswd_file              /etc/shinken/htpasswd.users
 
+
+   ## Modules for WebUI
    ## Graphs:
+   # You may use these external modules:
    # - ui-pnp                : Use PNP graphs in the UI.
    # - ui-graphite           : Use graphs from Graphite time series database.
-
+
+
+   ## Modules for WebUI
    ## Storage:
-   # - mongodb               : Save user preferences to a Mongodb database
+   # - mongodb (internal)    : Save user preferences to a Mongodb database
    #                         : Get hosts/services availability from a Mongodb database
    #                         : Get Shinken logs and hosts history from a Mongodb database
+   # You may remove the module 'mongodb' from your configuration because the WebUI
+   # embeds this storage module.
+   #
+   # You may also use those external modules:
    # - SQLitedb              : Save user preferences to a SQLite database
-
-   ## Hosts/services availability:
-   # - mongo-logs            : Store hosts/services availability in a Mongodb database
-   #                         : Display hosts/services availability
-   #                         : Display Shinken logs
-
+
+   # Mongodb parameters for internal Web UI modules
+   # NOTE: Do not change these parameters unless you are using the 'mongo-logs' module
+   # with different parameters than the default ones.
+
+   # Database URI
+   #uri                        mongodb://localhost
+
+   # If you are running a MongoDB cluster (called a “replica set” in MongoDB),
+   # you need to specify it's name here.
+   # With this option set, you can also write the mongodb_uri as a comma-separated
+   # list of host:port items. (But one is enough, it will be used as a “seed”)
+   #replica_set
+
+   # Database name where to fetch the logs/availability collections
+   #database                   shinken
+   # User authentication for database access
+   #username
+   #password
+
+   # Logs collection name
+   #logs_collection            logs
+
+   # Hosts availability collection name
+   #hav_collection             availability
+
+
+   ## Modules for WebUI
    ## Helpdesk:
+   # You may use this external modules:
    # - glpi-helpdesk         : Get hosts information from an helpdesk application
    #                         : Notify helpdesk for hosts problems
-   modules                    
+
+
+   ## Declare the list of external modules
+   modules
 
 
    # Web server configuration
@@ -52,9 +89,9 @@ define module {
 
    # WebUI information
    # Overload default information included in the WebUI
-   #about_version              2.0 alpha
+   #about_version              2.0
    #about_copyright            (c) 2013-2015 - License GNU AGPL as published by the FSF, minimum version 3 of the License.
-   #about_release              Bootstrap 3 User Interface
+   #about_release              Bootstrap 3 User Interface - complete User Interface refactoring
 
 
    # Configuration directory
@@ -92,7 +129,7 @@ define module {
                               ; Monitoring packs may include an image for the host/service tag
                               ; WebUI also has some tags as images
 
-   play_sound                 0
+   play_sound                 1
                               ; Play sound on new non-acknowledged problems.
 
    # Gravatar image for logged in users

diff --git a/module/htdocs/images/icons/state_pending.png b/module/htdocs/images/icons/state_pending.png
diff --git a/module/htdocs/js/shinken-refresh.js b/module/htdocs/js/shinken-refresh.js
@@ -52,6 +52,17 @@ function postpone_refresh(){
    reinit_refresh();
 }
 
+// Play alerting sound ...
+function playAlertSound() {
+   var audio = document.getElementById('alert-sound');
+   var canPlay = audio && !!audio.canPlayType && audio.canPlayType('audio/wav') != "";
+   if (canPlay) {
+      audio.play();
+      sessionStorage.setItem("sound_play", "1");
+      $('#sound_alerting i.fa-ban').addClass('hidden');
+   }
+}
+
 /*
  * This function is called on each refresh of the current page.
  * ----------------------------------------------------------------------------
@@ -93,12 +104,56 @@ function do_refresh(){
       $('#page-content').html($response.find('#page-content').html());
 
       // Refresh header bar hosts/services state ...
-      $('#overall-hosts-states').html($response.find('#overall-hosts-states').html());
-      $('#overall-services-states').html($response.find('#overall-services-states').html());
+      if ($('#overall-hosts-states').length > 0) {
+         $('#overall-hosts-states').html($response.find('#overall-hosts-states').html());
+         $('#hosts-states-popover-content').html($response.find('#hosts-states-popover-content').html());
+         $('#overall-services-states').html($response.find('#overall-services-states').html());
+         $('#services-states-popover-content').html($response.find('#services-states-popover-content').html());
 
+         var nb_problems=0;
+         nb_problems += parseInt($('#overall-hosts-states a span').html());
+         nb_problems += parseInt($('#overall-services-states a span').html());
+         if (refresh_logs) console.debug("Hosts/Services problems", nb_problems);
+
+         // Sound alerting
+         if (sessionStorage.getItem("sound_play") == '1') {
+            if (Number(sessionStorage.getItem("how_many_problems_actually")) < nb_problems) {
+               playAlertSound();
+            }
+         }
+         sessionStorage.setItem("how_many_problems_actually", nb_problems);
+      }
+
       // Refresh Dashboard currently ...
-      $('#one-eye-overall').html($response.find('#one-eye-overall').html());
-      $('#one-eye-icons').html($response.find('#one-eye-icons').html());
+      if ($('#one-eye-overall').length > 0) {
+         $('#one-eye-overall').html($response.find('#one-eye-overall').html());
+         $('#one-eye-icons').html($response.find('#one-eye-icons').html());
+
+         var nb_problems=0;
+         nb_problems += parseInt($('#one-eye-overall-hosts').data("hosts-problems"));
+         nb_problems += parseInt($('#one-eye-overall-services').data("services-problems"));
+         if (refresh_logs) console.debug("Dashboard currently - Hosts/Services problems", nb_problems);
+
+         var old_problems = Number(sessionStorage.getItem("how_many_problems_actually"));
+         // Sound alerting
+         if (sessionStorage.getItem("sound_play") == '1') {
+            if (! sessionStorage.getItem("how_many_problems_actually")) {
+               // Default is current value ...
+               sessionStorage.setItem("how_many_problems_actually", nb_problems);
+            }
+            if (refresh_logs) console.debug("Dashboard currently - stored problems number:", old_problems);
+            if (old_problems < nb_problems) {
+               if (refresh_logs) console.debug("Dashboard currently - play sound!");
+               playAlertSound();
+            }
+         }
+         if (old_problems < nb_problems) {
+            var message = (nb_problems - old_problems) + " new " + ((nb_problems - old_problems)==1 ? "problem" : "problems") + " since last "+refresh_timeout+" seconds."
+            alertify.log((nb_problems - old_problems) + " new problems since last "+refresh_timeout+" seconds.", "warning", 5000);
+         }
+         sessionStorage.setItem("how_many_problems_actually", nb_problems);
+         if (refresh_logs) console.debug("Dashboard currently - updated stored problems number:", Number(sessionStorage.getItem("how_many_problems_actually")));
+      }
 
       /* Because of what is explained in the previous comment ... we must use this 
        * awful hack ! 

diff --git a/module/module.py b/module/module.py
@@ -25,7 +25,7 @@
 # along with Shinken.  If not, see <http://www.gnu.org/licenses/>.
 
 
-WEBUI_VERSION = "2.0"
+WEBUI_VERSION = "2.0.1"
 WEBUI_COPYRIGHT = "(c) 2009-2015 - License GNU AGPL as published by the FSF, minimum version 3 of the License."
 WEBUI_RELEASENOTES = """Bootstrap 3 User Interface - complete User Interface refactoring"""
 
@@ -77,7 +77,7 @@
 
 properties = {
     'daemons': ['broker', 'scheduler'],
-    'type': 'webui',
+    'type': 'webui2',
     'phases': ['running'],
     'external': True}
 

diff --git a/module/plugins/dashboard/views/currently.tpl b/module/plugins/dashboard/views/currently.tpl
@@ -1,3 +1,4 @@
+%setdefault('refresh', True)
 %rebase("fullscreen", css=['dashboard/css/currently.css'], title='Shinken currently')
 
 %helper = app.helper
@@ -47,29 +48,75 @@
 
 %if username != 'anonymous':
 <div id="back-home">
-   <ul class="nav nav-pills">
-      <li> <a href="/dashboard" class="font-darkgrey"><i class="fa fa-home"></i></a> </li>
-      <li> <a href="#" action="fullscreen-request" class="font-darkgrey"><i class="fa fa-desktop"></i></a> </li>
+   <ul class="nav nav-pills navbar-left">
+      <li> <a class="font-darkgrey" href="/dashboard"><i class="fa fa-home"></i></a> </li>
+      <li> <a class="font-darkgrey" href="#" action="fullscreen-request" class="font-darkgrey"><i class="fa fa-desktop"></i></a> </li>
    </ul>
+   %if app.play_sound:
+   <ul class="nav nav-pills navbar-right">
+      <li>
+         <a class="font-darkgrey" action="toggle-sound-alert" data-original-title='Sound alerting' href="#">
+            <span id="sound_alerting" class="fa-stack">
+              <i class="fa fa-music fa-stack-1x"></i>
+              <i class="fa fa-ban fa-stack-2x text-danger"></i>
+            </span>
+         </a>
+      </li>
+   </ul>
+   %end
 </div>
 %end
 <div id="date-time">
    <h1 id="clock"></h1>
    <h3 id="date"></h3>
 </div>
 
+%how_many_problems_actually = len(app.datamgr.get_all_problems())
+%if app.play_sound:
+<audio id="alert-sound" volume="1.0">
+   <source src="/static/sound/alert.wav" type="audio/wav">
+   Your browser does not support the <code>HTML5 Audio</code> element.
+   <EMBED src="/static/sound/alert.wav" autostart=true loop=false volume=100 >
+</audio>
+
+<script type="text/javascript">
+   // Set alerting sound icon ...
+   if (! sessionStorage.getItem("sound_play")) {
+      // Default is to play ...
+      sessionStorage.setItem("sound_play", {{'1' if app.play_sound else '0'}});
+   }
+
+   // Toggle sound ...
+   if (sessionStorage.getItem("sound_play") == '1') {
+      $('#sound_alerting i.fa-ban').addClass('hidden');
+   } else {
+      $('#sound_alerting i.fa-ban').removeClass('hidden');
+   }
+   $('[action="toggle-sound-alert"]').on('click', function (e, data) {
+      if (sessionStorage.getItem("sound_play") == '1') {
+         sessionStorage.setItem("sound_play", "0");
+         $('#sound_alerting i.fa-ban').removeClass('hidden');
+      } else {
+         playAlertSound();
+         $('#sound_alerting i.fa-ban').addClass('hidden');
+      }
+   });
+</script>
+%end
+
 %synthesis = helper.get_synthesis(app.datamgr.search_hosts_and_services("", user))
 %s = synthesis['services']
 %h = synthesis['hosts']
-%search_string=""
 
 <div id="one-eye-overall">
    <div class="panel panel-default panel-darkgrey">
       <div class="panel-body">
          <table class="table table-invisible table-condensed">
             <tbody>
-              %if 'type:service' not in search_string:
-               <tr>
+               <tr id="one-eye-overall-hosts" data-hosts-problems="{{ len(app.datamgr.get_problems(user=user, type='host')) }}">
+                  <td class="font-white"><center>
+                  <b>{{h['nb_elts']}} hosts</b>
+                  </center></td>
                   %for state in 'up', 'unreachable', 'down', 'pending', 'unknown', 'ack', 'downtime':
                   <td>
                      %label = "%s <i>(%s%%)</i>" % (h['nb_' + state], h['pct_' + state])
@@ -79,9 +126,10 @@
                   </td>
                   %end
                </tr>
-               %end
-               %if 'type:host' not in search_string:
-               <tr>
+               <tr id="one-eye-overall-services" data-services-problems="{{ len(app.datamgr.get_problems(user=user, type='service')) }}">
+                  <td class="font-white"><center>
+                  <b>{{s['nb_elts']}} services</b>
+                  </center></td>
                   %for state in 'ok', 'warning', 'critical', 'pending', 'unknown', 'ack', 'downtime':
                   <td>
                      %label = "%s <i>(%s%%)</i>" % (s['nb_' + state], s['pct_' + state])
@@ -91,7 +139,6 @@
                   </td>
                   %end
                </tr>
-               %end
             </tbody>
          </table>
       </div>
@@ -109,7 +156,7 @@
                <div>
                   %state = h['pct_up']
                   %font='ok' if state >= app.hosts_states_critical else 'warning' if state >= app.hosts_states_warning  else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{h['nb_up']}} / {{h['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{h['nb_up']}} / {{h['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{h['pct_up']}}%</span>
                </div>
                
@@ -128,7 +175,7 @@
                <div>
                   %state = 100.0-h['pct_unreachable']
                   %font='ok' if state >= app.hosts_states_critical else 'warning' if state >= app.hosts_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{h['nb_unreachable']}} / {{h['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{h['nb_unreachable']}} / {{h['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{h['pct_unreachable']}}%</span>
                </div>
                
@@ -147,7 +194,7 @@
                <div>
                   %state = 100.0-h['pct_down']
                   %font='ok' if state >= app.hosts_states_critical else 'warning' if state >= app.hosts_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{h['nb_down']}} / {{h['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{h['nb_down']}} / {{h['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{h['pct_down']}}%</span>
                </div>
                
@@ -166,7 +213,7 @@
                <div>
                   %state = 100.0-h['pct_unknown']
                   %font='ok' if state >= app.hosts_states_critical else 'warning' if state >= app.hosts_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{h['nb_unknown']}} / {{h['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{h['nb_unknown']}} / {{h['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{h['pct_unknown']}}%</span>
                </div>
                
@@ -186,7 +233,7 @@
                <div>
                   %state = s['pct_ok']
                   %font='ok' if state >= app.services_states_critical else 'warning' if state >= app.services_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{s['nb_ok']}} / {{s['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{s['nb_ok']}} / {{s['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{s['pct_ok']}}%</span>
                </div>
                
@@ -205,7 +252,7 @@
                <div>
                   %state = 100.0-s['pct_warning']
                   %font='ok' if state >= app.services_states_critical else 'warning' if state >= app.services_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{s['nb_warning']}} / {{s['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{s['nb_warning']}} / {{s['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{s['pct_warning']}}%</span>
                </div>
                
@@ -224,7 +271,7 @@
                <div>
                   %state = 100.0-s['pct_critical']
                   %font='ok' if state >= app.services_states_critical else 'warning' if state >= app.services_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{s['nb_critical']}} / {{s['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{s['nb_critical']}} / {{s['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{s['pct_critical']}}%</span>
                </div>
                
@@ -243,7 +290,7 @@
                <div>
                   %state = 100.0-s['pct_unknown']
                   %font='ok' if state >= app.services_states_critical else 'warning' if state >= app.services_states_warning else 'critical'
-                  <span class="badger-big badger-left font-{{font}}">{{s['nb_unknown']}} / {{s['nb_elts']}}</span>
+                  <!--<span class="badger-big badger-left font-{{font}}">{{s['nb_unknown']}} / {{s['nb_elts']}}</span>-->
                   <span class="badger-big badger-right font-{{font}}">{{s['pct_unknown']}}%</span>
                </div>