@perses-dev/prometheus-plugin 0.2.1 → 0.4.0

package/dist/cjs/index.js

@@ -0,0 +1,54 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setup = void 0;
+const graph_query_1 = require("./plugins/graph-query");
+const interval_variable_1 = require("./plugins/interval-variable");
+const label_names_variable_1 = require("./plugins/label-names-variable");
+const label_values_variable_1 = require("./plugins/label-values-variable");
+const setup = (registerPlugin) => {
+    registerPlugin({
+        pluginType: 'Variable',
+        kind: label_names_variable_1.PrometheusLabelNamesKind,
+        validate: undefined,
+        plugin: {
+            useVariableOptions: label_names_variable_1.usePrometheusLabelNames,
+        },
+    });
+    registerPlugin({
+        pluginType: 'Variable',
+        kind: label_values_variable_1.PrometheusLabelValuesKind,
+        validate: undefined,
+        plugin: {
+            useVariableOptions: label_values_variable_1.usePrometheusLabelValues,
+        },
+    });
+    registerPlugin({
+        pluginType: 'Variable',
+        kind: interval_variable_1.IntervalKind,
+        validate: undefined,
+        plugin: {
+            useVariableOptions: interval_variable_1.useIntervalValues,
+        },
+    });
+    registerPlugin({
+        pluginType: 'GraphQuery',
+        kind: graph_query_1.PrometheusGraphQueryKind,
+        validate: undefined,
+        plugin: {
+            useGraphQuery: graph_query_1.usePrometheusGraphQuery,
+        },
+    });
+};
+exports.setup = setup;

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

@@ -0,0 +1,14 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/model/datasource.js

@@ -0,0 +1,36 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrometheusConfig = void 0;
+const plugin_system_1 = require("@perses-dev/plugin-system");
+function isPrometheusDatasource(def) {
+    return def.kind === 'Prometheus';
+}
+function usePrometheusConfig(selector) {
+    const datasources = (0, plugin_system_1.useDatasources)();
+    const models = selector === undefined ? [datasources.defaultDatasource] : datasources.getDatasources(selector);
+    if (models.length > 1) {
+        throw new Error('More than one Datasource found');
+    }
+    const model = models[0];
+    if (model === undefined) {
+        throw new Error('Datasource not found');
+    }
+    const spec = model.spec;
+    if (isPrometheusDatasource(spec)) {
+        return { ...model, spec };
+    }
+    throw new Error('Datasource is not a valid Prometheus Datasource');
+}
+exports.usePrometheusConfig = usePrometheusConfig;

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

@@ -0,0 +1,44 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSampleValue = exports.parseValueTuple = void 0;
+/**
+ * Parse a ValueTuple from a PromServer response into the a millisecond-based
+ * unix time and a numeric sample value.
+ */
+function parseValueTuple(data) {
+    const [unixTimeSeconds, sampleValue] = data;
+    // Prom returns unix time in seconds, so convert to ms
+    return [unixTimeSeconds * 1000, parseSampleValue(sampleValue)];
+}
+exports.parseValueTuple = parseValueTuple;
+/**
+ * Parses a string sample value from Prometheus, usually included as the
+ * second member of a ValueTuple.
+ */
+function parseSampleValue(sampleValue) {
+    // Account for Prometheus' representation of +/- infinity, otherwise just
+    // parse the sample value as a float
+    let value;
+    switch (sampleValue) {
+        case '+Inf':
+            value = Number.POSITIVE_INFINITY;
+        case '-Inf':
+            value = Number.NEGATIVE_INFINITY;
+        default:
+            value = parseFloat(sampleValue);
+    }
+    return value;
+}
+exports.parseSampleValue = parseSampleValue;

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

