S allius/issue393 (#403)

* display proxy version on dashboard

* add MQTT page

* styles adjusted on the different pages

- use same colors
- add bordered shadow to all cards and tables

* fix unit tests

* migrate the conn table to a general table

- rename the template file
- get headline from table description

* remove footer from index page

* make version string translateable

* cleanup

* remove stripped table rows

* add mqtt info table

* translate mqtt page

* don't fetch notes list for the log-page

* fix Mqtt init call for unit tests

* add mqtt-fetch test

* check received counter in unit test

app/src/mqtt.py

@@ -7,13 +7,18 @@ from modbus import Modbus
 from messages import Message
 from cnf.config import Config
 from singleton import Singleton
+from datetime import datetime
+
 
 logger_mqtt = logging.getLogger('mqtt')
 
 
 class Mqtt(metaclass=Singleton):
-    __client = None
+    __client: aiomqtt.Client = None
     __cb_mqtt_is_up = None
+    ctime = None
+    published: int = 0
+    received: int = 0
 
     def __init__(self, cb_mqtt_is_up):
         logger_mqtt.debug('MQTT: __init__')
@@ -52,6 +57,7 @@ class Mqtt(metaclass=Singleton):
                       | int | float | None = None) -> None:
         if self.__client:
             await self.__client.publish(topic, payload)
+            self.published += 1
 
     async def __loop(self) -> None:
         mqtt = Config.get('mqtt')
@@ -69,6 +75,9 @@ class Mqtt(metaclass=Singleton):
             try:
                 async with self.__client:
                     logger_mqtt.info('MQTT broker connection established')
+                    self.ctime = datetime.now()
+                    self.published = 0
+                    self.received = 0
 
                     if self.__cb_mqtt_is_up:
                         await self.__cb_mqtt_is_up()
@@ -84,6 +93,8 @@ class Mqtt(metaclass=Singleton):
                         await self.dispatch_msg(message)
 
             except aiomqtt.MqttError:
+                self.ctime = None
+
                 if Config.is_default('mqtt'):
                     logger_mqtt.info(
                         "MQTT is unconfigured; Check your config.toml!")
@@ -101,11 +112,14 @@ class Mqtt(metaclass=Singleton):
                 return
             except Exception:
                 # self.inc_counter('SW_Exception')   # fixme
+                self.ctime = None
                 logger_mqtt.error(
                     f"Exception:\n"
                     f"{traceback.format_exc()}")
 
     async def dispatch_msg(self, message):
