@perses-dev/prometheus-plugin 0.53.1 → 0.53.2

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.
Files changed (17) hide show
  1. package/__mf/js/{Prometheus.c0c6219f.js → Prometheus.7d2f1afa.js} +3 -3
  2. package/__mf/js/async/{8706.9a6f6579.js → 8706.a36614fb.js} +1 -1
  3. package/__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js +1 -0
  4. package/__mf/js/{main.afd47409.js → main.b9fe0e65.js} +2 -2
  5. package/lib/cjs/components/PromQLEditor.js +3 -1
  6. package/lib/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js +9 -5
  7. package/lib/components/PromQLEditor.d.ts +2 -1
  8. package/lib/components/PromQLEditor.d.ts.map +1 -1
  9. package/lib/components/PromQLEditor.js +3 -1
  10. package/lib/components/PromQLEditor.js.map +1 -1
  11. package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map +1 -1
  12. package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js +9 -5
  13. package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js.map +1 -1
  14. package/mf-manifest.json +12 -12
  15. package/mf-stats.json +15 -15
  16. package/package.json +1 -1
  17. package/__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js +0 -1
package/lib/cjs/components/PromQLEditor.js CHANGED
@@ -41,10 +41,11 @@ function _interop_require_default(obj) {
41
41
  const treeViewStr = 'Tree View';
42
42
  const treeViewOpenStr = 'Open ' + treeViewStr;
43
43
  const treeViewCloseStr = 'Close ' + treeViewStr;
44
- function PromQLEditor({ completeConfig, datasource, ...rest }) {
44
+ function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }) {
45
45
  const theme = (0, _material.useTheme)();
46
46
  const isDarkMode = theme.palette.mode === 'dark';
47
47
  const [isTreeViewVisible, setTreeViewVisible] = (0, _react.useState)(false);
48
+ const readOnly = isReadOnly ?? false;
48
49
  const promQLExtension = (0, _react.useMemo)(()=>{
49
50
  return new _codemirrorpromql.PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
50
51
  }, [
@@ -85,6 +86,7 @@ function PromQLEditor({ completeConfig, datasource, ...rest }) {
85
86
  border: `1px solid ${theme.palette.divider}`
86
87
  },
87
88
  theme: isDarkMode ? 'dark' : 'light',
89
+ readOnly: readOnly,
88
90
  basicSetup: {
89
91
  highlightActiveLine: false,
90
92
  highlightActiveLineGutter: false,
package/lib/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js CHANGED
@@ -31,7 +31,7 @@ const _types = require("../types");
31
31
  const _components1 = require("../../components");
32
32
  const _queryeditormodel = require("./query-editor-model");
33
33
  function PrometheusTimeSeriesQueryEditor(props) {
34
- const { onChange, value, value: { query, datasource }, queryHandlerSettings } = props;
34
+ const { onChange, value, value: { query, datasource }, queryHandlerSettings, isReadonly } = props;
35
35
  const datasourceSelectValue = datasource ?? _model.DEFAULT_PROM;
36
36
  const datasourceSelectLabelID = (0, _components.useId)('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
37
37
  const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.PROM_DATASOURCE_KIND);
@@ -103,7 +103,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
103
103
  onChange: handleDatasourceChange,
104
104
  labelId: datasourceSelectLabelID,
105
105
  label: "Prometheus Datasource",
106
- notched: true
106
+ notched: true,
107
+ readOnly: isReadonly
107
108
  })
108
109
  }),
109
110
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PromQLEditor, {
@@ -115,7 +116,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
115
116
  value: query,
116
117
  datasource: selectedDatasource,
117
118
  onChange: handlePromQlEditorChanges,
118
- onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
119
+ onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
120
+ isReadOnly: isReadonly
119
121
  }),
120
122
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
121
123
  direction: "row",
@@ -128,7 +130,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
128
130
  helperText: "Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",
129
131
  value: format ?? '',
130
132
  onChange: handleLegendSpecChange,
131
- onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined
133
+ onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined,
134
+ disabled: isReadonly
132
135
  }),
133
136
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
134
137
  label: "Min Step",
@@ -139,7 +142,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
139
142
  onBlur: queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined,
140
143
  sx: {
141
144
  width: '250px'
142
- }
145
+ },
146
+ disabled: isReadonly
143
147
  })
144
148
  ]
145
149
  })
package/lib/components/PromQLEditor.d.ts CHANGED
@@ -5,6 +5,7 @@ import { PrometheusDatasourceSelector } from '../model';
5
5
  export type PromQLEditorProps = {
6
6
  completeConfig: CompleteConfiguration;
7
7
  datasource: PrometheusDatasourceSelector;
8
+ isReadOnly?: boolean;
8
9
  } & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
9
- export declare function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement;
10
+ export declare function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }: PromQLEditorProps): ReactElement;
10
11
  //# sourceMappingURL=PromQLEditor.d.ts.map
package/lib/components/PromQLEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAsHrG"}
1
+ {"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAwHjH"}
package/lib/components/PromQLEditor.js CHANGED
@@ -26,10 +26,11 @@ import TreeNode from './TreeNode';
26
26
  const treeViewStr = 'Tree View';
27
27
  const treeViewOpenStr = 'Open ' + treeViewStr;
28
28
  const treeViewCloseStr = 'Close ' + treeViewStr;
