From 02b8abe6ed72f9f7518b4969d99c679aff793e7c Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Mon, 25 Sep 2023 16:08:15 +0200
Subject: [PATCH] refactor: updated multiwan source apis

---
 .../standalone/multi-wan/MultiWanManager.vue  | 225 +++++++++----
 .../standalone/multi-wan/PolicyCreator.vue    | 311 ++++++------------
 src/lib/fontawesome.ts                        |   3 +-
 3 files changed, 263 insertions(+), 276 deletions(-)

diff --git a/src/components/standalone/multi-wan/MultiWanManager.vue b/src/components/standalone/multi-wan/MultiWanManager.vue
index 77bc84b87..a73decceb 100644
--- a/src/components/standalone/multi-wan/MultiWanManager.vue
+++ b/src/components/standalone/multi-wan/MultiWanManager.vue
@@ -6,31 +6,31 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import { reactive, ref } from 'vue'
-import type { Policy, Rule } from '@/composables/useMwanConfig'
+import type { Rule } from '@/composables/useMwanConfig'
 import { useMwanConfig } from '@/composables/useMwanConfig'
 import {
   getAxiosErrorMessage,
+  NeBadge,
   NeButton,
+  NeDropdown,
   NeInlineNotification,
-  NeModal,
-  NeSideDrawer,
   NeSkeleton
 } from '@nethserver/vue-tailwind-lib'
-import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'
-import RuleManager from '@/components/standalone/multi-wan/RuleManager.vue'
-import PolicyCreator from '@/components/standalone/multi-wan/PolicyCreator.vue'
 import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
-import RuleCreator from '@/components/standalone/multi-wan/RuleCreator.vue'
-import RuleEditor from '@/components/standalone/multi-wan/RuleEditor.vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import type { AxiosError } from 'axios'
-import PolicyView from '@/components/standalone/multi-wan/PolicyView.vue'
-import PolicyEditor from '@/components/standalone/multi-wan/PolicyEditor.vue'
+import type { Member, Policy } from '@/composables/useMwan'
+import { useMwan } from '@/composables/useMwan'
+import NeTable from '@/components/standalone/NeTable.vue'
+import HorizontalCard from '@/components/standalone/HorizontalCard.vue'
+import PolicyCreator from '@/components/standalone/multi-wan/PolicyCreator.vue'
 
 const { t } = useI18n()
 
+const mwan = ref(useMwan())
+
 const mwanConfig = reactive(useMwanConfig())
 const uciPendingChangesStore = useUciPendingChangesStore()
 
