@perses-dev/trace-table-plugin 0.6.0

package/lib/cjs/DataTable.js

@@ -0,0 +1,253 @@
+// Copyright 2024 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, "DataTable", {
+    enumerable: true,
+    get: function() {
+        return DataTable;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _reactrouterdom = require("react-router-dom");
+const _Information = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Information"));
+const _components = require("@perses-dev/components");
+const _xdatagrid = require("@mui/x-data-grid");
+const _react = require("react");
+const _utils = require("./utils/utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'long',
+    timeStyle: 'medium'
+}).format;
+const UTC_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'long',
+    timeStyle: 'long',
+    timeZone: 'UTC'
+}).format;
+function DataTable(props) {
+    const { options, result, traceLink } = props;
+    const muiTheme = (0, _material.useTheme)();
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const paletteMode = options.visual?.palette?.mode;
+    const serviceColorGenerator = (0, _react.useCallback)((serviceName)=>(0, _utils.getServiceColor)(muiTheme, chartsTheme, paletteMode, serviceName), [
+        muiTheme,
+        chartsTheme,
+        paletteMode
+    ]);
+    const rows = [];
+    for (const query of result){
+        for (const trace of query.data?.searchResult || []){
+            rows.push({
+                ...trace,
+                id: trace.traceId,
+                traceLink: traceLink?.({
+                    query: query.definition,
+                    traceId: trace.traceId
+                })
+            });
+        }
+    }
+    const columns = (0, _react.useMemo)(()=>[
+            {
+                field: 'name',
+                headerName: 'Trace name',
+                type: 'string',
+                flex: 4,
+                display: 'flex',
+                valueGetter: (_, trace)=>`${trace.rootServiceName}: ${trace.rootTraceName}`,
+                renderCell: ({ row })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        sx: {
+                            my: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TraceName, {
+                                row: row
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+                            Object.entries(row.serviceStats).map(([serviceName, stats])=>/*#__PURE__*/ (0, _jsxruntime.jsx)(ServiceChip, {
+                                    serviceName: serviceName,
+                                    stats: stats,
+                                    serviceColor: serviceColorGenerator(serviceName)
+                                }, serviceName))
+                        ]
+                    })
+            },
+            {
+                field: 'spanCount',
+                headerName: 'Spans',
+                type: 'number',
+                headerAlign: 'left',
+                align: 'left',
+                flex: 2,
+                minWidth: 145,
+                display: 'flex',
+                valueGetter: (_, trace)=>Object.values(trace.serviceStats).reduce((acc, val)=>acc + val.spanCount, 0),
+                renderCell: ({ row })=>{
+                    let totalSpanCount = 0;
+                    let totalErrorCount = 0;
+                    for (const stats of Object.values(row.serviceStats)){
+                        totalSpanCount += stats.spanCount;
+                        totalErrorCount += stats.errorCount ?? 0;
+                    }
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                display: "inline",
+                                children: [
+                                    totalSpanCount,
+                                    " spans"
+                                ]
+                            }),
+                            totalErrorCount > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                label: `${totalErrorCount} error${totalErrorCount === 1 ? '' : 's'}`,
+                                sx: {
+                                    marginLeft: '5px'
+                                },
+                                icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Information.default, {}),
+                                variant: "outlined",
+                                size: "small",
+                                color: "error"
+                            })
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'durationMs',
+                headerName: 'Duration',
+                type: 'number',
+                headerAlign: 'left',
+                align: 'left',
+                flex: 1,
+                minWidth: 70,
+                display: 'flex',
+                renderCell: ({ row })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        display: "inline",
+                        children: row.durationMs < 1 ? '<1ms' : (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(row.durationMs))
+                    })
+            },
+            {
+                field: 'startTimeUnixMs',
+                headerName: 'Start time',
+                type: 'number',
+                headerAlign: 'left',
+                align: 'left',
+                flex: 3,
+                minWidth: 240,
+                display: 'flex',
+                renderCell: ({ row })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                        title: UTC_DATE_FORMATTER(new Date(row.startTimeUnixMs)),
+                        placement: "top",
+                        arrow: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            display: "inline",
+                            children: DATE_FORMATTER(new Date(row.startTimeUnixMs))
+                        }, `st-${row.traceId}`)
+                    })
+            }
+        ], [
+        serviceColorGenerator
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatagrid.DataGrid, {
+        sx: {
+            borderWidth: 0
+        },
+        columns: columns,
+        rows: rows,
+        getRowHeight: ()=>'auto',
+        getEstimatedRowHeight: ()=>66,
+        disableRowSelectionOnClick: true,
+        pageSizeOptions: [
+            10,
+            20,
+            50,
+            100
+        ],
+        initialState: {
+            pagination: {
+                paginationModel: {
+                    pageSize: 20
+                }
+            }
+        }
+    });
+}
+function TraceName({ row: trace }) {
+    if (trace.traceLink) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Link, {
+            variant: "body1",
+            color: "inherit",
+            underline: "hover",
+            component: _reactrouterdom.Link,
+            to: trace.traceLink,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("strong", {
+                    children: [
+                        trace.rootServiceName,
+                        ":"
+                    ]
+                }),
+                " ",
+                trace.rootTraceName
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+        display: "inline",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("strong", {
+                children: [
+                    trace.rootServiceName,
+                    ":"
+                ]
+            }),
+            " ",
+            trace.rootTraceName
+        ]
+    });
+}
+function ServiceChip({ serviceName, stats, serviceColor }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+        label: serviceName,
+        variant: "outlined",
+        size: "small",
+        style: {
+            ['--service-color']: serviceColor
+        },
+        sx: {
+            marginTop: '5px',
+            marginRight: '5px',
+            borderColor: 'var(--service-color)'
+        },
+        avatar: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Avatar, {
+            sx: {
+                minWidth: 'fit-content',
+                padding: '6px',
+                backgroundColor: 'var(--service-color)',
+                fontSize: '0.65rem',
+                fontWeight: 'bold',
+                textShadow: '0 0 5px #fff'
+            },
+            children: stats.spanCount
+        })
+    });
+}

