speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 19:08:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use Tableview for Rule Pages

Browse source
This commit is contained in:
Samuel Lorch 2023-04-02 11:57:36 +02:00
parent ddc17caba5
commit d4741c933f
3 changed files with 66 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
client/src/pages/firewall/DestinationNATRules.vue
View file

@ -2,6 +2,9 @@
import { apiCall } from "../../api"; import { apiCall } from "../../api";
let rules = $ref([]); let rules = $ref([]);
let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [ const columns = [
{heading: 'Name', path: 'name'}, {heading: 'Name', path: 'name'},
{heading: 'Source', path: 'match.source_addresses'}, {heading: 'Source', path: 'match.source_addresses'},
@ -11,27 +14,39 @@ const columns = [
{heading: 'Comment', path: 'comment'}, {heading: 'Comment', path: 'comment'},
]; ];
async function loadRules(){ async function load(){
let res = await apiCall("Firewall.GetDestinationNATRules", {}); let res = await apiCall("Firewall.GetDestinationNATRules", {});
if (res.Error === null) { if (res.Error === null) {
rules = res.Data.DestinationNATRules; rules = res.Data.destination_nat_rules;
console.debug("rules", rules); console.debug("rules", rules);
} else { } else {
console.debug("error", res); console.debug("error", res);
} }
} }
async function deleteRule(){
let res = await apiCall("Firewall.DeleteDestinationNATRule", {index: selection[0]});
if (res.Error === null) {
console.debug("deleted rule");
} else {
console.debug("error", res);
}
load();
}
onMounted(async() => { onMounted(async() => {
loadRules(); load();
}); });
</script> </script>
<template> <template>
<div> <div>
<PageHeader title="DNAT Rules"> <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
<button @click="loadRules">Load Rules</button> <button @click="load">Refresh</button>
</PageHeader> <button @click="load">Create</button>
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/> <button @click="load" :disabled="selection.length != 1">Edit</button>
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
</TableView>
</div> </div>
</template> </template>

29
client/src/pages/firewall/ForwardRules.vue
View file

@ -2,6 +2,9 @@
import { apiCall } from "../../api"; import { apiCall } from "../../api";
let rules = $ref([]); let rules = $ref([]);
let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [ const columns = [
{heading: 'Name', path: 'name'}, {heading: 'Name', path: 'name'},
{heading: 'Source', path: 'match.source_addresses'}, {heading: 'Source', path: 'match.source_addresses'},
@ -12,27 +15,39 @@ const columns = [
{heading: 'Comment', path: 'comment'}, {heading: 'Comment', path: 'comment'},
]; ];
async function loadRules(){ async function load(){
let res = await apiCall("Firewall.GetForwardRules", {}); let res = await apiCall("Firewall.GetForwardRules", {});
if (res.Error === null) { if (res.Error === null) {
rules = res.Data.ForwardRules; rules = res.Data.forward_rules;
console.debug("rules", rules); console.debug("rules", rules);
} else { } else {
console.debug("error", res); console.debug("error", res);
} }
} }
async function deleteRule(){
let res = await apiCall("Firewall.DeleteForwardRule", {index: selection[0]});
if (res.Error === null) {
console.debug("deleted rule");
} else {
console.debug("error", res);
}
load();
}
onMounted(async() => { onMounted(async() => {
loadRules(); load();
}); });
</script> </script>
<template> <template>
<div> <div>
<PageHeader title="Forward Rules"> <TableView title="Forward Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
<button @click="loadRules">Load Rules</button> <button @click="load">Refresh</button>
</PageHeader> <button @click="load">Create</button>
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/> <button @click="load" :disabled="selection.length != 1">Edit</button>
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
</TableView>
</div> </div>
</template> </template>

29
client/src/pages/firewall/SourceNATRules.vue
View file

@ -2,6 +2,9 @@
import { apiCall } from "../../api"; import { apiCall } from "../../api";
let rules = $ref([]); let rules = $ref([]);
let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [ const columns = [
{heading: 'Name', path: 'name'}, {heading: 'Name', path: 'name'},
{heading: 'Source', path: 'match.source_addresses'}, {heading: 'Source', path: 'match.source_addresses'},
@ -11,27 +14,39 @@ const columns = [
{heading: 'Comment', path: 'comment'}, {heading: 'Comment', path: 'comment'},
]; ];
async function loadRules(){ async function load(){
let res = await apiCall("Firewall.GetSourceNATRules", {}); let res = await apiCall("Firewall.GetSourceNATRules", {});
if (res.Error === null) { if (res.Error === null) {
rules = res.Data.SourceNATRules; rules = res.Data.source_nat_rules;
console.debug("rules", rules); console.debug("rules", rules);
} else { } else {
console.debug("error", res); console.debug("error", res);
} }
} }
async function deleteRule(){
let res = await apiCall("Firewall.DeleteSourceNATRule", {index: selection[0]});
if (res.Error === null) {
console.debug("deleted rule");
} else {
console.debug("error", res);
}
load();
}
onMounted(async() => { onMounted(async() => {
loadRules(); load();
}); });
</script> </script>
<template> <template>
<div> <div>
<PageHeader title="SNAT Rules"> <TableView title="DNAT Rules" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="rules" :table-props="{sort:true, sortSelf: true, dragable: true}">
<button @click="loadRules">Load Rules</button> <button @click="load">Refresh</button>
</PageHeader> <button @click="load">Create</button>
<NiceTable :columns="columns" v-model:data="rules" draggable="true"/> <button @click="load" :disabled="selection.length != 1">Edit</button>
<button @click="deleteRule" :disabled="selection.length != 1">Delete</button>
</TableView>
</div> </div>
</template> </template>