@perses-dev/prometheus-plugin 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { Stack, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect, DatasourceSelectProps, useDatasourceClient } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_PROM,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n} from '../../model';\nimport { PromQLEditor } from '../../components';\nimport { PrometheusTimeSeriesQueryEditorProps, useQueryState, useFormatState } from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        {/* TODO: How do we ensure unique ID values if there are multiple of these? Can we use React 18 useId and\n            maintain 17 compatibility somehow with a polyfill/shim? */}\n        <InputLabel id=\"prom-datasource-label\">Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId=\"prom-datasource-label\"\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n      />\n      <TextField\n        fullWidth\n        label=\"Legend Name\"\n        placeholder=\"Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.\"\n        helperText=\"Set the name for each series in the legend and the tooltip.\"\n        value={format ?? ''}\n        onChange={(e) => handleFormatChange(e.target.value)}\n        onBlur={handleFormatBlur}\n      />\n    </Stack>\n  );\n}\n"],"names":["produce","Stack","TextField","FormControl","InputLabel","DatasourceSelect","useDatasourceClient","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","PromQLEditor","useQueryState","useFormatState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","selectedDatasource","data","client","promURL","options","datasourceUrl","query","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","id","datasourcePluginKind","labelId","label","completeConfig","remote","url","onBlur","placeholder","helperText","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { DatasourceSelectProps, useDatasource, useDatasourceClient } from '@perses-dev/plugin-system';\nimport { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PrometheusClient } from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport {\n  PrometheusTimeSeriesQueryEditorProps,\n  useQueryState,\n  useFormatState,\n  useMinStepState,\n} from './query-editor-model';\nimport { DashboardPrometheusTimeSeriesQueryEditor } from './DashboardPrometheusTimeSeriesQueryEditor';\nimport { ExplorePrometheusTimeSeriesQueryEditor } from './ExplorePrometheusTimeSeriesQueryEditor';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value, isExplore } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PROM;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n  const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n  const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n  const minStepPlaceholder =\n    minStep ??\n    (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n    DEFAULT_SCRAPE_INTERVAL;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      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  if (isExplore) {\n    return (\n      <ExplorePrometheusTimeSeriesQueryEditor\n        selectedDatasource={selectedDatasource}\n        handleDatasourceChange={handleDatasourceChange}\n        promURL={promURL}\n        query={query}\n        handleQueryChange={handleQueryChange}\n        handleQueryBlur={handleQueryBlur}\n        format={format}\n        handleFormatChange={handleFormatChange}\n        handleFormatBlur={handleFormatBlur}\n        minStepPlaceholder={minStepPlaceholder}\n        minStep={minStep}\n        handleMinStepChange={handleMinStepChange}\n        handleMinStepBlur={handleMinStepBlur}\n      />\n    );\n  }\n\n  return (\n    <DashboardPrometheusTimeSeriesQueryEditor\n      selectedDatasource={selectedDatasource}\n      handleDatasourceChange={handleDatasourceChange}\n      promURL={promURL}\n      query={query}\n      handleQueryChange={handleQueryChange}\n      handleQueryBlur={handleQueryBlur}\n      format={format}\n      handleFormatChange={handleFormatChange}\n      handleFormatBlur={handleFormatBlur}\n      minStepPlaceholder={minStepPlaceholder}\n      minStep={minStep}\n      handleMinStepChange={handleMinStepChange}\n      handleMinStepBlur={handleMinStepBlur}\n    />\n  );\n}\n"],"names":["produce","useDatasource","useDatasourceClient","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","DEFAULT_SCRAPE_INTERVAL","useQueryState","useFormatState","useMinStepState","DashboardPrometheusTimeSeriesQueryEditor","ExplorePrometheusTimeSeriesQueryEditor","PrometheusTimeSeriesQueryEditor","props","onChange","value","isExplore","datasource","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","query","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","Error"],"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,OAAO,QAAQ,QAAQ;AAChC,SAAgCC,aAAa,EAAEC,mBAAmB,QAAQ,4BAA4B;AACtG,SAASC,YAAY,EAAEC,qBAAqB,EAAEC,8BAA8B,QAA0B,cAAc;AACpH,SAASC,uBAAuB,QAAkC,WAAW;AAC7E,SAEEC,aAAa,EACbC,cAAc,EACdC,eAAe,QACV,uBAAuB;AAC9B,SAASC,wCAAwC,QAAQ,6CAA6C;AACtG,SAASC,sCAAsC,QAAQ,2CAA2C;AAElG;;CAEC,GACD,OAAO,SAASC,gCAAgCC,KAA2C;IACzF,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGH;IACvC,MAAM,EAAEI,WAAU,EAAE,GAAGF;IACvB,MAAMG,qBAAqBD,uBAAAA,wBAAAA,aAAcd;IAEzC,MAAM,EAAEgB,MAAMC,OAAM,EAAE,GAAGlB,oBAAsCgB;IAC/D,MAAMG,UAAUD,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQE,QAAQC;IAChC,MAAM,EAAEJ,MAAMK,mBAAkB,EAAE,GAAGvB,cAAciB;IAEnD,MAAM,EAAEO,MAAK,EAAEC,kBAAiB,EAAEC,gBAAe,EAAE,GAAGpB,cAAcM;IACpE,MAAM,EAAEe,OAAM,EAAEC,mBAAkB,EAAEC,iBAAgB,EAAE,GAAGtB,eAAeK;IACxE,MAAM,EAAEkB,QAAO,EAAEC,oBAAmB,EAAEC,kBAAiB,EAAE,GAAGxB,gBAAgBI;QAE1EkB;IADF,MAAMG,qBACJH,CAAAA,OAAAA,oBAAAA,qBAAAA,UACCP,sBAAsB,CAACA,+BAAAA,gCAAAA,KAAAA,IAAAA,mBAAoBW,OAAOC,IAAgC,EAAEC,4BADrFN,kBAAAA,OAEAzB;IAEF,MAAMgC,yBAA4D,CAACC;QACjE,IAAIlC,+BAA+BkC,OAAO;YACxCzB,SACEd,QAAQe,OAAO,CAACyB;gBACd,sFAAsF;gBACtF,MAAMC,iBAAiBrC,sBAAsBmC,QAAQG,YAAYH;gBACjEC,MAAMvB,aAAawB;YACrB;YAEF;QACF;QAEA,MAAM,IAAIE,MAAM;IAClB;IAEA,IAAI3B,WAAW;QACb,qBACE,KAACL;YACCO,oBAAoBA;YACpBoB,wBAAwBA;YACxBjB,SAASA;YACTI,OAAOA;YACPC,mBAAmBA;YACnBC,iBAAiBA;YACjBC,QAAQA;YACRC,oBAAoBA;YACpBC,kBAAkBA;YAClBI,oBAAoBA;YACpBH,SAASA;YACTC,qBAAqBA;YACrBC,mBAAmBA;;IAGzB;IAEA,qBACE,KAACvB;QACCQ,oBAAoBA;QACpBoB,wBAAwBA;QACxBjB,SAASA;QACTI,OAAOA;QACPC,mBAAmBA;QACnBC,iBAAiBA;QACjBC,QAAQA;QACRC,oBAAoBA;QACpBC,kBAAkBA;QAClBI,oBAAoBA;QACpBH,SAASA;QACTC,qBAAqBA;QACrBC,mBAAmBA;;AAGzB"}

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":"AAcA,OAAO,EAAE,qBAAqB,EAA4B,MAAM,2BAA2B,CAAC;AAW5F,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC,mBAAmB,CAqFvG,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":"AAsBA,OAAO,EAAE,qBAAqB,EAAqD,MAAM,2BAA2B,CAAC;AAYrH,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC;AAE1E,eAAO,MAAM,iBAAiB,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC,mBAAmB,CA0GvG,CAAC"}

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

