|
| 1 | +<script lang="ts" setup> |
| 2 | +import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query' |
| 3 | +import { ubusCall, ValidationError } from '@/lib/standalone/ubus.ts' |
| 4 | +import FlowsTable from '@/components/standalone/monitoring/FlowsTable.vue' |
| 5 | +import { |
| 6 | + getAxiosErrorMessage, |
| 7 | + NeButton, |
| 8 | + NeInlineNotification, |
| 9 | + NeSideDrawer, |
| 10 | + NeSkeleton, |
| 11 | + NeTextInput, |
| 12 | + NeToggle |
| 13 | +} from '@nethesis/vue-components' |
| 14 | +import { useI18n } from 'vue-i18n' |
| 15 | +import { ref, watch } from 'vue' |
| 16 | +import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges.ts' |
| 17 | +import { MessageBag } from '@/lib/validation.ts' |
| 18 | +
|
| 19 | +const { t } = useI18n() |
| 20 | +const uci = useUciPendingChangesStore() |
| 21 | +
|
| 22 | +type FlowDaemonResponse = { |
| 23 | + data: { |
| 24 | + configuration: { |
| 25 | + enabled: boolean |
| 26 | + expired_persistence: string |
| 27 | + } |
| 28 | + status: boolean |
| 29 | + } |
| 30 | +} |
| 31 | +
|
| 32 | +const { data, error, status } = useQuery({ |
| 33 | + queryKey: ['flow', 'daemon'], |
| 34 | + queryFn: async () => ubusCall<FlowDaemonResponse>('ns.flows', 'get-configuration'), |
| 35 | + select: (data) => data.data |
| 36 | +}) |
| 37 | +
|
| 38 | +const enabled = ref(false) |
| 39 | +const expiredPersistence = ref('') |
| 40 | +watch( |
| 41 | + data, |
| 42 | + (val) => { |
| 43 | + if (val != undefined) { |
| 44 | + enabled.value = val.configuration.enabled |
| 45 | + expiredPersistence.value = val.configuration.expired_persistence |
| 46 | + } |
| 47 | + }, |
| 48 | + { immediate: true } |
| 49 | +) |
| 50 | +
|
| 51 | +const configuringDaemon = ref(false) |
| 52 | +
|
| 53 | +type SetConfigPayload = { |
| 54 | + enabled: boolean |
| 55 | + expired_persistence: string |
| 56 | +} |
| 57 | +
|
| 58 | +const validationBag = ref(new MessageBag()) |
| 59 | +const queryClient = useQueryClient() |
| 60 | +const { |
| 61 | + mutate, |
| 62 | + isPending, |
| 63 | + error: mutationError |
| 64 | +} = useMutation({ |
| 65 | + mutationFn: (payload: SetConfigPayload) => ubusCall('ns.flows', 'set-configuration', payload), |
| 66 | + onSuccess: async () => { |
| 67 | + await Promise.all([ |
| 68 | + uci.getChanges(), |
| 69 | + queryClient.invalidateQueries({ queryKey: ['flow', 'daemon'] }) |
| 70 | + ]) |
| 71 | + configuringDaemon.value = false |
| 72 | + }, |
| 73 | + onError: (err) => { |
| 74 | + if (err instanceof ValidationError) { |
| 75 | + validationBag.value = err.errorBag |
| 76 | + } |
| 77 | + }, |
| 78 | + onMutate: () => { |
| 79 | + validationBag.value = new MessageBag() |
| 80 | + } |
| 81 | +}) |
| 82 | +
|
| 83 | +function submit() { |
| 84 | + mutate({ |
| 85 | + enabled: enabled.value, |
| 86 | + expired_persistence: expiredPersistence.value |
| 87 | + }) |
| 88 | +} |
| 89 | +</script> |
| 90 | + |
| 91 | +<template> |
| 92 | + <NeSkeleton v-if="status == 'pending'" :lines="10" /> |
| 93 | + <NeInlineNotification |
| 94 | + v-else-if="status == 'error'" |
| 95 | + :description="t(getAxiosErrorMessage(error))" |
| 96 | + :title="t('standalone.flows.unable_to_get_flows_configuration')" |
| 97 | + kind="error" |
| 98 | + /> |
| 99 | + <div v-else class="space-y-4"> |
| 100 | + <div class="flex flex-wrap items-start gap-4"> |
| 101 | + <p class="mr-auto max-w-xl text-secondary-neutral">{{ t('standalone.flows.subtitle') }}</p> |
| 102 | + <NeButton kind="secondary" size="lg" @click="configuringDaemon = true"> |
| 103 | + {{ t('standalone.flows.configure_flows_daemon') }} |
| 104 | + </NeButton> |
| 105 | + </div> |
| 106 | + <NeInlineNotification |
| 107 | + v-if="!data!.configuration.enabled" |
| 108 | + :description="t('standalone.flows.daemon_disabled_description')" |
| 109 | + :title="t('standalone.flows.daemon_disabled')" |
| 110 | + kind="info" |
| 111 | + /> |
| 112 | + <FlowsTable v-else /> |
| 113 | + </div> |
| 114 | + <NeSideDrawer |
| 115 | + :is-shown="configuringDaemon" |
| 116 | + :title="t('standalone.flows.configure_flows_daemon')" |
| 117 | + @close="configuringDaemon = false" |
| 118 | + > |
| 119 | + <form v-if="status == 'success'" class="space-y-8" @submit.prevent="submit"> |
| 120 | + <NeInlineNotification |
| 121 | + v-if="mutationError != null && validationBag.size < 1" |
| 122 | + :description="t(getAxiosErrorMessage(mutationError))" |
| 123 | + :title="t('standalone.flows.unable_to_configure_flows_daemon')" |
| 124 | + kind="error" |
| 125 | + /> |
| 126 | + <NeToggle |
| 127 | + v-model="enabled" |
| 128 | + :disabled="isPending" |
| 129 | + :label="enabled ? t('common.enabled') : t('common.disabled')" |
| 130 | + :top-label="t('standalone.flows.daemon_enabled')" |
| 131 | + :invalid-message="t(validationBag.getFirstI18nKeyFor('enabled'))" |
| 132 | + /> |
| 133 | + <NeTextInput |
| 134 | + v-model="expiredPersistence" |
| 135 | + :disabled="isPending" |
| 136 | + :label="t('standalone.flows.persistence_after_expiration')" |
| 137 | + :invalid-message="t(validationBag.getFirstI18nKeyFor('expired_persistence'))" |
| 138 | + /> |
| 139 | + <hr /> |
| 140 | + <div class="flex flex-wrap justify-end gap-6"> |
| 141 | + <NeButton :disabled="isPending" kind="tertiary" @click="configuringDaemon = false"> |
| 142 | + {{ t('common.cancel') }} |
| 143 | + </NeButton> |
| 144 | + <NeButton :disabled="isPending" :loading="isPending" kind="primary" type="submit"> |
| 145 | + {{ t('common.configure') }} |
| 146 | + </NeButton> |
| 147 | + </div> |
| 148 | + </form> |
| 149 | + </NeSideDrawer> |
| 150 | +</template> |
0 commit comments