@perses-dev/prometheus-plugin 0.58.0-beta.0 → 0.58.0-beta.2

package/lib/cjs/plugins/PrometheusLabelValuesVariable.js

@@ -24,6 +24,60 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../model");
 const _prometheusvariables = require("./prometheus-variables");
 const _interpolation = require("./interpolation");
+function extractDatasourceVariables(datasourceSpec) {
+    try {
+        const spec = datasourceSpec.plugin.spec;
+        // Pure function to extract variables from string or array values
+        const extractFromValue = (value)=>{
+            if (typeof value === 'string') {
+                return (0, _pluginsystem.parseVariables)(value);
+            } else if (Array.isArray(value)) {
+                return value.flatMap((item)=>{
+                    return typeof item === 'string' ? (0, _pluginsystem.parseVariables)(item) : [];
+                });
+            }
+            return [];
+        };
+        const allVariables = [];
+        // Extract variables from queryParams
+        if (spec.queryParams) {
+            Object.values(spec.queryParams).forEach((value)=>{
+                allVariables.push(...extractFromValue(value));
+            });
+        }
+        // Extract variables from directUrl
+        if (spec.directUrl) {
+            allVariables.push(...extractFromValue(spec.directUrl));
+        }
+        // Extract variables from proxy configuration
+        if (spec.proxy?.spec) {
+            // Extract from proxy URL
+            if (spec.proxy.spec.url) {
+                allVariables.push(...extractFromValue(spec.proxy.spec.url));
+            }
+            // Extract from proxy headers
+            if (spec.proxy.spec.headers) {
+                Object.values(spec.proxy.spec.headers).forEach((value)=>{
+                    if (typeof value === 'string') {
+                        allVariables.push(...extractFromValue(value));
+                    }
+                });
+            }
+        }
+        return Array.from(new Set(allVariables)); // Remove duplicates
+    } catch  {
+        return [];
+    }
+}
+function getDatasourceVariablesFromCache(datasourceSelector, datasourceStore) {
+    try {
+        if (!datasourceStore.getDatasourceSpecSync) return [];
+        const datasourceSpec = datasourceStore.getDatasourceSpecSync(datasourceSelector);
+        return datasourceSpec ? extractDatasourceVariables(datasourceSpec) : [];
+    } catch  {
+        return [];
+    }
+}
 const PrometheusLabelValuesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const pluginDef = spec;
@@ -40,16 +94,28 @@ const PrometheusLabelValuesVariable = {
             data: (0, _prometheusvariables.stringArrayToVariableOptions)(options)
         };
     },
-    dependsOn: (spec)=>{
+    dependsOn: (spec, ctx)=>{
         const matcherVariables = spec.matchers?.map((m)=>(0, _pluginsystem.parseVariables)(m)).flat() || [];
         const labelVariables = (0, _pluginsystem.parseVariables)(spec.labelName);
         const datasourceVariables = spec.datasource && (0, _pluginsystem.isVariableDatasource)(spec.datasource) ? (0, _pluginsystem.parseVariables)(spec.datasource) : [];
+        let datasourceVariablesFromCache = [];
+        if (ctx?.datasourceStore && ctx?.variables) {
+            const datasourceValue = spec.datasource ?? _model.DEFAULT_PROM;
+            const datasourceSelector = typeof datasourceValue === 'string' ? {
+                kind: _model.PROM_DATASOURCE_KIND,
+                name: datasourceValue
+            } : datasourceValue;
+            datasourceVariablesFromCache = getDatasourceVariablesFromCache(datasourceSelector, ctx.datasourceStore);
+        }
+        const allDependencies = [
+            ...matcherVariables,
+            ...labelVariables,
+            ...datasourceVariables,
+            ...datasourceVariablesFromCache
+        ];
+        const uniqueDependencies = Array.from(new Set(allDependencies));
         return {
-            variables: [
-                ...matcherVariables,
-                ...labelVariables,
-                ...datasourceVariables
-            ]
+            variables: uniqueDependencies
         };
     },
     OptionsEditorComponent: _prometheusvariables.PrometheusLabelValuesVariableEditor,

package/lib/cjs/plugins/interpolation.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get getInterpolatedRequestOptions () {
+        return getInterpolatedRequestOptions;
+    },
     get interpolateDatasourceProxyParams () {
         return interpolateDatasourceProxyParams;
     },
@@ -52,3 +55,7 @@ function interpolateDatasourceProxyParams(datasource, variableState) {
         queryParams: rawQueryParams ? (0, _components.interpolateQueryParams)(rawQueryParams, variableState) : undefined
     };
 }
+async function getInterpolatedRequestOptions(datasourceStore, datasource, variableState) {
+    const datasourceSpec = await datasourceStore.getDatasource(datasource);
+    return interpolateDatasourceProxyParams(datasourceSpec, variableState);
+}

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

@@ -20,9 +20,9 @@ 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");
@@ -39,7 +39,7 @@ const getTimeSeriesData = async (spec, context, abortSignal)=>{
     const selectedDatasource = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, context.variableState, listDatasourceSelectItems) ?? _model.DEFAULT_PROM;
     const datasource = await context.datasourceStore.getDatasource(selectedDatasource);
     const interpolatedOptions = (0, _interpolation.interpolateDatasourceProxyParams)(datasource, context.variableState);
