From 6f01c008e88ad3c4a45fab7f8624416975756033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Marseault?=
 <22910497+Larsluph@users.noreply.github.com>
Date: Wed, 15 Nov 2023 00:01:38 +0100
Subject: [PATCH] feat(ConnectionStatusDialog): Add DHT node and active peer
 connections (#1312)

---
 .../Dialogs/ConnectionStatusDialog.vue        | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/Dialogs/ConnectionStatusDialog.vue b/src/components/Dialogs/ConnectionStatusDialog.vue
index 152c2a61..88cc7728 100644
--- a/src/components/Dialogs/ConnectionStatusDialog.vue
+++ b/src/components/Dialogs/ConnectionStatusDialog.vue
@@ -35,17 +35,31 @@ const close = () => {
   <v-dialog v-model="isOpened">
     <v-card>
       <v-card-text>
-        <v-list>
-          <v-list-item :title="$t('dialogs.connectionStatus.status')">
-            <span :class="['ml-2', connectionStatusColor]">
-              {{ $t('constants.connectionStatus.' + maindataStore.serverState?.connection_status) }}
-            </span>
-          </v-list-item>
-          <v-list-item :title="$t('dialogs.connectionStatus.externalIp')">
-            <span class="ml-2" v-if="logStore.externalIp">{{ logStore.externalIp }}</span>
-            <span class="ml-2 text-error" v-else>No IP detected</span>
-          </v-list-item>
-        </v-list>
+        <v-row>
+          <v-col cols="12" sm="6" lg="3">
+            <div>{{ $t('dialogs.connectionStatus.status') }}</div>
+            <div :class="['ml-2', connectionStatusColor]">{{ $t('constants.connectionStatus.' + maindataStore.serverState?.connection_status) }}</div>
+          </v-col>
+          <v-col cols="12" sm="6" lg="3">
+            <div>{{ $t('dialogs.connectionStatus.externalIp') }}</div>
+            <div class="ml-2">
+              <span v-if="logStore.externalIp">{{ logStore.externalIp }}</span>
+              <span v-else class="text-error">No IP detected</span>
+            </div>
+          </v-col>
+          <v-col cols="12" sm="6" lg="3">
+            <div>{{ $t('dialogs.connectionStatus.dht_nodes') }}</div>
+            <div class="ml-2">
+              {{ maindataStore.serverState?.dht_nodes }}
+            </div>
+          </v-col>
+          <v-col cols="12" sm="6" lg="3">
+            <div>{{ $t('dialogs.connectionStatus.total_peer_connections') }}</div>
+            <div class="ml-2">
+              {{ maindataStore.serverState?.total_peer_connections }}
+            </div>
+          </v-col>
+        </v-row>
       </v-card-text>
       <v-card-actions>
         <v-spacer />