@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-datasource.d.ts

@@ -1,9 +1,5 @@
-import { RequestHeaders } from '@perses-dev/core';
 import { DatasourcePlugin } from '@perses-dev/plugin-system';
 import { PrometheusClient } from '../model';
-export interface PrometheusDatasourceSpec {
-    direct_url?: string;
-    headers?: RequestHeaders;
-}
+import { PrometheusDatasourceSpec } from './types';
 export declare const PrometheusDatasource: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient>;
 //# sourceMappingURL=prometheus-datasource.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prometheus-datasource.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-datasource.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAqD,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE/F,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AA2BD,eAAO,MAAM,oBAAoB,EAAE,gBAAgB,CAAC,wBAAwB,EAAE,gBAAgB,CAI7F,CAAC"}
+{"version":3,"file":"prometheus-datasource.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-datasource.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAkE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5G,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AA8EnD,eAAO,MAAM,oBAAoB,EAAE,gBAAgB,CAAC,wBAAwB,EAAE,gBAAgB,CAK7F,CAAC"}

package/dist/plugins/prometheus-datasource.js

@@ -10,22 +10,28 @@
 // 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 { instantQuery, rangeQuery, labelNames, labelValues } from '../model';
+import { healthCheck, instantQuery, rangeQuery, labelNames, labelValues } from '../model';
+import { PrometheusDatasourceEditor } from './PrometheusDatasourceEditor';
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { direct_url , headers: specHeaders  } = spec;
+    const { directUrl , proxy  } = spec;
     const { proxyUrl  } = options;
     // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified
-    const datasourceUrl = direct_url !== null && direct_url !== void 0 ? direct_url : proxyUrl;
+    const datasourceUrl = directUrl !== null && directUrl !== void 0 ? directUrl : proxyUrl;
     if (datasourceUrl === undefined) {
-        throw new Error('No URL specified for Prometheus client. You can use direct_url in the spec to configure it.');
+        throw new Error('No URL specified for Prometheus client. You can use directUrl in the spec to configure it.');
     }
+    const specHeaders = proxy === null || proxy === void 0 ? void 0 : proxy.spec.headers;
     // Could think about this becoming a class, although it definitely doesn't have to be
     return {
         options: {
             datasourceUrl
         },
+        healthCheck: healthCheck({
+            datasourceUrl,
+            headers: specHeaders
+        }),
         instantQuery: (params, headers)=>instantQuery(params, {
                 datasourceUrl,
                 headers: headers !== null && headers !== void 0 ? headers : specHeaders
@@ -44,11 +50,55 @@ import { instantQuery, rangeQuery, labelNames, labelValues } from '../model';
             })
     };
 };
