ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
openvidu/openvidu-dashboard/dashboard-ce/frontend/projects/dashboard-ui/README.md

4.3 KiB
Raw Blame History

@openvidu-dashboard/ui

All the dashboard UI: shell, pages, services, building blocks, theme and icons. The CE application (dashboard-ce/frontend/src) and the applications that extend it only compose it.

Composing an application

providers: [
  provideZonelessChangeDetection(),
  provideRouter(composeRoutes(DASHBOARD_ROUTES, APP_ROUTES)),
  provideHttpClient(withInterceptors([...DASHBOARD_INTERCEPTORS])),
  provideDashboard()
];

@use '@fontsource-variable/inter/index' as inter;
@use '@fontsource-variable/jetbrains-mono/index' as jetbrains-mono;
@use '@openvidu-dashboard/ui/styles' as ovd;

@include ovd.theme;

The application copies assets/ (logo, and the icon sprite unless it builds its own) to assets/ of its build and runs scripts/icons.mjs build before building. icons.mjs build|check [--sprite <file>] [<icons.json>...] compiles and checks the sprite of several manifests, each listing its icons and the sources directories that use them, so an application adds its own manifest to the library one.

Extension points

  • Routes. DASHBOARD_ROUTES are DashboardRoute configs; composeRoutes(...configs) lets a later config replace any route by path (children merge by path) while keeping the data keys it does not set. A page of an extending application replaces a locked CE page by declaring the same path, e.g. { path: '', children: [{ path: 'rooms', children: [{ path: ':roomSid', loadComponent: … }] }] }. The locked tracks/:trackSid route, outside the sidenav, is the one the global search opens for an exact track ID; an edition with track details replaces it.
  • Navigation metadata. data.navigation is a NavigationMeta (label, icon, path, order, feature, liveCapable, rangeScoped, and on range-scoped routes retention, the GET /api/v1/info retention of the page's data that the range picker warns about); orders leave gaps of 10 for new entries. Detail routes declare data.page (PageMeta), data.breadcrumb and data.entity. navigationEntries() derives the sidenav from the composed routes.
  • Feature flags. FeatureService reads the features of GET /api/v1/info (InfoService); FeatureGate with FeatureContent renders its content only when the feature is enabled and ProLockOverlay otherwise, without any request. FEATURE_COPY holds the lock texts.
  • Component seams. The library renders a lock while the feature is disabled, and the component an application provides once it is enabled, loaded on first use:
    • ANALYTICS_PRO_CARDS: per slot of the Analytics PRO strip (quality, diagnostics, topRooms), a loadComponent() and the metrics and dimensions it adds to the page's combined requests. The card components inject AnalyticsPageContext (state, zone, refresh count, series, breakdowns, chart ranges and notes, CSV export, widen and retry) and render an ovd-analytics-card with CardContent.
    • ANALYTICS_SCOPE_SELECT (Analytics header) and ROOMS_NODE_FILTER (Rooms filter bar): loaders of the node selects, which send their own scopes requests.
    • OVERVIEW_NODES_CARD: the "By node" card of the Overview, given overview, the last overview response.
  • Status styles. provideStatusStyles() registers status domains beyond the CE ones of ovd-status-badge, with the styles of STATUS_FAMILY_STYLES.
  • Chart colours. ChartColorsService.colors() resolves the theme's chart tokens; resolved(tokens) resolves an application's own custom properties under the applied scheme.
  • Injection tokens. SEARCH_SOURCES (lists searched by the header), BROWSER_STORAGE (storage behind StorageService). Root services such as InfoService can be replaced with a provider.
  • Shell slots. DashboardShell projects [ovdBanner] content under the header, next to the migration, schema and connectivity banners.
  • Page helpers. injectRefreshScheduler() registers a page loader with the header refresh control; EntityPreviewService hands list rows to detail headers and breadcrumbs; QueryStateService and ListStateService own the URL state and the range carried across pages.
  • Test support. src/testing/ (fixtures, harnesses, media queries, icons, the Analytics page harness and the unit test providers) is shared with the application specs as @openvidu-dashboard/ui/testing through tsconfig paths.