package/lib/cjs/TraceTable.js

@@ -0,0 +1,31 @@
+// Copyright 2024 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, "TraceTable", {
+    enumerable: true,
+    get: function() {
+        return TraceTable;
+    }
+});
+const _TraceTablePanel = require("./TraceTablePanel");
+const _tracetablemodel = require("./trace-table-model");
+const TraceTable = {
+    PanelComponent: _TraceTablePanel.TraceTablePanel,
+    supportedQueryTypes: [
+        'TraceQuery'
+    ],
+    createInitialOptions: _tracetablemodel.createInitialTraceTableOptions
+};

package/lib/cjs/TraceTablePanel.js

@@ -0,0 +1,71 @@
+// Copyright 2024 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, {
+    TraceTablePanel: function() {
+        return TraceTablePanel;
+    },
+    defaultTraceLink: function() {
+        return defaultTraceLink;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _DataTable = require("./DataTable");
+function defaultTraceLink({ query: originalQuery, traceId }) {
+    // clone the original query spec (including the datasource) and replace the query value with the trace id
+    const query = JSON.parse(JSON.stringify(originalQuery));
+    query.spec.plugin.spec.query = traceId;
+    const traceLinkParams = new URLSearchParams({
+        explorer: 'Tempo-TempoExplorer',
+        data: JSON.stringify({
+            queries: [
+                query
+            ]
+        })
+    });
+    return `/explore?${traceLinkParams}`;
+}
+function TraceTablePanel(props) {
+    const { spec, queryResults, traceLink } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const contentPadding = chartsTheme.container.padding.default;
+    const tracesFound = queryResults.some((traceData)=>(traceData.data?.searchResult ?? []).length > 0);
+    if (!tracesFound) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.NoDataOverlay, {
+            resource: "traces"
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            height: '100%',
+            padding: `${contentPadding}px`,
+            overflowY: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DataTable.DataTable, {
+            options: spec,
+            result: queryResults,
+            traceLink: traceLink === null ? undefined : traceLink ?? defaultTraceLink
+        })
+    });
+}

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// Copyright 2024 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
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _client = /*#__PURE__*/ _interop_require_default(require("react-dom/client"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.StrictMode, {}));

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// Copyright 2024 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

