@perses-dev/prometheus-plugin 0.0.0-snapshot-time-range-height-80d08fc

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

@@ -0,0 +1,126 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _utils = require("./utils");
+describe('parseTemplateVariables()', ()=>{
+    const tests = [
+        {
+            text: 'hello $var1 world $var2',
+            variables: [
+                'var1',
+                'var2'
+            ]
+        }
+    ];
+    tests.forEach(({ text , variables  })=>{
+        it(`parses ${text}`, ()=>{
+            expect((0, _utils.parseTemplateVariables)(text)).toEqual(variables);
+        });
+    });
+});
+describe('replaceTemplateVariable()', ()=>{
+    const tests = [
+        {
+            text: 'hello $var1',
+            varName: 'var1',
+            value: 'world',
+            expected: 'hello world'
+        },
+        {
+            text: 'hello $var1 $var1',
+            varName: 'var1',
+            value: 'world',
+            expected: 'hello world world'
+        },
+        {
+            text: 'hello $var1',
+            varName: 'var1',
+            value: [
+                'world',
+                'w'
+            ],
+            expected: 'hello (world|w)'
+        },
+        {
+            text: 'hello $var1 $var1',
+            varName: 'var1',
+            value: [
+                'world',
+                'w'
+            ],
+            expected: 'hello (world|w) (world|w)'
+        }
+    ];
+    tests.forEach(({ text , value , varName , expected  })=>{
+        it(`replaces ${text} ${value}`, ()=>{
+            expect((0, _utils.replaceTemplateVariable)(text, varName, value)).toEqual(expected);
+        });
+    });
+});
+describe('replaceTemplateVariables()', ()=>{
+    const tests = [
+        {
+            text: 'hello $var1 $var2',
+            state: {
+                var1: {
+                    value: 'world',
+                    loading: false
+                },
+                var2: {
+                    value: 'world',
+                    loading: false
+                }
+            },
+            expected: 'hello world world'
+        },
+        {
+            text: 'hello $var1 $var2',
+            state: {
+                var1: {
+                    value: 'world',
+                    loading: false
+                },
+                var2: {
+                    value: [
+                        'a',
+                        'b'
+                    ],
+                    loading: false
+                }
+            },
+            expected: 'hello world (a|b)'
+        }
+    ];
+    tests.forEach(({ text , state , expected  })=>{
+        it(`replaces ${text} ${JSON.stringify(state)}`, ()=>{
+            expect((0, _utils.replaceTemplateVariables)(text, state)).toEqual(expected);
+        });
+    });
+});
+describe('formatSeriesName', ()=>{
+    it('should resolve label name tokens to label values from query response', ()=>{
+        // example from query: node_load15{instance=~\"(demo.do.prometheus.io:9100)\",job='$job'}
+        const inputFormat = 'Test {{job}} {{instance}}';
+        const metric = {
+            __name__: 'node_load15',
+            env: 'demo',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node'
+        };
+        const output = 'Test node demo.do.prometheus.io:9100';
+        expect((0, _utils.formatSeriesName)(inputFormat, metric)).toEqual(output);
+    });
+});

package/dist/cjs/plugins/MatcherEditor.js

