Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Observability] Expose options to customize sidebar route matching #100886

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,42 @@ To register a solution's navigation structure you'll first need to ensure your s
],
```

Now within your solution's **public** plugin `setup` lifecycle method you can call the `registerSections` method, this will register your solution's specific navigation structure with the overall Observability navigation registry. E.g.
Now within your solution's **public** plugin `setup` lifecycle method you can
call the `registerSections` method, this will register your solution's specific
navigation structure with the overall Observability navigation registry.

The `registerSections` function takes an `Observable` of an array of
`NavigationSection`s. Each section can be defined as

```typescript
export interface NavigationSection {
// the label of the section, should be translated
label: string | undefined;
// the key to sort by in ascending order relative to other entries
sortKey: number;
// the entries to render inside the section
entries: NavigationEntry[];
}
```

Each entry inside of a navigation section is defined as

```typescript
export interface NavigationEntry {
// the label of the menu entry, should be translated
label: string;
// the kibana app id
app: string;
// the path after the application prefix corresponding to this entry
path: string;
// whether to only match when the full path matches, defaults to `false`
matchFullPath?: boolean;
// whether to ignore trailing slashes, defaults to `true`
ignoreTrailingSlash?: boolean;
}
```

A registration might therefore look like the following:

```typescript
// x-pack/plugins/example_plugin/public/plugin.ts
Expand All @@ -29,6 +64,7 @@ export class Plugin implements PluginClass {
label: 'A solution section',
sortKey: 200,
entries: [
{ label: 'Home Page', app: 'exampleA', path: '/', matchFullPath: true },
{ label: 'Example Page', app: 'exampleA', path: '/example' },
{ label: 'Another Example Page', app: 'exampleA', path: '/another-example' },
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ export function ObservabilityPageTemplate({
entry.app === currentAppId &&
matchPath(currentPath, {
path: entry.path,
exact: !!entry.matchFullPath,
strict: !entry.ignoreTrailingSlash,
}) != null;

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,25 @@ import { combineLatest, Observable, ReplaySubject } from 'rxjs';
import { map, scan, shareReplay, switchMap } from 'rxjs/operators';

export interface NavigationSection {
// the label of the section, should be translated
label: string | undefined;
// the key to sort by in ascending order relative to other entries
sortKey: number;
// the entries to render inside the section
entries: NavigationEntry[];
}

export interface NavigationEntry {
// the label of the menu entry, should be translated
label: string;
// the kibana app id
app: string;
// the path after the application prefix corresponding to this entry
path: string;
// whether to only match when the full path matches, defaults to `false`
matchFullPath?: boolean;
// whether to ignore trailing slashes, defaults to `true`
ignoreTrailingSlash?: boolean;
}

export interface NavigationRegistry {
Expand Down