From 58d4af812d1a25205a37659c8f7abfbd43427a60 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 8 Jul 2024 12:18:31 +0200
Subject: [PATCH] chg: [app:live-logs] Improved notification activity chart

---
 notification.py                | 10 +++++++++-
 src/components/TheLiveLogs.vue | 24 ++++++++++++++++++------
 src/socket.js                  |  7 +++++--
 tailwind.config.js             |  7 +++++--
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/notification.py b/notification.py
index 8628419..d08f87d 100644
--- a/notification.py
+++ b/notification.py
@@ -28,7 +28,15 @@ def get_notifications() -> list[dict]:
 
 
 def get_notifications_history() -> list[dict]:
-    return list(db.NOTIFICATION_HISTORY)
+    return {
+        'history': list(db.NOTIFICATION_HISTORY),
+        'config': {
+            'buffer_resolution_per_minute': db.NOTIFICATION_HISTORY_BUFFER_RESOLUTION_PER_MIN,
+            'buffer_timestamp_min': db.NOTIFICATION_HISTORY_BUFFER_TIMESPAN_MIN,
+            'frequency': db.NOTIFICATION_HISTORY_FREQUENCY,
+            'notification_history_size': db.notification_history_size,
+        },
+    }
 
 
 def reset_notifications():
diff --git a/src/components/TheLiveLogs.vue b/src/components/TheLiveLogs.vue
index b3f3ca5..1d90546 100644
--- a/src/components/TheLiveLogs.vue
+++ b/src/components/TheLiveLogs.vue
@@ -1,6 +1,6 @@
 <script setup>
   import { ref, watch, computed } from "vue"
-  import { notifications, userCount, notificationCounter, notificationAPICounter, notificationHistory, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
+  import { notifications, userCount, notificationCounter, notificationAPICounter, notificationHistory, notificationHistoryConfig, toggleVerboseMode, toggleApiQueryMode } from "@/socket";
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faSignal, faCloud, faCog, faUser, faCircle } from '@fortawesome/free-solid-svg-icons'
 
@@ -9,9 +9,10 @@
   const verbose = ref(false)
   const api_query = ref(false)
   const chartInitSeries = [
-    // {data: Array.apply(null, {length: 180}).map(Function.call, Math.random)}
+    // {data: Array.apply(null, {length: 240}).map(Function.call, Math.random)}
     {data: Array.from(Array(12*20)).map(()=> 0)}
   ]
+  const hasActivity = ref(false)
 
   const notificationHistorySeries = computed(() => {
     return [{data: Array.from(notificationHistory.value)}]
@@ -45,8 +46,6 @@
         columnWidth: '80%'
       }
     },
-    xaxis: {
-    },
     yaxis: {
       min: 0,
     },
@@ -64,6 +63,7 @@
   })
 
   watch(notificationHistorySeries, (newValue) => {
+    hasActivity.value = notificationHistory.value.filter((x) => x != 0).length > 0
     theChart.value.updateSeries(newValue)
   })
 
@@ -122,8 +122,20 @@
     </span>
   </div>
 
-  <div class="my-2 -ml-1">
-    <apexchart ref="theChart" height="32" width="100%" :options="chartOptions" :series="chartInitSeries"></apexchart>
+  <div class="my-2 --ml-1 bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
+    <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
+      <div class="text-xxs flex justify-between h-full items-center">
+        <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
+        <span class="-rotate-90 w-8 text-xs">–</span>
+        <span class="-rotate-90 w-8 text-lg">–</span>
+        <span class="-rotate-90 w-8 text-xs">–</span>
+        <span class="-rotate-90 w-8 -mr-1.5">- 0min</span>
+      </div>
+    </div>
+    <i :class="['text-center text-slate-600 dark:text-slate-400', hasActivity ? 'hidden' : 'block']">
+      - No recorded activity -
+    </i>
+    <apexchart ref="theChart" :class="hasActivity ? 'block' : 'absolute h-8 w-full'" height="32" width="100%" :options="chartOptions" :series="chartInitSeries"></apexchart>
   </div>
 
   <table class="bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full">
diff --git a/src/socket.js b/src/socket.js
index 97669f5..a5e282e 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -11,6 +11,7 @@ const initial_state = {
   notificationCounter: 0,
   notificationAPICounter: 0,
   notificationHistory: [],
+  notificationHistoryConfig: {},
   exercises: [],
   selected_exercises: [],
   progresses: {},
@@ -42,6 +43,7 @@ export const notificationAPICounter = computed(() => state.notificationAPICounte
 export const userCount = computed(() => Object.keys(state.progresses).length)
 export const diagnostic = computed(() => state.diagnostic)
 export const notificationHistory = computed(() => state.notificationHistory)
+export const notificationHistoryConfig = computed(() => state.notificationHistoryConfig)
 export const socketConnected = computed(() => connectionState.connected)
 export const zmqLastTime = computed(() => connectionState.zmq_last_time)
 
@@ -196,8 +198,9 @@ socket.on("keep_alive", (keep_alive) => {
   connectionState.zmq_last_time = keep_alive['zmq_last_time']
 });
 
-socket.on("update_notification_history", (notification_history) => {
-  state.notificationHistory = notification_history
+socket.on("update_notification_history", (notification_history_bundle) => {
+  state.notificationHistory = notification_history_bundle.history
+  state.notificationHistoryConfig = notification_history_bundle.config
 });
 
 function addLimited(target, message, maxCount) {
diff --git a/tailwind.config.js b/tailwind.config.js
index f90ad81..c207627 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,10 +8,13 @@ export default {
     extend: {
       transitionProperty: {
         'width': 'width'
-      } ,
+      },
       screens: {
         '3xl': '1800px',
-      }
+      },
+      fontSize: {
+        'xxs': '0.6rem',
+      },
     },
   },
   plugins: [