@grafana/scenes 0.12.0 → 0.12.1
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.12.1 (Fri May 26 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- QueryVariable: Correct picker for multi-value variable [#218](https://github.com/grafana/scenes/pull/218) ([@dprokop](https://github.com/dprokop))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Dominik Prokop ([@dprokop](https://github.com/dprokop))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.12.0 (Thu May 25 2023)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -15,7 +27,7 @@
|
|
|
15
27
|
#### 🚀 Enhancement
|
|
16
28
|
|
|
17
29
|
- Macros: Url macro [#199](https://github.com/grafana/scenes/pull/199) ([@torkelo](https://github.com/torkelo) [@dprokop](https://github.com/dprokop))
|
|
18
|
-
- Macros: Add
|
|
30
|
+
- Macros: Add \_\_timezone macro [#200](https://github.com/grafana/scenes/pull/200) ([@dprokop](https://github.com/dprokop))
|
|
19
31
|
|
|
20
32
|
#### Authors: 2
|
|
21
33
|
|
package/README.md
CHANGED
|
@@ -6,12 +6,16 @@
|
|
|
6
6
|
padding="40px"
|
|
7
7
|
/>
|
|
8
8
|
<h1>@grafana/scenes</h1>
|
|
9
|
-
<p>
|
|
9
|
+
<p>Build highly interactive Grafana apps with ease.</p>
|
|
10
10
|
</div>
|
|
11
11
|
|
|
12
|
+
## Public preview
|
|
13
|
+
|
|
14
|
+
@grafana/scenes is currently in _public preview_. We invite everyone to play with the library. We welcome any feedback!
|
|
15
|
+
|
|
12
16
|
## About @grafana/scenes
|
|
13
17
|
|
|
14
|
-
@grafana/scenes provides a
|
|
18
|
+
@grafana/scenes provides a library to build highly interactive, dashboard-like experiences in Grafana's app plugins. It comes with the following features:
|
|
15
19
|
|
|
16
20
|
- Versatile layout options.
|
|
17
21
|
- Grafana panels rendering.
|
|
@@ -25,17 +29,17 @@
|
|
|
25
29
|
|
|
26
30
|
To work on @grafana/scenes SDK, please follow the guides below.
|
|
27
31
|
|
|
28
|
-
### Setting up
|
|
32
|
+
### Setting up @grafana/scenes with a local Grafana instance
|
|
29
33
|
|
|
30
|
-
It is currently possible to run
|
|
34
|
+
It is currently possible to run a Scenes demo using Grafana. To do that, the following setup is required.
|
|
31
35
|
|
|
32
|
-
1. Clone [Grafana Scenes repository](https://github.com/grafana/
|
|
33
|
-
1. Clone [Grafana](https://github.com/grafana/grafana/) repository and follow [Development guide](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#developer-guide).
|
|
36
|
+
1. Clone the [Grafana Scenes repository](https://github.com/grafana/scenes/).
|
|
37
|
+
1. Clone the [Grafana](https://github.com/grafana/grafana/) repository and follow the [Development guide](https://github.com/grafana/grafana/blob/main/contribute/developer-guide.md#developer-guide).
|
|
34
38
|
1. Setup env variable `GRAFANA_PATH` to point to your Grafana repository directory, `export GRAFANA_PATH=<path-to-grafana-directory>`
|
|
35
39
|
1. From Grafana Scenes root directory run `./scripts/dev.sh`. This will compile @grafana/scenes with watch mode enabled and link it to your Grafana.
|
|
36
40
|
1. From Grafana directory run `yarn install`.
|
|
37
41
|
1. Start Grafana with `scenes` [feature toggle enabled](https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#feature_toggles)
|
|
38
|
-
1. Navigate to `http://localhost:3000/scenes` to explore
|
|
42
|
+
1. Navigate to `http://localhost:3000/scenes` to explore demos.
|
|
39
43
|
|
|
40
44
|
### Setting up local version of @grafana/scenes with app plugin
|
|
41
45
|
|
|
@@ -43,3 +47,7 @@ It is currently possible to run Scene demos using Grafana. To do that, the follo
|
|
|
43
47
|
1. Run `yarn dev` from `packages/scenes` directory.
|
|
44
48
|
1. Run `yarn link @grafana/scenes` from app plugin directory.
|
|
45
49
|
1. Start app plugin development server.
|
|
50
|
+
|
|
51
|
+
### Demo app
|
|
52
|
+
|
|
53
|
+
Alternatively, use the [demo app](../scenes-app/README.md) included in this repository.
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { of, from, mergeMap, filter, take, throwError, catchError } from 'rxjs';
|
|
3
2
|
import { v4 } from 'uuid';
|
|
4
3
|
import { VariableRefresh, VariableSort, LoadingState, getDefaultTimeRange, CoreApp } from '@grafana/data';
|
|
5
4
|
import { sceneGraph } from '../../../core/sceneGraph/index.js';
|
|
6
5
|
import { VariableDependencyConfig } from '../../VariableDependencyConfig.js';
|
|
7
|
-
import {
|
|
6
|
+
import { renderSelectForVariable } from '../../components/VariableValueSelect.js';
|
|
8
7
|
import { MultiValueVariable } from '../MultiValueVariable.js';
|
|
9
8
|
import { createQueryVariableRunner } from './createQueryVariableRunner.js';
|
|
10
9
|
import { metricNamesToVariableValues } from './utils.js';
|
|
@@ -106,9 +105,7 @@ class QueryVariable extends MultiValueVariable {
|
|
|
106
105
|
}
|
|
107
106
|
}
|
|
108
107
|
QueryVariable.Component = ({ model }) => {
|
|
109
|
-
return
|
|
110
|
-
model
|
|
111
|
-
});
|
|
108
|
+
return renderSelectForVariable(model);
|
|
112
109
|
};
|
|
113
110
|
|
|
114
111
|
export { QueryVariable };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"QueryVariable.js","sources":["../../../../../src/variables/variants/query/QueryVariable.tsx"],"sourcesContent":["import { Observable, of, filter, take, mergeMap, catchError, throwError, from } from 'rxjs';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport {\n CoreApp,\n DataQuery,\n DataQueryRequest,\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 { renderSelectForVariable } from '../../components/VariableValueSelect';\nimport { VariableValueOption } from '../../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../MultiValueVariable';\n\nimport { createQueryVariableRunner } from './createQueryVariableRunner';\nimport { metricNamesToVariableValues } from './utils';\nimport { toMetricFindValues } from './toMetricFindValues';\nimport { getDataSource } from '../../../utils/getDataSource';\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 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 getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n if (this.state.query === '' || !this.state.datasource) {\n return of([]);\n }\n\n this.setState({ loading: true });\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 renderSelectForVariable(model);\n };\n}\n"],"names":["uuidv4"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -3009,9 +3009,7 @@ class QueryVariable extends MultiValueVariable {
|
|
|
3009
3009
|
}
|
|
3010
3010
|
}
|
|
3011
3011
|
QueryVariable.Component = ({ model }) => {
|
|
3012
|
-
return
|
|
3013
|
-
model
|
|
3014
|
-
});
|
|
3012
|
+
return renderSelectForVariable(model);
|
|
3015
3013
|
};
|
|
3016
3014
|
|
|
3017
3015
|
function buildMetricTree(parent, depth) {
|