• /
  • Log in
  • Free account

navigation

Usage

import { navigation } from 'nr1'

API methods

navigation.getOpenEntityLocation

Returns a location object that can be used to redirect to an entity in its corresponding launcher (default: Explorer launcher).

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
entityGuid: string //

GUID of the entity to open.

) => Location

Example

1
const entityGuid = 'Mxka102Ak';
2
3
const location = navigation.getOpenEntityLocation(entityGuid);

navigation.getOpenLauncherLocation

Returns a location object that can be used to redirect to a given launcher.

You can also specify nerdlet and stacked nerdlets with given states to be opened in this launcher.

If nerdlet is not specified, the root nerdlet of the given launcher will be opened.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
launcher: Launcher //

Launcher to open.

) => Location

Example 1

1
const launcher = {
2
id: 'nr1-core.explorer',
3
};
4
5
const location = navigation.getOpenLauncherLocation(launcher);

Example 2

1
// You can also specify a nerdlet and stacked nerdlets to be opened.
2
// You can combine artifacts from different nerdpacks.
3
const launcher = {
4
id: '074e8260-fa9c-4d71-f7a0-51835417a423.my-launcher-id',
5
nerdlet: {
6
id: 'nr1-core.listing',
7
},
8
stackedNerdlets: [
9
{
10
id: 'dashboards.list',
11
},
12
],
13
};
14
15
const location = navigation.getOpenLauncherLocation(launcher);

navigation.getOpenNerdletLocation

Returns a location object that can be used to open a given nerdlet with a given state.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
nerdlet: Nerdlet //

Nerdlet to replace current nerdlet with.

) => Location

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
const location = navigation.getOpenNerdletLocation(nerdlet);

Example 2

1
// You can also specify nerdlet's state.
2
const nerdlet = {
3
id: 'dashboards.list',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
const location = navigation.getOpenNerdletLocation(nerdlet);

navigation.getOpenOverlayLocation

Returns a location object that can be used to trigger opening overlay.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
overlay: Overlay //

Overlay you want to open.

) => Location

Example

1
const overlay = {
2
id: 'nr1-core.search',
3
};
4
5
const location = navigation.getOpenOverlayLocation(overlay);

navigation.getOpenStackedEntityLocation

Returns a location object that can be used to trigger opening entity in a stacked nerdlet.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
entityGuid: string //

GUID of the entity to open.

) => Location

Example

1
const entityGuid = 'Mxka102Ak';
2
3
const location = navigation.getOpenStackedEntityLocation(entityGuid);

navigation.getOpenStackedNerdletLocation

Returns a location object that can be used to trigger opening stacked nerdlet with a given state.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
nerdlet: Nerdlet //

Nerdlet to open as stacked nerdlet.

) => Location

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
const location = navigation.getOpenStackedNerdletLocation(nerdlet);

Example 2