@@ -0,0 +1,101 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLabelValues = exports.useLabelNames = exports.useRangeQuery = exports.useInstantQuery = void 0;
+const react_query_1 = require("react-query");
+const core_1 = require("@perses-dev/core");
+const datasource_1 = require("./datasource");
+/**
+ * Calls the `/api/v1/query` endpoint to get metrics data.
+ */
+function useInstantQuery(params, queryOptions) {
+    return useQueryWithPost('/api/v1/query', params, queryOptions);
+}
+exports.useInstantQuery = useInstantQuery;
+/**
+ * Calls the `/api/v1/query_range` endpoint to get metrics data.
+ */
+function useRangeQuery(params, queryOptions) {
+    return useQueryWithPost('/api/v1/query_range', params, queryOptions);
+}
+exports.useRangeQuery = useRangeQuery;
+/**
+ * Calls the `/api/v1/labels` endpoint to get a list of label names.
+ */
+function useLabelNames(params, queryOptions) {
+    return useQueryWithPost('/api/v1/labels', params, queryOptions);
+}
+exports.useLabelNames = useLabelNames;
+/**
+ * Calls the `/api/v1/label/{labelName}/values` endpoint to get a list of
+ * values for a label.
+ */
+function useLabelValues(params, queryOptions) {
+    const { labelName, ...searchParams } = params;
+    const apiURI = `/api/v1/label/${encodeURIComponent(labelName)}/values`;
+    return useQueryWithGet(apiURI, searchParams, queryOptions);
+}
+exports.useLabelValues = useLabelValues;
+function useQueryWithGet(apiURI, params, queryOptions) {
+    const config = (0, datasource_1.usePrometheusConfig)(queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.datasource);
+    const datasourceURL = (0, core_1.buildDatasourceURL)(config.metadata.name, config.spec.http);
+    const key = [datasourceURL, apiURI, params];
+    return (0, react_query_1.useQuery)(key, () => {
+        let url = `${datasourceURL}${apiURI}`;
+        const urlParams = createSearchParams(params).toString();
+        if (urlParams !== '') {
+            url += `?${urlParams}`;
+        }
+        return (0, core_1.fetchJson)(url, { method: 'GET' });
+    }, queryOptions);
+}
+function useQueryWithPost(apiURI, params, queryOptions) {
+    const config = (0, datasource_1.usePrometheusConfig)(queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.datasource);
+    const datasourceURL = (0, core_1.buildDatasourceURL)(config.metadata.name, config.spec.http);
+    const key = [datasourceURL, apiURI, params];
+    return (0, react_query_1.useQuery)(key, () => {
+        const url = `${datasourceURL}${apiURI}`;
+        const init = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: createSearchParams(params),
+        };
+        return (0, core_1.fetchJson)(url, init);
+    }, queryOptions);
+}
+/**
+ * Creates URLSearchParams from a request params object.
+ */
+function createSearchParams(params) {
+    const searchParams = new URLSearchParams();
+    for (const key in params) {
+        const value = params[key];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'string') {
+            searchParams.append(key, value);
+            continue;
+        }
+        if (typeof value === 'number') {
+            searchParams.append(key, value.toString());
+            continue;
+        }
+        for (const val of value) {
+            searchParams.append(key, val);
+        }
+    }
+    return searchParams;
+}

package/dist/cjs/model/templating.js

