feat: added netifyd flows

package.json

@@ -33,6 +33,8 @@
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
     "@nethesis/vue-components": "^3.2.0",
     "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/vue-query": "^5.92.9",
+    "@tanstack/vue-query-devtools": "^6.1.4",
     "@types/lodash-es": "^4.17.12",
     "@types/semver": "^7.5.8",
     "@vuepic/vue-datepicker": "^12.0.5",

src/components/AdvancedSettingsDropdown.vue

@@ -21,7 +21,9 @@ const icon = computed<IconDefinition>(() => {
 
 <template>
   <NeButton kind="tertiary" @click="model = !model">
-    {{ t('common.advanced_settings') }}
+    <slot name="title">
+      {{ t('common.advanced_settings') }}
+    </slot>
     <template #suffix>
       <FontAwesomeIcon :icon="icon" class="h-4 w-4" aria-hidden="true" />
     </template>

src/components/standalone/monitoring/FlowSection.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import {
+  getAxiosErrorMessage,
+  NeButton,
+  NeInlineNotification,
+  NeSkeleton
+} from '@nethesis/vue-components'
+import { useI18n } from 'vue-i18n'
+import { ref, watch } from 'vue'
+import FlowConfigureDrawer from '@/components/standalone/monitoring/flows/FlowConfigureDrawer.vue'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus.ts'
+import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue'
+
+const { t } = useI18n()
+
+type FlowDaemonResponse = {
+  data: {
+    configuration: {
+      enabled: boolean
+      expired_persistence: string
+    }
+    status: boolean
+  }
+}
+
+const configuringDaemon = ref(false)
+const daemonRunning = ref(false)
+const { isSuccess, isError, isPending, data, error } = useQuery({
+  queryKey: ['flow', 'config'],
+  queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'),
+  select: (data) => data.data,
+  refetchInterval: () => {
+    if (configuringDaemon.value || daemonRunning.value) {
+      return false
+    } else {
+      return 5000
+    }
+  }
+})
+
+const enabled = ref(false)
+const expiredPersistence = ref('')
+watch(data, (newData) => {
+  if (newData != undefined) {
+    daemonRunning.value = newData.status
+    enabled.value = newData.configuration.enabled
+    expiredPersistence.value = newData.configuration.expired_persistence
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-start gap-4">
+      <p class="mr-auto max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p>
+      <template v-if="isSuccess">
+        <NeButton
+          v-if="data!.configuration.enabled"
+          kind="secondary"
+          size="lg"
+          @click="configuringDaemon = true"
+        >
+          {{ t('standalone.flows.configure_flows_daemon') }}
+        </NeButton>
+      </template>
+    </div>
+    <NeSkeleton v-if="isPending" :lines="10" />
+    <NeInlineNotification
+      v-else-if="isError"
+      :description="t(getAxiosErrorMessage(error))"
+      :title="t('standalone.unable_to_get_flows_configuration')"
+      kind="error"
+    />
+    <template v-else>
+      <NeInlineNotification
+        v-if="!data!.configuration.enabled"
+        :description="t('standalone.flows.daemon_disabled_description')"
+        :primary-button-label="t('standalone.flows.configure_flows_daemon')"
+        :title="t('standalone.flows.daemon_disabled')"
+        kind="info"
+        @primary-click="configuringDaemon = true"
+      />
+      <NeInlineNotification
+        v-else-if="!data!.status"
+        :description="t('standalone.flows.daemon_not_running_description')"
+        :title="t('standalone.flows.daemon_not_running')"
+        kind="warning"
+      />
+      <FlowsTable v-else />
+    </template>
+    <FlowConfigureDrawer
+      :enabled="enabled"
+      :expired-persistence="expiredPersistence"
+      :show="configuringDaemon"
+      @close="configuringDaemon = false"
+    />
+  </div>
+</template>