+        self.received += 1
+
         if message.topic.matches(self.ha_status_topic):
             status = message.payload.decode("UTF-8")
             logger_mqtt.info('Home-Assistant Status:'

app/src/server.py

@@ -145,6 +145,10 @@ def main():   # pragma: no cover
     serv_name = os.getenv('SERVICE_NAME', 'proxy')
     version = os.getenv('VERSION', 'unknown')
 
+    @app.context_processor
+    def utility_processor():
+        return dict(version=version)
+
     setattr(logging.handlers, "log_path", args.log_path)
     setattr(logging.handlers, "log_backups", args.log_backups)
     os.makedirs(args.log_path, exist_ok=True)

app/src/web/conn_table.py

@@ -48,6 +48,7 @@ def _get_row(inv: InverterBase):
 def get_table_data():
     '''build the connection table'''
     table = {
+        "headline": _('Connections'),
         "col_classes": [
             "w3-hide-small w3-hide-medium", "w3-hide-large",
             "",
@@ -75,7 +76,7 @@ async def data_fetch():
         "proxy-cnt": f"<h3>{Infos.get_counter('ProxyMode_Cnt')}</h3>",
         "emulation-cnt": f"<h3>{Infos.get_counter('EmuMode_Cnt')}</h3>",
     }
-    data["conn-table"] = await render_template('templ_conn_table.html.j2',
+    data["conn-table"] = await render_template('templ_table.html.j2',
                                                table=get_table_data())
 
     data["notes-list"] = await render_template('templ_notes_list.html.j2')

app/src/web/log_files.py

@@ -40,7 +40,6 @@ async def file_fetch():
     data["file-list"] = await render_template('templ_log_files_list.html.j2',
                                               dir_list=get_list_data())
 
-    data["notes-list"] = await render_template('templ_notes_list.html.j2')
     return data
 
 

app/src/web/mqtt_table.py

@@ -0,0 +1,58 @@
+from inverter_base import InverterBase
+from quart import render_template
+from quart_babel import format_datetime, _
+from mqtt import Mqtt
+
+from . import web
+
+
+def _get_row(inv: InverterBase):
+    '''build one row for the connection table'''
+    entity_prfx = inv.entity_prfx
+    inv_serial = inv.local.stream.inv_serial
+    node_id = inv.local.stream.node_id
+    sug_area = inv.local.stream.sug_area
+
+    row = []
+    row.append(inv_serial)
+    row.append(entity_prfx+node_id)
+    row.append(sug_area)
+    return row
+
+
+def get_table_data():
+    '''build the connection table'''
+    table = {
+        "headline": _('MQTT devices'),
+        "col_classes": [
+            "",
+            "",
+            "",
+        ],
+        "thead": [[
+            _("Serial-No"),
+            _('Node-ID'),
+            _('HA-Area'),
+        ]],
+        "tbody": []
+    }
+    for inverter in InverterBase:
+        table['tbody'].append(_get_row(inverter))
+
+    return table
+
+
+@web.route('/mqtt-fetch')
+async def mqtt_fetch():
+    mqtt = Mqtt(None)
+    ctime = format_datetime(dt=mqtt.ctime, format='short')
+    data = {
+        "update-time": format_datetime(format="medium"),
+        "mqtt-ctime": f"<h3>{ctime}</h3>",
+        "mqtt-tx": f"<h3>{mqtt.published}</h3>",
+        "mqtt-rx": f"<h3>{mqtt.received}</h3>",
+    }
+    data["mqtt-table"] = await render_template('templ_table.html.j2',
+                                               table=get_table_data())
+
+    return data

app/src/web/pages.py

@@ -11,9 +11,11 @@ async def index():
         fetch_url=url_for('.data_fetch'))
 
 
-@web.route('/page')
-async def empty():
-    return await render_template('empty.html.j2')
+@web.route('/mqtt')
+async def mqtt():
+    return await render_template(
+        'page_mqtt.html.j2',
+        fetch_url=url_for('.mqtt_fetch'))
 
 
 @web.route('/logging')

app/src/web/templates/base.html.j2

@@ -41,12 +41,12 @@
   
     <!-- Sidebar/menu -->
     <nav class="w3-sidebar w3-collapse w3-white" style="z-index:3;width:250px;" id="mySidebar"><br>
-      <div class="w3-container w3-row">
-        <div class="w3-col s4">
+      <div class="w3-container w3-cell-row">
+        <div class="w3-cell w3-cell-middle">
           <img src="{{url_for('static', filename= 'images/favicon.svg') }}" alt="" class="w3-circle w3-margin-right" style="width:60px">
         </div>
-        <div class="w3-col s8 w3-bar">
-          <h3>TSUN-Proxy</h3><br>
+        <div class="w3-cell">
+          <span><b class="w3-xlarge">TSUN-Proxy</b><br>{{_('Version:')}} {{version}}</span>
         </div>
       </div>
       <hr>
@@ -56,7 +56,7 @@
       <div class="w3-bar-block">
         <button href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</button>
         <a href="{{ url_for('.index')}}" class="w3-bar-item w3-button w3-padding {% block menu1_class %}{% endblock %}"><i class="fa fa-network-wired fa-fw"></i>  {{_('Connections')}}</a>
-        <a href="{{ url_for('.empty')}}" class="w3-bar-item w3-button w3-padding {% block menu2_class %}{% endblock %}"><i class="fa fa-database fa-fw"></i>  MQTT</a>
+        <a href="{{ url_for('.mqtt')}}" class="w3-bar-item w3-button w3-padding {% block menu2_class %}{% endblock %}"><i class="fa fa-database fa-fw"></i>  MQTT</a>
         <a href="{{ url_for('.logging')}}" class="w3-bar-item w3-button w3-padding {% block menu3_class %}{% endblock %}"><i class="fa fa-file-export fa-fw"></i>  {{_('Log Files')}}</a>
       </div>
     </nav>

app/src/web/templates/empty.html.j2

@@ -1,9 +0,0 @@
-{% extends 'base.html.j2' %}
-
-{% block title %} TSUN Proxy - View {% endblock title%}
-{% block menu2_class %}w3-blue{% endblock %}
-{% block content %}
-{% endblock content%}
-
-{% block footer %}{% endblock footer %}
-

app/src/web/templates/page_index.html.j2

@@ -7,6 +7,7 @@
 {% block content %}
   <div class="w3-row-padding w3-margin-bottom">
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-indigo w3-padding-16">
         <div class="w3-left"><i class="fa fa-upload w3-xxxlarge fa-rotate-180"></i></div>
         <div id = "server-cnt" class="w3-right">
@@ -16,8 +17,10 @@
         <h4>{{_('Server Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from device to proxy')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-purple w3-padding-16">
         <div class="w3-left"><i class="fa fa-download w3-xxxlarge fa-rotate-180"></i></div>
         <div id = "client-cnt" class="w3-right">
@@ -27,8 +30,10 @@
         <h4>{{_('Client Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from proxy to device')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-orange w3-text-white w3-padding-16">
         <div class="w3-left"><i class="fa fa-cloud w3-xxxlarge"></i></div>
         <div id = "proxy-cnt" class="w3-right">
@@ -38,8 +43,10 @@
         <h4>{{_('Proxy Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Forwarding data to cloud')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-teal w3-padding-16">
         <div class="w3-left"><i class="fa fa-cloud-arrow-up-alt w3-xxxlarge"></i></div>
         <div id = "emulation-cnt" class="w3-right">
@@ -49,9 +56,12 @@
         <h4>{{_('Emu Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Emulation sends data to cloud')}}</div>
       </div>
+      </div>
     </div>
   </div>
 
-  <div class="w3-container" id="notes-list"></div>
-  <div class="w3-container" id="conn-table"></div>
+  <div id="notes-list"></div>
+  <div id="conn-table"></div>
 {% endblock content%}
+
+{% block footer %}{% endblock footer %}

app/src/web/templates/page_logging.html.j2

@@ -1,6 +1,6 @@
 {% extends 'base.html.j2' %}
 
-{% block title %} TSUN Proxy - Downloads {% endblock title%}
+{% block title %} TSUN Proxy - Log Files {% endblock title%}
 {% block menu3_class %}w3-blue{% endblock %}
 {% block headline %}<i class="fa fa-file-export fa-fw"></i>  {{_('Log Files')}}{% endblock headline %}
 {% block content %}
@@ -16,7 +16,7 @@
     </div>
   </div>
 
-  <div class="w3-container" id="file-list"></div>
+  <div id="file-list"></div>
 
   <script>
     function deleteFile() {
@@ -28,4 +28,3 @@
 {% endblock content%}
 
 {% block footer %}{% endblock footer %}
-

app/src/web/templates/page_mqtt.html.j2

@@ -0,0 +1,51 @@
+{% extends 'base.html.j2' %}
+
+{% block title %} TSUN Proxy - MQTT Status {% endblock title%}
+{% block menu2_class %}w3-blue{% endblock %}
+{% block headline %}<i class="fa fa-database"></i>  {{_('MQTT Overview')}}{% endblock headline %}
+{% block content %}
+  <div class="w3-row-padding w3-margin-bottom">
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-indigo w3-padding-16">
+        <div class="w3-left"><i class="fa fa-link w3-xxxlarge"></i></div>
+        <div id = "mqtt-ctime" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Connection Time')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Time at which the connection was established')}}</div>
+      </div>
+      </div>
+    </div>
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-purple w3-padding-16">
+        <div class="w3-left"><i class="fa fa-server w3-xxxlarge"></i></div>
+        <div id = "mqtt-tx" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Published Topics')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of published topics')}}</div>
+      </div>
+      </div>
+    </div>
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-orange w3-text-white w3-padding-16">
+        <div class="w3-left"><i class="fa fa-user w3-xxxlarge"></i></div>
+        <div id = "mqtt-rx" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Received Topics')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of topics received')}}</div>
+      </div>
+      </div>
+    </div>
+  </div>
+  <div id="mqtt-table"></div>
+{% endblock content%}
+
+{% block footer %}{% endblock footer %}

