From 93cfc482b811a68634a5c82630ac8cf32dd1adfa Mon Sep 17 00:00:00 2001 From: Donald Zou Date: Tue, 31 Dec 2024 10:31:24 +0800 Subject: [PATCH] Commit --- src/dashboard.py | 12 +-- .../peerDataUsageCharts.vue | 59 ++++++++----- .../peerListComponents/peerListModals.vue | 17 +++- .../configurationComponents/peerListNew.vue | 83 ++++++++++++++++++- 4 files changed, 141 insertions(+), 30 deletions(-) diff --git a/src/dashboard.py b/src/dashboard.py index 19eaff0..5ea2922 100644 --- a/src/dashboard.py +++ b/src/dashboard.py @@ -2060,12 +2060,12 @@ def sqlSelect(statement: str, paramters: tuple = ()) -> sqlite3.Cursor: # sqldb.row_factory = sqlite3.Row # cursor = sqldb.cursor() result = [] - with sqldb: - try: - cursor = sqldb.cursor() - result = cursor.execute(statement, paramters) - except Exception as error: - print("[WGDashboard] SQLite Error:" + str(error) + " | Statement: " + statement) + # with sqldb: + try: + cursor = sqldb.cursor() + result = cursor.execute(statement, paramters) + except Exception as error: + print("[WGDashboard] SQLite Error:" + str(error) + " | Statement: " + statement) return result def sqlUpdate(statement: str, paramters: tuple = ()) -> sqlite3.Cursor: diff --git a/src/static/app/src/components/configurationComponents/peerListComponents/peerDataUsageCharts.vue b/src/static/app/src/components/configurationComponents/peerListComponents/peerDataUsageCharts.vue index 2ac581a..49e2bb4 100644 --- a/src/static/app/src/components/configurationComponents/peerListComponents/peerDataUsageCharts.vue +++ b/src/static/app/src/components/configurationComponents/peerListComponents/peerDataUsageCharts.vue @@ -54,12 +54,21 @@ const fetchRealtimeTraffic = async () => { }, (res) => { let timestamp = dayjs().format("hh:mm:ss A") - historySentData.value.timestamp.push(timestamp) - historySentData.value.data.push(res.data.sent) + if (res.data.sent !== 0 && res.data.recv !== 0){ + historySentData.value.timestamp.push(timestamp) + historySentData.value.data.push(res.data.sent) - historyReceivedData.value.timestamp.push(timestamp) - historyReceivedData.value.data.push(res.data.recv) + historyReceivedData.value.timestamp.push(timestamp) + historyReceivedData.value.data.push(res.data.recv) + }else{ + if (historySentData.value.data.length > 0 && historyReceivedData.value.data.length > 0){ + historySentData.value.timestamp.push(timestamp) + historySentData.value.data.push(res.data.sent) + historyReceivedData.value.timestamp.push(timestamp) + historyReceivedData.value.data.push(res.data.recv) + } + } }) } const toggleFetchRealtimeTraffic = () => { @@ -89,16 +98,17 @@ onBeforeUnmount(() => { fetchRealtimeTrafficInterval.value = undefined; }) const peersDataUsageChartData = computed(() => { + let data = props.configurationPeers.filter(x => (x.cumu_data + x.total_data) > 0) + return { - labels: props.configurationPeers.map(x => { + labels: data.map(x => { if (x.name) return x.name return `Untitled Peer - ${x.id}` }), datasets: [{ label: 'Total Data Usage', - data: props.configurationPeers.map(x => x.cumu_data + x.total_data), - backgroundColor: props.configurationPeers.map(x => `#ffc107`), - barThickness: 50, + data: data.map(x => x.cumu_data + x.total_data), + backgroundColor: data.map(x => `#ffc107`), tooltip: { callbacks: { label: (tooltipItem) => { @@ -133,6 +143,7 @@ const peersRealtimeReceivedData = computed(() => { data: [...historyReceivedData.value.data], fill: false, borderColor: '#0d6efd', + backgroundColor: '#0d6efd', tension: 0 }, ], @@ -160,7 +171,7 @@ const peersDataUsageChartOption = computed(() => { y:{ ticks: { callback: (val, index) => { - return `${val} GB` + return `${Math.round((val + Number.EPSILON) * 1000) / 1000} GB` } }, grid: { @@ -191,18 +202,17 @@ const realtimePeersChartOption = computed(() => { display: false, }, grid: { - display: false + display: true }, }, y:{ ticks: { callback: (val, index) => { - return `${Math.round((val + Number.EPSILON) * 1000) / 1000 - } MB/s` + return `${Math.round((val + Number.EPSILON) * 1000) / 1000} MB/s` } }, grid: { - display: false + display: true }, } } @@ -228,9 +238,14 @@ const realtimePeersChartOption = computed(() => {
-
- -
+
+ + + + + {{historyReceivedData.data[historyReceivedData.data.length - 1]}} MB/s + +
{
-
- -
+
+ + + + + {{historySentData.data[historySentData.data.length - 1]}} MB/s + +
diff --git a/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue b/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue index ec1ba84..b25c78d 100644 --- a/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue +++ b/src/static/app/src/components/configurationComponents/peerListComponents/peerListModals.vue @@ -1,6 +1,12 @@