@grafana/plugin-ui 0.11.1 → 0.12.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.
|
@@ -41,8 +41,10 @@ function QueryOptionGroup({ title, children, collapsedInfo, queryStats }) {
|
|
|
41
41
|
children: /* @__PURE__ */ jsx("div", { className: styles.body, children })
|
|
42
42
|
}
|
|
43
43
|
),
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
/* @__PURE__ */ jsxs("div", { className: styles.queryStatsWrap, children: [
|
|
45
|
+
queryStats && config.featureToggles.lokiQuerySplitting && /* @__PURE__ */ jsx(Tooltip, { content: "Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.", children: /* @__PURE__ */ jsx(Icon, { tabIndex: 0, name: "info-circle", className: styles.tooltip, size: "sm" }) }),
|
|
46
|
+
queryStats && /* @__PURE__ */ jsx("p", { className: styles.stats, children: generateQueryStats(queryStats) })
|
|
47
|
+
] })
|
|
46
48
|
] });
|
|
47
49
|
}
|
|
48
50
|
const getStyles = (theme) => {
|
|
@@ -81,6 +83,13 @@ const getStyles = (theme) => {
|
|
|
81
83
|
gap: theme.spacing(2),
|
|
82
84
|
flexWrap: "wrap"
|
|
83
85
|
}),
|
|
86
|
+
queryStatsWrap: css({
|
|
87
|
+
display: "flex",
|
|
88
|
+
alignItems: "center",
|
|
89
|
+
alignSelf: "flex-start",
|
|
90
|
+
label: "query-stats-wrap",
|
|
91
|
+
padding: theme.spacing(1)
|
|
92
|
+
}),
|
|
84
93
|
stats: css({
|
|
85
94
|
margin: "0px",
|
|
86
95
|
color: theme.colors.text.secondary,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n title: string;\n collapsedInfo: string[];\n queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n const [isOpen, toggleOpen] = useToggle(false);\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.wrapper}>\n <Collapse\n className={styles.collapse}\n collapsible\n isOpen={isOpen}\n onToggle={toggleOpen}\n label={\n <EditorStack gap={0}>\n <h6 className={styles.title}>{title}</h6>\n {!isOpen && (\n <div className={styles.description}>\n {collapsedInfo.map((x, i) => (\n <span key={i}>{x}</span>\n ))}\n </div>\n )}\n </EditorStack>\n }\n >\n <div className={styles.body}>{children}</div>\n </Collapse>\n {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n
|
|
1
|
+
{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n title: string;\n collapsedInfo: string[];\n queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n const [isOpen, toggleOpen] = useToggle(false);\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.wrapper}>\n <Collapse\n className={styles.collapse}\n collapsible\n isOpen={isOpen}\n onToggle={toggleOpen}\n label={\n <EditorStack gap={0}>\n <h6 className={styles.title}>{title}</h6>\n {!isOpen && (\n <div className={styles.description}>\n {collapsedInfo.map((x, i) => (\n <span key={i}>{x}</span>\n ))}\n </div>\n )}\n </EditorStack>\n }\n >\n <div className={styles.body}>{children}</div>\n </Collapse>\n <div className={styles.queryStatsWrap}>\n {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n {queryStats && config.featureToggles.lokiQuerySplitting && (\n <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n </Tooltip>\n )}\n\n {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n </div>\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n collapse: css({\n backgroundColor: 'unset',\n border: 'unset',\n marginBottom: 0,\n\n ['> button']: {\n padding: theme.spacing(0, 1),\n },\n }),\n wrapper: css({\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'baseline',\n }),\n title: css({\n flexGrow: 1,\n overflow: 'hidden',\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n margin: 0,\n }),\n description: css({\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.bodySmall.fontWeight,\n paddingLeft: theme.spacing(2),\n gap: theme.spacing(2),\n display: 'flex',\n }),\n body: css({\n display: 'flex',\n gap: theme.spacing(2),\n flexWrap: 'wrap',\n }),\n queryStatsWrap: css({\n display: 'flex',\n alignItems: 'center',\n alignSelf: 'flex-start',\n label: 'query-stats-wrap',\n padding: theme.spacing(1),\n }),\n stats: css({\n margin: '0px',\n color: theme.colors.text.secondary,\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n tooltip: css({\n marginRight: theme.spacing(0.25),\n }),\n };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n if (queryStats.message) {\n return queryStats.message;\n }\n\n return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n return text + suffix;\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grafana/plugin-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+ssh://git@github.com/grafana/plugin-ui.git"
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"scripts": {
|
|
28
28
|
"build": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.ts --configPlugin esbuild",
|
|
29
|
+
"dev": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.ts --configPlugin esbuild -w",
|
|
29
30
|
"clean": "rm -rf ./dist ./compiled",
|
|
30
31
|
"test": "jest --watch",
|
|
31
32
|
"test:ci": "jest --ci",
|