//
// Copyright 2024 DXOS.org
//
import React from 'react';
import { Panel } from '../Panel';
import { Duration } from '../util';
export const SpansPanel = ({ spans, ...props }) => {
    if (!spans?.length) {
        return null;
    }
    return (React.createElement(Panel, { ...props, icon: 'ph--align-center-horizontal-simple--regular', title: 'Spans', info: React.createElement("span", null, spans?.length.toLocaleString()) },
        React.createElement("table", { className: 'table-fixed is-full text-xs font-mono' },
            React.createElement("tbody", null, spans?.map(({ id, resourceId, methodName, startTs, endTs }) => endTs &&
                startTs && (React.createElement("tr", { key: id },
                React.createElement("td", { className: 'p-1' }, methodName),
                React.createElement("td", { className: 'p-1 is-[80px] text-right' }, resourceId),
                React.createElement("td", { className: 'p-1 is-[80px] text-right' },
                    React.createElement(Duration, { duration: parseInt(endTs) - parseInt(startTs) })))))))));
};
//# sourceMappingURL=SpansPanel.js.map