@perses-dev/prometheus-plugin 0.30.0 → 0.31.0

package/dist/cjs/model/prometheus-selectors.js

@@ -21,6 +21,7 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    PROM_DATASOURCE_KIND: ()=>PROM_DATASOURCE_KIND,
     DEFAULT_PROM: ()=>DEFAULT_PROM,
     isDefaultPromSelector: ()=>isDefaultPromSelector,
     isPrometheusDatasourceSelector: ()=>isPrometheusDatasourceSelector

package/dist/cjs/plugins/MatcherEditor.js

@@ -30,6 +30,7 @@ function _interopRequireDefault(obj) {
 function MatcherEditor({ matchers , onChange  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
+        mb: 2,
         children: [
             matchers.map((matcher, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     display: "flex",

package/dist/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -47,6 +47,23 @@ function PrometheusTimeSeriesQueryEditor(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                        datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
                 completeConfig: {
                     remote: {
@@ -65,23 +82,6 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 value: format !== null && format !== void 0 ? format : '',
                 onChange: (e)=>handleFormatChange(e.target.value),
                 onBlur: handleFormatBlur
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                margin: "dense",
-                fullWidth: false,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                        id: "prom-datasource-label",
-                        children: "Prometheus Datasource"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
-                        datasourcePluginKind: "PrometheusDatasource",
-                        value: selectedDatasource,
-                        onChange: handleDatasourceChange,
-                        labelId: "prom-datasource-label",
-                        label: "Prometheus Datasource"
-                    })
-                ]
             })
         ]
     });

package/dist/cjs/plugins/prometheus-variables.js

@@ -26,19 +26,48 @@ _export(exports, {
     PrometheusPromQLVariable: ()=>PrometheusPromQLVariable
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
+const _immer = require("immer");
 const _model = require("../model");
 const _utils = require("../utils");
+const _components = require("../components");
 const _matcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const handleDatasourceChange = (next)=>{
+        if ((0, _model.isPrometheusDatasourceSelector)(next)) {
+            onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     var _matchers;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        spacing: 1,
+        spacing: 2,
         children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                        datasourcePluginKind: "PrometheusDatasource",
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                sx: {
-                    mb: 1
-                },
                 label: "Label Name",
                 required: true,
                 value: props.value.label_name,
@@ -62,42 +91,102 @@ function PrometheusLabelValuesVariableEditor(props) {
     });
 }
 function PrometheusLabelNamesVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const handleDatasourceChange = (next)=>{
+        if ((0, _model.isPrometheusDatasourceSelector)(next)) {
+            onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     var _matchers;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-        spacing: 1,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
-            matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
-            onChange: (e)=>{
-                props.onChange({
-                    ...props.value,
-                    matchers: e
-                });
-            }
-        })
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                        datasourcePluginKind: "PrometheusDatasource",
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
+                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+                onChange: (e)=>{
+                    props.onChange({
+                        ...props.value,
+                        matchers: e
+                    });
+                }
+            })
+        ]
     });
 }
 function PrometheusPromQLVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const { data: client  } = (0, _pluginSystem.useDatasourceClient)(selectedDatasource);