@@ -0,0 +1,122 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReplaceTemplateString = exports.useReplaceTemplateStrings = void 0;
+const lezer_promql_1 = require("lezer-promql");
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const REPLACE_IN_NODE_TYPES = new Set([lezer_promql_1.StringLiteral, lezer_promql_1.Duration]);
+/**
+ * Replaces template variable placeholders with variable values from the current
+ * dashbboard in multiple template strings. Since template strings are often
+ * used as request parameters, the results are memoized and only recalculated
+ * if the templateStrings or variable values change.
+ */
+function useReplaceTemplateStrings(templateStrings) {
+    const { variables } = (0, plugin_system_1.useTemplateVariables)();
+    // Replace template string placeholders with variable values
+    return (0, core_1.useMemoized)(() => {
+        const result = [];
+        const needsVariableValuesFor = new Set();
+        for (const templateString of templateStrings !== null && templateStrings !== void 0 ? templateStrings : []) {
+            const replaced = replaceTemplateVariables(templateString, variables);
+            result.push(replaced.result);
+            for (const varName of replaced.needsVariableValuesFor) {
+                needsVariableValuesFor.add(varName);
+            }
+        }
+        return { result, needsVariableValuesFor };
+    }, [templateStrings, variables]);
+}
+exports.useReplaceTemplateStrings = useReplaceTemplateStrings;
+/**
+ * Replaces template variable placeholders with variable values from the current
+ * dashboard in a single template string. Since template strings are often
+ * used as request parameters, the results are memoized and only recalculated
+ * if the templateString or variable values change.
+ */
+function useReplaceTemplateString(templateString) {
+    const { variables } = (0, plugin_system_1.useTemplateVariables)();
+    // Replace template string placeholders with variable values
+    return (0, core_1.useMemoized)(() => {
+        if (templateString === undefined) {
+            return { result: '', needsVariableValuesFor: new Set() };
+        }
+        return replaceTemplateVariables(templateString, variables);
+    }, [templateString, variables]);
+}
+exports.useReplaceTemplateString = useReplaceTemplateString;
+/**
+ * Replace template variable placeholders with variable values.
+ */
+function replaceTemplateVariables(templateString, variablesState) {
+    const needsVariableValuesFor = new Set();
+    let indexAdjustment = 0;
+    const tree = lezer_promql_1.parser.parse(templateString);
+    const cursor = tree.cursor();
+    do {
+        // Only replace variables in string literals for now
+        if (REPLACE_IN_NODE_TYPES.has(cursor.node.type.id))
+            continue;
+        let { from, to } = cursor.node;
+        from += indexAdjustment;
+        to += indexAdjustment;
+        let nodeText = templateString.substring(from, to);
+        nodeText = nodeText.replaceAll(/\$([a-zA-Z0-9_-]+)/g, (match, variableName) => {
+            const state = variablesState[variableName];
+            if (state === undefined) {
+                throw new Error(`Unknown variable '${variableName}'`);
+            }
+            const { value, options } = state;
+            let replacement;
+            if (Array.isArray(value)) {
+                let selectedValues = value;
+                // Is the default ALL value?
+                if (value.length === 1 && value[0] === core_1.DEFAULT_ALL_VALUE) {
+                    // For the default ALL value, we want to use all options as the
+                    // selected values
+                    if (options === undefined) {
+                        // Wait until options are loaded before we do replacement
+                        needsVariableValuesFor.add(variableName);
+                        return match;
+                    }
+                    selectedValues = options;
+                }
+                // TODO: Escape v for regex
+                replacement = selectedValues.map((v) => v).join('|');
+            }
+            else {
+                replacement = escapeVariableValue(value);
+            }
+            return replacement;
+        });
+        // Replace the string literal with the new one and since that may change the
+        // overall length of the string, keep track of an "index adjustment" so we
+        // can shift positions in the tree accordingly
+        const oldLength = to - from;
+        indexAdjustment += nodeText.length - oldLength;
+        templateString = templateString.substring(0, from) + nodeText + templateString.substring(from + oldLength);
+    } while (cursor.next());
+    return {
+        result: templateString,
+        needsVariableValuesFor,
+    };
+}
+const SINGLE_BACKSLASH = '\\';
+const DOUBLE_BACKSLASH = '\\\\';
+function escapeVariableValue(value) {
+    // TODO: What about ["'`]? Do we need to know what kind of quotes the
+    // string literal is using?
+    return value.replaceAll(SINGLE_BACKSLASH, DOUBLE_BACKSLASH);
+}

package/dist/cjs/model/time.js