-    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _core.parseDurationString)(datasource.plugin.spec.scrapeInterval ?? _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    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

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"}

package/lib/components/promql/format.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/format.tsx
 import React from 'react';
 import { styled } from '@mui/material';
-import { formatDuration, msToPrometheusDuration } from '@perses-dev/core';
+import { convertTimeToDuration, formatDuration } from '@perses-dev/spec';
 import { matchType, vectorMatchCardinality, nodeType } from './ast';
 import { maybeParenthesizeBinopChild, escapeString } from './utils';
 // Styled components that reproduce the theming of CodeMirror:
@@ -99,7 +99,7 @@ const formatAtAndOffset = (timestamp, startOrEnd, offset)=>/*#__PURE__*/ _jsxs(_
                     }),
                     ' ',
                     /*#__PURE__*/ _jsx(PromQLDuration, {
-                        children: formatDuration(msToPrometheusDuration(offset))
+                        children: formatDuration(convertTimeToDuration(offset))
                     })
                 ]
             }) : /*#__PURE__*/ _jsxs(_Fragment, {
@@ -112,7 +112,7 @@ const formatAtAndOffset = (timestamp, startOrEnd, offset)=>/*#__PURE__*/ _jsxs(_
                     /*#__PURE__*/ _jsxs(PromQLDuration, {
                         children: [
                             "-",
-                            formatDuration(msToPrometheusDuration(-offset))
+                            formatDuration(convertTimeToDuration(-offset))
                         ]
                     })
                 ]
@@ -154,7 +154,7 @@ const formatSelector = (node)=>{
                 children: [
                     "[",
                     /*#__PURE__*/ _jsx(PromQLDuration, {
-                        children: formatDuration(msToPrometheusDuration(node.range))
+                        children: formatDuration(convertTimeToDuration(node.range))
                     }),
                     "]"
                 ]
@@ -234,11 +234,11 @@ const formatNodeInternal = (node, showChildren, maxDepth)=>{
                     showChildren && formatNode(node.expr, showChildren, childMaxDepth),
                     "[",
                     /*#__PURE__*/ _jsx(PromQLDuration, {
-                        children: formatDuration(msToPrometheusDuration(node.range))
+                        children: formatDuration(convertTimeToDuration(node.range))
                     }),
                     ":",
                     node.step !== 0 && /*#__PURE__*/ _jsx(PromQLDuration, {
-                        children: formatDuration(msToPrometheusDuration(node.step))
+                        children: formatDuration(convertTimeToDuration(node.step))
                     }),
                     "]",
                     formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)

package/lib/components/promql/format.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/promql/format.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/promql/format.tsx\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { styled } from '@mui/material';\nimport { formatDuration, msToPrometheusDuration } from '@perses-dev/core';\nimport ASTNode, {\n  VectorSelector,\n  matchType,\n  vectorMatchCardinality,\n  nodeType,\n  StartOrEnd,\n  MatrixSelector,\n} from './ast';\nimport { maybeParenthesizeBinopChild, escapeString } from './utils';\n\n// Styled components that reproduce the theming of CodeMirror:\n\nconst PromQLCode = styled('span')(() => ({\n  fontFamily: '\"DejaVu Sans Mono\", monospace',\n}));\n\nconst PromQLKeyword = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#708',\n}));\n\nconst PromQLFunction = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#61afef' : '#2a2e42',\n}));\n\nconst PromQLMetricName = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e06c75' : '#2a2e42',\n}));\n\nconst PromQLLabelName = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#61afef' : '#219',\n}));\n\nconst PromQLString = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#98c379' : '#a31515',\n}));\n\nconst PromQLEllipsis = styled('span')(() => ({\n  color: '#aaaaaa', // Same color for both modes as in the original CSS\n}));\n\nconst PromQLDuration = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#09885a',\n}));\n\nconst PromQLNumber = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#164',\n}));\n\nconst PromQLOperator = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#56b6c2' : '#708',\n}));\n\nexport const labelNameList = (labels: string[]): React.ReactNode[] => {\n  return labels.map((l, i) => {\n    return (\n      <span key={i}>\n        {i !== 0 && ', '}\n        <PromQLLabelName>{l}</PromQLLabelName>\n      </span>\n    );\n  });\n};\n\nconst formatAtAndOffset = (timestamp: number | null, startOrEnd: StartOrEnd, offset: number): ReactNode => (\n  <>\n    {timestamp !== null ? (\n      <>\n        {' '}\n        <PromQLOperator>@</PromQLOperator> <PromQLNumber>{(timestamp / 1000).toFixed(3)}</PromQLNumber>\n      </>\n    ) : startOrEnd !== null ? (\n      <>\n        {' '}\n        <PromQLOperator>@</PromQLOperator> <PromQLKeyword>{startOrEnd}</PromQLKeyword>\n        <span>(</span>\n        <span>)</span>\n      </>\n    ) : (\n      <></>\n    )}\n    {offset === 0 ? (\n      <></>\n    ) : offset > 0 ? (\n      <>\n        {' '}\n        <PromQLKeyword>offset</PromQLKeyword>{' '}\n        <PromQLDuration>{formatDuration(msToPrometheusDuration(offset))}</PromQLDuration>\n      </>\n    ) : (\n      <>\n        {' '}\n        <PromQLKeyword>offset</PromQLKeyword>{' '}\n        <PromQLDuration>-{formatDuration(msToPrometheusDuration(-offset))}</PromQLDuration>\n      </>\n    )}\n  </>\n);\n\nconst formatSelector = (node: VectorSelector | MatrixSelector): ReactElement => {\n  const matchLabels = node.matchers\n    .filter((m) => !(m.name === '__name__' && m.type === matchType.equal && m.value === node.name))\n    .map((m, i) => (\n      <span key={i}>\n        {i !== 0 && ','}\n        <PromQLLabelName>{m.name}</PromQLLabelName>\n        {m.type}\n        <PromQLString>&quot;{escapeString(m.value)}&quot;</PromQLString>\n      </span>\n    ));\n\n  return (\n    <>\n      <PromQLMetricName>{node.name}</PromQLMetricName>\n      {matchLabels.length > 0 && (\n        <>\n          {'{'}\n          <span>{matchLabels}</span>\n          {'}'}\n        </>\n      )}\n      {node.type === nodeType.matrixSelector && (\n        <>\n          [<PromQLDuration>{formatDuration(msToPrometheusDuration(node.range))}</PromQLDuration>]\n        </>\n      )}\n      {formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}\n    </>\n  );\n};\n\nconst ellipsis = <PromQLEllipsis>…</PromQLEllipsis>;\n\nconst formatNodeInternal = (node: ASTNode, showChildren: boolean, maxDepth?: number): React.ReactNode => {\n  if (maxDepth === 0) {\n    return ellipsis;\n  }\n\n  const childMaxDepth = maxDepth === undefined ? undefined : maxDepth - 1;\n\n  switch (node.type) {\n    case nodeType.aggregation:\n      return (\n        <>\n          <PromQLOperator>{node.op}</PromQLOperator>\n          {node.without ? (\n            <>\n              {' '}\n              <PromQLKeyword>without</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(node.grouping)}\n              <span>)</span>{' '}\n            </>\n          ) : (\n            node.grouping.length > 0 && (\n              <>\n                {' '}\n                <PromQLKeyword>by</PromQLKeyword>\n                <span>(</span>\n                {labelNameList(node.grouping)}\n                <span>)</span>{' '}\n              </>\n            )\n          )}\n          {showChildren && (\n            <>\n              <span>(</span>\n              {node.param !== null && <>{formatNode(node.param, showChildren, childMaxDepth)}, </>}\n              {formatNode(node.expr, showChildren, childMaxDepth)}\n              <span>)</span>\n            </>\n          )}\n        </>\n      );\n    case nodeType.subquery:\n      return (\n        <>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}[\n          <PromQLDuration>{formatDuration(msToPrometheusDuration(node.range))}</PromQLDuration>:\n          {node.step !== 0 && <PromQLDuration>{formatDuration(msToPrometheusDuration(node.step))}</PromQLDuration>}]\n          {formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}\n        </>\n      );\n    case nodeType.parenExpr:\n      return (\n        <>\n          <span>(</span>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}\n          <span>)</span>\n        </>\n      );\n    case nodeType.call: {\n      const children =\n        childMaxDepth === undefined || childMaxDepth > 0\n          ? node.args.map((arg, i) => (\n              <span key={i}>\n                {i !== 0 && ', '}\n                {formatNode(arg, showChildren)}\n              </span>\n            ))\n          : node.args.length > 0\n            ? ellipsis\n            : '';\n\n      return (\n        <>\n          <PromQLFunction>{node.func.name}</PromQLFunction>\n          {showChildren && (\n            <>\n              <span>(</span>\n              {children}\n              <span>)</span>\n            </>\n          )}\n        </>\n      );\n    }\n    case nodeType.matrixSelector:\n      return formatSelector(node);\n    case nodeType.vectorSelector:\n      return formatSelector(node);\n    case nodeType.numberLiteral:\n      return <PromQLNumber>{node.val}</PromQLNumber>;\n    case nodeType.stringLiteral:\n      return <PromQLString>&quot;{escapeString(node.val)}&quot;</PromQLString>;\n    case nodeType.unaryExpr:\n      return (\n        <>\n          <PromQLOperator>{node.op}</PromQLOperator>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}\n        </>\n      );\n    case nodeType.binaryExpr: {\n      let matching = <></>;\n      let grouping = <></>;\n      const vm = node.matching;\n      if (vm !== null && (vm.labels.length > 0 || vm.on)) {\n        if (vm.on) {\n          matching = (\n            <>\n              {' '}\n              <PromQLKeyword>on</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.labels)}\n              <span>)</span>\n            </>\n          );\n        } else {\n          matching = (\n            <>\n              {' '}\n              <PromQLKeyword>ignoring</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.labels)}\n              <span>)</span>\n            </>\n          );\n        }\n\n        if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {\n          grouping = (\n            <>\n              <PromQLKeyword>\n                {' '}\n                group_\n                {vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}\n              </PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.include)}\n              <span>)</span>\n            </>\n          );\n        }\n      }\n\n      return (\n        <>\n          {showChildren && formatNode(maybeParenthesizeBinopChild(node.op, node.lhs), showChildren, childMaxDepth)}{' '}\n          {['atan2', 'and', 'or', 'unless'].includes(node.op) ? (\n            <PromQLOperator>{node.op}</PromQLOperator>\n          ) : (\n            <PromQLOperator>{node.op}</PromQLOperator>\n          )}\n          {node.bool && (\n            <>\n              {' '}\n              <PromQLKeyword>bool</PromQLKeyword>\n            </>\n          )}\n          {matching}\n          {grouping}{' '}\n          {showChildren && formatNode(maybeParenthesizeBinopChild(node.op, node.rhs), showChildren, childMaxDepth)}\n        </>\n      );\n    }\n    case nodeType.placeholder:\n      // TODO: Include possible children of placeholders somehow?\n      return ellipsis;\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport const formatNode = (node: ASTNode, showChildren: boolean, maxDepth?: number): React.ReactElement => (\n  <PromQLCode>{formatNodeInternal(node, showChildren, maxDepth)}</PromQLCode>\n);\n"],"names":["React","styled","formatDuration","msToPrometheusDuration","matchType","vectorMatchCardinality","nodeType","maybeParenthesizeBinopChild","escapeString","PromQLCode","fontFamily","PromQLKeyword","theme","color","palette","mode","PromQLFunction","PromQLMetricName","PromQLLabelName","PromQLString","PromQLEllipsis","PromQLDuration","PromQLNumber","PromQLOperator","labelNameList","labels","map","l","i","span","formatAtAndOffset","timestamp","startOrEnd","offset","toFixed","formatSelector","node","matchLabels","matchers","filter","m","name","type","equal","value","length","matrixSelector","range","ellipsis","formatNodeInternal","showChildren","maxDepth","childMaxDepth","undefined","aggregation","op","without","grouping","param","formatNode","expr","subquery","step","parenExpr","call","children","args","arg","func","vectorSelector","numberLiteral","val","stringLiteral","unaryExpr","binaryExpr","matching","vm","on","card","manyToOne","oneToMany","include","lhs","includes","bool","rhs","placeholder","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/promql/format.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/promql/format.tsx\n\nimport React, { ReactElement, ReactNode } from 'react';\nimport { styled } from '@mui/material';\n\nimport { convertTimeToDuration, formatDuration } from '@perses-dev/spec';\nimport ASTNode, {\n  VectorSelector,\n  matchType,\n  vectorMatchCardinality,\n  nodeType,\n  StartOrEnd,\n  MatrixSelector,\n} from './ast';\nimport { maybeParenthesizeBinopChild, escapeString } from './utils';\n\n// Styled components that reproduce the theming of CodeMirror:\n\nconst PromQLCode = styled('span')(() => ({\n  fontFamily: '\"DejaVu Sans Mono\", monospace',\n}));\n\nconst PromQLKeyword = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#708',\n}));\n\nconst PromQLFunction = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#61afef' : '#2a2e42',\n}));\n\nconst PromQLMetricName = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e06c75' : '#2a2e42',\n}));\n\nconst PromQLLabelName = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#61afef' : '#219',\n}));\n\nconst PromQLString = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#98c379' : '#a31515',\n}));\n\nconst PromQLEllipsis = styled('span')(() => ({\n  color: '#aaaaaa', // Same color for both modes as in the original CSS\n}));\n\nconst PromQLDuration = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#09885a',\n}));\n\nconst PromQLNumber = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#e5c07b' : '#164',\n}));\n\nconst PromQLOperator = styled('span')(({ theme }) => ({\n  color: theme.palette.mode === 'dark' ? '#56b6c2' : '#708',\n}));\n\nexport const labelNameList = (labels: string[]): React.ReactNode[] => {\n  return labels.map((l, i) => {\n    return (\n      <span key={i}>\n        {i !== 0 && ', '}\n        <PromQLLabelName>{l}</PromQLLabelName>\n      </span>\n    );\n  });\n};\n\nconst formatAtAndOffset = (timestamp: number | null, startOrEnd: StartOrEnd, offset: number): ReactNode => (\n  <>\n    {timestamp !== null ? (\n      <>\n        {' '}\n        <PromQLOperator>@</PromQLOperator> <PromQLNumber>{(timestamp / 1000).toFixed(3)}</PromQLNumber>\n      </>\n    ) : startOrEnd !== null ? (\n      <>\n        {' '}\n        <PromQLOperator>@</PromQLOperator> <PromQLKeyword>{startOrEnd}</PromQLKeyword>\n        <span>(</span>\n        <span>)</span>\n      </>\n    ) : (\n      <></>\n    )}\n    {offset === 0 ? (\n      <></>\n    ) : offset > 0 ? (\n      <>\n        {' '}\n        <PromQLKeyword>offset</PromQLKeyword>{' '}\n        <PromQLDuration>{formatDuration(convertTimeToDuration(offset))}</PromQLDuration>\n      </>\n    ) : (\n      <>\n        {' '}\n        <PromQLKeyword>offset</PromQLKeyword>{' '}\n        <PromQLDuration>-{formatDuration(convertTimeToDuration(-offset))}</PromQLDuration>\n      </>\n    )}\n  </>\n);\n\nconst formatSelector = (node: VectorSelector | MatrixSelector): ReactElement => {\n  const matchLabels = node.matchers\n    .filter((m) => !(m.name === '__name__' && m.type === matchType.equal && m.value === node.name))\n    .map((m, i) => (\n      <span key={i}>\n        {i !== 0 && ','}\n        <PromQLLabelName>{m.name}</PromQLLabelName>\n        {m.type}\n        <PromQLString>&quot;{escapeString(m.value)}&quot;</PromQLString>\n      </span>\n    ));\n\n  return (\n    <>\n      <PromQLMetricName>{node.name}</PromQLMetricName>\n      {matchLabels.length > 0 && (\n        <>\n          {'{'}\n          <span>{matchLabels}</span>\n          {'}'}\n        </>\n      )}\n      {node.type === nodeType.matrixSelector && (\n        <>\n          [<PromQLDuration>{formatDuration(convertTimeToDuration(node.range))}</PromQLDuration>]\n        </>\n      )}\n      {formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}\n    </>\n  );\n};\n\nconst ellipsis = <PromQLEllipsis>…</PromQLEllipsis>;\n\nconst formatNodeInternal = (node: ASTNode, showChildren: boolean, maxDepth?: number): React.ReactNode => {\n  if (maxDepth === 0) {\n    return ellipsis;\n  }\n\n  const childMaxDepth = maxDepth === undefined ? undefined : maxDepth - 1;\n\n  switch (node.type) {\n    case nodeType.aggregation:\n      return (\n        <>\n          <PromQLOperator>{node.op}</PromQLOperator>\n          {node.without ? (\n            <>\n              {' '}\n              <PromQLKeyword>without</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(node.grouping)}\n              <span>)</span>{' '}\n            </>\n          ) : (\n            node.grouping.length > 0 && (\n              <>\n                {' '}\n                <PromQLKeyword>by</PromQLKeyword>\n                <span>(</span>\n                {labelNameList(node.grouping)}\n                <span>)</span>{' '}\n              </>\n            )\n          )}\n          {showChildren && (\n            <>\n              <span>(</span>\n              {node.param !== null && <>{formatNode(node.param, showChildren, childMaxDepth)}, </>}\n              {formatNode(node.expr, showChildren, childMaxDepth)}\n              <span>)</span>\n            </>\n          )}\n        </>\n      );\n    case nodeType.subquery:\n      return (\n        <>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}[\n          <PromQLDuration>{formatDuration(convertTimeToDuration(node.range))}</PromQLDuration>:\n          {node.step !== 0 && <PromQLDuration>{formatDuration(convertTimeToDuration(node.step))}</PromQLDuration>}]\n          {formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}\n        </>\n      );\n    case nodeType.parenExpr:\n      return (\n        <>\n          <span>(</span>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}\n          <span>)</span>\n        </>\n      );\n    case nodeType.call: {\n      const children =\n        childMaxDepth === undefined || childMaxDepth > 0\n          ? node.args.map((arg, i) => (\n              <span key={i}>\n                {i !== 0 && ', '}\n                {formatNode(arg, showChildren)}\n              </span>\n            ))\n          : node.args.length > 0\n            ? ellipsis\n            : '';\n\n      return (\n        <>\n          <PromQLFunction>{node.func.name}</PromQLFunction>\n          {showChildren && (\n            <>\n              <span>(</span>\n              {children}\n              <span>)</span>\n            </>\n          )}\n        </>\n      );\n    }\n    case nodeType.matrixSelector:\n      return formatSelector(node);\n    case nodeType.vectorSelector:\n      return formatSelector(node);\n    case nodeType.numberLiteral:\n      return <PromQLNumber>{node.val}</PromQLNumber>;\n    case nodeType.stringLiteral:\n      return <PromQLString>&quot;{escapeString(node.val)}&quot;</PromQLString>;\n    case nodeType.unaryExpr:\n      return (\n        <>\n          <PromQLOperator>{node.op}</PromQLOperator>\n          {showChildren && formatNode(node.expr, showChildren, childMaxDepth)}\n        </>\n      );\n    case nodeType.binaryExpr: {\n      let matching = <></>;\n      let grouping = <></>;\n      const vm = node.matching;\n      if (vm !== null && (vm.labels.length > 0 || vm.on)) {\n        if (vm.on) {\n          matching = (\n            <>\n              {' '}\n              <PromQLKeyword>on</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.labels)}\n              <span>)</span>\n            </>\n          );\n        } else {\n          matching = (\n            <>\n              {' '}\n              <PromQLKeyword>ignoring</PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.labels)}\n              <span>)</span>\n            </>\n          );\n        }\n\n        if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {\n          grouping = (\n            <>\n              <PromQLKeyword>\n                {' '}\n                group_\n                {vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}\n              </PromQLKeyword>\n              <span>(</span>\n              {labelNameList(vm.include)}\n              <span>)</span>\n            </>\n          );\n        }\n      }\n\n      return (\n        <>\n          {showChildren && formatNode(maybeParenthesizeBinopChild(node.op, node.lhs), showChildren, childMaxDepth)}{' '}\n          {['atan2', 'and', 'or', 'unless'].includes(node.op) ? (\n            <PromQLOperator>{node.op}</PromQLOperator>\n          ) : (\n            <PromQLOperator>{node.op}</PromQLOperator>\n          )}\n          {node.bool && (\n            <>\n              {' '}\n              <PromQLKeyword>bool</PromQLKeyword>\n            </>\n          )}\n          {matching}\n          {grouping}{' '}\n          {showChildren && formatNode(maybeParenthesizeBinopChild(node.op, node.rhs), showChildren, childMaxDepth)}\n        </>\n      );\n    }\n    case nodeType.placeholder:\n      // TODO: Include possible children of placeholders somehow?\n      return ellipsis;\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport const formatNode = (node: ASTNode, showChildren: boolean, maxDepth?: number): React.ReactElement => (\n  <PromQLCode>{formatNodeInternal(node, showChildren, maxDepth)}</PromQLCode>\n);\n"],"names":["React","styled","convertTimeToDuration","formatDuration","matchType","vectorMatchCardinality","nodeType","maybeParenthesizeBinopChild","escapeString","PromQLCode","fontFamily","PromQLKeyword","theme","color","palette","mode","PromQLFunction","PromQLMetricName","PromQLLabelName","PromQLString","PromQLEllipsis","PromQLDuration","PromQLNumber","PromQLOperator","labelNameList","labels","map","l","i","span","formatAtAndOffset","timestamp","startOrEnd","offset","toFixed","formatSelector","node","matchLabels","matchers","filter","m","name","type","equal","value","length","matrixSelector","range","ellipsis","formatNodeInternal","showChildren","maxDepth","childMaxDepth","undefined","aggregation","op","without","grouping","param","formatNode","expr","subquery","step","parenExpr","call","children","args","arg","func","vectorSelector","numberLiteral","val","stringLiteral","unaryExpr","binaryExpr","matching","vm","on","card","manyToOne","oneToMany","include","lhs","includes","bool","rhs","placeholder","Error"],"mappings":"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"}

package/lib/components/promql/serialize.js

@@ -11,13 +11,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 // Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/serialize.ts
-import { formatDuration, msToPrometheusDuration } from '@perses-dev/core';
+import { convertTimeToDuration, formatDuration } from '@perses-dev/spec';
 import { matchType, vectorMatchCardinality, nodeType } from './ast';
 import { aggregatorsWithParam, maybeParenthesizeBinopChild, escapeString } from './utils';
-const serializeAtAndOffset = (timestamp, startOrEnd, offset)=>`${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${offset === 0 ? '' : offset > 0 ? ` offset ${formatDuration(msToPrometheusDuration(offset))}` : ` offset -${formatDuration(msToPrometheusDuration(-offset))}`}`;
+const serializeAtAndOffset = (timestamp, startOrEnd, offset)=>`${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${offset === 0 ? '' : offset > 0 ? ` offset ${formatDuration(convertTimeToDuration(offset))}` : ` offset -${formatDuration(convertTimeToDuration(-offset))}`}`;
 const serializeSelector = (node)=>{
     const matchers = node.matchers.filter((m)=>!(m.name === '__name__' && m.type === matchType.equal && m.value === node.name)).map((m)=>`${m.name}${m.type}"${escapeString(m.value)}"`);
-    const range = node.type === nodeType.matrixSelector ? `[${formatDuration(msToPrometheusDuration(node.range))}]` : '';
+    const range = node.type === nodeType.matrixSelector ? `[${formatDuration(convertTimeToDuration(node.range))}]` : '';
     const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);
     return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;
 };
@@ -32,7 +32,7 @@ const serializeNode = (node, indent = 0, pretty = false, initialIndent = true)=>
         case nodeType.aggregation:
             return `${initialInd}${node.op}${node.without ? ` without(${node.grouping.join(', ')}) ` : node.grouping.length > 0 ? ` by(${node.grouping.join(', ')}) ` : ''}(${childListSeparator}${aggregatorsWithParam.includes(node.op) && node.param !== null ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}` : ''}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
         case nodeType.subquery:
-            return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(msToPrometheusDuration(node.range))}:${node.step !== 0 ? formatDuration(msToPrometheusDuration(node.step)) : ''}]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;
+            return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(convertTimeToDuration(node.range))}:${node.step !== 0 ? formatDuration(convertTimeToDuration(node.step)) : ''}]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;
         case nodeType.parenExpr:
             return `${initialInd}(${childListSeparator}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
         case nodeType.call:

package/lib/components/promql/serialize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/promql/serialize.ts"],"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/promql/serialize.ts\n\nimport { formatDuration, msToPrometheusDuration } from '@perses-dev/core';\nimport ASTNode, {\n  VectorSelector,\n  matchType,\n  vectorMatchCardinality,\n  nodeType,\n  StartOrEnd,\n  MatrixSelector,\n} from './ast';\nimport { aggregatorsWithParam, maybeParenthesizeBinopChild, escapeString } from './utils';\n\nconst serializeAtAndOffset = (timestamp: number | null, startOrEnd: StartOrEnd, offset: number): string =>\n  `${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${\n    offset === 0\n      ? ''\n      : offset > 0\n        ? ` offset ${formatDuration(msToPrometheusDuration(offset))}`\n        : ` offset -${formatDuration(msToPrometheusDuration(-offset))}`\n  }`;\n\nconst serializeSelector = (node: VectorSelector | MatrixSelector): string => {\n  const matchers = node.matchers\n    .filter((m) => !(m.name === '__name__' && m.type === matchType.equal && m.value === node.name))\n    .map((m) => `${m.name}${m.type}\"${escapeString(m.value)}\"`);\n\n  const range = node.type === nodeType.matrixSelector ? `[${formatDuration(msToPrometheusDuration(node.range))}]` : '';\n  const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);\n\n  return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;\n};\n\nconst serializeNode = (node: ASTNode, indent = 0, pretty = false, initialIndent = true): string => {\n  const childListSeparator = pretty ? '\\n' : '';\n  const childSeparator = pretty ? '\\n' : ' ';\n  const childIndent = indent + 2;\n  const ind = pretty ? ' '.repeat(indent) : '';\n  // Needed for unary operators.\n  const initialInd = initialIndent ? ind : '';\n\n  switch (node.type) {\n    case nodeType.aggregation:\n      return `${initialInd}${node.op}${\n        node.without\n          ? ` without(${node.grouping.join(', ')}) `\n          : node.grouping.length > 0\n            ? ` by(${node.grouping.join(', ')}) `\n            : ''\n      }(${childListSeparator}${\n        aggregatorsWithParam.includes(node.op) && node.param !== null\n          ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}`\n          : ''\n      }${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;\n\n    case nodeType.subquery:\n      return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(msToPrometheusDuration(node.range))}:${\n        node.step !== 0 ? formatDuration(msToPrometheusDuration(node.step)) : ''\n      }]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;\n\n    case nodeType.parenExpr:\n      return `${initialInd}(${childListSeparator}${serializeNode(\n        node.expr,\n        childIndent,\n        pretty\n      )}${childListSeparator}${ind})`;\n\n    case nodeType.call: {\n      const sep = node.args.length > 0 ? childListSeparator : '';\n\n      return `${initialInd}${node.func.name}(${sep}${node.args\n        .map((arg) => serializeNode(arg, childIndent, pretty))\n        .join(',' + childSeparator)}${sep}${node.args.length > 0 ? ind : ''})`;\n    }\n\n    case nodeType.matrixSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.vectorSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.numberLiteral:\n      return `${initialInd}${node.val}`;\n\n    case nodeType.stringLiteral:\n      return `${initialInd}\"${escapeString(node.val)}\"`;\n\n    case nodeType.unaryExpr:\n      return `${initialInd}${node.op}${serializeNode(node.expr, indent, pretty, false)}`;\n\n    case nodeType.binaryExpr: {\n      let matching = '';\n      let grouping = '';\n      const vm = node.matching;\n      if (vm !== null && (vm.labels.length > 0 || vm.on)) {\n        if (vm.on) {\n          matching = ` on(${vm.labels.join(', ')})`;\n        } else {\n          matching = ` ignoring(${vm.labels.join(', ')})`;\n        }\n\n        if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {\n          grouping = ` group_${vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}(${vm.include.join(',')})`;\n        }\n      }\n\n      return `${serializeNode(maybeParenthesizeBinopChild(node.op, node.lhs), childIndent, pretty)}${childSeparator}${ind}${\n        node.op\n      }${node.bool ? ' bool' : ''}${matching}${grouping}${childSeparator}${serializeNode(\n        maybeParenthesizeBinopChild(node.op, node.rhs),\n        childIndent,\n        pretty\n      )}`;\n    }\n\n    case nodeType.placeholder:\n      // TODO: Should we just throw an error when trying to serialize an AST containing a placeholder node?\n      // (that would currently break editing-as-text of ASTs that contain placeholders)\n      return `${initialInd}…${\n        node.children.length > 0\n          ? `(${childListSeparator}${node.children\n              .map((child) => serializeNode(child, childIndent, pretty))\n              .join(',' + childSeparator)}${childListSeparator}${ind})`\n          : ''\n      }`;\n\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport default serializeNode;\n"],"names":["formatDuration","msToPrometheusDuration","matchType","vectorMatchCardinality","nodeType","aggregatorsWithParam","maybeParenthesizeBinopChild","escapeString","serializeAtAndOffset","timestamp","startOrEnd","offset","toFixed","serializeSelector","node","matchers","filter","m","name","type","equal","value","map","range","matrixSelector","atAndOffset","length","join","serializeNode","indent","pretty","initialIndent","childListSeparator","childSeparator","childIndent","ind","repeat","initialInd","aggregation","op","without","grouping","includes","param","expr","subquery","step","parenExpr","call","sep","args","func","arg","vectorSelector","numberLiteral","val","stringLiteral","unaryExpr","binaryExpr","matching","vm","labels","on","card","manyToOne","oneToMany","include","lhs","bool","rhs","placeholder","children","child","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/promql/serialize.ts"],"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/promql/serialize.ts\n\nimport { convertTimeToDuration, formatDuration } from '@perses-dev/spec';\nimport ASTNode, {\n  VectorSelector,\n  matchType,\n  vectorMatchCardinality,\n  nodeType,\n  StartOrEnd,\n  MatrixSelector,\n} from './ast';\nimport { aggregatorsWithParam, maybeParenthesizeBinopChild, escapeString } from './utils';\n\nconst serializeAtAndOffset = (timestamp: number | null, startOrEnd: StartOrEnd, offset: number): string =>\n  `${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${\n    offset === 0\n      ? ''\n      : offset > 0\n        ? ` offset ${formatDuration(convertTimeToDuration(offset))}`\n        : ` offset -${formatDuration(convertTimeToDuration(-offset))}`\n  }`;\n\nconst serializeSelector = (node: VectorSelector | MatrixSelector): string => {\n  const matchers = node.matchers\n    .filter((m) => !(m.name === '__name__' && m.type === matchType.equal && m.value === node.name))\n    .map((m) => `${m.name}${m.type}\"${escapeString(m.value)}\"`);\n\n  const range = node.type === nodeType.matrixSelector ? `[${formatDuration(convertTimeToDuration(node.range))}]` : '';\n  const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);\n\n  return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;\n};\n\nconst serializeNode = (node: ASTNode, indent = 0, pretty = false, initialIndent = true): string => {\n  const childListSeparator = pretty ? '\\n' : '';\n  const childSeparator = pretty ? '\\n' : ' ';\n  const childIndent = indent + 2;\n  const ind = pretty ? ' '.repeat(indent) : '';\n  // Needed for unary operators.\n  const initialInd = initialIndent ? ind : '';\n\n  switch (node.type) {\n    case nodeType.aggregation:\n      return `${initialInd}${node.op}${\n        node.without\n          ? ` without(${node.grouping.join(', ')}) `\n          : node.grouping.length > 0\n            ? ` by(${node.grouping.join(', ')}) `\n            : ''\n      }(${childListSeparator}${\n        aggregatorsWithParam.includes(node.op) && node.param !== null\n          ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}`\n          : ''\n      }${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;\n\n    case nodeType.subquery:\n      return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(convertTimeToDuration(node.range))}:${\n        node.step !== 0 ? formatDuration(convertTimeToDuration(node.step)) : ''\n      }]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;\n\n    case nodeType.parenExpr:\n      return `${initialInd}(${childListSeparator}${serializeNode(\n        node.expr,\n        childIndent,\n        pretty\n      )}${childListSeparator}${ind})`;\n\n    case nodeType.call: {\n      const sep = node.args.length > 0 ? childListSeparator : '';\n\n      return `${initialInd}${node.func.name}(${sep}${node.args\n        .map((arg) => serializeNode(arg, childIndent, pretty))\n        .join(',' + childSeparator)}${sep}${node.args.length > 0 ? ind : ''})`;\n    }\n\n    case nodeType.matrixSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.vectorSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.numberLiteral:\n      return `${initialInd}${node.val}`;\n\n    case nodeType.stringLiteral:\n      return `${initialInd}\"${escapeString(node.val)}\"`;\n\n    case nodeType.unaryExpr:\n      return `${initialInd}${node.op}${serializeNode(node.expr, indent, pretty, false)}`;\n\n    case nodeType.binaryExpr: {\n      let matching = '';\n      let grouping = '';\n      const vm = node.matching;\n      if (vm !== null && (vm.labels.length > 0 || vm.on)) {\n        if (vm.on) {\n          matching = ` on(${vm.labels.join(', ')})`;\n        } else {\n          matching = ` ignoring(${vm.labels.join(', ')})`;\n        }\n\n        if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {\n          grouping = ` group_${vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}(${vm.include.join(',')})`;\n        }\n      }\n\n      return `${serializeNode(maybeParenthesizeBinopChild(node.op, node.lhs), childIndent, pretty)}${childSeparator}${ind}${\n        node.op\n      }${node.bool ? ' bool' : ''}${matching}${grouping}${childSeparator}${serializeNode(\n        maybeParenthesizeBinopChild(node.op, node.rhs),\n        childIndent,\n        pretty\n      )}`;\n    }\n\n    case nodeType.placeholder:\n      // TODO: Should we just throw an error when trying to serialize an AST containing a placeholder node?\n      // (that would currently break editing-as-text of ASTs that contain placeholders)\n      return `${initialInd}…${\n        node.children.length > 0\n          ? `(${childListSeparator}${node.children\n              .map((child) => serializeNode(child, childIndent, pretty))\n              .join(',' + childSeparator)}${childListSeparator}${ind})`\n          : ''\n      }`;\n\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport default serializeNode;\n"],"names":["convertTimeToDuration","formatDuration","matchType","vectorMatchCardinality","nodeType","aggregatorsWithParam","maybeParenthesizeBinopChild","escapeString","serializeAtAndOffset","timestamp","startOrEnd","offset","toFixed","serializeSelector","node","matchers","filter","m","name","type","equal","value","map","range","matrixSelector","atAndOffset","length","join","serializeNode","indent","pretty","initialIndent","childListSeparator","childSeparator","childIndent","ind","repeat","initialInd","aggregation","op","without","grouping","includes","param","expr","subquery","step","parenExpr","call","sep","args","func","arg","vectorSelector","numberLiteral","val","stringLiteral","unaryExpr","binaryExpr","matching","vm","labels","on","card","manyToOne","oneToMany","include","lhs","bool","rhs","placeholder","children","child","Error"],"mappings":"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"}

