@grafana/scenes 5.3.9--canary.827.9887483180.0 → 5.3.9--canary.830.9908208124.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/variables/adhoc/AdHocCombobox.js +374 -0
- package/dist/esm/variables/adhoc/AdHocCombobox.js.map +1 -0
- package/dist/esm/variables/adhoc/AdHocFiltersVariableV2.js +58 -0
- package/dist/esm/variables/adhoc/AdHocFiltersVariableV2.js.map +1 -0
- package/dist/esm/variables/sets/SceneVariableSet.js +1 -8
- package/dist/esm/variables/sets/SceneVariableSet.js.map +1 -1
- package/dist/esm/variables/types.js +1 -4
- package/dist/esm/variables/types.js.map +1 -1
- package/dist/esm/variables/variants/MultiValueVariable.js +1 -4
- package/dist/esm/variables/variants/MultiValueVariable.js.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +1001 -596
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/esm/index.js
CHANGED
@@ -24,7 +24,7 @@ export { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase.js';
|
|
24
24
|
export { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls.js';
|
25
25
|
export { SceneDataTransformer } from './querying/SceneDataTransformer.js';
|
26
26
|
export { registerQueryWithController } from './querying/registerQueryWithController.js';
|
27
|
-
export {
|
27
|
+
export { SceneVariableValueChangedEvent, isCustomVariableValue } from './variables/types.js';
|
28
28
|
export { VariableDependencyConfig } from './variables/VariableDependencyConfig.js';
|
29
29
|
export { formatRegistry } from './variables/interpolation/formatRegistry.js';
|
30
30
|
export { VariableValueSelectWrapper, VariableValueSelectors } from './variables/components/VariableValueSelectors.js';
|
@@ -40,6 +40,7 @@ export { MultiValueVariable } from './variables/variants/MultiValueVariable.js';
|
|
40
40
|
export { LocalValueVariable } from './variables/variants/LocalValueVariable.js';
|
41
41
|
export { IntervalVariable } from './variables/variants/IntervalVariable.js';
|
42
42
|
export { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable.js';
|
43
|
+
export { AdHocFiltersVariableV2 } from './variables/adhoc/AdHocFiltersVariableV2.js';
|
43
44
|
export { GroupByVariable } from './variables/groupby/GroupByVariable.js';
|
44
45
|
export { UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager.js';
|
45
46
|
export { useUrlSync } from './services/useUrlSync.js';
|
package/dist/esm/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { registerVariableMacro } from './variables/macros';\nimport { renderPrometheusLabelFilters } from './variables/utils';\nimport {\n isAdHocVariable,\n isQueryVariable,\n isTextBoxVariable,\n isCustomVariable,\n isDataSourceVariable,\n isConstantVariable,\n isIntervalVariable,\n isGroupByVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase, useSceneObjectState } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport {\n type ExtraQueryDescriptor,\n type ExtraQueryProvider,\n type ExtraQueryDataProcessor,\n} from './querying/ExtraQueryProvider';\nexport { SceneDataLayerSet, SceneDataLayerSetBase } from './querying/SceneDataLayerSet';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n SceneQueryControllerLike,\n SceneQueryControllerEntryType,\n SceneQueryControllerEntry,\n} from './behaviors/SceneQueryController';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { VariableValueControl } from './variables/components/VariableValueControl';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport {\n MultiValueVariable,\n type MultiValueVariableState,\n type VariableGetOptionsArgs,\n} from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { useUrlSync } from './services/useUrlSync';\nexport { UrlSyncContextProvider } from './services/UrlSyncContextProvider';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker, type SceneRefreshPickerState } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneByVariableRepeater } from './components/SceneByVariableRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n SceneFlexLayout,\n SceneFlexItem,\n type SceneFlexItemState,\n type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n type SceneAppPageLike,\n type SceneRouteMatch,\n type SceneAppPageState,\n type SceneAppDrilldownView,\n type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport {\n PanelBuilders,\n PanelOptionsBuilders,\n FieldConfigBuilders,\n FieldConfigOverridesBuilder,\n} from './core/PanelBuilders';\nexport { FieldConfigBuilder } from './core/PanelBuilders/FieldConfigBuilder';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\nexport { VariableValueSelectWrapper } from './variables/components/VariableValueSelectors';\nexport { renderSelectForVariable } from './variables/components/VariableValueSelect';\nexport { VizConfigBuilder } from './core/PanelBuilders/VizConfigBuilder';\nexport { VizConfigBuilders } from './core/PanelBuilders/VizConfigBuilders';\nexport { type VizConfig } from './core/PanelBuilders/types';\n\nexport const sceneUtils = {\n getUrlWithAppState,\n registerRuntimePanelPlugin,\n registerRuntimeDataSource,\n registerVariableMacro,\n cloneSceneObjectState,\n syncStateFromSearchParams,\n getUrlState,\n renderPrometheusLabelFilters,\n\n // Variable guards\n isAdHocVariable,\n isConstantVariable,\n isCustomVariable,\n isDataSourceVariable,\n isIntervalVariable,\n isQueryVariable,\n isTextBoxVariable,\n isGroupByVariable,\n};\n"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import { getUrlWithAppState } from './components/SceneApp/utils';\nimport { registerRuntimePanelPlugin } from './components/VizPanel/registerRuntimePanelPlugin';\nimport { cloneSceneObjectState } from './core/sceneGraph/utils';\nimport { registerRuntimeDataSource } from './querying/RuntimeDataSource';\nimport { getUrlState, syncStateFromSearchParams } from './services/utils';\nimport { registerVariableMacro } from './variables/macros';\nimport { renderPrometheusLabelFilters } from './variables/utils';\nimport {\n isAdHocVariable,\n isQueryVariable,\n isTextBoxVariable,\n isCustomVariable,\n isDataSourceVariable,\n isConstantVariable,\n isIntervalVariable,\n isGroupByVariable,\n} from './variables/variants/guards';\n\nexport * from './core/types';\nexport * from './core/events';\nexport { sceneGraph } from './core/sceneGraph';\nexport * as behaviors from './behaviors';\nexport * as dataLayers from './querying/layers';\n\nexport { SceneObjectBase, useSceneObjectState } from './core/SceneObjectBase';\nexport { SceneDataNode } from './core/SceneDataNode';\nexport { SceneTimeRange } from './core/SceneTimeRange';\nexport { SceneTimeZoneOverride } from './core/SceneTimeZoneOverride';\n\nexport { SceneQueryRunner, type QueryRunnerState } from './querying/SceneQueryRunner';\nexport {\n type ExtraQueryDescriptor,\n type ExtraQueryProvider,\n type ExtraQueryDataProcessor,\n} from './querying/ExtraQueryProvider';\nexport { SceneDataLayerSet, SceneDataLayerSetBase } from './querying/SceneDataLayerSet';\nexport { SceneDataLayerBase } from './querying/layers/SceneDataLayerBase';\nexport { SceneDataLayerControls } from './querying/layers/SceneDataLayerControls';\nexport { SceneDataTransformer } from './querying/SceneDataTransformer';\nexport { registerQueryWithController } from './querying/registerQueryWithController';\nexport { registerRuntimeDataSource, RuntimeDataSource } from './querying/RuntimeDataSource';\nexport type {\n SceneQueryControllerLike,\n SceneQueryControllerEntryType,\n SceneQueryControllerEntry,\n} from './behaviors/SceneQueryController';\n\nexport * from './variables/types';\nexport { VariableDependencyConfig } from './variables/VariableDependencyConfig';\nexport { formatRegistry, type FormatVariable } from './variables/interpolation/formatRegistry';\nexport { VariableValueSelectors } from './variables/components/VariableValueSelectors';\nexport { VariableValueControl } from './variables/components/VariableValueControl';\nexport { SceneVariableSet } from './variables/sets/SceneVariableSet';\nexport { ConstantVariable } from './variables/variants/ConstantVariable';\nexport { CustomVariable } from './variables/variants/CustomVariable';\nexport { DataSourceVariable } from './variables/variants/DataSourceVariable';\nexport { QueryVariable } from './variables/variants/query/QueryVariable';\nexport { TestVariable } from './variables/variants/TestVariable';\nexport { TextBoxVariable } from './variables/variants/TextBoxVariable';\nexport {\n MultiValueVariable,\n type MultiValueVariableState,\n type VariableGetOptionsArgs,\n} from './variables/variants/MultiValueVariable';\nexport { LocalValueVariable } from './variables/variants/LocalValueVariable';\nexport { IntervalVariable } from './variables/variants/IntervalVariable';\nexport { AdHocFiltersVariable } from './variables/adhoc/AdHocFiltersVariable';\nexport { AdHocFiltersVariableV2 } from './variables/adhoc/AdHocFiltersVariableV2';\nexport { GroupByVariable } from './variables/groupby/GroupByVariable';\nexport { type MacroVariableConstructor } from './variables/macros/types';\n\nexport { type UrlSyncManagerLike, UrlSyncManager, getUrlSyncManager } from './services/UrlSyncManager';\nexport { useUrlSync } from './services/useUrlSync';\nexport { UrlSyncContextProvider } from './services/UrlSyncContextProvider';\nexport { SceneObjectUrlSyncConfig } from './services/SceneObjectUrlSyncConfig';\n\nexport { EmbeddedScene, type EmbeddedSceneState } from './components/EmbeddedScene';\nexport { VizPanel, type VizPanelState } from './components/VizPanel/VizPanel';\nexport { VizPanelMenu } from './components/VizPanel/VizPanelMenu';\nexport { NestedScene } from './components/NestedScene';\nexport { SceneCanvasText } from './components/SceneCanvasText';\nexport { SceneToolbarButton, SceneToolbarInput } from './components/SceneToolbarButton';\nexport { SceneTimePicker } from './components/SceneTimePicker';\nexport { SceneRefreshPicker, type SceneRefreshPickerState } from './components/SceneRefreshPicker';\nexport { SceneTimeRangeTransformerBase } from './core/SceneTimeRangeTransformerBase';\nexport { SceneTimeRangeCompare } from './components/SceneTimeRangeCompare';\nexport { SceneByFrameRepeater } from './components/SceneByFrameRepeater';\nexport { SceneByVariableRepeater } from './components/SceneByVariableRepeater';\nexport { SceneControlsSpacer } from './components/SceneControlsSpacer';\nexport {\n SceneFlexLayout,\n SceneFlexItem,\n type SceneFlexItemState,\n type SceneFlexItemLike,\n} from './components/layout/SceneFlexLayout';\nexport { SceneCSSGridLayout, SceneCSSGridItem } from './components/layout/CSSGrid/SceneCSSGridLayout';\nexport { SceneGridLayout } from './components/layout/grid/SceneGridLayout';\nexport { SceneGridItem } from './components/layout/grid/SceneGridItem';\nexport { SceneGridRow } from './components/layout/grid/SceneGridRow';\nexport { type SceneGridItemStateLike, type SceneGridItemLike } from './components/layout/grid/types';\nexport { SplitLayout } from './components/layout/split/SplitLayout';\nexport {\n type SceneAppPageLike,\n type SceneRouteMatch,\n type SceneAppPageState,\n type SceneAppDrilldownView,\n type SceneAppRoute,\n} from './components/SceneApp/types';\nexport { SceneApp, useSceneApp } from './components/SceneApp/SceneApp';\nexport { SceneAppPage } from './components/SceneApp/SceneAppPage';\nexport { SceneReactObject } from './components/SceneReactObject';\nexport { SceneObjectRef } from './core/SceneObjectRef';\nexport {\n PanelBuilders,\n PanelOptionsBuilders,\n FieldConfigBuilders,\n FieldConfigOverridesBuilder,\n} from './core/PanelBuilders';\nexport { FieldConfigBuilder } from './core/PanelBuilders/FieldConfigBuilder';\nexport { VizPanelBuilder } from './core/PanelBuilders/VizPanelBuilder';\nexport { SceneDebugger } from './components/SceneDebugger/SceneDebugger';\nexport { VariableValueSelectWrapper } from './variables/components/VariableValueSelectors';\nexport { renderSelectForVariable } from './variables/components/VariableValueSelect';\nexport { VizConfigBuilder } from './core/PanelBuilders/VizConfigBuilder';\nexport { VizConfigBuilders } from './core/PanelBuilders/VizConfigBuilders';\nexport { type VizConfig } from './core/PanelBuilders/types';\n\nexport const sceneUtils = {\n getUrlWithAppState,\n registerRuntimePanelPlugin,\n registerRuntimeDataSource,\n registerVariableMacro,\n cloneSceneObjectState,\n syncStateFromSearchParams,\n getUrlState,\n renderPrometheusLabelFilters,\n\n // Variable guards\n isAdHocVariable,\n isConstantVariable,\n isCustomVariable,\n isDataSourceVariable,\n isIntervalVariable,\n isQueryVariable,\n isTextBoxVariable,\n isGroupByVariable,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HO,MAAM,UAAa,GAAA;AAAA,EACxB,kBAAA;AAAA,EACA,0BAAA;AAAA,EACA,yBAAA;AAAA,EACA,qBAAA;AAAA,EACA,qBAAA;AAAA,EACA,yBAAA;AAAA,EACA,WAAA;AAAA,EACA,4BAAA;AAAA,EAGA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,gBAAA;AAAA,EACA,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,iBAAA;AAAA,EACA,iBAAA;AACF;;;;"}
|
@@ -0,0 +1,374 @@
|
|
1
|
+
import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
|
2
|
+
import { useId, useFloating, autoUpdate, flip, size, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
|
3
|
+
import { useTheme2, getSelectStyles, useStyles2, IconButton } from '@grafana/ui';
|
4
|
+
import { cx, css } from '@emotion/css';
|
5
|
+
import { flushSync } from 'react-dom';
|
6
|
+
|
7
|
+
var __defProp = Object.defineProperty;
|
8
|
+
var __defProps = Object.defineProperties;
|
9
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
10
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
11
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
12
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
13
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
14
|
+
var __spreadValues = (a, b) => {
|
15
|
+
for (var prop in b || (b = {}))
|
16
|
+
if (__hasOwnProp.call(b, prop))
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
18
|
+
if (__getOwnPropSymbols)
|
19
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
20
|
+
if (__propIsEnum.call(b, prop))
|
21
|
+
__defNormalProp(a, prop, b[prop]);
|
22
|
+
}
|
23
|
+
return a;
|
24
|
+
};
|
25
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
26
|
+
var __objRest = (source, exclude) => {
|
27
|
+
var target = {};
|
28
|
+
for (var prop in source)
|
29
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
30
|
+
target[prop] = source[prop];
|
31
|
+
if (source != null && __getOwnPropSymbols)
|
32
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
33
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
34
|
+
target[prop] = source[prop];
|
35
|
+
}
|
36
|
+
return target;
|
37
|
+
};
|
38
|
+
const Item = forwardRef(
|
39
|
+
(_a, ref) => {
|
40
|
+
var _b = _a, { children, active } = _b, rest = __objRest(_b, ["children", "active"]);
|
41
|
+
const theme = useTheme2();
|
42
|
+
const selectStyles = getSelectStyles(theme);
|
43
|
+
const id = useId();
|
44
|
+
return /* @__PURE__ */ React.createElement("div", __spreadValues({
|
45
|
+
ref,
|
46
|
+
role: "option",
|
47
|
+
id,
|
48
|
+
"aria-selected": active,
|
49
|
+
className: cx(selectStyles.option, active && selectStyles.optionFocused)
|
50
|
+
}, rest), /* @__PURE__ */ React.createElement("div", {
|
51
|
+
className: selectStyles.optionBody,
|
52
|
+
"data-testid": `data-testid ad hoc filter option value ${children}`
|
53
|
+
}, /* @__PURE__ */ React.createElement("span", null, children)));
|
54
|
+
}
|
55
|
+
);
|
56
|
+
function AdHocCombobox({ filter, model, wip, handleChangeViewMode }) {
|
57
|
+
var _a;
|
58
|
+
const [open, setOpen] = useState(false);
|
59
|
+
const [options, setOptions] = useState([]);
|
60
|
+
const [inputValue, setInputValue] = useState("");
|
61
|
+
const [activeIndex, setActiveIndex] = useState(null);
|
62
|
+
const [inputType, setInputType] = useState(!wip ? "value" : "key");
|
63
|
+
const styles = useStyles2(getStyles2);
|
64
|
+
const listRef = useRef([]);
|
65
|
+
const { _wip } = model.useState();
|
66
|
+
const filterToUse = filter || _wip;
|
67
|
+
const { refs, floatingStyles, context } = useFloating({
|
68
|
+
whileElementsMounted: autoUpdate,
|
69
|
+
open,
|
70
|
+
onOpenChange: (nextOpen, _, reason) => {
|
71
|
+
setOpen(nextOpen);
|
72
|
+
if (reason === "outside-press") {
|
73
|
+
handleChangeViewMode == null ? void 0 : handleChangeViewMode();
|
74
|
+
}
|
75
|
+
},
|
76
|
+
middleware: [
|
77
|
+
flip({ padding: 10 }),
|
78
|
+
size({
|
79
|
+
apply({ rects, availableHeight, elements }) {
|
80
|
+
Object.assign(elements.floating.style, {
|
81
|
+
width: `${rects.reference.width}px`,
|
82
|
+
maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`
|
83
|
+
});
|
84
|
+
},
|
85
|
+
padding: 10
|
86
|
+
})
|
87
|
+
]
|
88
|
+
});
|
89
|
+
const role = useRole(context, { role: "listbox" });
|
90
|
+
const dismiss = useDismiss(context, {
|
91
|
+
outsidePress: (event) => {
|
92
|
+
var _a2;
|
93
|
+
return !event.currentTarget.classList.contains(
|
94
|
+
`${(_a2 = filterToUse == null ? void 0 : filterToUse.key) != null ? _a2 : ""}-operator`
|
95
|
+
);
|
96
|
+
}
|
97
|
+
});
|
98
|
+
const listNav = useListNavigation(context, {
|
99
|
+
listRef,
|
100
|
+
activeIndex,
|
101
|
+
onNavigate: setActiveIndex,
|
102
|
+
virtual: true,
|
103
|
+
loop: true
|
104
|
+
});
|
105
|
+
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
|
106
|
+
function onChange(event) {
|
107
|
+
const value = event.target.value;
|
108
|
+
setInputValue(value);
|
109
|
+
setActiveIndex(0);
|
110
|
+
}
|
111
|
+
const items = options.filter(
|
112
|
+
(item) => {
|
113
|
+
var _a2, _b;
|
114
|
+
return (_b = (_a2 = item.label) != null ? _a2 : item.value) == null ? void 0 : _b.toLocaleLowerCase().startsWith(inputValue.toLowerCase());
|
115
|
+
}
|
116
|
+
);
|
117
|
+
useEffect(() => {
|
118
|
+
if (wip && !_wip) {
|
119
|
+
model._addWip();
|
120
|
+
}
|
121
|
+
}, [_wip]);
|
122
|
+
useEffect(() => {
|
123
|
+
if (!wip && refs.domReference.current) {
|
124
|
+
setInputType("value");
|
125
|
+
setInputValue("");
|
126
|
+
refs.domReference.current.focus();
|
127
|
+
}
|
128
|
+
}, []);
|
129
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, filterToUse ? /* @__PURE__ */ React.createElement("div", {
|
130
|
+
className: styles.pillWrapper
|
131
|
+
}, (filterToUse == null ? void 0 : filterToUse.key) ? /* @__PURE__ */ React.createElement("div", {
|
132
|
+
className: cx(styles.basePill, styles.keyPill)
|
133
|
+
}, filterToUse.key) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && inputType !== "operator" ? /* @__PURE__ */ React.createElement("div", {
|
134
|
+
className: cx(styles.basePill, `${(_a = filterToUse == null ? void 0 : filterToUse.key) != null ? _a : ""}-operator`),
|
135
|
+
role: "button",
|
136
|
+
"aria-label": "Edit filter operator",
|
137
|
+
tabIndex: 0,
|
138
|
+
onClick: () => {
|
139
|
+
var _a2;
|
140
|
+
flushSync(() => {
|
141
|
+
setInputType("operator");
|
142
|
+
});
|
143
|
+
(_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
|
144
|
+
},
|
145
|
+
onKeyDown: (e) => {
|
146
|
+
var _a2;
|
147
|
+
if (e.key === "Enter") {
|
148
|
+
flushSync(() => {
|
149
|
+
setInputType("operator");
|
150
|
+
});
|
151
|
+
(_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
|
152
|
+
}
|
153
|
+
}
|
154
|
+
}, filterToUse.operator) : null, (filterToUse == null ? void 0 : filterToUse.key) && (filterToUse == null ? void 0 : filterToUse.operator) && (filterToUse == null ? void 0 : filterToUse.value) && !["operator", "value"].includes(inputType) ? /* @__PURE__ */ React.createElement("div", {
|
155
|
+
className: cx(styles.basePill, styles.valuePill)
|
156
|
+
}, filterToUse.value) : null) : null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, getReferenceProps({
|
157
|
+
ref: refs.setReference,
|
158
|
+
onChange,
|
159
|
+
value: inputValue,
|
160
|
+
placeholder: !wip ? inputType === "operator" ? `${filterToUse[inputType]} ${filterToUse.value || ""}` : filterToUse[inputType] : "Filter by label values",
|
161
|
+
"aria-autocomplete": "list",
|
162
|
+
onKeyDown(event) {
|
163
|
+
var _a2;
|
164
|
+
if (event.key === "Enter" && activeIndex != null && items[activeIndex]) {
|
165
|
+
model._updateFilter(filterToUse, inputType, items[activeIndex]);
|
166
|
+
setInputValue("");
|
167
|
+
flushSync(() => {
|
168
|
+
if (inputType === "key") {
|
169
|
+
setInputType("operator");
|
170
|
+
} else if (inputType === "operator") {
|
171
|
+
setInputType("value");
|
172
|
+
} else if (inputType === "value") {
|
173
|
+
setInputType("key");
|
174
|
+
handleChangeViewMode == null ? void 0 : handleChangeViewMode();
|
175
|
+
}
|
176
|
+
});
|
177
|
+
(_a2 = refs.domReference.current) == null ? void 0 : _a2.focus();
|
178
|
+
}
|
179
|
+
}
|
180
|
+
})), {
|
181
|
+
className: styles.inputStyle,
|
182
|
+
key: inputType,
|
183
|
+
onFocus: async () => {
|
184
|
+
let options2 = [];
|
185
|
+
if (inputType === "key") {
|
186
|
+
options2 = await model._getKeys(null);
|
187
|
+
} else if (inputType === "operator") {
|
188
|
+
options2 = model._getOperators();
|
189
|
+
} else if (inputType === "value") {
|
190
|
+
options2 = await model._getValuesFor(filterToUse);
|
191
|
+
}
|
192
|
+
setActiveIndex(0);
|
193
|
+
setOptions(options2);
|
194
|
+
setOpen(true);
|
195
|
+
}
|
196
|
+
})), /* @__PURE__ */ React.createElement(FloatingPortal, null, open && /* @__PURE__ */ React.createElement(FloatingFocusManager, {
|
197
|
+
context,
|
198
|
+
initialFocus: -1,
|
199
|
+
visuallyHiddenDismiss: true
|
200
|
+
}, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, getFloatingProps({
|
201
|
+
ref: refs.setFloating,
|
202
|
+
style: __spreadProps(__spreadValues({}, floatingStyles), {
|
203
|
+
overflowY: "auto"
|
204
|
+
})
|
205
|
+
})), {
|
206
|
+
className: styles.dropdownWrapper
|
207
|
+
}), items.map((item, index) => {
|
208
|
+
var _a2;
|
209
|
+
return /* @__PURE__ */ React.createElement(Item, __spreadProps(__spreadValues({}, getItemProps({
|
210
|
+
key: item.value,
|
211
|
+
ref(node) {
|
212
|
+
listRef.current[index] = node;
|
213
|
+
},
|
214
|
+
onClick() {
|
215
|
+
var _a3;
|
216
|
+
model._updateFilter(filterToUse, inputType, item);
|
217
|
+
setInputValue("");
|
218
|
+
flushSync(() => {
|
219
|
+
if (inputType === "key") {
|
220
|
+
setInputType("operator");
|
221
|
+
} else if (inputType === "operator") {
|
222
|
+
setInputType("value");
|
223
|
+
} else if (inputType === "value") {
|
224
|
+
setInputType("key");
|
225
|
+
handleChangeViewMode == null ? void 0 : handleChangeViewMode();
|
226
|
+
}
|
227
|
+
});
|
228
|
+
(_a3 = refs.domReference.current) == null ? void 0 : _a3.focus();
|
229
|
+
}
|
230
|
+
})), {
|
231
|
+
active: activeIndex === index
|
232
|
+
}), (_a2 = item.label) != null ? _a2 : item.value);
|
233
|
+
})))));
|
234
|
+
}
|
235
|
+
const getStyles2 = (theme) => ({
|
236
|
+
pillWrapper: css({
|
237
|
+
display: "flex",
|
238
|
+
alignItems: "center",
|
239
|
+
whiteSpace: "nowrap"
|
240
|
+
}),
|
241
|
+
basePill: css(__spreadProps(__spreadValues({
|
242
|
+
display: "flex",
|
243
|
+
alignItems: "center",
|
244
|
+
background: theme.colors.action.disabledBackground,
|
245
|
+
border: `1px solid ${theme.colors.border.weak}`,
|
246
|
+
padding: theme.spacing(0.125, 1, 0.125, 1),
|
247
|
+
color: theme.colors.text.primary,
|
248
|
+
overflow: "hidden",
|
249
|
+
whiteSpace: "nowrap",
|
250
|
+
minHeight: "22px"
|
251
|
+
}, theme.typography.bodySmall), {
|
252
|
+
cursor: "pointer"
|
253
|
+
})),
|
254
|
+
keyPill: css({
|
255
|
+
fontWeight: theme.typography.fontWeightBold,
|
256
|
+
cursor: "default"
|
257
|
+
}),
|
258
|
+
valuePill: css({
|
259
|
+
background: theme.colors.action.selected
|
260
|
+
}),
|
261
|
+
dropdownWrapper: css({
|
262
|
+
backgroundColor: theme.colors.background.primary,
|
263
|
+
color: theme.colors.text.primary,
|
264
|
+
boxShadow: theme.shadows.z2
|
265
|
+
}),
|
266
|
+
inputStyle: css({
|
267
|
+
paddingBlock: 0,
|
268
|
+
"&:focus": {
|
269
|
+
outline: "none"
|
270
|
+
}
|
271
|
+
})
|
272
|
+
});
|
273
|
+
function AdHocFilterEditSwitch({ filter, model }) {
|
274
|
+
const styles = useStyles2(getStyles3);
|
275
|
+
const [viewMode, setViewMode] = useState(true);
|
276
|
+
const wrapRef = useRef(null);
|
277
|
+
const handleChangeViewMode = useCallback(() => {
|
278
|
+
flushSync(() => {
|
279
|
+
setViewMode((mode) => !mode);
|
280
|
+
});
|
281
|
+
if (wrapRef.current) {
|
282
|
+
wrapRef.current.focus();
|
283
|
+
}
|
284
|
+
}, []);
|
285
|
+
if (viewMode) {
|
286
|
+
return /* @__PURE__ */ React.createElement("div", {
|
287
|
+
className: styles.combinedFilterPill,
|
288
|
+
onClick: handleChangeViewMode,
|
289
|
+
onKeyDown: (e) => {
|
290
|
+
if (e.key === "Enter") {
|
291
|
+
handleChangeViewMode();
|
292
|
+
}
|
293
|
+
},
|
294
|
+
role: "button",
|
295
|
+
"aria-label": "Edit filter",
|
296
|
+
tabIndex: 0,
|
297
|
+
ref: wrapRef
|
298
|
+
}, /* @__PURE__ */ React.createElement("span", null, filter.key, " ", filter.operator, " ", filter.value), /* @__PURE__ */ React.createElement(IconButton, {
|
299
|
+
onClick: (e) => {
|
300
|
+
e.stopPropagation();
|
301
|
+
model._removeFilter(filter);
|
302
|
+
},
|
303
|
+
onKeyDown: (e) => {
|
304
|
+
if (e.key === "Enter") {
|
305
|
+
e.stopPropagation();
|
306
|
+
model._removeFilter(filter);
|
307
|
+
}
|
308
|
+
},
|
309
|
+
name: "times",
|
310
|
+
size: "md",
|
311
|
+
className: styles.removeButton,
|
312
|
+
tooltip: "Remove filter"
|
313
|
+
}));
|
314
|
+
}
|
315
|
+
return /* @__PURE__ */ React.createElement(AdHocCombobox, {
|
316
|
+
filter,
|
317
|
+
model,
|
318
|
+
handleChangeViewMode
|
319
|
+
});
|
320
|
+
}
|
321
|
+
const getStyles3 = (theme) => ({
|
322
|
+
wrapper: css({
|
323
|
+
display: "flex",
|
324
|
+
flexWrap: "wrap",
|
325
|
+
alignItems: "center",
|
326
|
+
columnGap: theme.spacing(1),
|
327
|
+
rowGap: theme.spacing(1),
|
328
|
+
minHeight: theme.spacing(4),
|
329
|
+
backgroundColor: theme.components.input.background,
|
330
|
+
border: `1px solid ${theme.colors.border.strong}`,
|
331
|
+
borderRadius: theme.shape.radius.default,
|
332
|
+
paddingInline: theme.spacing(1),
|
333
|
+
"&:focus-within": {
|
334
|
+
outline: "2px dotted transparent",
|
335
|
+
outlineOffset: "2px",
|
336
|
+
boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
|
337
|
+
transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
|
338
|
+
transitionDuration: "0.2s",
|
339
|
+
transitionProperty: "outline, outline-offset, box-shadow"
|
340
|
+
}
|
341
|
+
}),
|
342
|
+
filterIcon: css({
|
343
|
+
color: theme.colors.text.secondary,
|
344
|
+
alignSelf: "center"
|
345
|
+
}),
|
346
|
+
combinedFilterPill: css(__spreadProps(__spreadValues({
|
347
|
+
display: "flex",
|
348
|
+
alignItems: "center",
|
349
|
+
background: theme.colors.action.selected,
|
350
|
+
borderRadius: theme.shape.radius.default,
|
351
|
+
border: `1px solid ${theme.colors.border.weak}`,
|
352
|
+
padding: theme.spacing(0.125, 0, 0.125, 1),
|
353
|
+
color: theme.colors.text.primary,
|
354
|
+
overflow: "hidden",
|
355
|
+
whiteSpace: "nowrap",
|
356
|
+
minHeight: "22px"
|
357
|
+
}, theme.typography.bodySmall), {
|
358
|
+
fontWeight: theme.typography.fontWeightBold,
|
359
|
+
cursor: "pointer",
|
360
|
+
"&:hover": {
|
361
|
+
background: theme.colors.emphasize(theme.colors.background.secondary)
|
362
|
+
}
|
363
|
+
})),
|
364
|
+
removeButton: css({
|
365
|
+
marginInline: theme.spacing(0.5),
|
366
|
+
cursor: "pointer",
|
367
|
+
"&:hover": {
|
368
|
+
color: theme.colors.text.primary
|
369
|
+
}
|
370
|
+
})
|
371
|
+
});
|
372
|
+
|
373
|
+
export { AdHocCombobox, AdHocFilterEditSwitch };
|
374
|
+
//# sourceMappingURL=AdHocCombobox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"AdHocCombobox.js","sources":["../../../../src/variables/adhoc/AdHocCombobox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n autoUpdate,\n size,\n flip,\n useId,\n useDismiss,\n useFloating,\n useInteractions,\n useListNavigation,\n useRole,\n FloatingFocusManager,\n FloatingPortal,\n} from '@floating-ui/react';\nimport { IconButton, getSelectStyles, useStyles2, useTheme2 } from '@grafana/ui';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { AdHocFilterWithLabels, AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { flushSync } from 'react-dom';\n\ninterface ItemProps {\n children: React.ReactNode;\n active: boolean;\n}\n\n// eslint-disable-next-line react/display-name\nconst Item = forwardRef<HTMLDivElement, ItemProps & React.HTMLProps<HTMLDivElement>>(\n ({ children, active, ...rest }, ref) => {\n const theme = useTheme2();\n const selectStyles = getSelectStyles(theme);\n const id = useId();\n return (\n <div\n ref={ref}\n role=\"option\"\n id={id}\n aria-selected={active}\n className={cx(selectStyles.option, active && selectStyles.optionFocused)}\n {...rest}\n >\n <div className={selectStyles.optionBody} data-testid={`data-testid ad hoc filter option value ${children}`}>\n <span>{children}</span>\n </div>\n </div>\n );\n }\n);\n\ninterface AdHocComboboxProps {\n filter?: AdHocFilterWithLabels;\n wip?: boolean;\n model: AdHocFiltersVariable;\n handleChangeViewMode?: () => void;\n}\n\nexport function AdHocCombobox({ filter, model, wip, handleChangeViewMode }: AdHocComboboxProps) {\n const [open, setOpen] = useState(false);\n // const [optionsLoading, setOptionsLoading] = useState<boolean>(false);\n const [options, setOptions] = useState<Array<SelectableValue<string>>>([]);\n const [inputValue, setInputValue] = useState('');\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [inputType, setInputType] = useState<'key' | 'operator' | 'value'>(!wip ? 'value' : 'key');\n const styles = useStyles2(getStyles2);\n\n const listRef = useRef<Array<HTMLElement | null>>([]);\n const { _wip } = model.useState();\n\n const filterToUse = filter || _wip;\n\n const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (nextOpen, _, reason) => {\n setOpen(nextOpen);\n if (reason === 'outside-press') {\n handleChangeViewMode?.();\n }\n },\n middleware: [\n flip({ padding: 10 }),\n size({\n apply({ rects, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n maxHeight: `${availableHeight > 256 ? 256 : availableHeight}px`,\n });\n },\n padding: 10,\n }),\n ],\n });\n\n const role = useRole(context, { role: 'listbox' });\n const dismiss = useDismiss(context, {\n outsidePress: (event) => {\n return !(event as unknown as React.MouseEvent<HTMLElement, MouseEvent>).currentTarget.classList.contains(\n `${filterToUse?.key ?? ''}-operator`\n );\n },\n });\n const listNav = useListNavigation(context, {\n listRef,\n activeIndex,\n onNavigate: setActiveIndex,\n virtual: true,\n loop: true,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);\n\n function onChange(event: React.ChangeEvent<HTMLInputElement>) {\n const value = event.target.value;\n setInputValue(value);\n setActiveIndex(0);\n }\n\n const items = options.filter((item) =>\n (item.label ?? item.value)?.toLocaleLowerCase().startsWith(inputValue.toLowerCase())\n );\n\n useEffect(() => {\n if (wip && !_wip) {\n model._addWip();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_wip]);\n\n useEffect(() => {\n if (!wip && refs.domReference.current) {\n setInputType('value');\n setInputValue('');\n\n refs.domReference.current.focus();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <>\n {filterToUse ? (\n <div className={styles.pillWrapper}>\n {filterToUse?.key ? <div className={cx(styles.basePill, styles.keyPill)}>{filterToUse.key}</div> : null}\n {filterToUse?.key && filterToUse?.operator && inputType !== 'operator' ? (\n <div\n className={cx(styles.basePill, `${filterToUse?.key ?? ''}-operator`)}\n role=\"button\"\n aria-label=\"Edit filter operator\"\n tabIndex={0}\n onClick={() => {\n flushSync(() => {\n setInputType('operator');\n });\n\n refs.domReference.current?.focus();\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n flushSync(() => {\n setInputType('operator');\n });\n refs.domReference.current?.focus();\n }\n }}\n >\n {filterToUse.operator}\n </div>\n ) : null}\n {filterToUse?.key &&\n filterToUse?.operator &&\n filterToUse?.value &&\n !['operator', 'value'].includes(inputType) ? (\n <div className={cx(styles.basePill, styles.valuePill)}>{filterToUse.value}</div>\n ) : null}\n </div>\n ) : null}\n\n <input\n {...getReferenceProps({\n ref: refs.setReference,\n onChange,\n value: inputValue,\n placeholder: !wip\n ? inputType === 'operator'\n ? `${filterToUse![inputType]} ${filterToUse!.value || ''}`\n : filterToUse![inputType]\n : 'Filter by label values',\n 'aria-autocomplete': 'list',\n onKeyDown(event) {\n if (event.key === 'Enter' && activeIndex != null && items[activeIndex]) {\n model._updateFilter(filterToUse!, inputType, items[activeIndex]);\n setInputValue('');\n\n flushSync(() => {\n if (inputType === 'key') {\n setInputType('operator');\n } else if (inputType === 'operator') {\n setInputType('value');\n } else if (inputType === 'value') {\n setInputType('key');\n handleChangeViewMode?.();\n }\n });\n\n refs.domReference.current?.focus();\n }\n },\n })}\n className={styles.inputStyle}\n key={inputType}\n onFocus={async () => {\n let options: Array<SelectableValue<string>> = [];\n if (inputType === 'key') {\n options = await model._getKeys(null);\n } else if (inputType === 'operator') {\n options = model._getOperators();\n } else if (inputType === 'value') {\n options = await model._getValuesFor(filterToUse!);\n }\n\n setActiveIndex(0);\n setOptions(options);\n setOpen(true);\n }}\n />\n <FloatingPortal>\n {open && (\n <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>\n <div\n {...getFloatingProps({\n ref: refs.setFloating,\n style: {\n ...floatingStyles,\n overflowY: 'auto',\n },\n })}\n className={styles.dropdownWrapper}\n >\n {items.map((item, index) => (\n // eslint-disable-next-line react/jsx-key\n <Item\n {...getItemProps({\n key: item.value!,\n ref(node) {\n listRef.current[index] = node;\n },\n onClick() {\n model._updateFilter(filterToUse!, inputType, item);\n setInputValue('');\n\n flushSync(() => {\n if (inputType === 'key') {\n setInputType('operator');\n } else if (inputType === 'operator') {\n setInputType('value');\n } else if (inputType === 'value') {\n setInputType('key');\n handleChangeViewMode?.();\n }\n });\n\n refs.domReference.current?.focus();\n },\n })}\n active={activeIndex === index}\n >\n {item.label ?? item.value}\n </Item>\n ))}\n </div>\n </FloatingFocusManager>\n )}\n </FloatingPortal>\n </>\n );\n}\n\nconst getStyles2 = (theme: GrafanaTheme2) => ({\n pillWrapper: css({\n display: 'flex',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n }),\n basePill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.disabledBackground,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 1, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: '22px',\n ...theme.typography.bodySmall,\n cursor: 'pointer',\n }),\n keyPill: css({\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'default',\n }),\n valuePill: css({\n background: theme.colors.action.selected,\n }),\n dropdownWrapper: css({\n backgroundColor: theme.colors.background.primary,\n color: theme.colors.text.primary,\n boxShadow: theme.shadows.z2,\n }),\n inputStyle: css({\n paddingBlock: 0,\n '&:focus': {\n outline: 'none',\n },\n }),\n});\n\ninterface AdHocFilterEditSwitchProps {\n filter: AdHocFilterWithLabels;\n model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterEditSwitch({ filter, model }: AdHocFilterEditSwitchProps) {\n const styles = useStyles2(getStyles3);\n const [viewMode, setViewMode] = useState(true);\n const wrapRef = useRef<HTMLDivElement>(null);\n\n const handleChangeViewMode = useCallback(() => {\n flushSync(() => {\n setViewMode((mode) => !mode);\n });\n if (wrapRef.current) {\n wrapRef.current.focus();\n }\n }, []);\n\n if (viewMode) {\n return (\n <div\n className={styles.combinedFilterPill}\n onClick={handleChangeViewMode}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleChangeViewMode();\n }\n }}\n role=\"button\"\n aria-label=\"Edit filter\"\n tabIndex={0}\n ref={wrapRef}\n >\n <span>\n {filter.key} {filter.operator} {filter.value}\n </span>\n <IconButton\n onClick={(e) => {\n e.stopPropagation();\n model._removeFilter(filter);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.stopPropagation();\n model._removeFilter(filter);\n }\n }}\n name=\"times\"\n size=\"md\"\n className={styles.removeButton}\n tooltip=\"Remove filter\"\n />\n </div>\n );\n }\n\n return <AdHocCombobox filter={filter} model={model} handleChangeViewMode={handleChangeViewMode} />;\n}\n\nconst getStyles3 = (theme: GrafanaTheme2) => ({\n wrapper: css({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: theme.spacing(1),\n rowGap: theme.spacing(1),\n minHeight: theme.spacing(4),\n backgroundColor: theme.components.input.background,\n border: `1px solid ${theme.colors.border.strong}`,\n borderRadius: theme.shape.radius.default,\n paddingInline: theme.spacing(1),\n\n '&:focus-within': {\n outline: '2px dotted transparent',\n outlineOffset: '2px',\n boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n transitionDuration: '0.2s',\n transitionProperty: 'outline, outline-offset, box-shadow',\n },\n }),\n filterIcon: css({\n color: theme.colors.text.secondary,\n alignSelf: 'center',\n }),\n combinedFilterPill: css({\n display: 'flex',\n alignItems: 'center',\n background: theme.colors.action.selected,\n borderRadius: theme.shape.radius.default,\n border: `1px solid ${theme.colors.border.weak}`,\n padding: theme.spacing(0.125, 0, 0.125, 1),\n color: theme.colors.text.primary,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n minHeight: '22px',\n ...theme.typography.bodySmall,\n fontWeight: theme.typography.fontWeightBold,\n cursor: 'pointer',\n\n '&:hover': {\n background: theme.colors.emphasize(theme.colors.background.secondary),\n },\n }),\n removeButton: css({\n marginInline: theme.spacing(0.5),\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n});\n"],"names":["_a","options"],"mappings":"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"}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import { css } from '@emotion/css';
|
2
|
+
import { useStyles2, Icon } from '@grafana/ui';
|
3
|
+
import React from 'react';
|
4
|
+
import { AdHocFilterEditSwitch, AdHocCombobox } from './AdHocCombobox.js';
|
5
|
+
import { AdHocFiltersVariable } from './AdHocFiltersVariable.js';
|
6
|
+
|
7
|
+
class AdHocFiltersVariableV2 extends AdHocFiltersVariable {
|
8
|
+
}
|
9
|
+
AdHocFiltersVariableV2.Component = AdHocFiltersVariableRendererV2;
|
10
|
+
function AdHocFiltersVariableRendererV2({ model }) {
|
11
|
+
const { filters } = model.useState();
|
12
|
+
const styles = useStyles2(getStyles2);
|
13
|
+
return /* @__PURE__ */ React.createElement("div", {
|
14
|
+
className: styles.wrapper
|
15
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
16
|
+
name: "filter",
|
17
|
+
className: styles.filterIcon,
|
18
|
+
size: "lg"
|
19
|
+
}), filters.map((filter, index) => /* @__PURE__ */ React.createElement(AdHocFilterEditSwitch, {
|
20
|
+
key: index,
|
21
|
+
filter,
|
22
|
+
model
|
23
|
+
})), /* @__PURE__ */ React.createElement(AdHocCombobox, {
|
24
|
+
model,
|
25
|
+
wip: true
|
26
|
+
}));
|
27
|
+
}
|
28
|
+
const getStyles2 = (theme) => ({
|
29
|
+
wrapper: css({
|
30
|
+
display: "flex",
|
31
|
+
flexWrap: "wrap",
|
32
|
+
alignItems: "center",
|
33
|
+
columnGap: theme.spacing(1),
|
34
|
+
rowGap: theme.spacing(0.5),
|
35
|
+
minHeight: theme.spacing(4),
|
36
|
+
backgroundColor: theme.components.input.background,
|
37
|
+
border: `1px solid ${theme.colors.border.strong}`,
|
38
|
+
borderRadius: theme.shape.radius.default,
|
39
|
+
paddingInline: theme.spacing(1),
|
40
|
+
paddingBlock: theme.spacing(0.5),
|
41
|
+
flexGrow: 1,
|
42
|
+
"&:focus-within": {
|
43
|
+
outline: "2px dotted transparent",
|
44
|
+
outlineOffset: "2px",
|
45
|
+
boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
|
46
|
+
transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
|
47
|
+
transitionDuration: "0.2s",
|
48
|
+
transitionProperty: "outline, outline-offset, box-shadow"
|
49
|
+
}
|
50
|
+
}),
|
51
|
+
filterIcon: css({
|
52
|
+
color: theme.colors.text.secondary,
|
53
|
+
alignSelf: "center"
|
54
|
+
})
|
55
|
+
});
|
56
|
+
|
57
|
+
export { AdHocFiltersVariableRendererV2, AdHocFiltersVariableV2 };
|
58
|
+
//# sourceMappingURL=AdHocFiltersVariableV2.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"AdHocFiltersVariableV2.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariableV2.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useStyles2, Icon } from '@grafana/ui';\nimport React from 'react';\nimport { SceneComponentProps } from '../../core/types';\nimport { AdHocCombobox, AdHocFilterEditSwitch } from './AdHocCombobox';\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport class AdHocFiltersVariableV2 extends AdHocFiltersVariable {\n static Component = AdHocFiltersVariableRendererV2;\n}\n\nexport function AdHocFiltersVariableRendererV2({ model }: SceneComponentProps<AdHocFiltersVariable>) {\n const { filters } = model.useState();\n const styles = useStyles2(getStyles2);\n\n return (\n <div className={styles.wrapper}>\n <Icon name=\"filter\" className={styles.filterIcon} size=\"lg\" />\n\n {filters.map((filter, index) => (\n <AdHocFilterEditSwitch key={index} filter={filter} model={model} />\n ))}\n\n <AdHocCombobox model={model} wip />\n </div>\n );\n}\n\nconst getStyles2 = (theme: GrafanaTheme2) => ({\n wrapper: css({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n columnGap: theme.spacing(1),\n rowGap: theme.spacing(0.5),\n minHeight: theme.spacing(4),\n backgroundColor: theme.components.input.background,\n border: `1px solid ${theme.colors.border.strong}`,\n borderRadius: theme.shape.radius.default,\n paddingInline: theme.spacing(1),\n paddingBlock: theme.spacing(0.5),\n flexGrow: 1,\n\n '&:focus-within': {\n outline: '2px dotted transparent',\n outlineOffset: '2px',\n boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,\n transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,\n transitionDuration: '0.2s',\n transitionProperty: 'outline, outline-offset, box-shadow',\n },\n }),\n filterIcon: css({\n color: theme.colors.text.secondary,\n alignSelf: 'center',\n }),\n});\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,+BAA+B,oBAAqB,CAAA;AAEjE,CAAA;AAFa,sBAAA,CACJ,SAAY,GAAA,8BAAA,CAAA;AAGL,SAAA,8BAAA,CAA+B,EAAE,KAAA,EAAoD,EAAA;AACnG,EAAA,MAAM,EAAE,OAAA,EAAY,GAAA,KAAA,CAAM,QAAS,EAAA,CAAA;AACnC,EAAM,MAAA,MAAA,GAAS,WAAW,UAAU,CAAA,CAAA;AAEpC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,OAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,QAAA;AAAA,IAAS,WAAW,MAAO,CAAA,UAAA;AAAA,IAAY,IAAK,EAAA,IAAA;AAAA,GAAK,GAE3D,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BACnB,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,GAAK,EAAA,KAAA;AAAA,IAAO,MAAA;AAAA,IAAgB,KAAA;AAAA,GAAc,CAClE,mBAEA,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IAAc,KAAA;AAAA,IAAc,GAAG,EAAA,IAAA;AAAA,GAAC,CACnC,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,UAAA,GAAa,CAAC,KAA0B,MAAA;AAAA,EAC5C,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IACzB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,eAAA,EAAiB,KAAM,CAAA,UAAA,CAAW,KAAM,CAAA,UAAA;AAAA,IACxC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA,CAAA,CAAA;AAAA,IACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,IACjC,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,QAAU,EAAA,CAAA;AAAA,IAEV,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,wBAAA;AAAA,MACT,aAAe,EAAA,KAAA;AAAA,MACf,SAAA,EAAW,aAAa,KAAM,CAAA,MAAA,CAAO,WAAW,MAAuB,CAAA,cAAA,EAAA,KAAA,CAAM,OAAO,OAAQ,CAAA,IAAA,CAAA,CAAA;AAAA,MAC5F,wBAA0B,EAAA,CAAA,8BAAA,CAAA;AAAA,MAC1B,kBAAoB,EAAA,MAAA;AAAA,MACpB,kBAAoB,EAAA,qCAAA;AAAA,KACtB;AAAA,GACD,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AACH,CAAA,CAAA;;;;"}
|
@@ -2,7 +2,7 @@ import { VariableRefresh } from '@grafana/data';
|
|
2
2
|
import { sceneGraph } from '../../core/sceneGraph/index.js';
|
3
3
|
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
|
4
4
|
import { writeSceneLog } from '../../utils/writeSceneLog.js';
|
5
|
-
import { SceneVariableValueChangedEvent
|
5
|
+
import { SceneVariableValueChangedEvent } from '../types.js';
|
6
6
|
import { VariableValueRecorder } from '../VariableValueRecorder.js';
|
7
7
|
|
8
8
|
class SceneVariableSet extends SceneObjectBase {
|
@@ -20,9 +20,6 @@ class SceneVariableSet extends SceneObjectBase {
|
|
20
20
|
this._subs.add(
|
21
21
|
this.subscribeToEvent(SceneVariableValueChangedEvent, (event) => this._handleVariableValueChanged(event.payload))
|
22
22
|
);
|
23
|
-
this._subs.add(
|
24
|
-
this.subscribeToEvent(SceneVariableOptionsRefreshEvent, (event) => this._handleVariableOptionsUpdate(event.payload))
|
25
|
-
);
|
26
23
|
this._subs.add(
|
27
24
|
timeRange.subscribeToState(() => {
|
28
25
|
this._refreshTimeRangeBasedVariables();
|
@@ -164,10 +161,6 @@ class SceneVariableSet extends SceneObjectBase {
|
|
164
161
|
console.error("SceneVariableSet updateAndValidate error", err);
|
165
162
|
writeVariableTraceLog(variable, "updateAndValidate error", err);
|
166
163
|
}
|
167
|
-
_handleVariableOptionsUpdate(variable) {
|
168
|
-
this._variablesToUpdate.add(variable);
|
169
|
-
this._updateNextBatch();
|
170
|
-
}
|
171
164
|
_handleVariableValueChanged(variableThatChanged) {
|
172
165
|
this._variablesThatHaveChanged.add(variableThatChanged);
|
173
166
|
this._addDependentVariablesToUpdateQueue(variableThatChanged);
|