@@ -0,0 +1,75 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MatcherEditor", {
+    enumerable: true,
+    get: ()=>MatcherEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _immer = require("immer");
+const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function MatcherEditor({ matchers , onChange  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        children: [
+            matchers.map((matcher, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    display: "flex",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            fullWidth: true,
+                            label: "Series Selector",
+                            value: matcher,
+                            onChange: (e)=>{
+                                const newMatchers = (0, _immer.produce)(matchers, (draft)=>{
+                                    draft[index] = e.target.value;
+                                });
+                                onChange(newMatchers);
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: ()=>{
+                                const newMatchers = (0, _immer.produce)(matchers, (draft)=>{
+                                    draft.splice(index, 1);
+                                });
+                                onChange(newMatchers);
+                            },
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                        })
+                    ]
+                }, index)),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    fullWidth: false,
+                    color: "secondary",
+                    variant: "outlined",
+                    onClick: ()=>{
+                        const newMatchers = (0, _immer.produce)(matchers, (draft)=>{
+                            draft.push('');
+                        });
+                        onChange(newMatchers);
+                    },
+                    children: "Add Series Selector"
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,54 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PrometheusDatasource", {
+    enumerable: true,
+    get: ()=>PrometheusDatasource
+});
+const _model = require("../model");
+/**
+ * Creates a PrometheusClient for a specific datasource spec.
+ */ const createClient = (spec, options)=>{
+    const { direct_url  } = 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;
+    if (datasourceUrl === undefined) {
+        throw new Error('No URL specified for Prometheus client. You can use direct_url in the spec to configure it.');
+    }
+    // Could think about this becoming a class, although it definitely doesn't have to be
+    return {
+        instantQuery: (params)=>(0, _model.instantQuery)(params, {
+                datasourceUrl
+            }),
+        rangeQuery: (params)=>(0, _model.rangeQuery)(params, {
+                datasourceUrl
+            }),
+        labelNames: (params)=>(0, _model.labelNames)(params, {
+                datasourceUrl
+            }),
+        labelValues: (params)=>(0, _model.labelValues)(params, {
+                datasourceUrl
+            })
+    };
+};
+const PrometheusDatasource = {
+    createClient,
+    OptionsEditorComponent: ()=>null,
+    createInitialOptions: ()=>({
+            direct_url: ''
+        })
+};

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

@@ -0,0 +1,36 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PrometheusTimeSeriesQuery", {
+    enumerable: true,
+    get: ()=>PrometheusTimeSeriesQuery
+});
+const _model = require("../../model");
+const _getTimeSeriesData = require("./get-time-series-data");
+const _prometheusTimeSeriesQueryEditor = require("./PrometheusTimeSeriesQueryEditor");
+const PrometheusTimeSeriesQuery = {
+    getTimeSeriesData: _getTimeSeriesData.getTimeSeriesData,
+    OptionsEditorComponent: _prometheusTimeSeriesQueryEditor.PrometheusTimeSeriesQueryEditor,
+    createInitialOptions: ()=>({
+            query: '',
+            datasource: undefined
+        }),
+    dependsOn: (spec)=>{
+        return {
+            variables: (0, _model.parseTemplateVariables)(spec.query)
+        };
+    }
+};

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

