tr]:last:border-b-0",
46 | className
47 | )}
48 | {...props}
49 | />
50 | )
51 | }
52 |
53 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54 | return (
55 | |
63 | )
64 | }
65 |
66 | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
67 | return (
68 | [role=checkbox]]:translate-y-[2px]",
72 | className
73 | )}
74 | {...props}
75 | />
76 | )
77 | }
78 |
79 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80 | return (
81 | | [role=checkbox]]:translate-y-[2px]",
85 | className
86 | )}
87 | {...props}
88 | />
89 | )
90 | }
91 |
92 | function TableCaption({
93 | className,
94 | ...props
95 | }: React.ComponentProps<"caption">) {
96 | return (
97 |
102 | )
103 | }
104 |
105 | export {
106 | Table,
107 | TableHeader,
108 | TableBody,
109 | TableFooter,
110 | TableHead,
111 | TableRow,
112 | TableCell,
113 | TableCaption,
114 | }
115 |
--------------------------------------------------------------------------------
/frontend/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Tabs = TabsPrimitive.Root
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 |
25 | const TabsTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 |
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 |
40 | const TabsContent = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 |
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
--------------------------------------------------------------------------------
/frontend/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6 | return (
7 |
15 | )
16 | }
17 |
18 | export { Textarea }
19 |
--------------------------------------------------------------------------------
/frontend/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToastPrimitives from "@radix-ui/react-toast"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const ToastProvider = ToastPrimitives.Provider
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 |
24 | ))
25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
26 |
27 | const toastVariants = cva(
28 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
29 | {
30 | variants: {
31 | variant: {
32 | default: "border bg-background text-foreground",
33 | destructive:
34 | "destructive group border-destructive bg-destructive text-destructive-foreground",
35 | },
36 | },
37 | defaultVariants: {
38 | variant: "default",
39 | },
40 | }
41 | )
42 |
43 | const Toast = React.forwardRef<
44 | React.ElementRef,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 |
54 | )
55 | })
56 | Toast.displayName = ToastPrimitives.Root.displayName
57 |
58 | const ToastAction = React.forwardRef<
59 | React.ElementRef,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 |
70 | ))
71 | ToastAction.displayName = ToastPrimitives.Action.displayName
72 |
73 | const ToastClose = React.forwardRef<
74 | React.ElementRef,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
87 |
88 | ))
89 | ToastClose.displayName = ToastPrimitives.Close.displayName
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 |
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 |
103 | const ToastDescription = React.forwardRef<
104 | React.ElementRef,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 |
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 |
115 | type ToastProps = React.ComponentPropsWithoutRef
116 |
117 | type ToastActionElement = React.ReactElement
118 |
119 | export {
120 | type ToastProps,
121 | type ToastActionElement,
122 | ToastProvider,
123 | ToastViewport,
124 | Toast,
125 | ToastTitle,
126 | ToastDescription,
127 | ToastClose,
128 | ToastAction,
129 | }
--------------------------------------------------------------------------------
/frontend/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title}}
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
29 |
30 | )
31 | })}
32 |
33 |
34 | )
35 | }
--------------------------------------------------------------------------------
/frontend/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | // Inspired by react-hot-toast library
2 | import * as React from "react"
3 |
4 | import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
5 |
6 | const TOAST_LIMIT = 1
7 | const TOAST_REMOVE_DELAY = 1000000
8 |
9 | type ToasterToast = ToastProps & {
10 | id: string
11 | title?: React.ReactNode
12 | description?: React.ReactNode
13 | action?: ToastActionElement
14 | }
15 |
16 | const actionTypes = {
17 | ADD_TOAST: "ADD_TOAST",
18 | UPDATE_TOAST: "UPDATE_TOAST",
19 | DISMISS_TOAST: "DISMISS_TOAST",
20 | REMOVE_TOAST: "REMOVE_TOAST",
21 | } as const
22 |
23 | let count = 0
24 |
25 | function genId() {
26 | count = (count + 1) % Number.MAX_VALUE
27 | return count.toString()
28 | }
29 |
30 | type ActionType = typeof actionTypes
31 |
32 | type Action =
33 | | {
34 | type: ActionType["ADD_TOAST"]
35 | toast: ToasterToast
36 | }
37 | | {
38 | type: ActionType["UPDATE_TOAST"]
39 | toast: Partial
40 | }
41 | | {
42 | type: ActionType["DISMISS_TOAST"]
43 | toastId?: ToasterToast["id"]
44 | }
45 | | {
46 | type: ActionType["REMOVE_TOAST"]
47 | toastId?: ToasterToast["id"]
48 | }
49 |
50 | interface State {
51 | toasts: ToasterToast[]
52 | }
53 |
54 | const toastTimeouts = new Map>()
55 |
56 | const addToRemoveQueue = (toastId: string) => {
57 | if (toastTimeouts.has(toastId)) {
58 | return
59 | }
60 |
61 | const timeout = setTimeout(() => {
62 | toastTimeouts.delete(toastId)
63 | dispatch({
64 | type: "REMOVE_TOAST",
65 | toastId: toastId,
66 | })
67 | }, TOAST_REMOVE_DELAY)
68 |
69 | toastTimeouts.set(toastId, timeout)
70 | }
71 |
72 | export const reducer = (state: State, action: Action): State => {
73 | switch (action.type) {
74 | case "ADD_TOAST":
75 | return {
76 | ...state,
77 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
78 | }
79 |
80 | case "UPDATE_TOAST":
81 | return {
82 | ...state,
83 | toasts: state.toasts.map((t) =>
84 | t.id === action.toast.id ? { ...t, ...action.toast } : t
85 | ),
86 | }
87 |
88 | case "DISMISS_TOAST": {
89 | const { toastId } = action
90 |
91 | // ! Side effects ! - This could be extracted into a dismissToast() action,
92 | // but I'll keep it here for simplicity
93 | if (toastId) {
94 | addToRemoveQueue(toastId)
95 | } else {
96 | state.toasts.forEach((toast) => {
97 | addToRemoveQueue(toast.id)
98 | })
99 | }
100 |
101 | return {
102 | ...state,
103 | toasts: state.toasts.map((t) =>
104 | t.id === toastId || toastId === undefined
105 | ? {
106 | ...t,
107 | open: false,
108 | }
109 | : t
110 | ),
111 | }
112 | }
113 | case "REMOVE_TOAST":
114 | if (action.toastId === undefined) {
115 | return {
116 | ...state,
117 | toasts: [],
118 | }
119 | }
120 | return {
121 | ...state,
122 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
123 | }
124 | }
125 | }
126 |
127 | const listeners: ((state: State) => void)[] = []
128 |
129 | let memoryState: State = { toasts: [] }
130 |
131 | function dispatch(action: Action) {
132 | memoryState = reducer(memoryState, action)
133 | listeners.forEach((listener) => {
134 | listener(memoryState)
135 | })
136 | }
137 |
138 | type Toast = Omit
139 |
140 | function toast({ ...props }: Toast) {
141 | const id = genId()
142 |
143 | const update = (props: ToasterToast) =>
144 | dispatch({
145 | type: "UPDATE_TOAST",
146 | toast: { ...props, id },
147 | })
148 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
149 |
150 | dispatch({
151 | type: "ADD_TOAST",
152 | toast: {
153 | ...props,
154 | id,
155 | open: true,
156 | onOpenChange: (open) => {
157 | if (!open) dismiss()
158 | },
159 | },
160 | })
161 |
162 | return {
163 | id: id,
164 | dismiss,
165 | update,
166 | }
167 | }
168 |
169 | function useToast() {
170 | const [state, setState] = React.useState(memoryState)
171 |
172 | React.useEffect(() => {
173 | listeners.push(setState)
174 | return () => {
175 | const index = listeners.indexOf(setState)
176 | if (index > -1) {
177 | listeners.splice(index, 1)
178 | }
179 | }
180 | }, [state])
181 |
182 | return {
183 | ...state,
184 | toast,
185 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
186 | }
187 | }
188 |
189 | export { useToast, toast }
--------------------------------------------------------------------------------
/frontend/example-data/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "system": {
3 | "host_name": "vyos-example",
4 | "domain": "example.com",
5 | "time_zone": "UTC",
6 | "login": {
7 | "user": {
8 | "admin": {
9 | "authentication": {
10 | "encrypted-password": "$6$..."
11 | },
12 | "full-name": "Administrator"
13 | }
14 | }
15 | }
16 | },
17 | "interfaces": {
18 | "ethernet": {
19 | "eth0": {
20 | "address": "192.168.1.1/24",
21 | "description": "WAN",
22 | "hw-id": "00:0c:29:ab:cd:ef"
23 | },
24 | "eth1": {
25 | "address": "10.0.0.1/24",
26 | "description": "LAN",
27 | "hw-id": "00:0c:29:ab:cd:fe"
28 | }
29 | },
30 | "loopback": {
31 | "lo": {}
32 | }
33 | },
34 | "firewall": {
35 | "name": {
36 | "WAN_IN": {
37 | "default-action": "drop",
38 | "rule": {
39 | "10": {
40 | "action": "accept",
41 | "state": {
42 | "established": "enable",
43 | "related": "enable"
44 | }
45 | },
46 | "20": {
47 | "action": "drop",
48 | "state": {
49 | "invalid": "enable"
50 | }
51 | }
52 | }
53 | }
54 | }
55 | },
56 | "service": {
57 | "ssh": {
58 | "port": "22"
59 | },
60 | "dns": {
61 | "forwarding": {
62 | "listen-address": ["10.0.0.1"]
63 | }
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/frontend/hooks/use-cached-data.ts:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/lib/cache-init.ts:
--------------------------------------------------------------------------------
1 | import { frontendCache } from './cache';
2 | import { api } from './api';
3 |
4 | // List of essential data to preload
5 | const ESSENTIAL_DATA = [
6 | { key: 'config:root', fetcher: () => api.getConfig(), ttl: 30 },
7 | { key: 'routing:table', fetcher: () => api.getRoutingTable(), ttl: 60 },
8 | { key: 'dhcp:leases', fetcher: () => api.getDHCPLeases(), ttl: 60 },
9 | { key: 'system:unsaved', fetcher: () => api.checkUnsavedChanges(), ttl: 10 },
10 | ];
11 |
12 | // List of important but non-blocking data
13 | const IMPORTANT_DATA = [
14 | { key: 'config:interfaces', fetcher: () => api.getConfig('interfaces'), ttl: 30 },
15 | { key: 'config:firewall', fetcher: () => api.getConfig('firewall'), ttl: 30 },
16 | { key: 'config:services', fetcher: () => api.getConfig('service'), ttl: 30 },
17 | ];
18 |
19 | /**
20 | * Simple retry mechanism for failed API calls
21 | */
22 | async function withRetry(fn: () => Promise, retries = 2, delay = 1000): Promise {
23 | try {
24 | return await fn();
25 | } catch (error) {
26 | if (retries <= 0) throw error;
27 |
28 | console.log(`Retrying after error: ${error instanceof Error ? error.message : String(error)}. Retries left: ${retries}`);
29 | await new Promise(resolve => setTimeout(resolve, delay));
30 | return withRetry(fn, retries - 1, delay * 1.5);
31 | }
32 | }
33 |
34 | /**
35 | * Initialize the cache with essential data
36 | * @returns Promise that resolves when all essential data is cached
37 | */
38 | export async function initializeCache(): Promise {
39 | if (frontendCache.isInitialized() || frontendCache.isInitializing()) {
40 | return;
41 | }
42 |
43 | try {
44 | console.log('🔄 Initializing cache with essential data...');
45 | frontendCache.setInitializing(true);
46 |
47 | // First, load essential data in parallel
48 | const essentialPromises = ESSENTIAL_DATA.map(async ({ key, fetcher, ttl }) => {
49 | try {
50 | // Use retry mechanism for essential data
51 | const data = await withRetry(fetcher, 2, 1000);
52 | frontendCache.set(key, data, ttl);
53 | console.log(`✅ Cached essential data: ${key}`);
54 | return { success: true, key };
55 | } catch (error) {
56 | console.error(`❌ Failed to cache essential data: ${key}`, error);
57 | // For essential data, still return success so app can continue
58 | // But store the error in cache so components can handle gracefully
59 | frontendCache.set(key, { error: error instanceof Error ? error.message : String(error) }, ttl);
60 | return { success: false, key, error };
61 | }
62 | });
63 |
64 | const results = await Promise.all(essentialPromises);
65 | const failedCount = results.filter(r => !r.success).length;
66 |
67 | if (failedCount > 0) {
68 | console.warn(`⚠️ ${failedCount} essential items failed to load. App may have limited functionality.`);
69 | }
70 |
71 | // Still proceed with loading important data in the background
72 | setTimeout(() => {
73 | const backgroundLoading = async () => {
74 | const importantPromises = IMPORTANT_DATA.map(async ({ key, fetcher, ttl }) => {
75 | try {
76 | const data = await fetcher();
77 | frontendCache.set(key, data, ttl);
78 | console.log(`✅ Cached important data: ${key}`);
79 | return { success: true, key };
80 | } catch (error) {
81 | console.error(`❌ Failed to cache important data: ${key}`, error);
82 | return { success: false, key, error };
83 | }
84 | });
85 |
86 | await Promise.all(importantPromises);
87 | console.log('✅ Background data loading complete');
88 | };
89 |
90 | backgroundLoading().catch(error => {
91 | console.error('❌ Background data loading error:', error);
92 | });
93 | }, 100);
94 |
95 | console.log('✅ Cache initialization complete');
96 | frontendCache.setInitialized(true);
97 | } catch (error) {
98 | console.error('❌ Cache initialization failed:', error);
99 | frontendCache.setInitializing(false);
100 | throw error;
101 | }
102 | }
103 |
104 | /**
105 | * Refresh all cached data
106 | */
107 | export async function refreshCache(): Promise {
108 | console.log('🔄 Refreshing cache...');
109 |
110 | const allData = [...ESSENTIAL_DATA, ...IMPORTANT_DATA];
111 |
112 | const refreshPromises = allData.map(async ({ key, fetcher, ttl }) => {
113 | try {
114 | const data = await fetcher();
115 | frontendCache.set(key, data, ttl);
116 | console.log(`✅ Refreshed cache: ${key}`);
117 | return { success: true, key };
118 | } catch (error) {
119 | console.error(`❌ Failed to refresh cache: ${key}`, error);
120 | return { success: false, key, error };
121 | }
122 | });
123 |
124 | await Promise.all(refreshPromises);
125 | console.log('✅ Cache refresh complete');
126 | }
--------------------------------------------------------------------------------
/frontend/lib/cache.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | interface CacheItem {
4 | value: T;
5 | timestamp: number;
6 | expiry: number;
7 | }
8 |
9 | class FrontendCache {
10 | private static instance: FrontendCache;
11 | private cache: Map> = new Map();
12 | private listeners: Set<() => void> = new Set();
13 | private hitCount = 0;
14 | private missCount = 0;
15 | private creationTime = Date.now();
16 | private initialized = false;
17 | private initializing = false;
18 |
19 | private constructor() {}
20 |
21 | public static getInstance(): FrontendCache {
22 | if (!FrontendCache.instance) {
23 | FrontendCache.instance = new FrontendCache();
24 | }
25 | return FrontendCache.instance;
26 | }
27 |
28 | public get(key: string): T | null {
29 | const item = this.cache.get(key);
30 |
31 | if (!item) {
32 | this.missCount++;
33 | return null;
34 | }
35 |
36 | // Check if the item has expired
37 | if (Date.now() > item.expiry) {
38 | this.cache.delete(key);
39 | this.missCount++;
40 | this.notifyListeners();
41 | return null;
42 | }
43 |
44 | this.hitCount++;
45 | return item.value as T;
46 | }
47 |
48 | public set(key: string, value: T, ttl: number = 60): void {
49 | const expiry = Date.now() + ttl * 1000;
50 | this.cache.set(key, {
51 | value,
52 | timestamp: Date.now(),
53 | expiry,
54 | });
55 | this.notifyListeners();
56 | }
57 |
58 | public delete(key: string): boolean {
59 | const deleted = this.cache.delete(key);
60 | if (deleted) {
61 | this.notifyListeners();
62 | }
63 | return deleted;
64 | }
65 |
66 | public clear(): void {
67 | this.cache.clear();
68 | this.notifyListeners();
69 | }
70 |
71 | public deletePattern(pattern: string): number {
72 | let count = 0;
73 |
74 | // Convert keys to array to avoid iterator issues
75 | const keys = Array.from(this.cache.keys());
76 |
77 | for (const key of keys) {
78 | if (key.includes(pattern)) {
79 | this.cache.delete(key);
80 | count++;
81 | }
82 | }
83 |
84 | if (count > 0) {
85 | this.notifyListeners();
86 | }
87 |
88 | return count;
89 | }
90 |
91 | public getStats() {
92 | const totalRequests = this.hitCount + this.missCount;
93 | const hitRate = totalRequests > 0 ? this.hitCount / totalRequests : 0;
94 |
95 | return {
96 | items: this.cache.size,
97 | hits: this.hitCount,
98 | misses: this.missCount,
99 | hitRate,
100 | uptime: Math.floor((Date.now() - this.creationTime) / 1000),
101 | initialized: this.initialized,
102 | };
103 | }
104 |
105 | public subscribe(listener: () => void): () => void {
106 | this.listeners.add(listener);
107 | return () => {
108 | this.listeners.delete(listener);
109 | };
110 | }
111 |
112 | private notifyListeners(): void {
113 | this.listeners.forEach((listener) => listener());
114 | }
115 |
116 | public isInitialized(): boolean {
117 | return this.initialized;
118 | }
119 |
120 | public isInitializing(): boolean {
121 | return this.initializing;
122 | }
123 |
124 | public setInitialized(value: boolean): void {
125 | this.initialized = value;
126 | this.initializing = false;
127 | this.notifyListeners();
128 | }
129 |
130 | public setInitializing(value: boolean): void {
131 | this.initializing = value;
132 | this.notifyListeners();
133 | }
134 | }
135 |
136 | export const frontendCache = FrontendCache.getInstance();
137 |
138 | export function useCache(key: string, fetcher: () => Promise, ttl: number = 60, dependencies: any[] = []): {
139 | data: T | null;
140 | loading: boolean;
141 | error: Error | null;
142 | refresh: () => Promise;
143 | } {
144 | const [data, setData] = useState(frontendCache.get(key));
145 | const [loading, setLoading] = useState(!data);
146 | const [error, setError] = useState(null);
147 |
148 | async function fetchData() {
149 | try {
150 | setLoading(true);
151 | setError(null);
152 | const result = await fetcher();
153 | frontendCache.set(key, result, ttl);
154 | setData(result);
155 | return result;
156 | } catch (err) {
157 | setError(err instanceof Error ? err : new Error(String(err)));
158 | return null;
159 | } finally {
160 | setLoading(false);
161 | }
162 | }
163 |
164 | useEffect(() => {
165 | if (!data) {
166 | fetchData();
167 | }
168 | }, [key, ...dependencies]);
169 |
170 | // Subscribe to cache changes
171 | useEffect(() => {
172 | const unsubscribe = frontendCache.subscribe(() => {
173 | const cachedData = frontendCache.get(key);
174 | if (cachedData !== data) {
175 | setData(cachedData);
176 | }
177 | });
178 |
179 | return unsubscribe;
180 | }, [key, data]);
181 |
182 | const refresh = async () => {
183 | await fetchData();
184 | };
185 |
186 | return { data, loading, error, refresh };
187 | }
188 |
189 | export function useCacheStats() {
190 | const [stats, setStats] = useState(frontendCache.getStats());
191 |
192 | useEffect(() => {
193 | const unsubscribe = frontendCache.subscribe(() => {
194 | setStats(frontendCache.getStats());
195 | });
196 |
197 | return unsubscribe;
198 | }, []);
199 |
200 | return stats;
201 | }
202 |
203 | export function clearCache(pattern?: string) {
204 | if (pattern) {
205 | frontendCache.deletePattern(pattern);
206 | } else {
207 | frontendCache.clear();
208 | }
209 | }
--------------------------------------------------------------------------------
/frontend/lib/hooks/use-cached-data.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useCache } from '@/lib/cache';
3 | import { api } from '@/lib/api';
4 |
5 | // Hook for config data
6 | export function useCachedConfig(path: string = '') {
7 | return useCache(
8 | `config:${path}`,
9 | () => api.getConfig(path),
10 | 30 // 30 second TTL
11 | );
12 | }
13 |
14 | // Hook for routing table
15 | export function useCachedRoutingTable() {
16 | return useCache(
17 | 'routing:table',
18 | () => api.getRoutingTable(),
19 | 60 // 60 second TTL
20 | );
21 | }
22 |
23 | // Hook for DHCP leases
24 | export function useCachedDHCPLeases() {
25 | return useCache(
26 | 'dhcp:leases',
27 | () => api.getDHCPLeases(),
28 | 60 // 60 second TTL
29 | );
30 | }
31 |
32 | // Hook for show commands
33 | export function useCachedShowCommand(command: string) {
34 | return useCache(
35 | `show:${command}`,
36 | () => api.showCommand(command),
37 | 30 // 30 second TTL
38 | );
39 | }
40 |
41 | // Hook to check for unsaved changes
42 | export function useUnsavedChanges() {
43 | return useCache(
44 | 'system:unsaved',
45 | () => api.checkUnsavedChanges(),
46 | 10 // 10 second TTL
47 | );
48 | }
--------------------------------------------------------------------------------
/frontend/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
--------------------------------------------------------------------------------
/frontend/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | poweredByHeader: false,
5 | async headers() {
6 | return [
7 | {
8 | // Apply these headers to all routes
9 | source: '/:path*',
10 | headers: [
11 | {
12 | key: 'Access-Control-Allow-Origin',
13 | value: process.env.NEXT_PUBLIC_CORS_ALLOW_ORIGIN || '*',
14 | },
15 | {
16 | key: 'Access-Control-Allow-Methods',
17 | value: process.env.NEXT_PUBLIC_CORS_ALLOW_METHODS || 'GET,POST,PUT,DELETE',
18 | },
19 | {
20 | key: 'Access-Control-Allow-Headers',
21 | value: process.env.NEXT_PUBLIC_CORS_ALLOW_HEADERS || 'Content-Type,Authorization',
22 | },
23 | ],
24 | },
25 | ];
26 | },
27 | // Disable opening files in editor
28 | onDemandEntries: {
29 | // Disable opening files in editor
30 | maxInactiveAge: 60 * 60 * 1000,
31 | pagesBufferLength: 2,
32 | },
33 | };
34 |
35 | module.exports = nextConfig;
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vymanager-ui",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev -p 8005",
7 | "build": "next build",
8 | "start": "next start -p 8005",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@hookform/resolvers": "^3.3.2",
13 | "@radix-ui/react-accordion": "^1.2.3",
14 | "@radix-ui/react-alert-dialog": "^1.1.6",
15 | "@radix-ui/react-avatar": "^1.0.4",
16 | "@radix-ui/react-dialog": "^1.0.5",
17 | "@radix-ui/react-dropdown-menu": "^2.0.6",
18 | "@radix-ui/react-label": "^2.0.2",
19 | "@radix-ui/react-scroll-area": "^1.2.3",
20 | "@radix-ui/react-select": "^2.1.6",
21 | "@radix-ui/react-separator": "^1.1.2",
22 | "@radix-ui/react-slot": "^1.1.2",
23 | "@radix-ui/react-switch": "^1.1.3",
24 | "@radix-ui/react-tabs": "^1.0.4",
25 | "@radix-ui/react-toast": "^1.1.5",
26 | "@radix-ui/react-tooltip": "^1.0.7",
27 | "@tanstack/react-query": "^5.8.4",
28 | "class-variance-authority": "^0.7.1",
29 | "clsx": "^2.1.1",
30 | "lucide-react": "^0.292.0",
31 | "next": "^15.3.1",
32 | "next-themes": "^0.2.1",
33 | "react": "^18.2.0",
34 | "react-dom": "^18.2.0",
35 | "react-hook-form": "^7.48.2",
36 | "react-qr-code": "^2.0.15",
37 | "sonner": "^2.0.3",
38 | "tailwind-merge": "^2.6.0",
39 | "tailwindcss-animate": "^1.0.7",
40 | "tw-animate-css": "^1.2.5",
41 | "zod": "^3.22.4",
42 | "zustand": "^4.4.6"
43 | },
44 | "devDependencies": {
45 | "@types/node": "^20.9.3",
46 | "@types/react": "^18.3.20",
47 | "@types/react-dom": "^18.2.15",
48 | "autoprefixer": "^10.4.16",
49 | "eslint": "^8.54.0",
50 | "eslint-config-next": "^14.0.3",
51 | "postcss": "^8.4.31",
52 | "tailwindcss": "^3.3.5",
53 | "typescript": "^5.3.2"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Community-VyProjects/VyManager/ca1a8994f30becba0f9f455b15a23c4a81863ad0/frontend/public/favicon.ico
--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 |
4 | Sitemap: /sitemap.xml
--------------------------------------------------------------------------------
/frontend/start.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | # Create logs directory
4 | mkdir -p logs
5 |
6 | # Get absolute path to project root
7 | PROJECT_ROOT=$(pwd)
8 | LOGS_DIR="$PROJECT_ROOT/logs"
9 | TIMESTAMP=$(date +"%Y-%m-%d_%H-%M-%S")
10 |
11 | # Log file paths
12 | FRONTEND_LOG="$LOGS_DIR/frontend_$TIMESTAMP.log"
13 |
14 | # Function for logging with timestamp
15 | log() {
16 | local message="[$(date +'%Y-%m-%d %H:%M:%S')] $1"
17 | echo "$message" | tee -a "$FRONTEND_LOG"
18 | }
19 |
20 | # If there is no .env file, try copying .env.example to .env
21 | # After copying, check if .env file exists
22 | if [ ! -f .env ]; then
23 | log "WARNING: No .env file found. Will use environment variables and defaults instead."
24 | else
25 | # Load environment variables from .env
26 | export $(grep -v '^#' .env | grep -E '^\s*[A-Za-z_][A-Za-z0-9_]*=' | xargs)
27 | fi
28 |
29 | # Default values if not provided in .env
30 | FRONTEND_PORT=${FRONTEND_PORT:-3000}
31 | NODE_ENV=${NODE_ENV:-development}
32 | HOST=${HOST:-0.0.0.0}
33 | NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:3001}
34 |
35 | log "=============================================================="
36 | log "Checking Frontend prerequisites..."
37 | log "=============================================================="
38 |
39 | # Check if Node.js is installed
40 | if ! command -v node &>/dev/null; then
41 | log "ERROR: Node.js is not installed or not in PATH"
42 | log "Please install Node.js 16 or higher"
43 | exit 1
44 | fi
45 |
46 | # Check if npm is installed
47 | if ! command -v npm &>/dev/null; then
48 | log "ERROR: npm is not installed or not in PATH"
49 | log "Please install npm"
50 | exit 1
51 | fi
52 |
53 | # Install dependencies if node_modules doesn't exist or package.json has changed
54 | # if [ ! -d "node_modules" ] || [ "package.json" -nt "node_modules" ]; then
55 | # log "Installing frontend dependencies..."
56 | # npm install 2>&1 | tee -a "$SETUP_LOG"
57 | # if [ $? -ne 0 ]; then
58 | # log "ERROR: Failed to install frontend dependencies"
59 | # exit 1
60 | # fi
61 | # fi
62 |
63 | log "=============================================================="
64 | log "Starting VyManager ui in $NODE_ENV mode..."
65 | log "Host: $HOST"
66 | log "Frontend Port: $FRONTEND_PORT"
67 | log "Backend URL is: $NEXT_PUBLIC_API_URL"
68 | log "=============================================================="
69 |
70 | if [ "$NODE_ENV" = "production" ]; then
71 | npx next build && npx next start -p ${FRONTEND_PORT} -H :: 2>&1 | tee -a $FRONTEND_LOG
72 | else
73 | npm run dev 2>&1 | tee -a $FRONTEND_LOG
74 | fi
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | './pages/**/*.{ts,tsx}',
6 | './components/**/*.{ts,tsx}',
7 | './app/**/*.{ts,tsx}',
8 | './src/**/*.{ts,tsx}',
9 | ],
10 | theme: {
11 | container: {
12 | center: true,
13 | padding: "2rem",
14 | screens: {
15 | "2xl": "1400px",
16 | },
17 | },
18 | extend: {
19 | colors: {
20 | border: "hsl(var(--border))",
21 | input: "hsl(var(--input))",
22 | ring: "hsl(var(--ring))",
23 | background: "hsl(var(--background))",
24 | foreground: "hsl(var(--foreground))",
25 | primary: {
26 | DEFAULT: "hsl(var(--primary))",
27 | foreground: "hsl(var(--primary-foreground))",
28 | },
29 | secondary: {
30 | DEFAULT: "hsl(var(--secondary))",
31 | foreground: "hsl(var(--secondary-foreground))",
32 | },
33 | destructive: {
34 | DEFAULT: "hsl(var(--destructive))",
35 | foreground: "hsl(var(--destructive-foreground))",
36 | },
37 | muted: {
38 | DEFAULT: "hsl(var(--muted))",
39 | foreground: "hsl(var(--muted-foreground))",
40 | },
41 | accent: {
42 | DEFAULT: "hsl(var(--accent))",
43 | foreground: "hsl(var(--accent-foreground))",
44 | },
45 | popover: {
46 | DEFAULT: "hsl(var(--popover))",
47 | foreground: "hsl(var(--popover-foreground))",
48 | },
49 | card: {
50 | DEFAULT: "hsl(var(--card))",
51 | foreground: "hsl(var(--card-foreground))",
52 | },
53 | },
54 | borderRadius: {
55 | lg: "var(--radius)",
56 | md: "calc(var(--radius) - 2px)",
57 | sm: "calc(var(--radius) - 4px)",
58 | },
59 | keyframes: {
60 | "accordion-down": {
61 | from: { height: 0 },
62 | to: { height: "var(--radix-accordion-content-height)" },
63 | },
64 | "accordion-up": {
65 | from: { height: "var(--radix-accordion-content-height)" },
66 | to: { height: 0 },
67 | },
68 | },
69 | animation: {
70 | "accordion-down": "accordion-down 0.2s ease-out",
71 | "accordion-up": "accordion-up 0.2s ease-out",
72 | },
73 | },
74 | },
75 | plugins: [require("tailwindcss-animate")],
76 | }
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Community-VyProjects/VyManager/ca1a8994f30becba0f9f455b15a23c4a81863ad0/image.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
29 |
30 |
31 |
32 |
33 | Loading...
34 |
35 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
68 |
69 |
70 |
71 |
72 |
73 | Loading...
74 |
75 |
76 |
77 |
78 |
79 |
80 | |