add: created components for rules visualization

frontend/src/js/utils.tsx

@@ -6,7 +6,7 @@ import { nfregex } from "../components/NFRegex/utils";
 import { regexproxy } from "../components/RegexProxy/utils";
 import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
 import { Buffer } from "buffer"
-import { QueryClient } from "@tanstack/react-query";
+import { QueryClient, useQuery } from "@tanstack/react-query";
 
 export const IS_DEV = import.meta.env.DEV
 
@@ -111,6 +111,8 @@ export async function resetfiregex(delete_data:boolean = false){
     return (status === "ok"?undefined:status)
 }
 
+export const ipInterfacesQuery = () => useQuery(["ipinterfaces"], getipinterfaces)
+
 export async function getipinterfaces(){
     return await getapi("interfaces") as IpInterface[];
 }