@perses-dev/tempo-plugin 0.57.0 → 0.57.1

package/lib/cjs/components/AttributeFilters.js

@@ -25,10 +25,8 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _reactquery = require("@tanstack/react-query");
-const _gettracedata = require("../plugins/tempo-trace-query/get-trace-data");
-const _filter_to_traceql = require("./filter/filter_to_traceql");
-const _traceql_to_filter = require("./filter/traceql_to_filter");
-const _filter = require("./filter/filter");
+const _plugins = require("../plugins");
+const _filter = require("./filter");
 const statusOptions = [
     'unset',
     'ok',
@@ -36,65 +34,92 @@ const statusOptions = [
 ];
 function AttributeFilters(props) {
     const { client, query, setQuery } = props;
-    const filter = (0, _traceql_to_filter.traceQLToFilter)(query);
+    const filter = (0, _filter.traceQLToFilter)(query);
     const setFilter = (filter)=>{
-        setQuery((0, _filter_to_traceql.filterToTraceQL)(filter));
+        setQuery((0, _filter.filterToTraceQL)(filter));
     };
     const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
-    const { start, end } = (0, _gettracedata.getUnixTimeRange)(absoluteTimeRange);
-    const { data: serviceNameOptions } = useTagValues(client, 'resource.service.name', (0, _filter_to_traceql.filterToTraceQL)({
+    const { start, end } = (0, _plugins.getUnixTimeRange)(absoluteTimeRange);
+    const { data: serviceNameOptions } = useTagValues(client, 'resource.service.name', (0, _filter.filterToTraceQL)({
         ...filter,
         serviceName: []
     }), start, end);
-    const { data: spanNameOptions } = useTagValues(client, 'name', (0, _filter_to_traceql.filterToTraceQL)({
+    const { data: spanNameOptions } = useTagValues(client, 'name', (0, _filter.filterToTraceQL)({
         ...filter,
         spanName: []
     }), start, end);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "column",
+        flex: 1,
+        gap: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
-                label: "Service Name",
-                options: serviceNameOptions ?? [],
-                value: filter.serviceName,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        serviceName: x
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
-                label: "Span Name",
-                options: spanNameOptions ?? [],
-                value: filter.spanName,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        spanName: x
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
-                label: "Status",
-                width: 210,
-                options: statusOptions ?? [],
-                value: filter.status,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        status: x
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(DurationAttributeFilter, {
-                label: "Trace Duration",
-                value: filter.traceDuration,
-                setValue: (value)=>setFilter({
-                        ...filter,
-                        traceDuration: value
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                flex: 1,
+                gap: 1,
+                sx: {
+                    '& > *:nth-of-type(1)': {
+                        flex: 2
+                    },
+                    '& > *:nth-of-type(2)': {
+                        flex: 2
+                    },
+                    '& > *:nth-of-type(3)': {
+                        flex: 1
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
+                        label: "Service Name",
+                        options: serviceNameOptions ?? [],
+                        value: filter.serviceName,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                serviceName: x
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
+                        label: "Span Name",
+                        options: spanNameOptions ?? [],
+                        value: filter.spanName,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                spanName: x
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(StringAttributeFilter, {
+                        label: "Status",
+                        options: statusOptions ?? [],
+                        value: filter.status,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                status: x
+                            })
                     })
+                ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomAttributesFilter, {
-                label: "Custom Attributes",
-                value: filter.customMatchers,
-                setValue: (value)=>setFilter({
-                        ...filter,
-                        customMatchers: value
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                flex: 1,
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(DurationAttributeFilter, {
+                        label: "Trace Duration",
+                        value: filter.traceDuration,
+                        setValue: (value)=>setFilter({
+                                ...filter,
+                                traceDuration: value
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomAttributesFilter, {
+                        label: "Custom Attributes",
+                        value: filter.customMatchers,
+                        setValue: (value)=>setFilter({
+                                ...filter,
+                                customMatchers: value
+                            })
                     })
+                ]
             })
         ]
     });
@@ -203,7 +228,7 @@ function CustomAttributesFilter(props) {
 /** A <TextField> which calls props.setValue when the input field is blurred and the validation passes. */ function LazyTextInput(props) {
     const { validationRegex, validationFailedMessage, value, setValue, ...otherProps } = props;
     const [draftValue, setDraftValue] = (0, _react.useState)(value);
-    const isValidInput = draftValue == '' || validationRegex == undefined || validationRegex.test(draftValue);
+    const isValidInput = draftValue === '' || validationRegex === undefined || validationRegex.test(draftValue);
     (0, _react.useEffect)(()=>{
         setDraftValue(value);
     }, [

package/lib/cjs/components/complete.js

@@ -34,7 +34,7 @@ _export(exports, {
 const _autocomplete = require("@codemirror/autocomplete");
 const _language = require("@codemirror/language");
 const _lezertraceql = require("@grafana/lezer-traceql");
-const _tempotracequery = require("../plugins/tempo-trace-query");
+const _plugins = require("../plugins");
 const quoteChars = [
     '"',
     '`'
@@ -294,7 +294,7 @@ async function completeTagName(completionCfg, scope) {
     if (!completionCfg.client) {
         return [];
     }
-    const { start, end } = completionCfg.timeRange ? (0, _tempotracequery.getUnixTimeRange)(completionCfg.timeRange) : {};
+    const { start, end } = completionCfg.timeRange ? (0, _plugins.getUnixTimeRange)(completionCfg.timeRange) : {};
     const { limit, maxStaleValues } = completionCfg;
     const response = await completionCfg.client.searchTags({
         scope,
@@ -340,7 +340,7 @@ async function completeTagValue(completionCfg, tag) {
     if (!completionCfg.client) {
         return [];
     }
-    const { start, end } = completionCfg.timeRange ? (0, _tempotracequery.getUnixTimeRange)(completionCfg.timeRange) : {};
+    const { start, end } = completionCfg.timeRange ? (0, _plugins.getUnixTimeRange)(completionCfg.timeRange) : {};
     const { limit, maxStaleValues } = completionCfg;
     const response = await completionCfg.client.searchTagValues({
         tag,

package/lib/cjs/components/filter/filter.js

@@ -25,9 +25,9 @@ function splitByUnquotedWhitespace(x) {
     let from = 0;
     const chunks = [];
     for(let i = 0; i < x.length; i++){
-        if (x[i] == '"' && x[i - 1] != '\\') {
+        if (x[i] === '"' && x[i - 1] !== '\\') {
             quote = !quote;
-        } else if (x[i] == ' ' && !quote) {
+        } else if (x[i] === ' ' && !quote) {
             chunks.push(x.slice(from, i));
             from = i + 1;
         }

package/lib/cjs/components/filter/filter_to_traceql.js

@@ -44,7 +44,7 @@ function stringMatcher(attribute, values) {
         return [
             `${attribute} =~ "${escapedValues.join('|')}"`
         ];
-    } else if (escapedValues.length == 1) {
+    } else if (escapedValues.length === 1) {
         return [
             `${attribute} = "${escapedValues[0]}"`
         ];

package/lib/cjs/components/filter/traceql_to_filter.js

@@ -83,9 +83,9 @@ function reverseStringMatcher(matches) {
     const values = [];
     for (const { operator, value } of matches ?? []){
         const unescaped = unescape(value.slice(1, -1));
-        if (operator == '=') {
+        if (operator === '=') {
             values.push(unescaped);
-        } else if (operator == '=~') {
+        } else if (operator === '=~') {
             values.push(...unescaped.split('|'));
         }
     }
@@ -94,7 +94,7 @@ function reverseStringMatcher(matches) {
 function reverseIntrinsicMatcher(matches) {
     const values = [];
     for (const { operator, value } of matches ?? []){
-        if (operator == '=') {
+        if (operator === '=') {
             values.push(value);
         }
     }
@@ -103,9 +103,9 @@ function reverseIntrinsicMatcher(matches) {
 function reverseDurationMatcher(matches) {
     const duration = {};
     for (const { operator, value } of matches ?? []){
-        if (operator == '>=') {
+        if (operator === '>=') {
             duration.min = value;
-        } else if (operator == '<=') {
+        } else if (operator === '<=') {
             duration.max = value;
         }
     }

package/lib/cjs/plugins/tempo-trace-query/TempoTraceQueryEditor.js

@@ -116,7 +116,7 @@ function TempoTraceQueryEditor(props) {
 }
 function isSimpleTraceQLQuery(query) {
     // if a query can be transformed to a filter and back to the original query, we can show the attribute filter toolbar
-    return query == '' || (0, _components1.filterToTraceQL)((0, _components1.traceQLToFilter)(query)) === query;
+    return query === '' || (0, _components1.filterToTraceQL)((0, _components1.traceQLToFilter)(query)) === query;
 }
 const limitOptions = [
     20,

package/lib/cjs/plugins/tempo-trace-query/get-trace-data.js

@@ -32,7 +32,6 @@ const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _datefns = require("date-fns");
 const _model = require("../../model");
-const _apitypes = require("../../model/api-types");
 function getUnixTimeRange(timeRange) {
     const { start, end } = timeRange;
     return {
@@ -80,7 +79,7 @@ const getTraceData = async (spec, context)=>{
         }
         // Fetch one more trace than requested.
         // This way we can check if there are more traces available matching the search request, and show a notice to the user.
-        const limit = spec.limit ?? _apitypes.DEFAULT_SEARCH_LIMIT;
+        const limit = spec.limit ?? _model.DEFAULT_SEARCH_LIMIT;
         params.limit = limit + 1;
         const response = await client.searchWithFallback(params);
         const searchResult = parseSearchResponse(response);
@@ -115,20 +114,20 @@ function parseTraceResponse(response) {
     for (const resourceSpan of trace.resourceSpans){
         for (const scopeSpan of resourceSpan.scopeSpans){
             for (const span of scopeSpan.spans){
-                if (span.traceId.length != 32) {
+                if (span.traceId.length !== 32) {
                     span.traceId = base64ToHex(span.traceId);
                 }
-                if (span.spanId.length != 16) {
+                if (span.spanId.length !== 16) {
                     span.spanId = base64ToHex(span.spanId);
                 }
-                if (span.parentSpanId && span.parentSpanId.length != 16) {
+                if (span.parentSpanId && span.parentSpanId.length !== 16) {
                     span.parentSpanId = base64ToHex(span.parentSpanId);
                 }
                 for (const link of span.links ?? []){
-                    if (link.traceId.length != 32) {
+                    if (link.traceId.length !== 32) {
                         link.traceId = base64ToHex(link.traceId);
                     }
-                    if (link.spanId.length != 16) {
+                    if (link.spanId.length !== 16) {
                         link.spanId = base64ToHex(link.spanId);
                     }
                 }

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

@@ -1 +1 @@
-{"version":3,"file":"AttributeFilters.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoD,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQvC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA2D3E"}
+{"version":3,"file":"AttributeFilters.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoD,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAMvC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAuE3E"}

package/lib/components/AttributeFilters.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -15,10 +15,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { Autocomplete, Checkbox, Stack, TextField } from '@mui/material';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { useQuery } from '@tanstack/react-query';
-import { getUnixTimeRange } from '../plugins/tempo-trace-query/get-trace-data';
-import { filterToTraceQL } from './filter/filter_to_traceql';
-import { traceQLToFilter } from './filter/traceql_to_filter';
-import { splitByUnquotedWhitespace } from './filter/filter';
+import { getUnixTimeRange } from '../plugins';
+import { filterToTraceQL, traceQLToFilter, splitByUnquotedWhitespace } from './filter';
 const statusOptions = [
     'unset',
     'ok',
@@ -40,51 +38,78 @@ export function AttributeFilters(props) {
         ...filter,
         spanName: []
     }), start, end);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "column",
+        flex: 1,
+        gap: 1,
         children: [
-            /*#__PURE__*/ _jsx(StringAttributeFilter, {
-                label: "Service Name",
-                options: serviceNameOptions ?? [],
-                value: filter.serviceName,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        serviceName: x
-                    })
-            }),
-            /*#__PURE__*/ _jsx(StringAttributeFilter, {
-                label: "Span Name",
-                options: spanNameOptions ?? [],
-                value: filter.spanName,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        spanName: x
-                    })
-            }),
-            /*#__PURE__*/ _jsx(StringAttributeFilter, {
-                label: "Status",
-                width: 210,
-                options: statusOptions ?? [],
-                value: filter.status,
-                setValue: (x)=>setFilter({
-                        ...filter,
-                        status: x
-                    })
-            }),
-            /*#__PURE__*/ _jsx(DurationAttributeFilter, {
-                label: "Trace Duration",
-                value: filter.traceDuration,
-                setValue: (value)=>setFilter({
-                        ...filter,
-                        traceDuration: value
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                flex: 1,
+                gap: 1,
+                sx: {
+                    '& > *:nth-of-type(1)': {
+                        flex: 2
+                    },
+                    '& > *:nth-of-type(2)': {
+                        flex: 2
+                    },
+                    '& > *:nth-of-type(3)': {
+                        flex: 1
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                        label: "Service Name",
+                        options: serviceNameOptions ?? [],
+                        value: filter.serviceName,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                serviceName: x
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                        label: "Span Name",
+                        options: spanNameOptions ?? [],
+                        value: filter.spanName,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                spanName: x
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                        label: "Status",
+                        options: statusOptions ?? [],
+                        value: filter.status,
+                        setValue: (x)=>setFilter({
+                                ...filter,
+                                status: x
+                            })
                     })
+                ]
             }),
-            /*#__PURE__*/ _jsx(CustomAttributesFilter, {
-                label: "Custom Attributes",
-                value: filter.customMatchers,
-                setValue: (value)=>setFilter({
-                        ...filter,
-                        customMatchers: value
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                flex: 1,
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(DurationAttributeFilter, {
+                        label: "Trace Duration",
+                        value: filter.traceDuration,
+                        setValue: (value)=>setFilter({
+                                ...filter,
+                                traceDuration: value
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(CustomAttributesFilter, {
+                        label: "Custom Attributes",
+                        value: filter.customMatchers,
+                        setValue: (value)=>setFilter({
+                                ...filter,
+                                customMatchers: value
+                            })
                     })
+                ]
             })
         ]
     });
@@ -193,7 +218,7 @@ function CustomAttributesFilter(props) {
 /** A <TextField> which calls props.setValue when the input field is blurred and the validation passes. */ function LazyTextInput(props) {
     const { validationRegex, validationFailedMessage, value, setValue, ...otherProps } = props;
     const [draftValue, setDraftValue] = useState(value);
-    const isValidInput = draftValue == '' || validationRegex == undefined || validationRegex.test(draftValue);
+    const isValidInput = draftValue === '' || validationRegex === undefined || validationRegex.test(draftValue);
     useEffect(()=>{
         setDraftValue(value);
     }, [

package/lib/components/AttributeFilters.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AttributeFilters.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\nimport { ReactElement, SyntheticEvent, useCallback, useEffect, useState } from 'react';\nimport { Autocomplete, Checkbox, Stack, TextField, TextFieldProps } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { TempoClient } from '../model';\nimport { getUnixTimeRange } from '../plugins/tempo-trace-query/get-trace-data';\nimport { filterToTraceQL } from './filter/filter_to_traceql';\nimport { traceQLToFilter } from './filter/traceql_to_filter';\nimport { DurationField, Filter, splitByUnquotedWhitespace } from './filter/filter';\n\nconst statusOptions = ['unset', 'ok', 'error'];\n\nexport interface AttributeFiltersProps {\n  client?: TempoClient;\n  query: string;\n  setQuery: (x: string) => void;\n}\n\nexport function AttributeFilters(props: AttributeFiltersProps): ReactElement {\n  const { client, query, setQuery } = props;\n\n  const filter = traceQLToFilter(query);\n  const setFilter = (filter: Filter) => {\n    setQuery(filterToTraceQL(filter));\n  };\n\n  const { absoluteTimeRange } = useTimeRange();\n  const { start, end } = getUnixTimeRange(absoluteTimeRange);\n\n  const { data: serviceNameOptions } = useTagValues(\n    client,\n    'resource.service.name',\n    filterToTraceQL({ ...filter, serviceName: [] }),\n    start,\n    end\n  );\n  const { data: spanNameOptions } = useTagValues(\n    client,\n    'name',\n    filterToTraceQL({ ...filter, spanName: [] }),\n    start,\n    end\n  );\n\n  return (\n    <>\n      <StringAttributeFilter\n        label=\"Service Name\"\n        options={serviceNameOptions ?? []}\n        value={filter.serviceName}\n        setValue={(x) => setFilter({ ...filter, serviceName: x })}\n      />\n      <StringAttributeFilter\n        label=\"Span Name\"\n        options={spanNameOptions ?? []}\n        value={filter.spanName}\n        setValue={(x) => setFilter({ ...filter, spanName: x })}\n      />\n      <StringAttributeFilter\n        label=\"Status\"\n        width={210}\n        options={statusOptions ?? []}\n        value={filter.status}\n        setValue={(x) => setFilter({ ...filter, status: x })}\n      />\n      <DurationAttributeFilter\n        label=\"Trace Duration\"\n        value={filter.traceDuration}\n        setValue={(value) => setFilter({ ...filter, traceDuration: value })}\n      />\n      <CustomAttributesFilter\n        label=\"Custom Attributes\"\n        value={filter.customMatchers}\n        setValue={(value) => setFilter({ ...filter, customMatchers: value })}\n      />\n    </>\n  );\n}\n\ninterface StringAttributeFilterProps {\n  label: string;\n  width?: number;\n  options: string[];\n  value: string[];\n  setValue: (value: string[]) => void;\n}\n\nfunction StringAttributeFilter(props: StringAttributeFilterProps) {\n  const { label, width, options, value, setValue } = props;\n\n  return (\n    <Autocomplete\n      multiple\n      size=\"small\"\n      limitTags={1}\n      disableCloseOnSelect\n      value={value}\n      onChange={(_event: SyntheticEvent, newValue: string[]) => setValue(newValue)}\n      options={options}\n      renderOption={(props, option, { selected }) => {\n        const { key, ...optionProps } = props;\n        return (\n          <li key={key} {...optionProps}>\n            <Checkbox style={{ marginRight: 8 }} checked={selected} />\n            {option}\n          </li>\n        );\n      }}\n      renderInput={(params) => <TextField {...params} label={label} />}\n      // Reduce the size of the chips to make space for the <input> element, the +X text and the X button to avoid a line break.\n      // See https://github.com/mui/material-ui/issues/38835 for more details.\n      slotProps={{ chip: { sx: { maxWidth: 'calc(100% - 45px) !important' } } }}\n      // Reduce the size of the <input> field\n      sx={{ width: width ?? 250, '& input': { minWidth: '5px !important' } }}\n    />\n  );\n}\n\ninterface DurationAttributeFilterProps {\n  label: string;\n  value: DurationField;\n  setValue: (value: DurationField) => void;\n}\n\nfunction DurationAttributeFilter(props: DurationAttributeFilterProps) {\n  const { label, value, setValue } = props;\n  const { min, max } = value;\n\n  return (\n    <Stack direction=\"row\" gap={0.5}>\n      <DurationTextInput label={`Min ${label}`} value={min ?? ''} setValue={(min) => setValue({ min, max })} />\n      <DurationTextInput label={`Max ${label}`} value={max ?? ''} setValue={(max) => setValue({ min, max })} />\n    </Stack>\n  );\n}\n\nconst durationFormatRegex = /^([0-9]+\\.)?[0-9]+(ns|ms|s|m|h)$/;\n\ninterface DurationTextInputProps {\n  label: string;\n  value: string;\n  setValue: (value: string) => void;\n}\n\nfunction DurationTextInput(props: DurationTextInputProps) {\n  const { label, value, setValue } = props;\n\n  return (\n    <LazyTextInput\n      label={label}\n      size=\"small\"\n      value={value}\n      setValue={setValue}\n      validationRegex={durationFormatRegex}\n      validationFailedMessage=\"Invalid format. Accepted format e.g. 100ms, accepted units: ns, ms, s, m, h\"\n      sx={{ width: 150 }}\n    />\n  );\n}\n\ninterface CustomAttributesFilterProps {\n  label: string;\n  value: string[];\n  setValue: (value: string[]) => void;\n}\n\nfunction CustomAttributesFilter(props: CustomAttributesFilterProps) {\n  const { label, value, setValue } = props;\n\n  return (\n    <LazyTextInput\n      label={label}\n      size=\"small\"\n      placeholder='span.http.status_code=200 span.http.method=\"GET\"'\n      value={value.join(' ')}\n      setValue={(x) => setValue(splitByUnquotedWhitespace(x))}\n      sx={{ flexGrow: 1 }}\n    />\n  );\n}\n\ninterface LazyTextInputProps extends Omit<TextFieldProps, 'variant'> {\n  validationRegex?: RegExp;\n  validationFailedMessage?: string;\n  value: string;\n  setValue: (value: string) => void;\n}\n\n/** A <TextField> which calls props.setValue when the input field is blurred and the validation passes. */\nfunction LazyTextInput(props: LazyTextInputProps) {\n  const { validationRegex, validationFailedMessage, value, setValue, ...otherProps } = props;\n  const [draftValue, setDraftValue] = useState(value);\n  const isValidInput = draftValue == '' || validationRegex == undefined || validationRegex.test(draftValue);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value, setDraftValue]);\n\n  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(event.target.value);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    if (isValidInput) {\n      setValue(draftValue);\n    }\n  }, [isValidInput, setValue, draftValue]);\n\n  return (\n    <TextField\n      {...otherProps}\n      error={!isValidInput}\n      helperText={isValidInput ? undefined : validationFailedMessage}\n      value={draftValue}\n      onChange={handleChange}\n      onBlur={handleBlur}\n    />\n  );\n}\n\nfunction useTagValues(client: TempoClient | undefined, tag: string, query: string, start?: number, end?: number) {\n  return useQuery({\n    queryKey: ['useTagValues', client, tag, query, start, end],\n    enabled: !!client,\n    queryFn: async function () {\n      if (!client) return;\n      const values = await client.searchTagValues({ tag, q: query, start, end });\n      return values.tagValues.map((tagValue) => tagValue.value ?? '').sort();\n    },\n    staleTime: 60 * 1000, // cache tag value response for 1m\n  });\n}\n"],"names":["useCallback","useEffect","useState","Autocomplete","Checkbox","Stack","TextField","useTimeRange","useQuery","getUnixTimeRange","filterToTraceQL","traceQLToFilter","splitByUnquotedWhitespace","statusOptions","AttributeFilters","props","client","query","setQuery","filter","setFilter","absoluteTimeRange","start","end","data","serviceNameOptions","useTagValues","serviceName","spanNameOptions","spanName","StringAttributeFilter","label","options","value","setValue","x","width","status","DurationAttributeFilter","traceDuration","CustomAttributesFilter","customMatchers","multiple","size","limitTags","disableCloseOnSelect","onChange","_event","newValue","renderOption","option","selected","key","optionProps","li","style","marginRight","checked","renderInput","params","slotProps","chip","sx","maxWidth","minWidth","min","max","direction","gap","DurationTextInput","durationFormatRegex","LazyTextInput","validationRegex","validationFailedMessage","placeholder","join","flexGrow","otherProps","draftValue","setDraftValue","isValidInput","undefined","test","handleChange","event","target","handleBlur","error","helperText","onBlur","tag","queryKey","enabled","queryFn","values","searchTagValues","q","tagValues","map","tagValue","sort","staleTime"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/AttributeFilters.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\nimport { ReactElement, SyntheticEvent, useCallback, useEffect, useState } from 'react';\nimport { Autocomplete, Checkbox, Stack, TextField, TextFieldProps } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { TempoClient } from '../model';\nimport { getUnixTimeRange } from '../plugins';\nimport { filterToTraceQL, traceQLToFilter, DurationField, Filter, splitByUnquotedWhitespace } from './filter';\n\nconst statusOptions = ['unset', 'ok', 'error'];\n\nexport interface AttributeFiltersProps {\n  client?: TempoClient;\n  query: string;\n  setQuery: (x: string) => void;\n}\n\nexport function AttributeFilters(props: AttributeFiltersProps): ReactElement {\n  const { client, query, setQuery } = props;\n\n  const filter = traceQLToFilter(query);\n  const setFilter = (filter: Filter): void => {\n    setQuery(filterToTraceQL(filter));\n  };\n\n  const { absoluteTimeRange } = useTimeRange();\n  const { start, end } = getUnixTimeRange(absoluteTimeRange);\n\n  const { data: serviceNameOptions } = useTagValues(\n    client,\n    'resource.service.name',\n    filterToTraceQL({ ...filter, serviceName: [] }),\n    start,\n    end\n  );\n  const { data: spanNameOptions } = useTagValues(\n    client,\n    'name',\n    filterToTraceQL({ ...filter, spanName: [] }),\n    start,\n    end\n  );\n\n  return (\n    <Stack direction=\"column\" flex={1} gap={1}>\n      <Stack\n        direction=\"row\"\n        flex={1}\n        gap={1}\n        sx={{\n          '& > *:nth-of-type(1)': { flex: 2 }, // Service Name\n          '& > *:nth-of-type(2)': { flex: 2 }, // Span Name\n          '& > *:nth-of-type(3)': { flex: 1 }, // Status\n        }}\n      >\n        <StringAttributeFilter\n          label=\"Service Name\"\n          options={serviceNameOptions ?? []}\n          value={filter.serviceName}\n          setValue={(x) => setFilter({ ...filter, serviceName: x })}\n        />\n        <StringAttributeFilter\n          label=\"Span Name\"\n          options={spanNameOptions ?? []}\n          value={filter.spanName}\n          setValue={(x) => setFilter({ ...filter, spanName: x })}\n        />\n        <StringAttributeFilter\n          label=\"Status\"\n          options={statusOptions ?? []}\n          value={filter.status}\n          setValue={(x) => setFilter({ ...filter, status: x })}\n        />\n      </Stack>\n      <Stack direction=\"row\" flex={1} gap={1}>\n        <DurationAttributeFilter\n          label=\"Trace Duration\"\n          value={filter.traceDuration}\n          setValue={(value) => setFilter({ ...filter, traceDuration: value })}\n        />\n        <CustomAttributesFilter\n          label=\"Custom Attributes\"\n          value={filter.customMatchers}\n          setValue={(value) => setFilter({ ...filter, customMatchers: value })}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n\ninterface StringAttributeFilterProps {\n  label: string;\n  width?: number;\n  options: string[];\n  value: string[];\n  setValue: (value: string[]) => void;\n}\n\nfunction StringAttributeFilter(props: StringAttributeFilterProps): ReactElement {\n  const { label, width, options, value, setValue } = props;\n\n  return (\n    <Autocomplete\n      multiple\n      size=\"small\"\n      limitTags={1}\n      disableCloseOnSelect\n      value={value}\n      onChange={(_event: SyntheticEvent, newValue: string[]) => setValue(newValue)}\n      options={options}\n      renderOption={(props, option, { selected }) => {\n        const { key, ...optionProps } = props;\n        return (\n          <li key={key} {...optionProps}>\n            <Checkbox style={{ marginRight: 8 }} checked={selected} />\n            {option}\n          </li>\n        );\n      }}\n      renderInput={(params) => <TextField {...params} label={label} />}\n      // Reduce the size of the chips to make space for the <input> element, the +X text and the X button to avoid a line break.\n      // See https://github.com/mui/material-ui/issues/38835 for more details.\n      slotProps={{ chip: { sx: { maxWidth: 'calc(100% - 45px) !important' } } }}\n      // Reduce the size of the <input> field\n      sx={{ width: width ?? 250, '& input': { minWidth: '5px !important' } }}\n    />\n  );\n}\n\ninterface DurationAttributeFilterProps {\n  label: string;\n  value: DurationField;\n  setValue: (value: DurationField) => void;\n}\n\nfunction DurationAttributeFilter(props: DurationAttributeFilterProps): ReactElement {\n  const { label, value, setValue } = props;\n  const { min, max } = value;\n\n  return (\n    <Stack direction=\"row\" gap={0.5}>\n      <DurationTextInput label={`Min ${label}`} value={min ?? ''} setValue={(min) => setValue({ min, max })} />\n      <DurationTextInput label={`Max ${label}`} value={max ?? ''} setValue={(max) => setValue({ min, max })} />\n    </Stack>\n  );\n}\n\nconst durationFormatRegex = /^([0-9]+\\.)?[0-9]+(ns|ms|s|m|h)$/;\n\ninterface DurationTextInputProps {\n  label: string;\n  value: string;\n  setValue: (value: string) => void;\n}\n\nfunction DurationTextInput(props: DurationTextInputProps): ReactElement {\n  const { label, value, setValue } = props;\n\n  return (\n    <LazyTextInput\n      label={label}\n      size=\"small\"\n      value={value}\n      setValue={setValue}\n      validationRegex={durationFormatRegex}\n      validationFailedMessage=\"Invalid format. Accepted format e.g. 100ms, accepted units: ns, ms, s, m, h\"\n      sx={{ width: 150 }}\n    />\n  );\n}\n\ninterface CustomAttributesFilterProps {\n  label: string;\n  value: string[];\n  setValue: (value: string[]) => void;\n}\n\nfunction CustomAttributesFilter(props: CustomAttributesFilterProps): ReactElement {\n  const { label, value, setValue } = props;\n\n  return (\n    <LazyTextInput\n      label={label}\n      size=\"small\"\n      placeholder='span.http.status_code=200 span.http.method=\"GET\"'\n      value={value.join(' ')}\n      setValue={(x) => setValue(splitByUnquotedWhitespace(x))}\n      sx={{ flexGrow: 1 }}\n    />\n  );\n}\n\ninterface LazyTextInputProps extends Omit<TextFieldProps, 'variant'> {\n  validationRegex?: RegExp;\n  validationFailedMessage?: string;\n  value: string;\n  setValue: (value: string) => void;\n}\n\n/** A <TextField> which calls props.setValue when the input field is blurred and the validation passes. */\nfunction LazyTextInput(props: LazyTextInputProps): ReactElement {\n  const { validationRegex, validationFailedMessage, value, setValue, ...otherProps } = props;\n  const [draftValue, setDraftValue] = useState(value);\n  const isValidInput = draftValue === '' || validationRegex === undefined || validationRegex.test(draftValue);\n\n  useEffect(() => {\n    setDraftValue(value);\n  }, [value, setDraftValue]);\n\n  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(event.target.value);\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    if (isValidInput) {\n      setValue(draftValue);\n    }\n  }, [isValidInput, setValue, draftValue]);\n\n  return (\n    <TextField\n      {...otherProps}\n      error={!isValidInput}\n      helperText={isValidInput ? undefined : validationFailedMessage}\n      value={draftValue}\n      onChange={handleChange}\n      onBlur={handleBlur}\n    />\n  );\n}\n\nfunction useTagValues(\n  client: TempoClient | undefined,\n  tag: string,\n  query: string,\n  start?: number,\n  end?: number\n): UseQueryResult<string[] | undefined> {\n  return useQuery({\n    queryKey: ['useTagValues', client, tag, query, start, end],\n    enabled: !!client,\n    queryFn: async function () {\n      if (!client) return;\n      const values = await client.searchTagValues({ tag, q: query, start, end });\n      return values.tagValues.map((tagValue) => tagValue.value ?? '').sort();\n    },\n    staleTime: 60 * 1000, // cache tag value response for 1m\n  });\n}\n"],"names":["useCallback","useEffect","useState","Autocomplete","Checkbox","Stack","TextField","useTimeRange","useQuery","getUnixTimeRange","filterToTraceQL","traceQLToFilter","splitByUnquotedWhitespace","statusOptions","AttributeFilters","props","client","query","setQuery","filter","setFilter","absoluteTimeRange","start","end","data","serviceNameOptions","useTagValues","serviceName","spanNameOptions","spanName","direction","flex","gap","sx","StringAttributeFilter","label","options","value","setValue","x","status","DurationAttributeFilter","traceDuration","CustomAttributesFilter","customMatchers","width","multiple","size","limitTags","disableCloseOnSelect","onChange","_event","newValue","renderOption","option","selected","key","optionProps","li","style","marginRight","checked","renderInput","params","slotProps","chip","maxWidth","minWidth","min","max","DurationTextInput","durationFormatRegex","LazyTextInput","validationRegex","validationFailedMessage","placeholder","join","flexGrow","otherProps","draftValue","setDraftValue","isValidInput","undefined","test","handleChange","event","target","handleBlur","error","helperText","onBlur","tag","queryKey","enabled","queryFn","values","searchTagValues","q","tagValues","map","tagValue","sort","staleTime"],"mappings":"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"}

package/lib/components/ClosableAlert.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { AlertProps } from '@mui/material';
-export declare function ClosableAlert(props: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ClosableAlert(props: AlertProps): ReactElement | null;
 //# sourceMappingURL=ClosableAlert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ClosableAlert.d.ts","sourceRoot":"","sources":["../../../src/components/ClosableAlert.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,kDAY9C"}
+{"version":3,"file":"ClosableAlert.d.ts","sourceRoot":"","sources":["../../../src/components/ClosableAlert.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAC;AAElD,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAYpE"}

package/lib/components/ClosableAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ClosableAlert.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\nimport { useCallback, useState } from 'react';\nimport { Alert, AlertProps } from '@mui/material';\n\nexport function ClosableAlert(props: AlertProps) {\n  const [isVisible, setVisible] = useState(true);\n\n  const handleClose = useCallback(() => {\n    setVisible(false);\n  }, [setVisible]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return <Alert {...props} onClose={handleClose} />;\n}\n"],"names":["useCallback","useState","Alert","ClosableAlert","props","isVisible","setVisible","handleClose","onClose"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAoB,gBAAgB;AAElD,OAAO,SAASC,cAAcC,KAAiB;IAC7C,MAAM,CAACC,WAAWC,WAAW,GAAGL,SAAS;IAEzC,MAAMM,cAAcP,YAAY;QAC9BM,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,IAAI,CAACD,WAAW;QACd,OAAO;IACT;IAEA,qBAAO,KAACH;QAAO,GAAGE,KAAK;QAAEI,SAASD;;AACpC"}
+{"version":3,"sources":["../../../src/components/ClosableAlert.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\nimport { ReactElement, useCallback, useState } from 'react';\nimport { Alert, AlertProps } from '@mui/material';\n\nexport function ClosableAlert(props: AlertProps): ReactElement | null {\n  const [isVisible, setVisible] = useState(true);\n\n  const handleClose = useCallback(() => {\n    setVisible(false);\n  }, [setVisible]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return <Alert {...props} onClose={handleClose} />;\n}\n"],"names":["useCallback","useState","Alert","ClosableAlert","props","isVisible","setVisible","handleClose","onClose"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAC5D,SAASC,KAAK,QAAoB,gBAAgB;AAElD,OAAO,SAASC,cAAcC,KAAiB;IAC7C,MAAM,CAACC,WAAWC,WAAW,GAAGL,SAAS;IAEzC,MAAMM,cAAcP,YAAY;QAC9BM,WAAW;IACb,GAAG;QAACA;KAAW;IAEf,IAAI,CAACD,WAAW;QACd,OAAO;IACT;IAEA,qBAAO,KAACH;QAAO,GAAGE,KAAK;QAAEI,SAASD;;AACpC"}

package/lib/components/complete.js

@@ -13,7 +13,7 @@
 import { insertCompletionText } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import { String as StringType, FieldExpression, AttributeField, Resource, Identifier, Span, SpansetFilter, FieldOp } from '@grafana/lezer-traceql';
-import { getUnixTimeRange } from '../plugins/tempo-trace-query';
+import { getUnixTimeRange } from '../plugins';
 const quoteChars = [
     '"',
     '`'