@perses-dev/prometheus-plugin 0.57.1 → 0.58.0-beta.1

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

@@ -21,9 +21,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get fetchResults () {
-        return fetchResults;
-    },
     get healthCheck () {
         return healthCheck;
     },
@@ -36,6 +33,9 @@ _export(exports, {
     get labelValues () {
         return labelValues;
     },
+    get mergeQueryParams () {
+        return mergeQueryParams;
+    },
     get metricMetadata () {
         return metricMetadata;
     },
@@ -49,7 +49,7 @@ _export(exports, {
         return series;
     }
 });
-const _core = require("@perses-dev/core");
+const _client = require("@perses-dev/client");
 /**
  * Builds a query string from datasource-level query parameters.
  * Optionally merges with existing URLSearchParams.
@@ -58,19 +58,31 @@ const _core = require("@perses-dev/core");
     const urlParams = initialParams || new URLSearchParams();
     if (queryParams) {
         Object.entries(queryParams).forEach(([key, value])=>{
-            urlParams.set(key, value);
+            if (initialParams?.has(key)) return;
+            if (Array.isArray(value)) {
+                value.forEach((v)=>urlParams.append(key, v));
+            } else {
+                urlParams.set(key, value);
+            }
         });
     }
     const queryString = urlParams.toString();
     return queryString !== '' ? `?${queryString}` : '';
 }
+function mergeQueryParams(defaults, overrides) {
+    if (!defaults && !overrides) return undefined;
+    return {
+        ...defaults,
+        ...overrides
+    };
+}
 function healthCheck(queryOptions) {
     return async ()=>{
         const url = `${queryOptions.datasourceUrl}/-/healthy${buildQueryString(queryOptions.queryParams)}`;
         try {
-            const resp = await (0, _core.fetch)(url, {
+            const resp = await fetch(url, {
                 headers: queryOptions.headers,
-                signal: queryOptions.abortSignal
+                signal: queryOptions.signal
             });
             return resp.status === 200;
         } catch  {
@@ -114,15 +126,16 @@ function parseQuery(params, queryOptions) {
     return fetchWithPost(apiURI, params, queryOptions);
 }
 function fetchWithGet(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers, queryParams } = queryOptions;
+    const { datasourceUrl, headers, queryParams, signal } = queryOptions;
     const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams, createSearchParams(params))}`;
-    return (0, _core.fetchJson)(url, {
+    return (0, _client.fetchJson)(url, {
         method: 'GET',
-        headers
+        headers,
+        signal
     });
 }
 function fetchWithPost(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers, abortSignal: signal, queryParams } = queryOptions;
+    const { datasourceUrl, headers, signal, queryParams } = queryOptions;
     const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams)}`;
     const init = {
         method: 'POST',
@@ -133,7 +146,7 @@ function fetchWithPost(apiURI, params, queryOptions) {
         signal,
         body: createSearchParams(params)
     };
-    return fetchResults(url, init);
+    return (0, _client.fetchJson)(url, init);
 }
 /**
  * Creates URLSearchParams from a request params object.
@@ -156,11 +169,3 @@ function fetchWithPost(apiURI, params, queryOptions) {
     }
     return searchParams;
 }
-async function fetchResults(...args) {
-    const response = await (0, _core.fetch)(...args);
-    const json = await response.json();
-    return {
-        ...json,
-        rawResponse: response
-    };
-}

package/lib/cjs/model/time.js

@@ -31,8 +31,8 @@ _export(exports, {
         return getRangeStep;
     }
 });
-const _core = require("@perses-dev/core");
 const _datefns = require("date-fns");
+const _spec = require("@perses-dev/spec");
 function getPrometheusTimeRange(timeRange) {
     const { start, end } = timeRange;
     return {
@@ -54,7 +54,7 @@ function getRangeStep(timeRange, minStepSeconds = 15, resolution = 1, suggestedS
 }
 function getDurationStringSeconds(durationString) {
     if (!durationString) return undefined;
-    const duration = (0, _core.parseDurationString)(durationString);
+    const duration = (0, _spec.parseDurationString)(durationString);
     const ms = (0, _datefns.milliseconds)(duration);
     return Math.floor(ms / 1000);
 }

package/lib/cjs/plugins/PrometheusDatasourceEditor.js

@@ -21,58 +21,17 @@ Object.defineProperty(exports, "PrometheusDatasourceEditor", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _react = require("react");
 const _types = require("./types");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function PrometheusDatasourceEditor(props) {
     const { value, onChange, isReadonly } = props;
     // Counter for generating unique IDs
@@ -81,10 +40,10 @@ function PrometheusDatasourceEditor(props) {
     // manipulating a map directly which causes weird UX.
     const [entries, setEntries] = (0, _react.useState)(()=>{
         const queryParams = value.queryParams ?? {};
-        return Object.entries(queryParams).map(([key, value])=>({
+        return Object.entries(queryParams).map(([key, val])=>({
                 id: String(nextIdRef.current++),
                 key,
-                value
+                value: Array.isArray(val) ? val.join(',') : val
             }));
     });
     // Check for duplicate keys
@@ -100,12 +59,15 @@ function PrometheusDatasourceEditor(props) {
         }
     });
     const hasDuplicates = duplicateKeys.size > 0;
-    // Convert entries array to object and trigger onChange
+    // Convert entries array to object and trigger onChange.
+    // Values containing commas are stored as arrays to preserve the round-trip
+    // with the load-time join(',') in useState above.
     const syncToParent = (newEntries)=>{
         const newParams = {};
         newEntries.forEach(({ key, value })=>{
             if (key !== '') {
-                newParams[key] = value;
+                const parts = value.split(',');
+                newParams[key] = parts.length > 1 ? parts : value;
             }
         });
         onChange({

package/lib/cjs/plugins/PrometheusLabelNamesVariable.js

@@ -23,16 +23,17 @@ Object.defineProperty(exports, "PrometheusLabelNamesVariable", {
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../model");
 const _prometheusvariables = require("./prometheus-variables");
+const _interpolation = require("./interpolation");
 const PrometheusLabelNamesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const datasourceSelector = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, ctx.variables, await ctx.datasourceStore.listDatasourceSelectItems(_model.PROM_DATASOURCE_KIND)) ?? _model.DEFAULT_PROM;
-        const client = await ctx.datasourceStore.getDatasourceClient(datasourceSelector);
+        const { client, requestOptions } = await (0, _interpolation.resolvePrometheusDatasource)(ctx.datasourceStore, datasourceSelector, ctx.variables);
         const match = spec.matchers ? spec.matchers.map((m)=>(0, _pluginsystem.replaceVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options } = await client.labelNames({
             'match[]': match,
             ...timeRange
-        });
+        }, requestOptions);
         return {
             data: (0, _prometheusvariables.stringArrayToVariableOptions)(options)
         };

package/lib/cjs/plugins/PrometheusLabelValuesVariable.js

@@ -23,18 +23,19 @@ Object.defineProperty(exports, "PrometheusLabelValuesVariable", {
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../model");
 const _prometheusvariables = require("./prometheus-variables");
+const _interpolation = require("./interpolation");
 const PrometheusLabelValuesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const pluginDef = spec;
         const datasourceSelector = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, ctx.variables, await ctx.datasourceStore.listDatasourceSelectItems(_model.PROM_DATASOURCE_KIND)) ?? _model.DEFAULT_PROM;
-        const client = await ctx.datasourceStore.getDatasourceClient(datasourceSelector);
+        const { client, requestOptions } = await (0, _interpolation.resolvePrometheusDatasource)(ctx.datasourceStore, datasourceSelector, ctx.variables);
         const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>(0, _pluginsystem.replaceVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options } = await client.labelValues({
             labelName: (0, _pluginsystem.replaceVariables)(pluginDef.labelName, ctx.variables),
             'match[]': match,
             ...timeRange
-        });
+        }, requestOptions);
         return {
             data: (0, _prometheusvariables.stringArrayToVariableOptions)(options)
         };

package/lib/cjs/plugins/PrometheusPromQLVariable.js

@@ -23,14 +23,15 @@ Object.defineProperty(exports, "PrometheusPromQLVariable", {
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../model");
 const _prometheusvariables = require("./prometheus-variables");
+const _interpolation = require("./interpolation");
 const PrometheusPromQLVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const datasourceSelector = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, ctx.variables, await ctx.datasourceStore.listDatasourceSelectItems(_model.PROM_DATASOURCE_KIND)) ?? _model.DEFAULT_PROM;
-        const client = await ctx.datasourceStore.getDatasourceClient(datasourceSelector);
+        const { client, requestOptions } = await (0, _interpolation.resolvePrometheusDatasource)(ctx.datasourceStore, datasourceSelector, ctx.variables);
         // TODO we may want to manage a range query as well.
         const { data: options } = await client.instantQuery({
             query: (0, _pluginsystem.replaceVariables)(spec.expr, ctx.variables)
-        });
+        }, requestOptions);
         const labelName = (0, _pluginsystem.replaceVariables)(spec.labelName, ctx.variables);
         let values = [];
         if (options?.resultType === 'matrix') {

package/lib/cjs/plugins/interpolation.js

@@ -0,0 +1,54 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get interpolateDatasourceProxyParams () {
+        return interpolateDatasourceProxyParams;
+    },
+    get resolvePrometheusDatasource () {
+        return resolvePrometheusDatasource;
+    }
+});
+const _components = require("@perses-dev/components");
+async function resolvePrometheusDatasource(datasourceStore, selector, variableState) {
+    const [client, datasource] = await Promise.all([
+        datasourceStore.getDatasourceClient(selector),
+        datasourceStore.getDatasource(selector)
+    ]);
+    const { headers, queryParams } = interpolateDatasourceProxyParams(datasource, variableState);
+    return {
+        client,
+        requestOptions: {
+            headers,
+            queryParams
+        }
+    };
+}
+function interpolateDatasourceProxyParams(datasource, variableState) {
+    const spec = datasource.plugin.spec;
+    const rawHeaders = spec.proxy?.spec?.headers;
+    const rawQueryParams = spec.queryParams;
+    return {
+        headers: rawHeaders ? (0, _components.interpolateHeaders)(rawHeaders, variableState) : undefined,
+        queryParams: rawQueryParams ? (0, _components.interpolateQueryParams)(rawQueryParams, variableState) : undefined
+    };
+}

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

@@ -22,6 +22,14 @@ Object.defineProperty(exports, "PrometheusDatasource", {
 });
 const _model = require("../model");
 const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
+function wrapClientMethod(fn, datasourceUrl, specHeaders, specQueryParams) {
+    return (params, options)=>fn(params, {
+            datasourceUrl,
+            headers: options?.headers ?? specHeaders,
+            signal: options?.signal,
+            queryParams: (0, _model.mergeQueryParams)(specQueryParams, options?.queryParams)
+        });
+}
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
@@ -43,48 +51,13 @@ const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
             headers: specHeaders,
             queryParams
         }),
-        instantQuery: (params, headers, abortSignal)=>(0, _model.instantQuery)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        rangeQuery: (params, headers, abortSignal)=>(0, _model.rangeQuery)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        labelNames: (params, headers, abortSignal)=>(0, _model.labelNames)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        labelValues: (params, headers, abortSignal)=>(0, _model.labelValues)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        metricMetadata: (params, headers, abortSignal)=>(0, _model.metricMetadata)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        series: (params, headers, abortSignal)=>(0, _model.series)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            }),
-        parseQuery: (params, headers, abortSignal)=>(0, _model.parseQuery)(params, {
-                datasourceUrl,
-                headers: headers ?? specHeaders,
-                abortSignal,
-                queryParams
-            })
+        instantQuery: wrapClientMethod(_model.instantQuery, datasourceUrl, specHeaders, queryParams),
+        rangeQuery: wrapClientMethod(_model.rangeQuery, datasourceUrl, specHeaders, queryParams),
+        labelNames: wrapClientMethod(_model.labelNames, datasourceUrl, specHeaders, queryParams),
+        labelValues: wrapClientMethod(_model.labelValues, datasourceUrl, specHeaders, queryParams),
+        metricMetadata: wrapClientMethod(_model.metricMetadata, datasourceUrl, specHeaders, queryParams),
+        series: wrapClientMethod(_model.series, datasourceUrl, specHeaders, queryParams),
+        parseQuery: wrapClientMethod(_model.parseQuery, datasourceUrl, specHeaders, queryParams)
     };
 };
 const getBuiltinVariableDefinitions = ()=>{

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

@@ -20,11 +20,12 @@ Object.defineProperty(exports, "getTimeSeriesData", {
         return getTimeSeriesData;
     }
 });
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _datefns = require("date-fns");
+const _spec = require("@perses-dev/spec");
 const _model = require("../../model");
 const _utils = require("../../utils");
+const _interpolation = require("../interpolation");
 const _types = require("../types");
 const _replaceprombuiltinvariables = require("./replace-prom-builtin-variables");
 const getTimeSeriesData = async (spec, context, abortSignal)=>{
@@ -37,7 +38,8 @@ const getTimeSeriesData = async (spec, context, abortSignal)=>{
     const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(_model.PROM_DATASOURCE_KIND);
     const selectedDatasource = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, context.variableState, listDatasourceSelectItems) ?? _model.DEFAULT_PROM;
     const datasource = await context.datasourceStore.getDatasource(selectedDatasource);
-    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _core.parseDurationString)(datasource.plugin.spec.scrapeInterval ?? _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    const interpolatedOptions = (0, _interpolation.interpolateDatasourceProxyParams)(datasource, context.variableState);
+    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _spec.parseDurationString)(datasource.plugin.spec.scrapeInterval ?? _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
     // Min step is the lower bound of the interval between data points
     // If no value is provided for it, it should default to the scrape interval of the datasource
     const minStep = (0, _model.getDurationStringSeconds)(// resolve any variable that may have been provided
@@ -79,7 +81,10 @@ const getTimeSeriesData = async (spec, context, abortSignal)=>{
             response = await client.instantQuery({
                 query,
                 time: end
-            }, undefined, abortSignal);
+            }, {
+                ...interpolatedOptions,
+                signal: abortSignal
+            });
             break;
         case 'range':
         default:
@@ -88,7 +93,10 @@ const getTimeSeriesData = async (spec, context, abortSignal)=>{
                 start,
                 end,
                 step
-            }, undefined, abortSignal);
+            }, {
+                ...interpolatedOptions,
+                signal: abortSignal
+            });
             break;
     }
     // TODO: What about error responses from Prom that have a response body?

package/lib/cjs/plugins/prometheus-time-series-query/replace-prom-builtin-variables.js

@@ -21,13 +21,13 @@ Object.defineProperty(exports, "replacePromBuiltinVariables", {
     }
 });
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 function replacePromBuiltinVariables(query, minStepMs, intervalMs) {
     let updatedQuery = (0, _pluginsystem.replaceVariable)(query, '__interval_ms', intervalMs.toString());
-    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(intervalMs)));
+    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__interval', (0, _spec.formatDuration)((0, _spec.convertTimeToDuration)(intervalMs)));
     // The $__rate_interval variable is meant to be used with the rate() promQL function.
     // It is defined as max($__interval + Min step, 4 * Min step)
     const rateIntervalMs = Math.max(intervalMs + minStepMs, 4 * minStepMs);
-    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__rate_interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(rateIntervalMs)));
+    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__rate_interval', (0, _spec.formatDuration)((0, _spec.convertTimeToDuration)(rateIntervalMs)));
     return updatedQuery;
 }

package/lib/components/TreeNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.d.ts","sourceRoot":"","sources":["../../../src/components/TreeNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAA8D,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,OAAqB,MAAM,cAAc,CAAC;AAejD,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAiB7D,UAAU,aAAa;IAErB,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAEjC,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,EAAE,4BAA4B,CAAC;IAGzC,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,eAAe,GAChB,EAAE,aAAa,GAAG,YAAY,CAoP9B"}
+{"version":3,"file":"TreeNode.d.ts","sourceRoot":"","sources":["../../../src/components/TreeNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAA8D,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,OAAqB,MAAM,cAAc,CAAC;AAejD,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAiB7D,UAAU,aAAa;IAErB,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAEjC,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,EAAE,4BAA4B,CAAC;IAGzC,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,eAAe,GAChB,EAAE,aAAa,GAAG,YAAY,CAoP9B"}

package/lib/components/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TreeNode.tsx"],"sourcesContent":["// Copyright 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\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/pages/query/TreeNode.tsx\n\nimport { Box, CircularProgress, List, ListItem, Stack, Tooltip, Typography, useTheme } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { ReactElement, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport AlertCircle from 'mdi-material-ui/AlertCircle';\nimport { StatusError } from '@perses-dev/core';\nimport { PrometheusDatasourceSelector } from '../model';\nimport ASTNode, { nodeType } from './promql/ast';\nimport { escapeString, getNodeChildren } from './promql/utils';\nimport { formatNode } from './promql/format';\nimport serializeNode from './promql/serialize';\nimport { functionSignatures } from './promql/functionSignatures';\nimport { useInstantQuery } from './query';\n\n// The indentation factor for each level of the tree.\nconst nodeIndent = 5;\nconst connectorWidth = nodeIndent * 5;\n\n// max number of label names and values to show in the individual query status\nconst maxLabelNames = 10;\nconst maxLabelValues = 10;\n\ntype NodeState = 'waiting' | 'running' | 'error' | 'success';\n\n// mergeChildStates basically returns the \"worst\" state found among the children.\nconst mergeChildStates = (states: NodeState[]): NodeState => {\n  if (states.includes('error')) {\n    return 'error';\n  }\n  if (states.includes('waiting')) {\n    return 'waiting';\n  }\n  if (states.includes('running')) {\n    return 'running';\n  }\n\n  return 'success';\n};\n\ninterface TreeNodeProps {\n  // The AST node to render.\n  node: ASTNode;\n  // The parent element of this node.\n  parentEl?: HTMLDivElement | null;\n  // Used to compute the position of the connector line between this node and its parent.\n  reverse: boolean;\n  // Datasource used for the node's individual query.\n  datasource: PrometheusDatasourceSelector;\n  // The index of this node in its parent's children.\n  // Used to render the node's individual query.\n  childIdx: number;\n  // Function to report the node state to the parent.\n  // Used to render the node's individual query.\n  reportNodeState?: (childIdx: number, state: NodeState) => void;\n}\n\nexport default function TreeNode({\n  node,\n  parentEl,\n  reverse,\n  datasource,\n  childIdx,\n  reportNodeState,\n}: TreeNodeProps): ReactElement {\n  const theme = useTheme();\n  const children = getNodeChildren(node);\n\n  // A normal ref won't work properly here because the ref's `current` property\n  // going from `null` to defined won't trigger a re-render of the child\n  // component, since it's not a React state update. So we manually have to\n  // create a state update using a callback ref. See also\n  // https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs\n  const [nodeEl, setNodeEl] = useState<HTMLDivElement | null>(null);\n  const nodeRef = useCallback((node: HTMLDivElement) => setNodeEl(node), []);\n\n  const [resultStats, setResultStats] = useState<{\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  }>({\n    numSeries: 0,\n    labelExamples: {},\n    sortedLabelCards: [],\n  });\n\n  const [connectorStyle, setConnectorStyle] = useState({\n    borderColor: theme.palette.grey['500'],\n    borderLeftStyle: 'solid',\n    borderLeftWidth: 2,\n    width: connectorWidth,\n    left: -connectorWidth,\n  });\n\n  const [childStates, setChildStates] = useState<NodeState[]>(children.map(() => 'waiting'));\n  const mergedChildState = useMemo(() => mergeChildStates(childStates), [childStates]);\n\n  // Optimize range vector selector fetches to give us the info we're looking for\n  // more cheaply. E.g. 'foo[7w]' can be expensive to fully fetch, but wrapping it\n  // in 'last_over_time(foo[7w])' is cheaper and also gives us all the info we\n  // need (number of series and labels).\n  let queryNode = node;\n  if (queryNode.type === nodeType.matrixSelector) {\n    queryNode = {\n      type: nodeType.call,\n      func: functionSignatures.last_over_time!,\n      args: [node],\n    };\n  }\n\n  // Individual query for the current node\n  const {\n    data: instantQueryResponse,\n    isFetching,\n    error,\n  } = useInstantQuery(serializeNode(queryNode) ?? '', datasource, mergedChildState === 'success');\n\n  // report the node state to the parent\n  useEffect(() => {\n    if (reportNodeState) {\n      if (mergedChildState === 'error' || error) {\n        reportNodeState(childIdx, 'error');\n      } else if (isFetching) {\n        reportNodeState(childIdx, 'running');\n      }\n    }\n  }, [mergedChildState, error, isFetching, reportNodeState, childIdx]);\n\n  // This function is passed down to the child nodes so they can report their state.\n  const childReportNodeState = useCallback(\n    (childIdx: number, state: NodeState) => {\n      setChildStates((prev) => {\n        const newStates = [...prev];\n        newStates[childIdx] = state;\n        return newStates;\n      });\n    },\n    [setChildStates]\n  );\n\n  // Update the size and position of tree connector lines based on the node's and its parent's position.\n  useLayoutEffect(() => {\n    if (parentEl === undefined) {\n      // We're the root node.\n      return;\n    }\n\n    if (parentEl === null || nodeEl === null) {\n      // Either of the two connected nodes hasn't been rendered yet.\n      return;\n    }\n\n    const parentRect = parentEl.getBoundingClientRect();\n    const nodeRect = nodeEl.getBoundingClientRect();\n    if (reverse) {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: 'calc(50% - 1px)',\n        bottom: nodeRect.bottom - parentRect.top,\n        borderTopLeftRadius: 10,\n        borderTopStyle: 'solid',\n        borderBottomLeftRadius: undefined,\n      }));\n    } else {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: parentRect.bottom - nodeRect.top,\n        bottom: 'calc(50% - 1px)',\n        borderBottomLeftRadius: 10,\n        borderBottomStyle: 'solid',\n        borderTopLeftRadius: undefined,\n      }));\n    }\n  }, [parentEl, nodeEl, reverse, nodeRef, setConnectorStyle]);\n\n  // Update the node info state based on the query result.\n  useEffect(() => {\n    if (instantQueryResponse?.status !== 'success') {\n      return;\n    }\n\n    if (reportNodeState) {\n      reportNodeState(childIdx, 'success');\n    }\n\n    let resultSeries = 0;\n    // labelValuesByName records the number of times each label value appears for each label name.\n    const labelValuesByName: Record<string, Record<string, number>> = {};\n    const { resultType, result } = instantQueryResponse.data;\n\n    if (resultType === 'scalar' || resultType === 'string') {\n      resultSeries = 1;\n    } else if (result && result.length > 0) {\n      resultSeries = result.length;\n      result.forEach((s) => {\n        Object.entries(s.metric).forEach(([ln, lv]) => {\n          // TODO: If we ever want to include __name__ here again, we cannot use the\n          // last_over_time(foo[7d]) optimization since that removes the metric name.\n          if (ln !== '__name__') {\n            labelValuesByName[ln] = labelValuesByName[ln] ?? {};\n            labelValuesByName[ln]![lv] = (labelValuesByName[ln]![lv] ?? 0) + 1;\n          }\n        });\n      });\n    }\n\n    // labelCardinalities records the number of unique label values for each label name.\n    const labelCardinalities: Record<string, number> = {};\n    // labelExamples records the most common label values for each label name.\n    const labelExamples: Record<string, Array<{ value: string; count: number }>> = {};\n    Object.entries(labelValuesByName).forEach(([ln, lvs]) => {\n      labelCardinalities[ln] = Object.keys(lvs).length;\n      // Sort label values by their number of occurrences within this label name.\n      labelExamples[ln] = Object.entries(lvs)\n        .sort(([, aCnt], [, bCnt]) => bCnt - aCnt)\n        .slice(0, maxLabelValues)\n        .map(([lv, cnt]) => ({ value: lv, count: cnt }));\n    });\n\n    setResultStats({\n      numSeries: resultSeries,\n      sortedLabelCards: Object.entries(labelCardinalities).sort((a, b) => b[1] - a[1]),\n      labelExamples,\n    });\n  }, [instantQueryResponse, reportNodeState, childIdx]);\n\n  const innerNode = (\n    <Stack direction=\"row\" gap={2}>\n      <Box\n        ref={nodeRef}\n        sx={{\n          position: 'relative',\n          display: 'inline-block',\n          padding: 1,\n          marginBottom: 1.5,\n          borderRadius: 2,\n          backgroundColor: theme.palette.background.code,\n        }}\n      >\n        {parentEl !== undefined && (\n          // Connector line between this node and its parent.\n          <Box\n            sx={{\n              position: 'absolute',\n              display: 'inline-block',\n              ...connectorStyle,\n            }}\n          />\n        )}\n        {/* The node (visible box) itself. */}\n        {formatNode(node, false, 1)}\n      </Box>\n      {/* The node's individual query: */}\n      <QueryStatus\n        mergedChildState={mergedChildState}\n        isFetching={isFetching}\n        error={error}\n        resultStats={resultStats}\n        responseTime={instantQueryResponse?.responseTime}\n      />\n    </Stack>\n  );\n\n  if (node.type === nodeType.binaryExpr) {\n    return (\n      <div>\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[0]!}\n            parentEl={nodeEl}\n            reverse={true}\n            datasource={datasource}\n            childIdx={0}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n        {innerNode}\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[1]!}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={1}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {innerNode}\n      {children.map((child, idx) => (\n        <Box ml={nodeIndent} key={idx}>\n          <TreeNode\n            node={child}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={idx}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      ))}\n    </div>\n  );\n}\n\ninterface QueryStatusProps {\n  mergedChildState: NodeState;\n  isFetching: boolean;\n  error: StatusError | null;\n  resultStats: {\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  };\n  responseTime?: number;\n}\n\nfunction QueryStatus({\n  mergedChildState,\n  isFetching,\n  error,\n  resultStats,\n  responseTime,\n}: QueryStatusProps): ReactElement {\n  if (mergedChildState === 'waiting') {\n    return <ProgressState text=\"Waiting for child query\" />;\n  }\n\n  if (mergedChildState === 'running') {\n    return <ProgressState text=\"Running\" />;\n  }\n\n  if (mergedChildState === 'error') {\n    return (\n      <Stack>\n        <AlertCircle />\n        Blocked on child query error\n      </Stack>\n    );\n  }\n\n  if (isFetching) {\n    return <ProgressState text=\"Loading\" />;\n  }\n\n  if (error) {\n    return (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        gap={1}\n        sx={{ color: (theme) => theme.palette.error.main }}\n        marginBottom={1.5}\n      >\n        <AlertCircle />\n        <Typography variant=\"body2\">\n          <strong>Error executing query:</strong> {error.message}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\" marginBottom={1.5}>\n      <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n        {resultStats.numSeries} result{resultStats.numSeries !== 1 && 's'}\n        &nbsp;&nbsp;–&nbsp;&nbsp;\n        {responseTime ? `${Math.round(responseTime)}ms` : '? ms'}\n        {resultStats.sortedLabelCards.length > 0 && <>&nbsp;&nbsp;–</>}\n      </Typography>\n      {resultStats.sortedLabelCards.slice(0, maxLabelNames).map(([ln, cnt]) => (\n        <Tooltip\n          key={ln}\n          title={\n            <Box>\n              <List dense>\n                {resultStats.labelExamples[ln]?.map(({ value, count }) => (\n                  <ListItem\n                    key={value}\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        color: (theme) =>\n                          theme.palette.mode === 'dark' // TODO we shouldnt have to do that I guess..\n                            ? theme.palette.warning.dark\n                            : theme.palette.warning.main,\n                        fontFamily: 'monospace',\n                        whiteSpace: 'nowrap',\n                        overflow: 'hidden',\n                        textOverflow: 'ellipsis',\n                        flexGrow: 1,\n                      }}\n                    >\n                      {escapeString(value)}\n                    </Typography>\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        whiteSpace: 'nowrap',\n                        flexShrink: 0,\n                      }}\n                    >\n                      ({count}x)\n                    </Typography>\n                  </ListItem>\n                ))}\n                {cnt > maxLabelValues && (\n                  <ListItem\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography variant=\"body2\">. . .</Typography>\n                  </ListItem>\n                )}\n              </List>\n            </Box>\n          }\n          arrow\n        >\n          <span style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n            <Typography\n              variant=\"body2\"\n              component=\"span\"\n              sx={{ fontFamily: 'monospace', color: (theme) => theme.palette.success.main }}\n            >\n              {ln}\n            </Typography>\n            <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n              : {cnt}\n            </Typography>\n          </span>\n        </Tooltip>\n      ))}\n      {resultStats.sortedLabelCards.length > maxLabelNames ? (\n        <Typography variant=\"body2\">...{resultStats.sortedLabelCards.length - maxLabelNames} more...</Typography>\n      ) : null}\n    </Stack>\n  );\n}\n\nfunction ProgressState({ text }: { text: string }): ReactElement {\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gap={1} marginBottom={1.5}>\n      <CircularProgress size={16} color=\"secondary\" />\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {text}...\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","CircularProgress","List","ListItem","Stack","Tooltip","Typography","useTheme","CircleIcon","useCallback","useEffect","useLayoutEffect","useMemo","useState","AlertCircle","nodeType","escapeString","getNodeChildren","formatNode","serializeNode","functionSignatures","useInstantQuery","nodeIndent","connectorWidth","maxLabelNames","maxLabelValues","mergeChildStates","states","includes","TreeNode","node","parentEl","reverse","datasource","childIdx","reportNodeState","theme","children","nodeEl","setNodeEl","nodeRef","resultStats","setResultStats","numSeries","labelExamples","sortedLabelCards","connectorStyle","setConnectorStyle","borderColor","palette","grey","borderLeftStyle","borderLeftWidth","width","left","childStates","setChildStates","map","mergedChildState","queryNode","type","matrixSelector","call","func","last_over_time","args","data","instantQueryResponse","isFetching","error","childReportNodeState","state","prev","newStates","undefined","parentRect","getBoundingClientRect","nodeRect","prevStyle","top","bottom","borderTopLeftRadius","borderTopStyle","borderBottomLeftRadius","borderBottomStyle","status","resultSeries","labelValuesByName","resultType","result","length","forEach","s","Object","entries","metric","ln","lv","labelCardinalities","lvs","keys","sort","aCnt","bCnt","slice","cnt","value","count","a","b","innerNode","direction","gap","ref","sx","position","display","padding","marginBottom","borderRadius","backgroundColor","background","code","QueryStatus","responseTime","binaryExpr","div","ml","child","idx","ProgressState","text","alignItems","color","main","variant","strong","message","component","Math","round","title","dense","py","px","fontSize","mode","warning","dark","fontFamily","whiteSpace","overflow","textOverflow","flexGrow","flexShrink","arrow","span","style","cursor","success","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TreeNode.tsx"],"sourcesContent":["// Copyright 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\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/pages/query/TreeNode.tsx\n\nimport { Box, CircularProgress, List, ListItem, Stack, Tooltip, Typography, useTheme } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { ReactElement, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport AlertCircle from 'mdi-material-ui/AlertCircle';\n\nimport { StatusError } from '@perses-dev/client';\nimport { PrometheusDatasourceSelector } from '../model';\nimport ASTNode, { nodeType } from './promql/ast';\nimport { escapeString, getNodeChildren } from './promql/utils';\nimport { formatNode } from './promql/format';\nimport serializeNode from './promql/serialize';\nimport { functionSignatures } from './promql/functionSignatures';\nimport { useInstantQuery } from './query';\n\n// The indentation factor for each level of the tree.\nconst nodeIndent = 5;\nconst connectorWidth = nodeIndent * 5;\n\n// max number of label names and values to show in the individual query status\nconst maxLabelNames = 10;\nconst maxLabelValues = 10;\n\ntype NodeState = 'waiting' | 'running' | 'error' | 'success';\n\n// mergeChildStates basically returns the \"worst\" state found among the children.\nconst mergeChildStates = (states: NodeState[]): NodeState => {\n  if (states.includes('error')) {\n    return 'error';\n  }\n  if (states.includes('waiting')) {\n    return 'waiting';\n  }\n  if (states.includes('running')) {\n    return 'running';\n  }\n\n  return 'success';\n};\n\ninterface TreeNodeProps {\n  // The AST node to render.\n  node: ASTNode;\n  // The parent element of this node.\n  parentEl?: HTMLDivElement | null;\n  // Used to compute the position of the connector line between this node and its parent.\n  reverse: boolean;\n  // Datasource used for the node's individual query.\n  datasource: PrometheusDatasourceSelector;\n  // The index of this node in its parent's children.\n  // Used to render the node's individual query.\n  childIdx: number;\n  // Function to report the node state to the parent.\n  // Used to render the node's individual query.\n  reportNodeState?: (childIdx: number, state: NodeState) => void;\n}\n\nexport default function TreeNode({\n  node,\n  parentEl,\n  reverse,\n  datasource,\n  childIdx,\n  reportNodeState,\n}: TreeNodeProps): ReactElement {\n  const theme = useTheme();\n  const children = getNodeChildren(node);\n\n  // A normal ref won't work properly here because the ref's `current` property\n  // going from `null` to defined won't trigger a re-render of the child\n  // component, since it's not a React state update. So we manually have to\n  // create a state update using a callback ref. See also\n  // https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs\n  const [nodeEl, setNodeEl] = useState<HTMLDivElement | null>(null);\n  const nodeRef = useCallback((node: HTMLDivElement) => setNodeEl(node), []);\n\n  const [resultStats, setResultStats] = useState<{\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  }>({\n    numSeries: 0,\n    labelExamples: {},\n    sortedLabelCards: [],\n  });\n\n  const [connectorStyle, setConnectorStyle] = useState({\n    borderColor: theme.palette.grey['500'],\n    borderLeftStyle: 'solid',\n    borderLeftWidth: 2,\n    width: connectorWidth,\n    left: -connectorWidth,\n  });\n\n  const [childStates, setChildStates] = useState<NodeState[]>(children.map(() => 'waiting'));\n  const mergedChildState = useMemo(() => mergeChildStates(childStates), [childStates]);\n\n  // Optimize range vector selector fetches to give us the info we're looking for\n  // more cheaply. E.g. 'foo[7w]' can be expensive to fully fetch, but wrapping it\n  // in 'last_over_time(foo[7w])' is cheaper and also gives us all the info we\n  // need (number of series and labels).\n  let queryNode = node;\n  if (queryNode.type === nodeType.matrixSelector) {\n    queryNode = {\n      type: nodeType.call,\n      func: functionSignatures.last_over_time!,\n      args: [node],\n    };\n  }\n\n  // Individual query for the current node\n  const {\n    data: instantQueryResponse,\n    isFetching,\n    error,\n  } = useInstantQuery(serializeNode(queryNode) ?? '', datasource, mergedChildState === 'success');\n\n  // report the node state to the parent\n  useEffect(() => {\n    if (reportNodeState) {\n      if (mergedChildState === 'error' || error) {\n        reportNodeState(childIdx, 'error');\n      } else if (isFetching) {\n        reportNodeState(childIdx, 'running');\n      }\n    }\n  }, [mergedChildState, error, isFetching, reportNodeState, childIdx]);\n\n  // This function is passed down to the child nodes so they can report their state.\n  const childReportNodeState = useCallback(\n    (childIdx: number, state: NodeState) => {\n      setChildStates((prev) => {\n        const newStates = [...prev];\n        newStates[childIdx] = state;\n        return newStates;\n      });\n    },\n    [setChildStates]\n  );\n\n  // Update the size and position of tree connector lines based on the node's and its parent's position.\n  useLayoutEffect(() => {\n    if (parentEl === undefined) {\n      // We're the root node.\n      return;\n    }\n\n    if (parentEl === null || nodeEl === null) {\n      // Either of the two connected nodes hasn't been rendered yet.\n      return;\n    }\n\n    const parentRect = parentEl.getBoundingClientRect();\n    const nodeRect = nodeEl.getBoundingClientRect();\n    if (reverse) {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: 'calc(50% - 1px)',\n        bottom: nodeRect.bottom - parentRect.top,\n        borderTopLeftRadius: 10,\n        borderTopStyle: 'solid',\n        borderBottomLeftRadius: undefined,\n      }));\n    } else {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: parentRect.bottom - nodeRect.top,\n        bottom: 'calc(50% - 1px)',\n        borderBottomLeftRadius: 10,\n        borderBottomStyle: 'solid',\n        borderTopLeftRadius: undefined,\n      }));\n    }\n  }, [parentEl, nodeEl, reverse, nodeRef, setConnectorStyle]);\n\n  // Update the node info state based on the query result.\n  useEffect(() => {\n    if (instantQueryResponse?.status !== 'success') {\n      return;\n    }\n\n    if (reportNodeState) {\n      reportNodeState(childIdx, 'success');\n    }\n\n    let resultSeries = 0;\n    // labelValuesByName records the number of times each label value appears for each label name.\n    const labelValuesByName: Record<string, Record<string, number>> = {};\n    const { resultType, result } = instantQueryResponse.data;\n\n    if (resultType === 'scalar' || resultType === 'string') {\n      resultSeries = 1;\n    } else if (result && result.length > 0) {\n      resultSeries = result.length;\n      result.forEach((s) => {\n        Object.entries(s.metric).forEach(([ln, lv]) => {\n          // TODO: If we ever want to include __name__ here again, we cannot use the\n          // last_over_time(foo[7d]) optimization since that removes the metric name.\n          if (ln !== '__name__') {\n            labelValuesByName[ln] = labelValuesByName[ln] ?? {};\n            labelValuesByName[ln]![lv] = (labelValuesByName[ln]![lv] ?? 0) + 1;\n          }\n        });\n      });\n    }\n\n    // labelCardinalities records the number of unique label values for each label name.\n    const labelCardinalities: Record<string, number> = {};\n    // labelExamples records the most common label values for each label name.\n    const labelExamples: Record<string, Array<{ value: string; count: number }>> = {};\n    Object.entries(labelValuesByName).forEach(([ln, lvs]) => {\n      labelCardinalities[ln] = Object.keys(lvs).length;\n      // Sort label values by their number of occurrences within this label name.\n      labelExamples[ln] = Object.entries(lvs)\n        .sort(([, aCnt], [, bCnt]) => bCnt - aCnt)\n        .slice(0, maxLabelValues)\n        .map(([lv, cnt]) => ({ value: lv, count: cnt }));\n    });\n\n    setResultStats({\n      numSeries: resultSeries,\n      sortedLabelCards: Object.entries(labelCardinalities).sort((a, b) => b[1] - a[1]),\n      labelExamples,\n    });\n  }, [instantQueryResponse, reportNodeState, childIdx]);\n\n  const innerNode = (\n    <Stack direction=\"row\" gap={2}>\n      <Box\n        ref={nodeRef}\n        sx={{\n          position: 'relative',\n          display: 'inline-block',\n          padding: 1,\n          marginBottom: 1.5,\n          borderRadius: 2,\n          backgroundColor: theme.palette.background.code,\n        }}\n      >\n        {parentEl !== undefined && (\n          // Connector line between this node and its parent.\n          <Box\n            sx={{\n              position: 'absolute',\n              display: 'inline-block',\n              ...connectorStyle,\n            }}\n          />\n        )}\n        {/* The node (visible box) itself. */}\n        {formatNode(node, false, 1)}\n      </Box>\n      {/* The node's individual query: */}\n      <QueryStatus\n        mergedChildState={mergedChildState}\n        isFetching={isFetching}\n        error={error}\n        resultStats={resultStats}\n        responseTime={instantQueryResponse?.responseTime}\n      />\n    </Stack>\n  );\n\n  if (node.type === nodeType.binaryExpr) {\n    return (\n      <div>\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[0]!}\n            parentEl={nodeEl}\n            reverse={true}\n            datasource={datasource}\n            childIdx={0}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n        {innerNode}\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[1]!}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={1}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {innerNode}\n      {children.map((child, idx) => (\n        <Box ml={nodeIndent} key={idx}>\n          <TreeNode\n            node={child}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={idx}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      ))}\n    </div>\n  );\n}\n\ninterface QueryStatusProps {\n  mergedChildState: NodeState;\n  isFetching: boolean;\n  error: StatusError | null;\n  resultStats: {\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  };\n  responseTime?: number;\n}\n\nfunction QueryStatus({\n  mergedChildState,\n  isFetching,\n  error,\n  resultStats,\n  responseTime,\n}: QueryStatusProps): ReactElement {\n  if (mergedChildState === 'waiting') {\n    return <ProgressState text=\"Waiting for child query\" />;\n  }\n\n  if (mergedChildState === 'running') {\n    return <ProgressState text=\"Running\" />;\n  }\n\n  if (mergedChildState === 'error') {\n    return (\n      <Stack>\n        <AlertCircle />\n        Blocked on child query error\n      </Stack>\n    );\n  }\n\n  if (isFetching) {\n    return <ProgressState text=\"Loading\" />;\n  }\n\n  if (error) {\n    return (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        gap={1}\n        sx={{ color: (theme) => theme.palette.error.main }}\n        marginBottom={1.5}\n      >\n        <AlertCircle />\n        <Typography variant=\"body2\">\n          <strong>Error executing query:</strong> {error.message}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\" marginBottom={1.5}>\n      <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n        {resultStats.numSeries} result{resultStats.numSeries !== 1 && 's'}\n        &nbsp;&nbsp;–&nbsp;&nbsp;\n        {responseTime ? `${Math.round(responseTime)}ms` : '? ms'}\n        {resultStats.sortedLabelCards.length > 0 && <>&nbsp;&nbsp;–</>}\n      </Typography>\n      {resultStats.sortedLabelCards.slice(0, maxLabelNames).map(([ln, cnt]) => (\n        <Tooltip\n          key={ln}\n          title={\n            <Box>\n              <List dense>\n                {resultStats.labelExamples[ln]?.map(({ value, count }) => (\n                  <ListItem\n                    key={value}\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        color: (theme) =>\n                          theme.palette.mode === 'dark' // TODO we shouldnt have to do that I guess..\n                            ? theme.palette.warning.dark\n                            : theme.palette.warning.main,\n                        fontFamily: 'monospace',\n                        whiteSpace: 'nowrap',\n                        overflow: 'hidden',\n                        textOverflow: 'ellipsis',\n                        flexGrow: 1,\n                      }}\n                    >\n                      {escapeString(value)}\n                    </Typography>\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        whiteSpace: 'nowrap',\n                        flexShrink: 0,\n                      }}\n                    >\n                      ({count}x)\n                    </Typography>\n                  </ListItem>\n                ))}\n                {cnt > maxLabelValues && (\n                  <ListItem\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography variant=\"body2\">. . .</Typography>\n                  </ListItem>\n                )}\n              </List>\n            </Box>\n          }\n          arrow\n        >\n          <span style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n            <Typography\n              variant=\"body2\"\n              component=\"span\"\n              sx={{ fontFamily: 'monospace', color: (theme) => theme.palette.success.main }}\n            >\n              {ln}\n            </Typography>\n            <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n              : {cnt}\n            </Typography>\n          </span>\n        </Tooltip>\n      ))}\n      {resultStats.sortedLabelCards.length > maxLabelNames ? (\n        <Typography variant=\"body2\">...{resultStats.sortedLabelCards.length - maxLabelNames} more...</Typography>\n      ) : null}\n    </Stack>\n  );\n}\n\nfunction ProgressState({ text }: { text: string }): ReactElement {\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gap={1} marginBottom={1.5}>\n      <CircularProgress size={16} color=\"secondary\" />\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {text}...\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","CircularProgress","List","ListItem","Stack","Tooltip","Typography","useTheme","CircleIcon","useCallback","useEffect","useLayoutEffect","useMemo","useState","AlertCircle","nodeType","escapeString","getNodeChildren","formatNode","serializeNode","functionSignatures","useInstantQuery","nodeIndent","connectorWidth","maxLabelNames","maxLabelValues","mergeChildStates","states","includes","TreeNode","node","parentEl","reverse","datasource","childIdx","reportNodeState","theme","children","nodeEl","setNodeEl","nodeRef","resultStats","setResultStats","numSeries","labelExamples","sortedLabelCards","connectorStyle","setConnectorStyle","borderColor","palette","grey","borderLeftStyle","borderLeftWidth","width","left","childStates","setChildStates","map","mergedChildState","queryNode","type","matrixSelector","call","func","last_over_time","args","data","instantQueryResponse","isFetching","error","childReportNodeState","state","prev","newStates","undefined","parentRect","getBoundingClientRect","nodeRect","prevStyle","top","bottom","borderTopLeftRadius","borderTopStyle","borderBottomLeftRadius","borderBottomStyle","status","resultSeries","labelValuesByName","resultType","result","length","forEach","s","Object","entries","metric","ln","lv","labelCardinalities","lvs","keys","sort","aCnt","bCnt","slice","cnt","value","count","a","b","innerNode","direction","gap","ref","sx","position","display","padding","marginBottom","borderRadius","backgroundColor","background","code","QueryStatus","responseTime","binaryExpr","div","ml","child","idx","ProgressState","text","alignItems","color","main","variant","strong","message","component","Math","round","title","dense","py","px","fontSize","mode","warning","dark","fontFamily","whiteSpace","overflow","textOverflow","flexGrow","flexShrink","arrow","span","style","cursor","success","size"],"mappings":"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"}

package/lib/components/promql/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../src/components/promql/format.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,OAON,MAAM,OAAO,CAAC;AA6Cf,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,KAAG,KAAK,CAAC,SAAS,EAS/D,CAAC;AAiPF,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,EAAE,cAAc,OAAO,EAAE,WAAW,MAAM,KAAG,KAAK,CAAC,YAE1F,CAAC"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../src/components/promql/format.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,OAON,MAAM,OAAO,CAAC;AA6Cf,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,KAAG,KAAK,CAAC,SAAS,EAS/D,CAAC;AAiPF,eAAO,MAAM,UAAU,GAAI,MAAM,OAAO,EAAE,cAAc,OAAO,EAAE,WAAW,MAAM,KAAG,KAAK,CAAC,YAE1F,CAAC"}