@@ -10,21 +10,30 @@
 // 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 { replaceTemplateVariables } from '@perses-dev/plugin-system';
-import { fromUnixTime } from 'date-fns';
+import { formatDuration, msToPrometheusDuration, parseDurationString } from '@perses-dev/core';
+import { replaceTemplateVariables, replaceTemplateVariable } from '@perses-dev/plugin-system';
+import { fromUnixTime, milliseconds } from 'date-fns';
 import { parseValueTuple, getDurationStringSeconds, getPrometheusTimeRange, getRangeStep, DEFAULT_PROM } from '../../model';
 import { getFormattedPrometheusSeriesName } from '../../utils';
+import { DEFAULT_SCRAPE_INTERVAL } from '../types';
 export const getTimeSeriesData = async (spec, context)=>{
-    var ref;
+    var _response_data;
     if (spec.query === undefined || spec.query === null || spec.query === '') {
         // Do not make a request to the backend, instead return an empty TimeSeriesData
         return {
             series: []
         };
     }
-    const minStep = getDurationStringSeconds(spec.min_step);
+    var _spec_datasource;
+    const datasource = await context.datasourceStore.getDatasource((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : DEFAULT_PROM);
+    var _datasource_plugin_spec_scrapeInterval;
+    const datasourceScrapeInterval = Math.trunc(milliseconds(parseDurationString((_datasource_plugin_spec_scrapeInterval = datasource.plugin.spec.scrapeInterval) !== null && _datasource_plugin_spec_scrapeInterval !== void 0 ? _datasource_plugin_spec_scrapeInterval : DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    var _getDurationStringSeconds;
+    const minStep = (_getDurationStringSeconds = getDurationStringSeconds(// resolve any variable that may have been provided
+    // TODO add a validation check to make sure the variable is a DurationString, to avoid the back & forth cast here
+    replaceTemplateVariables(spec.minStep, context.variableState))) !== null && _getDurationStringSeconds !== void 0 ? _getDurationStringSeconds : datasourceScrapeInterval;
     const timeRange = getPrometheusTimeRange(context.timeRange);
-    const step = getRangeStep(timeRange, minStep, undefined, context.suggestedStepMs);
+    const step = getRangeStep(timeRange, minStep, undefined, context.suggestedStepMs); // TODO: resolution
     // Align the time range so that it's a multiple of the step
     let { start , end  } = timeRange;
     const utcOffsetSec = new Date().getTimezoneOffset() * 60;
@@ -32,17 +41,26 @@ export const getTimeSeriesData = async (spec, context)=>{
     const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;
     start = alignedStart;
     end = alignedEnd;
+    var _context_suggestedStepMs;
     // Replace template variable placeholders in PromQL query
-    let query = spec.query.replace('$__rate_interval', `15s`);
+    const intervalMs = (_context_suggestedStepMs = context.suggestedStepMs) !== null && _context_suggestedStepMs !== void 0 ? _context_suggestedStepMs : step * 1000; // Step is in seconds
+    let query = replaceTemplateVariable(spec.query, '__interval_ms', intervalMs.toString());
+    query = replaceTemplateVariable(spec.query, '__interval', formatDuration(msToPrometheusDuration(intervalMs)));
+    const scrapeIntervalMs = minStep * 1000;
+    // The $__rate_interval variable is meant to be used in the rate function.
+    // It is defined as max($__interval + Scrape interval, 4 * Scrape interval), where Scrape interval is the Min step setting (a setting per PromQL query),
+    // if any is set, and otherwise the Scrape interval as set in the Prometheus datasource
+    const rateIntervalMs = Math.max(intervalMs + scrapeIntervalMs, 4 * scrapeIntervalMs);
+    query = replaceTemplateVariable(query, '__rate_interval', formatDuration(msToPrometheusDuration(rateIntervalMs)));
     query = replaceTemplateVariables(query, context.variableState);
-    let seriesNameFormat = spec.series_name_format;
+    let seriesNameFormat = spec.seriesNameFormat;
     // if series name format is defined, replace template variable placeholders in series name format
     if (seriesNameFormat) {
         seriesNameFormat = replaceTemplateVariables(seriesNameFormat, context.variableState);
     }
-    var _datasource;
+    var _spec_datasource1;
     // 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 : DEFAULT_PROM);
+    const client = await context.datasourceStore.getDatasourceClient((_spec_datasource1 = spec.datasource) !== null && _spec_datasource1 !== void 0 ? _spec_datasource1 : DEFAULT_PROM);
     // Make the request to Prom
     const response = await client.rangeQuery({
         query,
@@ -50,16 +68,16 @@ export const getTimeSeriesData = async (spec, context)=>{
         end,
         step
     });
-    var ref1;
+    var _response_data_result;
     // TODO: What about error responses from Prom that have a response body?
-    const result = (ref1 = (ref = response.data) === null || ref === void 0 ? void 0 : ref.result) !== null && ref1 !== void 0 ? ref1 : [];
+    const result = (_response_data_result = (_response_data = response.data) === null || _response_data === void 0 ? void 0 : _response_data.result) !== null && _response_data_result !== void 0 ? _response_data_result : [];
     // Custom display for response header warnings, configurable error responses display coming next
     const notices = [];
     if (response.status === 'success') {
-        var _warnings;
-        const warnings = (_warnings = response.warnings) !== null && _warnings !== void 0 ? _warnings : [];
-        var ref2;
-        const warningMessage = (ref2 = warnings[0]) !== null && ref2 !== void 0 ? ref2 : '';
+        var _response_warnings;
+        const warnings = (_response_warnings = response.warnings) !== null && _response_warnings !== void 0 ? _response_warnings : [];
+        var _warnings_;
+        const warningMessage = (_warnings_ = warnings[0]) !== null && _warnings_ !== void 0 ? _warnings_ : '';
         if (warningMessage !== '') {
             notices.push({
                 type: 'warning',
@@ -77,7 +95,7 @@ export const getTimeSeriesData = async (spec, context)=>{
         stepMs: step * 1000,
         series: result.map((value)=>{
             const { metric , values  } = value;
-            // Account for series_name_format from query editor when determining name to show in legend, tooltip, etc.
+            // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.
             const { name , formattedName  } = getFormattedPrometheusSeriesName(query, metric, seriesNameFormat);
             return {
                 name,

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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Notice, TimeSeriesData } from '@perses-dev/core';\nimport { TimeSeriesQueryPlugin, replaceTemplateVariables } from '@perses-dev/plugin-system';\nimport { fromUnixTime } from 'date-fns';\nimport {\n  parseValueTuple,\n  PrometheusClient,\n  getDurationStringSeconds,\n  getPrometheusTimeRange,\n  getRangeStep,\n  DEFAULT_PROM,\n} from '../../model';\nimport { getFormattedPrometheusSeriesName } from '../../utils';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport const getTimeSeriesData: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec>['getTimeSeriesData'] = async (\n  spec,\n  context\n) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    // Do not make a request to the backend, instead return an empty TimeSeriesData\n    return { series: [] };\n  }\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  let seriesNameFormat = spec.series_name_format;\n  // if series name format is defined, replace template variable placeholders in series name format\n  if (seriesNameFormat) {\n    seriesNameFormat = replaceTemplateVariables(seriesNameFormat, context.variableState);\n  }\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  // Custom display for response header warnings, configurable error responses display coming next\n  const notices: Notice[] = [];\n  if (response.status === 'success') {\n    const warnings = response.warnings ?? [];\n    const warningMessage = warnings[0] ?? '';\n    if (warningMessage !== '') {\n      notices.push({\n        type: 'warning',\n        message: warningMessage,\n      });\n    }\n  }\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    series: result.map((value) => {\n      const { metric, values } = value;\n\n      // Account for series_name_format from query editor when determining name to show in legend, tooltip, etc.\n      const { name, formattedName } = getFormattedPrometheusSeriesName(query, metric, seriesNameFormat);\n\n      return {\n        name,\n        values: values.map(parseValueTuple),\n        formattedName,\n        labels: metric,\n      };\n    }),\n    metadata: {\n      notices,\n      executedQueryString: query,\n    },\n  };\n\n  return chartData;\n};\n"],"names":["replaceTemplateVariables","fromUnixTime","parseValueTuple","getDurationStringSeconds","getPrometheusTimeRange","getRangeStep","DEFAULT_PROM","getFormattedPrometheusSeriesName","getTimeSeriesData","spec","context","response","query","undefined","series","minStep","min_step","timeRange","step","suggestedStepMs","start","end","utcOffsetSec","Date","getTimezoneOffset","alignedEnd","Math","floor","alignedStart","replace","variableState","seriesNameFormat","series_name_format","client","datasourceStore","getDatasourceClient","datasource","rangeQuery","result","data","notices","status","warnings","warningMessage","push","type","message","chartData","stepMs","map","value","metric","values","name","formattedName","labels","metadata","executedQueryString"],"mappings":"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"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/get-time-series-data.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  DatasourceSpec,\n  DurationString,\n  formatDuration,\n  msToPrometheusDuration,\n  Notice,\n  parseDurationString,\n  TimeSeriesData,\n} from '@perses-dev/core';\nimport { TimeSeriesQueryPlugin, replaceTemplateVariables, replaceTemplateVariable } from '@perses-dev/plugin-system';\nimport { fromUnixTime, milliseconds } from 'date-fns';\nimport {\n  parseValueTuple,\n  PrometheusClient,\n  getDurationStringSeconds,\n  getPrometheusTimeRange,\n  getRangeStep,\n  DEFAULT_PROM,\n} from '../../model';\nimport { getFormattedPrometheusSeriesName } from '../../utils';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\nexport const getTimeSeriesData: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec>['getTimeSeriesData'] = async (\n  spec,\n  context\n) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    // Do not make a request to the backend, instead return an empty TimeSeriesData\n    return { series: [] };\n  }\n\n  const datasource = (await context.datasourceStore.getDatasource(\n    spec.datasource ?? DEFAULT_PROM\n  )) as DatasourceSpec<PrometheusDatasourceSpec>;\n  const datasourceScrapeInterval = Math.trunc(\n    milliseconds(parseDurationString(datasource.plugin.spec.scrapeInterval ?? DEFAULT_SCRAPE_INTERVAL)) / 1000\n  );\n\n  const minStep =\n    getDurationStringSeconds(\n      // resolve any variable that may have been provided\n      // TODO add a validation check to make sure the variable is a DurationString, to avoid the back & forth cast here\n      replaceTemplateVariables(spec.minStep as string, context.variableState) as DurationString\n    ) ?? datasourceScrapeInterval;\n  const timeRange = getPrometheusTimeRange(context.timeRange);\n  const step = getRangeStep(timeRange, minStep, undefined, context.suggestedStepMs); // TODO: resolution\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  const intervalMs = context.suggestedStepMs ?? step * 1000; // Step is in seconds\n  let query = replaceTemplateVariable(spec.query, '__interval_ms', intervalMs.toString());\n  query = replaceTemplateVariable(spec.query, '__interval', formatDuration(msToPrometheusDuration(intervalMs)));\n\n  const scrapeIntervalMs = minStep * 1000;\n  // The $__rate_interval variable is meant to be used in the rate function.\n  // It is defined as max($__interval + Scrape interval, 4 * Scrape interval), where Scrape interval is the Min step setting (a setting per PromQL query),\n  // if any is set, and otherwise the Scrape interval as set in the Prometheus datasource\n  const rateIntervalMs = Math.max(intervalMs + scrapeIntervalMs, 4 * scrapeIntervalMs);\n  query = replaceTemplateVariable(query, '__rate_interval', formatDuration(msToPrometheusDuration(rateIntervalMs)));\n  query = replaceTemplateVariables(query, context.variableState);\n\n  let seriesNameFormat = spec.seriesNameFormat;\n  // if series name format is defined, replace template variable placeholders in series name format\n  if (seriesNameFormat) {\n    seriesNameFormat = replaceTemplateVariables(seriesNameFormat, context.variableState);\n  }\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  // Custom display for response header warnings, configurable error responses display coming next\n  const notices: Notice[] = [];\n  if (response.status === 'success') {\n    const warnings = response.warnings ?? [];\n    const warningMessage = warnings[0] ?? '';\n    if (warningMessage !== '') {\n      notices.push({\n        type: 'warning',\n        message: warningMessage,\n      });\n    }\n  }\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    series: result.map((value) => {\n      const { metric, values } = value;\n\n      // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.\n      const { name, formattedName } = getFormattedPrometheusSeriesName(query, metric, seriesNameFormat);\n\n      return {\n        name,\n        values: values.map(parseValueTuple),\n        formattedName,\n        labels: metric,\n      };\n    }),\n    metadata: {\n      notices,\n      executedQueryString: query,\n    },\n  };\n\n  return chartData;\n};\n"],"names":["formatDuration","msToPrometheusDuration","parseDurationString","replaceTemplateVariables","replaceTemplateVariable","fromUnixTime","milliseconds","parseValueTuple","getDurationStringSeconds","getPrometheusTimeRange","getRangeStep","DEFAULT_PROM","getFormattedPrometheusSeriesName","DEFAULT_SCRAPE_INTERVAL","getTimeSeriesData","spec","context","response","query","undefined","series","datasource","datasourceStore","getDatasource","datasourceScrapeInterval","Math","trunc","plugin","scrapeInterval","minStep","variableState","timeRange","step","suggestedStepMs","start","end","utcOffsetSec","Date","getTimezoneOffset","alignedEnd","floor","alignedStart","intervalMs","toString","scrapeIntervalMs","rateIntervalMs","max","seriesNameFormat","client","getDatasourceClient","rangeQuery","result","data","notices","status","warnings","warningMessage","push","type","message","chartData","stepMs","map","value","metric","values","name","formattedName","labels","metadata","executedQueryString"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './PrometheusTimeSeriesQuery';\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,cAAc,6BAA6B,CAAC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './PrometheusTimeSeriesQuery';\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,cAAc,8BAA8B"}

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

@@ -1,4 +1,5 @@
 import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { DurationString } from '@perses-dev/core';
 import { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';
 export declare type PrometheusTimeSeriesQueryEditorProps = OptionsEditorProps<PrometheusTimeSeriesQuerySpec>;
 /**
@@ -13,11 +14,19 @@ export declare function useQueryState(props: PrometheusTimeSeriesQueryEditorProp
     handleQueryBlur: () => void;
 };
 /**
- * Hook to manage `series_name_format` state to ensure panel preview does not rerender until text input is blurred
+ * Hook to manage `seriesNameFormat` state to ensure panel preview does not rerender until text input is blurred
  */
 export declare function useFormatState(props: PrometheusTimeSeriesQueryEditorProps): {
     format: string | undefined;
     handleFormatChange: (e: string) => void;
     handleFormatBlur: () => void;
 };
+/**
+ * Hook to manage `minStep` state to ensure panel preview does not rerender until text input is blurred
+ */
+export declare function useMinStepState(props: PrometheusTimeSeriesQueryEditorProps): {
+    minStep: `${number}y` | `${number}w` | `${number}d` | `${number}h` | `${number}m` | `${number}s` | `${number}ms` | `${number}s${number}ms` | `${number}m${number}ms` | `${number}m${number}s` | `${number}m${number}s${number}ms` | `${number}h${number}ms` | `${number}h${number}s` | `${number}h${number}s${number}ms` | `${number}h${number}m` | `${number}h${number}m${number}ms` | `${number}h${number}m${number}s` | `${number}h${number}m${number}s${number}ms` | `${number}d${number}ms` | `${number}d${number}s` | `${number}d${number}s${number}ms` | `${number}d${number}m` | `${number}d${number}m${number}ms` | `${number}d${number}m${number}s` | `${number}d${number}m${number}s${number}ms` | `${number}d${number}h` | `${number}d${number}h${number}ms` | `${number}d${number}h${number}s` | `${number}d${number}h${number}s${number}ms` | `${number}d${number}h${number}m` | `${number}d${number}h${number}m${number}ms` | `${number}d${number}h${number}m${number}s` | `${number}d${number}h${number}m${number}s${number}ms` | `${number}w${number}ms` | `${number}w${number}s` | `${number}w${number}s${number}ms` | `${number}w${number}m` | `${number}w${number}m${number}ms` | `${number}w${number}m${number}s` | `${number}w${number}m${number}s${number}ms` | `${number}w${number}h` | `${number}w${number}h${number}ms` | `${number}w${number}h${number}s` | `${number}w${number}h${number}s${number}ms` | `${number}w${number}h${number}m` | `${number}w${number}h${number}m${number}ms` | `${number}w${number}h${number}m${number}s` | `${number}w${number}h${number}m${number}s${number}ms` | `${number}w${number}d` | `${number}w${number}d${number}ms` | `${number}w${number}d${number}s` | `${number}w${number}d${number}s${number}ms` | `${number}w${number}d${number}m` | `${number}w${number}d${number}m${number}ms` | `${number}w${number}d${number}m${number}s` | `${number}w${number}d${number}m${number}s${number}ms` | `${number}w${number}d${number}h` | `${number}w${number}d${number}h${number}ms` | `${number}w${number}d${number}h${number}s` | `${number}w${number}d${number}h${number}s${number}ms` | `${number}w${number}d${number}h${number}m` | `${number}w${number}d${number}h${number}m${number}ms` | `${number}w${number}d${number}h${number}m${number}s` | `${number}w${number}d${number}h${number}m${number}s${number}ms` | `${number}y${number}ms` | `${number}y${number}s` | `${number}y${number}s${number}ms` | `${number}y${number}m` | `${number}y${number}m${number}ms` | `${number}y${number}m${number}s` | `${number}y${number}m${number}s${number}ms` | `${number}y${number}h` | `${number}y${number}h${number}ms` | `${number}y${number}h${number}s` | `${number}y${number}h${number}s${number}ms` | `${number}y${number}h${number}m` | `${number}y${number}h${number}m${number}ms` | `${number}y${number}h${number}m${number}s` | `${number}y${number}h${number}m${number}s${number}ms` | `${number}y${number}d` | `${number}y${number}d${number}ms` | `${number}y${number}d${number}s` | `${number}y${number}d${number}s${number}ms` | `${number}y${number}d${number}m` | `${number}y${number}d${number}m${number}ms` | `${number}y${number}d${number}m${number}s` | `${number}y${number}d${number}m${number}s${number}ms` | `${number}y${number}d${number}h` | `${number}y${number}d${number}h${number}ms` | `${number}y${number}d${number}h${number}s` | `${number}y${number}d${number}h${number}s${number}ms` | `${number}y${number}d${number}h${number}m` | `${number}y${number}d${number}h${number}m${number}ms` | `${number}y${number}d${number}h${number}m${number}s` | `${number}y${number}d${number}h${number}m${number}s${number}ms` | `${number}y${number}w` | `${number}y${number}w${number}ms` | `${number}y${number}w${number}s` | `${number}y${number}w${number}s${number}ms` | `${number}y${number}w${number}m` | `${number}y${number}w${number}m${number}ms` | `${number}y${number}w${number}m${number}s` | `${number}y${number}w${number}m${number}s${number}ms` | `${number}y${number}w${number}h` | `${number}y${number}w${number}h${number}ms` | `${number}y${number}w${number}h${number}s` | `${number}y${number}w${number}h${number}s${number}ms` | `${number}y${number}w${number}h${number}m` | `${number}y${number}w${number}h${number}m${number}ms` | `${number}y${number}w${number}h${number}m${number}s` | `${number}y${number}w${number}h${number}m${number}s${number}ms` | `${number}y${number}w${number}d` | `${number}y${number}w${number}d${number}ms` | `${number}y${number}w${number}d${number}s` | `${number}y${number}w${number}d${number}s${number}ms` | `${number}y${number}w${number}d${number}m` | `${number}y${number}w${number}d${number}m${number}ms` | `${number}y${number}w${number}d${number}m${number}s` | `${number}y${number}w${number}d${number}m${number}s${number}ms` | `${number}y${number}w${number}d${number}h` | `${number}y${number}w${number}d${number}h${number}ms` | `${number}y${number}w${number}d${number}h${number}s` | `${number}y${number}w${number}d${number}h${number}s${number}ms` | `${number}y${number}w${number}d${number}h${number}m` | `${number}y${number}w${number}d${number}h${number}m${number}ms` | `${number}y${number}w${number}d${number}h${number}m${number}s` | `${number}y${number}w${number}d${number}h${number}m${number}s${number}ms` | undefined;
+    handleMinStepChange: (e: DurationString) => void;
+    handleMinStepBlur: () => void;
+};
 //# 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":"AAeA,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;;2BAezC,MAAM;;EAgBrC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,oCAAoC;;4BAYzC,MAAM;;EAetC"}
+{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,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;;2BAezC,MAAM;;EAgBrC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,oCAAoC;;4BAYzC,MAAM;;EAetC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oCAAoC;;6BAYzC,cAAc;;EAe/C"}

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

@@ -47,25 +47,25 @@ import { produce } from 'immer';
     };
 }
 /**
- * Hook to manage `series_name_format` state to ensure panel preview does not rerender until text input is blurred
+ * Hook to manage `seriesNameFormat` 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);
+    const [format, setFormat] = useState(value.seriesNameFormat);
+    const [lastSyncedFormat, setLastSyncedFormat] = useState(value.seriesNameFormat);
+    if (value.seriesNameFormat !== lastSyncedFormat) {
+        setFormat(value.seriesNameFormat);
+        setLastSyncedFormat(value.seriesNameFormat);
     }
     // Update our local state as the user types
     const handleFormatChange = (e)=>{
         setFormat(e);
     };
-    // Propagate changes to the panel preview component when series_name_format TextField is blurred
+    // Propagate changes to the panel preview component when seriesNameFormat TextField is blurred
     const handleFormatBlur = ()=>{
         setLastSyncedFormat(format);
         onChange(produce(value, (draft)=>{
-            draft.series_name_format = format;
+            draft.seriesNameFormat = format;
         }));
     };
     return {
@@ -74,5 +74,33 @@ import { produce } from 'immer';
         handleFormatBlur
     };
 }
+/**
+ * Hook to manage `minStep` state to ensure panel preview does not rerender until text input is blurred
+ */ export function useMinStepState(props) {
+    const { onChange , value  } = props;
+    // TODO: reusable hook or helper util instead of duplicating from useQueryState
+    const [minStep, setMinStep] = useState(value.minStep);
+    const [lastSyncedMinStep, setLastSyncedMinStep] = useState(value.minStep);
+    if (value.minStep !== lastSyncedMinStep) {
+        setMinStep(value.minStep);
+        setLastSyncedMinStep(value.minStep);
+    }
+    // Update our local state as the user types
+    const handleMinStepChange = (e)=>{
+        setMinStep(e);
+    };
+    // Propagate changes to the panel preview component when minStep TextField is blurred
+    const handleMinStepBlur = ()=>{
+        setLastSyncedMinStep(minStep);
+        onChange(produce(value, (draft)=>{
+            draft.minStep = minStep;
+        }));
+    };
+    return {
+        minStep,
+        handleMinStepChange,
+        handleMinStepBlur
+    };
+}
 
 //# 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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\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 = (e: string) => {\n    setQuery(e);\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 = () => {\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 = (e: string) => {\n    setFormat(e);\n  };\n\n  // Propagate changes to the panel preview component when series_name_format TextField is blurred\n  const handleFormatBlur = () => {\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","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;AACjC,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,GAAG,CAACC,CAAS,GAAK;QACvCJ,QAAQ,CAACI,CAAC,CAAC,CAAC;IACd,CAAC,AAAC;IAEF,iHAAiH;IACjH,eAAe;IACf,MAAMC,eAAe,GAAG,IAAM;QAC5BH,kBAAkB,CAACH,KAAK,CAAC,CAAC;QAC1BF,QAAQ,CACNH,OAAO,CAACI,KAAK,EAAE,CAACQ,KAAK,GAAK;YACxBA,KAAK,CAACP,KAAK,GAAGA,KAAK,CAAC;QACtB,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,AAAC;IAEF,OAAO;QAAEA,KAAK;QAAEI,iBAAiB;QAAEE,eAAe;KAAE,CAAC;AACvD,CAAC;AAED;;CAEC,GACD,OAAO,SAASE,cAAc,CAACX,KAA2C,EAAE;IAC1E,MAAM,EAAEC,QAAQ,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAElC,+EAA+E;IAC/E,MAAM,CAACY,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACK,KAAK,CAACY,kBAAkB,CAAC,AAAC;IAC/D,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGnB,QAAQ,CAACK,KAAK,CAACY,kBAAkB,CAAC,AAAC;IACnF,IAAIZ,KAAK,CAACY,kBAAkB,KAAKC,gBAAgB,EAAE;QACjDF,SAAS,CAACX,KAAK,CAACY,kBAAkB,CAAC,CAAC;QACpCE,mBAAmB,CAACd,KAAK,CAACY,kBAAkB,CAAC,CAAC;IAChD,CAAC;IAED,2CAA2C;IAC3C,MAAMG,kBAAkB,GAAG,CAACT,CAAS,GAAK;QACxCK,SAAS,CAACL,CAAC,CAAC,CAAC;IACf,CAAC,AAAC;IAEF,gGAAgG;IAChG,MAAMU,gBAAgB,GAAG,IAAM;QAC7BF,mBAAmB,CAACJ,MAAM,CAAC,CAAC;QAC5BX,QAAQ,CACNH,OAAO,CAACI,KAAK,EAAE,CAACQ,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"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/query-editor-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { DurationString } from '@perses-dev/core';\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 = (e: string) => {\n    setQuery(e);\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 = () => {\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 `seriesNameFormat` 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.seriesNameFormat);\n  const [lastSyncedFormat, setLastSyncedFormat] = useState(value.seriesNameFormat);\n  if (value.seriesNameFormat !== lastSyncedFormat) {\n    setFormat(value.seriesNameFormat);\n    setLastSyncedFormat(value.seriesNameFormat);\n  }\n\n  // Update our local state as the user types\n  const handleFormatChange = (e: string) => {\n    setFormat(e);\n  };\n\n  // Propagate changes to the panel preview component when seriesNameFormat TextField is blurred\n  const handleFormatBlur = () => {\n    setLastSyncedFormat(format);\n    onChange(\n      produce(value, (draft) => {\n        draft.seriesNameFormat = format;\n      })\n    );\n  };\n\n  return { format, handleFormatChange, handleFormatBlur };\n}\n\n/**\n * Hook to manage `minStep` state to ensure panel preview does not rerender until text input is blurred\n */\nexport function useMinStepState(props: PrometheusTimeSeriesQueryEditorProps) {\n  const { onChange, value } = props;\n\n  // TODO: reusable hook or helper util instead of duplicating from useQueryState\n  const [minStep, setMinStep] = useState(value.minStep);\n  const [lastSyncedMinStep, setLastSyncedMinStep] = useState(value.minStep);\n  if (value.minStep !== lastSyncedMinStep) {\n    setMinStep(value.minStep);\n    setLastSyncedMinStep(value.minStep);\n  }\n\n  // Update our local state as the user types\n  const handleMinStepChange = (e: DurationString) => {\n    setMinStep(e);\n  };\n\n  // Propagate changes to the panel preview component when minStep TextField is blurred\n  const handleMinStepBlur = () => {\n    setLastSyncedMinStep(minStep);\n    onChange(\n      produce(value, (draft) => {\n        draft.minStep = minStep;\n      })\n    );\n  };\n\n  return { minStep, handleMinStepChange, handleMinStepBlur };\n}\n"],"names":["useState","produce","useQueryState","props","onChange","value","query","setQuery","lastSyncedQuery","setLastSyncedQuery","handleQueryChange","e","handleQueryBlur","draft","useFormatState","format","setFormat","seriesNameFormat","lastSyncedFormat","setLastSyncedFormat","handleFormatChange","handleFormatBlur","useMinStepState","minStep","setMinStep","lastSyncedMinStep","setLastSyncedMinStep","handleMinStepChange","handleMinStepBlur"],"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,QAAQ;AACjC,SAASC,OAAO,QAAQ,QAAQ;AAOhC;;;;;CAKC,GACD,OAAO,SAASC,cAAcC,KAA2C;IACvE,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGF;IAE5B,kCAAkC;IAClC,MAAM,CAACG,OAAOC,SAAS,GAAGP,SAASK,MAAMC;IAEzC,gHAAgH;IAChH,kCAAkC;IAClC,MAAM,CAACE,iBAAiBC,mBAAmB,GAAGT,SAASK,MAAMC;IAC7D,IAAID,MAAMC,UAAUE,iBAAiB;QACnCD,SAASF,MAAMC;QACfG,mBAAmBJ,MAAMC;IAC3B;IAEA,kDAAkD;IAClD,MAAMI,oBAAoB,CAACC;QACzBJ,SAASI;IACX;IAEA,iHAAiH;IACjH,eAAe;IACf,MAAMC,kBAAkB;QACtBH,mBAAmBH;QACnBF,SACEH,QAAQI,OAAO,CAACQ;YACdA,MAAMP,QAAQA;QAChB;IAEJ;IAEA,OAAO;QAAEA;QAAOI;QAAmBE;IAAgB;AACrD;AAEA;;CAEC,GACD,OAAO,SAASE,eAAeX,KAA2C;IACxE,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGF;IAE5B,+EAA+E;IAC/E,MAAM,CAACY,QAAQC,UAAU,GAAGhB,SAASK,MAAMY;IAC3C,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGnB,SAASK,MAAMY;IAC/D,IAAIZ,MAAMY,qBAAqBC,kBAAkB;QAC/CF,UAAUX,MAAMY;QAChBE,oBAAoBd,MAAMY;IAC5B;IAEA,2CAA2C;IAC3C,MAAMG,qBAAqB,CAACT;QAC1BK,UAAUL;IACZ;IAEA,8FAA8F;IAC9F,MAAMU,mBAAmB;QACvBF,oBAAoBJ;QACpBX,SACEH,QAAQI,OAAO,CAACQ;YACdA,MAAMI,mBAAmBF;QAC3B;IAEJ;IAEA,OAAO;QAAEA;QAAQK;QAAoBC;IAAiB;AACxD;AAEA;;CAEC,GACD,OAAO,SAASC,gBAAgBnB,KAA2C;IACzE,MAAM,EAAEC,SAAQ,EAAEC,MAAK,EAAE,GAAGF;IAE5B,+EAA+E;IAC/E,MAAM,CAACoB,SAASC,WAAW,GAAGxB,SAASK,MAAMkB;IAC7C,MAAM,CAACE,mBAAmBC,qBAAqB,GAAG1B,SAASK,MAAMkB;IACjE,IAAIlB,MAAMkB,YAAYE,mBAAmB;QACvCD,WAAWnB,MAAMkB;QACjBG,qBAAqBrB,MAAMkB;IAC7B;IAEA,2CAA2C;IAC3C,MAAMI,sBAAsB,CAAChB;QAC3Ba,WAAWb;IACb;IAEA,qFAAqF;IACrF,MAAMiB,oBAAoB;QACxBF,qBAAqBH;QACrBnB,SACEH,QAAQI,OAAO,CAACQ;YACdA,MAAMU,UAAUA;QAClB;IAEJ;IAEA,OAAO;QAAEA;QAASI;QAAqBC;IAAkB;AAC3D"}

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

@@ -5,8 +5,8 @@ import { PrometheusDatasourceSelector, TemplateString } from '../../model';
  */
 export interface PrometheusTimeSeriesQuerySpec {
     query: TemplateString;
-    series_name_format?: string;
-    min_step?: DurationString;
+    seriesNameFormat?: string;
+    minStep?: 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,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/time-series-query-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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  seriesNameFormat?: string;\n  minStep?: 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.js

@@ -31,7 +31,7 @@ function PrometheusLabelValuesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _matchers;
+    var _props_value_matchers;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
@@ -55,11 +55,11 @@ function PrometheusLabelValuesVariableEditor(props) {
             /*#__PURE__*/ _jsx(TextField, {
                 label: "Label Name",
                 required: true,
-                value: props.value.label_name,
+                value: props.value.labelName,
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
-                        label_name: e.target.value
+                        labelName: e.target.value
                     });
                 },
                 InputProps: {
@@ -67,7 +67,7 @@ function PrometheusLabelValuesVariableEditor(props) {
                 }
             }),
             /*#__PURE__*/ _jsx(MatcherEditor, {
-                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
@@ -93,7 +93,7 @@ function PrometheusLabelNamesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _matchers;
+    var _props_value_matchers;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
@@ -115,7 +115,7 @@ function PrometheusLabelNamesVariableEditor(props) {
                 ]
             }),
             /*#__PURE__*/ _jsx(MatcherEditor, {
-                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
                 isReadonly: props.isReadonly,
                 onChange: (e)=>{
                     props.onChange({
@@ -181,34 +181,34 @@ function PrometheusPromQLVariableEditor(props) {
             }),
             /*#__PURE__*/ _jsx(TextField, {
                 label: "Label Name",
-                value: props.value.label_name,
+                value: props.value.labelName,
                 InputProps: {
                     readOnly: props.isReadonly
                 },
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
-                        label_name: e.target.value
+                        labelName: e.target.value
                     });
                 }
             })
         ]
     });
 }
-function capturingMatrix(matrix, label_name) {
+function capturingMatrix(matrix, labelName) {
     const captured = new Set();
     for (const sample of matrix.result){
-        const value = sample.metric[label_name];
+        const value = sample.metric[labelName];
         if (value !== undefined) {
             captured.add(value);
         }
     }
     return Array.from(captured.values());
 }
-function capturingVector(vector, label_name) {
+function capturingVector(vector, labelName) {
     const captured = new Set();
     for (const sample of vector.result){
-        const value = sample.metric[label_name];
+        const value = sample.metric[labelName];
         if (value !== undefined) {
             captured.add(value);
         }
@@ -226,8 +226,8 @@ function capturingVector(vector, label_name) {
 };
 export const PrometheusLabelNamesVariable = {
     getVariableOptions: async (spec, ctx)=>{
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : DEFAULT_PROM);
+        var _spec_datasource;
+        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : DEFAULT_PROM);
         const match = spec.matchers ? spec.matchers.map((m)=>replaceTemplateVariables(m, ctx.variables)) : undefined;
         const timeRange = getPrometheusTimeRange(ctx.timeRange);
         const { data: options  } = await client.labelNames({
@@ -239,9 +239,9 @@ export const PrometheusLabelNamesVariable = {
         };
     },
     dependsOn: (spec)=>{
-        var ref;
+        var _spec_matchers;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>parseTemplateVariables(m)).flat()) || []
+            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>parseTemplateVariables(m)).flat()) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
@@ -250,12 +250,12 @@ export const PrometheusLabelNamesVariable = {
 export const PrometheusLabelValuesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const pluginDef = spec;
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : DEFAULT_PROM);
+        var _spec_datasource;
+        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : DEFAULT_PROM);
         const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>replaceTemplateVariables(m, ctx.variables)) : undefined;
         const timeRange = getPrometheusTimeRange(ctx.timeRange);
         const { data: options  } = await client.labelValues({
-            labelName: replaceTemplateVariables(pluginDef.label_name, ctx.variables),
+            labelName: replaceTemplateVariables(pluginDef.labelName, ctx.variables),
             'match[]': match,
             ...timeRange
         });
@@ -264,25 +264,25 @@ export const PrometheusLabelValuesVariable = {
         };
     },
     dependsOn: (spec)=>{
-        var ref;
+        var _spec_matchers;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>parseTemplateVariables(m)).flat().concat(parseTemplateVariables(spec.label_name))) || []
+            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>parseTemplateVariables(m)).flat().concat(parseTemplateVariables(spec.labelName))) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
     createInitialOptions: ()=>({
-            label_name: ''
+            labelName: ''
         })
 };
 export const PrometheusPromQLVariable = {
     getVariableOptions: async (spec, ctx)=>{
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : DEFAULT_PROM);
+        var _spec_datasource;
+        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : DEFAULT_PROM);
         // TODO we may want to manage a range query as well.
         const { data: options  } = await client.instantQuery({
             query: replaceTemplateVariables(spec.expr, ctx.variables)
         });
-        const labelName = replaceTemplateVariables(spec.label_name, ctx.variables);
+        const labelName = replaceTemplateVariables(spec.labelName, ctx.variables);
         let values = [];
         if ((options === null || options === void 0 ? void 0 : options.resultType) === 'matrix') {
             values = capturingMatrix(options, labelName);
@@ -295,13 +295,13 @@ export const PrometheusPromQLVariable = {
     },
     dependsOn: (spec)=>{
         return {
-            variables: parseTemplateVariables(spec.expr).concat(parseTemplateVariables(spec.label_name))
+            variables: parseTemplateVariables(spec.expr).concat(parseTemplateVariables(spec.labelName))
         };
     },
     OptionsEditorComponent: PrometheusPromQLVariableEditor,
     createInitialOptions: ()=>({
             expr: '',
-            label_name: ''
+            labelName: ''
         })
 };