@grafana/scenes 5.36.4 → 6.0.0--canary.979.12745482012.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/components/SceneApp/SceneApp.js +6 -6
- package/dist/esm/components/SceneApp/SceneApp.js.map +1 -1
- package/dist/esm/components/SceneApp/SceneAppPage.js +30 -45
- package/dist/esm/components/SceneApp/SceneAppPage.js.map +1 -1
- package/dist/esm/components/SceneApp/SceneAppPageView.js +10 -5
- package/dist/esm/components/SceneApp/SceneAppPageView.js.map +1 -1
- package/dist/esm/components/SceneApp/utils.js +20 -5
- package/dist/esm/components/SceneApp/utils.js.map +1 -1
- package/dist/esm/utils/utils.js.map +1 -1
- package/dist/index.d.ts +125 -129
- package/dist/index.js +62 -54
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { createContext } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { Routes, Route } from 'react-router-dom';
|
|
3
3
|
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
|
|
4
|
-
import { renderSceneComponentWithRouteProps } from './utils.js';
|
|
5
4
|
|
|
6
5
|
class SceneApp extends SceneObjectBase {
|
|
7
6
|
enrichDataRequest() {
|
|
@@ -14,11 +13,12 @@ SceneApp.Component = ({ model }) => {
|
|
|
14
13
|
const { pages } = model.useState();
|
|
15
14
|
return /* @__PURE__ */ React.createElement(SceneAppContext.Provider, {
|
|
16
15
|
value: model
|
|
17
|
-
}, /* @__PURE__ */ React.createElement(
|
|
16
|
+
}, /* @__PURE__ */ React.createElement(Routes, null, pages.map((page) => /* @__PURE__ */ React.createElement(Route, {
|
|
18
17
|
key: page.state.url,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
path: page.state.routePath,
|
|
19
|
+
element: /* @__PURE__ */ React.createElement(page.Component, {
|
|
20
|
+
model: page
|
|
21
|
+
})
|
|
22
22
|
}))));
|
|
23
23
|
};
|
|
24
24
|
const SceneAppContext = createContext(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneApp.js","sources":["../../../../src/components/SceneApp/SceneApp.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { Route,
|
|
1
|
+
{"version":3,"file":"SceneApp.js","sources":["../../../../src/components/SceneApp/SceneApp.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { DataRequestEnricher, SceneComponentProps } from '../../core/types';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneAppState } from './types';\n\n/**\n * Responsible for top level pages routing\n */\nexport class SceneApp extends SceneObjectBase<SceneAppState> implements DataRequestEnricher {\n public enrichDataRequest() {\n return {\n app: this.state.name || 'app',\n };\n }\n\n public static Component = ({ model }: SceneComponentProps<SceneApp>) => {\n const { pages } = model.useState();\n\n return (\n <SceneAppContext.Provider value={model}>\n <Routes>\n {pages.map((page) => (\n <Route key={page.state.url} path={page.state.routePath} element={<page.Component model={page} />} />\n ))}\n </Routes>\n </SceneAppContext.Provider>\n );\n };\n}\n\nexport const SceneAppContext = createContext<SceneApp | null>(null);\n\nconst sceneAppCache = new Map<object, SceneApp>();\n\n/**\n * Caches the the resulting SceneApp returned by the factory function so that it's only called once during the lifetime of the browser tab\n */\nexport function useSceneApp(factory: () => SceneApp) {\n const cachedApp = sceneAppCache.get(factory);\n\n if (cachedApp) {\n return cachedApp;\n }\n\n const newApp = factory();\n sceneAppCache.set(factory, newApp);\n\n return newApp;\n}\n"],"names":[],"mappings":";;;;AAUO,MAAM,iBAAiB,eAA8D,CAAA;AAAA,EACnF,iBAAoB,GAAA;AACzB,IAAO,OAAA;AAAA,MACL,GAAA,EAAK,IAAK,CAAA,KAAA,CAAM,IAAQ,IAAA,KAAA;AAAA,KAC1B,CAAA;AAAA,GACF;AAeF,CAAA;AApBa,QAAA,CAOG,SAAY,GAAA,CAAC,EAAE,KAAA,EAA2C,KAAA;AACtE,EAAA,MAAM,EAAE,KAAA,EAAU,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEjC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,KAAA;AAAA,GAAA,sCAC9B,MACE,EAAA,IAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,yBACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,GAAA,EAAK,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,IAAA,EAAM,KAAK,KAAM,CAAA,SAAA;AAAA,IAAW,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,SAAL,EAAA;AAAA,MAAe,KAAO,EAAA,IAAA;AAAA,KAAM,CAAA;AAAA,GAAI,CACnG,CACH,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAGW,MAAA,eAAA,GAAkB,cAA+B,IAAI,EAAA;AAElE,MAAM,aAAA,uBAAoB,GAAsB,EAAA,CAAA;AAKzC,SAAS,YAAY,OAAyB,EAAA;AACnD,EAAM,MAAA,SAAA,GAAY,aAAc,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AAE3C,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,SAAS,OAAQ,EAAA,CAAA;AACvB,EAAc,aAAA,CAAA,GAAA,CAAI,SAAS,MAAM,CAAA,CAAA;AAEjC,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Route,
|
|
2
|
+
import { Route, Routes } from 'react-router-dom';
|
|
3
3
|
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
|
|
4
4
|
import { isDataRequestEnricher } from '../../core/types.js';
|
|
5
5
|
import { EmbeddedScene } from '../EmbeddedScene.js';
|
|
6
6
|
import { SceneFlexLayout, SceneFlexItem } from '../layout/SceneFlexLayout.js';
|
|
7
7
|
import { SceneReactObject } from '../SceneReactObject.js';
|
|
8
8
|
import { SceneAppDrilldownViewRender, SceneAppPageView } from './SceneAppPageView.js';
|
|
9
|
-
import { renderSceneComponentWithRouteProps } from './utils.js';
|
|
10
9
|
|
|
11
10
|
class SceneAppPage extends SceneObjectBase {
|
|
12
11
|
constructor(state) {
|
|
@@ -53,42 +52,40 @@ class SceneAppPage extends SceneObjectBase {
|
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
SceneAppPage.Component = SceneAppPageRenderer;
|
|
56
|
-
function SceneAppPageRenderer({ model
|
|
57
|
-
var _a, _b;
|
|
55
|
+
function SceneAppPageRenderer({ model }) {
|
|
58
56
|
const { tabs, drilldowns } = model.useState();
|
|
59
57
|
const routes = [];
|
|
58
|
+
routes.push(getFallbackRoute(model));
|
|
60
59
|
if (tabs && tabs.length > 0) {
|
|
61
60
|
for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
|
|
62
61
|
const tab = tabs[tabIndex];
|
|
63
62
|
if (tabIndex === 0) {
|
|
64
|
-
routes.push(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
render: (props) => renderSceneComponentWithRouteProps(tab, props)
|
|
63
|
+
routes.push(/* @__PURE__ */ React.createElement(Route, {
|
|
64
|
+
key: model.state.routePath,
|
|
65
|
+
path: "",
|
|
66
|
+
element: /* @__PURE__ */ React.createElement(tab.Component, {
|
|
67
|
+
model: tab
|
|
70
68
|
})
|
|
71
|
-
);
|
|
69
|
+
}));
|
|
72
70
|
}
|
|
73
71
|
routes.push(
|
|
74
72
|
/* @__PURE__ */ React.createElement(Route, {
|
|
75
|
-
exact: true,
|
|
76
73
|
key: tab.state.url,
|
|
77
|
-
path:
|
|
78
|
-
|
|
74
|
+
path: tab.state.routePath,
|
|
75
|
+
element: /* @__PURE__ */ React.createElement(tab.Component, {
|
|
76
|
+
model: tab
|
|
77
|
+
})
|
|
79
78
|
})
|
|
80
79
|
);
|
|
81
80
|
if (tab.state.drilldowns) {
|
|
82
81
|
for (const drilldown of tab.state.drilldowns) {
|
|
83
82
|
routes.push(
|
|
84
83
|
/* @__PURE__ */ React.createElement(Route, {
|
|
85
|
-
exact: false,
|
|
86
84
|
key: drilldown.routePath,
|
|
87
85
|
path: drilldown.routePath,
|
|
88
|
-
|
|
86
|
+
element: /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, {
|
|
89
87
|
drilldown,
|
|
90
|
-
parent: tab
|
|
91
|
-
routeProps: props
|
|
88
|
+
parent: tab
|
|
92
89
|
})
|
|
93
90
|
})
|
|
94
91
|
);
|
|
@@ -101,51 +98,39 @@ function SceneAppPageRenderer({ model, routeProps }) {
|
|
|
101
98
|
routes.push(
|
|
102
99
|
/* @__PURE__ */ React.createElement(Route, {
|
|
103
100
|
key: drilldown.routePath,
|
|
104
|
-
exact: false,
|
|
105
101
|
path: drilldown.routePath,
|
|
106
|
-
|
|
102
|
+
Component: () => /* @__PURE__ */ React.createElement(SceneAppDrilldownViewRender, {
|
|
107
103
|
drilldown,
|
|
108
|
-
parent: model
|
|
109
|
-
routeProps: props
|
|
104
|
+
parent: model
|
|
110
105
|
})
|
|
111
106
|
})
|
|
112
107
|
);
|
|
113
108
|
}
|
|
114
109
|
}
|
|
115
|
-
if (!tabs
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
110
|
+
if (!tabs) {
|
|
111
|
+
routes.push(/* @__PURE__ */ React.createElement(Route, {
|
|
112
|
+
key: "home route",
|
|
113
|
+
path: "/",
|
|
114
|
+
element: /* @__PURE__ */ React.createElement(SceneAppPageView, {
|
|
115
|
+
page: model
|
|
116
|
+
})
|
|
117
|
+
}));
|
|
120
118
|
}
|
|
121
|
-
|
|
122
|
-
return /* @__PURE__ */ React.createElement(Switch, null, routes);
|
|
119
|
+
return /* @__PURE__ */ React.createElement(Routes, null, routes);
|
|
123
120
|
}
|
|
124
|
-
function getFallbackRoute(page
|
|
121
|
+
function getFallbackRoute(page) {
|
|
125
122
|
return /* @__PURE__ */ React.createElement(Route, {
|
|
126
123
|
key: "fallback route",
|
|
127
|
-
|
|
124
|
+
path: "*",
|
|
125
|
+
Component: () => {
|
|
128
126
|
var _a, _b, _c;
|
|
129
127
|
const fallbackPage = (_c = (_b = (_a = page.state).getFallbackPage) == null ? void 0 : _b.call(_a)) != null ? _c : getDefaultFallbackPage();
|
|
130
128
|
return /* @__PURE__ */ React.createElement(SceneAppPageView, {
|
|
131
|
-
page: fallbackPage
|
|
132
|
-
routeProps
|
|
129
|
+
page: fallbackPage
|
|
133
130
|
});
|
|
134
131
|
}
|
|
135
132
|
});
|
|
136
133
|
}
|
|
137
|
-
function isCurrentPageRouteMatch(page, match) {
|
|
138
|
-
if (!match.isExact) {
|
|
139
|
-
return false;
|
|
140
|
-
}
|
|
141
|
-
if (match.url === page.state.url) {
|
|
142
|
-
return true;
|
|
143
|
-
}
|
|
144
|
-
if (page.parent instanceof SceneAppPage && page.parent.state.tabs[0] === page && page.parent.state.url === match.url) {
|
|
145
|
-
return true;
|
|
146
|
-
}
|
|
147
|
-
return false;
|
|
148
|
-
}
|
|
149
134
|
function getDefaultFallbackPage() {
|
|
150
135
|
return new SceneAppPage({
|
|
151
136
|
url: "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneAppPage.js","sources":["../../../../src/components/SceneApp/SceneAppPage.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, RouteComponentProps, Switch } from 'react-router-dom';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, isDataRequestEnricher } from '../../core/types';\nimport { EmbeddedScene } from '../EmbeddedScene';\nimport { SceneFlexItem, SceneFlexLayout } from '../layout/SceneFlexLayout';\nimport { SceneReactObject } from '../SceneReactObject';\nimport { SceneAppDrilldownViewRender, SceneAppPageView } from './SceneAppPageView';\nimport { SceneAppDrilldownView, SceneAppPageLike, SceneAppPageState, SceneRouteMatch } from './types';\nimport { renderSceneComponentWithRouteProps } from './utils';\n\n/**\n * Responsible for page's drilldown & tabs routing\n */\nexport class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements SceneAppPageLike {\n public static Component = SceneAppPageRenderer;\n private _sceneCache = new Map<string, EmbeddedScene>();\n private _drilldownCache = new Map<string, SceneAppPageLike>();\n\n public constructor(state: SceneAppPageState) {\n super(state);\n }\n\n public initializeScene(scene: EmbeddedScene) {\n this.setState({ initializedScene: scene });\n }\n\n public getScene(routeMatch: SceneRouteMatch): EmbeddedScene {\n let scene = this._sceneCache.get(routeMatch.url);\n\n if (scene) {\n return scene;\n }\n\n if (!this.state.getScene) {\n throw new Error('Missing getScene on SceneAppPage ' + this.state.title);\n }\n\n scene = this.state.getScene(routeMatch);\n this._sceneCache.set(routeMatch.url, scene);\n\n return scene;\n }\n\n public getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike {\n let page = this._drilldownCache.get(routeMatch!.url);\n if (page) {\n return page;\n }\n\n page = drilldown.getPage(routeMatch, this);\n this._drilldownCache.set(routeMatch!.url, page);\n\n return page;\n }\n\n public enrichDataRequest(source: SceneObject) {\n if (this.state.getParentPage) {\n return this.state.getParentPage().enrichDataRequest(source);\n }\n\n if (!this.parent) {\n return null;\n }\n\n const root = this.getRoot();\n\n if (isDataRequestEnricher(root)) {\n return root.enrichDataRequest(source);\n }\n\n return null;\n }\n}\n\nexport interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppPage> {\n routeProps: RouteComponentProps;\n}\n\nfunction SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps) {\n const { tabs, drilldowns } = model.useState();\n const routes: React.ReactNode[] = [];\n\n if (tabs && tabs.length > 0) {\n for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {\n const tab = tabs[tabIndex];\n\n // Add first tab as a default route, this makes it possible for the first tab to render with the url of the parent page\n if (tabIndex === 0) {\n routes.push(\n <Route\n exact={true}\n key={model.state.url}\n path={model.state.routePath ?? model.state.url}\n render={(props) => renderSceneComponentWithRouteProps(tab, props)}\n ></Route>\n );\n }\n\n routes.push(\n <Route\n exact={true}\n key={tab.state.url}\n path={tab.state.routePath ?? tab.state.url}\n render={(props) => renderSceneComponentWithRouteProps(tab, props)}\n ></Route>\n );\n\n if (tab.state.drilldowns) {\n for (const drilldown of tab.state.drilldowns) {\n routes.push(\n <Route\n exact={false}\n key={drilldown.routePath}\n path={drilldown.routePath}\n render={(props) => <SceneAppDrilldownViewRender drilldown={drilldown} parent={tab} routeProps={props} />}\n ></Route>\n );\n }\n }\n }\n }\n\n if (drilldowns) {\n for (const drilldown of drilldowns) {\n routes.push(\n <Route\n key={drilldown.routePath}\n exact={false}\n path={drilldown.routePath}\n render={(props) => <SceneAppDrilldownViewRender drilldown={drilldown} parent={model} routeProps={props} />}\n ></Route>\n );\n }\n }\n\n if (!tabs && isCurrentPageRouteMatch(model, routeProps.match)) {\n return <SceneAppPageView page={model} routeProps={routeProps} />;\n }\n\n routes.push(getFallbackRoute(model, routeProps));\n\n return <Switch>{routes}</Switch>;\n}\n\nfunction getFallbackRoute(page: SceneAppPage, routeProps: RouteComponentProps) {\n return (\n <Route\n key={'fallback route'}\n render={(props) => {\n const fallbackPage = page.state.getFallbackPage?.() ?? getDefaultFallbackPage();\n return <SceneAppPageView page={fallbackPage} routeProps={routeProps} />;\n }}\n ></Route>\n );\n}\n\nfunction isCurrentPageRouteMatch(page: SceneAppPage, match: SceneRouteMatch) {\n if (!match.isExact) {\n return false;\n }\n\n // current page matches the route url\n if (match.url === page.state.url) {\n return true;\n }\n\n // check if we are a tab and the first tab, then we should also render on the parent url\n if (\n page.parent instanceof SceneAppPage &&\n page.parent.state.tabs![0] === page &&\n page.parent.state.url === match.url\n ) {\n return true;\n }\n\n return false;\n}\n\nfunction getDefaultFallbackPage() {\n return new SceneAppPage({\n url: '',\n title: 'Not found',\n subTitle: 'The url did not match any page',\n getScene: () => {\n return new EmbeddedScene({\n body: new SceneFlexLayout({\n direction: 'column',\n children: [\n new SceneFlexItem({\n body: new SceneReactObject({\n component: () => {\n return (\n <div data-testid=\"default-fallback-content\">\n If you found your way here using a link then there might be a bug in this application.\n </div>\n );\n },\n }),\n }),\n ],\n }),\n });\n },\n });\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneAppPage.js","sources":["../../../../src/components/SceneApp/SceneAppPage.tsx"],"sourcesContent":["import React from 'react';\nimport { Route, Routes } from 'react-router-dom';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, isDataRequestEnricher } from '../../core/types';\nimport { EmbeddedScene } from '../EmbeddedScene';\nimport { SceneFlexItem, SceneFlexLayout } from '../layout/SceneFlexLayout';\nimport { SceneReactObject } from '../SceneReactObject';\nimport { SceneAppDrilldownViewRender, SceneAppPageView } from './SceneAppPageView';\nimport { SceneAppDrilldownView, SceneAppPageLike, SceneAppPageState, SceneRouteMatch } from './types';\n\n/**\n * Responsible for page's drilldown & tabs routing\n */\nexport class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements SceneAppPageLike {\n public static Component = SceneAppPageRenderer;\n private _sceneCache = new Map<string, EmbeddedScene>();\n private _drilldownCache = new Map<string, SceneAppPageLike>();\n\n public constructor(state: SceneAppPageState) {\n super(state);\n }\n\n public initializeScene(scene: EmbeddedScene) {\n this.setState({ initializedScene: scene });\n }\n\n public getScene(routeMatch: SceneRouteMatch): EmbeddedScene {\n let scene = this._sceneCache.get(routeMatch.url);\n\n if (scene) {\n return scene;\n }\n\n if (!this.state.getScene) {\n throw new Error('Missing getScene on SceneAppPage ' + this.state.title);\n }\n\n scene = this.state.getScene(routeMatch);\n this._sceneCache.set(routeMatch.url, scene);\n\n return scene;\n }\n\n public getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike {\n let page = this._drilldownCache.get(routeMatch!.url);\n if (page) {\n return page;\n }\n\n page = drilldown.getPage(routeMatch, this);\n this._drilldownCache.set(routeMatch!.url, page);\n\n return page;\n }\n\n public enrichDataRequest(source: SceneObject) {\n if (this.state.getParentPage) {\n return this.state.getParentPage().enrichDataRequest(source);\n }\n\n if (!this.parent) {\n return null;\n }\n\n const root = this.getRoot();\n\n if (isDataRequestEnricher(root)) {\n return root.enrichDataRequest(source);\n }\n\n return null;\n }\n}\nfunction SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>) {\n const { tabs, drilldowns } = model.useState();\n const routes: React.ReactNode[] = [];\n\n routes.push(getFallbackRoute(model));\n\n if (tabs && tabs.length > 0) {\n for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {\n const tab = tabs[tabIndex];\n\n // Add first tab as a default route, this makes it possible for the first tab to render with the url of the parent page\n if (tabIndex === 0) {\n routes.push(<Route key={model.state.routePath} path=\"\" element={<tab.Component model={tab} />}></Route>);\n }\n\n routes.push(\n <Route key={tab.state.url} path={tab.state.routePath} element={<tab.Component model={tab} />}></Route>\n );\n\n if (tab.state.drilldowns) {\n for (const drilldown of tab.state.drilldowns) {\n routes.push(\n <Route\n key={drilldown.routePath}\n path={drilldown.routePath}\n element={<SceneAppDrilldownViewRender drilldown={drilldown} parent={tab} />}\n ></Route>\n );\n }\n }\n }\n }\n\n if (drilldowns) {\n for (const drilldown of drilldowns) {\n routes.push(\n <Route\n key={drilldown.routePath}\n path={drilldown.routePath}\n Component={() => <SceneAppDrilldownViewRender drilldown={drilldown} parent={model} />}\n ></Route>\n );\n }\n }\n\n if (!tabs) {\n routes.push(<Route key=\"home route\" path=\"/\" element={<SceneAppPageView page={model} />}></Route>);\n }\n\n return <Routes>{routes}</Routes>;\n}\n\nfunction getFallbackRoute(page: SceneAppPage) {\n return (\n <Route\n key={'fallback route'}\n path=\"*\"\n Component={() => {\n const fallbackPage = page.state.getFallbackPage?.() ?? getDefaultFallbackPage();\n return <SceneAppPageView page={fallbackPage} />;\n }}\n ></Route>\n );\n}\n\nfunction getDefaultFallbackPage() {\n return new SceneAppPage({\n url: '',\n title: 'Not found',\n subTitle: 'The url did not match any page',\n getScene: () => {\n return new EmbeddedScene({\n body: new SceneFlexLayout({\n direction: 'column',\n children: [\n new SceneFlexItem({\n body: new SceneReactObject({\n component: () => {\n return (\n <div data-testid=\"default-fallback-content\">\n If you found your way here using a link then there might be a bug in this application.\n </div>\n );\n },\n }),\n }),\n ],\n }),\n });\n },\n });\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -2,16 +2,17 @@ import { PluginPage } from '@grafana/runtime';
|
|
|
2
2
|
import React, { useContext, useLayoutEffect, useEffect } from 'react';
|
|
3
3
|
import { SceneDebugger } from '../SceneDebugger/SceneDebugger.js';
|
|
4
4
|
import { SceneAppPage } from './SceneAppPage.js';
|
|
5
|
-
import { useAppQueryParams, getUrlWithAppState
|
|
5
|
+
import { useSceneRouteMatch, useAppQueryParams, getUrlWithAppState } from './utils.js';
|
|
6
6
|
import { useUrlSync } from '../../services/useUrlSync.js';
|
|
7
7
|
import { SceneAppContext } from './SceneApp.js';
|
|
8
8
|
import { useLocationServiceSafe } from '../../utils/utils.js';
|
|
9
9
|
|
|
10
|
-
function SceneAppPageView({ page
|
|
10
|
+
function SceneAppPageView({ page }) {
|
|
11
|
+
const routeMatch = useSceneRouteMatch(page.state.url);
|
|
11
12
|
const containerPage = getParentPageIfTab(page);
|
|
12
13
|
const containerState = containerPage.useState();
|
|
13
14
|
const params = useAppQueryParams();
|
|
14
|
-
const scene = page.getScene(
|
|
15
|
+
const scene = page.getScene(routeMatch);
|
|
15
16
|
const appContext = useContext(SceneAppContext);
|
|
16
17
|
const isInitialized = containerState.initializedScene === scene;
|
|
17
18
|
const { layout } = page.state;
|
|
@@ -96,8 +97,12 @@ function getParentBreadcrumbs(parent, params, searchObject) {
|
|
|
96
97
|
}
|
|
97
98
|
return void 0;
|
|
98
99
|
}
|
|
99
|
-
function SceneAppDrilldownViewRender({ drilldown, parent
|
|
100
|
-
|
|
100
|
+
function SceneAppDrilldownViewRender({ drilldown, parent }) {
|
|
101
|
+
const routeMatch = useSceneRouteMatch(drilldown.routePath);
|
|
102
|
+
const page = parent.getDrilldownPage(drilldown, routeMatch);
|
|
103
|
+
return /* @__PURE__ */ React.createElement(page.Component, {
|
|
104
|
+
model: page
|
|
105
|
+
});
|
|
101
106
|
}
|
|
102
107
|
|
|
103
108
|
export { SceneAppDrilldownViewRender, SceneAppPageView };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneAppPageView.js","sources":["../../../../src/components/SceneApp/SceneAppPageView.tsx"],"sourcesContent":["import { NavModelItem, UrlQueryMap } from '@grafana/data';\nimport { PluginPage } from '@grafana/runtime';\nimport React, { useContext, useEffect, useLayoutEffect } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"SceneAppPageView.js","sources":["../../../../src/components/SceneApp/SceneAppPageView.tsx"],"sourcesContent":["import { NavModelItem, UrlQueryMap } from '@grafana/data';\nimport { PluginPage } from '@grafana/runtime';\nimport React, { useContext, useEffect, useLayoutEffect } from 'react';\n\nimport { SceneObject } from '../../core/types';\nimport { SceneDebugger } from '../SceneDebugger/SceneDebugger';\nimport { SceneAppPage } from './SceneAppPage';\nimport { SceneAppDrilldownView, SceneAppPageLike } from './types';\nimport { getUrlWithAppState, useAppQueryParams, useSceneRouteMatch } from './utils';\nimport { useUrlSync } from '../../services/useUrlSync';\nimport { SceneAppContext } from './SceneApp';\nimport { useLocationServiceSafe } from '../../utils/utils';\n\nexport interface Props {\n page: SceneAppPageLike;\n}\n\nexport function SceneAppPageView({ page }: Props) {\n const routeMatch = useSceneRouteMatch(page.state.url);\n const containerPage = getParentPageIfTab(page);\n const containerState = containerPage.useState();\n const params = useAppQueryParams();\n const scene = page.getScene(routeMatch);\n const appContext = useContext(SceneAppContext);\n const isInitialized = containerState.initializedScene === scene;\n const { layout } = page.state;\n const locationService = useLocationServiceSafe();\n\n useLayoutEffect(() => {\n // Before rendering scene components, we are making sure the URL sync is enabled for.\n if (!isInitialized) {\n containerPage.initializeScene(scene);\n }\n }, [scene, containerPage, isInitialized]);\n\n useEffect(() => {\n // Clear initializedScene when unmounting\n return () => containerPage.setState({ initializedScene: undefined });\n }, [containerPage]);\n\n const urlSyncInitialized = useUrlSync(containerPage, appContext?.state.urlSyncOptions);\n\n if (!isInitialized && !urlSyncInitialized) {\n return null;\n }\n\n const pageNav: NavModelItem = {\n text: containerState.title,\n img: containerState.titleImg,\n icon: containerState.titleIcon,\n url: getUrlWithAppState(containerState.url, locationService.getSearchObject(), containerState.preserveUrlKeys),\n hideFromBreadcrumbs: containerState.hideFromBreadcrumbs,\n parentItem: getParentBreadcrumbs(\n containerState.getParentPage ? containerState.getParentPage() : containerPage.parent,\n params,\n locationService.getSearchObject()\n ),\n };\n\n if (containerState.tabs) {\n pageNav.children = containerState.tabs.map((tab) => {\n return {\n text: tab.state.title,\n icon: tab.state.titleIcon,\n tabSuffix: tab.state.tabSuffix,\n active: page === tab,\n url: getUrlWithAppState(tab.state.url, locationService.getSearchObject(), tab.state.preserveUrlKeys),\n parentItem: pageNav,\n };\n });\n }\n\n let pageActions: React.ReactNode[] = [];\n if (containerState.controls) {\n pageActions = containerState.controls.map((control) => (\n <control.Component model={control} key={control.state.key} />\n ));\n }\n\n if (params['scene-debugger']) {\n pageActions.push(<SceneDebugger scene={containerPage} key={'scene-debugger'} />);\n }\n\n return (\n <PluginPage\n layout={layout}\n pageNav={pageNav}\n actions={pageActions}\n renderTitle={containerState.renderTitle}\n subTitle={containerState.subTitle}\n >\n <scene.Component model={scene} />\n </PluginPage>\n );\n}\n\n/**\n * For pages that are \"tabs\" this will return the parent page\n */\nfunction getParentPageIfTab(page: SceneAppPageLike) {\n if (page.parent instanceof SceneAppPage) {\n return page.parent;\n }\n\n return page;\n}\n\nfunction getParentBreadcrumbs(\n parent: SceneObject | undefined,\n params: UrlQueryMap,\n searchObject: UrlQueryMap\n): NavModelItem | undefined {\n if (parent instanceof SceneAppPage) {\n return {\n text: parent.state.title,\n url: getUrlWithAppState(parent.state.url, searchObject, parent.state.preserveUrlKeys),\n hideFromBreadcrumbs: parent.state.hideFromBreadcrumbs,\n parentItem: getParentBreadcrumbs(\n parent.state.getParentPage ? parent.state.getParentPage() : parent.parent,\n params,\n searchObject\n ),\n };\n }\n\n return undefined;\n}\n\nexport interface SceneAppDrilldownViewRenderProps {\n drilldown: SceneAppDrilldownView;\n parent: SceneAppPageLike;\n}\n\nexport function SceneAppDrilldownViewRender({ drilldown, parent }: SceneAppDrilldownViewRenderProps) {\n const routeMatch = useSceneRouteMatch(drilldown.routePath!);\n const page = parent.getDrilldownPage(drilldown, routeMatch);\n return <page.Component model={page} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBgB,SAAA,gBAAA,CAAiB,EAAE,IAAA,EAAe,EAAA;AAChD,EAAA,MAAM,UAAa,GAAA,kBAAA,CAAmB,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACpD,EAAM,MAAA,aAAA,GAAgB,mBAAmB,IAAI,CAAA,CAAA;AAC7C,EAAM,MAAA,cAAA,GAAiB,cAAc,QAAS,EAAA,CAAA;AAC9C,EAAA,MAAM,SAAS,iBAAkB,EAAA,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAK,CAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AACtC,EAAM,MAAA,UAAA,GAAa,WAAW,eAAe,CAAA,CAAA;AAC7C,EAAM,MAAA,aAAA,GAAgB,eAAe,gBAAqB,KAAA,KAAA,CAAA;AAC1D,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AACxB,EAAA,MAAM,kBAAkB,sBAAuB,EAAA,CAAA;AAE/C,EAAA,eAAA,CAAgB,MAAM;AAEpB,IAAA,IAAI,CAAC,aAAe,EAAA;AAClB,MAAA,aAAA,CAAc,gBAAgB,KAAK,CAAA,CAAA;AAAA,KACrC;AAAA,GACC,EAAA,CAAC,KAAO,EAAA,aAAA,EAAe,aAAa,CAAC,CAAA,CAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,OAAO,MAAM,aAAc,CAAA,QAAA,CAAS,EAAE,gBAAA,EAAkB,QAAW,CAAA,CAAA;AAAA,GACrE,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,EAAA,MAAM,kBAAqB,GAAA,UAAA,CAAW,aAAe,EAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,MAAM,cAAc,CAAA,CAAA;AAErF,EAAI,IAAA,CAAC,aAAiB,IAAA,CAAC,kBAAoB,EAAA;AACzC,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAwB,GAAA;AAAA,IAC5B,MAAM,cAAe,CAAA,KAAA;AAAA,IACrB,KAAK,cAAe,CAAA,QAAA;AAAA,IACpB,MAAM,cAAe,CAAA,SAAA;AAAA,IACrB,GAAA,EAAK,mBAAmB,cAAe,CAAA,GAAA,EAAK,gBAAgB,eAAgB,EAAA,EAAG,eAAe,eAAe,CAAA;AAAA,IAC7G,qBAAqB,cAAe,CAAA,mBAAA;AAAA,IACpC,UAAY,EAAA,oBAAA;AAAA,MACV,cAAe,CAAA,aAAA,GAAgB,cAAe,CAAA,aAAA,KAAkB,aAAc,CAAA,MAAA;AAAA,MAC9E,MAAA;AAAA,MACA,gBAAgB,eAAgB,EAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,eAAe,IAAM,EAAA;AACvB,IAAA,OAAA,CAAQ,QAAW,GAAA,cAAA,CAAe,IAAK,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AAClD,MAAO,OAAA;AAAA,QACL,IAAA,EAAM,IAAI,KAAM,CAAA,KAAA;AAAA,QAChB,IAAA,EAAM,IAAI,KAAM,CAAA,SAAA;AAAA,QAChB,SAAA,EAAW,IAAI,KAAM,CAAA,SAAA;AAAA,QACrB,QAAQ,IAAS,KAAA,GAAA;AAAA,QACjB,GAAA,EAAK,kBAAmB,CAAA,GAAA,CAAI,KAAM,CAAA,GAAA,EAAK,gBAAgB,eAAgB,EAAA,EAAG,GAAI,CAAA,KAAA,CAAM,eAAe,CAAA;AAAA,QACnG,UAAY,EAAA,OAAA;AAAA,OACd,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,IAAI,cAAiC,EAAC,CAAA;AACtC,EAAA,IAAI,eAAe,QAAU,EAAA;AAC3B,IAAA,WAAA,GAAc,eAAe,QAAS,CAAA,GAAA,CAAI,CAAC,OACzC,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,MAAkB,KAAO,EAAA,OAAA;AAAA,MAAS,GAAA,EAAK,QAAQ,KAAM,CAAA,GAAA;AAAA,KAAK,CAC5D,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,IAAI,OAAO,gBAAmB,CAAA,EAAA;AAC5B,IAAA,WAAA,CAAY,qBAAM,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MAAc,KAAO,EAAA,aAAA;AAAA,MAAe,GAAK,EAAA,gBAAA;AAAA,KAAkB,CAAE,CAAA,CAAA;AAAA,GACjF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,aAAa,cAAe,CAAA,WAAA;AAAA,IAC5B,UAAU,cAAe,CAAA,QAAA;AAAA,GAEzB,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,SAAN,EAAA;AAAA,IAAgB,KAAO,EAAA,KAAA;AAAA,GAAO,CACjC,CAAA,CAAA;AAEJ,CAAA;AAKA,SAAS,mBAAmB,IAAwB,EAAA;AAClD,EAAI,IAAA,IAAA,CAAK,kBAAkB,YAAc,EAAA;AACvC,IAAA,OAAO,IAAK,CAAA,MAAA,CAAA;AAAA,GACd;AAEA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEA,SAAS,oBAAA,CACP,MACA,EAAA,MAAA,EACA,YAC0B,EAAA;AAC1B,EAAA,IAAI,kBAAkB,YAAc,EAAA;AAClC,IAAO,OAAA;AAAA,MACL,IAAA,EAAM,OAAO,KAAM,CAAA,KAAA;AAAA,MACnB,GAAA,EAAK,mBAAmB,MAAO,CAAA,KAAA,CAAM,KAAK,YAAc,EAAA,MAAA,CAAO,MAAM,eAAe,CAAA;AAAA,MACpF,mBAAA,EAAqB,OAAO,KAAM,CAAA,mBAAA;AAAA,MAClC,UAAY,EAAA,oBAAA;AAAA,QACV,OAAO,KAAM,CAAA,aAAA,GAAgB,OAAO,KAAM,CAAA,aAAA,KAAkB,MAAO,CAAA,MAAA;AAAA,QACnE,MAAA;AAAA,QACA,YAAA;AAAA,OACF;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,KAAA,CAAA,CAAA;AACT,CAAA;AAOO,SAAS,2BAA4B,CAAA,EAAE,SAAW,EAAA,MAAA,EAA4C,EAAA;AACnG,EAAM,MAAA,UAAA,GAAa,kBAAmB,CAAA,SAAA,CAAU,SAAU,CAAA,CAAA;AAC1D,EAAA,MAAM,IAAO,GAAA,MAAA,CAAO,gBAAiB,CAAA,SAAA,EAAW,UAAU,CAAA,CAAA;AAC1D,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,GAAM,CAAA,CAAA;AACtC;;;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useLocation } from 'react-router-dom';
|
|
1
|
+
import { useLocation, useParams, matchPath } from 'react-router-dom';
|
|
3
2
|
import { urlUtil, locationUtil } from '@grafana/data';
|
|
4
3
|
import { locationSearchToObject } from '@grafana/runtime';
|
|
5
4
|
|
|
@@ -34,9 +33,25 @@ function getUrlWithAppState(path, searchObject, preserveParams) {
|
|
|
34
33
|
}
|
|
35
34
|
return urlUtil.renderUrl(locationUtil.assureBaseUrl(path), paramsCopy);
|
|
36
35
|
}
|
|
37
|
-
function
|
|
38
|
-
|
|
36
|
+
function useSceneRouteMatch(path) {
|
|
37
|
+
const params = useParams();
|
|
38
|
+
const location = useLocation();
|
|
39
|
+
const isExact = matchPath(
|
|
40
|
+
{
|
|
41
|
+
path,
|
|
42
|
+
caseSensitive: false,
|
|
43
|
+
end: true
|
|
44
|
+
},
|
|
45
|
+
location.pathname
|
|
46
|
+
);
|
|
47
|
+
const match = {
|
|
48
|
+
params,
|
|
49
|
+
isExact: isExact !== null,
|
|
50
|
+
path: location.pathname,
|
|
51
|
+
url: location.pathname
|
|
52
|
+
};
|
|
53
|
+
return match;
|
|
39
54
|
}
|
|
40
55
|
|
|
41
|
-
export { getUrlWithAppState,
|
|
56
|
+
export { getUrlWithAppState, useAppQueryParams, useSceneRouteMatch };
|
|
42
57
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/SceneApp/utils.ts"],"sourcesContent":["import { matchPath, useLocation, useParams } from 'react-router-dom';\nimport { UrlQueryMap, locationUtil, urlUtil } from '@grafana/data';\nimport { locationSearchToObject } from '@grafana/runtime';\nimport { SceneRouteMatch } from './types';\n\nexport function useAppQueryParams(): UrlQueryMap {\n const location = useLocation();\n return locationSearchToObject(location.search || '');\n}\n\n/**\n *\n * @param path Url to append query params to\n * @param searchObject Query params of the URL\n * @param preserveParams Query params to preserve\n * @returns Url with query params\n */\nexport function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string {\n // make a copy of params as the renderUrl function mutates the object\n const paramsCopy = { ...searchObject };\n\n if (preserveParams) {\n for (const key of Object.keys(paramsCopy)) {\n // if param is not in preserveParams, remove it\n if (!preserveParams.includes(key)) {\n delete paramsCopy[key];\n }\n }\n }\n\n return urlUtil.renderUrl(locationUtil.assureBaseUrl(path), paramsCopy);\n}\n\nexport function useSceneRouteMatch(path: string) {\n const params = useParams();\n const location = useLocation();\n const isExact = matchPath(\n {\n path,\n caseSensitive: false,\n end: true,\n },\n location.pathname\n );\n\n const match: SceneRouteMatch = {\n params,\n isExact: isExact !== null,\n path: location.pathname,\n url: location.pathname,\n };\n\n return match;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAKO,SAAS,iBAAiC,GAAA;AAC/C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAO,OAAA,sBAAA,CAAuB,QAAS,CAAA,MAAA,IAAU,EAAE,CAAA,CAAA;AACrD,CAAA;AASgB,SAAA,kBAAA,CAAmB,IAAc,EAAA,YAAA,EAA2B,cAAmC,EAAA;AAE7G,EAAA,MAAM,aAAa,cAAK,CAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AAExB,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAA,KAAA,MAAW,GAAO,IAAA,MAAA,CAAO,IAAK,CAAA,UAAU,CAAG,EAAA;AAEzC,MAAA,IAAI,CAAC,cAAA,CAAe,QAAS,CAAA,GAAG,CAAG,EAAA;AACjC,QAAA,OAAO,UAAW,CAAA,GAAA,CAAA,CAAA;AAAA,OACpB;AAAA,KACF;AAAA,GACF;AAEA,EAAA,OAAO,QAAQ,SAAU,CAAA,YAAA,CAAa,aAAc,CAAA,IAAI,GAAG,UAAU,CAAA,CAAA;AACvE,CAAA;AAEO,SAAS,mBAAmB,IAAc,EAAA;AAC/C,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,OAAU,GAAA,SAAA;AAAA,IACd;AAAA,MACE,IAAA;AAAA,MACA,aAAe,EAAA,KAAA;AAAA,MACf,GAAK,EAAA,IAAA;AAAA,KACP;AAAA,IACA,QAAS,CAAA,QAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,KAAyB,GAAA;AAAA,IAC7B,MAAA;AAAA,IACA,SAAS,OAAY,KAAA,IAAA;AAAA,IACrB,MAAM,QAAS,CAAA,QAAA;AAAA,IACf,KAAK,QAAS,CAAA,QAAA;AAAA,GAChB,CAAA;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/utils/utils.ts"],"sourcesContent":["import { SceneObject, SceneObjectState } from '../core/types';\nimport { locationService as locationServiceRuntime
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/utils/utils.ts"],"sourcesContent":["import { SceneObject, SceneObjectState } from '../core/types';\nimport { locationService as locationServiceRuntime, useLocationService } from '@grafana/runtime';\n\n/**\n * This function works around the problem of Contravariance of the SceneObject.setState function\n * Contravariance is not enforce by interfaces and here we use the SceneObject interface to access the setState function\n */\nexport function setBaseClassState<T extends SceneObjectState>(sceneObject: SceneObject<T>, newState: Partial<T>) {\n sceneObject.setState(newState);\n}\n\n/**\n * Safe way to get location service that fallbacks to singleton for older runtime versions where useLocationService is\n * not available.\n */\nexport function useLocationServiceSafe() {\n // This is basically a version/feature check for grafana/runtime so this 'if' should be stable (ie for one instance\n // of grafana this will always be true or false) so it should be safe to ignore the hook rule here\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useLocationService ? useLocationService() : locationServiceRuntime;\n}\n"],"names":["locationServiceRuntime"],"mappings":";;AAOgB,SAAA,iBAAA,CAA8C,aAA6B,QAAsB,EAAA;AAC/G,EAAA,WAAA,CAAY,SAAS,QAAQ,CAAA,CAAA;AAC/B,CAAA;AAMO,SAAS,sBAAyB,GAAA;AAIvC,EAAO,OAAA,kBAAA,GAAqB,oBAAuB,GAAAA,eAAA,CAAA;AACrD;;;;"}
|