feat: added indicator of metric upload

NethServer · Oct 1, 2024 · 111906b · 111906b
1 parent 3366041
commit 111906b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 13 deletions.
diff --git 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
@@ -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>