package/lib/cjs/getPluginModule.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return getPluginModule;
+    }
+});
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../package.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getPluginModule() {
+    const { name, version, perses } = _packagejson.default;
+    return {
+        kind: 'PluginModule',
+        metadata: {
+            name,
+            version
+        },
+        spec: perses
+    };
+}

package/lib/cjs/index-federation.js

@@ -0,0 +1,55 @@
+// Copyright 2024 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";
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return _getPluginModule.getPluginModule;
+    }
+});
+_export_star(require("./DataTable"), exports);
+const _getPluginModule = require("./getPluginModule");
+_export_star(require("./trace-table-model"), exports);
+_export_star(require("./TraceTable"), exports);
+_export_star(require("./TraceTablePanel"), 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;
+}

package/lib/cjs/setup-tests.js

@@ -0,0 +1,19 @@
+// 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
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/lib/cjs/test/mock-trace-data.js

@@ -0,0 +1,130 @@
+// 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, {
+    MOCK_TRACE_SEARCH_RESULT: function() {
+        return MOCK_TRACE_SEARCH_RESULT;
+    },
+    MOCK_TRACE_SEARCH_RESULT_EMPTY: function() {
+        return MOCK_TRACE_SEARCH_RESULT_EMPTY;
+    },
+    MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT: function() {
+        return MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT;
+    },
+    MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY: function() {
+        return MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY;
+    }
+});
+const MOCK_TRACE_SEARCH_RESULT = {
+    searchResult: [
+        {
+            startTimeUnixMs: 1702915645000,
+            durationMs: 100,
+            serviceStats: {
+                'service-name': {
+                    spanCount: 10
+                },
+                'second-service-name': {
+                    spanCount: 3,
+                    errorCount: 2
+                }
+            },
+            traceId: '123',
+            rootServiceName: 'service-name',
+            rootTraceName: 'span-name'
+        }
+    ],
+    metadata: {
+        executedQueryString: '{duration > 500ms}'
+    }
+};
+const MOCK_TRACE_SEARCH_RESULT_EMPTY = {
+    searchResult: [],
+    metadata: {
+        executedQueryString: '{duration > 500ms}'
+    }
+};
+const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT = [
+    {
+        status: 'success',
+        fetchStatus: 'idle',
+        isLoading: false,
+        isSuccess: true,
+        isError: false,
+        data: MOCK_TRACE_SEARCH_RESULT,
+        dataUpdatedAt: 1666500979895,
+        definition: {
+            kind: 'TraceQuery',
+            spec: {
+                plugin: {
+                    kind: 'TempoTraceQuery',
+                    spec: {
+                        query: '{}',
+                        datasource: {
+                            kind: 'TempoDatasource',
+                            name: 'tempolocal'
+                        }
+                    }
+                }
+            }
+        },
+        error: null,
+        errorUpdatedAt: 0,
+        failureCount: 0,
+        errorUpdateCount: 0,
+        isFetched: true,
+        isFetchedAfterMount: true,
+        isFetching: false,
+        isRefetching: false,
+        isLoadingError: false,
+        isPaused: false,
+        isPlaceholderData: false,
+        isPreviousData: false,
+        isRefetchError: false,
+        isStale: true
+    }
+];
+const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY = [
+    {
+        status: 'success',
+        fetchStatus: 'idle',
+        isLoading: false,
+        isSuccess: true,
+        isError: false,
+        data: MOCK_TRACE_SEARCH_RESULT_EMPTY,
+        dataUpdatedAt: 1666500979895,
+        error: null,
+        errorUpdatedAt: 0,
+        failureCount: 0,
+        errorUpdateCount: 0,
+        isFetched: true,
+        isFetchedAfterMount: true,
+        isFetching: false,
+        isRefetching: false,
+        isLoadingError: false,
+        isPaused: false,
+        isPlaceholderData: false,
+        isPreviousData: false,
+        isRefetchError: false,
+        isStale: true
+    }
+];