Merge pull request Stefal#157 from Stefal/dynamic_services_display

Dynamic services display

web_app/server.py

@@ -104,6 +104,7 @@
 
 #Delay before rtkrcv will stop if no user is on status.html page
 rtkcv_standby_delay = 600
+connected_clients = 0
 
 class User(UserMixin):
  """ Class for user authentification """
@@ -140,7 +141,15 @@ def manager():
  And it sends various system informations to the web interface
  """
  max_cpu_temp = 0
+ services_status = getServicesStatus(False)
  while True:
+ if connected_clients > 0:
+ updated_services_status = getServicesStatus(False)
+ if services_status != updated_services_status:
+ services_status = repaint_services_button(updated_services_status)
+ socketio.emit("services status", json.dumps(services_status), namespace="/test")
+ print("service status", services_status)
+
  if rtk.sleep_count > rtkcv_standby_delay and rtk.state != "inactive":
  print("Trying to stop rtkrcv")
  if rtk.stopBase() == 1:
@@ -160,6 +169,30 @@ def manager():
  socketio.emit("sys_informations", json.dumps(sys_infos), namespace="/test")
  time.sleep(1)
 
+def repaint_services_button(services_list):
+ """
+ set service color on web app frontend depending on the service status:
+ status = running => green button
+ status = auto-restart => orange button (alert)
+ result = exit-code => red button (danger)
+ """ 
+ for service in services_list:
+ if service.get("status") == "running":
+ service["btn_color"] = "success"
+ #elif service.get("status") == "dead":
+ # service["btn_color"] = "danger"
+ elif service.get("result") == "exit-code":
+ service["btn_color"] = "warning"
+ elif service.get("status") == "auto-restart":
+ service["btn_color"] = "warning"
+
+ if service.get("state_ok") == False:
+ service["btn_off_color"] = "outline-danger"
+ elif service.get("state_ok") == True:
+ service["btn_off_color"] = "outline-secondary"
+
+ return services_list
+
 def old_get_cpu_temp():
  try:
  with open('/sys/class/thermal/thermal_zone0/temp', 'r') as ftemp:
@@ -401,11 +434,15 @@ def diagnostic():
 
 @socketio.on("connect", namespace="/test")
 def testConnect():
+ global connected_clients
+ connected_clients += 1
  print("Browser client connected")
  rtk.sendState()
 
 @socketio.on("disconnect", namespace="/test")
 def testDisconnect():
+ global connected_clients
+ connected_clients -=1
  print("Browser client disconnected")
 
 #### Log list handling ###
@@ -582,24 +619,38 @@ def restartServices(restart_services_list):
  getServicesStatus()
 
 @socketio.on("get services status", namespace="/test")
-def getServicesStatus():
+def getServicesStatus(emit_pingback=True):
  """
  Get the status of services listed in services_list
  (services_list is global)
  """
 
- print("Getting services status")
-
- for service in services_list:
- #print("unit qui déconne : ", service["name"])
- service["active"] = service["unit"].isActive()
+ #print("Getting services status")
+ try:
+ for service in services_list:
+ #print("unit qui déconne : ", service["name"])
+ service["active"] = service["unit"].isActive()
+ service["status"] = service["unit"].status()
+ service["result"] = service["unit"].get_result()
+ if service.get("result") == "success" and service.get("status") == "running":
+ service["state_ok"] = True
+ elif service.get("result") == "exit-code":
+ service["state_ok"] = False
+ else:
+ service["state_ok"] = None
+
+ except Exception as e:
+ #print("Error getting service info for: {} - {}".format(service['name'], e))
+ pass
 
  services_status = []
  for service in services_list: 
  services_status.append({key:service[key] for key in service if key != 'unit'})
 
- print(services_status)
- socketio.emit("services status", json.dumps(services_status), namespace="/test")
+ services_status = repaint_services_button(services_status)
+ #print(services_status)
+ if emit_pingback:
+ socketio.emit("services status", json.dumps(services_status), namespace="/test")
  return services_status
 
 @socketio.on("services switch", namespace="/test")
@@ -623,9 +674,11 @@ def switchService(json_msg):
 
  except Exception as e:
  print(e)
- finally:
- time.sleep(5)
- getServicesStatus()
+ # finally not needed anymore since the service status is refreshed continuously
+ # with the manager
+ #finally:
+ # time.sleep(5)
+ # getServicesStatus()
 
 @socketio.on("form data", namespace="/test")
 def update_settings(json_msg):

web_app/static/lib/bootstrap4-toggle.css

@@ -0,0 +1,142 @@
+/*\
+|*| ========================================================================
+|*| Bootstrap Toggle: bootstrap4-toggle.css v3.7.0
+|*| https://gitbrent.github.io/bootstrap4-toggle/
+|*| ========================================================================
+|*| Copyright 2018-2019 Brent Ely
+|*| Licensed under MIT
+|*| ========================================================================
+\*/
+
+/*
+* @added 3.0.0: Return support for "*-xs" removed in Bootstrap-4
+* @see: [Comment](https://github.com/twbs/bootstrap/issues/21881#issuecomment-341972830)
+*/
+.btn-group-xs > .btn, .btn-xs {
+ padding: .35rem .4rem .25rem .4rem;
+ font-size: .875rem;
+ line-height: .5;
+ border-radius: .2rem;
+}
+
+.checkbox label .toggle, .checkbox-inline .toggle {
+ margin-left: -1.25rem;
+ margin-right: .35rem;
+}
+
+.toggle {
+ position: relative;
+ overflow: hidden;
+}
+.toggle.btn.btn-light, .toggle.btn.btn-outline-light {
+ /* bootstrap-4 - add a border so toggle is delineated */
+ border-color: rgba(0, 0, 0, .15);
+}
+.toggle input[type="checkbox"] {
+ display: none;
+}
+.toggle-group {
+ position: absolute;
+ width: 200%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ transition: left 0.35s;
+ -webkit-transition: left 0.35s;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+}
+.toggle-group label, .toggle-group span { cursor: pointer; }
+.toggle.off .toggle-group {
+ left: -100%;
+}
+.toggle-on {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 50%;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+}
+.toggle-off {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ right: 0;
+ margin: 0;
+ border: 0;
+ border-radius: 0;
+ box-shadow: none; /* Bootstrap 4.0 Support via (Issue #186)[https://github.com/minhur/bootstrap-toggle/issues/186]) */
+}
+.toggle-handle {
+ position: relative;
+ margin: 0 auto;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ height: 100%;
+ width: 0px;
+ border-width: 0 1px;
+ background-color: #fff;
+}
+
+.toggle.btn-outline-primary .toggle-handle {
+ background-color: var(--primary);
+ border-color: var(--primary);
+}
+.toggle.btn-outline-secondary .toggle-handle {
+ background-color: var(--secondary);
+ border-color: var(--secondary);
+}
+.toggle.btn-outline-success .toggle-handle {
+ background-color: var(--success);
+ border-color: var(--success);
+}
+.toggle.btn-outline-danger .toggle-handle {
+ background-color: var(--danger);
+ border-color: var(--danger);
+}
+.toggle.btn-outline-warning .toggle-handle {
+ background-color: var(--warning);
+ border-color: var(--warning);
+}
+.toggle.btn-outline-info .toggle-handle {
+ background-color: var(--info);
+ border-color: var(--info);
+}
+.toggle.btn-outline-light .toggle-handle {
+ background-color: var(--light);
+ border-color: var(--light);
+}
+.toggle.btn-outline-dark .toggle-handle {
+ background-color: var(--dark);
+ border-color: var(--dark);
+}
+.toggle[class*="btn-outline"]:hover .toggle-handle {
+ background-color: var(--light);
+ opacity: 0.5;
+}
+
+/* NOTE: Must come first, so classes below override as needed */
+/* [default] (bootstrap-4.1.3 - .btn - h:38px) */
+.toggle.btn { min-width: 3.7rem; min-height: 2.15rem; }
+.toggle-on.btn { padding-right: 1.5rem; }
+.toggle-off.btn { padding-left: 1.5rem; }
+
+/* `lg` (bootstrap-4.1.3 - .btn - h:48px) */
+.toggle.btn-lg { min-width: 5rem; min-height: 2.815rem; }
+.toggle-on.btn-lg { padding-right: 2rem; }
+.toggle-off.btn-lg { padding-left: 2rem; }
+.toggle-handle.btn-lg { width: 2.5rem; }
+
+/* `sm` (bootstrap-4.1.3 - .btn - h:31px) */
+.toggle.btn-sm { min-width: 3.125rem; min-height: 1.938rem; }
+.toggle-on.btn-sm { padding-right: 1rem; }
+.toggle-off.btn-sm { padding-left: 1rem; }
+
+/* `xs` (bootstrap-3.3 - .btn - h:22px) */
+.toggle.btn-xs { min-width: 2.19rem; min-height: 1.375rem; }
+.toggle-on.btn-xs { padding-right: .8rem; }
+.toggle-off.btn-xs { padding-left: .8rem; }