package/lib/components/query.d.ts

@@ -1,5 +1,6 @@
-import { DatasourceSelector, StatusError } from '@perses-dev/core';
 import { UseQueryResult } from '@tanstack/react-query';
+import { DatasourceSelector } from '@perses-dev/spec';
+import { StatusError } from '@perses-dev/client';
 import { MonitoredInstantQueryResponse, ParseQueryResponse } from '../model';
 export declare function useParseQuery(content: string, datasource: DatasourceSelector, enabled?: boolean): UseQueryResult<ParseQueryResponse, StatusError>;
 export declare function useInstantQuery(content: string, datasource: DatasourceSelector, enabled?: boolean): UseQueryResult<MonitoredInstantQueryResponse, StatusError>;

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

@@ -1 +1 @@
-{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../../src/components/query.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAEL,6BAA6B,EAE7B,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAElB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAYjD;AAED,wBAAgB,eAAe,CAC7B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,6BAA6B,EAAE,WAAW,CAAC,CAgB5D"}
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../../src/components/query.ts"],"names":[],"mappings":"AAcA,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAEL,6BAA6B,EAE7B,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAGlB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAgBjD;AAED,wBAAgB,eAAe,CAC7B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,6BAA6B,EAAE,WAAW,CAAC,CAqB5D"}

package/lib/components/query.js

@@ -10,10 +10,13 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useDatasourceClient } from '@perses-dev/plugin-system';
+import { useDatasourceClient, useDatasourceStore, useVariableValues } from '@perses-dev/plugin-system';
 import { useQuery } from '@tanstack/react-query';