@@ -0,0 +1,68 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDurationStringSeconds = exports.usePanelRangeStep = exports.useDashboardPrometheusTimeRange = void 0;
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+/**
+ * Get the time range for the current dashboard, converted to Prometheus time.
+ */
+function useDashboardPrometheusTimeRange() {
+    const { timeRange: { start, end }, } = (0, plugin_system_1.useTimeRange)();
+    // Only recalculate the time range if the value on the dashboard changes
+    return (0, core_1.useMemoized)(() => {
+        return {
+            start: Math.ceil((0, date_fns_1.getUnixTime)(start)),
+            end: Math.ceil((0, date_fns_1.getUnixTime)(end)),
+        };
+    }, [start, end]);
+}
+exports.useDashboardPrometheusTimeRange = useDashboardPrometheusTimeRange;
+// Max data points to allow returning from a Prom Query, used to calculate a
+// "safe" step for a range query
+const MAX_PROM_DATA_POINTS = 10000;
+/**
+ * Gets the step to use for a Panel range query. Tries to take into account
+ * the width of the panel, any minimum step/resolution set by the user, and
+ * a "safe" step based on the max data points we want to allow returning from
+ * a Prom query.
+ */
+function usePanelRangeStep(timeRange, minStepSeconds = 15, resolution = 1, suggestedStepMs = 0) {
+    // Keep track of the latest suggested step so we don't re-run the query if it changes
+    const latestSuggestedStep = (0, react_1.useRef)(suggestedStepMs * 1000);
+    latestSuggestedStep.current = suggestedStepMs * 1000;
+    // Whenever the time range changes, recalculate the appropriate step
+    return (0, core_1.useMemoized)(() => {
+        const queryRangeSeconds = timeRange.end - timeRange.start;
+        let safeStep = queryRangeSeconds / MAX_PROM_DATA_POINTS;
+        if (safeStep > 1) {
+            safeStep = Math.ceil(safeStep);
+        }
+        return Math.max(latestSuggestedStep.current * resolution, minStepSeconds, safeStep);
+    }, [timeRange, minStepSeconds, resolution]);
+}
+exports.usePanelRangeStep = usePanelRangeStep;
+/**
+ * Converts a DurationString to seconds, rounding down.
+ */
+function getDurationStringSeconds(durationString) {
+    if (durationString === undefined)
+        return undefined;
+    const duration = (0, core_1.parseDurationString)(durationString);
+    const ms = (0, date_fns_1.milliseconds)(duration);
+    return Math.floor(ms / 1000);
+}
+exports.getDurationStringSeconds = getDurationStringSeconds;

package/dist/cjs/plugins/graph-query.js

@@ -0,0 +1,80 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrometheusGraphQuery = exports.PrometheusGraphQueryKind = void 0;
+const core_1 = require("@perses-dev/core");
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+const parse_sample_values_1 = require("../model/parse-sample-values");
+const prometheus_client_1 = require("../model/prometheus-client");
+const templating_1 = require("../model/templating");
+const time_1 = require("../model/time");
+exports.PrometheusGraphQueryKind = 'PrometheusGraphQuery';
+function usePrometheusGraphQuery(definition, hookOptions) {
+    const minStep = (0, time_1.getDurationStringSeconds)(definition.options.min_step);
+    const timeRange = (0, time_1.useDashboardPrometheusTimeRange)();
+    const step = (0, time_1.usePanelRangeStep)(timeRange, minStep, undefined, hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.suggestedStepMs);
+    // Align the time range so that it's a multiple of the step (TODO: we may
+    // ultimately want to return this from the hook so that charts will know what
+    // time range was actually used?)
+    const { start, end } = (0, core_1.useMemoized)(() => {
+        const { 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;
+        return {
+            start: alignedStart,
+            end: alignedEnd,
+        };
+    }, [timeRange, step]);
+    const { result: query, needsVariableValuesFor } = (0, templating_1.useReplaceTemplateString)(definition.options.query);
+    const request = {
+        query,
+        start,
+        end,
+        step,
+    };
+    const { data: response, isLoading: loading, error, } = (0, prometheus_client_1.useRangeQuery)(request, {
+        enabled: needsVariableValuesFor.size === 0,
+    });
+    const data = (0, react_1.useMemo)(() => {
+        if (response === undefined)
+            return undefined;
+        if (response.status === 'error')
+            return undefined;
+        // TODO: Maybe do a proper Iterable implementation that defers some of this
+        // processing until its needed
+        const chartData = {
+            timeRange: { start: (0, date_fns_1.fromUnixTime)(start), end: (0, date_fns_1.fromUnixTime)(end) },
+            stepMs: step * 1000,
+            series: response.data.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;
+                return {
+                    name,
+                    values: values.map(parse_sample_values_1.parseValueTuple),
+                };
+            }),
+        };
+        return chartData;
+    }, [response, start, end, step, query]);
+    return { data, loading, error: error !== null && error !== void 0 ? error : undefined };
+}
+exports.usePrometheusGraphQuery = usePrometheusGraphQuery;

package/dist/cjs/plugins/interval-variable.js