+    const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const handleDatasourceChange = (next)=>{
+        if ((0, _model.isPrometheusDatasourceSelector)(next)) {
+            onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        spacing: 1,
+        spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                required: true,
-                sx: {
-                    mb: 1
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                        datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
                 },
-                label: "PromQL Expression",
-                value: props.value.expr,
-                onChange: (e)=>{
+                value: value.expr,
+                onChange: (query)=>{
                     props.onChange({
                         ...props.value,
-                        expr: e.target.value
+                        expr: query
                     });
-                }
+                },
+                width: "100%"
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                sx: {
-                    mb: 1
-                },
                 label: "Label Name",
                 value: props.value.label_name,
                 onChange: (e)=>{

package/dist/cjs/plugins/variable.js

@@ -38,41 +38,30 @@ function StaticListVariableOptionEditor(props) {
             })
         });
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
-                onPaste: (e)=>{
-                    // Append new values on paste
-                    const v = e.clipboardData.getData('text/plain');
-                    if (v) {
-                        const values = v.split(',');
-                        onChange(null, value.concat(values));
-                        e.preventDefault();
-                    }
-                },
-                multiple: true,
-                value: value,
-                onChange: onChange,
-                options: [],
-                freeSolo: true,
-                clearOnBlur: true,
-                renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                        ...params,
-                        label: "Values",
-                        placeholder: "Values"
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                variant: "caption",
-                children: [
-                    "Type new value then press ",
-                    `"`,
-                    "Enter",
-                    `"`,
-                    " to add."
-                ]
-            })
-        ]
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+            onPaste: (e)=>{
+                // Append new values on paste
+                const v = e.clipboardData.getData('text/plain');
+                if (v) {
+                    const values = v.split(',');
+                    onChange(null, value.concat(values));
+                    e.preventDefault();
+                }
+            },
+            multiple: true,
+            value: value,
+            onChange: onChange,
+            options: [],
+            freeSolo: true,
+            clearOnBlur: true,
+            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: "Values",
+                    placeholder: "Values",
+                    helperText: 'Type new value then press "Enter" to add.'
+                })
+        })
     });
 }
 const StaticListVariable = {

package/dist/model/prometheus-selectors.d.ts

@@ -1,5 +1,5 @@
 import { DatasourceSelector } from '@perses-dev/core';
-declare const PROM_DATASOURCE_KIND: "PrometheusDatasource";
+export declare const PROM_DATASOURCE_KIND: "PrometheusDatasource";
 /**
  * DatasourceSelector for Prom Datasources.
  */
@@ -18,5 +18,4 @@ export declare function isDefaultPromSelector(selector: PrometheusDatasourceSele
  * Type guard to make sure a DatasourceSelector is a Prometheus one.
  */
 export declare function isPrometheusDatasourceSelector(selector: DatasourceSelector): selector is PrometheusDatasourceSelector;
-export {};
 //# sourceMappingURL=prometheus-selectors.d.ts.map

package/dist/model/prometheus-selectors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prometheus-selectors.d.ts","sourceRoot":"","sources":["../../src/model/prometheus-selectors.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,QAAA,MAAM,oBAAoB,wBAAkC,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,4BAA6D,CAAC;AAEzF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,WAE3E;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,kBAAkB,GAAG,QAAQ,IAAI,4BAA4B,CAErH"}
+{"version":3,"file":"prometheus-selectors.d.ts","sourceRoot":"","sources":["../../src/model/prometheus-selectors.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,oBAAoB,wBAAkC,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,4BAA6D,CAAC;AAEzF;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,WAE3E;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,kBAAkB,GAAG,QAAQ,IAAI,4BAA4B,CAErH"}

package/dist/model/prometheus-selectors.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const PROM_DATASOURCE_KIND = 'PrometheusDatasource';
+export const PROM_DATASOURCE_KIND = 'PrometheusDatasource';
 /**
  * A default selector that asks for the default Prom Datasource.
  */ export const DEFAULT_PROM = {

package/dist/model/prometheus-selectors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/prometheus-selectors.ts"],"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 { DatasourceSelector } from '@perses-dev/core';\n\nconst PROM_DATASOURCE_KIND = 'PrometheusDatasource' as const;\n\n/**\n * DatasourceSelector for Prom Datasources.\n */\nexport interface PrometheusDatasourceSelector extends DatasourceSelector {\n  kind: typeof PROM_DATASOURCE_KIND;\n}\n\n/**\n * A default selector that asks for the default Prom Datasource.\n */\nexport const DEFAULT_PROM: PrometheusDatasourceSelector = { kind: PROM_DATASOURCE_KIND };\n\n/**\n * Returns true if the provided PrometheusDatasourceSelector is the default one.\n */\nexport function isDefaultPromSelector(selector: PrometheusDatasourceSelector) {\n  return selector.name === undefined;\n}\n\n/**\n * Type guard to make sure a DatasourceSelector is a Prometheus one.\n */\nexport function isPrometheusDatasourceSelector(selector: DatasourceSelector): selector is PrometheusDatasourceSelector {\n  return selector.kind === PROM_DATASOURCE_KIND;\n}\n"],"names":["PROM_DATASOURCE_KIND","DEFAULT_PROM","kind","isDefaultPromSelector","selector","name","undefined","isPrometheusDatasourceSelector"],"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;AAIjC,MAAMA,oBAAoB,GAAG,sBAAsB,AAAS,AAAC;AAS7D;;CAEC,GACD,OAAO,MAAMC,YAAY,GAAiC;IAAEC,IAAI,EAAEF,oBAAoB;CAAE,CAAC;AAEzF;;CAEC,GACD,OAAO,SAASG,qBAAqB,CAACC,QAAsC,EAAE;IAC5E,OAAOA,QAAQ,CAACC,IAAI,KAAKC,SAAS,CAAC;AACrC,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,8BAA8B,CAACH,QAA4B,EAA4C;IACrH,OAAOA,QAAQ,CAACF,IAAI,KAAKF,oBAAoB,CAAC;AAChD,CAAC"}
+{"version":3,"sources":["../../src/model/prometheus-selectors.ts"],"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 { DatasourceSelector } from '@perses-dev/core';\n\nexport const PROM_DATASOURCE_KIND = 'PrometheusDatasource' as const;\n\n/**\n * DatasourceSelector for Prom Datasources.\n */\nexport interface PrometheusDatasourceSelector extends DatasourceSelector {\n  kind: typeof PROM_DATASOURCE_KIND;\n}\n\n/**\n * A default selector that asks for the default Prom Datasource.\n */\nexport const DEFAULT_PROM: PrometheusDatasourceSelector = { kind: PROM_DATASOURCE_KIND };\n\n/**\n * Returns true if the provided PrometheusDatasourceSelector is the default one.\n */\nexport function isDefaultPromSelector(selector: PrometheusDatasourceSelector) {\n  return selector.name === undefined;\n}\n\n/**\n * Type guard to make sure a DatasourceSelector is a Prometheus one.\n */\nexport function isPrometheusDatasourceSelector(selector: DatasourceSelector): selector is PrometheusDatasourceSelector {\n  return selector.kind === PROM_DATASOURCE_KIND;\n}\n"],"names":["PROM_DATASOURCE_KIND","DEFAULT_PROM","kind","isDefaultPromSelector","selector","name","undefined","isPrometheusDatasourceSelector"],"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;AAIjC,OAAO,MAAMA,oBAAoB,GAAG,sBAAsB,AAAS,CAAC;AASpE;;CAEC,GACD,OAAO,MAAMC,YAAY,GAAiC;IAAEC,IAAI,EAAEF,oBAAoB;CAAE,CAAC;AAEzF;;CAEC,GACD,OAAO,SAASG,qBAAqB,CAACC,QAAsC,EAAE;IAC5E,OAAOA,QAAQ,CAACC,IAAI,KAAKC,SAAS,CAAC;AACrC,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,8BAA8B,CAACH,QAA4B,EAA4C;IACrH,OAAOA,QAAQ,CAACF,IAAI,KAAKF,oBAAoB,CAAC;AAChD,CAAC"}

package/dist/plugins/MatcherEditor.js

@@ -17,6 +17,7 @@ import TrashIcon from 'mdi-material-ui/TrashCan';
 export function MatcherEditor({ matchers , onChange  }) {
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
+        mb: 2,
         children: [
             matchers.map((matcher, index)=>/*#__PURE__*/ _jsxs(Box, {
                     display: "flex",

package/dist/plugins/MatcherEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/MatcherEditor.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 { Stack, TextField, Button, Box, IconButton } from '@mui/material';\nimport { produce } from 'immer';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\n\ntype MatcherEditorProps = {\n  matchers: string[];\n  onChange: (matchers: string[]) => void;\n};\n\nexport function MatcherEditor({ matchers, onChange }: MatcherEditorProps) {\n  return (\n    <Stack spacing={1}>\n      {matchers.map((matcher, index) => (\n        <Box key={index} display=\"flex\">\n          <TextField\n            fullWidth\n            label=\"Series Selector\"\n            value={matcher}\n            onChange={(e) => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft[index] = e.target.value;\n              });\n              onChange(newMatchers);\n            }}\n          />\n          <IconButton\n            onClick={() => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft.splice(index, 1);\n              });\n              onChange(newMatchers);\n            }}\n          >\n            <TrashIcon />\n          </IconButton>\n        </Box>\n      ))}\n      <Box>\n        <Button\n          fullWidth={false}\n          color=\"secondary\"\n          variant=\"outlined\"\n          onClick={() => {\n            const newMatchers = produce(matchers, (draft) => {\n              draft.push('');\n            });\n            onChange(newMatchers);\n          }}\n        >\n          Add Series Selector\n        </Button>\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","Button","Box","IconButton","produce","TrashIcon","MatcherEditor","matchers","onChange","spacing","map","matcher","index","display","fullWidth","label","value","e","newMatchers","draft","target","onClick","splice","color","variant","push"],"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;AAAA,SAASA,KAAK,EAAEC,SAAS,EAAEC,MAAM,EAAEC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC1E,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AAOjD,OAAO,SAASC,aAAa,CAAC,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAsB,EAAE;IACxE,qBACE,MAACT,KAAK;QAACU,OAAO,EAAE,CAAC;;YACdF,QAAQ,CAACG,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,iBAC3B,MAACV,GAAG;oBAAaW,OAAO,EAAC,MAAM;;sCAC7B,KAACb,SAAS;4BACRc,SAAS;4BACTC,KAAK,EAAC,iBAAiB;4BACvBC,KAAK,EAAEL,OAAO;4BACdH,QAAQ,EAAE,CAACS,CAAC,GAAK;gCACf,MAAMC,WAAW,GAAGd,OAAO,CAACG,QAAQ,EAAE,CAACY,KAAK,GAAK;oCAC/CA,KAAK,CAACP,KAAK,CAAC,GAAGK,CAAC,CAACG,MAAM,CAACJ,KAAK,CAAC;gCAChC,CAAC,CAAC,AAAC;gCACHR,QAAQ,CAACU,WAAW,CAAC,CAAC;4BACxB,CAAC;0BACD;sCACF,KAACf,UAAU;4BACTkB,OAAO,EAAE,IAAM;gCACb,MAAMH,WAAW,GAAGd,OAAO,CAACG,QAAQ,EAAE,CAACY,KAAK,GAAK;oCAC/CA,KAAK,CAACG,MAAM,CAACV,KAAK,EAAE,CAAC,CAAC,CAAC;gCACzB,CAAC,CAAC,AAAC;gCACHJ,QAAQ,CAACU,WAAW,CAAC,CAAC;4BACxB,CAAC;sCAED,cAAA,KAACb,SAAS,KAAG;0BACF;;mBArBLO,KAAK,CAsBT,AACP,CAAC;0BACF,KAACV,GAAG;0BACF,cAAA,KAACD,MAAM;oBACLa,SAAS,EAAE,KAAK;oBAChBS,KAAK,EAAC,WAAW;oBACjBC,OAAO,EAAC,UAAU;oBAClBH,OAAO,EAAE,IAAM;wBACb,MAAMH,WAAW,GAAGd,OAAO,CAACG,QAAQ,EAAE,CAACY,KAAK,GAAK;4BAC/CA,KAAK,CAACM,IAAI,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC,CAAC,AAAC;wBACHjB,QAAQ,CAACU,WAAW,CAAC,CAAC;oBACxB,CAAC;8BACF,qBAED;kBAAS;cACL;;MACA,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/plugins/MatcherEditor.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 { Stack, TextField, Button, Box, IconButton } from '@mui/material';\nimport { produce } from 'immer';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\n\ntype MatcherEditorProps = {\n  matchers: string[];\n  onChange: (matchers: string[]) => void;\n};\n\nexport function MatcherEditor({ matchers, onChange }: MatcherEditorProps) {\n  return (\n    <Stack spacing={1} mb={2}>\n      {matchers.map((matcher, index) => (\n        <Box key={index} display=\"flex\">\n          <TextField\n            fullWidth\n            label=\"Series Selector\"\n            value={matcher}\n            onChange={(e) => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft[index] = e.target.value;\n              });\n              onChange(newMatchers);\n            }}\n          />\n          <IconButton\n            onClick={() => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft.splice(index, 1);\n              });\n              onChange(newMatchers);\n            }}\n          >\n            <TrashIcon />\n          </IconButton>\n        </Box>\n      ))}\n      <Box>\n        <Button\n          fullWidth={false}\n          color=\"secondary\"\n          variant=\"outlined\"\n          onClick={() => {\n            const newMatchers = produce(matchers, (draft) => {\n              draft.push('');\n            });\n            onChange(newMatchers);\n          }}\n        >\n          Add Series Selector\n        </Button>\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","Button","Box","IconButton","produce","TrashIcon","MatcherEditor","matchers","onChange","spacing","mb","map","matcher","index","display","fullWidth","label","value","e","newMatchers","draft","target","onClick","splice","color","variant","push"],"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;AAAA,SAASA,KAAK,EAAEC,SAAS,EAAEC,MAAM,EAAEC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC1E,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AAOjD,OAAO,SAASC,aAAa,CAAC,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAsB,EAAE;IACxE,qBACE,MAACT,KAAK;QAACU,OAAO,EAAE,CAAC;QAAEC,EAAE,EAAE,CAAC;;YACrBH,QAAQ,CAACI,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,iBAC3B,MAACX,GAAG;oBAAaY,OAAO,EAAC,MAAM;;sCAC7B,KAACd,SAAS;4BACRe,SAAS;4BACTC,KAAK,EAAC,iBAAiB;4BACvBC,KAAK,EAAEL,OAAO;4BACdJ,QAAQ,EAAE,CAACU,CAAC,GAAK;gCACf,MAAMC,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;oCAC/CA,KAAK,CAACP,KAAK,CAAC,GAAGK,CAAC,CAACG,MAAM,CAACJ,KAAK,CAAC;gCAChC,CAAC,CAAC,AAAC;gCACHT,QAAQ,CAACW,WAAW,CAAC,CAAC;4BACxB,CAAC;0BACD;sCACF,KAAChB,UAAU;4BACTmB,OAAO,EAAE,IAAM;gCACb,MAAMH,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;oCAC/CA,KAAK,CAACG,MAAM,CAACV,KAAK,EAAE,CAAC,CAAC,CAAC;gCACzB,CAAC,CAAC,AAAC;gCACHL,QAAQ,CAACW,WAAW,CAAC,CAAC;4BACxB,CAAC;sCAED,cAAA,KAACd,SAAS,KAAG;0BACF;;mBArBLQ,KAAK,CAsBT,AACP,CAAC;0BACF,KAACX,GAAG;0BACF,cAAA,KAACD,MAAM;oBACLc,SAAS,EAAE,KAAK;oBAChBS,KAAK,EAAC,WAAW;oBACjBC,OAAO,EAAC,UAAU;oBAClBH,OAAO,EAAE,IAAM;wBACb,MAAMH,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;4BAC/CA,KAAK,CAACM,IAAI,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC,CAAC,AAAC;wBACHlB,QAAQ,CAACW,WAAW,CAAC,CAAC;oBACxB,CAAC;8BACF,qBAED;kBAAS;cACL;;MACA,CACR;AACJ,CAAC"}

package/dist/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,oCAAoC,EAAiC,MAAM,sBAAsB,CAAC;AAE3G;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,eAyD1F"}
+{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,oCAAoC,EAAiC,MAAM,sBAAsB,CAAC;AAE3G;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,eAyD1F"}

package/dist/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { produce } from 'immer';
 import { Stack, TextField, FormControl, InputLabel } from '@mui/material';
 import { DatasourceSelect, useDatasourceClient } from '@perses-dev/plugin-system';
-import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector } from '../../model';
+import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PROM_DATASOURCE_KIND } from '../../model';
 import { PromQLEditor } from '../../components';
 import { useQueryState, useFormatState } from './query-editor-model';
 /**
@@ -41,6 +41,23 @@ import { useQueryState, useFormatState } from './query-editor-model';
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
             /*#__PURE__*/ _jsx(PromQLEditor, {
                 completeConfig: {
                     remote: {
@@ -59,23 +76,6 @@ import { useQueryState, useFormatState } from './query-editor-model';
                 value: format !== null && format !== void 0 ? format : '',
                 onChange: (e)=>handleFormatChange(e.target.value),
                 onBlur: handleFormatBlur
-            }),
-            /*#__PURE__*/ _jsxs(FormControl, {
-                margin: "dense",
-                fullWidth: false,
-                children: [
-                    /*#__PURE__*/ _jsx(InputLabel, {
-                        id: "prom-datasource-label",
-                        children: "Prometheus Datasource"
-                    }),
-                    /*#__PURE__*/ _jsx(DatasourceSelect, {
-                        datasourcePluginKind: "PrometheusDatasource",
-                        value: selectedDatasource,
-                        onChange: handleDatasourceChange,
-                        labelId: "prom-datasource-label",
-                        label: "Prometheus Datasource"
-                    })
-                ]
             })
         ]
     });

package/dist/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js.map

@@ -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 { Stack, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect, DatasourceSelectProps, useDatasourceClient } from '@perses-dev/plugin-system';\nimport { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PrometheusClient } from '../../model';\nimport { PromQLEditor } from '../../components';\nimport { PrometheusTimeSeriesQueryEditorProps, useQueryState, useFormatState } from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\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      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n      />\n      <TextField\n        fullWidth\n        label=\"Legend Name\"\n        placeholder=\"Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.\"\n        helperText=\"Set the name for each series in the legend and the tooltip.\"\n        value={format ?? ''}\n        onChange={(e) => handleFormatChange(e.target.value)}\n        onBlur={handleFormatBlur}\n      />\n      <FormControl margin=\"dense\" fullWidth={false}>\n        {/* TODO: How do we ensure unique ID values if there are multiple of these? Can we use React 18 useId and\n            maintain 17 compatibility somehow with a polyfill/shim? */}\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind=\"PrometheusDatasource\"\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["produce","Stack","TextField","FormControl","InputLabel","DatasourceSelect","useDatasourceClient","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PromQLEditor","useQueryState","useFormatState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","selectedDatasource","data","client","promURL","options","datasourceUrl","query","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","completeConfig","remote","url","onBlur","fullWidth","label","placeholder","helperText","e","target","margin","id","datasourcePluginKind","labelId"],"mappings":"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"}
+{"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 { Stack, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect, DatasourceSelectProps, useDatasourceClient } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_PROM,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n} from '../../model';\nimport { PromQLEditor } from '../../components';\nimport { PrometheusTimeSeriesQueryEditorProps, useQueryState, useFormatState } from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\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      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        {/* TODO: How do we ensure unique ID values if there are multiple of these? Can we use React 18 useId and\n            maintain 17 compatibility somehow with a polyfill/shim? */}\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n      />\n      <TextField\n        fullWidth\n        label=\"Legend Name\"\n        placeholder=\"Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.\"\n        helperText=\"Set the name for each series in the legend and the tooltip.\"\n        value={format ?? ''}\n        onChange={(e) => handleFormatChange(e.target.value)}\n        onBlur={handleFormatBlur}\n      />\n    </Stack>\n  );\n}\n"],"names":["produce","Stack","TextField","FormControl","InputLabel","DatasourceSelect","useDatasourceClient","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","PromQLEditor","useQueryState","useFormatState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","selectedDatasource","data","client","promURL","options","datasourceUrl","query","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","id","datasourcePluginKind","labelId","label","completeConfig","remote","url","onBlur","placeholder","helperText","e","target"],"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;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC1E,SAASC,gBAAgB,EAAyBC,mBAAmB,QAAQ,2BAA2B,CAAC;AACzG,SACEC,YAAY,EACZC,qBAAqB,EACrBC,8BAA8B,EAC9BC,oBAAoB,QAEf,aAAa,CAAC;AACrB,SAASC,YAAY,QAAQ,kBAAkB,CAAC;AAChD,SAA+CC,aAAa,EAAEC,cAAc,QAAQ,sBAAsB,CAAC;AAE3G;;CAEC,GACD,OAAO,SAASC,+BAA+B,CAACC,KAA2C,EAAE;IAC3F,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAClC,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGD,KAAK,AAAC;IAC7B,MAAME,kBAAkB,GAAGD,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIX,YAAY,AAAC;IAEtD,MAAM,EAAEa,IAAI,EAAEC,MAAM,CAAA,EAAE,GAAGf,mBAAmB,CAAmBa,kBAAkB,CAAC,AAAC;IACnF,MAAMG,OAAO,GAAGD,MAAM,aAANA,MAAM,WAAS,GAAfA,KAAAA,CAAe,GAAfA,MAAM,CAAEE,OAAO,CAACC,aAAa,AAAC;IAE9C,MAAM,EAAEC,KAAK,CAAA,EAAEC,iBAAiB,CAAA,EAAEC,eAAe,CAAA,EAAE,GAAGf,aAAa,CAACG,KAAK,CAAC,AAAC;IAC3E,MAAM,EAAEa,MAAM,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGjB,cAAc,CAACE,KAAK,CAAC,AAAC;IAE/E,MAAMgB,sBAAsB,GAAsC,CAACC,IAAI,GAAK;QAC1E,IAAIvB,8BAA8B,CAACuB,IAAI,CAAC,EAAE;YACxChB,QAAQ,CACNhB,OAAO,CAACiB,KAAK,EAAE,CAACgB,KAAK,GAAK;gBACxB,sFAAsF;gBACtF,MAAMC,cAAc,GAAG1B,qBAAqB,CAACwB,IAAI,CAAC,GAAGG,SAAS,GAAGH,IAAI,AAAC;gBACtEC,KAAK,CAACf,UAAU,GAAGgB,cAAc,CAAC;YACpC,CAAC,CAAC,CACH,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,IAAIE,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC,AAAC;IAEF,qBACE,MAACnC,KAAK;QAACoC,OAAO,EAAE,CAAC;;0BACf,MAAClC,WAAW;gBAACmC,MAAM,EAAC,OAAO;gBAACC,SAAS,EAAE,KAAK;;kCAG1C,KAACnC,UAAU;wBAACoC,EAAE,EAAC,uBAAuB;kCAAC,uBAAqB;sBAAa;kCACzE,KAACnC,gBAAgB;wBACfoC,oBAAoB,EAAE/B,oBAAoB;wBAC1CO,KAAK,EAAEE,kBAAkB;wBACzBH,QAAQ,EAAEe,sBAAsB;wBAChCW,OAAO,EAAC,uBAAuB;wBAC/BC,KAAK,EAAC,uBAAuB;sBAC7B;;cACU;0BACd,KAAChC,YAAY;gBACXiC,cAAc,EAAE;oBAAEC,MAAM,EAAE;wBAAEC,GAAG,EAAExB,OAAO;qBAAE;iBAAE;gBAC5CL,KAAK,EAAEQ,KAAK;gBACZT,QAAQ,EAAEU,iBAAiB;gBAC3BqB,MAAM,EAAEpB,eAAe;cACvB;0BACF,KAACzB,SAAS;gBACRqC,SAAS;gBACTI,KAAK,EAAC,aAAa;gBACnBK,WAAW,EAAC,0HAA0H;gBACtIC,UAAU,EAAC,6DAA6D;gBACxEhC,KAAK,EAAEW,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,EAAE;gBACnBZ,QAAQ,EAAE,CAACkC,CAAC,GAAKrB,kBAAkB,CAACqB,CAAC,CAACC,MAAM,CAAClC,KAAK,CAAC;gBACnD8B,MAAM,EAAEjB,gBAAgB;cACxB;;MACI,CACR;AACJ,CAAC"}

package/dist/plugins/prometheus-variables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prometheus-variables.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-variables.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAsC,MAAM,2BAA2B,CAAC;AAI/F,OAAO,EACL,mCAAmC,EACnC,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,SAAS,CAAC;AA+FjB,eAAO,MAAM,4BAA4B,EAAE,cAAc,CAAC,mCAAmC,CAgB5F,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,cAAc,CAAC,oCAAoC,CA8B9F,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CAAC,+BAA+B,CAwBpF,CAAC"}
+{"version":3,"file":"prometheus-variables.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-variables.tsx"],"names":[],"mappings":"AAYA,OAAO,EAML,cAAc,EACf,MAAM,2BAA2B,CAAC;AAenC,OAAO,EACL,mCAAmC,EACnC,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,SAAS,CAAC;AAmLjB,eAAO,MAAM,4BAA4B,EAAE,cAAc,CAAC,mCAAmC,CAgB5F,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,cAAc,CAAC,oCAAoC,CA8B9F,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CAAC,+BAA+B,CAwBpF,CAAC"}

package/dist/plugins/prometheus-variables.js

@@ -11,19 +11,48 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, TextField } from '@mui/material';
-import { DEFAULT_PROM, getPrometheusTimeRange } from '../model';
-import { replaceTemplateVariables, parseTemplateVariables } from '../utils';
+import { DatasourceSelect, useDatasourceClient } from '@perses-dev/plugin-system';
+import { FormControl, InputLabel, Stack, TextField } from '@mui/material';
+import { produce } from 'immer';
+import { DEFAULT_PROM, getPrometheusTimeRange, isDefaultPromSelector, isPrometheusDatasourceSelector, PROM_DATASOURCE_KIND } from '../model';
+import { parseTemplateVariables, replaceTemplateVariables } from '../utils';
+import { PromQLEditor } from '../components';
 import { MatcherEditor } from './MatcherEditor';
 function PrometheusLabelValuesVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM;
+    const handleDatasourceChange = (next)=>{
+        if (isPrometheusDatasourceSelector(next)) {
+            onChange(produce(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = isDefaultPromSelector(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     var _matchers;
     return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 1,
+        spacing: 2,
         children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: "PrometheusDatasource",
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
             /*#__PURE__*/ _jsx(TextField, {
-                sx: {
-                    mb: 1
-                },
                 label: "Label Name",
                 required: true,
                 value: props.value.label_name,
@@ -47,42 +76,102 @@ function PrometheusLabelValuesVariableEditor(props) {
     });
 }
 function PrometheusLabelNamesVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM;
+    const handleDatasourceChange = (next)=>{
+        if (isPrometheusDatasourceSelector(next)) {
+            onChange(produce(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = isDefaultPromSelector(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     var _matchers;
-    return /*#__PURE__*/ _jsx(Stack, {
-        spacing: 1,
-        children: /*#__PURE__*/ _jsx(MatcherEditor, {
-            matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
-            onChange: (e)=>{
-                props.onChange({
-                    ...props.value,
-                    matchers: e
-                });
-            }
-        })
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: "PrometheusDatasource",
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(MatcherEditor, {
+                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+                onChange: (e)=>{
+                    props.onChange({
+                        ...props.value,
+                        matchers: e
+                    });
+                }
+            })
+        ]
     });
 }
 function PrometheusPromQLVariableEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM;
+    const { data: client  } = useDatasourceClient(selectedDatasource);
+    const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const handleDatasourceChange = (next)=>{
+        if (isPrometheusDatasourceSelector(next)) {
+            onChange(produce(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                draft.datasource = isDefaultPromSelector(next) ? undefined : next;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
     return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 1,
+        spacing: 2,
         children: [
-            /*#__PURE__*/ _jsx(TextField, {
-                required: true,
-                sx: {
-                    mb: 1
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
                 },
-                label: "PromQL Expression",
-                value: props.value.expr,
-                onChange: (e)=>{
+                value: value.expr,
+                onChange: (query)=>{
                     props.onChange({
                         ...props.value,
-                        expr: e.target.value
+                        expr: query
                     });
-                }
+                },
+                width: "100%"
             }),
             /*#__PURE__*/ _jsx(TextField, {
-                sx: {
-                    mb: 1
-                },
                 label: "Label Name",
                 value: props.value.label_name,
                 onChange: (e)=>{

package/dist/plugins/prometheus-variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/prometheus-variables.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.\nimport { VariablePlugin, VariableOption, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Stack, TextField } from '@mui/material';\nimport { PrometheusClient, DEFAULT_PROM, getPrometheusTimeRange, MatrixData, VectorData } from '../model';\nimport { replaceTemplateVariables, parseTemplateVariables } from '../utils';\nimport {\n  PrometheusLabelNamesVariableOptions,\n  PrometheusLabelValuesVariableOptions,\n  PrometheusPromQLVariableOptions,\n} from './types';\nimport { MatcherEditor } from './MatcherEditor';\n\nfunction PrometheusLabelValuesVariableEditor(props: OptionsEditorProps<PrometheusLabelValuesVariableOptions>) {\n  return (\n    <Stack spacing={1}>\n      <TextField\n        sx={{ mb: 1 }}\n        label=\"Label Name\"\n        required\n        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n      <MatcherEditor\n        matchers={props.value.matchers ?? []}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction PrometheusLabelNamesVariableEditor(props: OptionsEditorProps<PrometheusLabelNamesVariableOptions>) {\n  return (\n    <Stack spacing={1}>\n      <MatcherEditor\n        matchers={props.value.matchers ?? []}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction PrometheusPromQLVariableEditor(props: OptionsEditorProps<PrometheusPromQLVariableOptions>) {\n  return (\n    <Stack spacing={1}>\n      <TextField\n        required\n        sx={{ mb: 1 }}\n        label=\"PromQL Expression\"\n        value={props.value.expr}\n        onChange={(e) => {\n          props.onChange({ ...props.value, expr: e.target.value });\n        }}\n      />\n      <TextField\n        sx={{ mb: 1 }}\n        label=\"Label Name\"\n        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction capturingMatrix(matrix: MatrixData, label_name: string): string[] {\n  const captured = new Set<string>();\n  for (const sample of matrix.result) {\n    const value = sample.metric[label_name];\n    if (value !== undefined) {\n      captured.add(value);\n    }\n  }\n  return Array.from(captured.values());\n}\n\nfunction capturingVector(vector: VectorData, label_name: string): string[] {\n  const captured = new Set<string>();\n  for (const sample of vector.result) {\n    const value = sample.metric[label_name];\n    if (value !== undefined) {\n      captured.add(value);\n    }\n  }\n  return Array.from(captured.values());\n}\n\n/**\n * Takes a list of strings and returns a list of VariableOptions\n */\nconst stringArrayToVariableOptions = (values?: string[]): VariableOption[] => {\n  if (!values) return [];\n  return values.map((value) => ({\n    value,\n    label: value,\n  }));\n};\n\nexport const PrometheusLabelNamesVariable: VariablePlugin<PrometheusLabelNamesVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    const match = spec.matchers ? spec.matchers.map((m) => replaceTemplateVariables(m, ctx.variables)) : undefined;\n    const timeRange = getPrometheusTimeRange(ctx.timeRange);\n\n    const { data: options } = await client.labelNames({ 'match[]': match, ...timeRange });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return { variables: spec.matchers?.map((m) => parseTemplateVariables(m)).flat() || [] };\n  },\n  OptionsEditorComponent: PrometheusLabelNamesVariableEditor,\n  createInitialOptions: () => ({}),\n};\n\nexport const PrometheusLabelValuesVariable: VariablePlugin<PrometheusLabelValuesVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const pluginDef = spec;\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    const match = pluginDef.matchers\n      ? pluginDef.matchers.map((m) => replaceTemplateVariables(m, ctx.variables))\n      : undefined;\n\n    const timeRange = getPrometheusTimeRange(ctx.timeRange);\n\n    const { data: options } = await client.labelValues({\n      labelName: replaceTemplateVariables(pluginDef.label_name, ctx.variables),\n      'match[]': match,\n      ...timeRange,\n    });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return {\n      variables:\n        spec.matchers\n          ?.map((m) => parseTemplateVariables(m))\n          .flat()\n          .concat(parseTemplateVariables(spec.label_name)) || [],\n    };\n  },\n  OptionsEditorComponent: PrometheusLabelValuesVariableEditor,\n  createInitialOptions: () => ({ label_name: '' }),\n};\n\nexport const PrometheusPromQLVariable: VariablePlugin<PrometheusPromQLVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    // TODO we may want to manage a range query as well.\n    const { data: options } = await client.instantQuery({\n      query: replaceTemplateVariables(spec.expr, ctx.variables),\n    });\n    const labelName = replaceTemplateVariables(spec.label_name, ctx.variables);\n    let values: string[] = [];\n    if (options?.resultType === 'matrix') {\n      values = capturingMatrix(options, labelName);\n    } else if (options?.resultType === 'vector') {\n      values = capturingVector(options, labelName);\n    }\n\n    return {\n      data: stringArrayToVariableOptions(values),\n    };\n  },\n  dependsOn: (spec) => {\n    return { variables: parseTemplateVariables(spec.expr).concat(parseTemplateVariables(spec.label_name)) };\n  },\n  OptionsEditorComponent: PrometheusPromQLVariableEditor,\n  createInitialOptions: () => ({ expr: '', label_name: '' }),\n};\n"],"names":["Stack","TextField","DEFAULT_PROM","getPrometheusTimeRange","replaceTemplateVariables","parseTemplateVariables","MatcherEditor","PrometheusLabelValuesVariableEditor","props","spacing","sx","mb","label","required","value","label_name","onChange","e","target","matchers","PrometheusLabelNamesVariableEditor","PrometheusPromQLVariableEditor","expr","capturingMatrix","matrix","captured","Set","sample","result","metric","undefined","add","Array","from","values","capturingVector","vector","stringArrayToVariableOptions","map","PrometheusLabelNamesVariable","getVariableOptions","spec","ctx","client","datasourceStore","getDatasourceClient","datasource","match","m","variables","timeRange","data","options","labelNames","dependsOn","flat","OptionsEditorComponent","createInitialOptions","PrometheusLabelValuesVariable","pluginDef","labelValues","labelName","concat","PrometheusPromQLVariable","instantQuery","query","resultType"],"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;AACjC;AACA,SAASA,KAAK,EAAEC,SAAS,QAAQ,eAAe,CAAC;AACjD,SAA2BC,YAAY,EAAEC,sBAAsB,QAAgC,UAAU,CAAC;AAC1G,SAASC,wBAAwB,EAAEC,sBAAsB,QAAQ,UAAU,CAAC;AAM5E,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAEhD,SAASC,mCAAmC,CAACC,KAA+D,EAAE;QAa5FA,SAAoB;IAZpC,qBACE,MAACR,KAAK;QAACS,OAAO,EAAE,CAAC;;0BACf,KAACR,SAAS;gBACRS,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;gBACbC,KAAK,EAAC,YAAY;gBAClBC,QAAQ;gBACRC,KAAK,EAAEN,KAAK,CAACM,KAAK,CAACC,UAAU;gBAC7BC,QAAQ,EAAE,CAACC,CAAC,GAAK;oBACfT,KAAK,CAACQ,QAAQ,CAAC;wBAAE,GAAGR,KAAK,CAACM,KAAK;wBAAEC,UAAU,EAAEE,CAAC,CAACC,MAAM,CAACJ,KAAK;qBAAE,CAAC,CAAC;gBACjE,CAAC;cACD;0BACF,KAACR,aAAa;gBACZa,QAAQ,EAAEX,CAAAA,SAAoB,GAApBA,KAAK,CAACM,KAAK,CAACK,QAAQ,cAApBX,SAAoB,cAApBA,SAAoB,GAAI,EAAE;gBACpCQ,QAAQ,EAAE,CAACC,CAAC,GAAK;oBACfT,KAAK,CAACQ,QAAQ,CAAC;wBAAE,GAAGR,KAAK,CAACM,KAAK;wBAAEK,QAAQ,EAAEF,CAAC;qBAAE,CAAC,CAAC;gBAClD,CAAC;cACD;;MACI,CACR;AACJ,CAAC;AAED,SAASG,kCAAkC,CAACZ,KAA8D,EAAE;QAI1FA,SAAoB;IAHpC,qBACE,KAACR,KAAK;QAACS,OAAO,EAAE,CAAC;kBACf,cAAA,KAACH,aAAa;YACZa,QAAQ,EAAEX,CAAAA,SAAoB,GAApBA,KAAK,CAACM,KAAK,CAACK,QAAQ,cAApBX,SAAoB,cAApBA,SAAoB,GAAI,EAAE;YACpCQ,QAAQ,EAAE,CAACC,CAAC,GAAK;gBACfT,KAAK,CAACQ,QAAQ,CAAC;oBAAE,GAAGR,KAAK,CAACM,KAAK;oBAAEK,QAAQ,EAAEF,CAAC;iBAAE,CAAC,CAAC;YAClD,CAAC;UACD;MACI,CACR;AACJ,CAAC;AAED,SAASI,8BAA8B,CAACb,KAA0D,EAAE;IAClG,qBACE,MAACR,KAAK;QAACS,OAAO,EAAE,CAAC;;0BACf,KAACR,SAAS;gBACRY,QAAQ;gBACRH,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;gBACbC,KAAK,EAAC,mBAAmB;gBACzBE,KAAK,EAAEN,KAAK,CAACM,KAAK,CAACQ,IAAI;gBACvBN,QAAQ,EAAE,CAACC,CAAC,GAAK;oBACfT,KAAK,CAACQ,QAAQ,CAAC;wBAAE,GAAGR,KAAK,CAACM,KAAK;wBAAEQ,IAAI,EAAEL,CAAC,CAACC,MAAM,CAACJ,KAAK;qBAAE,CAAC,CAAC;gBAC3D,CAAC;cACD;0BACF,KAACb,SAAS;gBACRS,EAAE,EAAE;oBAAEC,EAAE,EAAE,CAAC;iBAAE;gBACbC,KAAK,EAAC,YAAY;gBAClBE,KAAK,EAAEN,KAAK,CAACM,KAAK,CAACC,UAAU;gBAC7BC,QAAQ,EAAE,CAACC,CAAC,GAAK;oBACfT,KAAK,CAACQ,QAAQ,CAAC;wBAAE,GAAGR,KAAK,CAACM,KAAK;wBAAEC,UAAU,EAAEE,CAAC,CAACC,MAAM,CAACJ,KAAK;qBAAE,CAAC,CAAC;gBACjE,CAAC;cACD;;MACI,CACR;AACJ,CAAC;AAED,SAASS,eAAe,CAACC,MAAkB,EAAET,UAAkB,EAAY;IACzE,MAAMU,QAAQ,GAAG,IAAIC,GAAG,EAAU,AAAC;IACnC,KAAK,MAAMC,MAAM,IAAIH,MAAM,CAACI,MAAM,CAAE;QAClC,MAAMd,KAAK,GAAGa,MAAM,CAACE,MAAM,CAACd,UAAU,CAAC,AAAC;QACxC,IAAID,KAAK,KAAKgB,SAAS,EAAE;YACvBL,QAAQ,CAACM,GAAG,CAACjB,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IACD,OAAOkB,KAAK,CAACC,IAAI,CAACR,QAAQ,CAACS,MAAM,EAAE,CAAC,CAAC;AACvC,CAAC;AAED,SAASC,eAAe,CAACC,MAAkB,EAAErB,UAAkB,EAAY;IACzE,MAAMU,QAAQ,GAAG,IAAIC,GAAG,EAAU,AAAC;IACnC,KAAK,MAAMC,MAAM,IAAIS,MAAM,CAACR,MAAM,CAAE;QAClC,MAAMd,KAAK,GAAGa,MAAM,CAACE,MAAM,CAACd,UAAU,CAAC,AAAC;QACxC,IAAID,KAAK,KAAKgB,SAAS,EAAE;YACvBL,QAAQ,CAACM,GAAG,CAACjB,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IACD,OAAOkB,KAAK,CAACC,IAAI,CAACR,QAAQ,CAACS,MAAM,EAAE,CAAC,CAAC;AACvC,CAAC;AAED;;CAEC,GACD,MAAMG,4BAA4B,GAAG,CAACH,MAAiB,GAAuB;IAC5E,IAAI,CAACA,MAAM,EAAE,OAAO,EAAE,CAAC;IACvB,OAAOA,MAAM,CAACI,GAAG,CAAC,CAACxB,KAAK,GAAM,CAAA;YAC5BA,KAAK;YACLF,KAAK,EAAEE,KAAK;SACb,CAAA,AAAC,CAAC,CAAC;AACN,CAAC,AAAC;AAEF,OAAO,MAAMyB,4BAA4B,GAAwD;IAC/FC,kBAAkB,EAAE,OAAOC,IAAI,EAAEC,GAAG,GAAK;YACwCD,WAAe;QAA9F,MAAME,MAAM,GAAqB,MAAMD,GAAG,CAACE,eAAe,CAACC,mBAAmB,CAACJ,CAAAA,WAAe,GAAfA,IAAI,CAACK,UAAU,cAAfL,WAAe,cAAfA,WAAe,GAAIvC,YAAY,CAAC,AAAC;QAChH,MAAM6C,KAAK,GAAGN,IAAI,CAACtB,QAAQ,GAAGsB,IAAI,CAACtB,QAAQ,CAACmB,GAAG,CAAC,CAACU,CAAC,GAAK5C,wBAAwB,CAAC4C,CAAC,EAAEN,GAAG,CAACO,SAAS,CAAC,CAAC,GAAGnB,SAAS,AAAC;QAC/G,MAAMoB,SAAS,GAAG/C,sBAAsB,CAACuC,GAAG,CAACQ,SAAS,CAAC,AAAC;QAExD,MAAM,EAAEC,IAAI,EAAEC,OAAO,CAAA,EAAE,GAAG,MAAMT,MAAM,CAACU,UAAU,CAAC;YAAE,SAAS,EAAEN,KAAK;YAAE,GAAGG,SAAS;SAAE,CAAC,AAAC;QACtF,OAAO;YACLC,IAAI,EAAEd,4BAA4B,CAACe,OAAO,CAAC;SAC5C,CAAC;IACJ,CAAC;IACDE,SAAS,EAAE,CAACb,IAAI,GAAK;YACCA,GAAa;QAAjC,OAAO;YAAEQ,SAAS,EAAER,CAAAA,CAAAA,GAAa,GAAbA,IAAI,CAACtB,QAAQ,cAAbsB,GAAa,WAAK,GAAlBA,KAAAA,CAAkB,GAAlBA,GAAa,CAAEH,GAAG,CAAC,CAACU,CAAC,GAAK3C,sBAAsB,CAAC2C,CAAC,CAAC,CAAC,CAACO,IAAI,EAAE,CAAA,IAAI,EAAE;SAAE,CAAC;IAC1F,CAAC;IACDC,sBAAsB,EAAEpC,kCAAkC;IAC1DqC,oBAAoB,EAAE,IAAO,CAAA,EAAE,CAAA,AAAC;CACjC,CAAC;AAEF,OAAO,MAAMC,6BAA6B,GAAyD;IACjGlB,kBAAkB,EAAE,OAAOC,IAAI,EAAEC,GAAG,GAAK;QACvC,MAAMiB,SAAS,GAAGlB,IAAI,AAAC;YACwDA,WAAe;QAA9F,MAAME,MAAM,GAAqB,MAAMD,GAAG,CAACE,eAAe,CAACC,mBAAmB,CAACJ,CAAAA,WAAe,GAAfA,IAAI,CAACK,UAAU,cAAfL,WAAe,cAAfA,WAAe,GAAIvC,YAAY,CAAC,AAAC;QAChH,MAAM6C,KAAK,GAAGY,SAAS,CAACxC,QAAQ,GAC5BwC,SAAS,CAACxC,QAAQ,CAACmB,GAAG,CAAC,CAACU,CAAC,GAAK5C,wBAAwB,CAAC4C,CAAC,EAAEN,GAAG,CAACO,SAAS,CAAC,CAAC,GACzEnB,SAAS,AAAC;QAEd,MAAMoB,SAAS,GAAG/C,sBAAsB,CAACuC,GAAG,CAACQ,SAAS,CAAC,AAAC;QAExD,MAAM,EAAEC,IAAI,EAAEC,OAAO,CAAA,EAAE,GAAG,MAAMT,MAAM,CAACiB,WAAW,CAAC;YACjDC,SAAS,EAAEzD,wBAAwB,CAACuD,SAAS,CAAC5C,UAAU,EAAE2B,GAAG,CAACO,SAAS,CAAC;YACxE,SAAS,EAAEF,KAAK;YAChB,GAAGG,SAAS;SACb,CAAC,AAAC;QACH,OAAO;YACLC,IAAI,EAAEd,4BAA4B,CAACe,OAAO,CAAC;SAC5C,CAAC;IACJ,CAAC;IACDE,SAAS,EAAE,CAACb,IAAI,GAAK;YAGfA,GAAa;QAFjB,OAAO;YACLQ,SAAS,EACPR,CAAAA,CAAAA,GAAa,GAAbA,IAAI,CAACtB,QAAQ,cAAbsB,GAAa,WACN,GADPA,KAAAA,CACO,GADPA,GAAa,CACTH,GAAG,CAAC,CAACU,CAAC,GAAK3C,sBAAsB,CAAC2C,CAAC,CAAC,CAAC,CACtCO,IAAI,GACJO,MAAM,CAACzD,sBAAsB,CAACoC,IAAI,CAAC1B,UAAU,CAAC,CAAC,CAAA,IAAI,EAAE;SAC3D,CAAC;IACJ,CAAC;IACDyC,sBAAsB,EAAEjD,mCAAmC;IAC3DkD,oBAAoB,EAAE,IAAO,CAAA;YAAE1C,UAAU,EAAE,EAAE;SAAE,CAAA,AAAC;CACjD,CAAC;AAEF,OAAO,MAAMgD,wBAAwB,GAAoD;IACvFvB,kBAAkB,EAAE,OAAOC,IAAI,EAAEC,GAAG,GAAK;YACwCD,WAAe;QAA9F,MAAME,MAAM,GAAqB,MAAMD,GAAG,CAACE,eAAe,CAACC,mBAAmB,CAACJ,CAAAA,WAAe,GAAfA,IAAI,CAACK,UAAU,cAAfL,WAAe,cAAfA,WAAe,GAAIvC,YAAY,CAAC,AAAC;QAChH,oDAAoD;QACpD,MAAM,EAAEiD,IAAI,EAAEC,OAAO,CAAA,EAAE,GAAG,MAAMT,MAAM,CAACqB,YAAY,CAAC;YAClDC,KAAK,EAAE7D,wBAAwB,CAACqC,IAAI,CAACnB,IAAI,EAAEoB,GAAG,CAACO,SAAS,CAAC;SAC1D,CAAC,AAAC;QACH,MAAMY,SAAS,GAAGzD,wBAAwB,CAACqC,IAAI,CAAC1B,UAAU,EAAE2B,GAAG,CAACO,SAAS,CAAC,AAAC;QAC3E,IAAIf,MAAM,GAAa,EAAE,AAAC;QAC1B,IAAIkB,CAAAA,OAAO,aAAPA,OAAO,WAAY,GAAnBA,KAAAA,CAAmB,GAAnBA,OAAO,CAAEc,UAAU,CAAA,KAAK,QAAQ,EAAE;YACpChC,MAAM,GAAGX,eAAe,CAAC6B,OAAO,EAAES,SAAS,CAAC,CAAC;QAC/C,OAAO,IAAIT,CAAAA,OAAO,aAAPA,OAAO,WAAY,GAAnBA,KAAAA,CAAmB,GAAnBA,OAAO,CAAEc,UAAU,CAAA,KAAK,QAAQ,EAAE;YAC3ChC,MAAM,GAAGC,eAAe,CAACiB,OAAO,EAAES,SAAS,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO;YACLV,IAAI,EAAEd,4BAA4B,CAACH,MAAM,CAAC;SAC3C,CAAC;IACJ,CAAC;IACDoB,SAAS,EAAE,CAACb,IAAI,GAAK;QACnB,OAAO;YAAEQ,SAAS,EAAE5C,sBAAsB,CAACoC,IAAI,CAACnB,IAAI,CAAC,CAACwC,MAAM,CAACzD,sBAAsB,CAACoC,IAAI,CAAC1B,UAAU,CAAC,CAAC;SAAE,CAAC;IAC1G,CAAC;IACDyC,sBAAsB,EAAEnC,8BAA8B;IACtDoC,oBAAoB,EAAE,IAAO,CAAA;YAAEnC,IAAI,EAAE,EAAE;YAAEP,UAAU,EAAE,EAAE;SAAE,CAAA,AAAC;CAC3D,CAAC"}
+{"version":3,"sources":["../../src/plugins/prometheus-variables.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.\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  OptionsEditorProps,\n  useDatasourceClient,\n  VariableOption,\n  VariablePlugin,\n} from '@perses-dev/plugin-system';\nimport { FormControl, InputLabel, Stack, TextField } from '@mui/material';\nimport { produce } from 'immer';\nimport {\n  DEFAULT_PROM,\n  getPrometheusTimeRange,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  MatrixData,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n  VectorData,\n} from '../model';\nimport { parseTemplateVariables, replaceTemplateVariables } from '../utils';\nimport { PromQLEditor } from '../components';\nimport {\n  PrometheusLabelNamesVariableOptions,\n  PrometheusLabelValuesVariableOptions,\n  PrometheusPromQLVariableOptions,\n} from './types';\nimport { MatcherEditor } from './MatcherEditor';\n\nfunction PrometheusLabelValuesVariableEditor(props: OptionsEditorProps<PrometheusLabelValuesVariableOptions>) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          draft.datasource = isDefaultPromSelector(next) ? undefined : next;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\">\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind=\"PrometheusDatasource\"\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      <TextField\n        label=\"Label Name\"\n        required\n        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n      <MatcherEditor\n        matchers={props.value.matchers ?? []}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction PrometheusLabelNamesVariableEditor(props: OptionsEditorProps<PrometheusLabelNamesVariableOptions>) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          draft.datasource = isDefaultPromSelector(next) ? undefined : next;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\">\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind=\"PrometheusDatasource\"\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      <MatcherEditor\n        matchers={props.value.matchers ?? []}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction PrometheusPromQLVariableEditor(props: OptionsEditorProps<PrometheusPromQLVariableOptions>) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          draft.datasource = isDefaultPromSelector(next) ? undefined : next;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\">\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={value.expr}\n        onChange={(query) => {\n          props.onChange({ ...props.value, expr: query });\n        }}\n        width=\"100%\"\n      />\n      <TextField\n        label=\"Label Name\"\n        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction capturingMatrix(matrix: MatrixData, label_name: string): string[] {\n  const captured = new Set<string>();\n  for (const sample of matrix.result) {\n    const value = sample.metric[label_name];\n    if (value !== undefined) {\n      captured.add(value);\n    }\n  }\n  return Array.from(captured.values());\n}\n\nfunction capturingVector(vector: VectorData, label_name: string): string[] {\n  const captured = new Set<string>();\n  for (const sample of vector.result) {\n    const value = sample.metric[label_name];\n    if (value !== undefined) {\n      captured.add(value);\n    }\n  }\n  return Array.from(captured.values());\n}\n\n/**\n * Takes a list of strings and returns a list of VariableOptions\n */\nconst stringArrayToVariableOptions = (values?: string[]): VariableOption[] => {\n  if (!values) return [];\n  return values.map((value) => ({\n    value,\n    label: value,\n  }));\n};\n\nexport const PrometheusLabelNamesVariable: VariablePlugin<PrometheusLabelNamesVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    const match = spec.matchers ? spec.matchers.map((m) => replaceTemplateVariables(m, ctx.variables)) : undefined;\n    const timeRange = getPrometheusTimeRange(ctx.timeRange);\n\n    const { data: options } = await client.labelNames({ 'match[]': match, ...timeRange });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return { variables: spec.matchers?.map((m) => parseTemplateVariables(m)).flat() || [] };\n  },\n  OptionsEditorComponent: PrometheusLabelNamesVariableEditor,\n  createInitialOptions: () => ({}),\n};\n\nexport const PrometheusLabelValuesVariable: VariablePlugin<PrometheusLabelValuesVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const pluginDef = spec;\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    const match = pluginDef.matchers\n      ? pluginDef.matchers.map((m) => replaceTemplateVariables(m, ctx.variables))\n      : undefined;\n\n    const timeRange = getPrometheusTimeRange(ctx.timeRange);\n\n    const { data: options } = await client.labelValues({\n      labelName: replaceTemplateVariables(pluginDef.label_name, ctx.variables),\n      'match[]': match,\n      ...timeRange,\n    });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return {\n      variables:\n        spec.matchers\n          ?.map((m) => parseTemplateVariables(m))\n          .flat()\n          .concat(parseTemplateVariables(spec.label_name)) || [],\n    };\n  },\n  OptionsEditorComponent: PrometheusLabelValuesVariableEditor,\n  createInitialOptions: () => ({ label_name: '' }),\n};\n\nexport const PrometheusPromQLVariable: VariablePlugin<PrometheusPromQLVariableOptions> = {\n  getVariableOptions: async (spec, ctx) => {\n    const client: PrometheusClient = await ctx.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n    // TODO we may want to manage a range query as well.\n    const { data: options } = await client.instantQuery({\n      query: replaceTemplateVariables(spec.expr, ctx.variables),\n    });\n    const labelName = replaceTemplateVariables(spec.label_name, ctx.variables);\n    let values: string[] = [];\n    if (options?.resultType === 'matrix') {\n      values = capturingMatrix(options, labelName);\n    } else if (options?.resultType === 'vector') {\n      values = capturingVector(options, labelName);\n    }\n\n    return {\n      data: stringArrayToVariableOptions(values),\n    };\n  },\n  dependsOn: (spec) => {\n    return { variables: parseTemplateVariables(spec.expr).concat(parseTemplateVariables(spec.label_name)) };\n  },\n  OptionsEditorComponent: PrometheusPromQLVariableEditor,\n  createInitialOptions: () => ({ expr: '', label_name: '' }),\n};\n"],"names":["DatasourceSelect","useDatasourceClient","FormControl","InputLabel","Stack","TextField","produce","DEFAULT_PROM","getPrometheusTimeRange","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","parseTemplateVariables","replaceTemplateVariables","PromQLEditor","MatcherEditor","PrometheusLabelValuesVariableEditor","props","onChange","value","datasource","selectedDatasource","handleDatasourceChange","next","draft","undefined","Error","spacing","margin","id","datasourcePluginKind","labelId","label","required","label_name","e","target","matchers","PrometheusLabelNamesVariableEditor","PrometheusPromQLVariableEditor","data","client","promURL","options","datasourceUrl","completeConfig","remote","url","expr","query","width","capturingMatrix","matrix","captured","Set","sample","result","metric","add","Array","from","values","capturingVector","vector","stringArrayToVariableOptions","map","PrometheusLabelNamesVariable","getVariableOptions","spec","ctx","datasourceStore","getDatasourceClient","match","m","variables","timeRange","labelNames","dependsOn","flat","OptionsEditorComponent","createInitialOptions","PrometheusLabelValuesVariable","pluginDef","labelValues","labelName","concat","PrometheusPromQLVariable","instantQuery","resultType"],"mappings":"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"}

package/dist/plugins/variable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variable.d.ts","sourceRoot":"","sources":["../../src/plugins/variable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAsB,MAAM,2BAA2B,CAAC;AAG/F,aAAK,gBAAgB,GAAG,MAAM,GAAG,cAAc,CAAC;AAEhD,aAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B,CAAC;AA8CF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,yBAAyB,CAiBxE,CAAC"}
+{"version":3,"file":"variable.d.ts","sourceRoot":"","sources":["../../src/plugins/variable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAsB,MAAM,2BAA2B,CAAC;AAG/F,aAAK,gBAAgB,GAAG,MAAM,GAAG,cAAc,CAAC;AAEhD,aAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B,CAAC;AAkDF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,yBAAyB,CAiBxE,CAAC"}

package/dist/plugins/variable.js

@@ -10,8 +10,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, TextField, Typography } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from '@mui/material';
 function StaticListVariableOptionEditor(props) {
     const value = props.value.values.map((v)=>{
         if (typeof v === 'string') {
@@ -30,41 +30,30 @@ function StaticListVariableOptionEditor(props) {
             })
         });
     };
-    return /*#__PURE__*/ _jsxs("div", {
-        children: [
-            /*#__PURE__*/ _jsx(Autocomplete, {
-                onPaste: (e)=>{
-                    // Append new values on paste
-                    const v = e.clipboardData.getData('text/plain');
-                    if (v) {
-                        const values = v.split(',');
-                        onChange(null, value.concat(values));
-                        e.preventDefault();
-                    }
-                },
-                multiple: true,
-                value: value,
-                onChange: onChange,
-                options: [],
-                freeSolo: true,
-                clearOnBlur: true,
-                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                        ...params,
-                        label: "Values",
-                        placeholder: "Values"
-                    })
-            }),
-            /*#__PURE__*/ _jsxs(Typography, {
-                variant: "caption",
-                children: [
-                    "Type new value then press ",
-                    `"`,
-                    "Enter",
-                    `"`,
-                    " to add."
-                ]
-            })
-        ]
+    return /*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsx(Autocomplete, {
+            onPaste: (e)=>{
+                // Append new values on paste
+                const v = e.clipboardData.getData('text/plain');
+                if (v) {
+                    const values = v.split(',');
+                    onChange(null, value.concat(values));
+                    e.preventDefault();
+                }
+            },
+            multiple: true,
+            value: value,
+            onChange: onChange,
+            options: [],
+            freeSolo: true,
+            clearOnBlur: true,
+            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                    ...params,
+                    label: "Values",
+                    placeholder: "Values",
+                    helperText: 'Type new value then press "Enter" to add.'
+                })
+        })
     });
 }
 export const StaticListVariable = {

package/dist/plugins/variable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/variable.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 { VariablePlugin, VariableOption, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Autocomplete, TextField, Typography } from '@mui/material';\n\ntype StaticListOption = string | VariableOption;\n\ntype StaticListVariableOptions = {\n  values: StaticListOption[];\n};\n\nfunction StaticListVariableOptionEditor(props: OptionsEditorProps<StaticListVariableOptions>) {\n  const value = props.value.values.map((v) => {\n    if (typeof v === 'string') {\n      return v;\n    } else {\n      return v.value;\n    }\n  });\n\n  const onChange = (__: unknown, value: string[]) => {\n    props.onChange({\n      values: value.map((v) => {\n        return { value: v, label: v };\n      }),\n    });\n  };\n\n  return (\n    <div>\n      <Autocomplete\n        onPaste={(e) => {\n          // Append new values on paste\n          const v = e.clipboardData.getData('text/plain');\n          if (v) {\n            const values = v.split(',');\n            onChange(null, value.concat(values));\n            e.preventDefault();\n          }\n        }}\n        multiple\n        value={value}\n        onChange={onChange}\n        options={[]}\n        freeSolo\n        clearOnBlur\n        renderInput={(params) => <TextField {...params} label=\"Values\" placeholder=\"Values\" />}\n      />\n      <Typography variant=\"caption\">\n        Type new value then press {`\"`}Enter{`\"`} to add.\n      </Typography>\n    </div>\n  );\n}\n\nexport const StaticListVariable: VariablePlugin<StaticListVariableOptions> = {\n  getVariableOptions: async (spec) => {\n    const values = spec.values?.map((v) => {\n      if (typeof v === 'string') {\n        return { label: v, value: v };\n      }\n      return v;\n    });\n    return {\n      data: values,\n    };\n  },\n  dependsOn: () => {\n    return { variables: [] };\n  },\n  OptionsEditorComponent: StaticListVariableOptionEditor,\n  createInitialOptions: () => ({ values: [] }),\n};\n"],"names":["Autocomplete","TextField","Typography","StaticListVariableOptionEditor","props","value","values","map","v","onChange","__","label","div","onPaste","e","clipboardData","getData","split","concat","preventDefault","multiple","options","freeSolo","clearOnBlur","renderInput","params","placeholder","variant","StaticListVariable","getVariableOptions","spec","data","dependsOn","variables","OptionsEditorComponent","createInitialOptions"],"mappings":"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"}
+{"version":3,"sources":["../../src/plugins/variable.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 { VariablePlugin, VariableOption, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Autocomplete, TextField } from '@mui/material';\n\ntype StaticListOption = string | VariableOption;\n\ntype StaticListVariableOptions = {\n  values: StaticListOption[];\n};\n\nfunction StaticListVariableOptionEditor(props: OptionsEditorProps<StaticListVariableOptions>) {\n  const value = props.value.values.map((v) => {\n    if (typeof v === 'string') {\n      return v;\n    } else {\n      return v.value;\n    }\n  });\n\n  const onChange = (__: unknown, value: string[]) => {\n    props.onChange({\n      values: value.map((v) => {\n        return { value: v, label: v };\n      }),\n    });\n  };\n\n  return (\n    <div>\n      <Autocomplete\n        onPaste={(e) => {\n          // Append new values on paste\n          const v = e.clipboardData.getData('text/plain');\n          if (v) {\n            const values = v.split(',');\n            onChange(null, value.concat(values));\n            e.preventDefault();\n          }\n        }}\n        multiple\n        value={value}\n        onChange={onChange}\n        options={[]}\n        freeSolo\n        clearOnBlur\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label=\"Values\"\n            placeholder=\"Values\"\n            helperText='Type new value then press \"Enter\" to add.'\n          />\n        )}\n      />\n    </div>\n  );\n}\n\nexport const StaticListVariable: VariablePlugin<StaticListVariableOptions> = {\n  getVariableOptions: async (spec) => {\n    const values = spec.values?.map((v) => {\n      if (typeof v === 'string') {\n        return { label: v, value: v };\n      }\n      return v;\n    });\n    return {\n      data: values,\n    };\n  },\n  dependsOn: () => {\n    return { variables: [] };\n  },\n  OptionsEditorComponent: StaticListVariableOptionEditor,\n  createInitialOptions: () => ({ values: [] }),\n};\n"],"names":["Autocomplete","TextField","StaticListVariableOptionEditor","props","value","values","map","v","onChange","__","label","div","onPaste","e","clipboardData","getData","split","concat","preventDefault","multiple","options","freeSolo","clearOnBlur","renderInput","params","placeholder","helperText","StaticListVariable","getVariableOptions","spec","data","dependsOn","variables","OptionsEditorComponent","createInitialOptions"],"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;AACA,SAASA,YAAY,EAAEC,SAAS,QAAQ,eAAe,CAAC;AAQxD,SAASC,8BAA8B,CAACC,KAAoD,EAAE;IAC5F,MAAMC,KAAK,GAAGD,KAAK,CAACC,KAAK,CAACC,MAAM,CAACC,GAAG,CAAC,CAACC,CAAC,GAAK;QAC1C,IAAI,OAAOA,CAAC,KAAK,QAAQ,EAAE;YACzB,OAAOA,CAAC,CAAC;QACX,OAAO;YACL,OAAOA,CAAC,CAACH,KAAK,CAAC;QACjB,CAAC;IACH,CAAC,CAAC,AAAC;IAEH,MAAMI,QAAQ,GAAG,CAACC,EAAW,EAAEL,KAAe,GAAK;QACjDD,KAAK,CAACK,QAAQ,CAAC;YACbH,MAAM,EAAED,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,GAAK;gBACvB,OAAO;oBAAEH,KAAK,EAAEG,CAAC;oBAAEG,KAAK,EAAEH,CAAC;iBAAE,CAAC;YAChC,CAAC,CAAC;SACH,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,qBACE,KAACI,KAAG;kBACF,cAAA,KAACX,YAAY;YACXY,OAAO,EAAE,CAACC,CAAC,GAAK;gBACd,6BAA6B;gBAC7B,MAAMN,CAAC,GAAGM,CAAC,CAACC,aAAa,CAACC,OAAO,CAAC,YAAY,CAAC,AAAC;gBAChD,IAAIR,CAAC,EAAE;oBACL,MAAMF,MAAM,GAAGE,CAAC,CAACS,KAAK,CAAC,GAAG,CAAC,AAAC;oBAC5BR,QAAQ,CAAC,IAAI,EAAEJ,KAAK,CAACa,MAAM,CAACZ,MAAM,CAAC,CAAC,CAAC;oBACrCQ,CAAC,CAACK,cAAc,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;YACDC,QAAQ;YACRf,KAAK,EAAEA,KAAK;YACZI,QAAQ,EAAEA,QAAQ;YAClBY,OAAO,EAAE,EAAE;YACXC,QAAQ;YACRC,WAAW;YACXC,WAAW,EAAE,CAACC,MAAM,iBAClB,KAACvB,SAAS;oBACP,GAAGuB,MAAM;oBACVd,KAAK,EAAC,QAAQ;oBACde,WAAW,EAAC,QAAQ;oBACpBC,UAAU,EAAC,2CAA2C;kBACtD,AACH;UACD;MACE,CACN;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAA8C;IAC3EC,kBAAkB,EAAE,OAAOC,IAAI,GAAK;YACnBA,GAAW;QAA1B,MAAMxB,MAAM,GAAGwB,CAAAA,GAAW,GAAXA,IAAI,CAACxB,MAAM,cAAXwB,GAAW,WAAK,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAW,CAAEvB,GAAG,CAAC,CAACC,CAAC,GAAK;YACrC,IAAI,OAAOA,CAAC,KAAK,QAAQ,EAAE;gBACzB,OAAO;oBAAEG,KAAK,EAAEH,CAAC;oBAAEH,KAAK,EAAEG,CAAC;iBAAE,CAAC;YAChC,CAAC;YACD,OAAOA,CAAC,CAAC;QACX,CAAC,CAAC,AAAC;QACH,OAAO;YACLuB,IAAI,EAAEzB,MAAM;SACb,CAAC;IACJ,CAAC;IACD0B,SAAS,EAAE,IAAM;QACf,OAAO;YAAEC,SAAS,EAAE,EAAE;SAAE,CAAC;IAC3B,CAAC;IACDC,sBAAsB,EAAE/B,8BAA8B;IACtDgC,oBAAoB,EAAE,IAAO,CAAA;YAAE7B,MAAM,EAAE,EAAE;SAAE,CAAA,AAAC;CAC7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/prometheus-plugin",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Prometheus plugin for Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -31,9 +31,9 @@
   "dependencies": {
     "@lezer/highlight": "^1.0.0",
     "@lezer/lr": "^1.2.0",
-    "@perses-dev/components": "0.30.0",
-    "@perses-dev/core": "0.30.0",
-    "@perses-dev/plugin-system": "0.30.0",
+    "@perses-dev/components": "0.31.0",
+    "@perses-dev/core": "0.31.0",
+    "@perses-dev/plugin-system": "0.31.0",
     "@prometheus-io/codemirror-promql": "^0.43.0",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",