Fixed #37 - SensorLineChartTile: show warning icon if last measurement is...

Fixed #37 - SensorLineChartTile: show warning icon if last measurement is longer ago than a configurable timespan

Pipfile

@@ -24,4 +24,7 @@ Babel = "==2.8.0"
 icalendar = "==4.0.7"
 python-jenkins = "==1.5.0"
 
+# tiles
+timeago = "==1.0.15"
+
 [dev-packages]

src/logic/tile/tiles/SensorLineChartTile.html

@@ -42,8 +42,11 @@
         padding-left: 5%;
     }
 
-    .sensorLineChartTile i {
+    .sensorLineChartTile .header-right {
         margin-right: 5%;
+    }
+
+    .sensorLineChartTile i {
         {% if showAxes %}
             font-size: 2.5vmin;
         {% else %}
@@ -51,6 +54,32 @@
         {% endif %}
     }
 
+    .sensorLineChartTile .warning {
+        display: flex;
+        flex-direction: row;
+        color: #FF0000;
+        padding-right: 2vmin;
+        align-items: center;
+        align-self: flex-start;
+        flex-grow: 1;
+        justify-content: flex-end;
+
+        {% if showAxes %}
+            padding-top: 1%;
+        {% else %}
+            padding-top: 3%;
+        {% endif %}
+    }
+
+    .sensorLineChartTile .warning i {
+        font-size: 2.5vmin;
+        padding-right: 1vmin;
+    }
+
+    .sensorLineChartTile .warning-text {
+        font-size: 1.5vmin;
+    }
+
     .sensorLineChartTile .title,
     .sensorLineChartTile .value {
         text-align: left;
@@ -66,8 +95,16 @@
                     <div class="value">{{ latest }}{{ unit }}</div>
                 {% endif %}
             </div>
+            {% if timeAgo %}
+                <div class="warning">
+                    <i class="material-icons icon-warning">warning</i>
+                    <div class="warning-text">{{ timeAgo }}</div>
+                </div>
+            {% endif %}
+            <div class="header-right">
                 <i class="wi {{ icon }}"></i>
             </div>
+        </div>
         <div class="chart" id="{{ chartId }}"></div>
     </div>
 

src/logic/tile/tiles/SensorLineChartTile.py

@@ -5,6 +5,7 @@ import uuid
 from datetime import datetime, timedelta
 from typing import Dict, Tuple, List
 
+from timeago import format
 from TheCodeLabs_BaseUtils.MultiCacheKeyService import MultiCacheKeyService
 from flask import Blueprint
 
@@ -30,7 +31,8 @@ class SensorLineChartTile(Tile):
         "decimals": 1,
         "lineColor": "rgba(254, 151, 0, 1)",
         "fillColor": "rgba(254, 151, 0, 0.2)",
-        "showAxes": True
+        "showAxes": True,
+        "outdatedValueWarningLimitInSeconds": 300  # use -1 to disable warning
     }
 
     UNIT_BY_SENSOR_TYPE = {
@@ -68,7 +70,8 @@ class SensorLineChartTile(Tile):
         sensorData = storageLeafService.get_data(cacheKey, self._intervalInSeconds, serviceSettings)
 
         x, y = self.__prepare_measurement_data(sensorData['sensorValue'])
-        latest = y[-1] if y else ''
+        latestTime = datetime.strptime(x[-1], self.DATE_FORMAT) if x else datetime(year=1970, month=1, day=1, hour=0, minute=0, second=0)
+        latestValue = y[-1] if y else ''
 
         minValue, maxValue = self.__get_min_and_max(pageName,
                                                     sensorData['sensorInfo']['type'],
@@ -87,14 +90,15 @@ class SensorLineChartTile(Tile):
                 ghostTraceY = [minValue, minValue]
 
         return {
-            'latest': latest,
+            'latest': latestValue,
             'x': x,
             'y': y,
             'sensorInfo': sensorData['sensorInfo'],
             'min': minValue,
             'max': maxValue,
             'ghostTraceX': ghostTraceX,
-            'ghostTraceY': ghostTraceY
+            'ghostTraceY': ghostTraceY,
+            'latestTime': latestTime
         }
 
     def __get_min_and_max(self, pageName: str, sensorType: Dict,
@@ -152,6 +156,14 @@ class SensorLineChartTile(Tile):
             days = int(self._settings['numberOfHoursToShow'] / 24)
             title = f'{title} - {days} days'
 
+        now = datetime.now()
+        timeAgo = ''
+        outdatedValueWarningLimitInSeconds = self._settings['outdatedValueWarningLimitInSeconds']
+        if outdatedValueWarningLimitInSeconds > 0:
+            timeDifference = now - data['latestTime']
+            if timeDifference.total_seconds() > outdatedValueWarningLimitInSeconds:
+                timeAgo = format(timeDifference)
+
         return Tile.render_template(os.path.dirname(__file__), __class__.__name__,
                                     x=data['x'],
                                     y=data['y'],
@@ -167,7 +179,8 @@ class SensorLineChartTile(Tile):
                                     chartId=str(uuid.uuid4()),
                                     ghostTraceX=data['ghostTraceX'],
                                     ghostTraceY=data['ghostTraceY'],
-                                    showAxes=self._settings['showAxes'])
+                                    showAxes=self._settings['showAxes'],
+                                    timeAgo=timeAgo)
 
     def __format_date(self, dateTime: str):
         parsedDateTime = datetime.strptime(dateTime, self.DATE_FORMAT)

src/templates/index.html

@@ -3,7 +3,7 @@
     <head>
         <title>DashboardLeaf</title>
         {% import 'macros.html' as macros %}
-        {{ macros.header() }}
+        {{ macros.header(true) }}
     </head>
 
     <body>

src/templates/macros.html

-{% macro header() -%}
+{% macro header(addViewport) -%}
     <meta charset="UTF-8"/>
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -6,5 +6,7 @@
 
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"/>
 
+    {% if addViewport %}
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    {% endif%}
 {%- endmacro %}

src/templates/page.html

 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8">
         <title>DashboardLeaf</title>
+
+        {% import 'macros.html' as macros %}
+        {{ macros.header(false) }}
+
         <script src="../static/js/libs/socket.io.min.js"></script>
         <script src="../static/js/libs/gridstack.min.js"></script>
         <script src="../static/js/libs/plotly.min.js"></script>
         <script src="../static/js/libs/plotly.locale.de.min.js"></script>
+
         <link type="text/css" rel="stylesheet" href="../static/css/libs/weather-icons.min.css" />
         <link type="text/css" rel="stylesheet" href="../static/css/libs/weather-icons-wind.min.css" />
         <link type="text/css" rel="stylesheet" href="../static/css/libs/gridstack.min.css" />
-        <link type="text/css" rel="stylesheet" href="../static/css/main.css" />
     </head>
     <body>
         <div class="grid-stack">