@perses-dev/prometheus-plugin 0.21.1 → 0.22.0

package/dist/cjs/components/PromQL.js

@@ -0,0 +1,56 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PromQLEditor", {
+    enumerable: true,
+    get: ()=>PromQLEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactCodemirror = /*#__PURE__*/ _interopRequireDefault(require("@uiw/react-codemirror"));
+const _codemirrorPromql = require("@prometheus-io/codemirror-promql");
+const _view = require("@codemirror/view");
+const _material = require("@mui/material");
+const _react = require("react");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PromQLEditor({ completeConfig , ...rest }) {
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
+    const promQLExtension = (0, _react.useMemo)(()=>{
+        return new _codemirrorPromql.PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
+    }, [
+        completeConfig
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactCodemirror.default, {
+        ...rest,
+        style: {
+            border: `1px solid ${theme.palette.divider}`
+        },
+        theme: isDarkMode ? 'dark' : 'light',
+        basicSetup: {
+            highlightActiveLine: false,
+            highlightActiveLineGutter: false,
+            foldGutter: false
+        },
+        extensions: [
+            _view.EditorView.lineWrapping,
+            promQLExtension
+        ]
+    });
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./PromQL"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/model/api-types.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/model/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -20,7 +20,6 @@ _exportStar(require("./prometheus-client"), exports);
 _exportStar(require("./prometheus-selectors"), exports);
 _exportStar(require("./templating"), exports);
 _exportStar(require("./time"), exports);
-_exportStar(require("./utils"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/model/parse-sample-values.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/model/templating.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -19,7 +19,7 @@ Object.defineProperty(exports, "useReplaceTemplateString", {
     get: ()=>useReplaceTemplateString
 });
 const _pluginSystem = require("@perses-dev/plugin-system");
-const _utils = require("./utils");
+const _utils = require("../utils");
 function useReplaceTemplateString(templateString) {
     const templateVariablesInTemplate = (0, _utils.parseTemplateVariables)(templateString || '');
     const variables = (0, _pluginSystem.useTemplateVariableValues)(templateVariablesInTemplate);

package/dist/cjs/model/time.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/plugins/MatcherEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -31,6 +31,9 @@ const _model = require("../model");
     }
     // Could think about this becoming a class, although it definitely doesn't have to be
     return {
+        options: {
+            datasourceUrl
+        },
         instantQuery: (params)=>(0, _model.instantQuery)(params, {
                 datasourceUrl
             }),

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -18,7 +18,7 @@ Object.defineProperty(exports, "PrometheusTimeSeriesQuery", {
     enumerable: true,
     get: ()=>PrometheusTimeSeriesQuery
 });
-const _model = require("../../model");
+const _utils = require("../../utils");
 const _getTimeSeriesData = require("./get-time-series-data");
 const _prometheusTimeSeriesQueryEditor = require("./PrometheusTimeSeriesQueryEditor");
 const PrometheusTimeSeriesQuery = {
@@ -30,7 +30,7 @@ const PrometheusTimeSeriesQuery = {
         }),
     dependsOn: (spec)=>{
         return {
-            variables: (0, _model.parseTemplateVariables)(spec.query)
+            variables: (0, _utils.parseTemplateVariables)(spec.query)
         };
     }
 };

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -23,10 +23,14 @@ const _immer = require("immer");
 const _material = require("@mui/material");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _model = require("../../model");
+const _components = require("../../components");
 const _queryEditorModel = require("./query-editor-model");
 function PrometheusTimeSeriesQueryEditor(props) {
     const { onChange , value  } = props;
     const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const { data: client  } = (0, _pluginSystem.useDatasourceClient)(selectedDatasource);
+    const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
     const { query , handleQueryChange , handleQueryBlur  } = (0, _queryEditorModel.useQueryState)(props);
     const { format , handleFormatChange , handleFormatBlur  } = (0, _queryEditorModel.useFormatState)(props);
     const handleDatasourceChange = (next)=>{
@@ -43,19 +47,21 @@ function PrometheusTimeSeriesQueryEditor(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                fullWidth: true,
-                label: "Query",
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
                 value: query,
                 onChange: handleQueryChange,
-                onBlur: handleQueryBlur,
-                margin: "dense"
+                onBlur: handleQueryBlur
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                 fullWidth: true,
                 label: "Series Name Format",
                 value: format !== null && format !== void 0 ? format : '',
-                onChange: handleFormatChange,
+                onChange: (e)=>handleFormatChange(e.target.value),
                 onBlur: handleFormatBlur,
                 margin: "dense"
             }),
@@ -69,7 +75,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
                         datasourcePluginKind: "PrometheusDatasource",
-                        value: datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM,
+                        value: selectedDatasource,
                         onChange: handleDatasourceChange,
                         labelId: "prom-datasource-label",
                         label: "Prometheus Datasource"

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -20,6 +20,7 @@ Object.defineProperty(exports, "getTimeSeriesData", {
 });
 const _dateFns = require("date-fns");
 const _model = require("../../model");
+const _utils = require("../../utils");
 const getTimeSeriesData = async (spec, context)=>{
     var ref;
     if (spec.query === undefined || spec.query === null || spec.query === '') {
@@ -40,7 +41,7 @@ const getTimeSeriesData = async (spec, context)=>{
     end = alignedEnd;
     // Replace template variable placeholders in PromQL query
     let query = spec.query.replace('$__rate_interval', `15s`);
-    query = (0, _model.replaceTemplateVariables)(query, context.variableState);
+    query = (0, _utils.replaceTemplateVariables)(query, context.variableState);
     var _datasource;
     // Get the datasource, using the default Prom Datasource if one isn't specified in the query
     const client = await context.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
@@ -66,13 +67,14 @@ const getTimeSeriesData = async (spec, context)=>{
         // processing until its needed
         series: result.map((value)=>{
             const { metric , values  } = value;
-            // Name the series after the metric labels or if no metric, just use the
-            // overall query
-            let name = Object.entries(metric).map(([labelName, labelValue])=>`${labelName}="${labelValue}"`).join(', ');
-            if (name === '') name = query;
+            // Name the series after the metric labels or if no metric, use the query
+            let name = (0, _utils.getUniqueKeyForPrometheusResult)(metric);
+            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;
+            const formattedName = spec.series_name_format ? (0, _utils.formatSeriesName)(spec.series_name_format, metric) : name;
             return {
                 name,
                 values: values.map(_model.parseValueTuple),

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -39,7 +39,7 @@ function useQueryState(props) {
     }
     // Update our local state's copy as the user types
     const handleQueryChange = (e)=>{
-        setQuery(e.target.value);
+        setQuery(e);
     };
     // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the
     // PanelPreview
@@ -66,7 +66,7 @@ function useFormatState(props) {
     }
     // Update our local state as the user types
     const handleFormatChange = (e)=>{
-        setFormat(e.target.value);
+        setFormat(e);
     };
     // Propagate changes to the panel preview component when series_name_format TextField is blurred
     const handleFormatBlur = ()=>{

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -28,6 +28,7 @@ _export(exports, {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _model = require("../model");
+const _utils = require("../utils");
 const _matcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
     var _matchers;
@@ -140,7 +141,7 @@ const PrometheusLabelNamesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         var _datasource;
         const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
-        const match = spec.matchers ? spec.matchers.map((m)=>(0, _model.replaceTemplateVariables)(m, ctx.variables)) : undefined;
+        const match = spec.matchers ? spec.matchers.map((m)=>(0, _utils.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options  } = await client.labelNames({
             'match[]': match,
@@ -153,7 +154,7 @@ const PrometheusLabelNamesVariable = {
     dependsOn: (spec)=>{
         var ref;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _model.parseTemplateVariables)(m)).flat()) || []
+            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _utils.parseTemplateVariables)(m)).flat()) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
@@ -164,10 +165,10 @@ const PrometheusLabelValuesVariable = {
         const pluginDef = spec;
         var _datasource;
         const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
-        const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>(0, _model.replaceTemplateVariables)(m, ctx.variables)) : undefined;
+        const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>(0, _utils.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options  } = await client.labelValues({
-            labelName: (0, _model.replaceTemplateVariables)(pluginDef.label_name, ctx.variables),
+            labelName: (0, _utils.replaceTemplateVariables)(pluginDef.label_name, ctx.variables),
             'match[]': match,
             ...timeRange
         });
@@ -178,7 +179,7 @@ const PrometheusLabelValuesVariable = {
     dependsOn: (spec)=>{
         var ref;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _model.parseTemplateVariables)(m)).flat().concat((0, _model.parseTemplateVariables)(spec.label_name))) || []
+            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _utils.parseTemplateVariables)(m)).flat().concat((0, _utils.parseTemplateVariables)(spec.label_name))) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
@@ -192,9 +193,9 @@ const PrometheusPromQLVariable = {
         const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
         // TODO we may want to manage a range query as well.
         const { data: options  } = await client.instantQuery({
-            query: (0, _model.replaceTemplateVariables)(spec.expr, ctx.variables)
+            query: (0, _utils.replaceTemplateVariables)(spec.expr, ctx.variables)
         });
-        const labelName = (0, _model.replaceTemplateVariables)(spec.label_name, ctx.variables);
+        const labelName = (0, _utils.replaceTemplateVariables)(spec.label_name, ctx.variables);
         let values = [];
         if ((options === null || options === void 0 ? void 0 : options.resultType) === 'matrix') {
             values = capturingMatrix(options, labelName);
@@ -207,7 +208,7 @@ const PrometheusPromQLVariable = {
     },
     dependsOn: (spec)=>{
         return {
-            variables: (0, _model.parseTemplateVariables)(spec.expr).concat((0, _model.parseTemplateVariables)(spec.label_name))
+            variables: (0, _utils.parseTemplateVariables)(spec.expr).concat((0, _utils.parseTemplateVariables)(spec.label_name))
         };
     },
     OptionsEditorComponent: PrometheusPromQLVariableEditor,

package/dist/cjs/plugins/types.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/plugins/variable.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/test/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./utils"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/{model → utils}/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -24,7 +24,8 @@ _export(exports, {
     replaceTemplateVariables: ()=>replaceTemplateVariables,
     replaceTemplateVariable: ()=>replaceTemplateVariable,
     parseTemplateVariables: ()=>parseTemplateVariables,
-    formatSeriesName: ()=>formatSeriesName
+    formatSeriesName: ()=>formatSeriesName,
+    getUniqueKeyForPrometheusResult: ()=>getUniqueKeyForPrometheusResult
 });
 function replaceTemplateVariables(text, variableState) {
     const variables = parseTemplateVariables(text);
@@ -67,3 +68,37 @@ function formatSeriesName(inputFormat, seriesLabels) {
     const resolveLabelsRegex = /\{\{\s*(.+?)\s*\}\}/g;
     return inputFormat.replace(resolveLabelsRegex, (_, g)=>seriesLabels[g] ? seriesLabels[g] : g);
 }
+/*
+ * Stringifies object of labels into valid PromQL for querying metric by label
+ */ function stringifyPrometheusMetricLabels(labels, removeExprWrap) {
+    const labelStrings = [];
+    Object.keys(labels).sort().forEach((labelName)=>{
+        const labelValue = labels[labelName];
+        if (labelValue !== undefined) {
+            if (removeExprWrap) {
+                labelStrings.push(`"${labelName}":"${labelValue}"`);
+            } else {
+                labelStrings.push(`${labelName}="${labelValue}"`);
+            }
+        }
+    });
+    return `{${labelStrings.join(',')}}`;
+}
+function getUniqueKeyForPrometheusResult(metricLabels, { removeExprWrap  } = {}) {
+    const metricNameKey = '__name__';
+    if (metricLabels) {
+        if (Object.prototype.hasOwnProperty.call(metricLabels, metricNameKey)) {
+            const stringifiedLabels = stringifyPrometheusMetricLabels({
+                ...metricLabels,
+                [metricNameKey]: undefined
+            }, removeExprWrap);
+            if (removeExprWrap === true) {
+                return `${stringifiedLabels}`;
+            } else {
+                return `${metricLabels[metricNameKey]}${stringifiedLabels}`;
+            }
+        }
+        return stringifyPrometheusMetricLabels(metricLabels, removeExprWrap);
+    }
+    return '';
+}

package/dist/cjs/{model → utils}/utils.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -124,3 +124,49 @@ describe('formatSeriesName', ()=>{
         expect((0, _utils.formatSeriesName)(inputFormat, metric)).toEqual(output);
     });
 });
+describe('getUniqueKeyForPrometheusResult', ()=>{
+    let labels = {};
+    beforeEach(()=>{
+        labels = {};
+    });
+    it('should be a formatted prometheus string', ()=>{
+        labels = {
+            ['foo']: 'bar'
+        };
+        const result = (0, _utils.getUniqueKeyForPrometheusResult)(labels);
+        expect(result).toEqual('{foo="bar"}');
+    });
+    it('should be formatted with "', ()=>{
+        labels = {
+            ['foo']: 'bar'
+        };
+        const result = (0, _utils.getUniqueKeyForPrometheusResult)(labels, {
+            removeExprWrap: true
+        });
+        expect(result).toEqual('{"foo":"bar"}');
+    });
+    it('should be formatted with __name__ removed', ()=>{
+        labels = {
+            __name__: 'node_memory_Buffers_bytes',
+            env: 'demo',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node'
+        };
+        const result = (0, _utils.getUniqueKeyForPrometheusResult)(labels, {
+            removeExprWrap: true
+        });
+        expect(result).toEqual('{"env":"demo","instance":"demo.do.prometheus.io:9100","job":"node"}');
+    });
+    it('should return a valid query to filter by label', ()=>{
+        labels = {
+            __name__: 'node_memory_Buffers_bytes',
+            env: 'demo',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node'
+        };
+        const result = (0, _utils.getUniqueKeyForPrometheusResult)(labels, {
+            removeExprWrap: false
+        });
+        expect(result).toEqual('node_memory_Buffers_bytes{env="demo",instance="demo.do.prometheus.io:9100",job="node"}');
+    });
+});

package/dist/components/PromQL.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { CompleteConfiguration } from '@prometheus-io/codemirror-promql';
+export declare type PromQLEditorProps = {
+    completeConfig: CompleteConfiguration;
+} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
+export declare function PromQLEditor({ completeConfig, ...rest }: PromQLEditorProps): JSX.Element;
+//# sourceMappingURL=PromQL.d.ts.map

package/dist/components/PromQL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromQL.d.ts","sourceRoot":"","sources":["../../src/components/PromQL.tsx"],"names":[],"mappings":";AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAK1F,oBAAY,iBAAiB,GAAG;IAAE,cAAc,EAAE,qBAAqB,CAAA;CAAE,GAAG,IAAI,CAC9E,oBAAoB,EACpB,OAAO,GAAG,YAAY,CACvB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,eAqB1E"}

package/dist/components/PromQL.js

@@ -0,0 +1,45 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import CodeMirror from '@uiw/react-codemirror';
+import { PromQLExtension } from '@prometheus-io/codemirror-promql';
+import { EditorView } from '@codemirror/view';
+import { useTheme } from '@mui/material';
+import { useMemo } from 'react';
+export function PromQLEditor({ completeConfig , ...rest }) {
+    const theme = useTheme();
+    const isDarkMode = theme.palette.mode === 'dark';
+    const promQLExtension = useMemo(()=>{
+        return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
+    }, [
+        completeConfig
+    ]);
+    return /*#__PURE__*/ _jsx(CodeMirror, {
+        ...rest,
+        style: {
+            border: `1px solid ${theme.palette.divider}`
+        },
+        theme: isDarkMode ? 'dark' : 'light',
+        basicSetup: {
+            highlightActiveLine: false,
+            highlightActiveLineGutter: false,
+            foldGutter: false
+        },
+        extensions: [
+            EditorView.lineWrapping,
+            promQLExtension
+        ]
+    });
+}
+
+//# sourceMappingURL=PromQL.js.map