@grafana/scenes 4.11.1--canary.690.8726248208.0 → 4.11.2--canary.690.8734061653.0
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
|
+
# v4.11.1 (Wed Apr 17 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Interval variable: Make interval variable properly update on name change [#701](https://github.com/grafana/scenes/pull/701) ([@oscarkilhed](https://github.com/oscarkilhed))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v4.11.0 (Wed Apr 17 2024)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -41,7 +41,7 @@ class IntervalVariable extends SceneObjectBase {
|
|
|
41
41
|
this.setState({ value: value.value });
|
|
42
42
|
this.publishEvent(new SceneVariableValueChangedEvent(this), true);
|
|
43
43
|
};
|
|
44
|
-
this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: [this.getKey()] });
|
|
44
|
+
this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });
|
|
45
45
|
}
|
|
46
46
|
getKey() {
|
|
47
47
|
return `var-${this.state.name}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntervalVariable.js","sources":["../../../../src/variables/variants/IntervalVariable.tsx"],"sourcesContent":["import { rangeUtil, SelectableValue } from '@grafana/data';\nimport { VariableRefresh } from '@grafana/schema';\nimport { Select } from '@grafana/ui';\nimport React from 'react';\nimport { Observable, of } from 'rxjs';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { AUTO_VARIABLE_TEXT, AUTO_VARIABLE_VALUE } from '../constants';\nimport {\n SceneVariable,\n SceneVariableState,\n SceneVariableValueChangedEvent,\n ValidateAndUpdateResult,\n VariableValue,\n} from '../types';\n\nexport interface IntervalVariableState extends SceneVariableState {\n intervals: string[];\n value: string;\n autoEnabled: boolean;\n autoMinInterval: string;\n autoStepCount: number;\n refresh: VariableRefresh;\n}\n\nexport class IntervalVariable\n extends SceneObjectBase<IntervalVariableState>\n implements SceneVariable<IntervalVariableState>\n{\n public constructor(initialState: Partial<IntervalVariableState>) {\n super({\n type: 'interval',\n value: '',\n intervals: ['1m', '10m', '30m', '1h', '6h', '12h', '1d', '7d', '14d', '30d'],\n name: '',\n autoStepCount: 30,\n autoMinInterval: '10s',\n autoEnabled: false,\n refresh: VariableRefresh.onTimeRangeChanged,\n ...initialState,\n });\n\n this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: [this.getKey()] });\n }\n\n private getKey(): string {\n return `var-${this.state.name}`;\n }\n\n public getUrlState() {\n return { [this.getKey()]: this.state.value };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues) {\n const update: Partial<IntervalVariableState> = {};\n const val = values[this.getKey()];\n if (typeof val === 'string') {\n // support old auto interval url value\n if (val.startsWith('$__auto_interval_')) {\n update.value = AUTO_VARIABLE_VALUE;\n } else {\n update.value = val;\n }\n }\n this.setState(update);\n }\n\n public getOptionsForSelect(): Array<SelectableValue<string>> {\n const { value: currentValue, intervals, autoEnabled } = this.state;\n\n let options = intervals.map((interval) => ({ value: interval, label: interval }));\n\n if (autoEnabled) {\n options = [{ value: AUTO_VARIABLE_VALUE, label: AUTO_VARIABLE_TEXT }, ...options];\n }\n\n // If the current value is not in the list of intervals, add it to the list\n if (currentValue && !options.some((option) => option.value === currentValue)) {\n options.push({ value: currentValue, label: currentValue });\n }\n\n return options;\n }\n\n public getValue(): VariableValue {\n const { value, autoStepCount, autoMinInterval } = this.state;\n if (value === AUTO_VARIABLE_VALUE) {\n return this.getAutoRefreshInteval(autoStepCount, autoMinInterval);\n }\n\n return value;\n }\n\n private getAutoRefreshInteval(autoStepCount: number, minRefreshInterval: string) {\n const timeRange = sceneGraph.getTimeRange(this).state.value;\n const intervalObject = rangeUtil.calculateInterval(timeRange, autoStepCount, minRefreshInterval);\n return intervalObject.interval;\n }\n\n public _onChange = (value: SelectableValue<string>) => {\n this.setState({ value: value.value! });\n this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n };\n\n public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n const { value, intervals } = this.state;\n let shouldPublish = false;\n\n if (value === AUTO_VARIABLE_VALUE) {\n shouldPublish = true;\n } else if (!value && intervals.length > 0) {\n const firstOption = intervals[0];\n this.setState({ value: firstOption });\n shouldPublish = true;\n }\n\n if (shouldPublish) {\n this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n }\n\n return of({});\n }\n\n public static Component = ({ model }: SceneComponentProps<IntervalVariable>) => {\n const { key, value } = model.useState();\n return (\n <Select\n id={key}\n placeholder=\"Select value\"\n width=\"auto\"\n value={value}\n tabSelectsValue={false}\n options={model.getOptionsForSelect()}\n onChange={model._onChange}\n />\n );\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,yBACH,eAEV,CAAA;AAAA,EACS,YAAY,YAA8C,EAAA;AAC/D,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,UAAA;AAAA,MACN,KAAO,EAAA,EAAA;AAAA,MACP,SAAA,EAAW,CAAC,IAAA,EAAM,KAAO,EAAA,KAAA,EAAO,IAAM,EAAA,IAAA,EAAM,KAAO,EAAA,IAAA,EAAM,IAAM,EAAA,KAAA,EAAO,KAAK,CAAA;AAAA,MAC3E,IAAM,EAAA,EAAA;AAAA,MACN,aAAe,EAAA,EAAA;AAAA,MACf,eAAiB,EAAA,KAAA;AAAA,MACjB,WAAa,EAAA,KAAA;AAAA,MACb,SAAS,eAAgB,CAAA,kBAAA;AAAA,KAAA,EACtB,YACJ,CAAA,CAAA,CAAA;AA2DH,IAAO,IAAA,CAAA,SAAA,GAAY,CAAC,KAAmC,KAAA;AACrD,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,KAAO,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA;AACrC,MAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA,CAAA;AAAA,KAClE,CAAA;AA5DE,
|
|
1
|
+
{"version":3,"file":"IntervalVariable.js","sources":["../../../../src/variables/variants/IntervalVariable.tsx"],"sourcesContent":["import { rangeUtil, SelectableValue } from '@grafana/data';\nimport { VariableRefresh } from '@grafana/schema';\nimport { Select } from '@grafana/ui';\nimport React from 'react';\nimport { Observable, of } from 'rxjs';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../services/SceneObjectUrlSyncConfig';\nimport { AUTO_VARIABLE_TEXT, AUTO_VARIABLE_VALUE } from '../constants';\nimport {\n SceneVariable,\n SceneVariableState,\n SceneVariableValueChangedEvent,\n ValidateAndUpdateResult,\n VariableValue,\n} from '../types';\n\nexport interface IntervalVariableState extends SceneVariableState {\n intervals: string[];\n value: string;\n autoEnabled: boolean;\n autoMinInterval: string;\n autoStepCount: number;\n refresh: VariableRefresh;\n}\n\nexport class IntervalVariable\n extends SceneObjectBase<IntervalVariableState>\n implements SceneVariable<IntervalVariableState>\n{\n public constructor(initialState: Partial<IntervalVariableState>) {\n super({\n type: 'interval',\n value: '',\n intervals: ['1m', '10m', '30m', '1h', '6h', '12h', '1d', '7d', '14d', '30d'],\n name: '',\n autoStepCount: 30,\n autoMinInterval: '10s',\n autoEnabled: false,\n refresh: VariableRefresh.onTimeRangeChanged,\n ...initialState,\n });\n\n this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });\n }\n\n private getKey(): string {\n return `var-${this.state.name}`;\n }\n\n public getUrlState() {\n return { [this.getKey()]: this.state.value };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues) {\n const update: Partial<IntervalVariableState> = {};\n const val = values[this.getKey()];\n if (typeof val === 'string') {\n // support old auto interval url value\n if (val.startsWith('$__auto_interval_')) {\n update.value = AUTO_VARIABLE_VALUE;\n } else {\n update.value = val;\n }\n }\n this.setState(update);\n }\n\n public getOptionsForSelect(): Array<SelectableValue<string>> {\n const { value: currentValue, intervals, autoEnabled } = this.state;\n\n let options = intervals.map((interval) => ({ value: interval, label: interval }));\n\n if (autoEnabled) {\n options = [{ value: AUTO_VARIABLE_VALUE, label: AUTO_VARIABLE_TEXT }, ...options];\n }\n\n // If the current value is not in the list of intervals, add it to the list\n if (currentValue && !options.some((option) => option.value === currentValue)) {\n options.push({ value: currentValue, label: currentValue });\n }\n\n return options;\n }\n\n public getValue(): VariableValue {\n const { value, autoStepCount, autoMinInterval } = this.state;\n if (value === AUTO_VARIABLE_VALUE) {\n return this.getAutoRefreshInteval(autoStepCount, autoMinInterval);\n }\n\n return value;\n }\n\n private getAutoRefreshInteval(autoStepCount: number, minRefreshInterval: string) {\n const timeRange = sceneGraph.getTimeRange(this).state.value;\n const intervalObject = rangeUtil.calculateInterval(timeRange, autoStepCount, minRefreshInterval);\n return intervalObject.interval;\n }\n\n public _onChange = (value: SelectableValue<string>) => {\n this.setState({ value: value.value! });\n this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n };\n\n public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n const { value, intervals } = this.state;\n let shouldPublish = false;\n\n if (value === AUTO_VARIABLE_VALUE) {\n shouldPublish = true;\n } else if (!value && intervals.length > 0) {\n const firstOption = intervals[0];\n this.setState({ value: firstOption });\n shouldPublish = true;\n }\n\n if (shouldPublish) {\n this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n }\n\n return of({});\n }\n\n public static Component = ({ model }: SceneComponentProps<IntervalVariable>) => {\n const { key, value } = model.useState();\n return (\n <Select\n id={key}\n placeholder=\"Select value\"\n width=\"auto\"\n value={value}\n tabSelectsValue={false}\n options={model.getOptionsForSelect()}\n onChange={model._onChange}\n />\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -7255,7 +7255,7 @@ class IntervalVariable extends SceneObjectBase {
|
|
|
7255
7255
|
this.setState({ value: value.value });
|
|
7256
7256
|
this.publishEvent(new SceneVariableValueChangedEvent(this), true);
|
|
7257
7257
|
};
|
|
7258
|
-
this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: [this.getKey()] });
|
|
7258
|
+
this._urlSync = new SceneObjectUrlSyncConfig(this, { keys: () => [this.getKey()] });
|
|
7259
7259
|
}
|
|
7260
7260
|
getKey() {
|
|
7261
7261
|
return `var-${this.state.name}`;
|