chg: [app:live-logs] Improved notification activity chart

This commit is contained in:
Sami Mokaddem 2024-07-08 12:18:31 +02:00
parent 33bc5ca0bb
commit 58d4af812d
4 changed files with 37 additions and 11 deletions

View file

@ -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():

View file

@ -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">

View file

@ -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) {

View file

@ -8,10 +8,13 @@ export default {
extend: {
transitionProperty: {
'width': 'width'
} ,
},
screens: {
'3xl': '1800px',
}
},
fontSize: {
'xxs': '0.6rem',
},
},
},
plugins: [