@@ -0,0 +1,26 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntervalValues = exports.IntervalKind = void 0;
+exports.IntervalKind = 'Inverval';
+/**
+ * Variable plugin for getting a list of variable options from a predefined
+ * list of duration values.
+ */
+function useIntervalValues(definition) {
+    // TODO: What about auto?
+    const { options: { values }, } = definition;
+    return { loading: false, error: undefined, data: values };
+}
+exports.useIntervalValues = useIntervalValues;

package/dist/cjs/plugins/label-names-variable.js

@@ -0,0 +1,44 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrometheusLabelNames = exports.PrometheusLabelNamesKind = void 0;
+const templating_1 = require("../model/templating");
+const time_1 = require("../model/time");
+const prometheus_client_1 = require("../model/prometheus-client");
+exports.PrometheusLabelNamesKind = 'PrometheusLabelNames';
+/**
+ * Get variable option values by running a Prometheus label names query.
+ */
+function usePrometheusLabelNames(definition) {
+    var _a;
+    const { start, end } = (0, time_1.useDashboardPrometheusTimeRange)();
+    const { result: match, needsVariableValuesFor } = (0, templating_1.useReplaceTemplateStrings)(definition.options.match);
+    // Make the request, pausing any requests that are still waiting on variable
+    // values to be filled in/selected
+    const request = {
+        'match[]': match,
+        start,
+        end,
+    };
+    const { data: response, isLoading: loading, error, } = (0, prometheus_client_1.useLabelNames)(request, {
+        enabled: needsVariableValuesFor.size === 0,
+    });
+    const data = (_a = response === null || response === void 0 ? void 0 : response.data) !== null && _a !== void 0 ? _a : [];
+    return {
+        data: data,
+        loading: loading || needsVariableValuesFor.size > 0,
+        error: error !== null && error !== void 0 ? error : undefined,
+    };
+}
+exports.usePrometheusLabelNames = usePrometheusLabelNames;

package/dist/cjs/plugins/label-values-variable.js

@@ -0,0 +1,45 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrometheusLabelValues = exports.PrometheusLabelValuesKind = void 0;
+const core_1 = require("@perses-dev/core");
+const time_1 = require("../model/time");
+const templating_1 = require("../model/templating");
+const prometheus_client_1 = require("../model/prometheus-client");
+exports.PrometheusLabelValuesKind = 'PrometheusLabelValues';
+/**
+ * Get variable option values by running a Prometheus label values query.
+ */
+function usePrometheusLabelValues(definition) {
+    const { start, end } = (0, time_1.useDashboardPrometheusTimeRange)();
+    const { result: match, needsVariableValuesFor } = (0, templating_1.useReplaceTemplateStrings)(definition.options.match);
+    // Make the request, pausing any requests that are still waiting on variable
+    // values to be filled in/selected
+    const request = {
+        labelName: definition.options.label_name,
+        'match[]': match,
+        start,
+        end,
+    };
+    const { data: response, isLoading: loading, error, } = (0, prometheus_client_1.useLabelValues)(request, {
+        enabled: needsVariableValuesFor.size === 0,
+    });
+    const data = (0, core_1.useMemoized)(() => { var _a; return (_a = response === null || response === void 0 ? void 0 : response.data) !== null && _a !== void 0 ? _a : []; }, [response]);
+    return {
+        data: data,
+        loading: loading || needsVariableValuesFor.size > 0,
+        error: error !== null && error !== void 0 ? error : undefined,
+    };
+}
+exports.usePrometheusLabelValues = usePrometheusLabelValues;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/prometheus-plugin",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Prometheus plugin for Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -12,27 +12,26 @@
     "url": "https://github.com/perses/perses/issues"
   },
   "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist/",
-    "build": "tsc",
+    "build": "tsc --build",
+    "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "test": "echo 'no test to run' && exit 0",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
     "@lezer/lr": "^0.15.8",
-    "@perses-dev/core": "^0.2.1",
-    "@perses-dev/plugin-system": "^0.2.1",
+    "@perses-dev/core": "^0.4.0",
+    "@perses-dev/plugin-system": "^0.4.0",
     "date-fns": "^2.28.0",
-    "lezer-promql": "^0.22.0",
-    "react-query": "^3.34.16"
-  },
-  "devDependencies": {
-    "react": "^17.0.2"
+    "lezer-promql": "^0.22.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-query": "^3.34.16"
   },
   "perses": {
     "kind": "Plugin",