29
- export function PromQLEditor({ completeConfig, datasource, ...rest }) {
29
+ export function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }) {
30
30
  const theme = useTheme();
31
31
  const isDarkMode = theme.palette.mode === 'dark';
32
32
  const [isTreeViewVisible, setTreeViewVisible] = useState(false);
33
+ const readOnly = isReadOnly ?? false;
33
34
  const promQLExtension = useMemo(()=>{
34
35
  return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
35
36
  }, [
@@ -70,6 +71,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
70
71
  border: `1px solid ${theme.palette.divider}`
71
72
  },
72
73
  theme: isDarkMode ? 'dark' : 'light',
74
+ readOnly: readOnly,
73
75
  basicSetup: {
74
76
  highlightActiveLine: false,
75
77
  highlightActiveLineGutter: false,
package/lib/components/PromQLEditor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n completeConfig: CompleteConfiguration;\n datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n const theme = useTheme();\n const isDarkMode = theme.palette.mode === 'dark';\n const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n const promQLExtension = useMemo(() => {\n return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n }, [completeConfig]);\n\n let queryExpr = useReplaceVariablesInString(rest.value);\n if (queryExpr) {\n // TODO placeholder values for steps to be replaced with actual values\n // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n }\n\n const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n const handleShowTreeView = (): void => {\n setTreeViewVisible(!isTreeViewVisible);\n };\n\n return (\n <Stack position=\"relative\">\n <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n shrink\n sx={{\n position: 'absolute',\n top: '-12px',\n left: '10px',\n padding: '0 4px',\n color: theme.palette.text.primary,\n zIndex: 1,\n }}\n >\n PromQL Expression\n </InputLabel>\n {/* TODO: We need to wait for this to be merged, then we need to add proper e2e for some scenarios */}\n <CodeMirror\n data-testid=\"promql_expression_editor\"\n {...rest}\n style={{ border: `1px solid ${theme.palette.divider}` }}\n theme={isDarkMode ? 'dark' : 'light'}\n basicSetup={{\n highlightActiveLine: false,\n highlightActiveLineGutter: false,\n foldGutter: false,\n }}\n extensions={[\n EditorView.lineWrapping,\n promQLExtension,\n EditorView.theme({\n '.cm-content': {\n paddingTop: '8px',\n paddingBottom: '8px',\n paddingRight: '40px', // offset for the tree view button\n },\n }),\n ]}\n placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n />\n {queryExpr && (\n <>\n <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n <IconButton\n aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n onClick={handleShowTreeView}\n sx={{ position: 'absolute', right: '5px', top: '5px' }}\n size=\"small\"\n key=\"tree-view-button\"\n >\n <FileTreeIcon sx={{ fontSize: '18px' }} />\n </IconButton>\n </Tooltip>\n {isTreeViewVisible && (\n <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n <Tooltip title={treeViewCloseStr}>\n <IconButton\n aria-label={treeViewCloseStr}\n onClick={() => setTreeViewVisible(false)}\n sx={{ position: 'absolute', top: '5px', right: '5px' }}\n size=\"small\"\n key=\"tree-view-close-button\"\n >\n <CloseIcon sx={{ fontSize: '18px' }} />\n </IconButton>\n </Tooltip>\n {error ? (\n // Here the user is able to hide the error alert\n <ErrorAlert\n error={{\n name: `${treeViewStr} not available`,\n message: error.message,\n }}\n />\n ) : (\n <div\n style={{\n padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n overflowX: 'auto',\n backgroundColor: theme.palette.background.default,\n }}\n >\n {isLoading ? (\n <CircularProgress />\n ) : parseQueryResponse?.data ? (\n <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n ) : null}\n </div>\n )}\n </div>\n )}\n </>\n )}\n </Stack>\n );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","data-testid","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,gBAA0C,wBAAwB;AACzE,SAASC,eAAe,QAA+B,mCAAmC;AAC1F,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,QAAQ,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACnG,OAAOC,kBAAkB,2BAA2B;AACpD,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,2BAA2B,QAAQ,4BAA4B;AAExE,SAASC,2BAA2B,QAAQ,yEAAyE;AACrH,SAASC,aAAa,QAAQ,UAAU;AACxC,OAAOC,cAAc,aAAa;AAElC,MAAMC,cAAc;AACpB,MAAMC,kBAAkB,UAAUD;AAClC,MAAME,mBAAmB,WAAWF;AAOpC,OAAO,SAASG,aAAa,EAAEC,cAAc,EAAEC,UAAU,EAAE,GAAGC,MAAyB;IACrF,MAAMC,QAAQtB;IACd,MAAMuB,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAC1C,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGnB,SAAS;IAEzD,MAAMoB,kBAAkBrB,QAAQ;QAC9B,OAAO,IAAIT,kBAAkB+B,cAAc,CAAC,OAAOC,WAAW,CAACX,gBAAgBY,WAAW;IAC5F,GAAG;QAACZ;KAAe;IAEnB,IAAIa,YAAYrB,4BAA4BU,KAAKY,KAAK;IACtD,IAAID,WAAW;QACb,sEAAsE;QACtE,6HAA6H;QAC7H,4HAA4H;QAC5H,gGAAgG;QAChGA,YAAYpB,4BAA4BoB,WAAW,OAAO;IAC5D;IAEA,MAAM,EAAEE,MAAMC,kBAAkB,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGxB,cAAcmB,aAAa,IAAIZ,YAAYM;IAElG,MAAMY,qBAAqB;QACzBX,mBAAmB,CAACD;IACtB;IAEA,qBACE,MAACvB;QAAMoC,UAAS;;0BACd,KAACrC,WAAW,0EAA0E;;gBACpFsC,MAAM;gBACNC,IAAI;oBACFF,UAAU;oBACVG,KAAK;oBACLC,MAAM;oBACNC,SAAS;oBACTC,OAAOvB,MAAME,OAAO,CAACsB,IAAI,CAACC,OAAO;oBACjCC,QAAQ;gBACV;0BACD;;0BAID,KAACnD;gBACCoD,eAAY;gBACX,GAAG5B,IAAI;gBACR6B,OAAO;oBAAEC,QAAQ,CAAC,UAAU,EAAE7B,MAAME,OAAO,CAAC4B,OAAO,EAAE;gBAAC;gBACtD9B,OAAOC,aAAa,SAAS;gBAC7B8B,YAAY;oBACVC,qBAAqB;oBACrBC,2BAA2B;oBAC3BC,YAAY;gBACd;gBACAC,YAAY;oBACV1D,WAAW2D,YAAY;oBACvB9B;oBACA7B,WAAWuB,KAAK,CAAC;wBACf,eAAe;4BACbqC,YAAY;4BACZC,eAAe;4BACfC,cAAc;wBAChB;oBACF;iBACD;gBACDC,aAAY;;YAEb9B,2BACC;;kCACE,KAAC3B;wBAAQ0D,OAAOrC,oBAAoBT,mBAAmBD;kCACrD,cAAA,KAACZ;4BACC4D,cAAYtC,oBAAoBT,mBAAmBD;4BACnDiD,SAAS3B;4BACTG,IAAI;gCAAEF,UAAU;gCAAY2B,OAAO;gCAAOxB,KAAK;4BAAM;4BACrDyB,MAAK;sCAGL,cAAA,KAAC7D;gCAAamC,IAAI;oCAAE2B,UAAU;gCAAO;;2BAFjC;;oBAKP1C,mCACC,MAAC2C;wBAAInB,OAAO;4BAAEC,QAAQ,CAAC,UAAU,EAAE7B,MAAME,OAAO,CAAC4B,OAAO,EAAE;4BAAEb,UAAU;wBAAW;;0CAC/E,KAAClC;gCAAQ0D,OAAO9C;0CACd,cAAA,KAACb;oCACC4D,cAAY/C;oCACZgD,SAAS,IAAMtC,mBAAmB;oCAClCc,IAAI;wCAAEF,UAAU;wCAAYG,KAAK;wCAAOwB,OAAO;oCAAM;oCACrDC,MAAK;8CAGL,cAAA,KAACzD;wCAAU+B,IAAI;4CAAE2B,UAAU;wCAAO;;mCAF9B;;4BAKP/B,QACC,gDAAgD;0CAChD,KAAC5B;gCACC4B,OAAO;oCACLiC,MAAM,GAAGvD,YAAY,cAAc,CAAC;oCACpCwD,SAASlC,MAAMkC,OAAO;gCACxB;+CAGF,KAACF;gCACCnB,OAAO;oCACLN,SAAS,GAAGtB,MAAMkD,OAAO,CAAC,KAAK,CAAC,EAAElD,MAAMkD,OAAO,CAAC,KAAK,GAAG,EAAElD,MAAMkD,OAAO,CAAC,MAAM;oCAC9EC,WAAW;oCACXC,iBAAiBpD,MAAME,OAAO,CAACmD,UAAU,CAACC,OAAO;gCACnD;0CAECxC,0BACC,KAACnC,wBACCkC,oBAAoBD,qBACtB,KAACpB;oCAAS+D,MAAM1C,mBAAmBD,IAAI;oCAAE4C,SAAS;oCAAOC,UAAU;oCAAG3D,YAAYA;qCAChF;;;;;;;;AAStB"}
1
+ {"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n completeConfig: CompleteConfiguration;\n datasource: PrometheusDatasourceSelector;\n isReadOnly?: boolean;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }: PromQLEditorProps): ReactElement {\n const theme = useTheme();\n const isDarkMode = theme.palette.mode === 'dark';\n const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n const readOnly = isReadOnly ?? false;\n\n const promQLExtension = useMemo(() => {\n return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n }, [completeConfig]);\n\n let queryExpr = useReplaceVariablesInString(rest.value);\n if (queryExpr) {\n // TODO placeholder values for steps to be replaced with actual values\n // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n }\n\n const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n const handleShowTreeView = (): void => {\n setTreeViewVisible(!isTreeViewVisible);\n };\n\n return (\n <Stack position=\"relative\">\n <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n shrink\n sx={{\n position: 'absolute',\n top: '-12px',\n left: '10px',\n padding: '0 4px',\n color: theme.palette.text.primary,\n zIndex: 1,\n }}\n >\n PromQL Expression\n </InputLabel>\n {/* TODO: We need to wait for this to be merged, then we need to add proper e2e for some scenarios */}\n <CodeMirror\n data-testid=\"promql_expression_editor\"\n {...rest}\n style={{ border: `1px solid ${theme.palette.divider}` }}\n theme={isDarkMode ? 'dark' : 'light'}\n readOnly={readOnly}\n basicSetup={{\n highlightActiveLine: false,\n highlightActiveLineGutter: false,\n foldGutter: false,\n }}\n extensions={[\n EditorView.lineWrapping,\n promQLExtension,\n EditorView.theme({\n '.cm-content': {\n paddingTop: '8px',\n paddingBottom: '8px',\n paddingRight: '40px', // offset for the tree view button\n },\n }),\n ]}\n placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n />\n {queryExpr && (\n <>\n <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n <IconButton\n aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n onClick={handleShowTreeView}\n sx={{ position: 'absolute', right: '5px', top: '5px' }}\n size=\"small\"\n key=\"tree-view-button\"\n >\n <FileTreeIcon sx={{ fontSize: '18px' }} />\n </IconButton>\n </Tooltip>\n {isTreeViewVisible && (\n <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n <Tooltip title={treeViewCloseStr}>\n <IconButton\n aria-label={treeViewCloseStr}\n onClick={() => setTreeViewVisible(false)}\n sx={{ position: 'absolute', top: '5px', right: '5px' }}\n size=\"small\"\n key=\"tree-view-close-button\"\n >\n <CloseIcon sx={{ fontSize: '18px' }} />\n </IconButton>\n </Tooltip>\n {error ? (\n // Here the user is able to hide the error alert\n <ErrorAlert\n error={{\n name: `${treeViewStr} not available`,\n message: error.message,\n }}\n />\n ) : (\n <div\n style={{\n padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n overflowX: 'auto',\n backgroundColor: theme.palette.background.default,\n }}\n >\n {isLoading ? (\n <CircularProgress />\n ) : parseQueryResponse?.data ? (\n <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n ) : null}\n </div>\n )}\n </div>\n )}\n </>\n )}\n </Stack>\n );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","isReadOnly","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","readOnly","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","data-testid","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}
package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAYlD,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAuHzG"}
1
+ {"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAYlD,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CA4HzG"}
package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js CHANGED
@@ -23,7 +23,7 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
23
23
  /**
24
24
  * The options editor component for editing a PrometheusTimeSeriesQuery's spec.
25
25
  */ export function PrometheusTimeSeriesQueryEditor(props) {
26
- const { onChange, value, value: { query, datasource }, queryHandlerSettings } = props;
26
+ const { onChange, value, value: { query, datasource }, queryHandlerSettings, isReadonly } = props;
27
27
  const datasourceSelectValue = datasource ?? DEFAULT_PROM;
28
28
  const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
29
29
  const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, PROM_DATASOURCE_KIND);
@@ -95,7 +95,8 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
95
95
  onChange: handleDatasourceChange,
96
96
  labelId: datasourceSelectLabelID,
97
97
  label: "Prometheus Datasource",
98
- notched: true
98
+ notched: true,
99
+ readOnly: isReadonly
99
100
  })
100
101
  }),
101
102
  /*#__PURE__*/ _jsx(PromQLEditor, {
@@ -107,7 +108,8 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
107
108
  value: query,
108
109
  datasource: selectedDatasource,
109
110
  onChange: handlePromQlEditorChanges,
110
- onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
111
+ onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
112
+ isReadOnly: isReadonly
111
113
  }),
112
114
  /*#__PURE__*/ _jsxs(Stack, {
113
115
  direction: "row",
@@ -120,7 +122,8 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
120
122
  helperText: "Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",
121
123
  value: format ?? '',
122
124
  onChange: handleLegendSpecChange,
123
- onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined
125
+ onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined,
126
+ disabled: isReadonly
124
127
  }),
125
128
  /*#__PURE__*/ _jsx(TextField, {
126
129
  label: "Min Step",
@@ -131,7 +134,8 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
131
134
  onBlur: queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined,
132
135
  sx: {
133
136
  width: '250px'
134
- }
137
+ },
138
+ disabled: isReadonly
135
139
  })
