@grafana/scenes 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/esm/components/SceneByFrameRepeater.js +38 -0
- package/dist/esm/components/SceneByFrameRepeater.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/querying/SceneQueryRunner.js +6 -9
- package/dist/esm/querying/SceneQueryRunner.js.map +1 -1
- package/dist/esm/utils/getDataSource.js +11 -0
- package/dist/esm/utils/getDataSource.js.map +1 -0
- package/dist/esm/variables/variants/query/QueryVariable.js +6 -7
- package/dist/esm/variables/variants/query/QueryVariable.js.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +211 -236
- package/dist/index.js.map +1 -1
- package/package.json +18 -13
- package/dist/esm/components/ScenePanelRepeater.js +0 -66
- package/dist/esm/components/ScenePanelRepeater.js.map +0 -1
package/README.md
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
|
|
16
16
|
## Development
|
|
17
17
|
|
|
18
|
+
### Working with Grafana
|
|
19
|
+
|
|
18
20
|
@grafana/scenes does not come with dedicated playground yet. It is currently possible to run Scene demos using Grafana. To do that, the following setup is required.
|
|
19
21
|
|
|
20
22
|
1. Clone @grafana/scenes repository.
|
|
@@ -24,3 +26,10 @@
|
|
|
24
26
|
1. From Grafana directory run `yarn install`.
|
|
25
27
|
1. Start Grafana with `scenes` [feature toggle enabled](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#feature_toggles)
|
|
26
28
|
1. Navigate to `http://localhost:3000/scenes` to explore demo scenes.
|
|
29
|
+
|
|
30
|
+
### Working with Grafana app plugin
|
|
31
|
+
|
|
32
|
+
1. Run `YARN_IGNORE_PATH=1 yarn link` from @grafana/scenes directory.
|
|
33
|
+
1. Run `yarn dev` from @grafana/scenes directory.
|
|
34
|
+
1. Run `yarn link @grafana/scenes` from app plugin directory.
|
|
35
|
+
1. Start app plugin development server.
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LoadingState } from '@grafana/data';
|
|
3
|
+
import { SceneObjectBase } from '../core/SceneObjectBase.js';
|
|
4
|
+
import { sceneGraph } from '../core/sceneGraph.js';
|
|
5
|
+
|
|
6
|
+
class SceneByFrameRepeater extends SceneObjectBase {
|
|
7
|
+
activate() {
|
|
8
|
+
super.activate();
|
|
9
|
+
this._subs.add(
|
|
10
|
+
sceneGraph.getData(this).subscribeToState({
|
|
11
|
+
next: (data) => {
|
|
12
|
+
var _a;
|
|
13
|
+
if (((_a = data.data) == null ? void 0 : _a.state) === LoadingState.Done) {
|
|
14
|
+
this.performRepeat(data.data);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
performRepeat(data) {
|
|
21
|
+
const newChildren = [];
|
|
22
|
+
for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) {
|
|
23
|
+
const layoutChild = this.state.getLayoutChild(data, data.series[seriesIndex], seriesIndex);
|
|
24
|
+
newChildren.push(layoutChild);
|
|
25
|
+
}
|
|
26
|
+
this.state.body.setState({ children: newChildren });
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
SceneByFrameRepeater.Component = ({ model, isEditing }) => {
|
|
30
|
+
const { body } = model.useState();
|
|
31
|
+
return /* @__PURE__ */ React.createElement(body.Component, {
|
|
32
|
+
model: body,
|
|
33
|
+
isEditing
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { SceneByFrameRepeater };
|
|
38
|
+
//# sourceMappingURL=SceneByFrameRepeater.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SceneByFrameRepeater.js","sources":["../../../src/components/SceneByFrameRepeater.tsx"],"sourcesContent":["import React from 'react';\n\nimport { LoadingState, PanelData, DataFrame } from '@grafana/data';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport {\n SceneComponentProps,\n SceneObject,\n SceneObjectStatePlain,\n SceneLayoutState,\n SceneLayoutChild,\n} from '../core/types';\n\ninterface RepeatOptions extends SceneObjectStatePlain {\n body: SceneObject<SceneLayoutState>;\n getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneLayoutChild;\n}\n\nexport class SceneByFrameRepeater extends SceneObjectBase<RepeatOptions> {\n public activate(): void {\n super.activate();\n\n this._subs.add(\n sceneGraph.getData(this).subscribeToState({\n next: (data) => {\n if (data.data?.state === LoadingState.Done) {\n this.performRepeat(data.data);\n }\n },\n })\n );\n }\n\n private performRepeat(data: PanelData) {\n const newChildren: SceneLayoutChild[] = [];\n\n for (let seriesIndex = 0; seriesIndex < data.series.length; seriesIndex++) {\n const layoutChild = this.state.getLayoutChild(data, data.series[seriesIndex], seriesIndex);\n newChildren.push(layoutChild);\n }\n\n this.state.body.setState({ children: newChildren });\n }\n\n public static Component = ({ model, isEditing }: SceneComponentProps<SceneByFrameRepeater>) => {\n const { body } = model.useState();\n return <body.Component model={body} isEditing={isEditing} />;\n };\n}\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,6BAA6B,eAA+B,CAAA;AAAA,EAChE,QAAiB,GAAA;AACtB,IAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAEf,IAAA,IAAA,CAAK,KAAM,CAAA,GAAA;AAAA,MACT,UAAW,CAAA,OAAA,CAAQ,IAAI,CAAA,CAAE,gBAAiB,CAAA;AAAA,QACxC,IAAA,EAAM,CAAC,IAAS,KAAA;AAzBxB,UAAA,IAAA,EAAA,CAAA;AA0BU,UAAA,IAAA,CAAA,CAAI,EAAK,GAAA,IAAA,CAAA,IAAA,KAAL,IAAW,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,MAAU,aAAa,IAAM,EAAA;AAC1C,YAAK,IAAA,CAAA,aAAA,CAAc,KAAK,IAAI,CAAA,CAAA;AAAA,WAC9B;AAAA,SACF;AAAA,OACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF;AAAA,EAEQ,cAAc,IAAiB,EAAA;AACrC,IAAA,MAAM,cAAkC,EAAC,CAAA;AAEzC,IAAA,KAAA,IAAS,cAAc,CAAG,EAAA,WAAA,GAAc,IAAK,CAAA,MAAA,CAAO,QAAQ,WAAe,EAAA,EAAA;AACzE,MAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,cAAA,CAAe,MAAM,IAAK,CAAA,MAAA,CAAO,cAAc,WAAW,CAAA,CAAA;AACzF,MAAA,WAAA,CAAY,KAAK,WAAW,CAAA,CAAA;AAAA,KAC9B;AAEA,IAAA,IAAA,CAAK,MAAM,IAAK,CAAA,QAAA,CAAS,EAAE,QAAA,EAAU,aAAa,CAAA,CAAA;AAAA,GACpD;AAMF,CAAA;AA9Ba,oBAAA,CA0BG,SAAY,GAAA,CAAC,EAAE,KAAA,EAAO,WAA2D,KAAA;AAC7F,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AAChC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,SAAL,EAAA;AAAA,IAAe,KAAO,EAAA,IAAA;AAAA,IAAM,SAAA;AAAA,GAAsB,CAAA,CAAA;AAC5D,CAAA;;;;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -25,7 +25,7 @@ export { NestedScene } from './components/NestedScene.js';
|
|
|
25
25
|
export { SceneCanvasText } from './components/SceneCanvasText.js';
|
|
26
26
|
export { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton.js';
|
|
27
27
|
export { SceneTimePicker } from './components/SceneTimePicker.js';
|
|
28
|
-
export {
|
|
28
|
+
export { SceneByFrameRepeater } from './components/SceneByFrameRepeater.js';
|
|
29
29
|
export { SceneSubMenu } from './components/SceneSubMenu.js';
|
|
30
30
|
export { SceneFlexLayout } from './components/layout/SceneFlexLayout.js';
|
|
31
31
|
export { SceneGridLayout } from './components/layout/SceneGridLayout.js';
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { cloneDeep } from 'lodash';
|
|
2
2
|
import { mergeMap, of, map } from 'rxjs';
|
|
3
3
|
import { CoreApp, rangeUtil, transformDataFrame } from '@grafana/data';
|
|
4
|
-
import { getRunRequest
|
|
4
|
+
import { getRunRequest } from '@grafana/runtime';
|
|
5
5
|
import { SceneObjectBase } from '../core/SceneObjectBase.js';
|
|
6
6
|
import { sceneGraph } from '../core/sceneGraph.js';
|
|
7
|
+
import { getDataSource } from '../utils/getDataSource.js';
|
|
7
8
|
import { VariableDependencyConfig } from '../variables/VariableDependencyConfig.js';
|
|
8
9
|
|
|
9
10
|
var __defProp = Object.defineProperty;
|
|
@@ -33,7 +34,7 @@ class SceneQueryRunner extends SceneObjectBase {
|
|
|
33
34
|
constructor() {
|
|
34
35
|
super(...arguments);
|
|
35
36
|
this._variableDependency = new VariableDependencyConfig(this, {
|
|
36
|
-
statePaths: ["queries"],
|
|
37
|
+
statePaths: ["queries", "datasource"],
|
|
37
38
|
onReferencedVariableValueChanged: () => this.runQueries()
|
|
38
39
|
});
|
|
39
40
|
this.onDataReceived = (data) => {
|
|
@@ -109,7 +110,9 @@ class SceneQueryRunner extends SceneObjectBase {
|
|
|
109
110
|
startTime: Date.now()
|
|
110
111
|
};
|
|
111
112
|
try {
|
|
112
|
-
const ds = await getDataSource(datasource, request.scopedVars)
|
|
113
|
+
const ds = await getDataSource(datasource, __spreadProps(__spreadValues({}, request.scopedVars), {
|
|
114
|
+
__sceneObject: { text: "__sceneObject", value: this }
|
|
115
|
+
}));
|
|
113
116
|
request.targets = request.targets.map((query) => {
|
|
114
117
|
if (!query.datasource) {
|
|
115
118
|
query.datasource = ds.getRef();
|
|
@@ -133,12 +136,6 @@ class SceneQueryRunner extends SceneObjectBase {
|
|
|
133
136
|
}
|
|
134
137
|
}
|
|
135
138
|
}
|
|
136
|
-
async function getDataSource(datasource, scopedVars) {
|
|
137
|
-
if (datasource && datasource.query) {
|
|
138
|
-
return datasource;
|
|
139
|
-
}
|
|
140
|
-
return await getDataSourceSrv().get(datasource, scopedVars);
|
|
141
|
-
}
|
|
142
139
|
const getTransformationsStream = (sceneObject, transformations) => (inputStream) => {
|
|
143
140
|
return inputStream.pipe(
|
|
144
141
|
mergeMap((data) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { mergeMap, MonoTypeOperatorFunction, Unsubscribable, map, of } from 'rxjs';\n\nimport {\n CoreApp,\n DataQuery,\n DataQueryRequest,\n DataSourceApi,\n DataSourceRef,\n DataTransformerConfig,\n PanelData,\n rangeUtil,\n ScopedVars,\n TimeRange,\n transformDataFrame,\n} from '@grafana/data';\nimport { getDataSourceSrv, getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectStatePlain } from '../core/types';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n return 'QS' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectStatePlain {\n data?: PanelData;\n queries: DataQueryExtended[];\n transformations?: DataTransformerConfig[];\n datasource?: DataSourceRef;\n minInterval?: string;\n maxDataPoints?: number;\n // Non persisted state\n maxDataPointsFromWidth?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> {\n private _querySub?: Unsubscribable;\n private _containerWidth?: number;\n\n protected _variableDependency = new VariableDependencyConfig(this, {\n statePaths: ['queries'],\n onReferencedVariableValueChanged: () => this.runQueries(),\n });\n\n public activate() {\n super.activate();\n\n const timeRange = sceneGraph.getTimeRange(this);\n\n this._subs.add(\n timeRange.subscribeToState({\n next: (timeRange) => {\n this.runWithTimeRange(timeRange.value);\n },\n })\n );\n\n if (this.shouldRunQueriesOnActivate()) {\n this.runQueries();\n }\n }\n\n private shouldRunQueriesOnActivate() {\n // If we already have data, no need\n // TODO validate that time range is similar and if not we should run queries again\n if (this.state.data) {\n return false;\n }\n\n // If no maxDataPoints specified we need might to wait for container width to be set from the outside\n if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n return false;\n }\n\n return true;\n }\n\n public deactivate(): void {\n super.deactivate();\n\n if (this._querySub) {\n this._querySub.unsubscribe();\n this._querySub = undefined;\n }\n }\n\n public setContainerWidth(width: number) {\n // If we don't have a width we should run queries\n if (!this._containerWidth && width > 0) {\n this._containerWidth = width;\n\n // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n // As this is called from render path we need to wait for next tick before running queries\n setTimeout(() => {\n if (this.isActive && !this._querySub) {\n this.runQueries();\n }\n }, 0);\n }\n } else {\n // let's just remember the width until next query issue\n this._containerWidth = width;\n }\n }\n\n public runQueries() {\n const timeRange = sceneGraph.getTimeRange(this);\n this.runWithTimeRange(timeRange.state.value);\n }\n\n private getMaxDataPoints() {\n return this.state.maxDataPoints ?? this._containerWidth ?? 500;\n }\n\n private async runWithTimeRange(timeRange: TimeRange) {\n const { datasource, minInterval, queries } = this.state;\n\n const request: DataQueryRequest = {\n app: CoreApp.Dashboard,\n requestId: getNextRequestId(),\n timezone: 'browser',\n panelId: 1,\n dashboardId: 1,\n range: timeRange,\n interval: '1s',\n intervalMs: 1000,\n targets: cloneDeep(queries),\n maxDataPoints: this.getMaxDataPoints(),\n scopedVars: {},\n startTime: Date.now(),\n };\n\n try {\n const ds = await getDataSource(datasource, request.scopedVars);\n\n // Attach the data source name to each query\n request.targets = request.targets.map((query) => {\n if (!query.datasource) {\n query.datasource = ds.getRef();\n }\n return query;\n });\n\n // TODO interpolate minInterval\n const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n const norm = rangeUtil.calculateInterval(timeRange, request.maxDataPoints!, lowerIntervalLimit);\n\n // make shallow copy of scoped vars,\n // and add built in variables interval and interval_ms\n request.scopedVars = Object.assign({}, request.scopedVars, {\n __interval: { text: norm.interval, value: norm.interval },\n __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n });\n\n request.interval = norm.interval;\n request.intervalMs = norm.intervalMs;\n\n const runRequest = getRunRequest();\n this._querySub = runRequest(ds, request)\n .pipe(getTransformationsStream(this, this.state.transformations))\n .subscribe({\n next: this.onDataReceived,\n });\n } catch (err) {\n console.error('PanelQueryRunner Error', err);\n }\n }\n\n private onDataReceived = (data: PanelData) => {\n this.setState({ data });\n };\n}\n\nasync function getDataSource(datasource: DataSourceRef | undefined, scopedVars: ScopedVars): Promise<DataSourceApi> {\n if (datasource && (datasource as any).query) {\n return datasource as DataSourceApi;\n }\n return await getDataSourceSrv().get(datasource as string, scopedVars);\n}\n\nexport const getTransformationsStream: (\n sceneObject: SceneObject,\n transformations?: DataTransformerConfig[]\n) => MonoTypeOperatorFunction<PanelData> = (sceneObject, transformations) => (inputStream) => {\n return inputStream.pipe(\n mergeMap((data) => {\n if (!transformations || transformations.length === 0) {\n return of(data);\n }\n\n const ctx = {\n interpolate: (value: string) => {\n return sceneGraph.interpolate(sceneObject, value, data?.request?.scopedVars);\n },\n };\n\n return transformDataFrame(transformations, data.series, ctx).pipe(map((series) => ({ ...data, series })));\n })\n );\n};\n"],"names":["timeRange"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneQueryRunner.js","sources":["../../../src/querying/SceneQueryRunner.ts"],"sourcesContent":["import { cloneDeep } from 'lodash';\nimport { mergeMap, MonoTypeOperatorFunction, Unsubscribable, map, of } from 'rxjs';\n\nimport {\n CoreApp,\n DataQuery,\n DataQueryRequest,\n DataSourceRef,\n DataTransformerConfig,\n PanelData,\n rangeUtil,\n TimeRange,\n transformDataFrame,\n} from '@grafana/data';\nimport { getRunRequest } from '@grafana/runtime';\n\nimport { SceneObjectBase } from '../core/SceneObjectBase';\nimport { sceneGraph } from '../core/sceneGraph';\nimport { SceneObject, SceneObjectStatePlain } from '../core/types';\nimport { getDataSource } from '../utils/getDataSource';\nimport { VariableDependencyConfig } from '../variables/VariableDependencyConfig';\n\nlet counter = 100;\n\nexport function getNextRequestId() {\n return 'QS' + counter++;\n}\n\nexport interface QueryRunnerState extends SceneObjectStatePlain {\n data?: PanelData;\n queries: DataQueryExtended[];\n transformations?: DataTransformerConfig[];\n datasource?: DataSourceRef;\n minInterval?: string;\n maxDataPoints?: number;\n // Non persisted state\n maxDataPointsFromWidth?: boolean;\n}\n\nexport interface DataQueryExtended extends DataQuery {\n [key: string]: any;\n}\n\nexport class SceneQueryRunner extends SceneObjectBase<QueryRunnerState> {\n private _querySub?: Unsubscribable;\n private _containerWidth?: number;\n\n protected _variableDependency = new VariableDependencyConfig(this, {\n statePaths: ['queries', 'datasource'],\n onReferencedVariableValueChanged: () => this.runQueries(),\n });\n\n public activate() {\n super.activate();\n const timeRange = sceneGraph.getTimeRange(this);\n\n this._subs.add(\n timeRange.subscribeToState({\n next: (timeRange) => {\n this.runWithTimeRange(timeRange.value);\n },\n })\n );\n\n if (this.shouldRunQueriesOnActivate()) {\n this.runQueries();\n }\n }\n\n private shouldRunQueriesOnActivate() {\n // If we already have data, no need\n // TODO validate that time range is similar and if not we should run queries again\n if (this.state.data) {\n return false;\n }\n\n // If no maxDataPoints specified we need might to wait for container width to be set from the outside\n if (!this.state.maxDataPoints && this.state.maxDataPointsFromWidth && !this._containerWidth) {\n return false;\n }\n\n return true;\n }\n\n public deactivate(): void {\n super.deactivate();\n\n if (this._querySub) {\n this._querySub.unsubscribe();\n this._querySub = undefined;\n }\n }\n\n public setContainerWidth(width: number) {\n // If we don't have a width we should run queries\n if (!this._containerWidth && width > 0) {\n this._containerWidth = width;\n\n // If we don't have maxDataPoints specifically set and maxDataPointsFromWidth is true\n if (this.state.maxDataPointsFromWidth && !this.state.maxDataPoints) {\n // As this is called from render path we need to wait for next tick before running queries\n setTimeout(() => {\n if (this.isActive && !this._querySub) {\n this.runQueries();\n }\n }, 0);\n }\n } else {\n // let's just remember the width until next query issue\n this._containerWidth = width;\n }\n }\n\n public runQueries() {\n const timeRange = sceneGraph.getTimeRange(this);\n this.runWithTimeRange(timeRange.state.value);\n }\n\n private getMaxDataPoints() {\n return this.state.maxDataPoints ?? this._containerWidth ?? 500;\n }\n\n private async runWithTimeRange(timeRange: TimeRange) {\n const { datasource, minInterval, queries } = this.state;\n\n const request: DataQueryRequest = {\n app: CoreApp.Dashboard,\n requestId: getNextRequestId(),\n timezone: 'browser',\n panelId: 1,\n dashboardId: 1,\n range: timeRange,\n interval: '1s',\n intervalMs: 1000,\n targets: cloneDeep(queries),\n maxDataPoints: this.getMaxDataPoints(),\n scopedVars: {},\n startTime: Date.now(),\n };\n\n try {\n const ds = await getDataSource(datasource, {\n ...request.scopedVars,\n __sceneObject: { text: '__sceneObject', value: this },\n });\n\n // Attach the data source name to each query\n request.targets = request.targets.map((query) => {\n if (!query.datasource) {\n query.datasource = ds.getRef();\n }\n return query;\n });\n\n // TODO interpolate minInterval\n const lowerIntervalLimit = minInterval ? minInterval : ds.interval;\n const norm = rangeUtil.calculateInterval(timeRange, request.maxDataPoints!, lowerIntervalLimit);\n\n // make shallow copy of scoped vars,\n // and add built in variables interval and interval_ms\n request.scopedVars = Object.assign({}, request.scopedVars, {\n __interval: { text: norm.interval, value: norm.interval },\n __interval_ms: { text: norm.intervalMs.toString(), value: norm.intervalMs },\n });\n\n request.interval = norm.interval;\n request.intervalMs = norm.intervalMs;\n\n const runRequest = getRunRequest();\n this._querySub = runRequest(ds, request)\n .pipe(getTransformationsStream(this, this.state.transformations))\n .subscribe({\n next: this.onDataReceived,\n });\n } catch (err) {\n console.error('PanelQueryRunner Error', err);\n }\n }\n\n private onDataReceived = (data: PanelData) => {\n this.setState({ data });\n };\n}\n\nexport const getTransformationsStream: (\n sceneObject: SceneObject,\n transformations?: DataTransformerConfig[]\n) => MonoTypeOperatorFunction<PanelData> = (sceneObject, transformations) => (inputStream) => {\n return inputStream.pipe(\n mergeMap((data) => {\n if (!transformations || transformations.length === 0) {\n return of(data);\n }\n\n const ctx = {\n interpolate: (value: string) => {\n return sceneGraph.interpolate(sceneObject, value, data?.request?.scopedVars);\n },\n };\n\n return transformDataFrame(transformations, data.series, ctx).pipe(map((series) => ({ ...data, series })));\n })\n );\n};\n"],"names":["timeRange"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { getDataSourceSrv } from '@grafana/runtime';
|
|
2
|
+
|
|
3
|
+
async function getDataSource(datasource, scopedVars) {
|
|
4
|
+
if (datasource && datasource.query) {
|
|
5
|
+
return datasource;
|
|
6
|
+
}
|
|
7
|
+
return await getDataSourceSrv().get(datasource, scopedVars);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { getDataSource };
|
|
11
|
+
//# sourceMappingURL=getDataSource.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getDataSource.js","sources":["../../../src/utils/getDataSource.ts"],"sourcesContent":["import { DataSourceApi, DataSourceRef, ScopedVars } from '@grafana/data';\nimport { getDataSourceSrv } from '@grafana/runtime';\n\nexport async function getDataSource(\n datasource: DataSourceRef | undefined,\n scopedVars: ScopedVars\n): Promise<DataSourceApi> {\n if (datasource && (datasource as any).query) {\n return datasource as DataSourceApi;\n }\n return await getDataSourceSrv().get(datasource as string, scopedVars);\n}\n"],"names":[],"mappings":";;AAGsB,eAAA,aAAA,CACpB,YACA,UACwB,EAAA;AACxB,EAAI,IAAA,UAAA,IAAe,WAAmB,KAAO,EAAA;AAC3C,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AACA,EAAA,OAAO,MAAM,gBAAA,EAAmB,CAAA,GAAA,CAAI,YAAsB,UAAU,CAAA,CAAA;AACtE;;;;"}
|
|
@@ -2,10 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { of, from, mergeMap, filter, take, throwError, catchError } from 'rxjs';
|
|
3
3
|
import { v4 } from 'uuid';
|
|
4
4
|
import { VariableRefresh, VariableSort, LoadingState, getDefaultTimeRange, CoreApp } from '@grafana/data';
|
|
5
|
-
import { getDataSourceSrv } from '@grafana/runtime';
|
|
6
5
|
import { sceneGraph } from '../../../core/sceneGraph.js';
|
|
7
6
|
import { VariableDependencyConfig } from '../../VariableDependencyConfig.js';
|
|
8
7
|
import { VariableValueSelect } from '../../components/VariableValueSelect.js';
|
|
8
|
+
import { getDataSource } from '../../../utils/getDataSource.js';
|
|
9
9
|
import { MultiValueVariable } from '../MultiValueVariable.js';
|
|
10
10
|
import { createQueryVariableRunner } from './createQueryVariableRunner.js';
|
|
11
11
|
import { metricNamesToVariableValues } from './utils.js';
|
|
@@ -71,7 +71,11 @@ class QueryVariable extends MultiValueVariable {
|
|
|
71
71
|
if (this.state.query === "" || !this.state.datasource) {
|
|
72
72
|
return of([]);
|
|
73
73
|
}
|
|
74
|
-
return from(
|
|
74
|
+
return from(
|
|
75
|
+
getDataSource(this.state.datasource, {
|
|
76
|
+
__sceneObject: { text: "__sceneObject", value: this }
|
|
77
|
+
})
|
|
78
|
+
).pipe(
|
|
75
79
|
mergeMap((ds) => {
|
|
76
80
|
const runner = createQueryVariableRunner(ds);
|
|
77
81
|
const target = runner.getTarget(this);
|
|
@@ -103,11 +107,6 @@ class QueryVariable extends MultiValueVariable {
|
|
|
103
107
|
})
|
|
104
108
|
);
|
|
105
109
|
}
|
|
106
|
-
async getDataSource() {
|
|
107
|
-
return getDataSourceSrv().get(this.state.datasource, {
|
|
108
|
-
__sceneObject: { text: "__sceneObject", value: this }
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
110
|
getRequest(target) {
|
|
112
111
|
const scopedVars = {
|
|
113
112
|
__sceneObject: { text: "__sceneObject", value: this }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { Observable, Subject, of, Unsubscribable, filter, take, mergeMap, catchError, throwError, from } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n CoreApp,\n DataQuery,\n DataQueryRequest,\n DataSourceApi,\n DataSourceRef,\n getDefaultTimeRange,\n LoadingState,\n PanelData,\n ScopedVars,\n VariableRefresh,\n VariableSort,\n} from '@grafana/data';\
|
|
1
|
+
{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { Observable, Subject, of, Unsubscribable, filter, take, mergeMap, catchError, throwError, from } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n CoreApp,\n DataQuery,\n DataQueryRequest,\n DataSourceApi,\n DataSourceRef,\n getDefaultTimeRange,\n LoadingState,\n PanelData,\n ScopedVars,\n VariableRefresh,\n VariableSort,\n} from '@grafana/data';\n\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { SceneComponentProps } from '../../../core/types';\nimport { VariableDependencyConfig } from '../../VariableDependencyConfig';\nimport { VariableValueSelect } from '../../components/VariableValueSelect';\nimport { VariableValueOption } from '../../types';\nimport { getDataSource } from '../../../utils/getDataSource';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../MultiValueVariable';\n\nimport { createQueryVariableRunner } from './createQueryVariableRunner';\nimport { metricNamesToVariableValues } from './utils';\nimport { toMetricFindValues } from './toMetricFindValues';\n\nexport interface QueryVariableState extends MultiValueVariableState {\n type: 'query';\n datasource: DataSourceRef | null;\n query: any;\n regex: string;\n refresh: VariableRefresh;\n sort: VariableSort;\n}\n\nexport class QueryVariable extends MultiValueVariable<QueryVariableState> {\n private updateSubscription?: Unsubscribable;\n private dataSourceSubject?: Subject<DataSourceApi>;\n\n protected _variableDependency = new VariableDependencyConfig(this, {\n statePaths: ['regex', 'query', 'datasource'],\n });\n\n public constructor(initialState: Partial<QueryVariableState>) {\n super({\n type: 'query',\n name: '',\n value: '',\n text: '',\n query: '',\n options: [],\n datasource: null,\n regex: '',\n refresh: VariableRefresh.onDashboardLoad,\n sort: VariableSort.alphabeticalAsc,\n ...initialState,\n });\n }\n\n public activate(): void {\n super.activate();\n const timeRange = sceneGraph.getTimeRange(this);\n\n if (this.state.refresh === VariableRefresh.onTimeRangeChanged) {\n this._subs.add(\n timeRange.subscribeToState({\n next: () => {\n this.updateSubscription = this.validateAndUpdate().subscribe();\n },\n })\n );\n }\n }\n\n public deactivate(): void {\n super.deactivate();\n if (this.updateSubscription) {\n this.updateSubscription.unsubscribe();\n }\n\n if (this.dataSourceSubject) {\n this.dataSourceSubject.unsubscribe();\n }\n }\n\n public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n if (this.state.query === '' || !this.state.datasource) {\n return of([]);\n }\n\n return from(\n getDataSource(this.state.datasource, {\n __sceneObject: { text: '__sceneObject', value: this },\n })\n ).pipe(\n mergeMap((ds) => {\n const runner = createQueryVariableRunner(ds);\n const target = runner.getTarget(this);\n const request = this.getRequest(target);\n return runner.runRequest({ variable: this }, request).pipe(\n filter((data) => data.state === LoadingState.Done || data.state === LoadingState.Error), // we only care about done or error for now\n take(1), // take the first result, using first caused a bug where it in some situations throw an uncaught error because of no results had been received yet\n mergeMap((data: PanelData) => {\n if (data.state === LoadingState.Error) {\n return throwError(() => data.error);\n }\n return of(data);\n }),\n toMetricFindValues(),\n mergeMap((values) => {\n let regex = '';\n if (this.state.regex) {\n regex = sceneGraph.interpolate(this, this.state.regex, undefined, 'regex');\n }\n return of(metricNamesToVariableValues(regex, this.state.sort, values));\n }),\n catchError((error) => {\n if (error.cancelled) {\n return of([]);\n }\n return throwError(() => error);\n })\n );\n })\n );\n }\n\n private getRequest(target: DataQuery) {\n // TODO: add support for search filter\n // const { searchFilter } = this.state.searchFilter;\n // const searchFilterScope = { searchFilter: { text: searchFilter, value: searchFilter } };\n // const searchFilterAsVars = searchFilter ? searchFilterScope : {};\n const scopedVars: ScopedVars = {\n // ...searchFilterAsVars,\n __sceneObject: { text: '__sceneObject', value: this },\n };\n\n const range =\n this.state.refresh === VariableRefresh.onTimeRangeChanged\n ? sceneGraph.getTimeRange(this).state.value\n : getDefaultTimeRange();\n\n const request: DataQueryRequest = {\n app: CoreApp.Dashboard,\n requestId: uuidv4(),\n timezone: '',\n range,\n interval: '',\n intervalMs: 0,\n targets: [target],\n scopedVars,\n startTime: Date.now(),\n };\n return request;\n }\n\n public static Component = ({ model }: SceneComponentProps<MultiValueVariable>) => {\n return <VariableValueSelect model={model} />;\n };\n}\n"],"names":["uuidv4"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { Observable, Observer, Subscription, Unsubscribable } from 'rxjs';
|
|
4
|
-
import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange } from '@grafana/data';
|
|
4
|
+
import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, DataFrame } from '@grafana/data';
|
|
5
5
|
import { VariableType, VariableHide, VariableModel } from '@grafana/schema';
|
|
6
6
|
import { IconName } from '@grafana/ui';
|
|
7
7
|
import ReactGridLayout from 'react-grid-layout';
|
|
@@ -581,7 +581,6 @@ declare class QueryVariable extends MultiValueVariable<QueryVariableState> {
|
|
|
581
581
|
activate(): void;
|
|
582
582
|
deactivate(): void;
|
|
583
583
|
getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]>;
|
|
584
|
-
private getDataSource;
|
|
585
584
|
private getRequest;
|
|
586
585
|
static Component: ({ model }: SceneComponentProps<MultiValueVariable>) => JSX.Element;
|
|
587
586
|
}
|
|
@@ -719,12 +718,13 @@ declare class SceneTimePicker extends SceneObjectBase<SceneTimePickerState> {
|
|
|
719
718
|
declare function SceneTimePickerRenderer({ model }: SceneComponentProps<SceneTimePicker>): JSX.Element | null;
|
|
720
719
|
|
|
721
720
|
interface RepeatOptions extends SceneObjectStatePlain {
|
|
722
|
-
|
|
721
|
+
body: SceneObject<SceneLayoutState>;
|
|
722
|
+
getLayoutChild(data: PanelData, frame: DataFrame, frameIndex: number): SceneLayoutChild;
|
|
723
723
|
}
|
|
724
|
-
declare class
|
|
724
|
+
declare class SceneByFrameRepeater extends SceneObjectBase<RepeatOptions> {
|
|
725
725
|
activate(): void;
|
|
726
726
|
private performRepeat;
|
|
727
|
-
static Component: ({ model, isEditing }: SceneComponentProps<
|
|
727
|
+
static Component: ({ model, isEditing }: SceneComponentProps<SceneByFrameRepeater>) => JSX.Element;
|
|
728
728
|
}
|
|
729
729
|
|
|
730
730
|
interface SceneSubMenuState extends SceneLayoutState {
|
|
@@ -793,4 +793,4 @@ declare class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> {
|
|
|
793
793
|
}
|
|
794
794
|
declare function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>): JSX.Element;
|
|
795
795
|
|
|
796
|
-
export { ConstantVariable, CustomFormatterFn, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneCanvasText, SceneComponent, SceneComponentProps, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync,
|
|
796
|
+
export { ConstantVariable, CustomFormatterFn, CustomVariable, DataSourceVariable, DeepPartial, EmbeddedScene, FormatRegistryID, FormatVariable, NestedScene, QueryRunnerState, QueryVariable, SceneByFrameRepeater, SceneCanvasText, SceneComponent, SceneComponentProps, SceneDataNode, SceneDataState, SceneDataTransformer, SceneEditor, SceneEditorState, SceneFlexLayout, SceneGridLayout, SceneGridRow, SceneLayout, SceneLayoutChild, SceneLayoutChildOptions, SceneLayoutChildState, SceneLayoutState, SceneObject, SceneObjectBase, SceneObjectRef, SceneObjectState, SceneObjectStateChangedEvent, SceneObjectStateChangedPayload, SceneObjectStatePlain, SceneObjectUrlSyncConfig, SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues, SceneObjectWithUrlSync, SceneQueryRunner, SceneState, SceneSubMenu, SceneTimePicker, SceneTimeRange, SceneTimeRangeLike, SceneTimeRangeState, SceneToolbarButton, SceneToolbarInput, SceneVariable, SceneVariableDependencyConfigLike, SceneVariableSet, SceneVariableSetState, SceneVariableState, SceneVariableValueChangedEvent, SceneVariables, TestVariable, UrlSyncManager, ValidateAndUpdateResult, VariableValue, VariableValueCustom, VariableValueOption, VariableValueSelectors, VariableValueSingle, VizPanel, VizPanelState, formatRegistry, isSceneObject, sceneGraph };
|