User EnumTypeDisplay and ElementDisplay for firewall

This commit is contained in:
Samuel Lorch 2024-07-30 18:36:35 +02:00
parent f1d7b57a21
commit efa043ed35
3 changed files with 23 additions and 16 deletions

View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { apiCall } from '../../api';
import getPlugins from '../../plugins';
import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
import ElementDisplay from '~/components/display/ElementDisplay.vue';
const p = getPlugins();
let rules = $ref([]);
@ -9,11 +11,11 @@ let selection = $ref([] as number[]);
const columns = [
{ heading: 'Name', path: 'name' },
{ heading: 'Source', path: 'source_addresses' },
{ heading: 'Destination', path: 'destination_addresses' },
{ heading: 'Service', path: 'services' },
{ heading: 'Translated Address', path: 'dnat_address' },
{ heading: 'Translated Service', path: 'dnat_service' },
{ heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Translated Address', path: 'dnat_address', component: markRaw(ElementDisplay), componentProp: 'data' },
{ heading: 'Translated Service', path: 'dnat_service', component: markRaw(ElementDisplay), componentProp: 'data' },
{ heading: 'Counter', path: 'counter' },
{ heading: 'Comment', path: 'comment' },
];
@ -59,11 +61,11 @@ onMounted(async() => {
<template>
<div>
<TableView v-model:selection="selection" v-model:data="rules" title="DNAT Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
<TableView v-model:selection="selection" v-model:data="rules" title="DNAT Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
<button @click="load">Refresh</button>
<router-link class="button" to="/firewall/destination_nat_rules/edit">Create</router-link>
<router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/destination_nat_rules/edit/' + selection[0]">Edit</router-link>
<button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
</TableView>
</div>
</template>
</template>

View file

@ -59,11 +59,11 @@ onMounted(async() => {
<template>
<div>
<TableView v-model:selection="selection" v-model:data="rules" title="Forward Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
<TableView v-model:selection="selection" v-model:data="rules" title="Forward Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
<button @click="load">Refresh</button>
<router-link class="button" to="/firewall/forward_rules/edit">Create</router-link>
<router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/forward_rules/edit/' + selection[0]">Edit</router-link>
<button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
</TableView>
</div>
</template>
</template>

View file

@ -1,6 +1,10 @@
<script setup lang="ts">
import { apiCall } from '../../api';
import getPlugins from '../../plugins';
import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
import ElementDisplay from '~/components/display/ElementDisplay.vue';
import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
const p = getPlugins();
let rules = $ref([]);
@ -9,11 +13,12 @@ let selection = $ref([] as number[]);
const columns = [
{ heading: 'Name', path: 'name' },
{ heading: 'Source', path: 'source_addresses' },
{ heading: 'Destination', path: 'destination_addresses' },
{ heading: 'Service', path: 'services' },
{ heading: 'Translated Address', path: 'snat_type.snat.address' },
{ heading: 'Translated Service', path: 'snat_type.snat.service' },
{ heading: 'Source', path: 'source_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Destination', path: 'destination_addresses', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Service', path: 'services', component: markRaw(ArrayDisplay), componentProp: 'data' },
{ heading: 'Type', path: 'snat_type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
{ heading: 'Translated Address', path: 'snat_type.snat.address', component: markRaw(ElementDisplay), componentProp: 'data' },
{ heading: 'Translated Service', path: 'snat_type.snat.service', component: markRaw(ElementDisplay), componentProp: 'data' },
{ heading: 'Counter', path: 'counter' },
{ heading: 'Comment', path: 'comment' },
];
@ -59,11 +64,11 @@ onMounted(async() => {
<template>
<div>
<TableView v-model:selection="selection" v-model:data="rules" title="SNAT Rules" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true, draggable: true}" @dragged-row="draggedRow">
<TableView v-model:selection="selection" v-model:data="rules" title="SNAT Rules" :columns="columns" :loading="loading" :table-props="{draggable: true}" @dragged-row="draggedRow">
<button @click="load">Refresh</button>
<router-link class="button" to="/firewall/source_nat_rules/edit">Create</router-link>
<router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/firewall/source_nat_rules/edit/' + selection[0]">Edit</router-link>
<button :disabled="selection.length != 1" @click="deleteRule">Delete</button>
</TableView>
</div>
</template>
</template>