app/src/web/templates/templ_log_files_list.html.j2

@@ -3,7 +3,7 @@
   <div class="w3-quarter w3-margin-bottom">
 
      <div class="w3-card-4">
-      <header class="w3-container w3-blue" style="min-height:80px">
+      <header class="w3-container w3-teal" style="min-height:80px">
         <h4>{{file.name}}</h4>
       </header>
   
@@ -16,9 +16,9 @@
         {% endfor %}
       </table>
   
-      <footer class="w3-blue">
-        <a href="{{ url_for('.send',file=file.name)}}" class="w3-button w3-hover-blue w3-hover-text-black"><i class="fa fa-file-download"></i>  {{_('Download File')}}</a>
-        <a class="w3-button w3-right w3-hover-blue w3-hover-text-black" 
+      <footer class="w3-teal">
+        <a href="{{ url_for('.send',file=file.name)}}" class="w3-button w3-hover-teal w3-hover-text-black"><i class="fa fa-file-download"></i>  {{_('Download File')}}</a>
+        <a class="w3-button w3-right w3-hover-teal w3-hover-text-black" 
         onclick="document.getElementById('id03').innerHTML='{{file.name}}'; document.getElementById('id02').href='{{ url_for('.delete',file=file.name)}}'; document.getElementById('id01').style.display='block';"><i class="fa fa-trash"></i></a>
       </footer>
     </div>

app/src/web/templates/templ_table.html.j2

@@ -12,8 +12,11 @@
     {% endif %}
 {%- endmacro%}
 
-<h5>{{_('Connections')}}</h5>
-<table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white">
+<div class="w3-container w3-margin-bottom">
+<h5>{{table.headline}}</h5>
+<div class="w3-card-4">
+
+<table class="w3-table w3-bordered w3-hoverable w3-white">
   {% if table.thead is defined%}
   <thead>
   {% for row in table.thead %}
@@ -35,3 +38,5 @@
   {% endfor %}
   </tbody>
 </table>
+</div>
+</div>