@perses-dev/prometheus-plugin 0.14.0 → 0.15.0

package/dist/cjs/model/utils.js

@@ -23,7 +23,8 @@ function _export(target, all) {
 _export(exports, {
     replaceTemplateVariables: ()=>replaceTemplateVariables,
     replaceTemplateVariable: ()=>replaceTemplateVariable,
-    parseTemplateVariables: ()=>parseTemplateVariables
+    parseTemplateVariables: ()=>parseTemplateVariables,
+    formatSeriesName: ()=>formatSeriesName
 });
 function replaceTemplateVariables(text, variableState) {
     const variables = parseTemplateVariables(text);
@@ -64,3 +65,7 @@ const parseTemplateVariables = (text)=>{
     // return unique matches
     return Array.from(new Set(matches));
 };
+function formatSeriesName(inputFormat, seriesLabels) {
+    const resolveLabelsRegex = /\{\{\s*(.+?)\s*\}\}/g;
+    return inputFormat.replace(resolveLabelsRegex, (_, g)=>seriesLabels[g] ? seriesLabels[g] : g);
+}

package/dist/cjs/model/utils.test.js

@@ -110,3 +110,17 @@ describe('replaceTemplateVariables()', ()=>{
         });
     });
 });
+describe('formatSeriesName', ()=>{
+    it('should resolve label name tokens to label values from query response', ()=>{
+        // example from query: node_load15{instance=~\"(demo.do.prometheus.io:9100)\",job='$job'}
+        const inputFormat = 'Test {{job}} {{instance}}';
+        const metric = {
+            __name__: 'node_load15',
+            env: 'demo',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node'
+        };
+        const output = 'Test node demo.do.prometheus.io:9100';
+        expect((0, _utils.formatSeriesName)(inputFormat, metric)).toEqual(output);
+    });
+});

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

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "PrometheusTimeSeriesQuery", {
     enumerable: true,
     get: ()=>PrometheusTimeSeriesQuery
 });
+const _model = require("../../model");
 const _getTimeSeriesData = require("./get-time-series-data");
 const _prometheusTimeSeriesQueryEditor = require("./PrometheusTimeSeriesQueryEditor");
 const PrometheusTimeSeriesQuery = {
@@ -26,5 +27,10 @@ const PrometheusTimeSeriesQuery = {
     createInitialOptions: ()=>({
             query: '',
             datasource: undefined
-        })
+        }),
+    dependsOn: (spec)=>{
+        return {
+            variables: (0, _model.parseTemplateVariables)(spec.query)
+        };
+    }
 };

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

@@ -28,6 +28,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
     const { onChange , value  } = props;
     const { datasource  } = value;
     const { query , handleQueryChange , handleQueryBlur  } = (0, _queryEditorModel.useQueryState)(props);
+    const { format , handleFormatChange , handleFormatBlur  } = (0, _queryEditorModel.useFormatState)(props);
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -49,6 +50,14 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 onBlur: handleQueryBlur,
                 margin: "dense"
             }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                label: "Series Name Format",
+                value: format !== null && format !== void 0 ? format : '',
+                onChange: handleFormatChange,
+                onBlur: handleFormatBlur,
+                margin: "dense"
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
                 margin: "dense",
                 fullWidth: false,

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

@@ -64,9 +64,13 @@ const getTimeSeriesData = async (spec, context)=>{
             // overall query
             let name = Object.entries(metric).map(([labelName, labelValue])=>`${labelName}="${labelValue}"`).join(', ');
             if (name === '') name = query;
+            // query editor allows you to define an optional series_name_format
+            // property to customize legend and tooltip display
+            const formattedName = spec.series_name_format ? (0, _model.formatSeriesName)(spec.series_name_format, metric) : name;
             return {
                 name,
-                values: values.map(_model.parseValueTuple)
+                values: values.map(_model.parseValueTuple),
+                formattedName
             };
         })
     };

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

@@ -14,9 +14,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useQueryState", {
-    enumerable: true,
-    get: ()=>useQueryState
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useQueryState: ()=>useQueryState,
+    useFormatState: ()=>useFormatState
 });
 const _react = require("react");
 const _immer = require("immer");
@@ -49,3 +55,29 @@ function useQueryState(props) {
         handleQueryBlur
     };
 }
+function useFormatState(props) {
+    const { onChange , value  } = props;
+    // TODO: reusable hook or helper util instead of duplicating from useQueryState
+    const [format, setFormat] = (0, _react.useState)(value.series_name_format);
+    const [lastSyncedFormat, setLastSyncedFormat] = (0, _react.useState)(value.series_name_format);
+    if (value.series_name_format !== lastSyncedFormat) {
+        setFormat(value.series_name_format);
+        setLastSyncedFormat(value.series_name_format);
+    }
+    // Update our local state as the user types
+    const handleFormatChange = (e)=>{
+        setFormat(e.target.value);
+    };
+    // Propagate changes to the panel preview component when series_name_format TextField is blurred
+    const handleFormatBlur = ()=>{
+        setLastSyncedFormat(format);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.series_name_format = format;
+        }));
+    };
+    return {
+        format,
+        handleFormatChange,
+        handleFormatBlur
+    };
+}

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

@@ -94,7 +94,11 @@ const PrometheusLabelNamesVariable = {
             data: stringArrayToVariableOptions(options)
         };
     },
-    dependsOn: ()=>[],
+    dependsOn: ()=>{
+        return {
+            variables: []
+        };
+    },
     OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
     createInitialOptions: ()=>({})
 };
