diff --git a/webui/package.json b/webui/package.json
index 3721a8ae1..d2972a97c 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -43,6 +43,8 @@
"type": "module",
"dependencies": {
"@eslint/js": "^9.32.0",
+ "@noble/ed25519": "^3.0.0",
+ "@noble/hashes": "^2.0.1",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
@@ -56,6 +58,7 @@
"@typescript-eslint/parser": "^8.38.0",
"@vitejs/plugin-react": "^4.7.0",
"@vitest/coverage-v8": "^3.2.4",
+ "@vitest/web-worker": "^4.0.2",
"chart.js": "^4.4.1",
"eslint": "^9.32.0",
"eslint-config-prettier": "^10.1.8",
@@ -85,7 +88,7 @@
"usehooks-ts": "^2.14.0",
"vite": "^5.4.19",
"vite-tsconfig-paths": "^5.1.4",
- "vitest": "^3.2.4",
+ "vitest": "^4.0.3",
"vitest-canvas-mock": "^0.3.3"
},
"devDependencies": {
diff --git a/webui/public/img/gopher-something-went-wrong.png b/webui/public/img/gopher-something-went-wrong.png
new file mode 100644
index 000000000..fb0d6d4c3
Binary files /dev/null and b/webui/public/img/gopher-something-went-wrong.png differ
diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index b3f536ef2..8e256437f 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -1,5 +1,5 @@
import { globalCss, Box, darkTheme, FaencyProvider, lightTheme } from '@traefiklabs/faency'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useContext, useEffect } from 'react'
import { HelmetProvider } from 'react-helmet-async'
import { HashRouter, Navigate, Route, Routes as RouterRoutes, useLocation } from 'react-router-dom'
import { SWRConfig } from 'swr'
@@ -12,6 +12,7 @@ import { useIsDarkMode } from 'hooks/use-theme'
import ErrorSuspenseWrapper from 'layout/ErrorSuspenseWrapper'
import { Dashboard, HTTPPages, NotFound, TCPPages, UDPPages } from 'pages'
import { DashboardSkeleton } from 'pages/dashboard/Dashboard'
+import { HubDemoContext, HubDemoProvider } from 'pages/hub-demo/demoNavContext'
export const LIGHT_THEME = lightTheme('blue')
export const DARK_THEME = darkTheme('blue')
@@ -33,47 +34,56 @@ const ScrollToTop = () => {
}
export const Routes = () => {
+ const { routes: hubDemoRoutes } = useContext(HubDemoContext)
+
return (
- }>
-
- }>
-
-
- }
- />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
-
+
+ }>
+
+ }>
+
+
+ }
+ />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* Hub Dashboard demo content */}
+ {hubDemoRoutes?.map((route, idx) => )}
+
+ } />
+
+
+
)
}
const isDev = import.meta.env.NODE_ENV === 'development'
const customGlobalStyle = globalCss({
- 'span[role=cell]': { // target the AriaTd component
- p: '$2 $3'
+ // target the AriaTd component, but exclude anything inside hub-ui-demo-app
+ 'body:not(:has(hub-ui-demo-app)) span[role=cell]': {
+ p: '$2 $3',
},
})
@@ -101,9 +111,11 @@ const App = () => {
>
- {customGlobalStyle()}
-
-
+
+ {customGlobalStyle()}
+
+
+
diff --git a/webui/src/components/SpinnerLoader.tsx b/webui/src/components/SpinnerLoader.tsx
index 663130307..e336fc436 100644
--- a/webui/src/components/SpinnerLoader.tsx
+++ b/webui/src/components/SpinnerLoader.tsx
@@ -2,17 +2,17 @@ import { Flex } from '@traefiklabs/faency'
import { motion } from 'framer-motion'
import { FiLoader } from 'react-icons/fi'
-export const SpinnerLoader = () => (
+export const SpinnerLoader = ({ size = 24 }: { size?: number }) => (
-
+
)
diff --git a/webui/src/components/icons/providers/Knative.tsx b/webui/src/components/icons/providers/Knative.tsx
index e6adf46e2..8eaf21d50 100644
--- a/webui/src/components/icons/providers/Knative.tsx
+++ b/webui/src/components/icons/providers/Knative.tsx
@@ -2,10 +2,12 @@ import { ProviderIconProps } from 'components/icons/providers'
export default function Knative(props: ProviderIconProps) {
return (
-