@@ -56,8 +56,8 @@ const ruleTimestamp = ref(Date.now())
  * Handler for policyCreated event.
  */
 function policyCreatedHandler() {
-  createPolicy.value = false
   reloadConfig()
+  createPolicy.value = false
 }
 
 /**
@@ -85,8 +85,7 @@ function ruleEditedHandler() {
 }
 
 function reloadConfig() {
-  mwanConfig.fetch()
-  ruleTimestamp.value = Date.now()
+  mwan.value.fetch()
   uciPendingChangesStore.getChanges()
 }
 
@@ -117,14 +116,52 @@ function deletePolicyHandler() {
     .catch((error: AxiosError) => (errorDeletingPolicy.value = error))
     .finally(() => (deletingPolicy.value = false))
 }
+
+function badgeIcon(member: Member) {
+  switch (member.status) {
+    case 'online':
+      return ['fas', 'circle-check']
+    case 'offline':
+      return ['fas', 'circle-xmark']
+    case 'disconnecting':
+    case 'connecting':
+      return ['fas', 'warning']
+    default:
+      return ['fas', 'clock']
+  }
+}
+
+function badgeType(member: Member) {
+  switch (member.status) {
+    case 'online':
+      return 'success'
+    case 'offline':
+      return 'error'
+    case 'disconnecting':
+    case 'connecting':
+      return 'warning'
+    default:
+      return undefined
+  }
+}
+
+function policyIcon(policy: Policy) {
+  switch (policy.type) {
+    case 'balance':
+      return ['fas', 'scale-balanced']
+    case 'backup':
+      return ['fas', 'layer-group']
+    default:
+      return ['fas', 'user-gear']
+  }
+}
 </script>
 
 <template>
-  <NeSkeleton v-if="mwanConfig.loading" :lines="10" />
-  <div v-else class="space-y-16">
+  <div class="space-y-16">
     <div class="space-y-8">
-      <div class="flex">
-        <div>
+      <div class="flex flex-wrap gap-y-4">
+        <div class="mr-auto">
           <h6 class="mb-2 text-xl font-medium text-gray-900 dark:text-gray-50">
             {{ t('standalone.multi_wan.policy') }}
           </h6>
@@ -133,9 +170,9 @@ function deletePolicyHandler() {
           </p>
         </div>
         <NeButton
-          v-if="mwanConfig.policies.length >= 1"
-          :kind="'secondary'"
-          class="ml-auto self-start"
+          v-if="mwan.policies.length > 0"
+          kind="secondary"
+          class="self-start"
           @click="createPolicy = true"
         >
           <template #prefix>
@@ -144,62 +181,112 @@ function deletePolicyHandler() {
           {{ t('standalone.multi_wan.create_policy') }}
         </NeButton>
       </div>
-      <div class="space-y-6">
-        <NeSkeleton v-if="mwanConfig.loading" :lines="3" :size="'sm'" />
-        <template v-else-if="mwanConfig.policies.length > 0">
-          <PolicyView
-            v-for="(policy, index) in mwanConfig.policies"
-            :key="index"
-            :belongs-to-rule="mwanConfig.rules.some((rule) => rule.policy.name == policy.name)"
-            :policy="policy"
-            @delete="(toDeletePolicy) => (deletePolicy = toDeletePolicy)"
-            @edit="(toEditPolicy) => (editPolicy = toEditPolicy)"
-          />
+      <NeInlineNotification
+        v-if="mwan.error"
+        :title="t(getAxiosErrorMessage(mwan.error))"
+        kind="error"
+      />
+      <NeSkeleton :lines="10" v-else-if="mwan.loading" />
+      <HorizontalCard v-else-if="mwan.policies.length < 1" class="space-y-4 text-center">
+        <p>{{ t('standalone.multi_wan.no_policy_found') }}</p>
+        <NeButton :kind="'primary'" @click="createPolicy = true">
+          <template #prefix>
+            <FontAwesomeIcon :icon="faCirclePlus" />
+          </template>
+          {{ t('standalone.multi_wan.create_default_policy') }}
+        </NeButton>
+      </HorizontalCard>
+      <NeTable
+        v-else
+        :data="mwan.policies"
+        :headers="[
+          {
+            key: 'label',
+            label: 'Policy Name'
+          },
+          {
+            key: 'type'
+          },
+          {
+            key: 'gateways',
+            label: 'Gateways'
+          },
+          {
+            key: 'actions'
+          }
+        ]"
+        :style="'card'"
+      >
+        <template #label="{ item }: { item: Policy }">
+          <div class="flex items-center gap-4 border-r pr-8 dark:border-gray-600">
+            <div
+              v-if="item.name == 'ns_default'"
+              class="flex h-8 w-8 items-center justify-center rounded-full dark:bg-gray-50 dark:text-gray-600"
+            >
+              <FontAwesomeIcon :icon="['fas', 'lock']" />
+            </div>
+            <p>{{ item.label ?? item.name }}</p>
+          </div>
         </template>
-        <HorizontalCard v-else class="space-y-4 text-center">
-          <p>{{ t('standalone.multi_wan.no_policy_found') }}</p>
-          <NeButton :kind="'primary'" @click="createPolicy = true">
-            <template #prefix>
-              <FontAwesomeIcon :icon="faCirclePlus" />
-            </template>
-            {{ t('standalone.multi_wan.create_default_policy') }}
-          </NeButton>
-        </HorizontalCard>
-      </div>
-    </div>
-    <div v-if="mwanConfig.policies.length > 0">
-      <div class="space-y-6">
-        <div class="flex">
-          <div>
-            <h6 class="mb-2 text-xl font-medium text-gray-900 dark:text-gray-50">
-              {{ t('standalone.multi_wan.rules') }}
-            </h6>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              {{ t('standalone.multi_wan.rules_description') }}
-            </p>
+        <template #type="{ item }: { item: Policy }">
+          <div class="flex items-center">
+            <FontAwesomeIcon :icon="policyIcon(item)" class="mr-2" />
+            <p>{{ t(`standalone.multi_wan.modes.${item.type}`) }}</p>
           </div>
-          <NeButton :kind="'secondary'" class="ml-auto self-start" @click="createRule = true">
-            <template #prefix>
-              <FontAwesomeIcon :icon="faCirclePlus" />
-            </template>
-            {{ t('standalone.multi_wan.create_rule') }}
-          </NeButton>
-        </div>
-        <div>
-          <RuleManager
-            :key="ruleTimestamp"
-            @delete="(toDeleteRule) => (deleteRule = toDeleteRule)"
-            @edit="(toEditRule) => (editRule = toEditRule)"
-          />
-        </div>
-      </div>
+        </template>
+        <template #gateways="{ item }: { item: Policy }">
+          <div class="space-y-4">
+            <div
+              v-for="([metric, members], metricIndex) in Object.entries(item.members)"
+              :key="metric"
+              class="flex flex-wrap items-center gap-4"
+            >
+              <div v-if="Object.entries(item.members).length > 1">
+                {{ t('standalone.multi_wan.priority', metricIndex + 1) }}
+              </div>
+              <div class="flex flex-wrap gap-4">
+                <template v-for="(member, index) in members" :key="index">
+                  <NeBadge
+                    :icon="badgeIcon(member)"
+                    :kind="badgeType(member)"
+                    :label="members.length > 1 ? `weight: ${member.weight}` : ''"
+                    :text="member.interface"
+                  />
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+        <!--        <template #actions="{ item }: { item: Policy }">
+          <div class="flex items-center justify-end">
+            <NeButton :kind="'tertiary'">
+              <template #prefix>
+                <FontAwesomeIcon :icon="['fas', 'edit']" />
+              </template>
+              {{ t('common.edit') }}
+            </NeButton>
+            <NeDropdown
+              :items="[
+                {
+                  id: 'delete',
+                  label: t('common.delete'),
+                  disabled: item.name == 'ns_default',
+                  action: () => $emit('delete', item),
+                  danger: true
+                }
+              ]"
+              align-to-right
+            />
+          </div>
+        </template>-->
+      </NeTable>
     </div>
   </div>
   <PolicyCreator
-    :create-default="mwanConfig.policies.length < 1"
+    :create-default="mwan.policies.length < 1"
     :is-shown="createPolicy"
     @close="createPolicy = false"
-    @policy-created="policyCreatedHandler()"
+    @success="policyCreatedHandler()"
   />
   <NeSideDrawer
     :is-shown="editPolicy != undefined"
diff --git a/src/components/standalone/multi-wan/PolicyCreator.vue b/src/components/standalone/multi-wan/PolicyCreator.vue
index 76e2ce62a..4d40a2c6c 100644
--- a/src/components/standalone/multi-wan/PolicyCreator.vue
+++ b/src/components/standalone/multi-wan/PolicyCreator.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
 import {
-  getAxiosErrorMessage,
   NeButton,
   NeCombobox,
   NeFormItemLabel,
@@ -12,29 +11,16 @@ import {
   NeTextInput
 } from '@nethserver/vue-tailwind-lib'
 import { useI18n } from 'vue-i18n'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { ubusCall } from '@/lib/standalone/ubus'
-import type { AxiosError, AxiosResponse } from 'axios'
+import { computed, onMounted, ref, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { useMwanConfig } from '@/composables/useMwanConfig'
 import { MessageBag, validateRequired, validateUciName } from '@/lib/validation'
-import { useMwanDefaults } from '@/composables/useMwanDefaults'
+import { useFirewallStore, Zone } from '@/stores/standalone/useFirewallStore'
+import { ubusCall, ValidationError } from '@/lib/standalone/ubus'
+import type { AxiosError } from 'axios'
 
 const { t } = useI18n()
 
-/**
- * Interface describing the get firewall response
- */
-interface FirewallResponse {
-  values: {
-    [name: string]: {
-      name: string
-      network: Array<string>
-    }
-  }
-}
-
 /**
  * Gateway definition.
  */
