DASH: implemented heartbeat for gviews

diff --git a/python_suite/dashboard/static/css/style.css b/python_suite/dashboard/static/css/style.css
index e4f320b4fbe93b825648447674502f8be1ab442b..9e5c2946b33da0a77e27fd7b90660c2710062c76 100644 (file)
--- a/python_suite/dashboard/static/css/style.css
+++ b/python_suite/dashboard/static/css/style.css
@@ -182,3 +182,13 @@ div.error {
   content: attr(data-checked);
   background-color: #0099CC;
 }
+
+#heartbeat.inactive {
+  background-color: #666;
+}
+#heartbeat.ok {
+  background-color: #0d2;
+}
+#heartbeat.warning {
+  background-color: #f44;
+}

diff --git a/python_suite/dashboard/static/js/gview.js b/python_suite/dashboard/static/js/gview.js
index b8dd8347ff02c11fc209a1b620d23ce8e75bf577..fdad8c471eba1fa11bd6ca65490179227ec1cdea 100644 (file)
--- a/python_suite/dashboard/static/js/gview.js
+++ b/python_suite/dashboard/static/js/gview.js
@@ -3,6 +3,8 @@ function updateStatus() {
     .fail(function( jqxhr, textStatus, error ) {
       var err = textStatus + ", " + error;
       console.log( "Request Failed: " + err );
+      $('#heartbeat').attr('class', 'warning')
+      $('#heartbeat .cover').fadeTo(200, 1.0, function() { $(this).fadeTo(200, 0.0); });
     })
     .done(function( data ) {
       var gview = document.getElementById("gview");
@@ -25,5 +27,7 @@ function updateStatus() {
         else if (pvField == "EGU")
           el.textContent = pv.unit;
       });
+      $('#heartbeat').attr('class', 'ok')
+      $('#heartbeat .cover').fadeTo(200, 1.0, function() { $(this).fadeTo(200, 0.0); });
     });
 };

diff --git a/python_suite/dashboard/views/gview.jinja2 b/python_suite/dashboard/views/gview.jinja2
index 6502e177573c3eeec8cd90d21de680cc4a77c15b..9b7e806d904ea4dd941bceee6ccf5bdfec4ad60b 100644 (file)
--- a/python_suite/dashboard/views/gview.jinja2
+++ b/python_suite/dashboard/views/gview.jinja2
@@ -8,6 +8,10 @@
 {% endblock %}
 
 {% block content %}
+       <div id="heartbeat" class="inactive" style="width: 10px; height: 10px; border-radius: 5px;">
+         <div class="cover" style="width: 100%; height: 100%; radius: 5px; background-color: #ffff;">
+         </div>
+       </div>
        <div class="gview">
                <object id="gview" style="margin: 2ex auto; display: block;" class="gview gview-{{ svg }}" data="/static/gview/{{ svg }}.svg" type="image/svg+xml">
                Your browser doesn't support SVG