@grafana/scenes 4.14.0--canary.709.8878831440.0 → 4.14.0--canary.709.8892811931.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.
@@ -159,6 +159,7 @@ function GroupByVariableRenderer({ model }) {
159
159
  id: key,
160
160
  placeholder,
161
161
  width: "auto",
162
+ inputValue,
162
163
  value: uncommittedValue,
163
164
  noMultiValueWrap: true,
164
165
  maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,
@@ -1 +1 @@
1
- {"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { AdHocVariableFilter, DataSourceApi, MetricFindValue } from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ValidateAndUpdateResult, VariableValueOption, VariableValueSingle } from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { InputActionMeta, MultiSelect } from '@grafana/ui';\nimport { isArray } from 'lodash';\nimport { getQueriesForVariables } from '../utils';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n /** Defaults to \"Group\" */\n name: string;\n /** The visible keys to group on */\n // TODO review this type and name (naming is hard)\n defaultOptions?: MetricFindValue[];\n /** Base filters to always apply when looking up keys */\n baseFilters?: AdHocVariableFilter[];\n /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n datasource: DataSourceRef | null;\n /** Controls if the group by can be changed */\n readOnly?: boolean;\n /**\n * @experimental\n * Controls the layout and design of the label.\n * Vertical layout does not yet support operator selector.\n */\n layout?: ControlsLayout;\n /**\n * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n */\n applyMode?: 'auto' | 'manual';\n /**\n * Filter out the keys that do not match the regex.\n */\n tagKeyRegexFilter?: RegExp;\n /**\n * Extension hook for customizing the key lookup.\n * Return replace: true if you want to override the default lookup\n * Return replace: false if you want to combine the results with the default lookup\n */\n getTagKeysProvider?: getTagKeysProvider;\n}\n\nexport type getTagKeysProvider = (\n set: GroupByVariable,\n currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n static Component = GroupByVariableRenderer;\n isLazy = true;\n\n public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n return this.getValueOptions({}).pipe(\n map((options) => {\n this._updateValueGivenNewOptions(options);\n return {};\n })\n );\n }\n\n private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n const { value: currentValue, text: currentText } = this.state;\n\n const stateUpdate: Partial<MultiValueVariableState> = {\n options,\n loading: false,\n value: currentValue ?? [],\n text: currentText ?? [],\n };\n\n this.setState(stateUpdate);\n }\n\n public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n // When default dimensions are provided, return the static list\n if (this.state.defaultOptions) {\n return of(\n this.state.defaultOptions.map((o) => ({\n label: o.text,\n value: String(o.value),\n }))\n );\n }\n\n this.setState({ loading: true, error: null });\n\n return from(\n getDataSource(this.state.datasource, {\n __sceneObject: { text: '__sceneObject', value: this },\n })\n ).pipe(\n mergeMap((ds) => {\n return from(this._getKeys(ds)).pipe(\n take(1),\n mergeMap((data: MetricFindValue[]) => {\n const a: VariableValueOption[] = data.map((i) => {\n return {\n label: i.text,\n value: i.value ? String(i.value) : i.text,\n };\n });\n return of(a);\n })\n );\n })\n );\n }\n\n public constructor(initialState: Partial<GroupByVariableState>) {\n super({\n isMulti: true,\n name: '',\n value: [],\n text: [],\n options: [],\n datasource: null,\n baseFilters: [],\n applyMode: 'auto',\n layout: 'horizontal',\n type: 'groupby' as VariableType,\n ...initialState,\n noValueOnClear: true,\n });\n\n this.addActivationHandler(() => {\n allActiveGroupByVariables.add(this);\n\n return () => allActiveGroupByVariables.delete(this);\n });\n }\n\n /**\n * Get possible keys given current filters. Do not call from plugins directly\n */\n public _getKeys = async (ds: DataSourceApi) => {\n // TODO: provide current dimensions?\n const override = await this.state.getTagKeysProvider?.(this, null);\n\n if (override && override.replace) {\n return override.values;\n }\n\n if (this.state.defaultOptions) {\n return this.state.defaultOptions.concat(override?.values ?? []);\n }\n\n if (!ds.getTagKeys) {\n return [];\n }\n\n const queries = getQueriesForVariables(this);\n\n const otherFilters = this.state.baseFilters || [];\n const timeRange = sceneGraph.getTimeRange(this).state.value;\n // @ts-expect-error TODO: remove this once 10.4.0 is released\n let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n if (override) {\n keys = keys.concat(override.values);\n }\n\n const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n if (tagKeyRegexFilter) {\n keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n }\n\n return keys;\n };\n\n /**\n * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n */\n public getDefaultMultiState(options: VariableValueOption[]): { value: VariableValueSingle[]; text: string[] } {\n return { value: [], text: [] };\n }\n}\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n const [inputValue, setInputValue] = useState('');\n\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n // Detect value changes outside\n useEffect(() => {\n setUncommittedValue(arrayValue);\n }, [arrayValue]);\n\n const onInputChange = (value: string, { action }: InputActionMeta) => {\n if (action === 'input-change') {\n setInputValue(value);\n if (model.onSearchChange) {\n model.onSearchChange!(value);\n }\n return value;\n }\n\n if (action === 'input-blur') {\n setInputValue('');\n return '';\n }\n\n return inputValue;\n };\n\n const placeholder = 'Select value';\n\n return (\n <MultiSelect<VariableValueSingle>\n data-testid={`GroupBySelect-${key}`}\n id={key}\n placeholder={placeholder}\n width=\"auto\"\n value={uncommittedValue}\n noMultiValueWrap={true}\n maxVisibleValues={maxVisibleValues ?? 5}\n tabSelectsValue={false}\n virtualized\n allowCustomValue\n options={model.getOptionsForSelect()}\n closeMenuOnSelect={false}\n isOpen={isOptionsOpen}\n isClearable={true}\n hideSelectedOptions={false}\n isLoading={isFetchingOptions}\n components={{ Option: OptionWithCheckbox }}\n onInputChange={onInputChange}\n onBlur={() => {\n model.changeValueTo(uncommittedValue);\n }}\n onChange={(newValue, action) => {\n if (action.action === 'clear' && noValueOnClear) {\n model.changeValueTo([]);\n }\n setUncommittedValue(newValue.map((x) => x.value!));\n }}\n onOpenMenu={async () => {\n setIsFetchingOptions(true);\n await lastValueFrom(model.validateAndUpdate());\n setIsFetchingOptions(false);\n setIsOptionsOpen(true);\n }}\n onCloseMenu={() => {\n setIsOptionsOpen(false);\n }}\n />\n );\n}\n"],"names":["value"],"mappings":"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"}
1
+ {"version":3,"file":"GroupByVariable.js","sources":["../../../../src/variables/groupby/GroupByVariable.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { AdHocVariableFilter, DataSourceApi, MetricFindValue } from '@grafana/data';\nimport { allActiveGroupByVariables } from './findActiveGroupByVariablesByUid';\nimport { DataSourceRef, VariableType } from '@grafana/schema';\nimport { SceneComponentProps, ControlsLayout } from '../../core/types';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ValidateAndUpdateResult, VariableValueOption, VariableValueSingle } from '../types';\nimport { MultiValueVariable, MultiValueVariableState, VariableGetOptionsArgs } from '../variants/MultiValueVariable';\nimport { from, lastValueFrom, map, mergeMap, Observable, of, take } from 'rxjs';\nimport { getDataSource } from '../../utils/getDataSource';\nimport { InputActionMeta, MultiSelect } from '@grafana/ui';\nimport { isArray } from 'lodash';\nimport { getQueriesForVariables } from '../utils';\nimport { OptionWithCheckbox } from '../components/VariableValueSelect';\n\nexport interface GroupByVariableState extends MultiValueVariableState {\n /** Defaults to \"Group\" */\n name: string;\n /** The visible keys to group on */\n // TODO review this type and name (naming is hard)\n defaultOptions?: MetricFindValue[];\n /** Base filters to always apply when looking up keys */\n baseFilters?: AdHocVariableFilter[];\n /** Datasource to use for getTagKeys and also controls which scene queries the group by should apply to */\n datasource: DataSourceRef | null;\n /** Controls if the group by can be changed */\n readOnly?: boolean;\n /**\n * @experimental\n * Controls the layout and design of the label.\n * Vertical layout does not yet support operator selector.\n */\n layout?: ControlsLayout;\n /**\n * Defaults to same-datasource which means group by will automatically be applied to all queries with the same data source as this GroupBySet.\n * In manual mode no queries are re-run on changes, and you have to manually apply the filter to whatever queries you want.\n */\n applyMode?: 'auto' | 'manual';\n /**\n * Filter out the keys that do not match the regex.\n */\n tagKeyRegexFilter?: RegExp;\n /**\n * Extension hook for customizing the key lookup.\n * Return replace: true if you want to override the default lookup\n * Return replace: false if you want to combine the results with the default lookup\n */\n getTagKeysProvider?: getTagKeysProvider;\n}\n\nexport type getTagKeysProvider = (\n set: GroupByVariable,\n currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport class GroupByVariable extends MultiValueVariable<GroupByVariableState> {\n static Component = GroupByVariableRenderer;\n isLazy = true;\n\n public validateAndUpdate(): Observable<ValidateAndUpdateResult> {\n return this.getValueOptions({}).pipe(\n map((options) => {\n this._updateValueGivenNewOptions(options);\n return {};\n })\n );\n }\n\n private _updateValueGivenNewOptions(options: VariableValueOption[]) {\n const { value: currentValue, text: currentText } = this.state;\n\n const stateUpdate: Partial<MultiValueVariableState> = {\n options,\n loading: false,\n value: currentValue ?? [],\n text: currentText ?? [],\n };\n\n this.setState(stateUpdate);\n }\n\n public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> {\n // When default dimensions are provided, return the static list\n if (this.state.defaultOptions) {\n return of(\n this.state.defaultOptions.map((o) => ({\n label: o.text,\n value: String(o.value),\n }))\n );\n }\n\n this.setState({ loading: true, error: null });\n\n return from(\n getDataSource(this.state.datasource, {\n __sceneObject: { text: '__sceneObject', value: this },\n })\n ).pipe(\n mergeMap((ds) => {\n return from(this._getKeys(ds)).pipe(\n take(1),\n mergeMap((data: MetricFindValue[]) => {\n const a: VariableValueOption[] = data.map((i) => {\n return {\n label: i.text,\n value: i.value ? String(i.value) : i.text,\n };\n });\n return of(a);\n })\n );\n })\n );\n }\n\n public constructor(initialState: Partial<GroupByVariableState>) {\n super({\n isMulti: true,\n name: '',\n value: [],\n text: [],\n options: [],\n datasource: null,\n baseFilters: [],\n applyMode: 'auto',\n layout: 'horizontal',\n type: 'groupby' as VariableType,\n ...initialState,\n noValueOnClear: true,\n });\n\n this.addActivationHandler(() => {\n allActiveGroupByVariables.add(this);\n\n return () => allActiveGroupByVariables.delete(this);\n });\n }\n\n /**\n * Get possible keys given current filters. Do not call from plugins directly\n */\n public _getKeys = async (ds: DataSourceApi) => {\n // TODO: provide current dimensions?\n const override = await this.state.getTagKeysProvider?.(this, null);\n\n if (override && override.replace) {\n return override.values;\n }\n\n if (this.state.defaultOptions) {\n return this.state.defaultOptions.concat(override?.values ?? []);\n }\n\n if (!ds.getTagKeys) {\n return [];\n }\n\n const queries = getQueriesForVariables(this);\n\n const otherFilters = this.state.baseFilters || [];\n const timeRange = sceneGraph.getTimeRange(this).state.value;\n // @ts-expect-error TODO: remove this once 10.4.0 is released\n let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n if (override) {\n keys = keys.concat(override.values);\n }\n\n const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n if (tagKeyRegexFilter) {\n keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n }\n\n return keys;\n };\n\n /**\n * Allows clearing the value of the variable to an empty value. Overrides default behavior of a MultiValueVariable\n */\n public getDefaultMultiState(options: VariableValueOption[]): { value: VariableValueSingle[]; text: string[] } {\n return { value: [], text: [] };\n }\n}\nexport function GroupByVariableRenderer({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n const [isFetchingOptions, setIsFetchingOptions] = useState(false);\n const [isOptionsOpen, setIsOptionsOpen] = useState(false);\n const [inputValue, setInputValue] = useState('');\n\n // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n // Detect value changes outside\n useEffect(() => {\n setUncommittedValue(arrayValue);\n }, [arrayValue]);\n\n const onInputChange = (value: string, { action }: InputActionMeta) => {\n if (action === 'input-change') {\n setInputValue(value);\n if (model.onSearchChange) {\n model.onSearchChange!(value);\n }\n return value;\n }\n\n if (action === 'input-blur') {\n setInputValue('');\n return '';\n }\n\n return inputValue;\n };\n\n const placeholder = 'Select value';\n\n return (\n <MultiSelect<VariableValueSingle>\n data-testid={`GroupBySelect-${key}`}\n id={key}\n placeholder={placeholder}\n width=\"auto\"\n inputValue={inputValue}\n value={uncommittedValue}\n noMultiValueWrap={true}\n maxVisibleValues={maxVisibleValues ?? 5}\n tabSelectsValue={false}\n virtualized\n allowCustomValue\n options={model.getOptionsForSelect()}\n closeMenuOnSelect={false}\n isOpen={isOptionsOpen}\n isClearable={true}\n hideSelectedOptions={false}\n isLoading={isFetchingOptions}\n components={{ Option: OptionWithCheckbox }}\n onInputChange={onInputChange}\n onBlur={() => {\n model.changeValueTo(uncommittedValue);\n }}\n onChange={(newValue, action) => {\n if (action.action === 'clear' && noValueOnClear) {\n model.changeValueTo([]);\n }\n setUncommittedValue(newValue.map((x) => x.value!));\n }}\n onOpenMenu={async () => {\n setIsFetchingOptions(true);\n await lastValueFrom(model.validateAndUpdate());\n setIsFetchingOptions(false);\n setIsOptionsOpen(true);\n }}\n onCloseMenu={() => {\n setIsOptionsOpen(false);\n }}\n />\n );\n}\n"],"names":["value"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -3149,6 +3149,7 @@ function GroupByVariableRenderer({ model }) {
3149
3149
  id: key,
3150
3150
  placeholder,
3151
3151
  width: "auto",
3152
+ inputValue,
3152
3153
  value: uncommittedValue,
3153
3154
  noMultiValueWrap: true,
3154
3155
  maxVisibleValues: maxVisibleValues != null ? maxVisibleValues : 5,