@grafana/scenes 4.12.1--canary.648.8797444172.0 → 4.12.1--canary.704.8799450327.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/dist/esm/components/VizPanel/VizPanelMenu.js +23 -13
- package/dist/esm/components/VizPanel/VizPanelMenu.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridRow.js +1 -3
- package/dist/esm/components/layout/grid/SceneGridRow.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelect.js +0 -3
- package/dist/esm/variables/components/VariableValueSelect.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelectors.js +2 -5
- package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
- package/dist/index.js +26 -20
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import { Menu } from '@grafana/ui';
|
|
3
3
|
import { SceneObjectBase } from '../../core/SceneObjectBase.js';
|
|
4
|
-
import { selectors } from '@grafana/e2e-selectors';
|
|
5
4
|
|
|
6
5
|
class VizPanelMenu extends SceneObjectBase {
|
|
7
6
|
addItem(item) {
|
|
@@ -26,18 +25,29 @@ function VizPanelMenuRenderer({ model }) {
|
|
|
26
25
|
}, []);
|
|
27
26
|
const renderItems = (items2) => {
|
|
28
27
|
return items2.map(
|
|
29
|
-
(item) =>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
(item) => {
|
|
29
|
+
switch (item.type) {
|
|
30
|
+
case "divider":
|
|
31
|
+
return /* @__PURE__ */ React.createElement(Menu.Divider, {
|
|
32
|
+
key: item.text
|
|
33
|
+
});
|
|
34
|
+
case "group":
|
|
35
|
+
return /* @__PURE__ */ React.createElement(Menu.Group, {
|
|
36
|
+
key: item.text,
|
|
37
|
+
label: item.text
|
|
38
|
+
}, item.subMenu ? renderItems(item.subMenu) : void 0);
|
|
39
|
+
default:
|
|
40
|
+
return /* @__PURE__ */ React.createElement(Menu.Item, {
|
|
41
|
+
key: item.text,
|
|
42
|
+
label: item.text,
|
|
43
|
+
icon: item.iconClassName,
|
|
44
|
+
childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
|
|
45
|
+
url: item.href,
|
|
46
|
+
onClick: item.onClick,
|
|
47
|
+
shortcut: item.shortcut
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
}
|
|
41
51
|
);
|
|
42
52
|
};
|
|
43
53
|
return /* @__PURE__ */ React.createElement(Menu, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VizPanelMenu.js","sources":["../../../../src/components/VizPanel/VizPanelMenu.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { PanelMenuItem } from '@grafana/data';\nimport { Menu } from '@grafana/ui';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\
|
|
1
|
+
{"version":3,"file":"VizPanelMenu.js","sources":["../../../../src/components/VizPanel/VizPanelMenu.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { PanelMenuItem } from '@grafana/data';\nimport { Menu } from '@grafana/ui';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\n\ninterface VizPanelMenuState extends SceneObjectState {\n items?: PanelMenuItem[];\n}\n\nexport class VizPanelMenu extends SceneObjectBase<VizPanelMenuState> {\n static Component = VizPanelMenuRenderer;\n\n // Allows adding menu items dynamically\n public addItem(item: PanelMenuItem) {\n this.setState({\n items: this.state.items ? [...this.state.items, item] : [item],\n });\n }\n\n // Allows replacing all menu items\n public setItems(items: PanelMenuItem[]) {\n this.setState({\n items,\n });\n }\n}\n\nfunction VizPanelMenuRenderer({ model }: SceneComponentProps<VizPanelMenu>) {\n const { items = [] } = model.useState();\n const ref = React.useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n ref.current.focus();\n }\n }, []);\n\n const renderItems = (items: PanelMenuItem[]) => {\n return items.map((item) =>\n {\n switch (item.type) {\n case 'divider':\n return <Menu.Divider key={item.text} />;\n case 'group':\n return (\n <Menu.Group key={item.text} label={item.text}>\n {item.subMenu ? renderItems(item.subMenu) : undefined}\n </Menu.Group>\n );\n default:\n return (\n <Menu.Item\n key={item.text}\n label={item.text}\n icon={item.iconClassName}\n childItems={item.subMenu ? renderItems(item.subMenu) : undefined}\n url={item.href}\n onClick={item.onClick}\n shortcut={item.shortcut}\n />\n );\n }\n }\n );\n };\n\n return <Menu ref={ref}>{renderItems(items)}</Menu>;\n}\n"],"names":["items"],"mappings":";;;;AAUO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAI5D,QAAQ,IAAqB,EAAA;AAClC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,CAAC,GAAG,IAAK,CAAA,KAAA,CAAM,KAAO,EAAA,IAAI,CAAI,GAAA,CAAC,IAAI,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AAAA,EAGO,SAAS,KAAwB,EAAA;AACtC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AACF,CAAA;AAhBa,YAAA,CACJ,SAAY,GAAA,oBAAA,CAAA;AAiBrB,SAAS,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AAC1E,EAAA,MAAM,EAAE,KAAQ,GAAA,EAAG,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACtC,EAAM,MAAA,GAAA,GAAM,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAA,GAAA,CAAI,QAAQ,KAAM,EAAA,CAAA;AAAA,KACpB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAACA,MAA2B,KAAA;AAC9C,IAAA,OAAOA,MAAM,CAAA,GAAA;AAAA,MAAI,CAAC,IAChB,KAAA;AACE,QAAA,QAAQ,IAAK,CAAA,IAAA;AAAA,UACN,KAAA,SAAA;AACH,YAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,OAAL,EAAA;AAAA,cAAa,KAAK,IAAK,CAAA,IAAA;AAAA,aAAM,CAAA,CAAA;AAAA,UAClC,KAAA,OAAA;AACH,YACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,KAAL,EAAA;AAAA,cAAW,KAAK,IAAK,CAAA,IAAA;AAAA,cAAM,OAAO,IAAK,CAAA,IAAA;AAAA,aAAA,EACrC,KAAK,OAAU,GAAA,WAAA,CAAY,IAAK,CAAA,OAAO,IAAI,KAC9C,CAAA,CAAA,CAAA;AAAA,UAAA;AAGF,YACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,IAAL,EAAA;AAAA,cACC,KAAK,IAAK,CAAA,IAAA;AAAA,cACV,OAAO,IAAK,CAAA,IAAA;AAAA,cACZ,MAAM,IAAK,CAAA,aAAA;AAAA,cACX,YAAY,IAAK,CAAA,OAAA,GAAU,WAAY,CAAA,IAAA,CAAK,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,cACvD,KAAK,IAAK,CAAA,IAAA;AAAA,cACV,SAAS,IAAK,CAAA,OAAA;AAAA,cACd,UAAU,IAAK,CAAA,QAAA;AAAA,aACjB,CAAA,CAAA;AAAA,SAAA;AAAA,OAGR;AAAA,KACF,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA;AAAA,GAAW,EAAA,WAAA,CAAY,KAAK,CAAE,CAAA,CAAA;AAC7C;;;;"}
|
|
@@ -5,7 +5,6 @@ import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
|
|
|
5
5
|
import { SceneGridLayout } from './SceneGridLayout.js';
|
|
6
6
|
import { GRID_COLUMN_COUNT } from './constants.js';
|
|
7
7
|
import { sceneGraph } from '../../../core/sceneGraph/index.js';
|
|
8
|
-
import { selectors } from '@grafana/e2e-selectors';
|
|
9
8
|
|
|
10
9
|
var __defProp = Object.defineProperty;
|
|
11
10
|
var __defProps = Object.defineProperties;
|
|
@@ -79,8 +78,7 @@ function SceneGridRowRenderer({ model }) {
|
|
|
79
78
|
}, /* @__PURE__ */ React.createElement("button", {
|
|
80
79
|
onClick: model.onCollapseToggle,
|
|
81
80
|
className: styles.rowTitleButton,
|
|
82
|
-
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
83
|
-
"data-testid": selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
|
|
81
|
+
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
84
82
|
}, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
|
|
85
83
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
86
84
|
}), /* @__PURE__ */ React.createElement("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n title: string;\n isCollapsible?: boolean;\n isCollapsed?: boolean;\n actions?: SceneObject;\n children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n public static Component = SceneGridRowRenderer;\n\n public constructor(state: Partial<SceneGridRowState>) {\n super({\n children: state.children || [],\n isCollapsible: state.isCollapsible || true,\n title: state.title || '',\n ...state,\n x: 0,\n height: 1,\n width: GRID_COLUMN_COUNT,\n });\n }\n\n public getGridLayout(): SceneGridLayout {\n const layout = this.parent;\n\n if (!layout || !(layout instanceof SceneGridLayout)) {\n throw new Error('SceneGridRow must be a child of SceneGridLayout');\n }\n\n return layout;\n }\n\n public onCollapseToggle = () => {\n if (!this.state.isCollapsible) {\n return;\n }\n\n this.getGridLayout().toggleRow(this);\n };\n\n public getUrlState() {\n return { rowc: this.state.isCollapsed ? '1' : '0' };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues) {\n if (values.rowc == null) {\n return;\n }\n\n if (values.rowc !== this.getUrlState().rowc) {\n this.onCollapseToggle();\n }\n }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n const styles = useStyles2(getSceneGridRowStyles);\n const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n const layout = model.getGridLayout();\n const layoutDragClass = layout.getDragClass();\n const isDraggable = layout.isDraggable();\n\n const count = children ? children.length : 0;\n const panels = count === 1 ? 'panel' : 'panels';\n\n return (\n <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n <div className={styles.rowTitleAndActionsGroup}>\n <button\n onClick={model.onCollapseToggle}\n className={styles.rowTitleButton}\n aria-label={isCollapsed ? 'Expand row' : 'Collapse row'}\n data-testid={selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, undefined, 'text'))}\n >\n {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n <span className={styles.rowTitle} role=\"heading\">\n {sceneGraph.interpolate(model, title, undefined, 'text')}\n </span>\n </button>\n <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n ({count} {panels})\n </span>\n {actions && (\n <div className={styles.rowActions}>\n <actions.Component model={actions} />\n </div>\n )}\n </div>\n {isDraggable && isCollapsed && (\n <div className={cx(styles.dragHandle, layoutDragClass)}>\n <Icon name=\"draggabledots\" />\n </div>\n )}\n </div>\n );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n return {\n row: css({\n width: '100%',\n height: '30px',\n display: 'flex',\n justifyContent: 'space-between',\n gap: theme.spacing(1),\n }),\n rowTitleButton: css({\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n background: 'transparent',\n border: 'none',\n gap: theme.spacing(1),\n }),\n rowCollapsed: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n rowTitle: css({\n fontSize: theme.typography.h5.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n }),\n collapsedInfo: css({\n fontSize: theme.typography.bodySmall.fontSize,\n color: theme.colors.text.secondary,\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n }),\n rowTitleAndActionsGroup: css({\n display: 'flex',\n\n '&:hover, &:focus-within': {\n '& > div': {\n opacity: 1,\n },\n },\n }),\n rowActions: css({\n display: 'flex',\n opacity: 0,\n transition: '200ms opacity ease-in 200ms',\n\n '&:hover, &:focus-within': {\n opacity: 1,\n },\n }),\n dragHandle: css({\n display: 'flex',\n padding: theme.spacing(0, 1),\n alignItems: 'center',\n justifyContent: 'flex-end',\n cursor: 'move',\n color: theme.colors.text.secondary,\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n panelCount: css({\n paddingLeft: theme.spacing(2),\n color: theme.colors.text.secondary,\n fontStyle: 'italic',\n fontSize: theme.typography.size.sm,\n fontWeight: 'normal',\n display: 'none',\n lineHeight: '30px',\n }),\n panelCountCollapsed: css({\n display: 'inline-block',\n }),\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n title: string;\n isCollapsible?: boolean;\n isCollapsed?: boolean;\n actions?: SceneObject;\n children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n public static Component = SceneGridRowRenderer;\n\n public constructor(state: Partial<SceneGridRowState>) {\n super({\n children: state.children || [],\n isCollapsible: state.isCollapsible || true,\n title: state.title || '',\n ...state,\n x: 0,\n height: 1,\n width: GRID_COLUMN_COUNT,\n });\n }\n\n public getGridLayout(): SceneGridLayout {\n const layout = this.parent;\n\n if (!layout || !(layout instanceof SceneGridLayout)) {\n throw new Error('SceneGridRow must be a child of SceneGridLayout');\n }\n\n return layout;\n }\n\n public onCollapseToggle = () => {\n if (!this.state.isCollapsible) {\n return;\n }\n\n this.getGridLayout().toggleRow(this);\n };\n\n public getUrlState() {\n return { rowc: this.state.isCollapsed ? '1' : '0' };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues) {\n if (values.rowc == null) {\n return;\n }\n\n if (values.rowc !== this.getUrlState().rowc) {\n this.onCollapseToggle();\n }\n }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n const styles = useStyles2(getSceneGridRowStyles);\n const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n const layout = model.getGridLayout();\n const layoutDragClass = layout.getDragClass();\n const isDraggable = layout.isDraggable();\n\n const count = children ? children.length : 0;\n const panels = count === 1 ? 'panel' : 'panels';\n\n return (\n <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n <div className={styles.rowTitleAndActionsGroup}>\n <button\n onClick={model.onCollapseToggle}\n className={styles.rowTitleButton}\n aria-label={isCollapsed ? 'Expand row' : 'Collapse row'}\n >\n {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n <span className={styles.rowTitle} role=\"heading\">\n {sceneGraph.interpolate(model, title, undefined, 'text')}\n </span>\n </button>\n <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n ({count} {panels})\n </span>\n {actions && \n <div className={styles.rowActions}>\n <actions.Component model={actions} />\n </div>\n }\n </div>\n {isDraggable && isCollapsed && (\n <div className={cx(styles.dragHandle, layoutDragClass)}>\n <Icon name=\"draggabledots\" />\n </div>\n )}\n </div>\n );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n return {\n row: css({\n width: '100%',\n height: '30px',\n display: 'flex',\n justifyContent: 'space-between',\n gap: theme.spacing(1),\n }),\n rowTitleButton: css({\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n background: 'transparent',\n border: 'none',\n gap: theme.spacing(1),\n }),\n rowCollapsed: css({\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n rowTitle: css({\n fontSize: theme.typography.h5.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n }),\n collapsedInfo: css({\n fontSize: theme.typography.bodySmall.fontSize,\n color: theme.colors.text.secondary,\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n }),\n rowTitleAndActionsGroup: css({\n display: 'flex',\n\n '&:hover, &:focus-within': {\n '& > div': {\n opacity: 1,\n }\n },\n }),\n rowActions: css({\n display: 'flex',\n opacity: 0,\n transition: '200ms opacity ease-in 200ms',\n\n '&:hover, &:focus-within': {\n opacity: 1,\n },\n }),\n dragHandle: css({\n display: 'flex',\n padding: theme.spacing(0, 1),\n alignItems: 'center',\n justifyContent: 'flex-end',\n cursor: 'move',\n color: theme.colors.text.secondary,\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n panelCount: css({\n paddingLeft: theme.spacing(2),\n color: theme.colors.text.secondary,\n fontStyle: 'italic',\n fontSize: theme.typography.size.sm,\n fontWeight: 'normal',\n display: 'none',\n lineHeight: '30px',\n }),\n panelCountCollapsed: css({\n display: 'inline-block',\n }),\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { isArray } from 'lodash';
|
|
2
2
|
import React, { useMemo, useState, useEffect } from 'react';
|
|
3
3
|
import { Select, MultiSelect } from '@grafana/ui';
|
|
4
|
-
import { selectors } from '@grafana/e2e-selectors';
|
|
5
4
|
|
|
6
5
|
function VariableValueSelect({ model }) {
|
|
7
6
|
const { value, key } = model.useState();
|
|
@@ -20,7 +19,6 @@ function VariableValueSelect({ model }) {
|
|
|
20
19
|
tabSelectsValue: false,
|
|
21
20
|
onInputChange,
|
|
22
21
|
options: model.getOptionsForSelect(),
|
|
23
|
-
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
|
|
24
22
|
onChange: (newValue) => {
|
|
25
23
|
model.changeValueTo(newValue.value, newValue.label);
|
|
26
24
|
}
|
|
@@ -57,7 +55,6 @@ function VariableValueSelectMulti({ model }) {
|
|
|
57
55
|
onBlur: () => {
|
|
58
56
|
model.changeValueTo(uncommittedValue);
|
|
59
57
|
},
|
|
60
|
-
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
|
|
61
58
|
onChange: (newValue, action) => {
|
|
62
59
|
if (action.action === "clear" && noValueOnClear) {
|
|
63
60
|
model.changeValueTo([]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\
|
|
1
|
+
{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key } = model.useState();\n\n const onInputChange = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n return (\n <Select<VariableValue>\n id={key}\n placeholder=\"Select value\"\n width=\"auto\"\n value={value}\n allowCustomValue\n virtualized\n tabSelectsValue={false}\n onInputChange={onInputChange}\n options={model.getOptionsForSelect()}\n onChange={(newValue) => {\n model.changeValueTo(newValue.value!, newValue.label!);\n }}\n />\n );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n const options = model.getOptionsForSelect();\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 = model.onSearchChange\n ? (value: string, meta: InputActionMeta) => {\n if (meta.action === 'input-change') {\n model.onSearchChange!(value);\n }\n }\n : undefined;\n\n const placeholder = options.length > 0 ? 'Select value' : '';\n\n return (\n <MultiSelect<VariableValueSingle>\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 isClearable={true}\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 />\n );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n if (model.state.isMulti) {\n return <VariableValueSelectMulti model={model} />;\n } else {\n return <VariableValueSelect model={model} />;\n }\n}\n"],"names":["value"],"mappings":"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"}
|
|
@@ -4,7 +4,6 @@ import { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase
|
|
|
4
4
|
import { sceneGraph } from '../../core/sceneGraph/index.js';
|
|
5
5
|
import { ControlsLabel } from '../../utils/ControlsLabel.js';
|
|
6
6
|
import { css } from '@emotion/css';
|
|
7
|
-
import { selectors } from '@grafana/e2e-selectors';
|
|
8
7
|
|
|
9
8
|
class VariableValueSelectors extends SceneObjectBase {
|
|
10
9
|
}
|
|
@@ -24,8 +23,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
24
23
|
}
|
|
25
24
|
if (layout === "vertical") {
|
|
26
25
|
return /* @__PURE__ */ React.createElement("div", {
|
|
27
|
-
className: verticalContainer
|
|
28
|
-
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
|
|
26
|
+
className: verticalContainer
|
|
29
27
|
}, /* @__PURE__ */ React.createElement(VariableLabel, {
|
|
30
28
|
variable,
|
|
31
29
|
layout
|
|
@@ -34,8 +32,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
34
32
|
}));
|
|
35
33
|
}
|
|
36
34
|
return /* @__PURE__ */ React.createElement("div", {
|
|
37
|
-
className: containerStyle
|
|
38
|
-
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
|
|
35
|
+
className: containerStyle
|
|
39
36
|
}, /* @__PURE__ */ React.createElement(VariableLabel, {
|
|
40
37
|
variable
|
|
41
38
|
}), /* @__PURE__ */ React.createElement(variable.Component, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\
|
|
1
|
+
{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n const variables = sceneGraph.getVariables(model)!.useState();\n\n return (\n <>\n {variables.variables.map((variable) => (\n <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n ))}\n </>\n );\n}\n\ninterface VariableSelectProps {\n layout?: ControlsLayout;\n variable: SceneVariable;\n /** To override hide from VariableValueSelectByName */\n showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n if (state.hide === VariableHide.hideVariable && !showAlways) {\n return null;\n }\n\n if (layout === 'vertical') {\n return (\n <div className={verticalContainer}>\n <VariableLabel variable={variable} layout={layout} />\n <variable.Component model={variable} />\n </div>\n );\n }\n\n return (\n <div className={containerStyle}>\n <VariableLabel variable={variable} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel) {\n return null;\n }\n\n const elementId = `var-${state.key}`;\n const labelOrName = state.label ?? state.name;\n\n return (\n <ControlsLabel\n htmlFor={elementId}\n isLoading={state.loading}\n onCancel={() => variable.onCancel?.()}\n label={labelOrName}\n error={state.error}\n layout={layout}\n description={state.description ?? undefined}\n />\n );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -6012,8 +6012,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
6012
6012
|
}
|
|
6013
6013
|
if (layout === "vertical") {
|
|
6014
6014
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
6015
|
-
className: verticalContainer
|
|
6016
|
-
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
|
|
6015
|
+
className: verticalContainer
|
|
6017
6016
|
}, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
|
|
6018
6017
|
variable,
|
|
6019
6018
|
layout
|
|
@@ -6022,8 +6021,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
6022
6021
|
}));
|
|
6023
6022
|
}
|
|
6024
6023
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
6025
|
-
className: containerStyle
|
|
6026
|
-
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
|
|
6024
|
+
className: containerStyle
|
|
6027
6025
|
}, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
|
|
6028
6026
|
variable
|
|
6029
6027
|
}), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
|
|
@@ -6358,7 +6356,6 @@ function VariableValueSelect({ model }) {
|
|
|
6358
6356
|
tabSelectsValue: false,
|
|
6359
6357
|
onInputChange,
|
|
6360
6358
|
options: model.getOptionsForSelect(),
|
|
6361
|
-
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
|
|
6362
6359
|
onChange: (newValue) => {
|
|
6363
6360
|
model.changeValueTo(newValue.value, newValue.label);
|
|
6364
6361
|
}
|
|
@@ -6395,7 +6392,6 @@ function VariableValueSelectMulti({ model }) {
|
|
|
6395
6392
|
onBlur: () => {
|
|
6396
6393
|
model.changeValueTo(uncommittedValue);
|
|
6397
6394
|
},
|
|
6398
|
-
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
|
|
6399
6395
|
onChange: (newValue, action) => {
|
|
6400
6396
|
if (action.action === "clear" && noValueOnClear) {
|
|
6401
6397
|
model.changeValueTo([]);
|
|
@@ -7594,18 +7590,29 @@ function VizPanelMenuRenderer({ model }) {
|
|
|
7594
7590
|
}, []);
|
|
7595
7591
|
const renderItems = (items2) => {
|
|
7596
7592
|
return items2.map(
|
|
7597
|
-
(item) =>
|
|
7598
|
-
|
|
7599
|
-
|
|
7600
|
-
|
|
7601
|
-
|
|
7602
|
-
|
|
7603
|
-
|
|
7604
|
-
|
|
7605
|
-
|
|
7606
|
-
|
|
7607
|
-
|
|
7608
|
-
|
|
7593
|
+
(item) => {
|
|
7594
|
+
switch (item.type) {
|
|
7595
|
+
case "divider":
|
|
7596
|
+
return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Divider, {
|
|
7597
|
+
key: item.text
|
|
7598
|
+
});
|
|
7599
|
+
case "group":
|
|
7600
|
+
return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Group, {
|
|
7601
|
+
key: item.text,
|
|
7602
|
+
label: item.text
|
|
7603
|
+
}, item.subMenu ? renderItems(item.subMenu) : void 0);
|
|
7604
|
+
default:
|
|
7605
|
+
return /* @__PURE__ */ React__default["default"].createElement(ui.Menu.Item, {
|
|
7606
|
+
key: item.text,
|
|
7607
|
+
label: item.text,
|
|
7608
|
+
icon: item.iconClassName,
|
|
7609
|
+
childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
|
|
7610
|
+
url: item.href,
|
|
7611
|
+
onClick: item.onClick,
|
|
7612
|
+
shortcut: item.shortcut
|
|
7613
|
+
});
|
|
7614
|
+
}
|
|
7615
|
+
}
|
|
7609
7616
|
);
|
|
7610
7617
|
};
|
|
7611
7618
|
return /* @__PURE__ */ React__default["default"].createElement(ui.Menu, {
|
|
@@ -8230,8 +8237,7 @@ function SceneGridRowRenderer({ model }) {
|
|
|
8230
8237
|
}, /* @__PURE__ */ React__default["default"].createElement("button", {
|
|
8231
8238
|
onClick: model.onCollapseToggle,
|
|
8232
8239
|
className: styles.rowTitleButton,
|
|
8233
|
-
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
8234
|
-
"data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
|
|
8240
|
+
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
8235
8241
|
}, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
|
|
8236
8242
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
8237
8243
|
}), /* @__PURE__ */ React__default["default"].createElement("span", {
|