Add SNAT and DNAT PAge, Rename Rules

This commit is contained in:
Samuel Lorch 2023-03-26 23:01:02 +02:00
parent 99dc0117ee
commit 1c467e90ae
4 changed files with 81 additions and 1 deletions

View file

@ -6,13 +6,17 @@ import IDashboard from '~icons/ri/dashboard-2-line';
import IRule from '~icons/material-symbols/rule-folder-outline-sharp'; import IRule from '~icons/material-symbols/rule-folder-outline-sharp';
import IAddress from '~icons/eos-icons/ip'; import IAddress from '~icons/eos-icons/ip';
import IService from '~icons/material-symbols/home-repair-service'; import IService from '~icons/material-symbols/home-repair-service';
import ISNAT from '~icons/mdi/arrow-expand-right';
import IDNAT from '~icons/mdi/arrow-collapse-right';
enum NavState { Open, Reduced, Collapsed }; enum NavState { Open, Reduced, Collapsed };
const NavStateCount = 3; const NavStateCount = 3;
let navState = $ref(NavState.Open); let navState = $ref(NavState.Open);
const navRoutes = { const navRoutes = {
"/": { icon: IDashboard, caption: "Dashboard" }, "/": { icon: IDashboard, caption: "Dashboard" },
"/firewall/rules": { icon: IRule, caption: "Rules" }, "/firewall/forwardrules": { icon: IRule, caption: "Rules" },
"/firewall/sourcenatrules": { icon: ISNAT, caption: "SNAT" },
"/firewall/destinationnatrules": { icon: IDNAT, caption: "DNAT" },
"/object/addresses": { icon: IAddress, caption: "Addresses" }, "/object/addresses": { icon: IAddress, caption: "Addresses" },
"/object/services": { icon: IService, caption: "Services" }, "/object/services": { icon: IService, caption: "Services" },
}; };

View file

@ -0,0 +1,38 @@
<script setup lang="ts">
import { apiCall } from "../../api";
let rules = $ref([]);
const columns = [
{heading: 'Name', path: 'name'},
{heading: 'Source', path: 'match.source_addresses'},
{heading: 'Destination', path: 'match.destination_addresses'},
{heading: 'Service', path: 'match.services'},
{heading: 'Verdict', path: 'verdict'},
{heading: 'Counter', path: 'counter'},
{heading: 'Comment', path: 'comment'},
];
async function loadRules(){
let res = await apiCall("Firewall.GetDestinationNATRules", {});
if (res.Error === null) {
rules = res.Data.DestinationNATRules;
console.debug("rules", rules);
} else {
console.debug("error", res);
}
}
onMounted(async() => {
loadRules();
});
</script>
<template>
<div>
<PageHeader title="DNAT Rules">
<button @click="loadRules">Load Rules</button>
</PageHeader>
<NiceTable :columns="columns" v-model:data="rules"/>
</div>
</template>

View file

@ -0,0 +1,38 @@
<script setup lang="ts">
import { apiCall } from "../../api";
let rules = $ref([]);
const columns = [
{heading: 'Name', path: 'name'},
{heading: 'Source', path: 'match.source_addresses'},
{heading: 'Destination', path: 'match.destination_addresses'},
{heading: 'Service', path: 'match.services'},
{heading: 'Verdict', path: 'verdict'},
{heading: 'Counter', path: 'counter'},
{heading: 'Comment', path: 'comment'},
];
async function loadRules(){
let res = await apiCall("Firewall.GetSourceNATRules", {});
if (res.Error === null) {
rules = res.Data.SourceNATRules;
console.debug("rules", rules);
} else {
console.debug("error", res);
}
}
onMounted(async() => {
loadRules();
});
</script>
<template>
<div>
<PageHeader title="SNAT Rules">
<button @click="loadRules">Load Rules</button>
</PageHeader>
<NiceTable :columns="columns" v-model:data="rules"/>
</div>
</template>