@@ -116,7 +120,9 @@ const PrometheusLabelValuesVariable = {
     },
     dependsOn: (spec)=>{
         var ref;
-        return ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _model.parseTemplateVariables)(m)).flat()) || [];
+        return {
+            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _model.parseTemplateVariables)(m)).flat()) || []
+        };
     },
     OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
     createInitialOptions: ()=>({

package/dist/cjs/plugins/variable.js

@@ -69,7 +69,11 @@ const StaticListVariable = {
             data: values
         };
     },
-    dependsOn: ()=>[],
+    dependsOn: ()=>{
+        return {
+            variables: []
+        };
+    },
     OptionsEditorComponent: StaticListVariableOptionEditor,
     createInitialOptions: ()=>({
             values: []

package/dist/model/utils.d.ts

@@ -6,4 +6,9 @@ export declare function replaceTemplateVariable(text: string, varName: string, t
  * Returns a list of template variables
  */
 export declare const parseTemplateVariables: (text: string) => string[];
+/**
+ * Types for metric labels, used in series_name_format implementation
+ */
+export declare type SeriesLabels = Record<string, string>;
+export declare function formatSeriesName(inputFormat: string, seriesLabels: SeriesLabels): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/model/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,GAAG,MAAM,CAW9F;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,aAAa,UAW1G;AAMD;;GAEG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,aAclD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,gBAAgB,GAAG,MAAM,CAW9F;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,aAAa,UAW1G;AAMD;;GAEG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,aAclD,CAAC;AAEF;;GAEG;AACH,oBAAY,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAMlD,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,GAAG,MAAM,CAGxF"}

package/dist/model/utils.js

@@ -51,5 +51,12 @@ const TEMPLATE_VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?
     // return unique matches
     return Array.from(new Set(matches));
 };
+/*
+ * Formatter used for series name display in legends and tooltips
+ * Regex replaces label {{ name }} with resolved label value
+ */ export function formatSeriesName(inputFormat, seriesLabels) {
+    const resolveLabelsRegex = /\{\{\s*(.+?)\s*\}\}/g;
+    return inputFormat.replace(resolveLabelsRegex, (_, g)=>seriesLabels[g] ? seriesLabels[g] : g);
+}
 
 //# sourceMappingURL=utils.js.map

package/dist/model/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/utils.ts"],"sourcesContent":["// Copyright 2022 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 { VariableValue } from '@perses-dev/core';\nimport { VariableStateMap } from '@perses-dev/plugin-system';\n\nexport function replaceTemplateVariables(text: string, variableState: VariableStateMap): string {\n  const variables = parseTemplateVariables(text);\n  let finalText = text;\n  variables.forEach((v) => {\n    const variable = variableState[v];\n    if (variable && variable?.value) {\n      finalText = replaceTemplateVariable(finalText, v, variable?.value);\n    }\n  });\n\n  return finalText;\n}\n\nexport function replaceTemplateVariable(text: string, varName: string, templateVariableValue: VariableValue) {\n  const variableTemplate = '$' + varName;\n  let replaceString = '';\n  if (Array.isArray(templateVariableValue)) {\n    replaceString = `(${templateVariableValue.join('|')})`; // regex style\n  }\n  if (typeof templateVariableValue === 'string') {\n    replaceString = templateVariableValue;\n  }\n\n  return text.replaceAll(variableTemplate, replaceString);\n}\n\n// TODO: Fix this lint eror\n// eslint-disable-next-line no-useless-escape\nconst TEMPLATE_VARIABLE_REGEX = /\\$(\\w+)|\\${(\\w+)(?:\\.([^:^\\}]+))?(?::([^\\}]+))?}/gm;\n\n/**\n * Returns a list of template variables\n */\nexport const parseTemplateVariables = (text: string) => {\n  const regex = TEMPLATE_VARIABLE_REGEX;\n  const matches = [];\n  let match;\n\n  while ((match = regex.exec(text)) !== null) {\n    if (match) {\n      if (match && match.length > 1 && match[1]) {\n        matches.push(match[1]);\n      }\n    }\n  }\n  // return unique matches\n  return Array.from(new Set(matches));\n};\n"],"names":["replaceTemplateVariables","text","variableState","variables","parseTemplateVariables","finalText","forEach","v","variable","value","replaceTemplateVariable","varName","templateVariableValue","variableTemplate","replaceString","Array","isArray","join","replaceAll","TEMPLATE_VARIABLE_REGEX","regex","matches","match","exec","length","push","from","Set"],"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;AAKjC,OAAO,SAASA,wBAAwB,CAACC,IAAY,EAAEC,aAA+B,EAAU;IAC9F,MAAMC,SAAS,GAAGC,sBAAsB,CAACH,IAAI,CAAC,AAAC;IAC/C,IAAII,SAAS,GAAGJ,IAAI,AAAC;IACrBE,SAAS,CAACG,OAAO,CAAC,CAACC,CAAC,GAAK;QACvB,MAAMC,QAAQ,GAAGN,aAAa,CAACK,CAAC,CAAC,AAAC;QAClC,IAAIC,QAAQ,IAAIA,CAAAA,QAAQ,aAARA,QAAQ,WAAO,GAAfA,KAAAA,CAAe,GAAfA,QAAQ,CAAEC,KAAK,CAAA,EAAE;YAC/BJ,SAAS,GAAGK,uBAAuB,CAACL,SAAS,EAAEE,CAAC,EAAEC,QAAQ,aAARA,QAAQ,WAAO,GAAfA,KAAAA,CAAe,GAAfA,QAAQ,CAAEC,KAAK,CAAC,CAAC;QACrE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAOJ,SAAS,CAAC;AACnB,CAAC;AAED,OAAO,SAASK,uBAAuB,CAACT,IAAY,EAAEU,OAAe,EAAEC,qBAAoC,EAAE;IAC3G,MAAMC,gBAAgB,GAAG,GAAG,GAAGF,OAAO,AAAC;IACvC,IAAIG,aAAa,GAAG,EAAE,AAAC;IACvB,IAAIC,KAAK,CAACC,OAAO,CAACJ,qBAAqB,CAAC,EAAE;QACxCE,aAAa,GAAG,CAAC,CAAC,EAAEF,qBAAqB,CAACK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IACxE,CAAC;IACD,IAAI,OAAOL,qBAAqB,KAAK,QAAQ,EAAE;QAC7CE,aAAa,GAAGF,qBAAqB,CAAC;IACxC,CAAC;IAED,OAAOX,IAAI,CAACiB,UAAU,CAACL,gBAAgB,EAAEC,aAAa,CAAC,CAAC;AAC1D,CAAC;AAED,2BAA2B;AAC3B,6CAA6C;AAC7C,MAAMK,uBAAuB,uDAAuD,AAAC;AAErF;;CAEC,GACD,OAAO,MAAMf,sBAAsB,GAAG,CAACH,IAAY,GAAK;IACtD,MAAMmB,KAAK,GAAGD,uBAAuB,AAAC;IACtC,MAAME,OAAO,GAAG,EAAE,AAAC;IACnB,IAAIC,KAAK,AAAC;IAEV,MAAO,AAACA,CAAAA,KAAK,GAAGF,KAAK,CAACG,IAAI,CAACtB,IAAI,CAAC,CAAA,KAAM,IAAI,CAAE;QAC1C,IAAIqB,KAAK,EAAE;YACT,IAAIA,KAAK,IAAIA,KAAK,CAACE,MAAM,GAAG,CAAC,IAAIF,KAAK,CAAC,CAAC,CAAC,EAAE;gBACzCD,OAAO,CAACI,IAAI,CAACH,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IACD,wBAAwB;IACxB,OAAOP,KAAK,CAACW,IAAI,CAAC,IAAIC,GAAG,CAACN,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/model/utils.ts"],"sourcesContent":["// Copyright 2022 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 { VariableValue } from '@perses-dev/core';\nimport { VariableStateMap } from '@perses-dev/plugin-system';\n\nexport function replaceTemplateVariables(text: string, variableState: VariableStateMap): string {\n  const variables = parseTemplateVariables(text);\n  let finalText = text;\n  variables.forEach((v) => {\n    const variable = variableState[v];\n    if (variable && variable?.value) {\n      finalText = replaceTemplateVariable(finalText, v, variable?.value);\n    }\n  });\n\n  return finalText;\n}\n\nexport function replaceTemplateVariable(text: string, varName: string, templateVariableValue: VariableValue) {\n  const variableTemplate = '$' + varName;\n  let replaceString = '';\n  if (Array.isArray(templateVariableValue)) {\n    replaceString = `(${templateVariableValue.join('|')})`; // regex style\n  }\n  if (typeof templateVariableValue === 'string') {\n    replaceString = templateVariableValue;\n  }\n\n  return text.replaceAll(variableTemplate, replaceString);\n}\n\n// TODO: Fix this lint eror\n// eslint-disable-next-line no-useless-escape\nconst TEMPLATE_VARIABLE_REGEX = /\\$(\\w+)|\\${(\\w+)(?:\\.([^:^\\}]+))?(?::([^\\}]+))?}/gm;\n\n/**\n * Returns a list of template variables\n */\nexport const parseTemplateVariables = (text: string) => {\n  const regex = TEMPLATE_VARIABLE_REGEX;\n  const matches = [];\n  let match;\n\n  while ((match = regex.exec(text)) !== null) {\n    if (match) {\n      if (match && match.length > 1 && match[1]) {\n        matches.push(match[1]);\n      }\n    }\n  }\n  // return unique matches\n  return Array.from(new Set(matches));\n};\n\n/**\n * Types for metric labels, used in series_name_format implementation\n */\nexport type SeriesLabels = Record<string, string>;\n\n/*\n * Formatter used for series name display in legends and tooltips\n * Regex replaces label {{ name }} with resolved label value\n */\nexport function formatSeriesName(inputFormat: string, seriesLabels: SeriesLabels): string {\n  const resolveLabelsRegex = /\\{\\{\\s*(.+?)\\s*\\}\\}/g;\n  return inputFormat.replace(resolveLabelsRegex, (_, g) => (seriesLabels[g] ? seriesLabels[g] : g));\n}\n"],"names":["replaceTemplateVariables","text","variableState","variables","parseTemplateVariables","finalText","forEach","v","variable","value","replaceTemplateVariable","varName","templateVariableValue","variableTemplate","replaceString","Array","isArray","join","replaceAll","TEMPLATE_VARIABLE_REGEX","regex","matches","match","exec","length","push","from","Set","formatSeriesName","inputFormat","seriesLabels","resolveLabelsRegex","replace","_","g"],"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;AAKjC,OAAO,SAASA,wBAAwB,CAACC,IAAY,EAAEC,aAA+B,EAAU;IAC9F,MAAMC,SAAS,GAAGC,sBAAsB,CAACH,IAAI,CAAC,AAAC;IAC/C,IAAII,SAAS,GAAGJ,IAAI,AAAC;IACrBE,SAAS,CAACG,OAAO,CAAC,CAACC,CAAC,GAAK;QACvB,MAAMC,QAAQ,GAAGN,aAAa,CAACK,CAAC,CAAC,AAAC;QAClC,IAAIC,QAAQ,IAAIA,CAAAA,QAAQ,aAARA,QAAQ,WAAO,GAAfA,KAAAA,CAAe,GAAfA,QAAQ,CAAEC,KAAK,CAAA,EAAE;YAC/BJ,SAAS,GAAGK,uBAAuB,CAACL,SAAS,EAAEE,CAAC,EAAEC,QAAQ,aAARA,QAAQ,WAAO,GAAfA,KAAAA,CAAe,GAAfA,QAAQ,CAAEC,KAAK,CAAC,CAAC;QACrE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAOJ,SAAS,CAAC;AACnB,CAAC;AAED,OAAO,SAASK,uBAAuB,CAACT,IAAY,EAAEU,OAAe,EAAEC,qBAAoC,EAAE;IAC3G,MAAMC,gBAAgB,GAAG,GAAG,GAAGF,OAAO,AAAC;IACvC,IAAIG,aAAa,GAAG,EAAE,AAAC;IACvB,IAAIC,KAAK,CAACC,OAAO,CAACJ,qBAAqB,CAAC,EAAE;QACxCE,aAAa,GAAG,CAAC,CAAC,EAAEF,qBAAqB,CAACK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IACxE,CAAC;IACD,IAAI,OAAOL,qBAAqB,KAAK,QAAQ,EAAE;QAC7CE,aAAa,GAAGF,qBAAqB,CAAC;IACxC,CAAC;IAED,OAAOX,IAAI,CAACiB,UAAU,CAACL,gBAAgB,EAAEC,aAAa,CAAC,CAAC;AAC1D,CAAC;AAED,2BAA2B;AAC3B,6CAA6C;AAC7C,MAAMK,uBAAuB,uDAAuD,AAAC;AAErF;;CAEC,GACD,OAAO,MAAMf,sBAAsB,GAAG,CAACH,IAAY,GAAK;IACtD,MAAMmB,KAAK,GAAGD,uBAAuB,AAAC;IACtC,MAAME,OAAO,GAAG,EAAE,AAAC;IACnB,IAAIC,KAAK,AAAC;IAEV,MAAO,AAACA,CAAAA,KAAK,GAAGF,KAAK,CAACG,IAAI,CAACtB,IAAI,CAAC,CAAA,KAAM,IAAI,CAAE;QAC1C,IAAIqB,KAAK,EAAE;YACT,IAAIA,KAAK,IAAIA,KAAK,CAACE,MAAM,GAAG,CAAC,IAAIF,KAAK,CAAC,CAAC,CAAC,EAAE;gBACzCD,OAAO,CAACI,IAAI,CAACH,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IACD,wBAAwB;IACxB,OAAOP,KAAK,CAACW,IAAI,CAAC,IAAIC,GAAG,CAACN,OAAO,CAAC,CAAC,CAAC;AACtC,CAAC,CAAC;AAOF;;;CAGC,GACD,OAAO,SAASO,gBAAgB,CAACC,WAAmB,EAAEC,YAA0B,EAAU;IACxF,MAAMC,kBAAkB,yBAAyB,AAAC;IAClD,OAAOF,WAAW,CAACG,OAAO,CAACD,kBAAkB,EAAE,CAACE,CAAC,EAAEC,CAAC,GAAMJ,YAAY,CAACI,CAAC,CAAC,GAAGJ,YAAY,CAACI,CAAC,CAAC,GAAGA,CAAC,AAAC,CAAC,CAAC;AACpG,CAAC"}

package/dist/model/utils.test.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.
-import { parseTemplateVariables, replaceTemplateVariable, replaceTemplateVariables } from './utils';
+import { parseTemplateVariables, replaceTemplateVariable, replaceTemplateVariables, formatSeriesName } from './utils';
 describe('parseTemplateVariables()', ()=>{
     const tests = [
         {
@@ -106,5 +106,19 @@ describe('replaceTemplateVariables()', ()=>{
         });
     });
 });
+describe('formatSeriesName', ()=>{
+    it('should resolve label name tokens to label values from query response', ()=>{
+        // example from query: node_load15{instance=~\"(demo.do.prometheus.io:9100)\",job='$job'}
+        const inputFormat = 'Test {{job}} {{instance}}';
+        const metric = {
+            __name__: 'node_load15',
+            env: 'demo',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node'
+        };
+        const output = 'Test node demo.do.prometheus.io:9100';
+        expect(formatSeriesName(inputFormat, metric)).toEqual(output);
+    });
+});
 
 //# sourceMappingURL=utils.test.js.map

package/dist/model/utils.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/utils.test.ts"],"sourcesContent":["// Copyright 2022 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 { parseTemplateVariables, replaceTemplateVariable, replaceTemplateVariables } from './utils';\n\ndescribe('parseTemplateVariables()', () => {\n  const tests = [\n    {\n      text: 'hello $var1 world $var2',\n      variables: ['var1', 'var2'],\n    },\n  ];\n\n  tests.forEach(({ text, variables }) => {\n    it(`parses ${text}`, () => {\n      expect(parseTemplateVariables(text)).toEqual(variables);\n    });\n  });\n});\n\ndescribe('replaceTemplateVariable()', () => {\n  const tests = [\n    {\n      text: 'hello $var1',\n      varName: 'var1',\n      value: 'world',\n      expected: 'hello world',\n    },\n    {\n      text: 'hello $var1 $var1',\n      varName: 'var1',\n      value: 'world',\n      expected: 'hello world world',\n    },\n    {\n      text: 'hello $var1',\n      varName: 'var1',\n      value: ['world', 'w'],\n      expected: 'hello (world|w)',\n    },\n    {\n      text: 'hello $var1 $var1',\n      varName: 'var1',\n      value: ['world', 'w'],\n      expected: 'hello (world|w) (world|w)',\n    },\n  ];\n\n  tests.forEach(({ text, value, varName, expected }) => {\n    it(`replaces ${text} ${value}`, () => {\n      expect(replaceTemplateVariable(text, varName, value)).toEqual(expected);\n    });\n  });\n});\n\ndescribe('replaceTemplateVariables()', () => {\n  const tests = [\n    {\n      text: 'hello $var1 $var2',\n      state: {\n        var1: { value: 'world', loading: false },\n        var2: { value: 'world', loading: false },\n      },\n      expected: 'hello world world',\n    },\n    {\n      text: 'hello $var1 $var2',\n      state: {\n        var1: { value: 'world', loading: false },\n        var2: { value: ['a', 'b'], loading: false },\n      },\n      expected: 'hello world (a|b)',\n    },\n  ];\n\n  tests.forEach(({ text, state, expected }) => {\n    it(`replaces ${text} ${JSON.stringify(state)}`, () => {\n      expect(replaceTemplateVariables(text, state)).toEqual(expected);\n    });\n  });\n});\n"],"names":["parseTemplateVariables","replaceTemplateVariable","replaceTemplateVariables","describe","tests","text","variables","forEach","it","expect","toEqual","varName","value","expected","state","var1","loading","var2","JSON","stringify"],"mappings":"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"}
+{"version":3,"sources":["../../src/model/utils.test.ts"],"sourcesContent":["// Copyright 2022 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 { parseTemplateVariables, replaceTemplateVariable, replaceTemplateVariables, formatSeriesName } from './utils';\n\ndescribe('parseTemplateVariables()', () => {\n  const tests = [\n    {\n      text: 'hello $var1 world $var2',\n      variables: ['var1', 'var2'],\n    },\n  ];\n\n  tests.forEach(({ text, variables }) => {\n    it(`parses ${text}`, () => {\n      expect(parseTemplateVariables(text)).toEqual(variables);\n    });\n  });\n});\n\ndescribe('replaceTemplateVariable()', () => {\n  const tests = [\n    {\n      text: 'hello $var1',\n      varName: 'var1',\n      value: 'world',\n      expected: 'hello world',\n    },\n    {\n      text: 'hello $var1 $var1',\n      varName: 'var1',\n      value: 'world',\n      expected: 'hello world world',\n    },\n    {\n      text: 'hello $var1',\n      varName: 'var1',\n      value: ['world', 'w'],\n      expected: 'hello (world|w)',\n    },\n    {\n      text: 'hello $var1 $var1',\n      varName: 'var1',\n      value: ['world', 'w'],\n      expected: 'hello (world|w) (world|w)',\n    },\n  ];\n\n  tests.forEach(({ text, value, varName, expected }) => {\n    it(`replaces ${text} ${value}`, () => {\n      expect(replaceTemplateVariable(text, varName, value)).toEqual(expected);\n    });\n  });\n});\n\ndescribe('replaceTemplateVariables()', () => {\n  const tests = [\n    {\n      text: 'hello $var1 $var2',\n      state: {\n        var1: { value: 'world', loading: false },\n        var2: { value: 'world', loading: false },\n      },\n      expected: 'hello world world',\n    },\n    {\n      text: 'hello $var1 $var2',\n      state: {\n        var1: { value: 'world', loading: false },\n        var2: { value: ['a', 'b'], loading: false },\n      },\n      expected: 'hello world (a|b)',\n    },\n  ];\n\n  tests.forEach(({ text, state, expected }) => {\n    it(`replaces ${text} ${JSON.stringify(state)}`, () => {\n      expect(replaceTemplateVariables(text, state)).toEqual(expected);\n    });\n  });\n});\n\ndescribe('formatSeriesName', () => {\n  it('should resolve label name tokens to label values from query response', () => {\n    // example from query: node_load15{instance=~\\\"(demo.do.prometheus.io:9100)\\\",job='$job'}\n    const inputFormat = 'Test {{job}} {{instance}}';\n\n    const metric = {\n      __name__: 'node_load15',\n      env: 'demo',\n      instance: 'demo.do.prometheus.io:9100',\n      job: 'node',\n    };\n\n    const output = 'Test node demo.do.prometheus.io:9100';\n\n    expect(formatSeriesName(inputFormat, metric)).toEqual(output);\n  });\n});\n"],"names":["parseTemplateVariables","replaceTemplateVariable","replaceTemplateVariables","formatSeriesName","describe","tests","text","variables","forEach","it","expect","toEqual","varName","value","expected","state","var1","loading","var2","JSON","stringify","inputFormat","metric","__name__","env","instance","job","output"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PrometheusTimeSeriesQuery.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,qBAAqB,CAAC,6BAA6B,CAO1F,CAAC"}
+{"version":3,"file":"PrometheusTimeSeriesQuery.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAIlE,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,qBAAqB,CAAC,6BAA6B,CAY1F,CAAC"}

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

@@ -10,6 +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.
+import { parseTemplateVariables } from '../../model';
 import { getTimeSeriesData } from './get-time-series-data';
 import { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEditor';
 /**
@@ -20,7 +21,12 @@ import { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEdit
     createInitialOptions: ()=>({
             query: '',
             datasource: undefined
-        })
+        }),
+    dependsOn: (spec)=>{
+        return {
+            variables: parseTemplateVariables(spec.query)
+        };
+    }
 };
 
 //# sourceMappingURL=PrometheusTimeSeriesQuery.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.ts"],"sourcesContent":["// Copyright 2022 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 { TimeSeriesQueryPlugin } from '@perses-dev/plugin-system';\nimport { getTimeSeriesData } from './get-time-series-data';\nimport { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEditor';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\n/**\n * The core Prometheus TimeSeriesQuery plugin for Perses.\n */\nexport const PrometheusTimeSeriesQuery: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec> = {\n  getTimeSeriesData,\n  OptionsEditorComponent: PrometheusTimeSeriesQueryEditor,\n  createInitialOptions: () => ({\n    query: '',\n    datasource: undefined,\n  }),\n};\n"],"names":["getTimeSeriesData","PrometheusTimeSeriesQueryEditor","PrometheusTimeSeriesQuery","OptionsEditorComponent","createInitialOptions","query","datasource","undefined"],"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;AAGjC,SAASA,iBAAiB,QAAQ,wBAAwB,CAAC;AAC3D,SAASC,+BAA+B,QAAQ,mCAAmC,CAAC;AAGpF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,GAAyD;IAC7FF,iBAAiB;IACjBG,sBAAsB,EAAEF,+BAA+B;IACvDG,oBAAoB,EAAE,IAAO,CAAA;YAC3BC,KAAK,EAAE,EAAE;YACTC,UAAU,EAAEC,SAAS;SACtB,CAAA,AAAC;CACH,CAAC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.ts"],"sourcesContent":["// Copyright 2022 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 { TimeSeriesQueryPlugin } from '@perses-dev/plugin-system';\nimport { parseTemplateVariables } from '../../model';\nimport { getTimeSeriesData } from './get-time-series-data';\nimport { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEditor';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\n/**\n * The core Prometheus TimeSeriesQuery plugin for Perses.\n */\nexport const PrometheusTimeSeriesQuery: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec> = {\n  getTimeSeriesData,\n  OptionsEditorComponent: PrometheusTimeSeriesQueryEditor,\n  createInitialOptions: () => ({\n    query: '',\n    datasource: undefined,\n  }),\n  dependsOn: (spec) => {\n    return {\n      variables: parseTemplateVariables(spec.query),\n    };\n  },\n};\n"],"names":["parseTemplateVariables","getTimeSeriesData","PrometheusTimeSeriesQueryEditor","PrometheusTimeSeriesQuery","OptionsEditorComponent","createInitialOptions","query","datasource","undefined","dependsOn","spec","variables"],"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;AAGjC,SAASA,sBAAsB,QAAQ,aAAa,CAAC;AACrD,SAASC,iBAAiB,QAAQ,wBAAwB,CAAC;AAC3D,SAASC,+BAA+B,QAAQ,mCAAmC,CAAC;AAGpF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,GAAyD;IAC7FF,iBAAiB;IACjBG,sBAAsB,EAAEF,+BAA+B;IACvDG,oBAAoB,EAAE,IAAO,CAAA;YAC3BC,KAAK,EAAE,EAAE;YACTC,UAAU,EAAEC,SAAS;SACtB,CAAA,AAAC;IACFC,SAAS,EAAE,CAACC,IAAI,GAAK;QACnB,OAAO;YACLC,SAAS,EAAEX,sBAAsB,CAACU,IAAI,CAACJ,KAAK,CAAC;SAC9C,CAAC;IACJ,CAAC;CACF,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":";AAiBA,OAAO,EAAE,oCAAoC,EAAiB,MAAM,sBAAsB,CAAC;AAE3F;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,eA6C1F"}
+{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,oCAAoC,EAAiC,MAAM,sBAAsB,CAAC;AAE3G;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,eAsD1F"}

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

@@ -15,13 +15,14 @@ import { produce } from 'immer';
 import { Box, TextField, FormControl, InputLabel } from '@mui/material';
 import { DatasourceSelect } from '@perses-dev/plugin-system';
 import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector } from '../../model';
-import { useQueryState } from './query-editor-model';
+import { useQueryState, useFormatState } from './query-editor-model';
 /**
  * The options editor component for editing a PrometheusTimeSeriesQuery's spec.
  */ export function PrometheusTimeSeriesQueryEditor(props) {
     const { onChange , value  } = props;
     const { datasource  } = value;
     const { query , handleQueryChange , handleQueryBlur  } = useQueryState(props);
+    const { format , handleFormatChange , handleFormatBlur  } = useFormatState(props);
     const handleDatasourceChange = (next)=>{
         if (isPrometheusDatasourceSelector(next)) {
             onChange(produce(value, (draft)=>{
@@ -43,6 +44,14 @@ import { useQueryState } from './query-editor-model';
                 onBlur: handleQueryBlur,
                 margin: "dense"
             }),
+            /*#__PURE__*/ _jsx(TextField, {
+                fullWidth: true,
+                label: "Series Name Format",
+                value: format !== null && format !== void 0 ? format : '',
+                onChange: handleFormatChange,
+                onBlur: handleFormatBlur,
+                margin: "dense"
+            }),
             /*#__PURE__*/ _jsxs(FormControl, {
                 margin: "dense",
                 fullWidth: false,

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 2022 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 { Box, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect, DatasourceSelectProps } from '@perses-dev/plugin-system';\nimport { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector } from '../../model';\nimport { PrometheusTimeSeriesQueryEditorProps, useQueryState } 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\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(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    <Box>\n      <TextField\n        fullWidth\n        label=\"Query\"\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n        margin=\"dense\"\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={datasource ?? DEFAULT_PROM}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":["produce","Box","TextField","FormControl","InputLabel","DatasourceSelect","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","useQueryState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","query","handleQueryChange","handleQueryBlur","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","fullWidth","label","onBlur","margin","id","datasourcePluginKind","labelId"],"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,GAAG,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACxE,SAASC,gBAAgB,QAA+B,2BAA2B,CAAC;AACpF,SAASC,YAAY,EAAEC,qBAAqB,EAAEC,8BAA8B,QAAQ,aAAa,CAAC;AAClG,SAA+CC,aAAa,QAAQ,sBAAsB,CAAC;AAE3F;;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;IAE7B,MAAM,EAAEE,KAAK,CAAA,EAAEC,iBAAiB,CAAA,EAAEC,eAAe,CAAA,EAAE,GAAGR,aAAa,CAACE,KAAK,CAAC,AAAC;IAE3E,MAAMO,sBAAsB,GAAsC,CAACC,IAAI,GAAK;QAC1E,IAAIX,8BAA8B,CAACW,IAAI,CAAC,EAAE;YACxCP,QAAQ,CACNZ,OAAO,CAACa,KAAK,EAAE,CAACO,KAAK,GAAK;gBACxB,sFAAsF;gBACtF,MAAMC,cAAc,GAAGd,qBAAqB,CAACY,IAAI,CAAC,GAAGG,SAAS,GAAGH,IAAI,AAAC;gBACtEC,KAAK,CAACN,UAAU,GAAGO,cAAc,CAAC;YACpC,CAAC,CAAC,CACH,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,IAAIE,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC,AAAC;IAEF,qBACE,MAACtB,GAAG;;0BACF,KAACC,SAAS;gBACRsB,SAAS;gBACTC,KAAK,EAAC,OAAO;gBACbZ,KAAK,EAAEE,KAAK;gBACZH,QAAQ,EAAEI,iBAAiB;gBAC3BU,MAAM,EAAET,eAAe;gBACvBU,MAAM,EAAC,OAAO;cACd;0BACF,MAACxB,WAAW;gBAACwB,MAAM,EAAC,OAAO;gBAACH,SAAS,EAAE,KAAK;;kCAG1C,KAACpB,UAAU;wBAACwB,EAAE,EAAC,uBAAuB;kCAAC,uBAAqB;sBAAa;kCACzE,KAACvB,gBAAgB;wBACfwB,oBAAoB,EAAC,sBAAsB;wBAC3ChB,KAAK,EAAEC,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIR,YAAY;wBACjCM,QAAQ,EAAEM,sBAAsB;wBAChCY,OAAO,EAAC,uBAAuB;wBAC/BL,KAAK,EAAC,uBAAuB;sBAC7B;;cACU;;MACV,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2022 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 { Box, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect, DatasourceSelectProps } from '@perses-dev/plugin-system';\nimport { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector } from '../../model';\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\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    <Box>\n      <TextField\n        fullWidth\n        label=\"Query\"\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n        margin=\"dense\"\n      />\n      <TextField\n        fullWidth\n        label=\"Series Name Format\"\n        value={format ?? ''}\n        onChange={handleFormatChange}\n        onBlur={handleFormatBlur}\n        margin=\"dense\"\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={datasource ?? DEFAULT_PROM}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":["produce","Box","TextField","FormControl","InputLabel","DatasourceSelect","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","useQueryState","useFormatState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","query","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","fullWidth","label","onBlur","margin","id","datasourcePluginKind","labelId"],"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,GAAG,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACxE,SAASC,gBAAgB,QAA+B,2BAA2B,CAAC;AACpF,SAASC,YAAY,EAAEC,qBAAqB,EAAEC,8BAA8B,QAAQ,aAAa,CAAC;AAClG,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;IAE7B,MAAM,EAAEE,KAAK,CAAA,EAAEC,iBAAiB,CAAA,EAAEC,eAAe,CAAA,EAAE,GAAGT,aAAa,CAACG,KAAK,CAAC,AAAC;IAC3E,MAAM,EAAEO,MAAM,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGX,cAAc,CAACE,KAAK,CAAC,AAAC;IAE/E,MAAMU,sBAAsB,GAAsC,CAACC,IAAI,GAAK;QAC1E,IAAIf,8BAA8B,CAACe,IAAI,CAAC,EAAE;YACxCV,QAAQ,CACNb,OAAO,CAACc,KAAK,EAAE,CAACU,KAAK,GAAK;gBACxB,sFAAsF;gBACtF,MAAMC,cAAc,GAAGlB,qBAAqB,CAACgB,IAAI,CAAC,GAAGG,SAAS,GAAGH,IAAI,AAAC;gBACtEC,KAAK,CAACT,UAAU,GAAGU,cAAc,CAAC;YACpC,CAAC,CAAC,CACH,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,IAAIE,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC,AAAC;IAEF,qBACE,MAAC1B,GAAG;;0BACF,KAACC,SAAS;gBACR0B,SAAS;gBACTC,KAAK,EAAC,OAAO;gBACbf,KAAK,EAAEE,KAAK;gBACZH,QAAQ,EAAEI,iBAAiB;gBAC3Ba,MAAM,EAAEZ,eAAe;gBACvBa,MAAM,EAAC,OAAO;cACd;0BACF,KAAC7B,SAAS;gBACR0B,SAAS;gBACTC,KAAK,EAAC,oBAAoB;gBAC1Bf,KAAK,EAAEK,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,EAAE;gBACnBN,QAAQ,EAAEO,kBAAkB;gBAC5BU,MAAM,EAAET,gBAAgB;gBACxBU,MAAM,EAAC,OAAO;cACd;0BACF,MAAC5B,WAAW;gBAAC4B,MAAM,EAAC,OAAO;gBAACH,SAAS,EAAE,KAAK;;kCAG1C,KAACxB,UAAU;wBAAC4B,EAAE,EAAC,uBAAuB;kCAAC,uBAAqB;sBAAa;kCACzE,KAAC3B,gBAAgB;wBACf4B,oBAAoB,EAAC,sBAAsB;wBAC3CnB,KAAK,EAAEC,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIT,YAAY;wBACjCO,QAAQ,EAAES,sBAAsB;wBAChCY,OAAO,EAAC,uBAAuB;wBAC/BL,KAAK,EAAC,uBAAuB;sBAC7B;;cACU;;MACV,CACN;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"get-time-series-data.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/get-time-series-data.ts"],"names":[],"mappings":"AAaA,OAAO,EAAkB,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAWlF,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC,mBAAmB,CA4DvG,CAAC"}
+{"version":3,"file":"get-time-series-data.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/get-time-series-data.ts"],"names":[],"mappings":"AAaA,OAAO,EAAkB,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAYlF,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC,mBAAmB,CAiEvG,CAAC"}

package/dist/plugins/prometheus-time-series-query/get-time-series-data.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { fromUnixTime } from 'date-fns';
-import { parseValueTuple, getDurationStringSeconds, getPrometheusTimeRange, getRangeStep, replaceTemplateVariables, DEFAULT_PROM } from '../../model';
+import { parseValueTuple, getDurationStringSeconds, getPrometheusTimeRange, getRangeStep, replaceTemplateVariables, DEFAULT_PROM, formatSeriesName } from '../../model';
 export const getTimeSeriesData = async (spec, context)=>{
     var ref;
     const minStep = getDurationStringSeconds(spec.min_step);
@@ -56,9 +56,13 @@ export const getTimeSeriesData = async (spec, context)=>{
             // overall query
             let name = Object.entries(metric).map(([labelName, labelValue])=>`${labelName}="${labelValue}"`).join(', ');
             if (name === '') name = query;
+            // query editor allows you to define an optional series_name_format
+            // property to customize legend and tooltip display
+            const formattedName = spec.series_name_format ? formatSeriesName(spec.series_name_format, metric) : name;
             return {
                 name,
-                values: values.map(parseValueTuple)
+                values: values.map(parseValueTuple),
+                formattedName
             };
         })
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/get-time-series-data.ts"],"sourcesContent":["// Copyright 2022 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 { TimeSeriesData, TimeSeriesQueryPlugin } from '@perses-dev/plugin-system';\nimport { fromUnixTime } from 'date-fns';\nimport {\n  parseValueTuple,\n  PrometheusClient,\n  getDurationStringSeconds,\n  getPrometheusTimeRange,\n  getRangeStep,\n  replaceTemplateVariables,\n  DEFAULT_PROM,\n} from '../../model';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport const getTimeSeriesData: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec>['getTimeSeriesData'] = async (\n  spec,\n  context\n) => {\n  const minStep = getDurationStringSeconds(spec.min_step);\n  const timeRange = getPrometheusTimeRange(context.timeRange);\n  const step = getRangeStep(timeRange, minStep, undefined, context.suggestedStepMs);\n\n  // Align the time range so that it's a multiple of the step\n  let { start, end } = timeRange;\n  const utcOffsetSec = new Date().getTimezoneOffset() * 60;\n\n  const alignedEnd = Math.floor((end + utcOffsetSec) / step) * step - utcOffsetSec;\n  const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;\n  start = alignedStart;\n  end = alignedEnd;\n\n  // Replace template variable placeholders in PromQL query\n  let query = spec.query.replace('$__rate_interval', `15s`);\n  query = replaceTemplateVariables(query, context.variableState);\n\n  // Get the datasource, using the default Prom Datasource if one isn't specified in the query\n  const client: PrometheusClient = await context.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n\n  // Make the request to Prom\n  const response = await client.rangeQuery({\n    query,\n    start,\n    end,\n    step,\n  });\n\n  // TODO: What about error responses from Prom that have a response body?\n  const result = response.data?.result ?? [];\n\n  // Transform response\n  const chartData: TimeSeriesData = {\n    // Return the time range and step we actually used for the query\n    timeRange: { start: fromUnixTime(start), end: fromUnixTime(end) },\n    stepMs: step * 1000,\n\n    // TODO: Maybe do a proper Iterable implementation that defers some of this\n    // processing until its needed\n    series: result.map((value) => {\n      const { metric, values } = value;\n\n      // Name the series after the metric labels or if no metric, just use the\n      // overall query\n      let name = Object.entries(metric)\n        .map(([labelName, labelValue]) => `${labelName}=\"${labelValue}\"`)\n        .join(', ');\n      if (name === '') name = query;\n\n      return {\n        name,\n        values: values.map(parseValueTuple),\n      };\n    }),\n  };\n  return chartData;\n};\n"],"names":["fromUnixTime","parseValueTuple","getDurationStringSeconds","getPrometheusTimeRange","getRangeStep","replaceTemplateVariables","DEFAULT_PROM","getTimeSeriesData","spec","context","response","minStep","min_step","timeRange","step","undefined","suggestedStepMs","start","end","utcOffsetSec","Date","getTimezoneOffset","alignedEnd","Math","floor","alignedStart","query","replace","variableState","client","datasourceStore","getDatasourceClient","datasource","rangeQuery","result","data","chartData","stepMs","series","map","value","metric","values","name","Object","entries","labelName","labelValue","join"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/get-time-series-data.ts"],"sourcesContent":["// Copyright 2022 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 { TimeSeriesData, TimeSeriesQueryPlugin } from '@perses-dev/plugin-system';\nimport { fromUnixTime } from 'date-fns';\nimport {\n  parseValueTuple,\n  PrometheusClient,\n  getDurationStringSeconds,\n  getPrometheusTimeRange,\n  getRangeStep,\n  replaceTemplateVariables,\n  DEFAULT_PROM,\n  formatSeriesName,\n} from '../../model';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport const getTimeSeriesData: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec>['getTimeSeriesData'] = async (\n  spec,\n  context\n) => {\n  const minStep = getDurationStringSeconds(spec.min_step);\n  const timeRange = getPrometheusTimeRange(context.timeRange);\n  const step = getRangeStep(timeRange, minStep, undefined, context.suggestedStepMs);\n\n  // Align the time range so that it's a multiple of the step\n  let { start, end } = timeRange;\n  const utcOffsetSec = new Date().getTimezoneOffset() * 60;\n\n  const alignedEnd = Math.floor((end + utcOffsetSec) / step) * step - utcOffsetSec;\n  const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;\n  start = alignedStart;\n  end = alignedEnd;\n\n  // Replace template variable placeholders in PromQL query\n  let query = spec.query.replace('$__rate_interval', `15s`);\n  query = replaceTemplateVariables(query, context.variableState);\n\n  // Get the datasource, using the default Prom Datasource if one isn't specified in the query\n  const client: PrometheusClient = await context.datasourceStore.getDatasourceClient(spec.datasource ?? DEFAULT_PROM);\n\n  // Make the request to Prom\n  const response = await client.rangeQuery({\n    query,\n    start,\n    end,\n    step,\n  });\n\n  // TODO: What about error responses from Prom that have a response body?\n  const result = response.data?.result ?? [];\n\n  // Transform response\n  const chartData: TimeSeriesData = {\n    // Return the time range and step we actually used for the query\n    timeRange: { start: fromUnixTime(start), end: fromUnixTime(end) },\n    stepMs: step * 1000,\n\n    // TODO: Maybe do a proper Iterable implementation that defers some of this\n    // processing until its needed\n    series: result.map((value) => {\n      const { metric, values } = value;\n\n      // Name the series after the metric labels or if no metric, just use the\n      // overall query\n      let name = Object.entries(metric)\n        .map(([labelName, labelValue]) => `${labelName}=\"${labelValue}\"`)\n        .join(', ');\n      if (name === '') name = query;\n\n      // query editor allows you to define an optional series_name_format\n      // property to customize legend and tooltip display\n      const formattedName = spec.series_name_format ? formatSeriesName(spec.series_name_format, metric) : name;\n\n      return {\n        name,\n        values: values.map(parseValueTuple),\n        formattedName,\n      };\n    }),\n  };\n  return chartData;\n};\n"],"names":["fromUnixTime","parseValueTuple","getDurationStringSeconds","getPrometheusTimeRange","getRangeStep","replaceTemplateVariables","DEFAULT_PROM","formatSeriesName","getTimeSeriesData","spec","context","response","minStep","min_step","timeRange","step","undefined","suggestedStepMs","start","end","utcOffsetSec","Date","getTimezoneOffset","alignedEnd","Math","floor","alignedStart","query","replace","variableState","client","datasourceStore","getDatasourceClient","datasource","rangeQuery","result","data","chartData","stepMs","series","map","value","metric","values","name","Object","entries","labelName","labelValue","join","formattedName","series_name_format"],"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;AAGjC,SAASA,YAAY,QAAQ,UAAU,CAAC;AACxC,SACEC,eAAe,EAEfC,wBAAwB,EACxBC,sBAAsB,EACtBC,YAAY,EACZC,wBAAwB,EACxBC,YAAY,EACZC,gBAAgB,QACX,aAAa,CAAC;AAGrB,OAAO,MAAMC,iBAAiB,GAA8E,OAC1GC,IAAI,EACJC,OAAO,GACJ;QA8BYC,GAAa;IA7B5B,MAAMC,OAAO,GAAGV,wBAAwB,CAACO,IAAI,CAACI,QAAQ,CAAC,AAAC;IACxD,MAAMC,SAAS,GAAGX,sBAAsB,CAACO,OAAO,CAACI,SAAS,CAAC,AAAC;IAC5D,MAAMC,IAAI,GAAGX,YAAY,CAACU,SAAS,EAAEF,OAAO,EAAEI,SAAS,EAAEN,OAAO,CAACO,eAAe,CAAC,AAAC;IAElF,2DAA2D;IAC3D,IAAI,EAAEC,KAAK,CAAA,EAAEC,GAAG,CAAA,EAAE,GAAGL,SAAS,AAAC;IAC/B,MAAMM,YAAY,GAAG,IAAIC,IAAI,EAAE,CAACC,iBAAiB,EAAE,GAAG,EAAE,AAAC;IAEzD,MAAMC,UAAU,GAAGC,IAAI,CAACC,KAAK,CAAC,AAACN,CAAAA,GAAG,GAAGC,YAAY,CAAA,GAAIL,IAAI,CAAC,GAAGA,IAAI,GAAGK,YAAY,AAAC;IACjF,MAAMM,YAAY,GAAGF,IAAI,CAACC,KAAK,CAAC,AAACP,CAAAA,KAAK,GAAGE,YAAY,CAAA,GAAIL,IAAI,CAAC,GAAGA,IAAI,GAAGK,YAAY,AAAC;IACrFF,KAAK,GAAGQ,YAAY,CAAC;IACrBP,GAAG,GAAGI,UAAU,CAAC;IAEjB,yDAAyD;IACzD,IAAII,KAAK,GAAGlB,IAAI,CAACkB,KAAK,CAACC,OAAO,CAAC,kBAAkB,EAAE,CAAC,GAAG,CAAC,CAAC,AAAC;IAC1DD,KAAK,GAAGtB,wBAAwB,CAACsB,KAAK,EAAEjB,OAAO,CAACmB,aAAa,CAAC,CAAC;QAGoBpB,WAAe;IADlG,4FAA4F;IAC5F,MAAMqB,MAAM,GAAqB,MAAMpB,OAAO,CAACqB,eAAe,CAACC,mBAAmB,CAACvB,CAAAA,WAAe,GAAfA,IAAI,CAACwB,UAAU,cAAfxB,WAAe,cAAfA,WAAe,GAAIH,YAAY,CAAC,AAAC;IAEpH,2BAA2B;IAC3B,MAAMK,QAAQ,GAAG,MAAMmB,MAAM,CAACI,UAAU,CAAC;QACvCP,KAAK;QACLT,KAAK;QACLC,GAAG;QACHJ,IAAI;KACL,CAAC,AAAC;QAGYJ,IAAqB;IADpC,wEAAwE;IACxE,MAAMwB,MAAM,GAAGxB,CAAAA,IAAqB,GAArBA,CAAAA,GAAa,GAAbA,QAAQ,CAACyB,IAAI,cAAbzB,GAAa,WAAQ,GAArBA,KAAAA,CAAqB,GAArBA,GAAa,CAAEwB,MAAM,cAArBxB,IAAqB,cAArBA,IAAqB,GAAI,EAAE,AAAC;IAE3C,qBAAqB;IACrB,MAAM0B,SAAS,GAAmB;QAChC,gEAAgE;QAChEvB,SAAS,EAAE;YAAEI,KAAK,EAAElB,YAAY,CAACkB,KAAK,CAAC;YAAEC,GAAG,EAAEnB,YAAY,CAACmB,GAAG,CAAC;SAAE;QACjEmB,MAAM,EAAEvB,IAAI,GAAG,IAAI;QAEnB,2EAA2E;QAC3E,8BAA8B;QAC9BwB,MAAM,EAAEJ,MAAM,CAACK,GAAG,CAAC,CAACC,KAAK,GAAK;YAC5B,MAAM,EAAEC,MAAM,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGF,KAAK,AAAC;YAEjC,wEAAwE;YACxE,gBAAgB;YAChB,IAAIG,IAAI,GAAGC,MAAM,CAACC,OAAO,CAACJ,MAAM,CAAC,CAC9BF,GAAG,CAAC,CAAC,CAACO,SAAS,EAAEC,UAAU,CAAC,GAAK,CAAC,EAAED,SAAS,CAAC,EAAE,EAAEC,UAAU,CAAC,CAAC,CAAC,CAAC,CAChEC,IAAI,CAAC,IAAI,CAAC,AAAC;YACd,IAAIL,IAAI,KAAK,EAAE,EAAEA,IAAI,GAAGjB,KAAK,CAAC;YAE9B,mEAAmE;YACnE,mDAAmD;YACnD,MAAMuB,aAAa,GAAGzC,IAAI,CAAC0C,kBAAkB,GAAG5C,gBAAgB,CAACE,IAAI,CAAC0C,kBAAkB,EAAET,MAAM,CAAC,GAAGE,IAAI,AAAC;YAEzG,OAAO;gBACLA,IAAI;gBACJD,MAAM,EAAEA,MAAM,CAACH,GAAG,CAACvC,eAAe,CAAC;gBACnCiD,aAAa;aACd,CAAC;QACJ,CAAC,CAAC;KACH,AAAC;IACF,OAAOb,SAAS,CAAC;AACnB,CAAC,CAAC"}

package/dist/plugins/prometheus-time-series-query/query-editor-model.d.ts

@@ -13,4 +13,12 @@ export declare function useQueryState(props: PrometheusTimeSeriesQueryEditorProp
     handleQueryChange: import("react").ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
     handleQueryBlur: import("react").FocusEventHandler<HTMLTextAreaElement | HTMLInputElement>;
 };
+/**
+ * Hook to manage `series_name_format` state to ensure panel preview does not rerender until text input is blurred
+ */
+export declare function useFormatState(props: PrometheusTimeSeriesQueryEditorProps): {
+    format: string | undefined;
+    handleFormatChange: import("react").ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    handleFormatBlur: import("react").FocusEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+};
 //# sourceMappingURL=query-editor-model.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,oBAAY,oCAAoC,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;AAErG;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,oCAAoC;;;;EA+BxE"}
+{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,oBAAY,oCAAoC,GAAG,kBAAkB,CAAC,6BAA6B,CAAC,CAAC;AAErG;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,oCAAoC;;;;EA+BxE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,oCAAoC;;;;EA2BzE"}

package/dist/plugins/prometheus-time-series-query/query-editor-model.js

@@ -46,5 +46,33 @@ import { produce } from 'immer';
         handleQueryBlur
     };
 }
+/**
+ * Hook to manage `series_name_format` state to ensure panel preview does not rerender until text input is blurred
+ */ export function useFormatState(props) {
+    const { onChange , value  } = props;
+    // TODO: reusable hook or helper util instead of duplicating from useQueryState
+    const [format, setFormat] = useState(value.series_name_format);
+    const [lastSyncedFormat, setLastSyncedFormat] = useState(value.series_name_format);
+    if (value.series_name_format !== lastSyncedFormat) {
+        setFormat(value.series_name_format);
+        setLastSyncedFormat(value.series_name_format);
+    }
+    // Update our local state as the user types
+    const handleFormatChange = (e)=>{
+        setFormat(e.target.value);
+    };
+    // Propagate changes to the panel preview component when series_name_format TextField is blurred
+    const handleFormatBlur = ()=>{
+        setLastSyncedFormat(format);
+        onChange(produce(value, (draft)=>{
+            draft.series_name_format = format;
+        }));
+    };
+    return {
+        format,
+        handleFormatChange,
+        handleFormatBlur
+    };
+}
 
 //# sourceMappingURL=query-editor-model.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { TextFieldProps } from '@mui/material';\nimport { produce } from 'immer';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport type PrometheusTimeSeriesQueryEditorProps = OptionsEditorProps<PrometheusTimeSeriesQuerySpec>;\n\n/**\n * A hook for managing the `query` state in PrometheusTimeSeriesQuerySpec. Returns the `query` value, along with\n * `onChange` and `onBlur` event handlers to the input. Keeps a local copy of the user's input and only syncs those\n * changes with the overall spec value once the input is blurred to prevent re-running queries in the panel's preview\n * every time the user types.\n */\nexport function useQueryState(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n\n  // Local copy of the query's value\n  const [query, setQuery] = useState(value.query);\n\n  // This is basically \"getDerivedStateFromProps\" to make sure if spec's value changes external to this component,\n  // we render with the latest value\n  const [lastSyncedQuery, setLastSyncedQuery] = useState(value.query);\n  if (value.query !== lastSyncedQuery) {\n    setQuery(value.query);\n    setLastSyncedQuery(value.query);\n  }\n\n  // Update our local state's copy as the user types\n  const handleQueryChange: TextFieldProps['onChange'] = (e) => {\n    setQuery(e.target.value);\n  };\n\n  // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the\n  // PanelPreview\n  const handleQueryBlur: TextFieldProps['onBlur'] = () => {\n    setLastSyncedQuery(query);\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  return { query, handleQueryChange, handleQueryBlur };\n}\n"],"names":["useState","produce","useQueryState","props","onChange","value","query","setQuery","lastSyncedQuery","setLastSyncedQuery","handleQueryChange","e","target","handleQueryBlur","draft"],"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,SAASA,QAAQ,QAAQ,OAAO,CAAC;AAEjC,SAASC,OAAO,QAAQ,OAAO,CAAC;AAMhC;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAACC,KAA2C,EAAE;IACzE,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAElC,kCAAkC;IAClC,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAACK,KAAK,CAACC,KAAK,CAAC,AAAC;IAEhD,gHAAgH;IAChH,kCAAkC;IAClC,MAAM,CAACE,eAAe,EAAEC,kBAAkB,CAAC,GAAGT,QAAQ,CAACK,KAAK,CAACC,KAAK,CAAC,AAAC;IACpE,IAAID,KAAK,CAACC,KAAK,KAAKE,eAAe,EAAE;QACnCD,QAAQ,CAACF,KAAK,CAACC,KAAK,CAAC,CAAC;QACtBG,kBAAkB,CAACJ,KAAK,CAACC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,kDAAkD;IAClD,MAAMI,iBAAiB,GAA+B,CAACC,CAAC,GAAK;QAC3DJ,QAAQ,CAACI,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAC;IAC3B,CAAC,AAAC;IAEF,iHAAiH;IACjH,eAAe;IACf,MAAMQ,eAAe,GAA6B,IAAM;QACtDJ,kBAAkB,CAACH,KAAK,CAAC,CAAC;QAC1BF,QAAQ,CACNH,OAAO,CAACI,KAAK,EAAE,CAACS,KAAK,GAAK;YACxBA,KAAK,CAACR,KAAK,GAAGA,KAAK,CAAC;QACtB,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,AAAC;IAEF,OAAO;QAAEA,KAAK;QAAEI,iBAAiB;QAAEG,eAAe;KAAE,CAAC;AACvD,CAAC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"sourcesContent":["// Copyright 2022 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 { useState } from 'react';\nimport { TextFieldProps } from '@mui/material';\nimport { produce } from 'immer';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport type PrometheusTimeSeriesQueryEditorProps = OptionsEditorProps<PrometheusTimeSeriesQuerySpec>;\n\n/**\n * A hook for managing the `query` state in PrometheusTimeSeriesQuerySpec. Returns the `query` value, along with\n * `onChange` and `onBlur` event handlers to the input. Keeps a local copy of the user's input and only syncs those\n * changes with the overall spec value once the input is blurred to prevent re-running queries in the panel's preview\n * every time the user types.\n */\nexport function useQueryState(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n\n  // Local copy of the query's value\n  const [query, setQuery] = useState(value.query);\n\n  // This is basically \"getDerivedStateFromProps\" to make sure if spec's value changes external to this component,\n  // we render with the latest value\n  const [lastSyncedQuery, setLastSyncedQuery] = useState(value.query);\n  if (value.query !== lastSyncedQuery) {\n    setQuery(value.query);\n    setLastSyncedQuery(value.query);\n  }\n\n  // Update our local state's copy as the user types\n  const handleQueryChange: TextFieldProps['onChange'] = (e) => {\n    setQuery(e.target.value);\n  };\n\n  // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the\n  // PanelPreview\n  const handleQueryBlur: TextFieldProps['onBlur'] = () => {\n    setLastSyncedQuery(query);\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  return { query, handleQueryChange, handleQueryBlur };\n}\n\n/**\n * Hook to manage `series_name_format` state to ensure panel preview does not rerender until text input is blurred\n */\nexport function useFormatState(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n\n  // TODO: reusable hook or helper util instead of duplicating from useQueryState\n  const [format, setFormat] = useState(value.series_name_format);\n  const [lastSyncedFormat, setLastSyncedFormat] = useState(value.series_name_format);\n  if (value.series_name_format !== lastSyncedFormat) {\n    setFormat(value.series_name_format);\n    setLastSyncedFormat(value.series_name_format);\n  }\n\n  // Update our local state as the user types\n  const handleFormatChange: TextFieldProps['onChange'] = (e) => {\n    setFormat(e.target.value);\n  };\n\n  // Propagate changes to the panel preview component when series_name_format TextField is blurred\n  const handleFormatBlur: TextFieldProps['onBlur'] = () => {\n    setLastSyncedFormat(format);\n    onChange(\n      produce(value, (draft) => {\n        draft.series_name_format = format;\n      })\n    );\n  };\n\n  return { format, handleFormatChange, handleFormatBlur };\n}\n"],"names":["useState","produce","useQueryState","props","onChange","value","query","setQuery","lastSyncedQuery","setLastSyncedQuery","handleQueryChange","e","target","handleQueryBlur","draft","useFormatState","format","setFormat","series_name_format","lastSyncedFormat","setLastSyncedFormat","handleFormatChange","handleFormatBlur"],"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,SAASA,QAAQ,QAAQ,OAAO,CAAC;AAEjC,SAASC,OAAO,QAAQ,OAAO,CAAC;AAMhC;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAACC,KAA2C,EAAE;IACzE,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAElC,kCAAkC;IAClC,MAAM,CAACG,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAACK,KAAK,CAACC,KAAK,CAAC,AAAC;IAEhD,gHAAgH;IAChH,kCAAkC;IAClC,MAAM,CAACE,eAAe,EAAEC,kBAAkB,CAAC,GAAGT,QAAQ,CAACK,KAAK,CAACC,KAAK,CAAC,AAAC;IACpE,IAAID,KAAK,CAACC,KAAK,KAAKE,eAAe,EAAE;QACnCD,QAAQ,CAACF,KAAK,CAACC,KAAK,CAAC,CAAC;QACtBG,kBAAkB,CAACJ,KAAK,CAACC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,kDAAkD;IAClD,MAAMI,iBAAiB,GAA+B,CAACC,CAAC,GAAK;QAC3DJ,QAAQ,CAACI,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAC;IAC3B,CAAC,AAAC;IAEF,iHAAiH;IACjH,eAAe;IACf,MAAMQ,eAAe,GAA6B,IAAM;QACtDJ,kBAAkB,CAACH,KAAK,CAAC,CAAC;QAC1BF,QAAQ,CACNH,OAAO,CAACI,KAAK,EAAE,CAACS,KAAK,GAAK;YACxBA,KAAK,CAACR,KAAK,GAAGA,KAAK,CAAC;QACtB,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,AAAC;IAEF,OAAO;QAAEA,KAAK;QAAEI,iBAAiB;QAAEG,eAAe;KAAE,CAAC;AACvD,CAAC;AAED;;CAEC,GACD,OAAO,SAASE,cAAc,CAACZ,KAA2C,EAAE;IAC1E,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAElC,+EAA+E;IAC/E,MAAM,CAACa,MAAM,EAAEC,SAAS,CAAC,GAAGjB,QAAQ,CAACK,KAAK,CAACa,kBAAkB,CAAC,AAAC;IAC/D,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGpB,QAAQ,CAACK,KAAK,CAACa,kBAAkB,CAAC,AAAC;IACnF,IAAIb,KAAK,CAACa,kBAAkB,KAAKC,gBAAgB,EAAE;QACjDF,SAAS,CAACZ,KAAK,CAACa,kBAAkB,CAAC,CAAC;QACpCE,mBAAmB,CAACf,KAAK,CAACa,kBAAkB,CAAC,CAAC;IAChD,CAAC;IAED,2CAA2C;IAC3C,MAAMG,kBAAkB,GAA+B,CAACV,CAAC,GAAK;QAC5DM,SAAS,CAACN,CAAC,CAACC,MAAM,CAACP,KAAK,CAAC,CAAC;IAC5B,CAAC,AAAC;IAEF,gGAAgG;IAChG,MAAMiB,gBAAgB,GAA6B,IAAM;QACvDF,mBAAmB,CAACJ,MAAM,CAAC,CAAC;QAC5BZ,QAAQ,CACNH,OAAO,CAACI,KAAK,EAAE,CAACS,KAAK,GAAK;YACxBA,KAAK,CAACI,kBAAkB,GAAGF,MAAM,CAAC;QACpC,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,AAAC;IAEF,OAAO;QAAEA,MAAM;QAAEK,kBAAkB;QAAEC,gBAAgB;KAAE,CAAC;AAC1D,CAAC"}

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

@@ -5,6 +5,7 @@ import { PrometheusDatasourceSelector, TemplateString } from '../../model';
  */
 export interface PrometheusTimeSeriesQuerySpec {
     query: TemplateString;
+    series_name_format?: string;
     min_step?: DurationString;
     resolution?: number;
     datasource?: PrometheusDatasourceSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"time-series-query-model.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/time-series-query-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,4BAA4B,CAAC;CAC3C"}
+{"version":3,"file":"time-series-query-model.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/time-series-query-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,cAAc,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,4BAA4B,CAAC;CAC3C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/time-series-query-model.ts"],"sourcesContent":["// Copyright 2022 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 { DurationString } from '@perses-dev/core';\nimport { PrometheusDatasourceSelector, TemplateString } from '../../model';\n\n/**\n * The spec/options for the PrometheusTimeSeriesQuery plugin.\n */\nexport interface PrometheusTimeSeriesQuerySpec {\n  query: TemplateString;\n  min_step?: DurationString;\n  resolution?: number;\n  datasource?: PrometheusDatasourceSelector;\n}\n"],"names":[],"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,WAWC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/time-series-query-model.ts"],"sourcesContent":["// Copyright 2022 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 { DurationString } from '@perses-dev/core';\nimport { PrometheusDatasourceSelector, TemplateString } from '../../model';\n\n/**\n * The spec/options for the PrometheusTimeSeriesQuery plugin.\n */\nexport interface PrometheusTimeSeriesQuerySpec {\n  query: TemplateString;\n  series_name_format?: string;\n  min_step?: DurationString;\n  resolution?: number;\n  datasource?: PrometheusDatasourceSelector;\n}\n"],"names":[],"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,WAYC"}

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;AAS/F,OAAO,EAAE,mCAAmC,EAAE,oCAAoC,EAAE,MAAM,SAAS,CAAC;AAgDpG,eAAO,MAAM,4BAA4B,EAAE,cAAc,CAAC,mCAAmC,CAc5F,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,cAAc,CAAC,oCAAoC,CAwB9F,CAAC"}
+{"version":3,"file":"prometheus-variables.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-variables.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAsC,MAAM,2BAA2B,CAAC;AAS/F,OAAO,EAAE,mCAAmC,EAAE,oCAAoC,EAAE,MAAM,SAAS,CAAC;AAgDpG,eAAO,MAAM,4BAA4B,EAAE,cAAc,CAAC,mCAAmC,CAgB5F,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,cAAc,CAAC,oCAAoC,CAwB9F,CAAC"}

package/dist/plugins/prometheus-variables.js

@@ -80,7 +80,11 @@ export const PrometheusLabelNamesVariable = {
             data: stringArrayToVariableOptions(options)
         };
     },
-    dependsOn: ()=>[],
+    dependsOn: ()=>{
+        return {
+            variables: []
+        };
+    },
     OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
     createInitialOptions: ()=>({})
 };
@@ -102,7 +106,9 @@ export const PrometheusLabelValuesVariable = {
     },
     dependsOn: (spec)=>{
         var ref;
-        return ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>parseTemplateVariables(m)).flat()) || [];
+        return {
+            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>parseTemplateVariables(m)).flat()) || []
+        };
     },
     OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
     createInitialOptions: ()=>({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/prometheus-variables.tsx"],"sourcesContent":["// Copyright 2022 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 {\n  replaceTemplateVariables,\n  parseTemplateVariables,\n  PrometheusClient,\n  DEFAULT_PROM,\n  getPrometheusTimeRange,\n} from '../model';\nimport { PrometheusLabelNamesVariableOptions, PrometheusLabelValuesVariableOptions } 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        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n      <MatcherEditor\n        initialMatchers={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        initialMatchers={props.value.matchers}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\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: () => [],\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: pluginDef.label_name,\n      'match[]': match,\n      ...timeRange,\n    });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return spec.matchers?.map((m) => parseTemplateVariables(m)).flat() || [];\n  },\n  OptionsEditorComponent: PrometheusLabelValuesVariableEditor,\n  createInitialOptions: () => ({ label_name: '' }),\n};\n"],"names":["Stack","TextField","replaceTemplateVariables","parseTemplateVariables","DEFAULT_PROM","getPrometheusTimeRange","MatcherEditor","PrometheusLabelValuesVariableEditor","props","spacing","sx","mb","label","value","label_name","onChange","e","target","initialMatchers","matchers","PrometheusLabelNamesVariableEditor","stringArrayToVariableOptions","values","map","PrometheusLabelNamesVariable","getVariableOptions","spec","ctx","client","datasourceStore","getDatasourceClient","datasource","match","m","variables","undefined","timeRange","data","options","labelNames","dependsOn","OptionsEditorComponent","createInitialOptions","PrometheusLabelValuesVariable","pluginDef","labelValues","labelName","flat"],"mappings":"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"}
+{"version":3,"sources":["../../src/plugins/prometheus-variables.tsx"],"sourcesContent":["// Copyright 2022 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 {\n  replaceTemplateVariables,\n  parseTemplateVariables,\n  PrometheusClient,\n  DEFAULT_PROM,\n  getPrometheusTimeRange,\n} from '../model';\nimport { PrometheusLabelNamesVariableOptions, PrometheusLabelValuesVariableOptions } 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        value={props.value.label_name}\n        onChange={(e) => {\n          props.onChange({ ...props.value, label_name: e.target.value });\n        }}\n      />\n      <MatcherEditor\n        initialMatchers={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        initialMatchers={props.value.matchers}\n        onChange={(e) => {\n          props.onChange({ ...props.value, matchers: e });\n        }}\n      />\n    </Stack>\n  );\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: () => {\n    return { variables: [] };\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: pluginDef.label_name,\n      'match[]': match,\n      ...timeRange,\n    });\n    return {\n      data: stringArrayToVariableOptions(options),\n    };\n  },\n  dependsOn: (spec) => {\n    return { variables: spec.matchers?.map((m) => parseTemplateVariables(m)).flat() || [] };\n  },\n  OptionsEditorComponent: PrometheusLabelValuesVariableEditor,\n  createInitialOptions: () => ({ label_name: '' }),\n};\n"],"names":["Stack","TextField","replaceTemplateVariables","parseTemplateVariables","DEFAULT_PROM","getPrometheusTimeRange","MatcherEditor","PrometheusLabelValuesVariableEditor","props","spacing","sx","mb","label","value","label_name","onChange","e","target","initialMatchers","matchers","PrometheusLabelNamesVariableEditor","stringArrayToVariableOptions","values","map","PrometheusLabelNamesVariable","getVariableOptions","spec","ctx","client","datasourceStore","getDatasourceClient","datasource","match","m","variables","undefined","timeRange","data","options","labelNames","dependsOn","OptionsEditorComponent","createInitialOptions","PrometheusLabelValuesVariable","pluginDef","labelValues","labelName","flat"],"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;AAiCF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,yBAAyB,CAexE,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;AAiCF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,yBAAyB,CAiBxE,CAAC"}

package/dist/plugins/variable.js

@@ -61,7 +61,11 @@ export const StaticListVariable = {
             data: values
         };
     },
-    dependsOn: ()=>[],
+    dependsOn: ()=>{
+        return {
+            variables: []
+        };
+    },
     OptionsEditorComponent: StaticListVariableOptionEditor,
     createInitialOptions: ()=>({
             values: []

package/dist/plugins/variable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/variable.tsx"],"sourcesContent":["// Copyright 2022 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        multiple\n        value={value}\n        onChange={onChange}\n        options={[]}\n        freeSolo\n        renderInput={(params) => <TextField {...params} label=\"Values\" placeholder=\"Values\" />}\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  OptionsEditorComponent: StaticListVariableOptionEditor,\n  createInitialOptions: () => ({ values: [] }),\n};\n"],"names":["Autocomplete","TextField","StaticListVariableOptionEditor","props","value","values","map","v","onChange","__","label","div","multiple","options","freeSolo","renderInput","params","placeholder","StaticListVariable","getVariableOptions","spec","data","dependsOn","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,QAAQ;YACRR,KAAK,EAAEA,KAAK;YACZI,QAAQ,EAAEA,QAAQ;YAClBK,OAAO,EAAE,EAAE;YACXC,QAAQ;YACRC,WAAW,EAAE,CAACC,MAAM,iBAAK,KAACf,SAAS;oBAAE,GAAGe,MAAM;oBAAEN,KAAK,EAAC,QAAQ;oBAACO,WAAW,EAAC,QAAQ;kBAAG;UACtF;MACE,CACN;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAA8C;IAC3EC,kBAAkB,EAAE,OAAOC,IAAI,GAAK;YACnBA,GAAW;QAA1B,MAAMf,MAAM,GAAGe,CAAAA,GAAW,GAAXA,IAAI,CAACf,MAAM,cAAXe,GAAW,WAAK,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAW,CAAEd,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;YACLc,IAAI,EAAEhB,MAAM;SACb,CAAC;IACJ,CAAC;IACDiB,SAAS,EAAE,IAAM,EAAE;IACnBC,sBAAsB,EAAErB,8BAA8B;IACtDsB,oBAAoB,EAAE,IAAO,CAAA;YAAEnB,MAAM,EAAE,EAAE;SAAE,CAAA,AAAC;CAC7C,CAAC"}
+{"version":3,"sources":["../../src/plugins/variable.tsx"],"sourcesContent":["// Copyright 2022 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        multiple\n        value={value}\n        onChange={onChange}\n        options={[]}\n        freeSolo\n        renderInput={(params) => <TextField {...params} label=\"Values\" placeholder=\"Values\" />}\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","multiple","options","freeSolo","renderInput","params","placeholder","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,QAAQ;YACRR,KAAK,EAAEA,KAAK;YACZI,QAAQ,EAAEA,QAAQ;YAClBK,OAAO,EAAE,EAAE;YACXC,QAAQ;YACRC,WAAW,EAAE,CAACC,MAAM,iBAAK,KAACf,SAAS;oBAAE,GAAGe,MAAM;oBAAEN,KAAK,EAAC,QAAQ;oBAACO,WAAW,EAAC,QAAQ;kBAAG;UACtF;MACE,CACN;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAA8C;IAC3EC,kBAAkB,EAAE,OAAOC,IAAI,GAAK;YACnBA,GAAW;QAA1B,MAAMf,MAAM,GAAGe,CAAAA,GAAW,GAAXA,IAAI,CAACf,MAAM,cAAXe,GAAW,WAAK,GAAhBA,KAAAA,CAAgB,GAAhBA,GAAW,CAAEd,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;YACLc,IAAI,EAAEhB,MAAM;SACb,CAAC;IACJ,CAAC;IACDiB,SAAS,EAAE,IAAM;QACf,OAAO;YAAEC,SAAS,EAAE,EAAE;SAAE,CAAC;IAC3B,CAAC;IACDC,sBAAsB,EAAEtB,8BAA8B;IACtDuB,oBAAoB,EAAE,IAAO,CAAA;YAAEpB,MAAM,EAAE,EAAE;SAAE,CAAA,AAAC;CAC7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/prometheus-plugin",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Prometheus plugin for Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -30,8 +30,8 @@
   "dependencies": {
     "@lezer/highlight": "^1.0.0",
     "@lezer/lr": "^1.2.0",
-    "@perses-dev/core": "^0.14.0",
-    "@perses-dev/plugin-system": "^0.14.0",
+    "@perses-dev/core": "^0.15.0",
+    "@perses-dev/plugin-system": "^0.15.0",
     "@prometheus-io/lezer-promql": "^0.37.0",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15"