anti
4d10eba7a7
The webhooks page used a bespoke .webhooks-header wrapper that didn't line up with the rest of the dashboard (Fleet / Logs / Swarm all use the .<page>-root + .page-header + .page-title-group + .actions pattern). Swapped to that convention: - .webhooks-root wrapper, matching .logs-root / .fleet-root spacing. - H1 "WEBHOOKS" in .page-title-group; subtitle shows `N CONFIGURED · M ENABLED [· K FAILING] [· L INSECURE]` in .page-sub, same voice as the LOGS stream summary. - Actions (CREATE WEBHOOK, DELETE SELECTED) sit in .actions. - Table lives in a proper .logs-section shell with a .section-header carrying the Webhook icon + "SUBSCRIPTIONS" title. - All scoped button overrides (violet/alert/warn/ghost) copied from the LiveLogs scope so theme switches behave identically. Also improve error messaging: extractErrorDetail now maps 401 to "Session expired" and 403 to "Insufficient permissions (admin only)" instead of falling through to the generic "Failed to load webhooks". Helps users who hit the page as viewer or with a stale token see why it failed.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])