+import { getInterpolatedRequestOptions } from '../plugins/interpolation';
 export function useParseQuery(content, datasource, enabled) {
     const { data: client } = useDatasourceClient(datasource);
+    const datasourceStore = useDatasourceStore();
+    const variableState = useVariableValues();
     return useQuery({
         enabled: !!client && enabled,
         queryKey: [
@@ -26,12 +29,15 @@ export function useParseQuery(content, datasource, enabled) {
             const params = {
                 query: content
             };
-            return await client.parseQuery(params);
+            const interpolatedOptions = await getInterpolatedRequestOptions(datasourceStore, datasource, variableState);
+            return await client.parseQuery(params, interpolatedOptions);
         }
     });
 }
 export function useInstantQuery(content, datasource, enabled) {
     const { data: client } = useDatasourceClient(datasource);
+    const datasourceStore = useDatasourceStore();
+    const variableState = useVariableValues();
     return useQuery({
         enabled: !!client && enabled,
         // TODO: for some reason the caching is not working: identical nodes still fire their requests after each change made to the promQL
@@ -45,8 +51,9 @@ export function useInstantQuery(content, datasource, enabled) {
             const params = {
                 query: content
             };
+            const interpolatedOptions = await getInterpolatedRequestOptions(datasourceStore, datasource, variableState);
             const startTime = performance.now();
-            const response = await client.instantQuery(params);
+            const response = await client.instantQuery(params, interpolatedOptions);
             const responseTime = performance.now() - startTime;
             return {
                 ...response,