From 111906bbad9f95236b226e4e0ca1070731211f6b Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Tue, 1 Oct 2024 09:58:41 +0200
Subject: [PATCH] feat: added indicator of metric upload

---
 public/i18n/en/translation.json               |  7 +-
 .../standalone/system/ControllerView.vue      | 69 +++++++++++++++----
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 07c02413d..556ca8a51 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -780,7 +780,12 @@
       "data_updated_every_seconds": "Data updated every {seconds} seconds",
       "disclaimer": "Disclaimer",
       "connect_unit_message": "Unit logs will be transmitted to the Controller for the purposes of storage, monitoring, and analysis of network usage. \nIf you do not wish for this data to leave the device, do not connect to the Controller.",
-      "confirm_and_connect": "Confirm and connect"
+      "confirm_and_connect": "Confirm and connect",
+      "sending_data_to_controller": "Sending Monitoring data to Controller",
+      "sending_data_to_controller_tooltip": "Complete monitoring available on Grafana with NethSecurity",
+      "sending_data_to_controller_tooltip_link": "subscription",
+      "last_sent": "Last sent: {date}.",
+      "no_last_sent": "Data is being prepared for transmission."
     },
     "network": {
       "title": "Network"
diff --git a/src/views/standalone/system/ControllerView.vue b/src/views/standalone/system/ControllerView.vue
index aa84427cd..1e4164d35 100644
--- a/src/views/standalone/system/ControllerView.vue
+++ b/src/views/standalone/system/ControllerView.vue
@@ -11,6 +11,7 @@ import {
   NeButton,
   NeHeading,
   NeInlineNotification,
+  NeLink,
   NeModal,
   NeSkeleton,
   NeTextArea,
@@ -23,6 +24,8 @@ import FormLayout from '@/components/standalone/FormLayout.vue'
 import { onMounted, onUnmounted, ref, type Ref } from 'vue'
 import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
 import { MessageBag, validateRequired, type validationOutput } from '@/lib/validation'
+import { useRoute } from 'vue-router'
+import { getStandaloneRoutePrefix } from '@/lib/router'
 
 type ControllerRegistrationStatus = {
   status: 'connected' | 'unregistered' | 'pending'
@@ -31,9 +34,12 @@ type ControllerRegistrationStatus = {
   unit_name: string
   unit_id: string
   tls_verify: boolean
+  push_status: 'enabled' | 'disabled'
+  push_last_sent: number
 }
 
 const { t } = useI18n()
+const route = useRoute()
 
 const loading = ref(false)
 const isPerformingAction = ref(false)
@@ -61,6 +67,8 @@ const controllerUrl = ref('')
 const controllerJoinCode = ref('')
 const verifyTlsCertificate = ref(false)
 const vpnIpAddress = ref('')
+const push_status = ref<'enabled' | 'disabled'>('disabled')
+const push_last_sent = ref(-1)
 
 // textinputs refs
 const unitNameRef = ref()
@@ -90,6 +98,8 @@ async function fetchControllerRegistrationStatus(showLoadingSkeleton?: boolean)
     unitName.value = registrationStatus.unit_name
     verifyTlsCertificate.value = registrationStatus.tls_verify
     vpnIpAddress.value = registrationStatus.address ?? ''
+    push_status.value = registrationStatus.push_status ?? 'disabled'
+    push_last_sent.value = registrationStatus.push_last_sent ?? -1
   } catch (err: any) {
     error.value.notificationTitle = t('error.cannot_fetch_controller_registration_status')
     error.value.notificationDescription = t(getAxiosErrorMessage(err))
@@ -311,18 +321,53 @@ function promptConnectUnit() {
           :top-label="t('standalone.controller.verify_tls_certificate')"
           :label="verifyTlsCertificate ? t('common.enabled') : t('common.disabled')"
         />
-        <div class="align-center flex flex-row" v-else>
-          <NeHeading tag="h6" class="!mb-0 mr-4 inline-block">{{ t('common.status') }}</NeHeading>
-          <NeBadge
-            :text="
-              status === 'pending'
-                ? t('standalone.controller.pending')
-                : t('standalone.controller.connected')
-            "
-            :kind="status === 'pending' ? 'warning' : 'success'"
-            size="sm"
-          />
-        </div>
+        <template v-else>
+          <div class="flex flex-col gap-2">
+            <label class="text-sm font-medium">
+              {{ t('common.status') }}
+            </label>
+            <NeBadge
+              v-if="status === 'pending'"
+              :text="t('standalone.controller.pending')"
+              kind="warning"
+              size="sm"
+            />
+            <NeBadge v-else :text="t('standalone.controller.connected')" kind="success" size="sm" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="flex gap-2">
+              <label class="text-sm font-medium">
+                {{ t('standalone.controller.sending_data_to_controller') }}
+              </label>
+              <NeTooltip>
+                <template #content>
+                  {{ t('standalone.controller.sending_data_to_controller_tooltip') }}
+                  <NeLink inverted-theme>
+                    <RouterLink :to="`${getStandaloneRoutePrefix(route)}/system/subscription`">
+                      {{ t('standalone.controller.sending_data_to_controller_tooltip_link') }}
+                    </RouterLink>
+                  </NeLink>
+                </template>
+              </NeTooltip>
+            </div>
+            <template v-if="push_status == 'enabled'">
+              <NeBadge :text="t('common.enabled')" kind="success" size="sm" />
+              <p class="text-sm text-gray-400 dark:text-gray-500">
+                <template v-if="push_last_sent > -1">
+                  {{
+                    t('standalone.controller.last_sent', {
+                      date: new Date(push_last_sent * 1000).toLocaleString()
+                    })
+                  }}
+                </template>
+                <template v-else>
+                  {{ t('standalone.controller.no_last_sent') }}
+                </template>
+              </p>
+            </template>
+            <NeBadge v-else :text="t('common.disabled')" kind="warning" size="sm" />
+          </div>
+        </template>
         <div v-if="status === 'unregistered'">
           <NeButton kind="primary" @click="promptConnectUnit" :disabled="isPerformingAction">
             <template #prefix>