136
140
  ]
137
141
  })
package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n DatasourceSelect,\n DatasourceSelectProps,\n useDatasource,\n useDatasourceClient,\n useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport {\n DEFAULT_PROM,\n DurationString,\n isDefaultPromSelector,\n isPrometheusDatasourceSelector,\n PROM_DATASOURCE_KIND,\n PrometheusClient,\n PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n PrometheusTimeSeriesQueryEditorProps,\n useQueryState,\n useFormatState,\n useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n const {\n onChange,\n value,\n value: { query, datasource },\n queryHandlerSettings,\n } = props;\n\n const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n const selectedDatasource = useDatasourceSelectValueToSelector(\n datasourceSelectValue,\n PROM_DATASOURCE_KIND\n ) as PrometheusDatasourceSelector;\n\n const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n const promURL = client?.options.datasourceUrl;\n const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n const minStepPlaceholder =\n minStep ??\n (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n DEFAULT_SCRAPE_INTERVAL;\n\n const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n if (isPrometheusDatasourceSelector(next)) {\n /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel\n This was probably intentional to allow for quick switching between datasources.\n Could have been triggered only with Run Query button as well.\n */\n onChange(\n produce(value, (draft) => {\n // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n draft.datasource = nextDatasource;\n })\n );\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: next });\n return;\n }\n\n throw new Error('Got unexpected non-Prometheus datasource selector');\n };\n\n const handlePromQlEditorChanges = useCallback(\n (e: string) => {\n handleQueryChange(e);\n if (queryHandlerSettings?.watchQueryChanges) {\n queryHandlerSettings?.watchQueryChanges(e);\n }\n },\n [queryHandlerSettings, handleQueryChange]\n );\n\n const handleLegendSpecChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleFormatChange(e.target.value);\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, seriesNameFormat: e.target.value });\n },\n [queryHandlerSettings, handleFormatChange, value]\n );\n\n const handleMinStepSpecChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined);\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, minStep: e.target.value });\n },\n [queryHandlerSettings, handleMinStepChange, value]\n );\n\n return (\n <Stack spacing={2}>\n <FormControl margin=\"dense\" fullWidth={false}>\n <DatasourceSelect\n datasourcePluginKind={PROM_DATASOURCE_KIND}\n value={datasourceSelectValue}\n onChange={handleDatasourceChange}\n labelId={datasourceSelectLabelID}\n label=\"Prometheus Datasource\"\n notched\n />\n </FormControl>\n <PromQLEditor\n completeConfig={{ remote: { url: promURL } }}\n value={query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n datasource={selectedDatasource}\n onChange={handlePromQlEditorChanges}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n />\n <Stack direction=\"row\" spacing={2}>\n <TextField\n fullWidth\n label=\"Legend\"\n placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n value={format ?? ''}\n onChange={handleLegendSpecChange}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined}\n />\n <TextField\n label=\"Min Step\"\n placeholder={minStepPlaceholder}\n helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n value={minStep ?? ''}\n onChange={handleMinStepSpecChange}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined}\n sx={{ width: '250px' }}\n />\n </Stack>\n </Stack>\n );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","useCallback","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","query","datasource","queryHandlerSettings","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","setWatchOtherSpecs","Error","handlePromQlEditorChanges","e","watchQueryChanges","handleLegendSpecChange","target","seriesNameFormat","handleMinStepSpecChange","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","completeConfig","remote","url","onBlur","runWithOnBlur","direction","placeholder","helperText","sx","width"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n DatasourceSelect,\n DatasourceSelectProps,\n useDatasource,\n useDatasourceClient,\n useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport {\n DEFAULT_PROM,\n DurationString,\n isDefaultPromSelector,\n isPrometheusDatasourceSelector,\n PROM_DATASOURCE_KIND,\n PrometheusClient,\n PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n PrometheusTimeSeriesQueryEditorProps,\n useQueryState,\n useFormatState,\n useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n const {\n onChange,\n value,\n value: { query, datasource },\n queryHandlerSettings,\n isReadonly,\n } = props;\n\n const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n const selectedDatasource = useDatasourceSelectValueToSelector(\n datasourceSelectValue,\n PROM_DATASOURCE_KIND\n ) as PrometheusDatasourceSelector;\n\n const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n const promURL = client?.options.datasourceUrl;\n const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n const minStepPlaceholder =\n minStep ??\n (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n DEFAULT_SCRAPE_INTERVAL;\n\n const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n if (isPrometheusDatasourceSelector(next)) {\n /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel\n This was probably intentional to allow for quick switching between datasources.\n Could have been triggered only with Run Query button as well.\n */\n onChange(\n produce(value, (draft) => {\n // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n draft.datasource = nextDatasource;\n })\n );\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: next });\n return;\n }\n\n throw new Error('Got unexpected non-Prometheus datasource selector');\n };\n\n const handlePromQlEditorChanges = useCallback(\n (e: string) => {\n handleQueryChange(e);\n if (queryHandlerSettings?.watchQueryChanges) {\n queryHandlerSettings?.watchQueryChanges(e);\n }\n },\n [queryHandlerSettings, handleQueryChange]\n );\n\n const handleLegendSpecChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleFormatChange(e.target.value);\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, seriesNameFormat: e.target.value });\n },\n [queryHandlerSettings, handleFormatChange, value]\n );\n\n const handleMinStepSpecChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined);\n if (queryHandlerSettings?.setWatchOtherSpecs)\n queryHandlerSettings.setWatchOtherSpecs({ ...value, minStep: e.target.value });\n },\n [queryHandlerSettings, handleMinStepChange, value]\n );\n\n return (\n <Stack spacing={2}>\n <FormControl margin=\"dense\" fullWidth={false}>\n <DatasourceSelect\n datasourcePluginKind={PROM_DATASOURCE_KIND}\n value={datasourceSelectValue}\n onChange={handleDatasourceChange}\n labelId={datasourceSelectLabelID}\n label=\"Prometheus Datasource\"\n notched\n readOnly={isReadonly}\n />\n </FormControl>\n <PromQLEditor\n completeConfig={{ remote: { url: promURL } }}\n value={query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n datasource={selectedDatasource}\n onChange={handlePromQlEditorChanges}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n isReadOnly={isReadonly}\n />\n <Stack direction=\"row\" spacing={2}>\n <TextField\n fullWidth\n label=\"Legend\"\n placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n value={format ?? ''}\n onChange={handleLegendSpecChange}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined}\n disabled={isReadonly}\n />\n <TextField\n label=\"Min Step\"\n placeholder={minStepPlaceholder}\n helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n value={minStep ?? ''}\n onChange={handleMinStepSpecChange}\n onBlur={queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined}\n sx={{ width: '250px' }}\n disabled={isReadonly}\n />\n </Stack>\n </Stack>\n );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","useCallback","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","query","datasource","queryHandlerSettings","isReadonly","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","setWatchOtherSpecs","Error","handlePromQlEditorChanges","e","watchQueryChanges","handleLegendSpecChange","target","seriesNameFormat","handleMinStepSpecChange","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","readOnly","completeConfig","remote","url","onBlur","runWithOnBlur","isReadOnly","direction","placeholder","helperText","disabled","sx","width"],"mappings":"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"}
package/mf-manifest.json CHANGED
@@ -5,11 +5,11 @@
5
5
  "name": "Prometheus",
6
6
  "type": "app",
7
7
  "buildInfo": {
8
- "buildVersion": "0.53.1",
8
+ "buildVersion": "0.53.2",
9
9
  "buildName": "@perses-dev/prometheus-plugin"
10
10
  },
11
11
  "remoteEntry": {
12
- "name": "__mf/js/Prometheus.c0c6219f.js",
12
+ "name": "__mf/js/Prometheus.7d2f1afa.js",
13
13
  "path": "",
14
14
  "type": "global"
15
15
  },
@@ -356,8 +356,8 @@
356
356
  "__mf/js/async/2675.27451820.js",
357
357
  "__mf/js/async/5724.794828e3.js",
358
358
  "__mf/js/async/537.82230699.js",
359
- "__mf/js/async/8706.9a6f6579.js",
360
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js",
359
+ "__mf/js/async/8706.a36614fb.js",
360
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js",
361
361
  "__mf/js/async/7272.6fa2f127.js",
362
362
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
363
363
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
@@ -400,8 +400,8 @@
400
400
  "__mf/js/async/2675.27451820.js",
401
401
  "__mf/js/async/5724.794828e3.js",
402
402
  "__mf/js/async/537.82230699.js",
403
- "__mf/js/async/8706.9a6f6579.js",
404
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js"
403
+ "__mf/js/async/8706.a36614fb.js",
404
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js"
405
405
  ],
406
406
  "async": [
407
407
  "__mf/js/async/4238.422a1b1c.js",
@@ -415,7 +415,7 @@
415
415
  "__mf/js/async/2675.27451820.js",
416
416
  "__mf/js/async/5724.794828e3.js",
417
417
  "__mf/js/async/537.82230699.js",
418
- "__mf/js/async/8706.9a6f6579.js",
418
+ "__mf/js/async/8706.a36614fb.js",
419
419
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
420
420
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
421
421
  "__mf/js/async/__federation_expose_PrometheusPromQLVariable.b2270799.js",
@@ -460,7 +460,7 @@
460
460
  "__mf/js/async/7272.6fa2f127.js",
461
461
  "__mf/js/async/5724.794828e3.js",
462
462
  "__mf/js/async/537.82230699.js",
463
- "__mf/js/async/8706.9a6f6579.js",
463
+ "__mf/js/async/8706.a36614fb.js",
464
464
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js"
465
465
  ],
466
466
  "async": [
@@ -513,7 +513,7 @@
513
513
  "__mf/js/async/7272.6fa2f127.js",
514
514
  "__mf/js/async/5724.794828e3.js",
515
515
  "__mf/js/async/537.82230699.js",
516
- "__mf/js/async/8706.9a6f6579.js",
516
+ "__mf/js/async/8706.a36614fb.js",
517
517
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js"
518
518
  ],
519
519
  "async": [
@@ -566,7 +566,7 @@
566
566
  "__mf/js/async/7272.6fa2f127.js",
567
567
  "__mf/js/async/5724.794828e3.js",
568
568
  "__mf/js/async/537.82230699.js",
569
- "__mf/js/async/8706.9a6f6579.js",
569
+ "__mf/js/async/8706.a36614fb.js",
570
570
  "__mf/js/async/__federation_expose_PrometheusPromQLVariable.b2270799.js"
571
571
  ],
572
572
  "async": [
@@ -635,8 +635,8 @@
635
635
  "__mf/js/async/2675.27451820.js",
636
636
  "__mf/js/async/5724.794828e3.js",
637
637
  "__mf/js/async/537.82230699.js",
638
- "__mf/js/async/8706.9a6f6579.js",
639
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js",
638
+ "__mf/js/async/8706.a36614fb.js",
639
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js",
640
640
  "__mf/js/async/7272.6fa2f127.js",
641
641
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
642
642
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
package/mf-stats.json CHANGED
@@ -5,11 +5,11 @@
5
5
  "name": "Prometheus",
6
6
  "type": "app",
7
7
  "buildInfo": {
8
- "buildVersion": "0.53.1",
8
+ "buildVersion": "0.53.2",
9
9
  "buildName": "@perses-dev/prometheus-plugin"
10
10
  },
11
11
  "remoteEntry": {
12
- "name": "__mf/js/Prometheus.c0c6219f.js",
12
+ "name": "__mf/js/Prometheus.7d2f1afa.js",
13
13
  "path": "",
14
14
  "type": "global"
15
15
  },
@@ -188,12 +188,12 @@
188
188
  }
189
189
  },
190
190
  "usedIn": [
191
- "./PrometheusTimeSeriesQuery",
191
+ "./PrometheusLabelValuesVariable",
192
192
  "./PrometheusExplorer",
193
193
  "./PrometheusLabelNamesVariable",
194
- "./PrometheusLabelValuesVariable",
195
194
  "./PrometheusPromQLVariable",
196
- "./PrometheusDatasource"
195
+ "./PrometheusDatasource",
196
+ "./PrometheusTimeSeriesQuery"
197
197
  ]
198
198
  },
199
199
  {
@@ -434,8 +434,8 @@
434
434
  "__mf/js/async/2675.27451820.js",
435
435
  "__mf/js/async/5724.794828e3.js",
436
436
  "__mf/js/async/537.82230699.js",
437
- "__mf/js/async/8706.9a6f6579.js",
438
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js",
437
+ "__mf/js/async/8706.a36614fb.js",
438
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js",
439
439
  "__mf/js/async/7272.6fa2f127.js",
440
440
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
441
441
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
@@ -485,8 +485,8 @@
485
485
  "__mf/js/async/2675.27451820.js",
486
486
  "__mf/js/async/5724.794828e3.js",
487
487
  "__mf/js/async/537.82230699.js",
488
- "__mf/js/async/8706.9a6f6579.js",
489
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js"
488
+ "__mf/js/async/8706.a36614fb.js",
489
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js"
490
490
  ],
491
491
  "async": [
492
492
  "__mf/js/async/4238.422a1b1c.js",
@@ -500,7 +500,7 @@
500
500
  "__mf/js/async/2675.27451820.js",
501
501
  "__mf/js/async/5724.794828e3.js",
502
502
  "__mf/js/async/537.82230699.js",
503
- "__mf/js/async/8706.9a6f6579.js",
503
+ "__mf/js/async/8706.a36614fb.js",
504
504
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
505
505
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
506
506
  "__mf/js/async/__federation_expose_PrometheusPromQLVariable.b2270799.js",
@@ -549,7 +549,7 @@
549
549
  "__mf/js/async/7272.6fa2f127.js",
550
550
  "__mf/js/async/5724.794828e3.js",
551
551
  "__mf/js/async/537.82230699.js",
552
- "__mf/js/async/8706.9a6f6579.js",
552
+ "__mf/js/async/8706.a36614fb.js",
553
553
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js"
554
554
  ],
555
555
  "async": [
@@ -606,7 +606,7 @@
606
606
  "__mf/js/async/7272.6fa2f127.js",
607
607
  "__mf/js/async/5724.794828e3.js",
608
608
  "__mf/js/async/537.82230699.js",
609
- "__mf/js/async/8706.9a6f6579.js",
609
+ "__mf/js/async/8706.a36614fb.js",
610
610
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js"
611
611
  ],
612
612
  "async": [
@@ -663,7 +663,7 @@
663
663
  "__mf/js/async/7272.6fa2f127.js",
664
664
  "__mf/js/async/5724.794828e3.js",
665
665
  "__mf/js/async/537.82230699.js",
666
- "__mf/js/async/8706.9a6f6579.js",
666
+ "__mf/js/async/8706.a36614fb.js",
667
667
  "__mf/js/async/__federation_expose_PrometheusPromQLVariable.b2270799.js"
668
668
  ],
669
669
  "async": [
@@ -742,8 +742,8 @@
742
742
  "__mf/js/async/2675.27451820.js",
743
743
  "__mf/js/async/5724.794828e3.js",
744
744
  "__mf/js/async/537.82230699.js",
745
- "__mf/js/async/8706.9a6f6579.js",
746
- "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js",
745
+ "__mf/js/async/8706.a36614fb.js",
746
+ "__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.82b19cf2.js",
747
747
  "__mf/js/async/7272.6fa2f127.js",
748
748
  "__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.e5e35f24.js",
749
749
  "__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.86bf76a6.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@perses-dev/prometheus-plugin",
3
- "version": "0.53.1",
3
+ "version": "0.53.2",
4
4
  "homepage": "https://github.com/perses/plugins/blob/main/README.md",
5
5
  "repository": {
6
6
  "type": "git",
package/__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.c29461ad.js DELETED
@@ -1 +0,0 @@
1
- "use strict";(self.chunk_Prometheus=self.chunk_Prometheus||[]).push([["9606"],{44301:function(e,t,a){a.r(t),a.d(t,{PrometheusTimeSeriesQuery:()=>y});var r=a(8887),s=a(29085),l=a(20461),n=a(99176);function u(e,t){let a=[];return Object.keys(e).sort().forEach(r=>{let s=e[r];void 0!==s&&(t?a.push(`"${r}":"${s}"`):a.push(`${r}="${s}"`))}),`{${a.join(",")}}`}function i(e,t,a){let r=function(e){let{removeExprWrap:t}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a="__name__";if(Object.prototype.hasOwnProperty.call(e,a)){let r=u({...e,[a]:void 0},t);return t?`${r}`:`${e[a]}${r}`}return u(e,t)}(t),s=a?a.replace(/\{\{\s*(.+?)\s*\}\}/g,(e,a)=>t[a]??""):r;return{name:r,formattedName:s}}var o=a(16146),c=a(17197);let d=async(e,t)=>{let a;if(void 0===e.query||null===e.query||""===e.query)return{series:[]};let u=await t.datasourceStore.listDatasourceSelectItems(n.nY),d=(0,r.datasourceSelectValueToSelector)(e.datasource??n.Mm,t.variableState,u)??n.Mm,m=await t.datasourceStore.getDatasource(d),h=Math.trunc((0,l.milliseconds)((0,s.Ib)(m.plugin.spec.scrapeInterval??o.v))/1e3),p=(0,n.k7)((0,r.replaceVariables)(e.minStep,t.variableState))??h,v=(0,n.Bf)(t.timeRange),g=(0,n.wd)(v,p,void 0,t.suggestedStepMs),{start:S,end:b}=v,f=60*new Date().getTimezoneOffset(),y=Math.floor((b+f)/g)*g-f;S=Math.floor((S+f)/g)*g-f,(b=y)===S&&(b=S+g,console.warn(`Step (${g}) was larger than the time range! end of time range was set accordingly.`));let w=(0,c.d)(e.query,1e3*p,1e3*g);w=(0,r.replaceVariables)(w,t.variableState);let x=e.seriesNameFormat;x&&(x=(0,r.replaceVariables)(x,t.variableState));let q=await t.datasourceStore.getDatasourceClient(d),C=(a="instant"===t.mode?await q.instantQuery({query:w,time:b}):await q.rangeQuery({query:w,start:S,end:b,step:g})).data,O=[];if("success"===a.status){let e=(a.warnings??[])[0]??"";""!==e&&O.push({type:"warning",message:e})}return{timeRange:{start:(0,l.fromUnixTime)(S),end:(0,l.fromUnixTime)(b)},stepMs:1e3*g,series:function(e,t,a){if(!t)return[];let r=t.resultType;switch(r){case"vector":return t.result.map(t=>{let{metric:r,value:s,histogram:l}=t,{name:u,formattedName:o}=i(e,r,a);return l?{name:u,formattedName:o,labels:r,values:[(0,n.qJ)([l[0],l[1].sum])],histograms:[l]}:{name:u,formattedName:o,labels:r,values:[(0,n.qJ)(s)]}});case"matrix":return t.result.map(t=>{let{metric:r,values:s,histograms:l}=t,{name:u,formattedName:o}=i(e,r,a);return l?{name:u,formattedName:o,labels:r,values:l.map(e=>(0,n.qJ)([e[0],e[1].sum])),histograms:l.map(e=>e)}:{name:u,formattedName:o,labels:r,values:s.map(n.qJ)}});case"scalar":let{name:s,formattedName:l}=i(e,{},a);return[{name:s,values:[(0,n.qJ)(t.result)],formattedName:l}];default:return console.warn("Unknown result type",r,t),[]}}(w,C,x),metadata:{notices:O,executedQueryString:w}}};var m=a(24246),h=a(75586),p=a(95700),v=a(25283),g=a(90192),S=a(8695),b=a(54538),f=a(64001);let y={getTimeSeriesData:d,OptionsEditorComponent:function(e){let{onChange:t,value:a,value:{query:s,datasource:l},queryHandlerSettings:u}=e,i=l??n.Mm,c=(0,p.useId)("prom-datasource-label"),d=(0,r.useDatasourceSelectValueToSelector)(i,n.nY),{data:y}=(0,r.useDatasourceClient)(d),w=null==y?void 0:y.options.datasourceUrl,{data:x}=(0,r.useDatasource)(d),{handleQueryChange:q,handleQueryBlur:C}=function(e){let{onChange:t,value:a}=e,[r,s]=(0,b.useState)(a.query),[l,n]=(0,b.useState)(a.query);return a.query!==l&&(s(a.query),n(a.query)),{query:r,handleQueryChange:e=>{s(e)},handleQueryBlur:()=>{n(r),t((0,h.Uy)(a,e=>{e.query=r}))}}}(e),{format:O,handleFormatChange:D,handleFormatBlur:F}=function(e){let{onChange:t,value:a}=e,[r,s]=(0,b.useState)(a.seriesNameFormat),[l,n]=(0,b.useState)(a.seriesNameFormat);return a.seriesNameFormat!==l&&(s(a.seriesNameFormat),n(a.seriesNameFormat)),{format:r,handleFormatChange:e=>{s(e)},handleFormatBlur:()=>{n(r),t((0,h.Uy)(a,e=>{e.seriesNameFormat=r}))}}}(e),{minStep:M,handleMinStepChange:T,handleMinStepBlur:W}=function(e){let{onChange:t,value:a}=e,[r,s]=(0,b.useState)(a.minStep),[l,n]=(0,b.useState)(a.minStep);return a.minStep!==l&&(s(a.minStep),n(a.minStep)),{minStep:r,handleMinStepChange:e=>{s(e)},handleMinStepBlur:()=>{n(r),t((0,h.Uy)(a,e=>{e.minStep=r}))}}}(e),j=M??(x&&(null==x?void 0:x.plugin.spec).scrapeInterval)??o.v,B=(0,b.useCallback)(e=>{q(e),(null==u?void 0:u.watchQueryChanges)&&(null==u||u.watchQueryChanges(e))},[u,q]),k=(0,b.useCallback)(e=>{D(e.target.value),(null==u?void 0:u.setWatchOtherSpecs)&&u.setWatchOtherSpecs({...a,seriesNameFormat:e.target.value})},[u,D,a]),N=(0,b.useCallback)(e=>{T(e.target.value?e.target.value:void 0),(null==u?void 0:u.setWatchOtherSpecs)&&u.setWatchOtherSpecs({...a,minStep:e.target.value})},[u,T,a]);return(0,m.jsxs)(v.Z,{spacing:2,children:[(0,m.jsx)(g.Z,{margin:"dense",fullWidth:!1,children:(0,m.jsx)(r.DatasourceSelect,{datasourcePluginKind:n.nY,value:i,onChange:e=>{if((0,n.sv)(e)){t((0,h.Uy)(a,t=>{t.datasource=(0,n.Rv)(e)?void 0:e})),(null==u?void 0:u.setWatchOtherSpecs)&&u.setWatchOtherSpecs({...a,datasource:e});return}throw Error("Got unexpected non-Prometheus datasource selector")},labelId:c,label:"Prometheus Datasource",notched:!0})}),(0,m.jsx)(f.P,{completeConfig:{remote:{url:w}},value:s,datasource:d,onChange:B,onBlur:(null==u?void 0:u.runWithOnBlur)?C:void 0}),(0,m.jsxs)(v.Z,{direction:"row",spacing:2,children:[(0,m.jsx)(S.Z,{fullWidth:!0,label:"Legend",placeholder:"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...",helperText:"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",value:O??"",onChange:k,onBlur:(null==u?void 0:u.runWithOnBlur)?F:void 0}),(0,m.jsx)(S.Z,{label:"Min Step",placeholder:j,helperText:"Lower bound for the step. If not provided, the scrape interval of the datasource is used.",value:M??"",onChange:N,onBlur:(null==u?void 0:u.runWithOnBlur)?W:void 0,sx:{width:"250px"}})]})]})},createInitialOptions:()=>({query:"",datasource:void 0}),dependsOn:e=>{let t=(0,r.parseVariables)(e.query);return{variables:[...new Set([...t,...(0,r.parseVariables)(e.seriesNameFormat||""),...(0,r.isVariableDatasource)(e.datasource)?(0,r.parseVariables)(e.datasource??""):[]])]}}}},16146:function(e,t,a){a.d(t,{v:()=>r});let r="1m"}}]);