+const getBuiltinVariableDefinitions = ()=>{
+    return [
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval',
+                value: ()=>'$__interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval',
+                    description: 'Interval that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval_ms',
+                value: ()=>'$__interval_ms',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval_ms',
+                    description: 'Interval in millisecond that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__rate_interval',
+                value: ()=>'$__rate_interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__rate_interval',
+                    description: "Interval at least four times the value of the scrape interval. It avoids problems specific to Prometheus when using 'rate' and 'increase' functions.",
+                    hidden: true
+                }
+            }
+        }
+    ];
+};
 export const PrometheusDatasource = {
     createClient,
-    OptionsEditorComponent: ()=>null,
+    getBuiltinVariableDefinitions,
+    OptionsEditorComponent: PrometheusDatasourceEditor,
     createInitialOptions: ()=>({
-            direct_url: ''
+            directUrl: ''
         })
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/prometheus-datasource.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 { RequestHeaders } from '@perses-dev/core';\nimport { DatasourcePlugin } from '@perses-dev/plugin-system';\nimport { instantQuery, rangeQuery, labelNames, labelValues, PrometheusClient } from '../model';\n\nexport interface PrometheusDatasourceSpec {\n  direct_url?: string;\n  headers?: RequestHeaders;\n}\n\n/**\n * Creates a PrometheusClient for a specific datasource spec.\n */\nconst createClient: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient>['createClient'] = (spec, options) => {\n  const { direct_url, headers: specHeaders } = spec;\n  const { proxyUrl } = options;\n\n  // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified\n  const datasourceUrl = direct_url ?? proxyUrl;\n  if (datasourceUrl === undefined) {\n    throw new Error('No URL specified for Prometheus client. You can use direct_url in the spec to configure it.');\n  }\n\n  // Could think about this becoming a class, although it definitely doesn't have to be\n  return {\n    options: {\n      datasourceUrl,\n    },\n    instantQuery: (params, headers) => instantQuery(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    rangeQuery: (params, headers) => rangeQuery(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    labelNames: (params, headers) => labelNames(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    labelValues: (params, headers) => labelValues(params, { datasourceUrl, headers: headers ?? specHeaders }),\n  };\n};\n\nexport const PrometheusDatasource: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient> = {\n  createClient,\n  OptionsEditorComponent: () => null,\n  createInitialOptions: () => ({ direct_url: '' }),\n};\n"],"names":["instantQuery","rangeQuery","labelNames","labelValues","createClient","spec","options","direct_url","headers","specHeaders","proxyUrl","datasourceUrl","undefined","Error","params","PrometheusDatasource","OptionsEditorComponent","createInitialOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,YAAY,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAA0B,UAAU,CAAC;AAO/F;;CAEC,GACD,MAAMC,YAAY,GAAiF,CAACC,IAAI,EAAEC,OAAO,GAAK;IACpH,MAAM,EAAEC,UAAU,CAAA,EAAEC,OAAO,EAAEC,WAAW,CAAA,EAAE,GAAGJ,IAAI,AAAC;IAClD,MAAM,EAAEK,QAAQ,CAAA,EAAE,GAAGJ,OAAO,AAAC;IAE7B,4FAA4F;IAC5F,MAAMK,aAAa,GAAGJ,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIG,QAAQ,AAAC;IAC7C,IAAIC,aAAa,KAAKC,SAAS,EAAE;QAC/B,MAAM,IAAIC,KAAK,CAAC,6FAA6F,CAAC,CAAC;IACjH,CAAC;IAED,qFAAqF;IACrF,OAAO;QACLP,OAAO,EAAE;YACPK,aAAa;SACd;QACDX,YAAY,EAAE,CAACc,MAAM,EAAEN,OAAO,GAAKR,YAAY,CAACc,MAAM,EAAE;gBAAEH,aAAa;gBAAEH,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIC,WAAW;aAAE,CAAC;QAC3GR,UAAU,EAAE,CAACa,MAAM,EAAEN,OAAO,GAAKP,UAAU,CAACa,MAAM,EAAE;gBAAEH,aAAa;gBAAEH,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIC,WAAW;aAAE,CAAC;QACvGP,UAAU,EAAE,CAACY,MAAM,EAAEN,OAAO,GAAKN,UAAU,CAACY,MAAM,EAAE;gBAAEH,aAAa;gBAAEH,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIC,WAAW;aAAE,CAAC;QACvGN,WAAW,EAAE,CAACW,MAAM,EAAEN,OAAO,GAAKL,WAAW,CAACW,MAAM,EAAE;gBAAEH,aAAa;gBAAEH,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIC,WAAW;aAAE,CAAC;KAC1G,CAAC;AACJ,CAAC,AAAC;AAEF,OAAO,MAAMM,oBAAoB,GAAiE;IAChGX,YAAY;IACZY,sBAAsB,EAAE,IAAM,IAAI;IAClCC,oBAAoB,EAAE,IAAO,CAAA;YAAEV,UAAU,EAAE,EAAE;SAAE,CAAA,AAAC;CACjD,CAAC"}
+{"version":3,"sources":["../../src/plugins/prometheus-datasource.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 { BuiltinVariableDefinition } from '@perses-dev/core';\nimport { DatasourcePlugin } from '@perses-dev/plugin-system';\nimport { healthCheck, instantQuery, rangeQuery, labelNames, labelValues, PrometheusClient } from '../model';\nimport { PrometheusDatasourceSpec } from './types';\nimport { PrometheusDatasourceEditor } from './PrometheusDatasourceEditor';\n\n/**\n * Creates a PrometheusClient for a specific datasource spec.\n */\nconst createClient: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient>['createClient'] = (spec, options) => {\n  const { directUrl, proxy } = spec;\n  const { proxyUrl } = options;\n\n  // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified\n  const datasourceUrl = directUrl ?? proxyUrl;\n  if (datasourceUrl === undefined) {\n    throw new Error('No URL specified for Prometheus client. You can use directUrl in the spec to configure it.');\n  }\n\n  const specHeaders = proxy?.spec.headers;\n\n  // Could think about this becoming a class, although it definitely doesn't have to be\n  return {\n    options: {\n      datasourceUrl,\n    },\n    healthCheck: healthCheck({ datasourceUrl, headers: specHeaders }),\n    instantQuery: (params, headers) => instantQuery(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    rangeQuery: (params, headers) => rangeQuery(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    labelNames: (params, headers) => labelNames(params, { datasourceUrl, headers: headers ?? specHeaders }),\n    labelValues: (params, headers) => labelValues(params, { datasourceUrl, headers: headers ?? specHeaders }),\n  };\n};\n\nconst getBuiltinVariableDefinitions: () => BuiltinVariableDefinition[] = () => {\n  return [\n    {\n      kind: 'BuiltinVariable',\n      spec: {\n        name: '__interval',\n        value: () => '$__interval', // will be overriden when time series query is called\n        source: 'Prometheus',\n        display: {\n          name: '__interval',\n          description:\n            'Interval that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',\n          hidden: true,\n        },\n      },\n    },\n    {\n      kind: 'BuiltinVariable',\n      spec: {\n        name: '__interval_ms',\n        value: () => '$__interval_ms', // will be overriden when time series query is called\n        source: 'Prometheus',\n        display: {\n          name: '__interval_ms',\n          description:\n            'Interval in millisecond that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',\n          hidden: true,\n        },\n      },\n    },\n    {\n      kind: 'BuiltinVariable',\n      spec: {\n        name: '__rate_interval',\n        value: () => '$__rate_interval', // will be overriden when time series query is called\n        source: 'Prometheus',\n        display: {\n          name: '__rate_interval',\n          description:\n            \"Interval at least four times the value of the scrape interval. It avoids problems specific to Prometheus when using 'rate' and 'increase' functions.\",\n          hidden: true,\n        },\n      },\n    },\n  ] as BuiltinVariableDefinition[];\n};\n\nexport const PrometheusDatasource: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient> = {\n  createClient,\n  getBuiltinVariableDefinitions,\n  OptionsEditorComponent: PrometheusDatasourceEditor,\n  createInitialOptions: () => ({ directUrl: '' }),\n};\n"],"names":["healthCheck","instantQuery","rangeQuery","labelNames","labelValues","PrometheusDatasourceEditor","createClient","spec","options","directUrl","proxy","proxyUrl","datasourceUrl","undefined","Error","specHeaders","headers","params","getBuiltinVariableDefinitions","kind","name","value","source","display","description","hidden","PrometheusDatasource","OptionsEditorComponent","createInitialOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,SAASA,WAAW,EAAEC,YAAY,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAA0B,WAAW;AAE5G,SAASC,0BAA0B,QAAQ,+BAA+B;AAE1E;;CAEC,GACD,MAAMC,eAA6F,CAACC,MAAMC;IACxG,MAAM,EAAEC,UAAS,EAAEC,MAAK,EAAE,GAAGH;IAC7B,MAAM,EAAEI,SAAQ,EAAE,GAAGH;IAErB,4FAA4F;IAC5F,MAAMI,gBAAgBH,sBAAAA,uBAAAA,YAAaE;IACnC,IAAIC,kBAAkBC,WAAW;QAC/B,MAAM,IAAIC,MAAM;IAClB;IAEA,MAAMC,cAAcL,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOH,KAAKS;IAEhC,qFAAqF;IACrF,OAAO;QACLR,SAAS;YACPI;QACF;QACAZ,aAAaA,YAAY;YAAEY;YAAeI,SAASD;QAAY;QAC/Dd,cAAc,CAACgB,QAAQD,UAAYf,aAAagB,QAAQ;gBAAEL;gBAAeI,SAASA,oBAAAA,qBAAAA,UAAWD;YAAY;QACzGb,YAAY,CAACe,QAAQD,UAAYd,WAAWe,QAAQ;gBAAEL;gBAAeI,SAASA,oBAAAA,qBAAAA,UAAWD;YAAY;QACrGZ,YAAY,CAACc,QAAQD,UAAYb,WAAWc,QAAQ;gBAAEL;gBAAeI,SAASA,oBAAAA,qBAAAA,UAAWD;YAAY;QACrGX,aAAa,CAACa,QAAQD,UAAYZ,YAAYa,QAAQ;gBAAEL;gBAAeI,SAASA,oBAAAA,qBAAAA,UAAWD;YAAY;IACzG;AACF;AAEA,MAAMG,gCAAmE;IACvE,OAAO;QACL;YACEC,MAAM;YACNZ,MAAM;gBACJa,MAAM;gBACNC,OAAO,IAAM;gBACbC,QAAQ;gBACRC,SAAS;oBACPH,MAAM;oBACNI,aACE;oBACFC,QAAQ;gBACV;YACF;QACF;QACA;YACEN,MAAM;YACNZ,MAAM;gBACJa,MAAM;gBACNC,OAAO,IAAM;gBACbC,QAAQ;gBACRC,SAAS;oBACPH,MAAM;oBACNI,aACE;oBACFC,QAAQ;gBACV;YACF;QACF;QACA;YACEN,MAAM;YACNZ,MAAM;gBACJa,MAAM;gBACNC,OAAO,IAAM;gBACbC,QAAQ;gBACRC,SAAS;oBACPH,MAAM;oBACNI,aACE;oBACFC,QAAQ;gBACV;YACF;QACF;KACD;AACH;AAEA,OAAO,MAAMC,uBAAqF;IAChGpB;IACAY;IACAS,wBAAwBtB;IACxBuB,sBAAsB,IAAO,CAAA;YAAEnB,WAAW;QAAG,CAAA;AAC/C,EAAE"}

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { DatasourceSelector } from '@perses-dev/core/dist/model';
+import { DurationString, PrometheusDatasourceSelector } from '../../model';
+interface DashboardPrometheusTimeSeriesQueryEditorProps {
+    selectedDatasource: PrometheusDatasourceSelector;
+    handleDatasourceChange: (next: DatasourceSelector) => void;
+    promURL: string | undefined;
+    query: string;
+    handleQueryChange: (e: string) => void;
+    handleQueryBlur: () => void;
+    format: string | undefined;
+    handleFormatChange: (e: string) => void;
+    handleFormatBlur: () => void;
+    minStepPlaceholder: string;
+    minStep: string | undefined;
+    handleMinStepChange: (e: DurationString) => void;
+    handleMinStepBlur: () => void;
+}
+export declare function DashboardPrometheusTimeSeriesQueryEditor(props: DashboardPrometheusTimeSeriesQueryEditorProps): JSX.Element;
+export {};
+//# sourceMappingURL=DashboardPrometheusTimeSeriesQueryEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/DashboardPrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAwB,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAGjG,UAAU,6CAA6C;IACrD,kBAAkB,EAAE,4BAA4B,CAAC;IACjD,sBAAsB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,mBAAmB,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,wCAAwC,CAAC,KAAK,EAAE,6CAA6C,eA2D5G"}

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

@@ -0,0 +1,80 @@
+// 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, TextField, FormControl, InputLabel } from '@mui/material';
+import { DatasourceSelect } from '@perses-dev/plugin-system';
+import { PROM_DATASOURCE_KIND } from '../../model';
+import { PromQLEditor } from '../../components';
+export function DashboardPrometheusTimeSeriesQueryEditor(props) {
+    const { selectedDatasource , handleDatasourceChange , promURL , query , handleQueryChange , handleQueryBlur , format , handleFormatBlur , handleMinStepChange , handleFormatChange , handleMinStepBlur , minStepPlaceholder , minStep  } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: "Legend Name",
+                        placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
+                        helperText: "Name for each series in the legend and the tooltip.",
+                        value: format !== null && format !== void 0 ? format : '',
+                        onChange: (e)=>handleFormatChange(e.target.value),
+                        onBlur: handleFormatBlur
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Min Step",
+                        placeholder: minStepPlaceholder,
+                        helperText: "Step parameter of the query. Used by $__interval and $__rate_interval too.",
+                        value: minStep,
+                        onChange: (e)=>handleMinStepChange(e.target.value),
+                        onBlur: handleMinStepBlur,
+                        sx: {
+                            width: '250px'
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=DashboardPrometheusTimeSeriesQueryEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/DashboardPrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, TextField, FormControl, InputLabel } from '@mui/material';\nimport { DatasourceSelect } from '@perses-dev/plugin-system';\nimport { DatasourceSelector } from '@perses-dev/core/dist/model';\nimport { DurationString, PROM_DATASOURCE_KIND, PrometheusDatasourceSelector } from '../../model';\nimport { PromQLEditor } from '../../components';\n\ninterface DashboardPrometheusTimeSeriesQueryEditorProps {\n  selectedDatasource: PrometheusDatasourceSelector;\n  handleDatasourceChange: (next: DatasourceSelector) => void;\n  promURL: string | undefined;\n  query: string;\n  handleQueryChange: (e: string) => void;\n  handleQueryBlur: () => void;\n  format: string | undefined;\n  handleFormatChange: (e: string) => void;\n  handleFormatBlur: () => void;\n  minStepPlaceholder: string;\n  minStep: string | undefined;\n  handleMinStepChange: (e: DurationString) => void;\n  handleMinStepBlur: () => void;\n}\n\nexport function DashboardPrometheusTimeSeriesQueryEditor(props: DashboardPrometheusTimeSeriesQueryEditorProps) {\n  const {\n    selectedDatasource,\n    handleDatasourceChange,\n    promURL,\n    query,\n    handleQueryChange,\n    handleQueryBlur,\n    format,\n    handleFormatBlur,\n    handleMinStepChange,\n    handleFormatChange,\n    handleMinStepBlur,\n    minStepPlaceholder,\n    minStep,\n  } = props;\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      <Stack direction=\"row\" spacing={2}>\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=\"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        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Step parameter of the query. Used by $__interval and $__rate_interval too.\"\n          value={minStep}\n          onChange={(e) => handleMinStepChange(e.target.value as DurationString)}\n          onBlur={handleMinStepBlur}\n          sx={{ width: '250px' }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","FormControl","InputLabel","DatasourceSelect","PROM_DATASOURCE_KIND","PromQLEditor","DashboardPrometheusTimeSeriesQueryEditor","props","selectedDatasource","handleDatasourceChange","promURL","query","handleQueryChange","handleQueryBlur","format","handleFormatBlur","handleMinStepChange","handleFormatChange","handleMinStepBlur","minStepPlaceholder","minStep","spacing","margin","fullWidth","id","datasourcePluginKind","value","onChange","labelId","label","completeConfig","remote","url","onBlur","direction","placeholder","helperText","e","target","sx","width"],"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,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAU,QAAQ,gBAAgB;AAC1E,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAAyBC,oBAAoB,QAAsC,cAAc;AACjG,SAASC,YAAY,QAAQ,mBAAmB;AAkBhD,OAAO,SAASC,yCAAyCC,KAAoD;IAC3G,MAAM,EACJC,mBAAkB,EAClBC,uBAAsB,EACtBC,QAAO,EACPC,MAAK,EACLC,kBAAiB,EACjBC,gBAAe,EACfC,OAAM,EACNC,iBAAgB,EAChBC,oBAAmB,EACnBC,mBAAkB,EAClBC,kBAAiB,EACjBC,mBAAkB,EAClBC,QAAO,EACR,GAAGb;IAEJ,qBACE,MAACR;QAAMsB,SAAS;;0BACd,MAACpB;gBAAYqB,QAAO;gBAAQC,WAAW;;kCAGrC,KAACrB;wBAAWsB,IAAG;kCAAwB;;kCACvC,KAACrB;wBACCsB,sBAAsBrB;wBACtBsB,OAAOlB;wBACPmB,UAAUlB;wBACVmB,SAAQ;wBACRC,OAAM;;;;0BAGV,KAACxB;gBACCyB,gBAAgB;oBAAEC,QAAQ;wBAAEC,KAAKtB;oBAAQ;gBAAE;gBAC3CgB,OAAOf;gBACPgB,UAAUf;gBACVqB,QAAQpB;;0BAEV,MAACd;gBAAMmC,WAAU;gBAAMb,SAAS;;kCAC9B,KAACrB;wBACCuB,SAAS;wBACTM,OAAM;wBACNM,aAAY;wBACZC,YAAW;wBACXV,OAAOZ,mBAAAA,oBAAAA,SAAU;wBACjBa,UAAU,CAACU,IAAMpB,mBAAmBoB,EAAEC,OAAOZ;wBAC7CO,QAAQlB;;kCAEV,KAACf;wBACC6B,OAAM;wBACNM,aAAahB;wBACbiB,YAAW;wBACXV,OAAON;wBACPO,UAAU,CAACU,IAAMrB,oBAAoBqB,EAAEC,OAAOZ;wBAC9CO,QAAQf;wBACRqB,IAAI;4BAAEC,OAAO;wBAAQ;;;;;;AAK/B"}

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { DatasourceSelector } from '@perses-dev/core/dist/model';
+import { DurationString, PrometheusDatasourceSelector } from '../../model';
+interface ExplorePrometheusTimeSeriesQueryEditorProps {
+    selectedDatasource: PrometheusDatasourceSelector;
+    handleDatasourceChange: (next: DatasourceSelector) => void;
+    promURL: string | undefined;
+    query: string;
+    handleQueryChange: (e: string) => void;
+    handleQueryBlur: () => void;
+    format: string | undefined;
+    handleFormatChange: (e: string) => void;
+    handleFormatBlur: () => void;
+    minStepPlaceholder: string;
+    minStep: string | undefined;
+    handleMinStepChange: (e: DurationString) => void;
+    handleMinStepBlur: () => void;
+}
+export declare function ExplorePrometheusTimeSeriesQueryEditor(props: ExplorePrometheusTimeSeriesQueryEditorProps): JSX.Element;
+export {};
+//# sourceMappingURL=ExplorePrometheusTimeSeriesQueryEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExplorePrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-time-series-query/ExplorePrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,kBAAkB,EAAmB,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAgB,cAAc,EAAwB,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAG/G,UAAU,2CAA2C;IACnD,kBAAkB,EAAE,4BAA4B,CAAC;IACjD,sBAAsB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC3D,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,mBAAmB,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,2CAA2C,eA+ExG"}

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

@@ -0,0 +1,115 @@
+// 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, TextField, FormControl, InputLabel, Grid } from '@mui/material';
+import { DatasourceSelect, ProjectSelect, useProjectStore } from '@perses-dev/plugin-system';
+import { DEFAULT_PROM, PROM_DATASOURCE_KIND } from '../../model';
+import { PromQLEditor } from '../../components';
+export function ExplorePrometheusTimeSeriesQueryEditor(props) {
+    const { selectedDatasource , handleDatasourceChange , promURL , query , handleQueryChange , handleQueryBlur , format , handleFormatBlur , handleMinStepChange , handleFormatChange , handleMinStepBlur , minStepPlaceholder , minStep  } = props;
+    const { project , setProject  } = useProjectStore();
+    const handleProjectChange = (next)=>{
+        handleDatasourceChange(DEFAULT_PROM);
+        return setProject(next);
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(Grid, {
+                container: true,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        xs: 2,
+                        children: /*#__PURE__*/ _jsxs(FormControl, {
+                            margin: "dense",
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: "project-label",
+                                    children: "Projects"
+                                }),
+                                /*#__PURE__*/ _jsx(ProjectSelect, {
+                                    labelId: "project-label",
+                                    label: "Projects",
+                                    value: project,
+                                    onChange: handleProjectChange
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        item: true,
+                        children: /*#__PURE__*/ _jsxs(FormControl, {
+                            margin: "dense",
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(InputLabel, {
+                                    id: "prom-datasource-label",
+                                    children: "Prometheus Datasource"
+                                }),
+                                /*#__PURE__*/ _jsx(DatasourceSelect, {
+                                    datasourcePluginKind: PROM_DATASOURCE_KIND,
+                                    value: selectedDatasource,
+                                    project: project.metadata.name,
+                                    onChange: handleDatasourceChange,
+                                    labelId: "prom-datasource-label",
+                                    label: "Prometheus Datasource"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: "Legend Name",
+                        placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
+                        helperText: "Name for each series in the legend and the tooltip.",
+                        value: format !== null && format !== void 0 ? format : '',
+                        onChange: (e)=>handleFormatChange(e.target.value),
+                        onBlur: handleFormatBlur
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Min Step",
+                        placeholder: minStepPlaceholder,
+                        helperText: "Step parameter of the query. Used by $__interval and $__rate_interval too.",
+                        value: minStep,
+                        onChange: (e)=>handleMinStepChange(e.target.value),
+                        onBlur: handleMinStepBlur,
+                        sx: {
+                            width: '250px'
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ExplorePrometheusTimeSeriesQueryEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/ExplorePrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, TextField, FormControl, InputLabel, Grid } from '@mui/material';\nimport { DatasourceSelect, ProjectSelect, useProjectStore } from '@perses-dev/plugin-system';\nimport { DatasourceSelector, ProjectResource } from '@perses-dev/core/dist/model';\nimport { DEFAULT_PROM, DurationString, PROM_DATASOURCE_KIND, PrometheusDatasourceSelector } from '../../model';\nimport { PromQLEditor } from '../../components';\n\ninterface ExplorePrometheusTimeSeriesQueryEditorProps {\n  selectedDatasource: PrometheusDatasourceSelector;\n  handleDatasourceChange: (next: DatasourceSelector) => void;\n  promURL: string | undefined;\n  query: string;\n  handleQueryChange: (e: string) => void;\n  handleQueryBlur: () => void;\n  format: string | undefined;\n  handleFormatChange: (e: string) => void;\n  handleFormatBlur: () => void;\n  minStepPlaceholder: string;\n  minStep: string | undefined;\n  handleMinStepChange: (e: DurationString) => void;\n  handleMinStepBlur: () => void;\n}\n\nexport function ExplorePrometheusTimeSeriesQueryEditor(props: ExplorePrometheusTimeSeriesQueryEditorProps) {\n  const {\n    selectedDatasource,\n    handleDatasourceChange,\n    promURL,\n    query,\n    handleQueryChange,\n    handleQueryBlur,\n    format,\n    handleFormatBlur,\n    handleMinStepChange,\n    handleFormatChange,\n    handleMinStepBlur,\n    minStepPlaceholder,\n    minStep,\n  } = props;\n\n  const { project, setProject } = useProjectStore();\n\n  const handleProjectChange = (next: ProjectResource) => {\n    handleDatasourceChange(DEFAULT_PROM);\n    return setProject(next);\n  };\n\n  return (\n    <Stack spacing={2}>\n      <Grid container spacing={2}>\n        <Grid item xs={2}>\n          <FormControl margin=\"dense\" fullWidth={true}>\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=\"project-label\">Projects</InputLabel>\n            <ProjectSelect labelId=\"project-label\" label=\"Projects\" value={project} onChange={handleProjectChange} />\n          </FormControl>\n        </Grid>\n        <Grid item>\n          <FormControl margin=\"dense\" fullWidth={true}>\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              project={project.metadata.name}\n              onChange={handleDatasourceChange}\n              labelId=\"prom-datasource-label\"\n              label=\"Prometheus Datasource\"\n            />\n          </FormControl>\n        </Grid>\n      </Grid>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n      />\n      <Stack direction=\"row\" spacing={2}>\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=\"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        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Step parameter of the query. Used by $__interval and $__rate_interval too.\"\n          value={minStep}\n          onChange={(e) => handleMinStepChange(e.target.value as DurationString)}\n          onBlur={handleMinStepBlur}\n          sx={{ width: '250px' }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","FormControl","InputLabel","Grid","DatasourceSelect","ProjectSelect","useProjectStore","DEFAULT_PROM","PROM_DATASOURCE_KIND","PromQLEditor","ExplorePrometheusTimeSeriesQueryEditor","props","selectedDatasource","handleDatasourceChange","promURL","query","handleQueryChange","handleQueryBlur","format","handleFormatBlur","handleMinStepChange","handleFormatChange","handleMinStepBlur","minStepPlaceholder","minStep","project","setProject","handleProjectChange","next","spacing","container","item","xs","margin","fullWidth","id","labelId","label","value","onChange","datasourcePluginKind","metadata","name","completeConfig","remote","url","onBlur","direction","placeholder","helperText","e","target","sx","width"],"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,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAEC,UAAU,EAAEC,IAAI,QAAQ,gBAAgB;AAChF,SAASC,gBAAgB,EAAEC,aAAa,EAAEC,eAAe,QAAQ,4BAA4B;AAE7F,SAASC,YAAY,EAAkBC,oBAAoB,QAAsC,cAAc;AAC/G,SAASC,YAAY,QAAQ,mBAAmB;AAkBhD,OAAO,SAASC,uCAAuCC,KAAkD;IACvG,MAAM,EACJC,mBAAkB,EAClBC,uBAAsB,EACtBC,QAAO,EACPC,MAAK,EACLC,kBAAiB,EACjBC,gBAAe,EACfC,OAAM,EACNC,iBAAgB,EAChBC,oBAAmB,EACnBC,mBAAkB,EAClBC,kBAAiB,EACjBC,mBAAkB,EAClBC,QAAO,EACR,GAAGb;IAEJ,MAAM,EAAEc,QAAO,EAAEC,WAAU,EAAE,GAAGpB;IAEhC,MAAMqB,sBAAsB,CAACC;QAC3Bf,uBAAuBN;QACvB,OAAOmB,WAAWE;IACpB;IAEA,qBACE,MAAC7B;QAAM8B,SAAS;;0BACd,MAAC1B;gBAAK2B,SAAS;gBAACD,SAAS;;kCACvB,KAAC1B;wBAAK4B,IAAI;wBAACC,IAAI;kCACb,cAAA,MAAC/B;4BAAYgC,QAAO;4BAAQC,WAAW;;8CAGrC,KAAChC;oCAAWiC,IAAG;8CAAgB;;8CAC/B,KAAC9B;oCAAc+B,SAAQ;oCAAgBC,OAAM;oCAAWC,OAAOb;oCAASc,UAAUZ;;;;;kCAGtF,KAACxB;wBAAK4B,IAAI;kCACR,cAAA,MAAC9B;4BAAYgC,QAAO;4BAAQC,WAAW;;8CAGrC,KAAChC;oCAAWiC,IAAG;8CAAwB;;8CACvC,KAAC/B;oCACCoC,sBAAsBhC;oCACtB8B,OAAO1B;oCACPa,SAASA,QAAQgB,SAASC;oCAC1BH,UAAU1B;oCACVuB,SAAQ;oCACRC,OAAM;;;;;;;0BAKd,KAAC5B;gBACCkC,gBAAgB;oBAAEC,QAAQ;wBAAEC,KAAK/B;oBAAQ;gBAAE;gBAC3CwB,OAAOvB;gBACPwB,UAAUvB;gBACV8B,QAAQ7B;;0BAEV,MAAClB;gBAAMgD,WAAU;gBAAMlB,SAAS;;kCAC9B,KAAC7B;wBACCkC,SAAS;wBACTG,OAAM;wBACNW,aAAY;wBACZC,YAAW;wBACXX,OAAOpB,mBAAAA,oBAAAA,SAAU;wBACjBqB,UAAU,CAACW,IAAM7B,mBAAmB6B,EAAEC,OAAOb;wBAC7CQ,QAAQ3B;;kCAEV,KAACnB;wBACCqC,OAAM;wBACNW,aAAazB;wBACb0B,YAAW;wBACXX,OAAOd;wBACPe,UAAU,CAACW,IAAM9B,oBAAoB8B,EAAEC,OAAOb;wBAC9CQ,QAAQxB;wBACR8B,IAAI;4BAAEC,OAAO;wBAAQ;;;;;;AAK/B"}

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

@@ -25,7 +25,7 @@ import { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEdit
     dependsOn: (spec)=>{
         // Variables can be used in the query and/or in the legend format string
         const queryVariables = parseTemplateVariables(spec.query);
-        const legendVariables = parseTemplateVariables(spec.series_name_format || '');
+        const legendVariables = parseTemplateVariables(spec.seriesNameFormat || '');
         const allVariables = [
             ...new Set([
                 ...queryVariables,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.ts"],"sourcesContent":["// Copyright 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 { TimeSeriesQueryPlugin, parseTemplateVariables } from '@perses-dev/plugin-system';\nimport { getTimeSeriesData } from './get-time-series-data';\nimport { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEditor';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\n/**\n * The core Prometheus TimeSeriesQuery plugin for Perses.\n */\nexport const PrometheusTimeSeriesQuery: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec> = {\n  getTimeSeriesData,\n  OptionsEditorComponent: PrometheusTimeSeriesQueryEditor,\n  createInitialOptions: () => ({\n    query: '',\n    datasource: undefined,\n  }),\n  dependsOn: (spec) => {\n    // Variables can be used in the query and/or in the legend format string\n    const queryVariables = parseTemplateVariables(spec.query);\n    const legendVariables = parseTemplateVariables(spec.series_name_format || '');\n    const allVariables = [...new Set([...queryVariables, ...legendVariables])];\n    return {\n      variables: allVariables,\n    };\n  },\n};\n"],"names":["parseTemplateVariables","getTimeSeriesData","PrometheusTimeSeriesQueryEditor","PrometheusTimeSeriesQuery","OptionsEditorComponent","createInitialOptions","query","datasource","undefined","dependsOn","spec","queryVariables","legendVariables","series_name_format","allVariables","Set","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAgCA,sBAAsB,QAAQ,2BAA2B,CAAC;AAC1F,SAASC,iBAAiB,QAAQ,wBAAwB,CAAC;AAC3D,SAASC,+BAA+B,QAAQ,mCAAmC,CAAC;AAGpF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,GAAyD;IAC7FF,iBAAiB;IACjBG,sBAAsB,EAAEF,+BAA+B;IACvDG,oBAAoB,EAAE,IAAO,CAAA;YAC3BC,KAAK,EAAE,EAAE;YACTC,UAAU,EAAEC,SAAS;SACtB,CAAA,AAAC;IACFC,SAAS,EAAE,CAACC,IAAI,GAAK;QACnB,wEAAwE;QACxE,MAAMC,cAAc,GAAGX,sBAAsB,CAACU,IAAI,CAACJ,KAAK,CAAC,AAAC;QAC1D,MAAMM,eAAe,GAAGZ,sBAAsB,CAACU,IAAI,CAACG,kBAAkB,IAAI,EAAE,CAAC,AAAC;QAC9E,MAAMC,YAAY,GAAG;eAAI,IAAIC,GAAG,CAAC;mBAAIJ,cAAc;mBAAKC,eAAe;aAAC,CAAC;SAAC,AAAC;QAC3E,OAAO;YACLI,SAAS,EAAEF,YAAY;SACxB,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"sources":["../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQuery.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 { TimeSeriesQueryPlugin, parseTemplateVariables } from '@perses-dev/plugin-system';\nimport { getTimeSeriesData } from './get-time-series-data';\nimport { PrometheusTimeSeriesQueryEditor } from './PrometheusTimeSeriesQueryEditor';\nimport { PrometheusTimeSeriesQuerySpec } from './time-series-query-model';\n\n/**\n * The core Prometheus TimeSeriesQuery plugin for Perses.\n */\nexport const PrometheusTimeSeriesQuery: TimeSeriesQueryPlugin<PrometheusTimeSeriesQuerySpec> = {\n  getTimeSeriesData,\n  OptionsEditorComponent: PrometheusTimeSeriesQueryEditor,\n  createInitialOptions: () => ({\n    query: '',\n    datasource: undefined,\n  }),\n  dependsOn: (spec) => {\n    // Variables can be used in the query and/or in the legend format string\n    const queryVariables = parseTemplateVariables(spec.query);\n    const legendVariables = parseTemplateVariables(spec.seriesNameFormat || '');\n    const allVariables = [...new Set([...queryVariables, ...legendVariables])];\n    return {\n      variables: allVariables,\n    };\n  },\n};\n"],"names":["parseTemplateVariables","getTimeSeriesData","PrometheusTimeSeriesQueryEditor","PrometheusTimeSeriesQuery","OptionsEditorComponent","createInitialOptions","query","datasource","undefined","dependsOn","spec","queryVariables","legendVariables","seriesNameFormat","allVariables","Set","variables"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAgCA,sBAAsB,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,+BAA+B,QAAQ,oCAAoC;AAGpF;;CAEC,GACD,OAAO,MAAMC,4BAAkF;IAC7FF;IACAG,wBAAwBF;IACxBG,sBAAsB,IAAO,CAAA;YAC3BC,OAAO;YACPC,YAAYC;QACd,CAAA;IACAC,WAAW,CAACC;QACV,wEAAwE;QACxE,MAAMC,iBAAiBX,uBAAuBU,KAAKJ;QACnD,MAAMM,kBAAkBZ,uBAAuBU,KAAKG,oBAAoB;QACxE,MAAMC,eAAe;eAAI,IAAIC,IAAI;mBAAIJ;mBAAmBC;aAAgB;SAAE;QAC1E,OAAO;YACLI,WAAWF;QACb;IACF;AACF,EAAE"}

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

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

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

@@ -10,23 +10,28 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { produce } from 'immer';
-import { Stack, TextField, FormControl, InputLabel } from '@mui/material';
-import { DatasourceSelect, useDatasourceClient } from '@perses-dev/plugin-system';
-import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PROM_DATASOURCE_KIND } from '../../model';
-import { PromQLEditor } from '../../components';
-import { useQueryState, useFormatState } from './query-editor-model';
+import { useDatasource, useDatasourceClient } from '@perses-dev/plugin-system';
+import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector } from '../../model';
+import { DEFAULT_SCRAPE_INTERVAL } from '../types';
+import { useQueryState, useFormatState, useMinStepState } from './query-editor-model';
+import { DashboardPrometheusTimeSeriesQueryEditor } from './DashboardPrometheusTimeSeriesQueryEditor';
+import { ExplorePrometheusTimeSeriesQueryEditor } from './ExplorePrometheusTimeSeriesQueryEditor';
 /**
  * The options editor component for editing a PrometheusTimeSeriesQuery's spec.
  */ export function PrometheusTimeSeriesQueryEditor(props) {
-    const { onChange , value  } = props;
+    const { onChange , value , isExplore  } = props;
     const { datasource  } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM;
     const { data: client  } = useDatasourceClient(selectedDatasource);
     const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const { data: datasourceResource  } = useDatasource(selectedDatasource);
     const { query , handleQueryChange , handleQueryBlur  } = useQueryState(props);
     const { format , handleFormatChange , handleFormatBlur  } = useFormatState(props);
+    const { minStep , handleMinStepChange , handleMinStepBlur  } = useMinStepState(props);
+    var _ref;
+    const minStepPlaceholder = (_ref = minStep !== null && minStep !== void 0 ? minStep : datasourceResource && (datasourceResource === null || datasourceResource === void 0 ? void 0 : datasourceResource.plugin.spec).scrapeInterval) !== null && _ref !== void 0 ? _ref : DEFAULT_SCRAPE_INTERVAL;
     const handleDatasourceChange = (next)=>{
         if (isPrometheusDatasourceSelector(next)) {
             onChange(produce(value, (draft)=>{
@@ -38,46 +43,37 @@ import { useQueryState, useFormatState } from './query-editor-model';
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 2,
-        children: [
-            /*#__PURE__*/ _jsxs(FormControl, {
-                margin: "dense",
-                fullWidth: false,
-                children: [
-                    /*#__PURE__*/ _jsx(InputLabel, {
-                        id: "prom-datasource-label",
-                        children: "Prometheus Datasource"
-                    }),
-                    /*#__PURE__*/ _jsx(DatasourceSelect, {
-                        datasourcePluginKind: PROM_DATASOURCE_KIND,
-                        value: selectedDatasource,
-                        onChange: handleDatasourceChange,
-                        labelId: "prom-datasource-label",
-                        label: "Prometheus Datasource"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(PromQLEditor, {
-                completeConfig: {
-                    remote: {
-                        url: promURL
-                    }
-                },
-                value: query,
-                onChange: handleQueryChange,
-                onBlur: handleQueryBlur
-            }),
-            /*#__PURE__*/ _jsx(TextField, {
-                fullWidth: true,
-                label: "Legend Name",
-                placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
-                helperText: "Set the name for each series in the legend and the tooltip.",
-                value: format !== null && format !== void 0 ? format : '',
-                onChange: (e)=>handleFormatChange(e.target.value),
-                onBlur: handleFormatBlur
-            })
-        ]
+    if (isExplore) {
+        return /*#__PURE__*/ _jsx(ExplorePrometheusTimeSeriesQueryEditor, {
+            selectedDatasource: selectedDatasource,
+            handleDatasourceChange: handleDatasourceChange,
+            promURL: promURL,
+            query: query,
+            handleQueryChange: handleQueryChange,
+            handleQueryBlur: handleQueryBlur,
+            format: format,
+            handleFormatChange: handleFormatChange,
+            handleFormatBlur: handleFormatBlur,
+            minStepPlaceholder: minStepPlaceholder,
+            minStep: minStep,
+            handleMinStepChange: handleMinStepChange,
+            handleMinStepBlur: handleMinStepBlur
+        });
+    }
+    return /*#__PURE__*/ _jsx(DashboardPrometheusTimeSeriesQueryEditor, {
+        selectedDatasource: selectedDatasource,
+        handleDatasourceChange: handleDatasourceChange,
+        promURL: promURL,
+        query: query,
+        handleQueryChange: handleQueryChange,
+        handleQueryBlur: handleQueryBlur,
+        format: format,
+        handleFormatChange: handleFormatChange,
+        handleFormatBlur: handleFormatBlur,
+        minStepPlaceholder: minStepPlaceholder,
+        minStep: minStep,
+        handleMinStepChange: handleMinStepChange,
+        handleMinStepBlur: handleMinStepBlur
     });
 }