chore: archive observability-service-registry, track pi-map artifacts
- Archive the completed observability-service-registry SDD change into openspec/changes/archive/ (delivered across 5 slices; only jellyfin-service-registry remains active). - Stop ignoring .pi-map.md / .pi-map.index.md so the navigation maps are versioned alongside the code, and add the regenerated map pairs repo-wide.
This commit is contained in:
Developer
@@ -0,0 +1,47 @@
|
||||
# frontend (index)
|
||||
dir: frontend
|
||||
|
||||
## role
|
||||
React-based single-page application frontend for the "Manage" project, providing the user interface with Vite tooling, Tailwind CSS styling, and OIDC authentication.
|
||||
## parent
|
||||
index: ./.pi-map.index.md
|
||||
map: ./.pi-map.md
|
||||
## children
|
||||
- frontend/public
|
||||
index: frontend/public/.pi-map.index.md
|
||||
map: frontend/public/.pi-map.md
|
||||
- frontend/src
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
- frontend/tests
|
||||
index: frontend/tests/.pi-map.index.md
|
||||
map: frontend/tests/.pi-map.md
|
||||
## files
|
||||
- .gitignore
|
||||
- Dockerfile
|
||||
- README.md
|
||||
- components.json
|
||||
- eslint.config.js
|
||||
- index.html
|
||||
- nginx.conf
|
||||
- package-lock.json
|
||||
- package.json
|
||||
- postcss.config.cjs
|
||||
- tailwind.config.cjs
|
||||
- tsconfig.app.json
|
||||
- tsconfig.json
|
||||
- tsconfig.node.json
|
||||
- vite.config.ts
|
||||
- vitest.config.ts
|
||||
## links
|
||||
index: frontend/.pi-map.index.md
|
||||
map: frontend/.pi-map.md
|
||||
## workflows
|
||||
- change frontend behavior
|
||||
read: .gitignore, Dockerfile, eslint.config.js
|
||||
- change frontend config
|
||||
read: components.json, eslint.config.js, package-lock.json
|
||||
- explore frontend subdirectories
|
||||
index: frontend/public/.pi-map.index.md, frontend/src/.pi-map.index.md, frontend/tests/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,39 @@
|
||||
# frontend
|
||||
dir: frontend
|
||||
|
||||
index: frontend/.pi-map.index.md
|
||||
|
||||
## role
|
||||
React-based single-page application frontend for the "Manage" project, providing the user interface with Vite tooling, Tailwind CSS styling, and OIDC authentication.
|
||||
## files
|
||||
- .gitignore | Specifies files and directories for Git to ignore in a Node.js/frontend project
|
||||
- Dockerfile | Multi-stage Dockerfile for building and serving a Vite-based frontend application with separate production (nginx) and development (node dev server) targets | dep: node:22-alpine, nginx:1.27-alpine, npm, vite
|
||||
- README.md | Documentation for the Manage Frontend React SPA, covering setup, development, build, pages, environment variables, and configuration workflows.
|
||||
- components.json | Configuration file for shadcn/ui component library setup with Tailwind CSS and path aliases | dep: shadcn/ui, tailwindcss, lucide-react, radix-ui
|
||||
- eslint.config.js | Configures ESLint for a TypeScript React project using Vite with recommended rules for JS, TS, React Hooks, and React Refresh. | dep: @eslint/js, globals, eslint-plugin-react-hooks, eslint-plugin-react-refresh, typescript-eslint, eslint/config
|
||||
- index.html | Standard HTML entry point for a React/Vite single-page application named "Manage" | dep: React (implied by root div and TSX entry), Vite (implied by module script and /src path)
|
||||
- nginx.conf | Configures Nginx as a reverse proxy serving static files and forwarding API requests to a backend service | dep: nginx
|
||||
- package-lock.json | Records exact dependency versions and resolved URLs for reproducible npm package installations in a React frontend project. | dep: npm, node, react, react-dom, react-router-dom, @tanstack/react-query, @tanstack/react-table, oidc-client-ts, react-oidc-context, radix-ui, shadcn, tailwindcss, vite, vitest, typescript, eslint, @babel/core, @babel/parser, @babel/generator, @babel/traverse, @babel/types, @babel/helpers, @babel/helper-plugin-utils, @babel/helper-module-imports, @babel/helper-module-transforms, @babel/helper-compilation-targets, @babel/helper-create-class-features-plugin, @babel/helper-replace-supers, @babel/helper-member-expression-to-functions, @babel/helper-optimise-call-expression, @babel/helper-skip-transparent-expression-wrappers, @babel/helper-annotate-as-pure, @babel/helper-globals, @babel/helper-string-parser, @babel/helper-validator-identifier, @babel/helper-validator-option, @babel/compat-data, @babel/code-frame, @babel/template, @babel/plugin-syntax-jsx, @jridgewell/gen-mapping, @jridgewell/remapping, @jridgewell
|
||||
- package.json | Defines a React-based frontend project configuration with Vite build tooling, Tailwind CSS styling, OIDC authentication, and testing infrastructure. | dep: react, react-dom, react-router-dom, @tanstack/react-query, @tanstack/react-table, radix-ui, react-oidc-context, oidc-client-ts, lucide-react, class-variance-authority, tailwind-merge, clsx, tw-animate-css, @fontsource-variable/geist, shadcn, vite, typescript, tailwindcss, vitest, eslint, @testing-library/react, jsdom
|
||||
- postcss.config.cjs | Configures PostCSS to use Tailwind CSS and Autoprefixer plugins for CSS processing | dep: postcss, @tailwindcss/postcss, autoprefixer
|
||||
- tailwind.config.cjs | Configures Tailwind CSS to scan source files for class names and defines theme/plugins settings. | dep: tailwindcss
|
||||
- tsconfig.app.json | TypeScript configuration file for a React application using Vite with strict linting rules and path aliases | dep: typescript, vite, react
|
||||
- tsconfig.json | Root TypeScript configuration file for a project using project references to delegate to separate app and node configurations. | dep: typescript
|
||||
- tsconfig.node.json | TypeScript configuration for Vite's Node.js-based build tooling | dep: typescript, vite, node
|
||||
- vite.config.ts | Configures Vite build tool with React, Tailwind CSS, environment-based API proxying, and path aliasing for a frontend application. | dep: path, vite, @vitejs/plugin-react, @tailwindcss/vite
|
||||
- vitest.config.ts | Configures Vitest test runner for a React project with jsdom environment, path aliasing, and scoped test file inclusion. | dep: path, vitest/config, @vitejs/plugin-react, vitest, jsdom
|
||||
## arch
|
||||
SPA architecture using React with Vite for bundling/HMR, shadcn/ui component library with Tailwind CSS for styling, TypeScript with strict type checking, Vitest for testing, and Docker multi-stage builds (nginx for production serving, Node for development).
|
||||
## tags
|
||||
react, @babel, vite, helper, typescript, project, css, eslint
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- change frontend behavior
|
||||
read: .gitignore, Dockerfile, eslint.config.js
|
||||
- change frontend config
|
||||
read: components.json, eslint.config.js, package-lock.json
|
||||
- explore frontend subdirectories
|
||||
index: frontend/public/.pi-map.index.md, frontend/src/.pi-map.index.md, frontend/tests/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/public (index)
|
||||
dir: frontend/public
|
||||
|
||||
## role
|
||||
Provides static public assets for the frontend web application, including brand identity graphics and reusable UI icons.
|
||||
## parent
|
||||
index: frontend/.pi-map.index.md
|
||||
map: frontend/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- favicon.svg
|
||||
- icons.svg
|
||||
## links
|
||||
index: frontend/public/.pi-map.index.md
|
||||
map: frontend/public/.pi-map.md
|
||||
## workflows
|
||||
-
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/public
|
||||
dir: frontend/public
|
||||
|
||||
index: frontend/public/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides static public assets for the frontend web application, including brand identity graphics and reusable UI icons.
|
||||
## files
|
||||
- favicon.svg | Defines a browser favicon as an SVG graphic featuring a stylized lightning bolt shape with purple and blue gradient glow effects.
|
||||
- icons.svg | Defines a collection of reusable SVG icon symbols (Bluesky, Discord, documentation, GitHub, social, X) for use in web applications via `<use>` references.
|
||||
## arch
|
||||
Flat static asset directory following standard web application conventions, serving files directly at the root URL path without build processing.
|
||||
## tags
|
||||
favicon, defines, svg, icons, browser, graphic, featuring, stylized
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
-
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,56 @@
|
||||
# frontend/src (index)
|
||||
dir: frontend/src
|
||||
|
||||
## role
|
||||
Frontend entry point and shared utilities for a React-based admin dashboard with OIDC authentication, user state management, and Tailwind CSS theming.
|
||||
## parent
|
||||
index: frontend/.pi-map.index.md
|
||||
map: frontend/.pi-map.md
|
||||
## children
|
||||
- frontend/src/api
|
||||
index: frontend/src/api/.pi-map.index.md
|
||||
map: frontend/src/api/.pi-map.md
|
||||
- frontend/src/components
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
- frontend/src/hooks
|
||||
index: frontend/src/hooks/.pi-map.index.md
|
||||
map: frontend/src/hooks/.pi-map.md
|
||||
- frontend/src/integrations
|
||||
index: frontend/src/integrations/.pi-map.index.md
|
||||
map: frontend/src/integrations/.pi-map.md
|
||||
- frontend/src/lib
|
||||
index: frontend/src/lib/.pi-map.index.md
|
||||
map: frontend/src/lib/.pi-map.md
|
||||
- frontend/src/pages
|
||||
index: frontend/src/pages/.pi-map.index.md
|
||||
map: frontend/src/pages/.pi-map.md
|
||||
- frontend/src/test
|
||||
index: frontend/src/test/.pi-map.index.md
|
||||
map: frontend/src/test/.pi-map.md
|
||||
- frontend/src/types
|
||||
index: frontend/src/types/.pi-map.index.md
|
||||
map: frontend/src/types/.pi-map.md
|
||||
- frontend/src/widgets
|
||||
index: frontend/src/widgets/.pi-map.index.md
|
||||
map: frontend/src/widgets/.pi-map.md
|
||||
## files
|
||||
- App.tsx
|
||||
- auth.ts
|
||||
- index.css
|
||||
- main.tsx
|
||||
- userState.d.ts
|
||||
- userState.js
|
||||
- users.d.ts
|
||||
- users.js
|
||||
- version.ts
|
||||
## links
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## workflows
|
||||
- change src behavior
|
||||
read: App.tsx, auth.ts, index.css
|
||||
- explore src subdirectories
|
||||
index: frontend/src/api/.pi-map.index.md, frontend/src/components/.pi-map.index.md, frontend/src/hooks/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,37 @@
|
||||
# frontend/src
|
||||
dir: frontend/src
|
||||
|
||||
index: frontend/src/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Frontend entry point and shared utilities for a React-based admin dashboard with OIDC authentication, user state management, and Tailwind CSS theming.
|
||||
## files
|
||||
- App.tsx | Main application component that renders a responsive admin dashboard with OIDC authentication, dark mode, collapsible sidebar navigation, and route-based page rendering. | exp: func:App() | dep: react-router-dom, @tanstack/react-query, react, react-oidc-context, ./pages/Dashboard, ./pages/Applications, ./pages/Settings, ./pages/Users, ./pages/FileBrowser, ./pages/Actions, ./components/BackupsPage, ./components/ObservabilityPage, ./pages/ServicePage, ./pages/ServicesPage, ./auth, ./api/client, ./version, ./hooks/usePersistentState, @/components/ui/button, @/components/ui/tooltip, @/components/ui/sheet, lucide-react, ./pages/*, ./components/*
|
||||
- auth.ts | Manages OIDC authentication configuration and access token retrieval for a browser-based application. | exp: func:isOidcConfigured() → boolean, call:(import.meta.env.VITE_OIDC_ENABLED ?? "true").toLowerCase, call:Boolean, func:getOidcConfig(), call:window.history.replaceState, func:setAccessToken(token: string | null | undefined), func:getAccessToken() → string | null, call:getStoredAccessToken | dep: oidc-client-ts
|
||||
- index.css | Defines a comprehensive Tailwind CSS v4 theme with custom design tokens, dark mode support, and base styles for a React application. | dep: tailwindcss, Google Fonts (Inter)
|
||||
- main.tsx | Entry point that renders the React application into the DOM root element with StrictMode enabled. | dep: react, react-dom/client, ./App, ./index.css
|
||||
- userState.d.ts | Defines TypeScript type declarations for user activity state management, including interfaces for user activity summaries and state items, plus function declarations for merging users with activity data and resolving user selections. | exp: UserActivitySummary, UserStateItem, mergeUsersWithActivity, resolveUserSelection | dep: ./types, types (NowPlayingSession, UserDirectoryItem)
|
||||
- userState.js | Merges Jellyfin users with their session activity data and provides user lookup by identifier. | exp: func:mergeUsersWithActivity(users, sessions), call:users.map, call:sessions.filter, call:sessionMatchesUser, call:buildActivitySummary, func:resolveUserSelection(users, identifier), call:normalize, call:users.find, call:userKeys(user).some
|
||||
- users.d.ts | Defines TypeScript interfaces and a function declaration for building a user drawer model from directory data. | exp: UserDetailField, UserContactAction, UserContactState, UserDrawerModel, buildUserDrawerModel | dep: ./types, types
|
||||
- users.js | Transforms raw user data into a structured UI model for a user details drawer component. | exp: func:buildUserDrawerModel(user), call:displayName, call:splitValues, call:String, call:user.role.charAt(0).toUpperCase, call:user.role.slice, call:permissions.join, call:syncStatus
|
||||
- version.ts | Exports frontend version and build info constants with a formatter for semantic version labels | exp: FRONTEND_VERSION, FRONTEND_BUILD_INFO, FRONTEND_VERSION_LABEL, func:formatVersionLabel(version: string, buildInfo: string) → string, call:version.trim, call:buildInfo.trim
|
||||
## arch
|
||||
React SPA architecture with TypeScript type definitions alongside JavaScript implementations, declarative component composition, and centralized authentication/state helper modules.
|
||||
## tags
|
||||
user, activity, version, state, react, pages, users, oidc
|
||||
## symbols
|
||||
- App
|
||||
- isOidcConfigured
|
||||
- getOidcConfig
|
||||
- setAccessToken
|
||||
- getAccessToken
|
||||
- formatVersionLabel
|
||||
- call:(import.meta.env.VITE_OIDC_ENABLED ?? "true").toLowerCase
|
||||
- call:Boolean
|
||||
## workflows
|
||||
- change src behavior
|
||||
read: App.tsx, auth.ts, index.css
|
||||
- explore src subdirectories
|
||||
index: frontend/src/api/.pi-map.index.md, frontend/src/components/.pi-map.index.md, frontend/src/hooks/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,25 @@
|
||||
# frontend/src/api (index)
|
||||
dir: frontend/src/api
|
||||
|
||||
## role
|
||||
Frontend API client layer that centralizes all HTTP communication with the backend REST API.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- backups.ts
|
||||
- client.ts
|
||||
- services.ts
|
||||
- widgets.ts
|
||||
## links
|
||||
index: frontend/src/api/.pi-map.index.md
|
||||
map: frontend/src/api/.pi-map.md
|
||||
## workflows
|
||||
- change api behavior
|
||||
read: backups.ts, client.ts, services.ts
|
||||
- change api CLI
|
||||
read: client.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,32 @@
|
||||
# frontend/src/api
|
||||
dir: frontend/src/api
|
||||
|
||||
index: frontend/src/api/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Frontend API client layer that centralizes all HTTP communication with the backend REST API.
|
||||
## files
|
||||
- backups.ts | Provides API client functions for fetching and managing backup-related data including jobs, runs, alerts, and dashboard summaries. | exp: func:fetchBackupJobs() → Promise<BackupJob[]>, call:fetch, call:res.json, raise:Error, func:fetchBackupJob(jobId: string) → Promise<{ job: BackupJob; runs: BackupRun[] }>, call:fetch, call:res.json, raise:Error, func:fetchBackupRuns(jobId: string, status: string) → Promise<BackupRun[]>, call:params.append, call:fetch, call:res.json, raise:Error, func:fetchBackupRun(runId: string) → Promise<BackupRun>, call:fetch, call:res.json, raise:Error, func:fetchBackupAlerts(jobId: string, acknowledged: boolean, severity: string) → Promise<BackupAlert[]>, call:params.append, call:String, call:fetch, call:res.json, raise:Error, func:acknowledgeBackupAlert(alertId: string) → Promise<BackupAlert>, call:fetch, call:res.json, raise:Error, func:fetchBackupDashboard() → Promise<BackupDashboardSummary>, call:fetch, call:res.json, raise:Error | dep: ../types/backups
|
||||
- client.ts | Typed API client providing fetch-based helper functions for communicating with a FastAPI backend across dashboard, monitoring, media, files, jobs, and observability endpoints. | exp: fetchCounts, fetchLibraries, fetchActivity, fetchUsers, fetchNowPlaying, fetchMonitoringMachines, fetchAppVersion, fetchDashboardShortcuts, saveDashboardShortcut, deleteDashboardShortcut, fetchMonitoringSettings, fetchSSHKeys, generateSSHKey, saveSSHKey, deleteSSHKey, fetchSavedTasks, fetchSavedTaskRuns, saveTask, deleteTask, runTask, saveMonitoringMachine, testMonitoringMachineSSH, deleteMonitoringMachine, resetLocalDatabase, fetchMediaStatus, buildMediaIndex, stopMediaIndexBuild, forceStopMediaIndexBuild, queryMedia, fetchDirectoryListing, fetchFfprobe, fetchStat, resolvePath, fetchJobTemplates, runJob, fetchUserMessageQueueStatus, sendUserMessage, fetchAlertmanagerAlerts, fetchAlertmanagerStatus, fetchGrafanaStatus, fetchPrometheusStatus, fetchPrometheusTargets | dep: ../auth, ../types
|
||||
- services.ts | Provides CRUD HTTP client functions for managing service types and service instances via a REST API. | exp: func:fetchServiceTypes() → Promise<ServiceTypeInfo[]>, call:fetch, call:res.json, raise:Error, func:fetchServiceInstances(serviceType: string) → Promise<ServiceInstance[]>, call:encodeURIComponent, call:fetch, call:res.json, raise:Error, func:createServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:updateServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:deleteServiceInstance(serviceId: string) → Promise<{ status: string }>, call:fetch, call:res.json, raise:Error | dep: ../types
|
||||
- widgets.ts | Provides CRUD API client functions for managing widget instances and fetching widget-related data from a REST backend. | exp: func:fetchBuiltinWidgetKinds() → Promise< BuiltinWidgetKindInfo[] >, call:fetch, call:res.json, raise:Error, func:fetchWidgetInstances() → Promise<WidgetInstance[]>, call:fetch, call:res.json, raise:Error, func:createWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:updateWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:deleteWidgetInstance(widgetId: string) → Promise<{ status: string }>, call:fetch, call:res.json, raise:Error, func:fetchWidgetData(widgetId: string) → Promise<WidgetDataResponse>, call:fetch, call:res.json, raise:Error | dep: ../types
|
||||
## arch
|
||||
Modular typed fetch-based client functions organized by domain (backups, services, widgets, general), exposing per-endpoint helper methods consumed by the UI layer.
|
||||
## tags
|
||||
fetch, call:fetch, call:res.json, raise:error, backup, widget, delete, service
|
||||
## symbols
|
||||
- fetchBackupJobs
|
||||
- fetchBackupJob
|
||||
- fetchBackupRuns
|
||||
- fetchBackupRun
|
||||
- fetchBackupAlerts
|
||||
- acknowledgeBackupAlert
|
||||
- fetchBackupDashboard
|
||||
- fetchServiceTypes
|
||||
## workflows
|
||||
- change api behavior
|
||||
read: backups.ts, client.ts, services.ts
|
||||
- change api CLI
|
||||
read: client.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,44 @@
|
||||
# frontend/src/components (index)
|
||||
dir: frontend/src/components
|
||||
|
||||
## role
|
||||
React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
- frontend/src/components/__tests__
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/__tests__/.pi-map.md
|
||||
- frontend/src/components/ui
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## files
|
||||
- BackupAlertsTable.tsx
|
||||
- BackupDashboardWidget.tsx
|
||||
- BackupJobsTable.tsx
|
||||
- BackupRunsTable.tsx
|
||||
- BackupsPage.tsx
|
||||
- ConfirmDialog.tsx
|
||||
- DialogFooter.tsx
|
||||
- HoverEditButton.tsx
|
||||
- LibraryOverview.tsx
|
||||
- MetricCard.tsx
|
||||
- NowPlaying.tsx
|
||||
- ObservabilityPage.tsx
|
||||
- SectionCard.tsx
|
||||
- SelectionRailCard.tsx
|
||||
- SessionActivityPanel.tsx
|
||||
- TabbedCard.tsx
|
||||
- WidgetConfigDialog.tsx
|
||||
- WidgetInstance.tsx
|
||||
## links
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## workflows
|
||||
- change components behavior
|
||||
read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx
|
||||
- explore components subdirectories
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md, frontend/src/components/ui/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,46 @@
|
||||
# frontend/src/components
|
||||
dir: frontend/src/components
|
||||
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
|
||||
## role
|
||||
React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
|
||||
## files
|
||||
- BackupAlertsTable.tsx | Renders a table of backup alerts with severity badges, timestamps, and acknowledge buttons | exp: func:BackupAlertsTable({ alerts, onAcknowledge }: Props), call:alerts.map, call:severityVariant, call:formatTimestamp, call:onAcknowledge | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types/backups
|
||||
- BackupDashboardWidget.tsx | Displays a dashboard widget summarizing backup job statistics including total jobs, 24-hour success rate, active alerts, and last failure timestamp. | exp: func:BackupDashboardWidget(), call:useBackupDashboard, call:new Date(data.last_failed_at * 1000).toLocaleString | dep: @/components/ui/badge, @/components/ui/card, ../hooks/useBackups
|
||||
- BackupJobsTable.tsx | Renders a table displaying backup job information with status, schedule, and run history using associated latest run data. | exp: func:BackupJobsTable({ jobs, latestRuns }: Props), call:jobs.map, call:latestRuns.get, call:formatInterval, call:statusVariant, call:formatTimestamp | dep: @/components/ui/badge, @/components/ui/table, ../types/backups
|
||||
- BackupRunsTable.tsx | Renders a filterable table of backup runs with status, duration, size, and timestamp formatting. | exp: func:BackupRunsTable({ runs }: Props), call:useState, call:runs.filter, call:filteredRuns.map, call:statusVariant, call:formatDuration, call:formatBytes, call:formatTimestamp | dep: react, @/components/ui/badge, @/components/ui/select, @/components/ui/table, ../types/backups
|
||||
- BackupsPage.tsx | A React page component that displays backup management information across three tabs (Jobs, Runs, and Alerts) with data fetched from custom hooks. | exp: func:BackupsPage(), call:useState, call:useBackupJobs, call:useBackupRuns, call:useBackupAlerts, call:useAcknowledgeAlert, call:latestRuns.get, call:latestRuns.set, call:acknowledgeMutation.mutate | dep: react, @/components/ui/tabs, ../hooks/useBackups, ./BackupAlertsTable, ./BackupJobsTable, ./BackupRunsTable
|
||||
- ConfirmDialog.tsx | Reusable confirmation dialog component that wraps shadcn/ui Dialog primitives with standardized cancel/confirm footer behavior. | exp: func:ConfirmDialog({ open, title, message, confirmLabel = "Delete", onCancel, onConfirm, busy, }: { open: boolean; title: string; message: string; confirmLabel?: string; onCancel: () => void; onConfirm: () => void; busy?: boolean; }), call:onCancel | dep: @/components/ui/dialog, ./DialogFooter
|
||||
- DialogFooter.tsx | Renders a dialog footer with cancel/confirm buttons that maps legacy MUI-style props to shadcn Button variants for backward compatibility | exp: func:DialogFooter({ onCancel, cancelLabel = "Cancel", onConfirm, confirmLabel, confirmBusyLabel, confirmDisabled, confirmColor = "primary", confirmVariant = "contained", confirmStartIcon, secondaryAction, }: DialogFooterProps), call:resolveConfirmVariant | dep: react, @/components/ui/button
|
||||
- HoverEditButton.tsx | A hover-reveal edit button component that migrates from MUI to shadcn/ui while preserving backward-compatible CSS classes for existing hover-reveal behavior. | exp: func:HoverEditButton({ onClick, label = "Edit", }: HoverEditButtonProps), call:e.stopPropagation, call:onClick | dep: lucide-react, @/components/ui/button
|
||||
- LibraryOverview.tsx | Renders a two-column responsive grid displaying movie and TV library counts using shadcn/ui Card components | exp: func:LibraryOverview({ libraries }: Props), call:libraries.filter, call:movieLibs.map, call:lib.total.toLocaleString, call:lib.movies.toLocaleString, call:tvLibs.map, call:lib.series.toLocaleString | dep: @/components/ui/card, ../types
|
||||
- MetricCard.tsx | Renders a compact metric display card with label, value, and optional subtext using Tailwind CSS styling. | exp: func:MetricCard({ label, value, subtext }: Props) | dep: @/components/ui/card
|
||||
- NowPlaying.tsx | Renders a now-playing panel by wrapping SessionActivityPanel with a specific empty message for user activity sessions. | exp: func:NowPlaying({ sessions, onSelectSession }: Props) | dep: ../types, ./SessionActivityPanel
|
||||
- ObservabilityPage.tsx | This file renders a dashboard page that provides a unified observability view of system health, alerts, metrics, and logs from services like Prometheus, Alertmanager, and Grafana. | exp: func:ObservabilityPage(), call:useAlertmanagerAlerts, call:useAlertmanagerStatus, call:useGrafanaStatus, call:usePrometheusStatus, call:usePrometheusTargets, call:useMonitoringMachines, call:useServiceInstances, call:useState, call:grafanaServices.find, call:useMemo, call:machines.find, call:encodeURIComponent, call:JSON.stringify, call:alertsSummary?.alerts.some, call:alertsSummary.alerts.map, call:machines.map | dep: react, react-router-dom, lucide-react, ../hooks/useObservability, ../hooks/useServices, @/components/ui/card, @/components/ui/badge, @/components/ui/alert, @/components/ui/button, @/components/ui/select, @/components/ui/skeleton, @/components/ui/collapsible, ../types, @/components/ui (card, badge, alert, button, select, skeleton, collapsible)
|
||||
- SectionCard.tsx | A reusable card component that renders a titled section with optional description and action, built on shadcn/ui Card primitives for comfortable density layout. | exp: func:SectionCard({ title, description, action, children, }: SectionCardProps) | dep: react, @/components/ui/card
|
||||
- SelectionRailCard.tsx | A reusable card component for a selection rail UI with titled header, scrollable body, and optional footer, preserving legacy API compatibility during a migration from MUI. | exp: func:SelectionRailCard({ title, description, children, footer, minHeight = 420, }: SelectionRailCardProps) | dep: react, @/components/ui/card
|
||||
- SessionActivityPanel.tsx | Renders a scrollable table panel displaying active media streaming sessions with state badges, metadata, and optional user selection actions. | exp: func:SessionActivityPanel({ sessions, emptyMessage = "No live sessions matched to this user.", selectedUserLabel, onSelectSession, }: Props), call:buildStatusSummary, call:sessions.map, call:formatStateLabel, call:onSelectSession, call:sessionStateVariant, call:event.stopPropagation | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types
|
||||
- TabbedCard.tsx | Renders a card with a line-style tab bar header and content area, acting as a controlled wrapper around shadcn/ui Tabs for backward-compatible API migration from MUI. | exp: func:TabbedCard({ value, onChange, tabs, children, }: TabbedCardProps), call:onChange, call:String | dep: react, @/components/ui/card, @/components/ui/tabs
|
||||
- WidgetConfigDialog.tsx | A React dialog component for managing dashboard widget instances, including adding, editing, reordering, enabling/disabling, and deleting widgets with service-specific configuration support. | exp: func:WidgetConfigDialog({ open, onClose }: Props), call:useWidgetInstances, call:useServiceInstances, call:useTasks, call:useSaveWidgetInstance, call:useDeleteWidgetInstance, call:useState, call:useMemo, call:[...instances].sort, call:setDraft, call:SERVICE_REGISTRY[ services.find((s) => s.id === serviceId)?.service_type ?? "" ]?.widgets.find, call:services.find, call:saveWidget.mutateAsync, call:reset, call:Promise.all, call:deleteWidget.mutateAsync, call:onClose, call:SERVICE_REGISTRY[ services.find((s) => s.id === draft.serviceId)?.service_type ?? "" ]?.widgets.find, call:String, call:Number, call:sortedInstances.map, call:bindingLabel, call:moveInstance, call:toggleEnabled, call:startEdit, call:removeInstance, call:Object.values(BUILTIN_WIDGETS).map, call:startAddBuiltIn, call:services .filter((s) => s.enabled) .flatMap, call:(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map, call:startAddService | dep: react, @/components/ui/dialog, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/select, @/components/ui/badge, @/components/ui/alert, lucide-react, ../hooks/useWidgets, ../hooks/useServices, ../hooks/useSettings, ../types, ../integrations/registry
|
||||
- WidgetInstance.tsx | Renders a widget instance by resolving its component from a registry or displaying an error for unknown widgets. | exp: func:WidgetInstanceCard({ widget }: Props), call:useServiceInstances, call:resolveWidget | dep: @/components/ui/alert, ../hooks/useServices, ../integrations/registry, ../types, ./SectionCard
|
||||
## arch
|
||||
Functional component pattern using shadcn/ui and Tailwind CSS, with composable table/card/dialog primitives, custom hooks for data fetching, and a backward-compatibility layer easing migration from MUI.
|
||||
## tags
|
||||
call:use, components, ui, card, backup, widget, table, dialog
|
||||
## symbols
|
||||
- BackupAlertsTable
|
||||
- BackupDashboardWidget
|
||||
- BackupJobsTable
|
||||
- BackupRunsTable
|
||||
- BackupsPage
|
||||
- ConfirmDialog
|
||||
- DialogFooter
|
||||
- HoverEditButton
|
||||
## workflows
|
||||
- change components behavior
|
||||
read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx
|
||||
- explore components subdirectories
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md, frontend/src/components/ui/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,32 @@
|
||||
# frontend/src/components/__tests__ (index)
|
||||
dir: frontend/src/components/__tests__
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
|
||||
## parent
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- BackupAlertsTable.test.tsx
|
||||
- BackupDashboardWidget.test.tsx
|
||||
- BackupRunsTable.test.tsx
|
||||
- ConfirmDialog.test.tsx
|
||||
- DialogFooter.test.tsx
|
||||
- HoverEditButton.test.tsx
|
||||
- LibraryOverview.test.tsx
|
||||
- MetricCard.test.tsx
|
||||
- NowPlaying.test.tsx
|
||||
- SectionCard.test.tsx
|
||||
- SelectionRailCard.test.tsx
|
||||
- SessionActivityPanel.test.tsx
|
||||
- TabbedCard.test.tsx
|
||||
## links
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/__tests__/.pi-map.md
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,32 @@
|
||||
# frontend/src/components/__tests__
|
||||
dir: frontend/src/components/__tests__
|
||||
|
||||
index: frontend/src/components/__tests__/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
|
||||
## files
|
||||
- BackupAlertsTable.test.tsx | Unit tests for the BackupAlertsTable component verifying severity badge mapping, acknowledge button behavior, and conditional rendering | dep: vitest, @testing-library/react, @testing-library/user-event, ../BackupAlertsTable, ../../types/backups, BackupAlertsTable component, BackupAlert type
|
||||
- BackupDashboardWidget.test.tsx | Unit tests for BackupDashboardWidget component covering loading, success, and alert states | dep: vitest, @testing-library/react, ../BackupDashboardWidget, ../../hooks/useBackups, BackupDashboardWidget, useBackupDashboard hook
|
||||
- BackupRunsTable.test.tsx | Tests the BackupRunsTable component's status-to-badge variant mapping and formatting of duration/bytes values. | dep: vitest, @testing-library/react, ../BackupRunsTable, ../../types/backups, BackupRunsTable, types/backups
|
||||
- ConfirmDialog.test.tsx | Tests the ConfirmDialog component's rendering behavior and user interaction handlers. | dep: vitest, @testing-library/react, @testing-library/user-event, ../ConfirmDialog, ConfirmDialog
|
||||
- DialogFooter.test.tsx | Tests the DialogFooter component's rendering, callback wiring, busy state, destructive styling, and secondary action support. | dep: vitest, @testing-library/react, @testing-library/user-event, ../DialogFooter
|
||||
- HoverEditButton.test.tsx | Tests the HoverEditButton component's click behavior and label customization. | dep: vitest, @testing-library/react, @testing-library/user-event, ../HoverEditButton, HoverEditButton
|
||||
- LibraryOverview.test.tsx | Tests the LibraryOverview component renders movie and TV library cards with correct counts | dep: vitest, @testing-library/react, ../LibraryOverview, ../../types, LibraryOverview component, LibraryCount type
|
||||
- MetricCard.test.tsx | Tests the MetricCard component rendering with and without optional subtext prop | dep: vitest, @testing-library/react, ../MetricCard
|
||||
- NowPlaying.test.tsx | Tests the NowPlaying component's empty-state rendering when no sessions exist | dep: vitest, @testing-library/react, ../NowPlaying, NowPlaying component
|
||||
- SectionCard.test.tsx | Unit tests for the SectionCard component verifying it renders title, description, action, and children correctly | dep: vitest, @testing-library/react, ../SectionCard, SectionCard
|
||||
- SelectionRailCard.test.tsx | Unit tests for the SelectionRailCard component verifying it renders title, body, footer, and applies minHeight prop correctly. | dep: vitest, @testing-library/react, ../SelectionRailCard, SelectionRailCard
|
||||
- SessionActivityPanel.test.tsx | Tests the SessionActivityPanel component's rendering of session states, empty state, and user interaction callbacks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../SessionActivityPanel, ../../types, SessionActivityPanel, types
|
||||
- TabbedCard.test.tsx | Tests the TabbedCard component's rendering and tab selection behavior | dep: vitest, @testing-library/react, @testing-library/user-event, ../TabbedCard, @/components/ui/tabs
|
||||
## arch
|
||||
Component-level React Testing Library tests organized as co-located per-component test files following a flat naming convention.
|
||||
## tags
|
||||
library, @testing, tests, component, vitest, react, user, card.test
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,46 @@
|
||||
# frontend/src/components/ui (index)
|
||||
dir: frontend/src/components/ui
|
||||
|
||||
## role
|
||||
Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
|
||||
## parent
|
||||
index: frontend/src/components/.pi-map.index.md
|
||||
map: frontend/src/components/.pi-map.md
|
||||
## children
|
||||
- frontend/src/components/ui/__tests__
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/ui/__tests__/.pi-map.md
|
||||
## files
|
||||
- alert.tsx
|
||||
- avatar.tsx
|
||||
- badge.tsx
|
||||
- button.tsx
|
||||
- card.tsx
|
||||
- checkbox.tsx
|
||||
- collapsible.tsx
|
||||
- data-table.tsx
|
||||
- dialog.tsx
|
||||
- dropdown-menu.tsx
|
||||
- input.tsx
|
||||
- label.tsx
|
||||
- progress.tsx
|
||||
- scroll-area.tsx
|
||||
- select.tsx
|
||||
- separator.tsx
|
||||
- sheet.tsx
|
||||
- skeleton.tsx
|
||||
- switch.tsx
|
||||
- table.tsx
|
||||
- tabs.tsx
|
||||
- textarea.tsx
|
||||
- tooltip.tsx
|
||||
## links
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## workflows
|
||||
- change ui behavior
|
||||
read: alert.tsx, avatar.tsx, badge.tsx
|
||||
- explore ui subdirectories
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,51 @@
|
||||
# frontend/src/components/ui
|
||||
dir: frontend/src/components/ui
|
||||
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
|
||||
## files
|
||||
- alert.tsx | Implements a composable alert/notification UI component with variant styling and subcomponents for title, description, and action. | dep: react, class-variance-authority, @/lib/utils
|
||||
- avatar.tsx | Provides a set of composable React avatar components with size variants, fallback support, badges, and grouped avatar layouts using Radix UI primitives. | dep: react, radix-ui, @/lib/utils
|
||||
- badge.tsx | A reusable React Badge component with multiple style variants built using class-variance-authority | exp: func:Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }), call:cn, call:badgeVariants | dep: react, class-variance-authority, radix-ui, @/lib/utils
|
||||
- button.tsx | A reusable, polymorphic Button component with multiple style variants and sizes using Tailwind CSS and class-variance-authority. | dep: react, class-variance-authority, radix-ui, @/lib/utils, radix-ui (Slot), @/lib/utils (cn)
|
||||
- card.tsx | A composable React card component system with sub-components for header, title, description, action, content, and footer with Tailwind styling. | dep: react, @/lib/utils, React
|
||||
- checkbox.tsx | A styled checkbox UI component built on Radix UI primitives with Tailwind CSS styling and accessibility features. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- collapsible.tsx | Wraps Radix UI's Collapsible primitive components with consistent data-slot attributes for a collapsible UI pattern. | dep: radix-ui, react
|
||||
- data-table.tsx | Reusable data table component wrapping TanStack Table with shadcn UI primitives, supporting row selection, column visibility toggling, pagination (client and server-side), and row click handling — explicitly excluding sorting and column resizing. | exp: DataTableProps, func:DataTable({ columns, data, getRowId, enableRowSelection = false, rowSelection, onRowSelectionChange, onRowClick, columnVisibility, onColumnVisibilityChange, enableColumnVisibilityToggle = false, enablePagination = false, manualPagination = false, pagination, onPaginationChange, pageSizeOptions = [10, 20, 30, 50], rowCount, emptyMessage = "No results.", }: DataTableProps<TData, TValue>), call:React.useMemo, call:table.getIsAllPageRowsSelected, call:table.getIsSomePageRowsSelected, call:table.toggleAllPageRowsSelected, call:e.stopPropagation, call:row.getIsSelected, call:row.toggleSelected, call:useReactTable, call:getCoreRowModel, call:getPaginationRowModel, call:Math.max, call:Math.ceil, call:table.getPageCount, call:table .getAllColumns() .filter((column) => column.getCanHide()) .map, call:column.getCanHide, call:column.getIsVisible, call:column.toggleVisibility, call:e.preventDefault, call:table.getHeaderGroups().map, call:headerGroup.headers.map, call:flexRender, call:header.getContext, call:table.getRowModel().rows.map, call:cn, call:onRowClick, call:row.getVisibleCells().map, call:cell.getContext | dep: react, @tanstack/react-table, lucide-react, @/lib/utils, @/components/ui/button, @/components/ui/checkbox, @/components/ui/table, @/components/ui/dropdown-menu, @/components/ui/select
|
||||
- dialog.tsx | A React dialog/modal component built on Radix UI primitives with styled subcomponents (overlay, content, header, footer, title, description) and close button functionality. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
|
||||
- dropdown-menu.tsx | A styled React dropdown menu component library built on top of Radix UI primitives with Tailwind CSS styling and animation support. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- input.tsx | A reusable styled input component that wraps HTML input elements with consistent Tailwind CSS styling and theme-aware states. | dep: react, @/lib/utils, React
|
||||
- label.tsx | A styled React label component that wraps Radix UI's LabelPrimitive with default Tailwind CSS styling and disabled state handling. | dep: react, radix-ui, @/lib/utils
|
||||
- progress.tsx | A React component that renders a styled horizontal progress bar using Radix UI primitives with customizable value and appearance. | dep: react, radix-ui, @/lib/utils
|
||||
- scroll-area.tsx | A React component that wraps Radix UI's ScrollArea primitive to provide a styled, accessible scrollable container with custom scrollbar support. | dep: react, radix-ui, @/lib/utils
|
||||
- select.tsx | A styled React select dropdown component built on top of Radix UI's Select primitive with Tailwind CSS styling and scroll buttons. | dep: react, radix-ui, @/lib/utils, lucide-react
|
||||
- separator.tsx | A React component that wraps Radix UI's Separator primitive to render accessible, styled horizontal or vertical dividers with Tailwind CSS. | dep: react, radix-ui, @/lib/utils
|
||||
- sheet.tsx | Implements a customizable slide-out panel UI component (sheet) with overlay, animations, and positioning options. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
|
||||
- skeleton.tsx | A reusable Skeleton loading placeholder component that renders a pulsing, rounded div with muted background styling. | dep: @/lib/utils, React
|
||||
- switch.tsx | A reusable React Switch component that wraps Radix UI's Switch primitive with customizable styling, size variants, and accessibility features. | dep: react, radix-ui, @/lib/utils
|
||||
- table.tsx | A reusable, styled table component library for React with subcomponents for header, body, footer, rows, cells, and captions. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
|
||||
- tabs.tsx | A React component library implementing an accessible, styled tabs UI primitive using Radix UI with support for horizontal/vertical orientations and default/line variants. | dep: react, class-variance-authority, radix-ui, @/lib/utils, React
|
||||
- textarea.tsx | A reusable textarea component that applies consistent styling using Tailwind CSS classes and supports all native textarea props. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
|
||||
- tooltip.tsx | Provides a styled, composable tooltip component built on top of Radix UI primitives with Tailwind CSS animations and theming. | dep: react, radix-ui, @/lib/utils
|
||||
## arch
|
||||
shadcn/ui pattern combining Radix UI accessibility primitives, class-variance-authority (CVA) for variant styling, and Tailwind CSS utility classes, with composable sub-components and TanStack Table for data grids.
|
||||
## tags
|
||||
react, radix, lib, utils, ui, component, table, styled
|
||||
## symbols
|
||||
- Badge
|
||||
- DataTable
|
||||
- call:cn
|
||||
- call:badgeVariants
|
||||
- DataTableProps
|
||||
- call:React.useMemo
|
||||
- call:table.getIsAllPageRowsSelected
|
||||
- call:table.getIsSomePageRowsSelected
|
||||
## workflows
|
||||
- change ui behavior
|
||||
read: alert.tsx, avatar.tsx, badge.tsx
|
||||
- explore ui subdirectories
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,21 @@
|
||||
# frontend/src/components/ui/__tests__ (index)
|
||||
dir: frontend/src/components/ui/__tests__
|
||||
|
||||
## role
|
||||
Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
|
||||
## parent
|
||||
index: frontend/src/components/ui/.pi-map.index.md
|
||||
map: frontend/src/components/ui/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- badge.test.tsx
|
||||
- data-table.test.tsx
|
||||
## links
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
map: frontend/src/components/ui/__tests__/.pi-map.md
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: badge.test.tsx, data-table.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,21 @@
|
||||
# frontend/src/components/ui/__tests__
|
||||
dir: frontend/src/components/ui/__tests__
|
||||
|
||||
index: frontend/src/components/ui/__tests__/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
|
||||
## files
|
||||
- badge.test.tsx | Tests that the Badge component renders a success variant with the correct data attribute and CSS class using a Vitest testing harness. | dep: vitest, @testing-library/react, ../badge
|
||||
- data-table.test.tsx | Tests a DataTable React component wrapper around TanStack Table, covering rendering, row selection, column visibility, row click events, empty states, and pagination. | dep: vitest, react, @testing-library/react, @testing-library/user-event, @tanstack/react-table, ../data-table
|
||||
## arch
|
||||
Vitest and React Testing Lab testing patterns with declarative test cases covering visual variants, TanStack Table integration, user interactions, and edge-case rendering.
|
||||
## tags
|
||||
react, data, vitest, @testing, library, table, tests, badge
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: badge.test.tsx, data-table.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,31 @@
|
||||
# frontend/src/hooks (index)
|
||||
dir: frontend/src/hooks
|
||||
|
||||
## role
|
||||
Centralized React custom hooks package providing data-fetching, caching, and mutation logic via TanStack Query for all feature domains across the application.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- useBackups.ts
|
||||
- useDashboard.ts
|
||||
- useFiles.ts
|
||||
- useMedia.ts
|
||||
- useObservability.ts
|
||||
- usePersistentState.ts
|
||||
- useSendUserMessage.ts
|
||||
- useServices.ts
|
||||
- useSettings.ts
|
||||
- useUserMessageQueueStatus.ts
|
||||
- useUsers.ts
|
||||
- useWidgets.ts
|
||||
## links
|
||||
index: frontend/src/hooks/.pi-map.index.md
|
||||
map: frontend/src/hooks/.pi-map.md
|
||||
## workflows
|
||||
- change hooks behavior
|
||||
read: useBackups.ts, useDashboard.ts, useFiles.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,38 @@
|
||||
# frontend/src/hooks
|
||||
dir: frontend/src/hooks
|
||||
|
||||
index: frontend/src/hooks/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Centralized React custom hooks package providing data-fetching, caching, and mutation logic via TanStack Query for all feature domains across the application.
|
||||
## files
|
||||
- useBackups.ts | Provides React Query custom hooks for fetching and managing backup-related data including jobs, runs, alerts, and dashboard metrics with automatic refetching. | exp: func:useBackupJobs(), call:useQuery, func:useBackupJob(jobId: string), call:useQuery, call:fetchBackupJob, func:useBackupRuns(jobId: string, status: string), call:useQuery, call:fetchBackupRuns, func:useBackupAlerts(jobId: string, acknowledged: boolean, severity: string), call:useQuery, call:fetchBackupAlerts, func:useAcknowledgeAlert(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries, func:useBackupDashboard(), call:useQuery | dep: @tanstack/react-query, ../api/backups
|
||||
- useDashboard.ts | Provides React Query custom hooks for fetching and mutating dashboard data including counts, libraries, activity, and shortcuts. | exp: useNowPlaying, func:useCounts(jellyfinServiceId: string), call:useQuery, call:fetchCounts, func:useLibraries(jellyfinServiceId: string), call:useQuery, call:fetchLibraries, func:useActivity(jellyfinServiceId: string), call:useQuery, call:fetchActivity, func:useDashboardShortcuts(), call:useQuery, func:useSaveDashboardShortcut(), call:useQueryClient, call:useMutation, call:saveDashboardShortcut, call:queryClient.invalidateQueries, func:useDeleteDashboardShortcut(), call:useQueryClient, call:useMutation, call:deleteDashboardShortcut, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client, ../types
|
||||
- useFiles.ts | Custom React hooks for file operations and job management using TanStack Query for data fetching, caching, and mutations. | exp: func:useDirectoryListing(path: string, machineId: string), call:useQuery, call:fetchDirectoryListing, func:useFfprobe(path: string, enabled, machineId: string), call:useQuery, call:fetchFfprobe, func:useStat(path: string, enabled, machineId: string), call:useQuery, call:fetchStat, func:useJobTemplates(), call:useQuery, func:useRunJob(machineId: string), call:useMutation, call:runJob | dep: @tanstack/react-query, ../api/client
|
||||
- useMedia.ts | Custom React hooks for managing media status, querying media, and controlling index build operations using TanStack Query. | exp: func:useMediaStatus(jellyfinServiceId: string), call:useQuery, call:fetchMediaStatus, func:useMediaQuery(params: { libraries?: string; types?: string; search?: string; hdr_filter?: string; sort_key?: string; sort_order?: string; limit?: number; offset?: number; jellyfinServiceId?: string; enabled?: boolean; }), call:useQuery, call:queryMedia, func:useBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:buildMediaIndex, call:invalidateMedia, func:useStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:stopMediaIndexBuild, call:invalidateMedia, func:useForceStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:forceStopMediaIndexBuild, call:invalidateMedia | dep: @tanstack/react-query, ../api/client
|
||||
- useObservability.ts | Custom React hooks for fetching and polling observability data (Alertmanager alerts/status, Grafana/Prometheus status, Prometheus targets, monitoring machines) via React Query. | exp: func:useAlertmanagerAlerts(), call:useQuery, func:useAlertmanagerStatus(), call:useQuery, func:useGrafanaStatus(), call:useQuery, func:usePrometheusStatus(), call:useQuery, func:usePrometheusTargets(), call:useQuery, func:useMonitoringMachines(), call:useQuery | dep: @tanstack/react-query, ../api/client
|
||||
- usePersistentState.ts | React hook that synchronizes state with localStorage to persist UI state across browser sessions | exp: func:usePersistentState(key: string, initialValue: T | (() => T)), call:useCallback, call:window.localStorage.getItem, call:JSON.parse, call:useState, call:useEffect, call:window.localStorage.setItem, call:JSON.stringify | dep: react
|
||||
- useSendUserMessage.ts | Custom React hook that sends a user message and invalidates the message queue cache on success | exp: func:useSendUserMessage(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client
|
||||
- useServices.ts | Provides custom React hooks for fetching, creating, updating, and deleting service instances and types using React Query. | exp: func:useServiceTypes(), call:useQuery, func:useServiceInstances(serviceType: string), call:useQuery, call:fetchServiceInstances, func:useSaveServiceInstance(), call:useQueryClient, call:useMutation, call:updateServiceInstance, call:createServiceInstance, call:queryClient.invalidateQueries, func:useDeleteServiceInstance(), call:useQueryClient, call:useMutation, call:deleteServiceInstance, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/services, ../types
|
||||
- useSettings.ts | Provides React Query custom hooks for managing application settings including monitoring machines, SSH keys, saved tasks, and local database reset operations. | exp: func:useMonitoringSettings(), call:useQuery, func:useSSHKeys(), call:useQuery, func:useGenerateSSHKey(), call:useMutation, call:generateSSHKey, func:useSaveSSHKey(), call:useQueryClient, call:useMutation, call:saveSSHKey, call:queryClient.invalidateQueries, func:useDeleteSSHKey(), call:useQueryClient, call:useMutation, call:deleteSSHKey, call:queryClient.invalidateQueries, func:useTasks(), call:useQuery, func:useTaskRuns(taskId: string), call:useQuery, call:fetchSavedTaskRuns, call:Boolean, func:useSaveTask(), call:useQueryClient, call:useMutation, call:saveTask, call:queryClient.invalidateQueries, func:useDeleteTask(), call:useQueryClient, call:useMutation, call:deleteTask, call:queryClient.invalidateQueries, func:useRunTask(), call:useQueryClient, call:useMutation, call:runTask, call:queryClient.invalidateQueries, func:useSaveMonitoringMachine(), call:useQueryClient, call:useMutation, call:saveMonitoringMachine, call:queryClient.invalidateQueries, func:useTestMonitoringMachineSSH(), call:useMutation, func:useDeleteMonitoringMachine(), call:useQueryClient, call:useMutation, call:deleteMonitoringMachine, call:queryClient.invalidateQueries, func:useResetLocalDatabase(), call:useQueryClient, call:useMutation, call:resetLocalDatabase, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client, ../types
|
||||
- useUserMessageQueueStatus.ts | Custom React hook that polls for user message queue status every 5 seconds using TanStack Query | exp: func:useUserMessageQueueStatus(), call:useQuery | dep: @tanstack/react-query, ../api/client
|
||||
- useUsers.ts | Custom React hook that fetches and caches user directory data using TanStack Query with configurable Jellyfin service ID | exp: func:useUsers(jellyfinServiceId: string), call:useQuery, call:fetchUsers | dep: @tanstack/react-query, ../api/client, ../types
|
||||
- useWidgets.ts | Custom React hooks for managing widget data fetching, caching, and mutations using TanStack Query. | exp: func:useWidgetInstances(), call:useQuery, func:useWidgetData(widgetId: string, refreshInterval: number), call:useQuery, call:fetchWidgetData, func:useSaveWidgetInstance(), call:useQueryClient, call:useMutation, call:updateWidgetInstance, call:createWidgetInstance, call:queryClient.invalidateQueries, func:useDeleteWidgetInstance(), call:useQueryClient, call:useMutation, call:deleteWidgetInstance, call:queryClient.invalidateQueries, func:useBuiltinWidgetKinds(), call:useQuery | dep: @tanstack/react-query, ../api/widgets, ../types
|
||||
## arch
|
||||
React Query (TanStack Query) pattern with domain-specific hook modules, leveraging automatic refetching, polling, and cache invalidation, supplemented by a localStorage-backed persistent state hook.
|
||||
## tags
|
||||
call:use, query, client, mutation, call:query, client.invalidate, queries, call:fetch
|
||||
## symbols
|
||||
- useBackupJobs
|
||||
- useBackupJob
|
||||
- useBackupRuns
|
||||
- useBackupAlerts
|
||||
- useAcknowledgeAlert
|
||||
- useBackupDashboard
|
||||
- useCounts
|
||||
- useLibraries
|
||||
## workflows
|
||||
- change hooks behavior
|
||||
read: useBackups.ts, useDashboard.ts, useFiles.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,23 @@
|
||||
# frontend/src/integrations (index)
|
||||
dir: frontend/src/integrations
|
||||
|
||||
## role
|
||||
Frontend integration layer that maps backend service types and widgets to their corresponding React components, metadata, and configuration schemas.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- registry.test.ts
|
||||
- registry.ts
|
||||
## links
|
||||
index: frontend/src/integrations/.pi-map.index.md
|
||||
map: frontend/src/integrations/.pi-map.md
|
||||
## workflows
|
||||
- change integrations behavior
|
||||
read: registry.ts
|
||||
- update integrations tests
|
||||
read: registry.test.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,30 @@
|
||||
# frontend/src/integrations
|
||||
dir: frontend/src/integrations
|
||||
|
||||
index: frontend/src/integrations/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Frontend integration layer that maps backend service types and widgets to their corresponding React components, metadata, and configuration schemas.
|
||||
## files
|
||||
- registry.test.ts | Tests the service and widget registry module, verifying correct service registrations, widget bindings, and widget resolution logic. | dep: vitest, ./registry, ../types
|
||||
- registry.ts | Defines a frontend registry mapping service types and built-in widgets to their React components, metadata, and config schemas, with a resolver to look up widgets by instance. | exp: WidgetComponentProps, ServiceWidgetBinding, ServiceBinding, SERVICE_REGISTRY, BUILTIN_WIDGETS, ResolvedWidget, func:getServiceBinding(serviceType: string) → ServiceBinding | undefined, func:getBuiltinBinding(kind: string) → ServiceWidgetBinding | undefined, func:resolveWidget(widget: WidgetInstance, services: ServiceInstance[]) → ResolvedWidget | undefined, call:services.find, call:getServiceBinding, call:binding?.widgets.find, call:getBuiltinBinding, func:enrichServiceTypes(types: ServiceTypeInfo[]) → ServiceTypeInfo[] | dep: react, ../widgets/AlertmanagerAlertsWidget, ../widgets/BackupsWidget, ../widgets/GrafanaLinkWidget, ../widgets/JellyfinWidget, ../widgets/PrometheusMetricWidget, ../widgets/SshTaskWidget, ../widgets/StaticWidget, ../types, AlertmanagerAlertsWidget, BackupsWidget, GrafanaLinkWidget, JellyfinWidget, PrometheusMetricWidget, SshTaskWidget, StaticWidget, types
|
||||
## arch
|
||||
Registry pattern implementing a centralized lookup dictionary with a resolver function to dynamically discover and instantiate the correct widget components based on service instances.
|
||||
## tags
|
||||
service, binding, widget, widgets, registry, types, builtin, get
|
||||
## symbols
|
||||
- getServiceBinding
|
||||
- getBuiltinBinding
|
||||
- resolveWidget
|
||||
- enrichServiceTypes
|
||||
- WidgetComponentProps
|
||||
- ServiceWidgetBinding
|
||||
- ServiceBinding
|
||||
- SERVICE_REGISTRY
|
||||
## workflows
|
||||
- change integrations behavior
|
||||
read: registry.ts
|
||||
- update integrations tests
|
||||
read: registry.test.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/src/lib (index)
|
||||
dir: frontend/src/lib
|
||||
|
||||
## role
|
||||
Provides shared utility functions for the frontend application.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- utils.ts
|
||||
## links
|
||||
index: frontend/src/lib/.pi-map.index.md
|
||||
map: frontend/src/lib/.pi-map.md
|
||||
## workflows
|
||||
- change lib behavior
|
||||
read: utils.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,22 @@
|
||||
# frontend/src/lib
|
||||
dir: frontend/src/lib
|
||||
|
||||
index: frontend/src/lib/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides shared utility functions for the frontend application.
|
||||
## files
|
||||
- utils.ts | Utility function that merges Tailwind CSS classes with proper deduplication and conflict resolution | exp: func:cn(...inputs: ClassValue[]), call:twMerge, call:clsx | dep: clsx, tailwind-merge
|
||||
## arch
|
||||
Functional utility module pattern leveraging clsx and tailwind-merge for deterministic CSS class composition.
|
||||
## tags
|
||||
merge, tailwind, cn, call:tw, call:clsx, utils, utility, merges
|
||||
## symbols
|
||||
- cn
|
||||
- call:twMerge
|
||||
- call:clsx
|
||||
## workflows
|
||||
- change lib behavior
|
||||
read: utils.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,34 @@
|
||||
# frontend/src/pages (index)
|
||||
dir: frontend/src/pages
|
||||
|
||||
## role
|
||||
Top-level page components constituting the primary routed views of the frontend application, each encapsulating a distinct feature domain (dashboard, media, services, actions, files, settings, users).
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
- frontend/src/pages/__tests__
|
||||
index: frontend/src/pages/__tests__/.pi-map.index.md
|
||||
map: frontend/src/pages/__tests__/.pi-map.md
|
||||
## files
|
||||
- Actions.tsx
|
||||
- Applications.tsx
|
||||
- Dashboard.tsx
|
||||
- FileBrowser.impl.tsx
|
||||
- FileBrowser.tsx
|
||||
- Media.tsx
|
||||
- ServicePage.tsx
|
||||
- ServicesPage.tsx
|
||||
- Settings.tsx
|
||||
- Users.tsx
|
||||
- UsersPage.impl.tsx
|
||||
## links
|
||||
index: frontend/src/pages/.pi-map.index.md
|
||||
map: frontend/src/pages/.pi-map.md
|
||||
## workflows
|
||||
- change pages behavior
|
||||
read: Actions.tsx, Applications.tsx, Dashboard.tsx
|
||||
- explore pages subdirectories
|
||||
index: frontend/src/pages/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,39 @@
|
||||
# frontend/src/pages
|
||||
dir: frontend/src/pages
|
||||
|
||||
index: frontend/src/pages/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Top-level page components constituting the primary routed views of the frontend application, each encapsulating a distinct feature domain (dashboard, media, services, actions, files, settings, users).
|
||||
## files
|
||||
- Actions.tsx | Provides a React component for managing reusable server tasks (shell/python actions) with CRUD operations, service selection, and execution history display. | exp: func:Actions(), call:useServiceInstances, call:useTasks, call:useSaveTask, call:useDeleteTask, call:useRunTask, call:useState, call:emptyTask, call:useMemo, call:tasks.find, call:useTaskRuns, call:setDraft, call:setDraftBaseline, call:setEditOpen, call:setRunServiceId, call:saveTask.mutateAsync, call:setTab, call:String, call:tasks.map, call:openEdit, call:initialFromTask, call:runTask.mutateAsync, call:sshServices.map, call:selectedRuns.data.items.map, call:new Date(run.created_at * 1000).toLocaleString, call:deleteTask.mutate | dep: react, ../types, ../hooks/useSettings, ../hooks/useServices, ../components/DialogFooter, ../components/HoverEditButton, ../components/SectionCard, ../components/SelectionRailCard, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/separator, @/components/ui/tabs, @/components/ui/textarea
|
||||
- Applications.tsx | Renders a tabbed Applications dashboard with Jellyfin library statistics and media management, plus a placeholder for future Nextcloud support. | exp: func:Applications(), call:useState | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/tabs, ./Media, ../hooks/useDashboard, ../hooks/useServices, ../components/SectionCard, ../components/TabbedCard
|
||||
- Dashboard.tsx | Dashboard page component for managing and displaying configurable shortcuts and widget instances. | exp: func:Dashboard(), call:useNavigate, call:useDashboardShortcuts, call:useSaveDashboardShortcut, call:useDeleteDashboardShortcut, call:useState, call:emptyShortcut, call:useWidgetInstances, call:useMemo, call:widgetInstances .filter((w) => w.enabled) .sort, call:setShortcutDraft, call:setShortcutDialogOpen, call:saveShortcut.mutateAsync, call:setWidgetDialogOpen, call:shortcuts.map, call:shortcutHref, call:window.open, call:navigate, call:openEditShortcut, call:setDeleteShortcutId, call:visibleWidgets.map, call:Boolean, call:deleteShortcut.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, ../hooks/useDashboard, ../hooks/useWidgets, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../components/WidgetInstance, ../components/WidgetConfigDialog, @/components/ui/*
|
||||
- FileBrowser.impl.tsx | A React component that implements a file browser with directory listing, file selection, ffprobe media metadata inspection, and job execution capabilities. | exp: func:FileBrowser(), call:useSearchParams, call:useState, call:useMonitoringSettings, call:useMemo, call:(machines ?? []).filter, call:machine.services.includes, call:searchParams.get, call:usePersistentState, call:isVideoFile, call:requestedPath.includes, call:requestedPath.replace, call:selectedPath.replace, call:defaultFileBrowserState, call:useNavigate, call:setBrowserState, call:useDirectoryListing, call:useFfprobe, call:useJobTemplates, call:useRunJob, call:updateBrowserState, call:setSearchParams, call:next.set, call:next.delete, call:navigate, call:currentDir.replace, call:rows.push, call:entry.name.split(".").pop, call:formatSize, call:formatTime, call:updater, call:Object.keys(next).filter, call:rows.find, call:templates?.find, call:fileMachines.map, call:refetch, call:String, call:templates.map, call:runJob.mutate, call:navigateToSettings | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/tabs, ../hooks/useFiles, ../hooks/usePersistentState, ../hooks/useSettings, ../components/SectionCard, ../components/TabbedCard
|
||||
- FileBrowser.tsx | Re-exports the FileBrowser component from its implementation file | dep: ./FileBrowser.impl
|
||||
- Media.tsx | A React component for managing and browsing Jellyfin media libraries with server-driven pagination, index building controls, and responsive data table display. | exp: func:Media(), call:useNavigate, call:useSearchParams, call:usePrefersSmallScreen, call:useServiceInstances, call:searchParams.get, call:jellyfinServices.find, call:useCounts, call:useLibraries, call:useMediaStatus, call:useBuildIndex, call:useStopBuildIndex, call:useForceStopBuildIndex, call:usePersistentState, call:defaultMediaTabState, call:setMediaState, call:useState, call:useEffect, call:setSearchParams, call:next.set, call:useMediaDataQuery, call:Math.floor, call:updater, call:useMemo, call:navigate, call:encodeURIComponent, call:Math.max, call:Math.ceil, call:formatDuration, call:jellyfinServices.map, call:status.item_count.toLocaleString, call:counts.movies.toLocaleString, call:counts.series.toLocaleString, call:counts.episodes.toLocaleString, call:(libraries?.length ?? 0).toLocaleString, call:buildIndex.mutate, call:stopBuildIndex.mutate, call:forceStopBuildIndex.mutate, call:Math.round, call:status?.build_items_processed?.toLocaleString, call:status?.build_items_total?.toLocaleString, call:status?.build_library_items_processed?.toLocaleString, call:status?.build_library_items_total?.toLocaleString, call:updateMediaState, call:total.toLocaleString | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/alert, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/progress, @/components/ui/select, ../hooks/useMedia, ../hooks/usePersistentState, ../types, ../hooks/useServices, ../hooks/useDashboard, @/components/ui (data-table, alert, button, card, input, label, progress, select)
|
||||
- ServicePage.tsx | Provides a UI for viewing and editing a service instance's configuration, secrets, and widget bindings, with save and delete functionality. | exp: func:ServicePage(), call:useParams, call:useServiceInstances, call:useSaveServiceInstance, call:useDeleteServiceInstance, call:useMemo, call:services.find, call:getServiceBinding, call:useState, call:setName, call:setEnabled, call:setHydrated, call:saveService.mutateAsync, call:buildInput, call:setDeleteOpen, call:binding.widgets.map, call:deleteService.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, ../hooks/useServices, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../integrations/registry, @/components/ui/*
|
||||
- ServicesPage.tsx | A React page component for managing external service instances, allowing users to view, create, and delete service configurations with dynamic form fields based on service type schemas. | exp: func:ServicesPage(), call:useNavigate, call:useServiceInstances, call:useServiceTypes, call:useDeleteServiceInstance, call:useState, call:useMemo, call:map.get, call:list.push, call:map.set, call:[...map.entries()].sort, call:map.entries, call:a[0].localeCompare, call:types.find, call:getServiceBinding, call:setCreateOpen, call:grouped.map, call:typeName, call:instances.map, call:Object.entries(s.secrets_set).some, call:navigate, call:setDeleteId, call:Boolean, call:deleteService.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/dialog, lucide-react, ../hooks/useServices, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../integrations/registry, @/components/ui (alert, badge, button, input, label, switch, dialog)
|
||||
- Settings.tsx | A React settings page component for managing monitoring machines, SSH keys, and dangerous operations with tabbed navigation, forms, and confirmation dialogs. | exp: func:Settings(), call:useMonitoringSettings, call:useSSHKeys, call:useSaveMonitoringMachine, call:useDeleteMonitoringMachine, call:useTestMonitoringMachineSSH, call:useState, call:emptyMachine, call:useMemo, call:orderedMachines.find, call:setSSHValidationMessage, call:setSSHValidationError, call:setSSHValidationStatus, call:clearSSHValidation, call:setMachineDraft, call:setEditingMachine, call:setMachineDialogOpen, call:saveMachine.mutateAsync, call:testMachineSSH.mutateAsync, call:String, call:message.toLowerCase, call:lowered.includes, call:setTab, call:orderedMachines.map, call:setSelectedMachineId, call:cn, call:openEditMachine, call:setDeleteMachineId, call:closeMachineDialog, call:saveMachineDraft, call:machineDraft.host.trim, call:Boolean, call:deleteMachine.mutate | dep: react, ../types, ../hooks/useSettings, ../components/DialogFooter, ../components/HoverEditButton, ../components/SectionCard, ../components/SelectionRailCard, ../components/TabbedCard, ../components/ConfirmDialog, @/lib/utils, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/checkbox, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, @/components/ui/tabs, @/components/ui/textarea
|
||||
- Users.tsx | Re-exports the UsersPage component from its implementation file to provide a cleaner import interface. | dep: ./UsersPage.impl
|
||||
- UsersPage.impl.tsx | A React page component for managing and messaging Jellyfin users with Jellyseerr enrichment, featuring a searchable directory table, user selection, email composition dialog, and queue status monitoring. | exp: func:UsersPage(), call:useUsers, call:useActivity, call:useUserMessageQueueStatus, call:useSendUserMessage, call:useIsMobile, call:useState, call:useSearchParams, call:useRef, call:useMemo, call:mergeUsersWithActivity, call:search.trim().toLowerCase, call:rows.filter, call:[ row.username, row.display_name, row.email, row.email_source, row.avatar_source, row.name_source, row.access_source, row.user_type_label, row.role, row.permissions_label, row.jellyseerr_username, row.activity_label, row.activity_summary, row.activity.primary_session?.title || "", String(row.jellyseerr_user_id ?? ""), ].some, call:String, call:value.toLowerCase().includes, call:queueStatus.active_request_id.slice, call:selectedIdSet.has, call:selectedRows.filter, call:filteredRows.filter, call:setSelectedUserIds, call:current.includes, call:current.filter, call:filteredRows.forEach, call:next.add, call:next.delete, call:Array.from, call:searchParams.get, call:resolveUserSelection, call:buildUserDrawerModel, call:sendUserMessage.reset, call:subject.trim, call:setSubject, call:htmlBody.trim, call:setHtmlBody, call:setComposeOpen, call:htmlBody.slice, call:requestAnimationFrame, call:textarea.focus, call:textarea.setSelectionRange, call:window.prompt, call:insertMarkup, call:setAttachments, call:formData.append, call:JSON.stringify, call:allSelectedRows.map, call:attachments.forEach, call:sendUserMessage.mutateAsync, call:setSearch, call:cn, call:toggleVisibleSelection, call:filteredRows.map, call:setSearchParams, call:event.stopPropagation, call:toggleUserSelected, call:userLabel(row).charAt(0).toUpperCase, call:activityBadgeVariant, call:Boolean, call:drawerModel.title.charAt(0).toUpperCase, call:drawerModel.identity.map, call:drawerModel.contactActions.map, call:drawerModel.contactActions .map((action) => action.hint) .join, call:drawerModel.permissions.map, call:closeCompose, call:sendUserMessage.data.request_id.slice, call:selectedDeliverableRows.map, call:attachments.map, call:removeAttachment | dep: react, react-router-dom, lucide-react, @/components/ui/dialog, @/components/ui/input, @/components/ui/textarea, @/components/ui/separator, @/components/ui/label, @/components/ui/avatar, @/components/ui/badge, @/components/ui/button, @/components/ui/checkbox, @/components/ui/alert, @/components/ui/progress, @/components/ui/tooltip, @/components/ui/sheet, @/components/ui/table, @/lib/utils, ../components/MetricCard, ../components/SessionActivityPanel, ../hooks/useUsers, ../hooks/useDashboard, ../hooks/useSendUserMessage, ../hooks/useUserMessageQueueStatus, ../types, ../users, ../userState, @/components/ui (dialog, input, textarea, separator, label, avatar, badge, button, checkbox, alert, progress, tooltip, sheet, table)
|
||||
## arch
|
||||
React functional component pages organized by feature domain, employing implementation/re-export file pairs for complex views, with each page composing CRUD operations, tabbed navigation, dynamic forms, and data tables against backend service APIs.
|
||||
## tags
|
||||
call:use, components, ui, call:set, state, service, react, machine
|
||||
## symbols
|
||||
- Actions
|
||||
- Applications
|
||||
- Dashboard
|
||||
- FileBrowser
|
||||
- Media
|
||||
- ServicePage
|
||||
- ServicesPage
|
||||
- Settings
|
||||
## workflows
|
||||
- change pages behavior
|
||||
read: Actions.tsx, Applications.tsx, Dashboard.tsx
|
||||
- explore pages subdirectories
|
||||
index: frontend/src/pages/__tests__/.pi-map.index.md
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,26 @@
|
||||
# frontend/src/pages/__tests__ (index)
|
||||
dir: frontend/src/pages/__tests__
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for top-level page components in the frontend application.
|
||||
## parent
|
||||
index: frontend/src/pages/.pi-map.index.md
|
||||
map: frontend/src/pages/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- Actions.test.tsx
|
||||
- Applications.test.tsx
|
||||
- Dashboard.test.tsx
|
||||
- FileBrowser.test.tsx
|
||||
- Media.test.tsx
|
||||
- Settings.test.tsx
|
||||
- UsersPage.test.tsx
|
||||
## links
|
||||
index: frontend/src/pages/__tests__/.pi-map.index.md
|
||||
map: frontend/src/pages/__tests__/.pi-map.md
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: Actions.test.tsx, Applications.test.tsx, Dashboard.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,26 @@
|
||||
# frontend/src/pages/__tests__
|
||||
dir: frontend/src/pages/__tests__
|
||||
|
||||
index: frontend/src/pages/__tests__/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite providing unit test coverage for top-level page components in the frontend application.
|
||||
## files
|
||||
- Actions.test.tsx | Unit tests for the Actions component covering task creation, run button state, and task execution via SSH service selection. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Actions, ../../types, ../../hooks/useSettings, ../../hooks/useServices
|
||||
- Applications.test.tsx | Tests the Applications component renders library statistics, tabs, and a mocked Media child while isolating slice-4 concerns from still-MUI dependencies. | dep: vitest, @testing-library/react, ../Applications, react-router-dom, ../Media, ../../hooks/useSettings, ../../hooks/useServices, ../../hooks/useDashboard
|
||||
- Dashboard.test.tsx | Unit tests for the Dashboard component focusing on shortcut CRUD operations (empty state, delete with confirmation, and create) while mocking child widgets and data hooks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Dashboard, ../../types, react-router-dom, ../../components/WidgetInstance, ../../components/WidgetConfigDialog, ../../hooks/useSettings, ../../hooks/useWidgets, ../../hooks/useDashboard
|
||||
- FileBrowser.test.tsx | Unit tests for a FileBrowser component verifying column rendering, file selection with ffprobe preview, and directory navigation behavior. | dep: vitest, @testing-library/react, @testing-library/user-event, ../FileBrowser.impl, ../../types, react-router-dom, ../../hooks/useFiles, ../../hooks/useSettings
|
||||
- Media.test.tsx | Tests the Media component's data table rendering, column toggling, row navigation, selection behavior, server-driven pagination, and build index controls. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Media, ../../types, react-router-dom, custom hooks (useMedia, useSettings, useServices, useDashboard)
|
||||
- Settings.test.tsx | Tests the Settings component's rendering, machine editing, and machine deletion functionality using mocked hooks | dep: vitest, @testing-library/react, @testing-library/user-event, ../Settings, ../../types, ../../hooks/useSettings
|
||||
- UsersPage.test.tsx | Unit tests for the UsersPage component covering user directory rendering, row selection, drawer navigation, activity status badges, and compose dialog formatting actions. | dep: vitest, @testing-library/react, @testing-library/user-event, ../UsersPage.impl, ../../components/ui/tooltip, ../../types, react-router-dom, TooltipProvider, useUsers, useDashboard, useUserMessageQueueStatus, useSendUserMessage, SessionActivityPanel
|
||||
## arch
|
||||
React Testing Library with Jest, using component mocking, hook stubs, and isolated render testing per page module.
|
||||
## tags
|
||||
library, @testing, hooks, react, tests, component, vitest, user
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
- update __tests__ tests
|
||||
read: Actions.test.tsx, Applications.test.tsx, Dashboard.test.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/src/test (index)
|
||||
dir: frontend/src/test
|
||||
|
||||
## role
|
||||
Provides test infrastructure configuration for the frontend's Vitest testing environment.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- setup.ts
|
||||
## links
|
||||
index: frontend/src/test/.pi-map.index.md
|
||||
map: frontend/src/test/.pi-map.md
|
||||
## workflows
|
||||
- change test behavior
|
||||
read: setup.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,23 @@
|
||||
# frontend/src/test
|
||||
dir: frontend/src/test
|
||||
|
||||
index: frontend/src/test/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides test infrastructure configuration for the frontend's Vitest testing environment.
|
||||
## files
|
||||
- setup.ts | Configures Vitest global test environment by registering jest-dom matchers and polyfilling missing jsdom APIs for Radix/shadcn UI component testing. | exp: class:ResizeObserverStub, method:observe(), method:unobserve(), method:disconnect() | dep: @testing-library/jest-dom/vitest, vitest, jsdom
|
||||
## arch
|
||||
Setup module pattern that extends Vitest's global matchers with jest-dom and polyfills jsdom gaps for UI component compatibility.
|
||||
## tags
|
||||
vitest, jest, dom, jsdom, resize, observer, stub, observe
|
||||
## symbols
|
||||
- ResizeObserverStub
|
||||
- observe
|
||||
- unobserve
|
||||
- disconnect
|
||||
## workflows
|
||||
- change test behavior
|
||||
read: setup.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,21 @@
|
||||
# frontend/src/types (index)
|
||||
dir: frontend/src/types
|
||||
|
||||
## role
|
||||
Central TypeScript type definitions providing shared data contracts and API response interfaces for the frontend application.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- backups.ts
|
||||
- index.ts
|
||||
## links
|
||||
index: frontend/src/types/.pi-map.index.md
|
||||
map: frontend/src/types/.pi-map.md
|
||||
## workflows
|
||||
- change types behavior
|
||||
read: backups.ts, index.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,28 @@
|
||||
# frontend/src/types
|
||||
dir: frontend/src/types
|
||||
|
||||
index: frontend/src/types/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Central TypeScript type definitions providing shared data contracts and API response interfaces for the frontend application.
|
||||
## files
|
||||
- backups.ts | Defines TypeScript interfaces for a backup system including jobs, runs, alerts, and dashboard summaries. | exp: BackupJob, BackupRun, BackupAlert, BackupDashboardSummary
|
||||
- index.ts | Defines shared TypeScript interfaces for API response types used across a media server management dashboard application. | exp: MediaCounts, LibraryCount, UserDirectoryItem, UserDirectoryResponse, UserMessageResponse, UserMessageQueueStatus, NowPlayingSession, SSHKey, SSHKeyInput, SSHKeyGenerated, SavedTask, SavedTaskInput, SavedTaskRun, MonitoringMachine, MonitoringMachineInput, ResetLocalDatabaseInput, ResetLocalDatabaseResponse, SSHValidationResult, AppVersionInfo, MediaIndexStatus, MediaIndexActionResponse, MediaItem, MediaQueryResponse, FileEntry, DirectoryListing, JobTemplate, JobResult, ResolvedPath, DashboardShortcut, DashboardShortcutInput, AlertmanagerAlert, AlertmanagerAlertSummary, AlertmanagerStatus, GrafanaStatus, PrometheusStatus, PrometheusTarget, WidgetInstance, WidgetInstanceInput, WidgetDataResponse, SecretFieldInfo, ServiceWidgetKindInfo, ServiceTypeInfo, ServiceInstance, ServiceInstanceInput, BuiltinWidgetKindInfo
|
||||
## arch
|
||||
Flat module pattern of plain TypeScript interfaces/types with a barrel index.ts export, serving as the single source of truth for data shapes across the UI.
|
||||
## tags
|
||||
input, response, media, status, info, widget, backup, dashboard
|
||||
## symbols
|
||||
- BackupJob
|
||||
- BackupRun
|
||||
- BackupAlert
|
||||
- BackupDashboardSummary
|
||||
- MediaCounts
|
||||
- LibraryCount
|
||||
- UserDirectoryItem
|
||||
- UserDirectoryResponse
|
||||
## workflows
|
||||
- change types behavior
|
||||
read: backups.ts, index.ts
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,27 @@
|
||||
# frontend/src/widgets (index)
|
||||
dir: frontend/src/widgets
|
||||
|
||||
## role
|
||||
Provides a collection of self-contained, UI-driven dashboard widgets that fetch and render data from various external services and integrations.
|
||||
## parent
|
||||
index: frontend/src/.pi-map.index.md
|
||||
map: frontend/src/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- AlertmanagerAlertsWidget.tsx
|
||||
- BackupsWidget.tsx
|
||||
- GrafanaLinkWidget.tsx
|
||||
- JellyfinWidget.tsx
|
||||
- PrometheusMetricWidget.tsx
|
||||
- SshTaskWidget.tsx
|
||||
- StaticWidget.tsx
|
||||
- index.ts
|
||||
## links
|
||||
index: frontend/src/widgets/.pi-map.index.md
|
||||
map: frontend/src/widgets/.pi-map.md
|
||||
## workflows
|
||||
- change widgets behavior
|
||||
read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, GrafanaLinkWidget.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,34 @@
|
||||
# frontend/src/widgets
|
||||
dir: frontend/src/widgets
|
||||
|
||||
index: frontend/src/widgets/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Provides a collection of self-contained, UI-driven dashboard widgets that fetch and render data from various external services and integrations.
|
||||
## files
|
||||
- AlertmanagerAlertsWidget.tsx | Renders an Alertmanager alerts dashboard widget displaying alert summaries, severity badges, and individual alert details. | exp: func:AlertmanagerAlertsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Object.entries(summary.by_severity).map, call:severityVariant, call:alerts.slice(0, 5).map | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
|
||||
- BackupsWidget.tsx | Displays a dashboard widget showing backup job metrics including total jobs, 24-hour success rate, active alerts, and last failure timestamp. | exp: func:BackupsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:new Date(summary.last_failed_at * 1000).toLocaleString | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types/backups, ../types
|
||||
- GrafanaLinkWidget.tsx | Renders a widget that displays a link to Grafana with loading, error, and empty states. | exp: func:GrafanaLinkWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/button, @/components/ui/skeleton, lucide-react, ../components/SectionCard, ../hooks/useWidgets, ../types
|
||||
- JellyfinWidget.tsx | Displays Jellyfin media server activity sessions in a widget with loading, error, and empty states. | exp: func:JellyfinWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Array.isArray | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SessionActivityPanel, ../components/SectionCard, ../hooks/useWidgets, ../types
|
||||
- PrometheusMetricWidget.tsx | A React component that fetches and displays Prometheus metric data from a widget, handling loading, error, and data states with formatted output for scalar and vector result types. | exp: func:PrometheusMetricWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:formatPrometheusValue | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
|
||||
- SshTaskWidget.tsx | Displays SSH task execution results with exit status, stdout, and stderr in a polling widget card | exp: func:SshTaskWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
|
||||
- StaticWidget.tsx | Renders a static text widget that displays fetched text content or a fallback message within a section card. | exp: func:StaticWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: ../components/SectionCard, ../hooks/useWidgets, ../types, SectionCard, useWidgetData, WidgetInstance
|
||||
- index.ts | Barrel file that re-exports various dashboard widget components from their individual modules. | dep: AlertmanagerAlertsWidget, BackupsWidget, GrafanaLinkWidget, JellyfinWidget, PrometheusMetricWidget, SshTaskWidget, StaticWidget
|
||||
## arch
|
||||
Component-based React architecture with each widget encapsulating its own data-fetching logic and standardized loading, error, and empty states, unified through a barrel-export pattern.
|
||||
## tags
|
||||
widget, components, data, ui, call:use, types, alert, sectioncard
|
||||
## symbols
|
||||
- AlertmanagerAlertsWidget
|
||||
- BackupsWidget
|
||||
- GrafanaLinkWidget
|
||||
- JellyfinWidget
|
||||
- PrometheusMetricWidget
|
||||
- SshTaskWidget
|
||||
- StaticWidget
|
||||
- call:useWidgetData
|
||||
## workflows
|
||||
- change widgets behavior
|
||||
read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, GrafanaLinkWidget.tsx
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/tests (index)
|
||||
dir: frontend/tests
|
||||
|
||||
## role
|
||||
Test suite validating frontend utility functions for user state management and UI model transformation.
|
||||
## parent
|
||||
index: frontend/.pi-map.index.md
|
||||
map: frontend/.pi-map.md
|
||||
## children
|
||||
-
|
||||
## files
|
||||
- userState.test.mjs
|
||||
- users.test.mjs
|
||||
## links
|
||||
index: frontend/tests/.pi-map.index.md
|
||||
map: frontend/tests/.pi-map.md
|
||||
## workflows
|
||||
-
|
||||
## dirty
|
||||
-
|
||||
@@ -0,0 +1,20 @@
|
||||
# frontend/tests
|
||||
dir: frontend/tests
|
||||
|
||||
index: frontend/tests/.pi-map.index.md
|
||||
|
||||
## role
|
||||
Test suite validating frontend utility functions for user state management and UI model transformation.
|
||||
## files
|
||||
- userState.test.mjs | Tests user state utility functions for merging session activity with user data and resolving user selection by various identifiers | dep: node:assert/strict, node:test, ../src/userState.js
|
||||
- users.test.mjs | Tests the buildUserDrawerModel function that transforms user data into a UI drawer model with contact and permission details | dep: node:assert/strict, node:test, ../src/users.js
|
||||
## arch
|
||||
Node.js Mocha/ES module test pattern testing pure data transformation functions in isolation.
|
||||
## tags
|
||||
user, tests, data, node:assert, strict, node:test, src, js
|
||||
## symbols
|
||||
-
|
||||
## workflows
|
||||
-
|
||||
## dirty
|
||||
-
|
||||
Reference in New Issue
Block a user