Skip to content

Commit

Permalink
refactor: updated multiwan source apis
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tbaile
Tbaile committed Sep 25, 2023
1 parent 1ee3b15 commit 02b8abe
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 276 deletions.
225 changes: 156 additions & 69 deletions src/components/standalone/multi-wan/MultiWanManager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -56,8 +56,8 @@ const ruleTimestamp = ref(Date.now())
* Handler for policyCreated event.
*/
function policyCreatedHandler() {
createPolicy.value = false
reloadConfig()
createPolicy.value = false
}

/**
Expand Down Expand Up @@ -85,8 +85,7 @@ function ruleEditedHandler() {
}

function reloadConfig() {
mwanConfig.fetch()
ruleTimestamp.value = Date.now()
mwan.value.fetch()
uciPendingChangesStore.getChanges()
}

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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"
Expand Down
Loading

0 comments on commit 02b8abe

Please sign in to comment.