@@ -75,6 +61,8 @@ const policyOptions = [
   }
 ]
 
+const firewall = useFirewallStore()
+
 const props = defineProps({
   isShown: {
     type: Boolean,
@@ -86,19 +74,11 @@ const props = defineProps({
   }
 })
 
-const mwanConfig = reactive(useMwanConfig())
-const mwanDefaults = reactive(useMwanDefaults())
+const form = ref<Form>(initForm())
 
-const form = ref<Form>({
-  label: '',
-  selection: policyOptions[0].id,
-  priorities: [[new Gateway(), new Gateway()]]
-})
-const gateways = ref<Array<NeComboboxOption>>()
-const error = ref<Error>()
-const loading = ref(false)
 const saving = ref(false)
 const messageBag = ref(new MessageBag())
+const error = ref<Error>()
 
 const labelElement = ref<HTMLInputElement | null>(null)
 
@@ -114,6 +94,19 @@ const isTrashButtonDisabled = computed<boolean>(() => {
   return false
 })
 
+const availableGateways = computed((): Array<NeComboboxOption> => {
+  return firewall.zones
+    .filter((zone: Zone) => zone.configName == 'ns_wan')
+    .map((zone: Zone) => zone.interfaces)
+    .flat()
+    .map((name: string) => {
+      return {
+        id: name,
+        label: name
+      }
+    })
+})
+
 /**
  * Map transformation of priorities and gateways between behaviours, allows to keep previous values set.
  */
@@ -142,55 +135,25 @@ watch(
 watch(
   () => props.isShown,
   () => {
-    if (props.createDefault) {
-      form.value.label = 'Default'
-    }
+    form.value = initForm()
     if (props.isShown && !props.createDefault) {
       setTimeout(() => labelElement.value?.focus(), 50)
     }
   }
 )
 
-/**
- * Get error from mwanDefaults if any
- */
-watch(
-  () => mwanDefaults.error,
-  () => (error.value = mwanDefaults.error)
-)
+const emit = defineEmits(['success', 'close'])
 
-/**
- * Get error from mwanConfig if any
- */
-watch(
-  () => mwanConfig.error,
-  () => (error.value = mwanConfig.error)
-)
-
-const emit = defineEmits(['policyCreated', 'abortCreation'])
-
-onMounted(() => fetchGateways())
+onMounted(() => {
+  firewall.fetch()
+})
 
-/**
- * Get gateways from the 'wan' firewall zone.
- */
-function fetchGateways() {
-  loading.value = true
-  ubusCall('uci', 'get', { config: 'firewall', type: 'zone' })
-    .then(
-      (response: AxiosResponse<FirewallResponse>) =>
-        (gateways.value = Object.entries(response.data.values)
-          .filter((value) => value[1].name == 'wan')
-          .flatMap((value) => value[1].network)
-          .map((value) => {
-            return {
-              id: value,
-              label: value
-            }
-          }))
-    )
-    .catch((exception: AxiosError) => (error.value = new Error(t(getAxiosErrorMessage(exception)))))
-    .finally(() => (loading.value = false))
+function initForm(): Form {
+  return {
+    label: props.createDefault ? 'Default' : '',
+    selection: policyOptions[0].id,
+    priorities: [[new Gateway(), new Gateway()]]
+  }
 }
 
 /**
@@ -215,134 +178,65 @@ function validate(): boolean {
     messageBag.value.set('label', [t(errMessage.valueOf())])
     labelElement.value?.focus()
   }
-  // TODO: implement priority/gateway validation
+  form.value.priorities.flat().forEach((priority, index) => {
+    errMessage = validateRequired(priority.id).errMessage
+    if (errMessage) {
+      messageBag.value.set(`interfaces.${index}.name`, [t(errMessage.valueOf())])
+    }
+  })
   return !(messageBag.value.size > 0)
 }
 
 /**
  * Create every entity needed for the policy to work. Interfaces, Members, Policies and Default Rule (if missing)
  */
-function createPolicy() {
+function create() {
   if (validate()) {
     saving.value = true
-    // group all calls in one big promise
-    let calls: Promise<any>[] = []
-    // interface creation
-    calls.push(
-      // start with organizing the interfaces to create
-      ...form.value.priorities
-        // flatten all priorities, get only the gateways picked
-        .map((priorities) => priorities.map((gateway) => gateway))
-        .flat(1)
-        // gateways must not already exist, this filters them out
-        .filter((gateway) => !mwanConfig.interfaces.some((iface) => iface.name == gateway.id))
-        // map all in multiple calls
-        .map((gateway) =>
-          ubusCall('uci', 'add', {
-            config: 'mwan3',
-            name: gateway.id,
-            type: 'interface',
-            values: {
-              enabled: '1',
-              initial_state: mwanDefaults.data!.values.initial_state,
-              family: mwanDefaults.data!.values.protocol,
-              track_ip: mwanDefaults.data!.values.track_ip,
-              track_method: mwanDefaults.data!.values.tracking_method,
-              reliability: mwanDefaults.data!.values.tracking_reliability,
-              count: mwanDefaults.data!.values.ping_count,
-              size: mwanDefaults.data!.values.ping_size,
-              max_ttl: mwanDefaults.data!.values.ping_max_ttl,
-              timeout: mwanDefaults.data!.values.ping_timeout,
-              interval: mwanDefaults.data!.values.ping_interval,
-              failure_interval: mwanDefaults.data!.values.ping_failure_interval,
-              recovery_interval: mwanDefaults.data!.values.ping_recovery_interval,
-              down: mwanDefaults.data!.values.interface_down_threshold,
-              up: mwanDefaults.data!.values.interface_up_threshold
+    ubusCall('ns.mwan', 'store_policy', {
+      name: form.value.label,
+      interfaces: form.value.priorities
+        .map((gateways, index) =>
+          gateways.map((gateway) => {
+            return {
+              name: gateway.id,
+              metric: (index + 1) * 10,
+              weight: gateway.weight
             }
           })
         )
-    )
-    // member creation
-    calls.push(
-      // for each priority we'll have +10 metric applied
-      ...form.value.priorities
-        .map((priority, index) =>
-          // call 'add' to each gateway
-          priority.map((gateway) =>
-            ubusCall('uci', 'add', {
-              config: 'mwan3',
-              name: `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`,
-              type: 'member',
-              values: {
-                interface: gateway.id,
-                metric: (index + 1) * 10,
-                weight: gateway.weight ?? 100
-              }
-            })
-          )
-        )
-        // flatten array, we have nested promises here
-        .flat(1)
-    )
-    calls.push(
-      // create policy
-      ubusCall('uci', 'add', {
-        config: 'mwan3',
-        name: form.value.label,
-        type: 'policy',
-        values: {
-          // map gateways to members name
-          // TODO: reuse name generation logic from above
-          use_member: form.value.priorities
-            .map((priority, index) =>
-              priority.map(
-                (gateway) => `${gateway.id}_M${(index + 1) * 10}_W${gateway.weight ?? 100}`
-              )
-            )
-            .flat(1)
-        }
-      })
-    )
-    // if this is the default policy, create a default rule too
-    if (props.createDefault) {
-      calls.push(
-        ubusCall('uci', 'add', {
-          config: 'mwan3',
-          name: 'DefaultRule',
-          type: 'rule',
-          values: {
-            proto: 'all',
-            src_ip: '0.0.0.0/0',
-            dest_ip: '0.0.0.0/0',
-            sticky: '0',
-            use_policy: form.value.label
-          }
-        })
-      )
-    }
-    // If all calls are successful, go forth and reload the UI
-    // TODO: implement error catching, with rollback.
-    Promise.all(calls).then(() => {
-      saving.value = false
-      emit('policyCreated')
+        .flat()
     })
+      .then(() => {
+        emit('success')
+        form.value = initForm()
+      })
+      .catch((reason: ValidationError) => {
+        messageBag.value = reason.errorBag
+      })
+      .catch((reason: AxiosError) => {
+        error.value = reason
+      })
+      .finally(() => {
+        saving.value = false
+      })
   }
 }
 </script>
 
 <template>
   <NeSideDrawer
+    @close="$emit('close')"
     :is-shown="isShown"
     :title="t('standalone.multi_wan.create_policy', { name: form.label })"
   >
-    <NeSkeleton v-if="loading" :lines="10" />
-    <NeInlineNotification v-else-if="error" :kind="'error'" :title="error.message" />
+    <NeInlineNotification v-if="firewall.error" :kind="'error'" :title="firewall.error.message" />
     <div v-else class="space-y-8">
       <NeTextInput
         ref="labelElement"
         v-model="form.label"
         :disabled="createDefault"
-        :invalid-message="messageBag.get('label')?.[0]"
+        :invalid-message="messageBag.getFirstFor('name')"
         :label="t('standalone.multi_wan.label_input_label')"
       />
       <NeRadioSelection
@@ -351,39 +245,44 @@ function createPolicy() {
         :options="policyOptions"
         :screen-reader-help-text="t('standalone.multi_wan.behave_picker.choose_behaviour_sr')"
       />
-      <div v-for="(priority, index) in form.priorities" :key="index" class="space-y-4">
-        <NeFormItemLabel v-if="form.priorities.length > 1">
-          {{ t('standalone.multi_wan.priority', index + 1) }}
-        </NeFormItemLabel>
-        <template v-for="(gateway, index) in priority" :key="index">
-          <div class="flex gap-x-4">
-            <NeCombobox
-              v-model="gateway.id"
-              :options="gateways"
-              :placeholder="t('standalone.multi_wan.choose_gateway')"
-              class="grow"
-            />
-            <NeTextInput
-              v-if="form.selection != 'backup'"
-              v-model.number="gateway.weight"
-              :placeholder="t('standalone.multi_wan.weight')"
-            />
-            <NeButton
-              :disabled="isTrashButtonDisabled"
-              @click=";[priority.splice(index, 1), cleanPriorities()]"
-            >
-              <FontAwesomeIcon :icon="['fas', 'trash']" />
-            </NeButton>
-          </div>
-        </template>
-        <NeButton
-          v-if="form.selection != 'backup'"
-          :kind="'tertiary'"
-          @click="priority.push(new Gateway())"
-        >
-          {{ t('standalone.multi_wan.add_gateway') }}
-        </NeButton>
-      </div>
+      <NeSkeleton v-if="firewall.loading" :lines="10" />
+      <template v-else>
+        <div v-for="(priority, index) in form.priorities" :key="index" class="space-y-4">
+          <NeFormItemLabel v-if="form.priorities.length > 1">
+            {{ t('standalone.multi_wan.priority', index + 1) }}
+          </NeFormItemLabel>
+          <template v-for="(gateway, index) in priority" :key="index">
+            <div class="flex gap-x-4">
+              <NeCombobox
+                v-model="gateway.id"
+                :options="availableGateways"
+                :placeholder="t('standalone.multi_wan.choose_gateway')"
+                class="grow"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.name`)"
+              />
+              <NeTextInput
+                v-if="form.selection != 'backup'"
+                v-model.number="gateway.weight"
+                :placeholder="t('standalone.multi_wan.weight')"
+                :invalid-message="messageBag.getFirstFor(`interfaces.${index}.weight`)"
+              />
+              <NeButton
+                :disabled="isTrashButtonDisabled"
+                @click=";[priority.splice(index, 1), cleanPriorities()]"
+              >
+                <FontAwesomeIcon :icon="['fas', 'trash']" />
+              </NeButton>
+            </div>
+          </template>
+          <NeButton
+            v-if="form.selection != 'backup'"
+            :kind="'tertiary'"
+            @click="priority.push(new Gateway())"
+          >
+            {{ t('standalone.multi_wan.add_gateway') }}
+          </NeButton>
+        </div>
+      </template>
       <NeButton v-if="form.selection != 'balance'" @click="form.priorities.push([new Gateway()])">
         <template #prefix>
           <FontAwesomeIcon :icon="faPlus" />
@@ -392,10 +291,10 @@ function createPolicy() {
       </NeButton>
       <hr />
       <div class="flex justify-end gap-4">
-        <NeButton :disabled="saving" :kind="'tertiary'" @click="emit('abortCreation')">
+        <NeButton :disabled="saving" :kind="'tertiary'" @click="$emit('close')">
           {{ t('common.cancel') }}
         </NeButton>
-        <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="createPolicy()">
+        <NeButton :disabled="saving" :kind="'primary'" :loading="saving" @click="create()">
           {{ t('common.save') }}
         </NeButton>
       </div>
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index 090856629..8991c28e0 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowRight, faHouse as fasHouse } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRight, faHouse as fasHouse, faUserGear } from '@fortawesome/free-solid-svg-icons'
 import { faHouse as falHouse } from '@nethesis/nethesis-light-svg-icons'
 import { faServer as fasServer } from '@fortawesome/free-solid-svg-icons'
 import { faServer as falServer } from '@nethesis/nethesis-light-svg-icons'
@@ -116,4 +116,5 @@ export async function loadFontAwesome(app: any) {
   library.add(fasCircleInfo)
   library.add(faArrowRight)
   library.add(faEmptySet)
+  library.add(faUserGear)
 }