@perses-dev/tempo-plugin 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/cjs/plugins/tempo-trace-query/DashboardTempoTraceQueryEditor.js

@@ -0,0 +1,62 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DashboardTempoTraceQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return DashboardTempoTraceQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _temposelectors = require("../../model/tempo-selectors");
+const _TraceQLEditor = require("./TraceQLEditor");
+function DashboardTempoTraceQueryEditor(props) {
+    const { selectedDatasource , handleDatasourceChange , datasourceURL , query , handleQueryChange , handleQueryBlur  } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: "tempo-datasource-label",
+                        children: "Tempo Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _temposelectors.TEMPO_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "tempo-datasource-label",
+                        label: "Tempo Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TraceQLEditor.TraceQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: datasourceURL
+                    }
+                },
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur
+            })
+        ]
+    });
+}

package/dist/cjs/plugins/tempo-trace-query/TempoTraceQuery.js

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

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

@@ -0,0 +1,55 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TempoTraceQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return TempoTraceQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _immer = require("immer");
+const _temposelectors = require("../../model/tempo-selectors");
+const _queryeditormodel = require("./query-editor-model");
+const _DashboardTempoTraceQueryEditor = require("./DashboardTempoTraceQueryEditor");
+function TempoTraceQueryEditor(props) {
+    const { onChange , value  } = props;
+    const { datasource  } = value;
+    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _temposelectors.DEFAULT_TEMPO;
+    const { data: client  } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
+    const datasourceURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const { query , handleQueryChange , handleQueryBlur  } = (0, _queryeditormodel.useQueryState)(props);
+    const handleDatasourceChange = (next)=>{
+        if ((0, _temposelectors.isTempoDatasourceSelector)(next)) {
+            onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                const nextDatasource = (0, _temposelectors.isDefaultTempoSelector)(next) ? undefined : next;
+                draft.datasource = nextDatasource;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Tempo datasource selector');
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardTempoTraceQueryEditor.DashboardTempoTraceQueryEditor, {
+        selectedDatasource: selectedDatasource,
+        handleDatasourceChange: handleDatasourceChange,
+        datasourceURL: datasourceURL,
+        query: query,
+        handleQueryChange: handleQueryChange,
+        handleQueryBlur: handleQueryBlur
+    });
+}

package/dist/cjs/plugins/tempo-trace-query/TraceQLEditor.js

@@ -0,0 +1,46 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TraceQLEditor", {
+    enumerable: true,
+    get: function() {
+        return TraceQLEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _reactcodemirror = /*#__PURE__*/ _interop_require_default(require("@uiw/react-codemirror"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TraceQLEditor({ ...rest }) {
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
+        ...rest,
+        style: {
+            border: `1px solid ${theme.palette.divider}`
+        },
+        theme: isDarkMode ? 'dark' : 'light',
+        basicSetup: {
+            highlightActiveLine: false,
+            highlightActiveLineGutter: false,
+            foldGutter: false
+        }
+    });
+}

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

@@ -0,0 +1,101 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getUnixTimeRange: function() {
+        return getUnixTimeRange;
+    },
+    getTraceData: function() {
+        return getTraceData;
+    }
+});
+const _datefns = require("date-fns");
+const _temposelectors = require("../../model/tempo-selectors");
+function getUnixTimeRange(timeRange) {
+    const { start , end  } = timeRange;
+    return {
+        start: Math.ceil((0, _datefns.getUnixTime)(start)),
+        end: Math.ceil((0, _datefns.getUnixTime)(end))
+    };
+}
+const getTraceData = async (spec, context)=>{
+    var _client_options;
+    if (spec.query === undefined || spec.query === null || spec.query === '') {
+        // Do not make a request to the backend, instead return an empty TraceData
+        console.error('TempoTraceQuery is undefined, null, or an empty string.');
+        return {
+            traces: []
+        };
+    }
+    const defaultTempoDatasource = {
+        kind: _temposelectors.TEMPO_DATASOURCE_KIND
+    };
+    var _spec_datasource;
+    const client = await context.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : defaultTempoDatasource);
+    const datasourceUrl = client === null || client === void 0 ? void 0 : (_client_options = client.options) === null || _client_options === void 0 ? void 0 : _client_options.datasourceUrl;
+    if (datasourceUrl === undefined || datasourceUrl === null || datasourceUrl === '') {
+        console.error('TempoDatasource is undefined, null, or an empty string.');
+        return {
+            traces: []
+        };
+    }
+    const getQuery = ()=>{
+        // if time range not defined -- only return the query from the spec
+        if (context.absoluteTimeRange === undefined) {
+            return spec.query;
+        }
+        // if the query already contains a time range (i.e.start and end times)
+        if (spec.query.includes('start=') || spec.query.includes('end=')) {
+            return spec.query;
+        }
+        // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )
+        const { start , end  } = getUnixTimeRange(context === null || context === void 0 ? void 0 : context.absoluteTimeRange);
+        const queryStartTime = '&start=' + start;
+        const queryEndTime = '&end=' + end;
+        const queryWithTimeRange = encodeURI(spec.query) + queryStartTime + queryEndTime;
+        return queryWithTimeRange;
+    };
+    const enrichedTraceResponse = await client.getEnrichedTraceQuery(getQuery(), datasourceUrl);
+    const traces = enrichedTraceResponse.traces.map((traceValue)=>{
+        const startTimeUnixMs = parseInt(traceValue.summary.startTimeUnixNano) * 1e-6; // convert to millisecond for eChart time format
+        const durationMs = traceValue.summary.durationMs;
+        const spanCount = traceValue.spanCount;
+        const errorCount = traceValue.errorCount;
+        const traceId = traceValue.summary.traceID;
+        const name = `rootServiceName="${traceValue.summary.rootServiceName.trim()}", rootTraceName="${traceValue.summary.rootServiceName.trim()}"`;
+        return {
+            startTimeUnixMs,
+            durationMs,
+            spanCount,
+            errorCount,
+            traceId,
+            name
+        };
+    });
+    const traceData = {
+        traces,
+        metadata: {
+            executedQueryString: spec.query
+        }
+    };
+    return traceData;
+};

package/dist/cjs/plugins/tempo-trace-query/query-editor-model.js

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

package/dist/cjs/test/index.js

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