mirror of https://github.com/OpenVidu/openvidu.git
66 lines
4.3 KiB
Markdown
66 lines
4.3 KiB
Markdown
# @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
|
|
|
|
```ts
|
|
providers: [
|
|
provideZonelessChangeDetection(),
|
|
provideRouter(composeRoutes(DASHBOARD_ROUTES, APP_ROUTES)),
|
|
provideHttpClient(withInterceptors([...DASHBOARD_INTERCEPTORS])),
|
|
provideDashboard()
|
|
];
|
|
```
|
|
|
|
```scss
|
|
@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`.
|