@@ -0,0 +1,81 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PrometheusTimeSeriesQueryEditor", {
+    enumerable: true,
+    get: ()=>PrometheusTimeSeriesQueryEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _immer = require("immer");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _model = require("../../model");
+const _queryEditorModel = require("./query-editor-model");
+function PrometheusTimeSeriesQueryEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const { query , handleQueryChange , handleQueryBlur  } = (0, _queryEditorModel.useQueryState)(props);
+    const { format , handleFormatChange , handleFormatBlur  } = (0, _queryEditorModel.useFormatState)(props);
+    const handleDatasourceChange = (next)=>{
+        if ((0, _model.isPrometheusDatasourceSelector)(next)) {
+            onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                const nextDatasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
+                draft.datasource = nextDatasource;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                label: "Query",
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur,
+                margin: "dense"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                label: "Series Name Format",
+                value: format !== null && format !== void 0 ? format : '',
+                onChange: handleFormatChange,
+                onBlur: handleFormatBlur,
+                margin: "dense"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                        datasourcePluginKind: "PrometheusDatasource",
+                        value: datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,84 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTimeSeriesData", {
+    enumerable: true,
+    get: ()=>getTimeSeriesData
+});
+const _dateFns = require("date-fns");
+const _model = require("../../model");
+const getTimeSeriesData = async (spec, context)=>{
+    var ref;
+    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 = (0, _model.getDurationStringSeconds)(spec.min_step);
+    const timeRange = (0, _model.getPrometheusTimeRange)(context.timeRange);
+    const step = (0, _model.getRangeStep)(timeRange, minStep, undefined, context.suggestedStepMs);
+    // Align the time range so that it's a multiple of the step
+    let { start , end  } = timeRange;
+    const utcOffsetSec = new Date().getTimezoneOffset() * 60;
+    const alignedEnd = Math.floor((end + utcOffsetSec) / step) * step - utcOffsetSec;
+    const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;
+    start = alignedStart;
+    end = alignedEnd;
+    // Replace template variable placeholders in PromQL query
+    let query = spec.query.replace('$__rate_interval', `15s`);
+    query = (0, _model.replaceTemplateVariables)(query, context.variableState);
+    var _datasource;
+    // Get the datasource, using the default Prom Datasource if one isn't specified in the query
+    const client = await context.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
+    // Make the request to Prom
+    const response = await client.rangeQuery({
+        query,
+        start,
+        end,
+        step
+    });
+    var ref1;
+    // 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 : [];
+    // Transform response
+    const chartData = {
+        // Return the time range and step we actually used for the query
+        timeRange: {
+            start: (0, _dateFns.fromUnixTime)(start),
+            end: (0, _dateFns.fromUnixTime)(end)
+        },
+        stepMs: step * 1000,
+        // TODO: Maybe do a proper Iterable implementation that defers some of this
+        // processing until its needed
+        series: result.map((value)=>{
+            const { metric , values  } = value;
+            // Name the series after the metric labels or if no metric, just use the
+            // overall query
+            let name = Object.entries(metric).map(([labelName, labelValue])=>`${labelName}="${labelValue}"`).join(', ');
+            if (name === '') name = query;
+            // query editor allows you to define an optional series_name_format
+            // property to customize legend and tooltip display
+            const formattedName = spec.series_name_format ? (0, _model.formatSeriesName)(spec.series_name_format, metric) : name;
+            return {
+                name,
+                values: values.map(_model.parseValueTuple),
+                formattedName
+            };
+        })
+    };
+    return chartData;
+};

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

@@ -0,0 +1,28 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./PrometheusTimeSeriesQuery"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,83 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useQueryState: ()=>useQueryState,
+    useFormatState: ()=>useFormatState
+});
+const _react = require("react");
+const _immer = require("immer");
+function useQueryState(props) {
+    const { onChange , value  } = props;
+    // Local copy of the query's value
+    const [query, setQuery] = (0, _react.useState)(value.query);
+    // This is basically "getDerivedStateFromProps" to make sure if spec's value changes external to this component,
+    // we render with the latest value
+    const [lastSyncedQuery, setLastSyncedQuery] = (0, _react.useState)(value.query);
+    if (value.query !== lastSyncedQuery) {
+        setQuery(value.query);
+        setLastSyncedQuery(value.query);
+    }
+    // Update our local state's copy as the user types
+    const handleQueryChange = (e)=>{
+        setQuery(e.target.value);
+    };
+    // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the
+    // PanelPreview
+    const handleQueryBlur = ()=>{
+        setLastSyncedQuery(query);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    return {
+        query,
+        handleQueryChange,
+        handleQueryBlur
+    };
+}
+function useFormatState(props) {
+    const { onChange , value  } = props;
+    // TODO: reusable hook or helper util instead of duplicating from useQueryState
+    const [format, setFormat] = (0, _react.useState)(value.series_name_format);
+    const [lastSyncedFormat, setLastSyncedFormat] = (0, _react.useState)(value.series_name_format);
+    if (value.series_name_format !== lastSyncedFormat) {
+        setFormat(value.series_name_format);
+        setLastSyncedFormat(value.series_name_format);
+    }
+    // Update our local state as the user types
+    const handleFormatChange = (e)=>{
+        setFormat(e.target.value);
+    };
+    // Propagate changes to the panel preview component when series_name_format TextField is blurred
+    const handleFormatBlur = ()=>{
+        setLastSyncedFormat(format);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.series_name_format = format;
+        }));
+    };
+    return {
+        format,
+        handleFormatChange,
+        handleFormatBlur
+    };
+}

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

@@ -0,0 +1,16 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});