1
// You can also specify nerdlet's state.
2
const nerdletWithState = {
3
id: 'dashboards.list',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
const location = navigation.getOpenStackedNerdletLocation(nerdletWithState);

Example 3

1
// If you want to open nerdlet from the current nerdpack then you can omit its nerdpackId.
2
const nerdletWithState = {
3
id: 'my-nerdlet-id',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
const location = navigation.getOpenStackedNerdletLocation(nerdletWithState);

navigation.getReplaceNerdletLocation

Returns a location object that can be used to replace current nerdlet.

Location objects can be passed into <Link to={location}> component to navigate inside the platform.

function (
nerdlet: Nerdlet //

Nerdlet to replace current nerdlet with.

) => Location

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
const location = navigation.getReplaceNerdletLocation(nerdlet);

Example 2

1
// If the nerdlet you want to replace with is in the current nerdpack then you can omit its nerdpackId.
2
const nerdlet = {
3
id: 'my-nerdlet-id',
4
};
5
6
const location = navigation.getReplaceNerdletLocation(nerdlet);

Example 3

1
// You can also specify nerdlet's state.
2
const nerdlet = {
3
id: 'my-nerdlet-id',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
const location = navigation.getReplaceNerdletLocation(nerdlet);

navigation.openEntity

Opens an entity in its corresponding launcher (default: Explorer launcher).

To navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
entityGuid: string, //

GUID of the entity to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => undefined

Example

1
const entityGuid = 'Mxka102Ak';
2
3
navigation.openEntity(entityGuid);

navigation.openLauncher

Opens launcher inside the platform.

You can also specify nerdlet and stacked nerdlets with given states to be opened in this launcher.

If nerdlet is not specified, the root nerdlet of the given launcher will be opened.

If you wish to navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
launcher: Launcher, //

Launcher to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => void

Example 1

1
const launcher = {
2
id: 'nr1-core.explorer',
3
};
4
5
navigation.openLauncher(launcher);

Example 2

1
// You can also specify a nerdlet and stacked nerdlets to be opened.
2
// You can combine artifacts from different nerdpacks.
3
const launcher = {
4
id: '074e8260-fa9c-4d71-f7a0-51835417a423.my-launcher-id',
5
nerdlet: {
6
id: 'nr1-core.listing',
7
},
8
stackedNerdlets: [
9
{
10
id: 'dashboards.list',
11
},
12
],
13
};
14
15
navigation.openLauncher(launcher);

navigation.openNerdlet

Opens a nerdlet in the current launcher.

If nerdlet.urlState is provided, it will be shallow-merged with the initial state of the nerdlet.

If you wish to navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
nerdlet: Nerdlet, //

Nerdlet to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => void

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
navigation.openNerdlet(nerdlet);

Example 2

1
// You can also specify nerdlet's state.
2
const nerdletWithState = {
3
id: 'dashboards.list',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
const location = navigation.getOpenNerdletLocation(nerdletWithState);

navigation.openOverlay

Opens an overlay on top of the current launcher.

If overlay.urlState is provided, it will be shallow-merged with the initial state of the overlay.

If you wish to navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
overlay: Overlay, //

Overlay you want to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => void

Example

1
const overlay = {
2
id: 'nr1-core.search',
3
};
4
5
navigation.openOverlay(overlay);

navigation.openStackedEntity

Opens a stacked nerdlet with entity open in it. If triggered from a stacked nerdlet that is not the last one on the stack, the stacked nerdlet aboves it will be replaced.

To navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
entityGuid: string, //

GUID of the entity to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => undefined

Example

1
// Opens stacked entity.
2
const entityGuid = 'Mxka102Ak';
3
4
navigation.openStackedEntity(entityGuid);

navigation.openStackedNerdlet

Opens a stacked nerdlet with given state above current one.

If triggered from a stacked nerdlet that is not the last one on the stack, the stacked nerdlets above it will be replaced.

If you wish to navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
nerdlet: Nerdlet, //

Nerdlet to open as stacked nerdlet.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => void

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
navigation.openStackedNerdlet(nerdlet);

Example 2

1
// You can also specify nerdlet's state.
2
const nerdletWithState = {
3
id: '074e8260-fa9c-4d71-f7a0-51835417a423.my-nerdlet-id',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
navigation.openStackedNerdlet(nerdlet);

Example 3

1
// If you want to open nerdlet from the current nerdpack then you can omit its nerdpackId.
2
const nerdletWithState = {
3
id: 'my-nerdlet-id',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
navigation.openStackedNerdlet(nerdlet);

navigation.replaceNerdlet

Replaces the nerdlet that is calling this API method.

If you wish to navigate without adding an entry to the browser history, set urlStateOptions.replaceHistory to true.

function (
nerdlet: Nerdlet, //

GUID of the entity to open.

urlStateOptions: UrlStateOptions //

Options for the URL state.

) => void

Example 1

1
const nerdlet = {
2
id: 'dashboards.list',
3
};
4
5
navigation.replaceNerdlet(nerdlet);

Example 2

1
// If the nerdlet you want to replace with is in the current nerdpack then you can omit its nerdpackId.
2
const nerdlet = {
3
id: 'my-nerdlet-id',
4
};
5
6
navigation.replaceNerdlet(nerdlet);

Example 3

1
// You can also specify nerdlet's state.
2
const nerdlet = {
3
id: 'my-nerdlet-id',
4
urlState: {
5
foo: 'bar',
6
},
7
};
8
9
navigation.replaceNerdlet(nerdlet);

Type definitions

Nerdlet

{
id: string, //

Id of the nerdlet. You can specify the full nerdlet id: <nerdpack-id>.<nerdlet-id> (i.e. "8ba28fe4-5362-4f7f-8f9a-4b8c6c39d8a6.my-nerdlet") or simply <nerdlet-id> (i.e. "my-nerdlet"). In the latter case, the nerdlet will be treated as if it belongs to the current nerdpack, meaning that the nerdpack id is automatically added by the platform.

urlState: Object, //

State of the nerdlet which is persisted in the url.

}

UrlStateOptions

{
replaceHistory: boolean, //

If true, the current entry in the browser history will be replaced with the new one.

}

Overlay

{
id: string, //

Id of the overlay to be opened, for example nr1-core.search.

urlState: Object, //

State of the overlay which is persisted in the url.

}

Launcher

{
id: string, //

Id of the launcher, for example nr1-core.explorer.

nerdlet: Nerdlet, //

Nerdlet to be opened in the launcher. If not provided, the root nerdlet of the launcher will be opened.

stackedNerdlets: Nerdlet[], //

Nerdlet to be opened as stacked nerdlets.

}

Location

{
pathname: string, //

String representing the path to link to.

search: string, //

String representing query parameters.

hash: string, //

String to put in the URL as hash, e.g. #entities.

}
Create issueEdit page
Copyright © 2021 New Relic Inc.