@perses-dev/tracing-gantt-chart-plugin 0.6.1 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__mf/js/{788.6df3bbbe.js → 788.5684e3ab.js} +2 -2
- package/__mf/js/{TracingGanttChart.7010d1d5.js → TracingGanttChart.77b94eb3.js} +3 -3
- package/__mf/js/async/193.12ce9ab1.js +44 -0
- package/__mf/js/async/{644.1dfea83f.js.LICENSE.txt → 193.12ce9ab1.js.LICENSE.txt} +1 -17
- package/__mf/js/async/__federation_expose_TracingGanttChart.7b5aeb33.js +1 -0
- package/__mf/js/main.9fe8ed9b.js +1 -0
- package/lib/TracingGanttChart/DetailPane/Attributes.d.ts +7 -0
- package/lib/TracingGanttChart/DetailPane/Attributes.d.ts.map +1 -1
- package/lib/TracingGanttChart/DetailPane/Attributes.js +62 -23
- package/lib/TracingGanttChart/DetailPane/Attributes.js.map +1 -1
- package/lib/TracingGanttChart/DetailPane/DetailPane.d.ts.map +1 -1
- package/lib/TracingGanttChart/DetailPane/DetailPane.js +7 -15
- package/lib/TracingGanttChart/DetailPane/DetailPane.js.map +1 -1
- package/lib/TracingGanttChart/TraceDetails.d.ts +7 -0
- package/lib/TracingGanttChart/TraceDetails.d.ts.map +1 -0
- package/lib/TracingGanttChart/TraceDetails.js +90 -0
- package/lib/TracingGanttChart/TraceDetails.js.map +1 -0
- package/lib/TracingGanttChart/TracingGanttChart.d.ts.map +1 -1
- package/lib/TracingGanttChart/TracingGanttChart.js +4 -0
- package/lib/TracingGanttChart/TracingGanttChart.js.map +1 -1
- package/lib/cjs/TracingGanttChart/DetailPane/Attributes.js +71 -24
- package/lib/cjs/TracingGanttChart/DetailPane/DetailPane.js +4 -12
- package/lib/cjs/TracingGanttChart/TraceDetails.js +98 -0
- package/lib/cjs/TracingGanttChart/TracingGanttChart.js +4 -0
- package/mf-manifest.json +10 -10
- package/mf-stats.json +10 -10
- package/package.json +12 -4
- package/__mf/js/async/644.1dfea83f.js +0 -66
- package/__mf/js/async/__federation_expose_TracingGanttChart.c32313ba.js +0 -1
- package/__mf/js/main.665fb712.js +0 -1
|
@@ -30,14 +30,6 @@
|
|
|
30
30
|
* https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
|
|
31
31
|
*/
|
|
32
32
|
|
|
33
|
-
/*!
|
|
34
|
-
* decimal.js v10.5.0
|
|
35
|
-
* An arbitrary-precision Decimal type for JavaScript.
|
|
36
|
-
* https://github.com/MikeMcl/decimal.js
|
|
37
|
-
* Copyright (c) 2025 Michael Mclaughlin <M8ch88l@gmail.com>
|
|
38
|
-
* MIT Licence
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
33
|
/*! *****************************************************************************
|
|
42
34
|
Copyright (c) Microsoft Corporation.
|
|
43
35
|
|
|
@@ -73,12 +65,4 @@ PERFORMANCE OF THIS SOFTWARE.
|
|
|
73
65
|
* LICENSE.md file in the root directory of this source tree.
|
|
74
66
|
*
|
|
75
67
|
* @license MIT
|
|
76
|
-
*/
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* @license Fraction.js v4.3.7 31/08/2023
|
|
80
|
-
* https://www.xarg.org/2014/03/rational-numbers-in-javascript/
|
|
81
|
-
*
|
|
82
|
-
* Copyright (c) 2023, Robert Eisele (robert@raw.org)
|
|
83
|
-
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
84
|
-
**/
|
|
68
|
+
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkTracingGanttChart=self.webpackChunkTracingGanttChart||[]).push([["76"],{7730:function(e,t,n){n.r(t),n.d(t,{TracingGanttChart:()=>ef});var r=n(4246),i=n(2629),s=n(6372),a=n(4538),o=n(4776),l=n(5283),d=n(2709),u=n(9581),c=n(3915);let x=new c.Z({hue:{min:20,max:360}}),p=new c.Z({hue:{min:0,max:20}}),m={},h="2rem",f=e=>{var t;return(null===(t=e.status)||void 0===t?void 0:t.code)===u.np};function v(e,t,n,r){return function(e,t,n,r){let i=arguments.length>4&&void 0!==arguments[4]&&arguments[4];return"categorical"===n?function(e,t,n,r){let i=t?r:n;if(0===i.length)return console.warn("getConsistentCategoricalColor() called with empty color palette, fallback to #000"),"#000";let s=0;for(let t=0;t<e.length;t++)s=e.charCodeAt(t)+((s<<5)-s);return i[Math.abs(s)%i.length]??"#000"}(r,i,t.echartsTheme.color,[e.palette.error.light,e.palette.error.main,e.palette.error.dark]):function(e,t){let n=`${e}_____${t}`,r=m[n];return r||(r=function(e,t){let[n,r,i]=t?p.hsl(e):x.hsl(e),s=`${(100*r).toFixed(0)}%`,a=`${(100*i).toFixed(0)}%`;return`hsla(${n.toFixed(2)},${s},${a},0.9)`}(e,t),m[n]=r),r}(r,i)}(e,t,n,r.resource.serviceName??"",f(r))}function j(e){return e<1?`${Math.round(1e3*e)}μs`:e<1e3?`${+e.toFixed(2)}ms`:`${+(e/1e3).toFixed(2)}s`}function g(e){let{trace:t,viewport:n}=e,i=n.endTimeUnixMs-n.startTimeUnixMs,s=n.startTimeUnixMs-t.startTimeUnixMs;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{style:{left:"0%",borderWidth:0},children:j(s+0*i)}),(0,r.jsx)(b,{style:{left:"25%"},children:j(s+.25*i)}),(0,r.jsx)(b,{style:{left:"50%"},children:j(s+.5*i)}),(0,r.jsx)(b,{style:{left:"75%"},children:j(s+.75*i)}),(0,r.jsx)(b,{style:{left:"100%"},children:(0,r.jsx)("span",{style:{position:"absolute",right:".75rem"},children:j(s+ +i)})})]})}function M(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{style:{left:"25%"}}),(0,r.jsx)(b,{style:{left:"50%"}}),(0,r.jsx)(b,{style:{left:"75%"}})]})}let b=(0,d.ZP)(s.Z)(e=>{let{theme:t}=e;return{position:"absolute",height:"100%",borderLeft:`1px solid ${t.palette.divider}`,padding:".25rem"}});var T=n(5276),U=n(7469);function w(e){var t,n;let{options:l,trace:d,viewport:u,setViewport:c}=e,x=(0,o.Z)(),p=(0,i.useChartsTheme)(),{width:m,ref:h}=(0,T.Z)(),f=(0,a.useRef)(null),[j,g]=(0,a.useState)({type:"none"}),b=d.endTimeUnixMs-d.startTimeUnixMs,w=(u.startTimeUnixMs-d.startTimeUnixMs)/b,k=(d.endTimeUnixMs-u.endTimeUnixMs)/b,C=(0,a.useCallback)(e=>{var t,n;return v(x,p,null===(n=l.visual)||void 0===n?void 0:null===(t=n.palette)||void 0===t?void 0:t.mode,e)},[x,p,null===(n=l.visual)||void 0===n?void 0:null===(t=n.palette)||void 0===t?void 0:t.mode]);(0,a.useEffect)(()=>{if(!f.current||!m)return;let e=f.current.getContext("2d");e&&function(e,t,n,r,i){let s=r.rootSpans.map(function e(t){let n=1;for(let r of t.childSpans)n+=e(r);return n}).reduce((e,t)=>e+t,0),a=Math.round(Math.min(Math.max(60/s,1),7)),o=r.endTimeUnixMs-r.startTimeUnixMs,l=60/s,d=0,u=n=>{let s=n.endTimeUnixMs-n.startTimeUnixMs,c=(n.startTimeUnixMs-r.startTimeUnixMs)/o;for(let r of(e.fillStyle=i(n),e.beginPath(),e.rect(Math.round(c*t),Math.round(d),Math.max(2,Math.round(s/o*t)),a),e.fill(),d+=l,n.childSpans))u(r)};for(let e of r.rootSpans)u(e)}(e,m,60,d,C)},[m,60,d,C]);let S=e=>{if(!f.current||!m)return 0;let t=e.clientX-f.current.getBoundingClientRect().left;return d.startTimeUnixMs+t/m*b},I=(0,U.z)(e=>{switch(e.preventDefault(),j.type){case"none":return;case"resize":{let t,n;let r=j.fixedPoint,i=S(e);r<i?(t=r,n=i):(t=i,n=r),c({startTimeUnixMs:Math.max(t,d.startTimeUnixMs),endTimeUnixMs:Math.min(n,d.endTimeUnixMs)});return}case"drag":{let{start:t,end:n}=j,r=S(e);r-t<d.startTimeUnixMs&&(r=d.startTimeUnixMs+t),r+n>d.endTimeUnixMs&&(r=d.endTimeUnixMs-n),c({startTimeUnixMs:r-t,endTimeUnixMs:r+n});return}}}),$=(0,U.z)(e=>{e.preventDefault(),g({type:"none"}),u.startTimeUnixMs===u.endTimeUnixMs&&c({startTimeUnixMs:d.startTimeUnixMs,endTimeUnixMs:d.endTimeUnixMs})});return(0,a.useEffect)(()=>{function e(){window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",$),document.body.style.cursor="inherit"}return"none"===j.type?e():(window.addEventListener("mousemove",I),window.addEventListener("mouseup",$),document.body.style.cursor="resize"===j.type?"col-resize":"move"),e},[j,I,$]),(0,r.jsxs)(s.Z,{ref:h,sx:{position:"relative",height:60},onMouseDown:e=>{if(e.preventDefault(),!(e.target instanceof HTMLElement))return;let t=u.startTimeUnixMs===d.startTimeUnixMs&&u.endTimeUnixMs===d.endTimeUnixMs,n=e.target.dataset.elem,r=S(e);"resizerLeft"===n?g({type:"resize",fixedPoint:u.endTimeUnixMs}):"resizerRight"===n?g({type:"resize",fixedPoint:u.startTimeUnixMs}):"cutoffBox"===n||t?(g({type:"resize",fixedPoint:r}),c({startTimeUnixMs:r,endTimeUnixMs:r})):g({type:"drag",start:r-u.startTimeUnixMs,end:u.endTimeUnixMs-r})},children:[(0,r.jsx)("canvas",{ref:f,width:m,height:60,style:{position:"absolute"}}),(0,r.jsx)(M,{}),(0,r.jsx)(y,{"data-elem":"cutoffBox",style:{left:0,width:`${100*w}%`}}),(0,r.jsx)(Z,{"data-elem":"resizerLeft",style:{left:`${100*w}%`}}),(0,r.jsx)(Z,{"data-elem":"resizerRight",style:{right:`${100*k}%`}}),(0,r.jsx)(y,{"data-elem":"cutoffBox",style:{right:0,width:`${100*k}%`}})]})}let y=(0,d.ZP)(s.Z)({position:"absolute",height:"100%",backgroundColor:"rgba(225, 225, 225, .5)"}),Z=(0,d.ZP)(s.Z)(e=>{let{theme:t}=e;return{position:"absolute",height:"100%",backgroundColor:t.palette.divider,width:"2px",cursor:"col-resize","&:before":{position:"absolute",width:"8px",left:"-3px",top:0,bottom:0,content:'" "',zIndex:1}}});function k(e){let{options:t,trace:n,viewport:i,setViewport:a}=e,l=(0,o.Z)();return(0,r.jsxs)(s.Z,{sx:{border:`1px solid ${l.palette.divider}`,borderRadius:`${l.shape.borderRadius}px`},children:[(0,r.jsx)(s.Z,{sx:{position:"relative",height:h,borderBottom:`1px solid ${l.palette.divider}`},children:(0,r.jsx)(g,{trace:n,viewport:{startTimeUnixMs:n.startTimeUnixMs,endTimeUnixMs:n.endTimeUnixMs}})}),(0,r.jsx)(w,{options:t,trace:n,viewport:i,setViewport:a})]})}var C=n(5094),S=n(2054),I=n(1781),$=n(9408),z=n(763),E=n(1852),L=n(9119),P=n(886),R=n(2259),B=n(2577),D=n(7430);function F(e){let{trace:t,span:n,attributeLinks:i}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(E.Z,{children:[(0,r.jsx)(N,{name:"span ID",value:n.spanId}),(0,r.jsx)(N,{name:"start",value:j(n.startTimeUnixMs-t.startTimeUnixMs)}),(0,r.jsx)(N,{name:"duration",value:j(n.endTimeUnixMs-n.startTimeUnixMs)})]}),(0,r.jsx)(L.Z,{}),n.attributes.length>0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(V,{attributeLinks:i,attributes:n.attributes}),(0,r.jsx)(L.Z,{})]}),(0,r.jsx)(V,{attributeLinks:i,attributes:n.resource.attributes})]})}function V(e){let{attributeLinks:t,attributes:n}=e,i=(0,a.useMemo)(()=>Object.fromEntries(n.map(e=>[e.key,e.value])),[n]);return(0,r.jsx)(E.Z,{children:n.sort((e,t)=>e.key.localeCompare(t.key)).map((e,n)=>{var s;return(0,r.jsx)(N,{name:e.key,value:function e(t){return"stringValue"in t?t.stringValue.length>0?t.stringValue:"<empty string>":"intValue"in t?t.intValue:"boolValue"in t?t.boolValue.toString():"arrayValue"in t?t.arrayValue.values.map(e).join(", "):"unknown"}(e.value),link:null==t?void 0:null===(s=t[e.key])||void 0===s?void 0:s.call(t,i)},n)})})}function N(e){let{name:t,value:n,link:i}=e,s=i?(0,r.jsx)(P.Z,{component:D.Link,to:i,children:n}):n;return(0,r.jsx)(R.ZP,{disablePadding:!0,children:(0,r.jsx)(B.Z,{primary:t,secondary:s,slotProps:{primary:{variant:"h5"},secondary:{variant:"body1",sx:{wordBreak:"break-word"}}}})})}var G=n(1357),O=n(6656),A=n(5474),W=n(2449);function _(e){let{trace:t,span:n}=e;return(0,r.jsx)(r.Fragment,{children:n.events.sort((e,t)=>e.timeUnixMs-t.timeUnixMs).map((e,n)=>(0,r.jsx)(X,{trace:t,event:e},n))})}function X(e){let{trace:t,event:n}=e,i=n.timeUnixMs-t.startTimeUnixMs;return(0,r.jsxs)(G.Z,{disableGutters:!0,children:[(0,r.jsx)(O.Z,{expandIcon:(0,r.jsx)(W.default,{}),children:(0,r.jsx)(S.Z,{children:j(i)})}),(0,r.jsxs)(A.Z,{children:[(0,r.jsx)(S.Z,{variant:"subtitle1",children:n.name}),(0,r.jsx)(V,{attributes:n.attributes})]})]})}function H(e){let{attributeLinks:t,trace:n,span:i,onCloseBtnClick:o}=e,[l,d]=(0,a.useState)("attributes");return"events"===l&&0===i.events.length&&d("attributes"),(0,r.jsxs)(s.Z,{children:[(0,r.jsx)(C.Z,{sx:{float:"right"},onClick:o,children:(0,r.jsx)(z.default,{})}),(0,r.jsx)(S.Z,{sx:{wordBreak:"break-word"},children:i.resource.serviceName}),(0,r.jsx)(S.Z,{variant:"h2",sx:{wordBreak:"break-word"},children:i.name}),(0,r.jsx)(s.Z,{sx:{borderBottom:1,borderColor:"divider"},children:(0,r.jsxs)(I.Z,{value:l,onChange:(e,t)=>d(t),children:[(0,r.jsx)($.Z,{sx:{p:0},value:"attributes",label:"Attributes"}),i.events.length>0&&(0,r.jsx)($.Z,{value:"events",label:"Events"})]})}),"attributes"===l&&(0,r.jsx)(F,{trace:n,span:i,attributeLinks:t}),"events"===l&&(0,r.jsx)(_,{trace:n,span:i})]})}var Q=n(3675);let Y=(0,a.createContext)(void 0);function q(e){let{children:t}=e,[n,i]=(0,a.useState)([]),[s,o]=(0,a.useState)([]),[l,d]=(0,a.useState)(void 0);return(0,r.jsx)(Y.Provider,{value:{collapsedSpans:n,setCollapsedSpans:i,visibleSpans:s,setVisibleSpans:o,hoveredParent:l,setHoveredParent:d},children:t})}function J(){let e=(0,a.useContext)(Y);if(void 0===e)throw Error("No GanttTableContext found. Did you forget a Provider?");return e}var K=n(4944),ee=n(4974);function et(e){let{span:t}=e,{collapsedSpans:n,setCollapsedSpans:i,visibleSpans:s,hoveredParent:l,setHoveredParent:d}=J(),u=(0,o.Z)(),c=(0,a.useCallback)(e=>{e.stopPropagation(),n.includes(t.spanId)?i(n.filter(e=>e!==t.spanId)):i([...n,t.spanId])},[t,n,i]),x=(0,a.useCallback)(()=>{d(t.spanId)},[t,d]),p=[t],m=t.parentSpan;for(;m;)p.unshift(m),m=m.parentSpan;return(0,r.jsx)(r.Fragment,{children:p.map((e,t)=>(0,r.jsx)(en,{style:{width:t===p.length-1||0===s.length||s.includes(e.spanId)?24:8,borderLeft:`${l===(e.parentSpanId??"")?3:1}px solid ${u.palette.divider}`},onMouseEnter:()=>d(e.parentSpanId??""),onMouseLeave:()=>d(void 0),children:t===p.length-1&&e.childSpans.length>0&&(n.includes(e.spanId)?(0,r.jsx)(ee.default,{titleAccess:"expand",onClick:c,onMouseEnter:x}):(0,r.jsx)(W.default,{titleAccess:"collapse",onClick:c,onMouseEnter:x}))},e.spanId))})}let en=(0,d.ZP)("div")({display:"flex",height:"100%",alignItems:"center",justifyContent:"flex-end",flexShrink:0,transition:"width 1s"});function er(e){let{span:t,nameColumnWidth:n}=e;return(0,r.jsxs)(l.Z,{direction:"row",sx:{alignItems:"center"},style:{width:`${100*n}%`},children:[(0,r.jsx)(et,{span:t}),f(t)&&(0,r.jsx)(K.default,{titleAccess:"error",color:"error",sx:{marginRight:"5px"}}),(0,r.jsxs)(s.Z,{sx:{whiteSpace:"nowrap",overflow:"hidden"},children:[(0,r.jsxs)("strong",{children:[t.resource.serviceName,":"]})," ",t.name]})]})}function ei(e){var t,n;let{options:a,span:l,viewport:d}=e,u=(0,o.Z)(),c=(0,i.useChartsTheme)(),x=l.endTimeUnixMs-l.startTimeUnixMs,p=d.endTimeUnixMs-d.startTimeUnixMs,m=x/p,h=(l.startTimeUnixMs-d.startTimeUnixMs)/p;return(0,r.jsxs)(s.Z,{sx:{position:"relative",height:"100%",flexGrow:1,overflow:"hidden"},children:[(0,r.jsx)(M,{}),(0,r.jsx)(s.Z,{"data-testid":"span-duration-bar",sx:{position:"absolute",top:0,bottom:0,margin:"auto",minWidth:"2px",height:"8px",borderRadius:u.shape.borderRadius},style:{left:`${100*h}%`,width:`${100*m}%`,backgroundColor:v(u,c,null===(n=a.visual)||void 0===n?void 0:null===(t=n.palette)||void 0===t?void 0:t.mode,l)}}),(0,r.jsx)(s.Z,{sx:{position:"absolute",top:"50%",transform:"translateY(-50%)",padding:"0 8px",color:u.palette.grey[700],fontSize:".7rem"},style:h+m<.95?{left:`${(h+m)*100}%`}:{left:`${100*h}%`,transform:"translateY(-50%) translateX(-100%)"},children:j(x)})]})}let es=(0,a.memo)(function(e){let{options:t,span:n,viewport:i,selected:s,nameColumnWidth:a,divider:l,onClick:d}=e,u=(0,o.Z)();return(0,r.jsxs)(ea,{sx:{backgroundColor:s?u.palette.action.selected:"inherit"},direction:"row",onClick:()=>{var e;(null===(e=document.getSelection())||void 0===e?void 0:e.type)!=="Range"&&d(n)},children:[(0,r.jsx)(er,{span:n,nameColumnWidth:a}),l,(0,r.jsx)(ei,{options:t,span:n,viewport:i})]})}),ea=(0,d.ZP)(l.Z)(e=>{let{theme:t}=e;return{height:h,"&:hover":{backgroundColor:t.palette.action.hover,borderTop:`1px solid ${t.palette.divider}`,borderBottom:`1px solid ${t.palette.divider}`}}});function eo(e){let{trace:t,viewport:n,nameColumnWidth:i,divider:a}=e,d=(0,o.Z)();return(0,r.jsxs)(l.Z,{direction:"row",alignItems:"center",sx:{height:h,fontSize:"0.9rem",borderBottom:`1px solid ${d.palette.divider}`},children:[(0,r.jsx)(s.Z,{style:{width:`${100*i}%`},children:(0,r.jsx)("span",{style:{padding:".25rem"},children:"Service & Operation"})}),a,(0,r.jsx)(s.Z,{sx:{position:"relative",height:"100%",flexGrow:1},children:(0,r.jsx)(g,{trace:t,viewport:n})})]})}function el(e){let{parentRef:t,spacing:n=0,onMove:i}=e,[s,o]=(0,a.useState)(!1),l=(0,U.z)(e=>{if(!t.current)return;let r=(e.clientX-t.current.getBoundingClientRect().left+n)/t.current.getBoundingClientRect().width;.05<=r&&r<=.95&&i(r)}),d=(0,U.z)(()=>{o(!1)});return(0,a.useEffect)(()=>{function e(){window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",d),document.body.style.cursor="inherit"}return s?(window.addEventListener("mousemove",l),window.addEventListener("mouseup",d),document.body.style.cursor="col-resize"):e(),e},[s,l,d]),(0,r.jsx)(ed,{onMouseDown:e=>{e.preventDefault(),o(!0)},onClick:e=>e.stopPropagation()})}let ed=(0,d.ZP)(s.Z)(e=>{let{theme:t}=e;return{position:"relative",width:"1px",height:"100%",backgroundColor:t.palette.divider,cursor:"col-resize","&:before":{position:"absolute",width:"7px",left:"-3px",top:0,bottom:0,content:'" "',zIndex:1}}});function eu(e){let{options:t,trace:n,viewport:i,selectedSpan:l,onSpanClick:d}=e,{collapsedSpans:u,setVisibleSpans:c}=J(),[x,p]=(0,a.useState)(.25),m=(0,a.useRef)(null),h=(0,o.Z)(),f=(0,a.useMemo)(()=>{let e=[];for(let t of n.rootSpans)!function e(t,n,r){if(t.push(n),!r.includes(n.spanId))for(let i of n.childSpans)e(t,i,r)}(e,t,u);return e},[n.rootSpans,u]),v=(0,r.jsx)(el,{parentRef:m,onMove:p});return(0,r.jsxs)(s.Z,{ref:m,sx:{display:"flex",flexDirection:"column",flexGrow:1,border:`1px solid ${h.palette.divider}`,borderRadius:`${h.shape.borderRadius}px`},children:[(0,r.jsx)(eo,{trace:n,viewport:i,nameColumnWidth:x,divider:v}),(0,r.jsx)(Q.OO,{data:f,itemContent:(e,n)=>(0,r.jsx)(es,{options:t,span:n,viewport:i,selected:n===l,nameColumnWidth:x,divider:v,onClick:d}),rangeChanged:function(e){let{startIndex:t,endIndex:n}=e,r=[];for(let e=t;e<=n;e++)r.push(f[e].spanId);c(r)}})]})}var ec=n(3098);function ex(e){return{timeUnixMs:1e-6*parseInt(e.timeUnixNano),name:e.name,attributes:e.attributes??[]}}let ep={year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"short"};function em(e){let{trace:t}=e,{dateFormatOptionsWithUserTimeZone:n}=(0,i.useTimeZone)(),s=n(ep),a=new Intl.DateTimeFormat(void 0,s),o=t.rootSpans[0];return o?(0,r.jsxs)(l.Z,{direction:"row",sx:{justifyContent:"space-between"},children:[(0,r.jsxs)(S.Z,{variant:"h3",children:[o.resource.serviceName,": ",o.name," (",j(t.endTimeUnixMs-t.startTimeUnixMs),")"]}),(0,r.jsxs)(S.Z,{variant:"h4",children:[(0,r.jsxs)(S.Z,{component:"span",sx:{px:1},children:[(0,r.jsx)("strong",{children:"Start:"})," ",a.format(t.startTimeUnixMs)]}),(0,r.jsxs)(S.Z,{component:"span",sx:{px:1},children:[(0,r.jsx)("strong",{children:"Trace ID:"})," ",o.traceId]})]})]}):(0,r.jsx)(S.Z,{children:"Trace contains no spans."})}function eh(e){let{options:t,attributeLinks:n,trace:i}=e,d=(0,o.Z)(),u=(0,a.useMemo)(()=>{try{return function(e){let t=new Map,n=[],r=0,i=0;for(let n of e.resourceSpans){let e=function(e){let t="unknown";for(let n of(null==e?void 0:e.attributes)??[])if("service.name"===n.key&&"stringValue"in n.value){t=n.value.stringValue;break}return{serviceName:t,attributes:(null==e?void 0:e.attributes)??[]}}(n.resource);for(let a of n.scopeSpans){let n=a.scope??{};for(let o of a.spans){var s;let a={resource:e,scope:n,childSpans:[],traceId:(s=o).traceId,spanId:s.spanId,parentSpanId:s.parentSpanId,name:s.name,kind:s.kind,startTimeUnixMs:1e-6*parseInt(s.startTimeUnixNano),endTimeUnixMs:1e-6*parseInt(s.endTimeUnixNano),attributes:s.attributes??[],events:(s.events??[]).map(ex),status:s.status??{}};t.set(o.spanId,a),(0===r||a.startTimeUnixMs<r)&&(r=a.startTimeUnixMs),(0===i||a.endTimeUnixMs>i)&&(i=a.endTimeUnixMs)}}}for(let[,e]of t){if(!e.parentSpanId){n.push(e);continue}let r=t.get(e.parentSpanId);if(!r){console.trace(`span ${e.spanId} has parent ${e.parentSpanId} which has not been received yet`),n.push(e);continue}e.parentSpan=r;let i=(0,ec.sortedIndexBy)(r.childSpans,e,e=>e.startTimeUnixMs);r.childSpans.splice(i,0,e)}return{trace:e,rootSpans:n,startTimeUnixMs:r,endTimeUnixMs:i}}(i)}catch(e){throw Error(`Error: unable to parse trace: ${e}`)}},[i]),[c,x]=(0,a.useState)({startTimeUnixMs:u.startTimeUnixMs,endTimeUnixMs:u.endTimeUnixMs}),[p,m]=(0,a.useState)(void 0),h=(0,a.useRef)(null),[f,v]=(0,a.useState)(.82);return(0,r.jsxs)(l.Z,{ref:h,direction:"row",sx:{height:"100%",minHeight:"240px",gap:2},children:[(0,r.jsxs)(l.Z,{sx:{flexGrow:1,gap:2},children:[(0,r.jsx)(em,{trace:u}),(0,r.jsx)(k,{options:t,trace:u,viewport:c,setViewport:x}),(0,r.jsx)(q,{children:(0,r.jsx)(eu,{options:t,trace:u,viewport:c,selectedSpan:p,onSpanClick:m})})]}),p&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(el,{parentRef:h,spacing:parseInt(d.spacing(2)),onMove:v}),(0,r.jsx)(s.Z,{sx:{width:`${(1-f)*100}%`,overflow:"auto"},children:(0,r.jsx)(H,{attributeLinks:n,trace:u,span:p,onCloseBtnClick:()=>m(void 0)})})]})]})}let ef={PanelComponent:function(e){var t;let{spec:n,queryResults:a,attributeLinks:o}=e,l=(0,i.useChartsTheme)().container.padding.default;if(a.length>1)return(0,r.jsx)(i.TextOverlay,{message:"This panel does not support more than one query."});let d=null===(t=a[0])||void 0===t?void 0:t.data.trace;return d?(0,r.jsx)(s.Z,{sx:{height:"100%",padding:`${l}px`},children:(0,r.jsx)(eh,{options:n,attributeLinks:o,trace:d})}):(0,r.jsx)(i.NoDataOverlay,{resource:"trace"})},supportedQueryTypes:["TraceQuery"],createInitialOptions:function(){return{}}}}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{var e={5311:function(e,r,t){Promise.all([t.e("677"),t.e("179"),t.e("620")]).then(t.bind(t,9161))}},r={};function t(n){var a=r[n];if(void 0!==a)return a.exports;var o=r[n]={id:n,loaded:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}t.m=e,t.c=r,t.federation||(t.federation={chunkMatcher:function(e){return!/^(1(57|61|79)|494|677|759|946)$/.test(e)}}),t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.f={},t.e=e=>Promise.all(Object.keys(t.f).reduce((r,n)=>(t.f[n](e,r),r),[])),t.u=e=>"__mf/js/async/"+e+"."+({156:"5a401ecb",173:"6314a363",193:"12ce9ab1",377:"59c252c4",620:"1d1ce390",651:"3ea371e5",694:"4580ad20",740:"babbb403",75:"d81e6bbf",770:"5431adef",783:"3c2c57f6",960:"478a8f11",964:"a98cab40",981:"bc5132f8"})[e]+".js",t.miniCssF=e=>"__mf/css/async/"+e+".6c6463ea.css",t.h=()=>"f097c2e08a90ff84",(()=>{t.g=(()=>{if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}})()})(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={},r="TracingGanttChart:";t.l=function(n,a,o,i){if(e[n]){e[n].push(a);return}if(void 0!==o)for(var s,l,c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var u=c[d];if(u.getAttribute("src")==n||u.getAttribute("data-webpack")==r+o){s=u;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,t.nc&&s.setAttribute("nonce",t.nc),s.setAttribute("data-webpack",r+o),s.src=n),e[n]=[a];var f=function(r,t){s.onerror=s.onload=null,clearTimeout(h);var a=e[n];if(delete e[n],s.parentNode&&s.parentNode.removeChild(s),a&&a.forEach(function(e){return e(t)}),r)return r(t)},h=setTimeout(f.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=f.bind(null,s.onerror),s.onload=f.bind(null,s.onload),l&&document.head.appendChild(s)}})(),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),t.nc=void 0,(()=>{var e=[];t.O=(r,n,a,o)=>{if(n){o=o||0;for(var i=e.length;i>0&&e[i-1][2]>o;i--)e[i]=e[i-1];e[i]=[n,a,o];return}for(var s=1/0,i=0;i<e.length;i++){for(var[n,a,o]=e[i],l=!0,c=0;c<n.length;c++)(!1&o||s>=o)&&Object.keys(t.O).every(e=>t.O[e](n[c]))?n.splice(c--,1):(l=!1,o<s&&(s=o));if(l){e.splice(i--,1);var d=a();void 0!==d&&(r=d)}}return r}})(),t.p="/plugins/TracingGanttChart/",t.rv=()=>"1.2.8",t.j="909",t.S={},t.initializeSharingData={scopeToSharingDataMapping:{default:[{name:"@emotion/react",version:"11.14.0",factory:()=>Promise.all([t.e("960"),t.e("677"),t.e("651")]).then(()=>()=>t(6434)),eager:0,singleton:1,requiredVersion:"^11.11.3"},{name:"@emotion/styled",version:"11.14.0",factory:()=>Promise.all([t.e("677"),t.e("157"),t.e("770")]).then(()=>()=>t(1958)),eager:0,singleton:1},{name:"@perses-dev/components",version:"0.51.0-rc.1",factory:()=>Promise.all([t.e("156"),t.e("193"),t.e("783"),t.e("677"),t.e("179"),t.e("157"),t.e("161"),t.e("946"),t.e("759")]).then(()=>()=>t(2084)),eager:0,singleton:1},{name:"date-fns",version:"4.1.0",factory:()=>Promise.all([t.e("156"),t.e("75")]).then(()=>()=>t(9657)),eager:0,singleton:1},{name:"lodash",version:"4.17.21",factory:()=>t.e("981").then(()=>()=>t(8784)),eager:0,singleton:1},{name:"react-dom",version:"18.3.1",factory:()=>Promise.all([t.e("173"),t.e("677")]).then(()=>()=>t(2652)),eager:0,singleton:1,requiredVersion:"18.2.0"},{name:"react-router-dom",version:"6.30.0",factory:()=>Promise.all([t.e("377"),t.e("677"),t.e("179")]).then(()=>()=>t(5895)),eager:0,singleton:1},{name:"react",version:"18.3.1",factory:()=>t.e("964").then(()=>()=>t(7378)),eager:0,singleton:1,requiredVersion:"18.2.0"}]},uniqueName:"TracingGanttChart"},t.I=t.I||function(){throw Error("should have __webpack_require__.I")},t.consumesLoadingData={chunkMapping:{161:["4665","461"],494:["7871"],946:["5913"],179:["6085"],157:["2116"],677:["4538"]},moduleIdToConsumeDataMapping:{461:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^4.1.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("75").then(()=>()=>t(9657))},5913:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"^11.3.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("694").then(()=>()=>t(1958))},4538:{shareScope:"default",shareKey:"react",import:"react",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("964").then(()=>()=>t(7378))},4665:{shareScope:"default",shareKey:"date-fns-tz",import:"date-fns-tz",requiredVersion:"^3.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("740"),t.e("494")]).then(()=>()=>t(8872))},7871:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^3.0.0 || ^4.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("75").then(()=>()=>t(9657))},6085:{shareScope:"default",shareKey:"react-dom",import:"react-dom",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("173").then(()=>()=>t(2652))},2116:{shareScope:"default",shareKey:"@emotion/react",import:"@emotion/react",requiredVersion:"^11.11.3",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("960").then(()=>()=>t(6434))}},initialConsumes:[]},t.f.consumes=t.f.consumes||function(){throw Error("should have __webpack_require__.f.consumes")},(()=>{if("undefined"!=typeof document){var e=function(e,r,n,a,o){var i=document.createElement("link");return i.rel="stylesheet",i.type="text/css",t.nc&&(i.nonce=t.nc),i.onerror=i.onload=function(t){if(i.onerror=i.onload=null,"load"===t.type)a();else{var n=t&&("load"===t.type?"missing":t.type),s=t&&t.target&&t.target.href||r,l=Error("Loading CSS chunk "+e+" failed.\\n("+s+")");l.code="CSS_CHUNK_LOAD_FAILED",l.type=n,l.request=s,i.parentNode&&i.parentNode.removeChild(i),o(l)}},i.href=r,n?n.parentNode.insertBefore(i,n.nextSibling):document.head.appendChild(i),i},r=function(e,r){for(var t=document.getElementsByTagName("link"),n=0;n<t.length;n++){var a=t[n],o=a.getAttribute("data-href")||a.getAttribute("href");if("stylesheet"===a.rel&&(o===e||o===r))return a}for(var i=document.getElementsByTagName("style"),n=0;n<i.length;n++){var a=i[n],o=a.getAttribute("data-href");if(o===e||o===r)return a}},n={909:0};t.f.miniCss=function(a,o){if(n[a])o.push(n[a]);else if(0!==n[a]&&({759:1})[a])o.push(n[a]=new Promise(function(n,o){var i=t.miniCssF(a),s=t.p+i;if(r(i,s))return n();e(a,s,null,n,o)}).then(function(){n[a]=0},function(e){throw delete n[a],e}))}}})(),(()=>{var e={909:0};t.f.j=function(r,n){var a=t.o(e,r)?e[r]:void 0;if(0!==a){if(a)n.push(a[2]);else if(/^(1(57|61|79)|494|677|759|946)$/.test(r))e[r]=0;else{var o=new Promise((t,n)=>a=e[r]=[t,n]);n.push(a[2]=o);var i=t.p+t.u(r),s=Error();t.l(i,function(n){if(t.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var o=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.src;s.message="Loading chunk "+r+" failed.\n("+o+": "+i+")",s.name="ChunkLoadError",s.type=o,s.request=i,a[1](s)}},"chunk-"+r,r)}}},t.O.j=r=>0===e[r];var r=(r,n)=>{var a,o,[i,s,l]=n,c=0;if(i.some(r=>0!==e[r])){for(a in s)t.o(s,a)&&(t.m[a]=s[a]);if(l)var d=l(t)}for(r&&r(n);c<i.length;c++)o=i[c],t.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return t.O(d)},n=self.webpackChunkTracingGanttChart=self.webpackChunkTracingGanttChart||[];n.forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n))})(),t.ruid="bundler=rspack@1.2.8",t.O(void 0,["788"],function(){return t(2429)});var n=t.O(void 0,["788"],function(){return t(5311)});n=t.O(n)})();
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { otlpcommonv1 } from '@perses-dev/core';
|
|
3
|
+
import { Span, Trace } from '../trace';
|
|
3
4
|
export type AttributeLinks = Record<string, (attributes: Record<string, otlpcommonv1.AnyValue>) => string>;
|
|
5
|
+
export interface TraceAttributesProps {
|
|
6
|
+
trace: Trace;
|
|
7
|
+
span: Span;
|
|
8
|
+
attributeLinks?: AttributeLinks;
|
|
9
|
+
}
|
|
10
|
+
export declare function TraceAttributes(props: TraceAttributesProps): import("react/jsx-runtime").JSX.Element;
|
|
4
11
|
export interface AttributeListProps {
|
|
5
12
|
attributeLinks?: AttributeLinks;
|
|
6
13
|
attributes: otlpcommonv1.KeyValue[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Attributes.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Attributes.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,KAAK,MAAM,CAAC,CAAC;AAE3G,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAoB1D;AAED,MAAM,WAAW,kBAAkB;IACjC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,EAAE,YAAY,CAAC,QAAQ,EAAE,CAAC;CACrC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAqBrE"}
|
|
@@ -10,10 +10,48 @@
|
|
|
10
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import { useMemo } from 'react';
|
|
15
|
-
import { Link, List, ListItem, ListItemText } from '@mui/material';
|
|
15
|
+
import { Divider, Link, List, ListItem, ListItemText } from '@mui/material';
|
|
16
16
|
import { Link as RouterLink } from 'react-router-dom';
|
|
17
|
+
import { formatDuration } from '../utils';
|
|
18
|
+
export function TraceAttributes(props) {
|
|
19
|
+
const { trace, span, attributeLinks } = props;
|
|
20
|
+
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
21
|
+
children: [
|
|
22
|
+
/*#__PURE__*/ _jsxs(List, {
|
|
23
|
+
children: [
|
|
24
|
+
/*#__PURE__*/ _jsx(AttributeItem, {
|
|
25
|
+
name: "span ID",
|
|
26
|
+
value: span.spanId
|
|
27
|
+
}),
|
|
28
|
+
/*#__PURE__*/ _jsx(AttributeItem, {
|
|
29
|
+
name: "start",
|
|
30
|
+
value: formatDuration(span.startTimeUnixMs - trace.startTimeUnixMs)
|
|
31
|
+
}),
|
|
32
|
+
/*#__PURE__*/ _jsx(AttributeItem, {
|
|
33
|
+
name: "duration",
|
|
34
|
+
value: formatDuration(span.endTimeUnixMs - span.startTimeUnixMs)
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
}),
|
|
38
|
+
/*#__PURE__*/ _jsx(Divider, {}),
|
|
39
|
+
span.attributes.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
40
|
+
children: [
|
|
41
|
+
/*#__PURE__*/ _jsx(AttributeList, {
|
|
42
|
+
attributeLinks: attributeLinks,
|
|
43
|
+
attributes: span.attributes
|
|
44
|
+
}),
|
|
45
|
+
/*#__PURE__*/ _jsx(Divider, {})
|
|
46
|
+
]
|
|
47
|
+
}),
|
|
48
|
+
/*#__PURE__*/ _jsx(AttributeList, {
|
|
49
|
+
attributeLinks: attributeLinks,
|
|
50
|
+
attributes: span.resource.attributes
|
|
51
|
+
})
|
|
52
|
+
]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
17
55
|
export function AttributeList(props) {
|
|
18
56
|
const { attributeLinks, attributes } = props;
|
|
19
57
|
const attributesMap = useMemo(()=>Object.fromEntries(attributes.map((attr)=>[
|
|
@@ -22,34 +60,35 @@ export function AttributeList(props) {
|
|
|
22
60
|
])), [
|
|
23
61
|
attributes
|
|
24
62
|
]);
|
|
25
|
-
return /*#__PURE__*/ _jsx(
|
|
26
|
-
children:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
})
|
|
63
|
+
return /*#__PURE__*/ _jsx(List, {
|
|
64
|
+
children: attributes.sort((a, b)=>a.key.localeCompare(b.key)).map((attribute, i)=>/*#__PURE__*/ _jsx(AttributeItem, {
|
|
65
|
+
name: attribute.key,
|
|
66
|
+
value: renderAttributeValue(attribute.value),
|
|
67
|
+
link: attributeLinks?.[attribute.key]?.(attributesMap)
|
|
68
|
+
}, i))
|
|
32
69
|
});
|
|
33
70
|
}
|
|
34
71
|
function AttributeItem(props) {
|
|
35
|
-
const {
|
|
36
|
-
const
|
|
72
|
+
const { name, value, link } = props;
|
|
73
|
+
const valueComponent = link ? /*#__PURE__*/ _jsx(Link, {
|
|
37
74
|
component: RouterLink,
|
|
38
|
-
to:
|
|
39
|
-
children:
|
|
40
|
-
}) :
|
|
75
|
+
to: link,
|
|
76
|
+
children: value
|
|
77
|
+
}) : value;
|
|
41
78
|
return /*#__PURE__*/ _jsx(ListItem, {
|
|
42
79
|
disablePadding: true,
|
|
43
80
|
children: /*#__PURE__*/ _jsx(ListItemText, {
|
|
44
|
-
primary:
|
|
45
|
-
secondary:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
81
|
+
primary: name,
|
|
82
|
+
secondary: valueComponent,
|
|
83
|
+
slotProps: {
|
|
84
|
+
primary: {
|
|
85
|
+
variant: 'h5'
|
|
86
|
+
},
|
|
87
|
+
secondary: {
|
|
88
|
+
variant: 'body1',
|
|
89
|
+
sx: {
|
|
90
|
+
wordBreak: 'break-word'
|
|
91
|
+
}
|
|
53
92
|
}
|
|
54
93
|
}
|
|
55
94
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.tsx"],"sourcesContent":["// Copyright 2024 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, useMemo } from 'react';\nimport { Link, List, ListItem, ListItemText } from '@mui/material';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { otlpcommonv1 } from '@perses-dev/core';\n\nexport type AttributeLinks = Record<string, (attributes: Record<string, otlpcommonv1.AnyValue>) => string>;\n\nexport interface AttributeListProps {\n attributeLinks?: AttributeLinks;\n attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n const { attributeLinks, attributes } = props;\n const attributesMap = useMemo(\n () => Object.fromEntries(attributes.map((attr) => [attr.key, attr.value])),\n [attributes]\n );\n\n return (\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/Attributes.tsx"],"sourcesContent":["// Copyright 2024 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, useMemo } from 'react';\nimport { Divider, Link, List, ListItem, ListItemText } from '@mui/material';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { otlpcommonv1 } from '@perses-dev/core';\nimport { Span, Trace } from '../trace';\nimport { formatDuration } from '../utils';\n\nexport type AttributeLinks = Record<string, (attributes: Record<string, otlpcommonv1.AnyValue>) => string>;\n\nexport interface TraceAttributesProps {\n trace: Trace;\n span: Span;\n attributeLinks?: AttributeLinks;\n}\n\nexport function TraceAttributes(props: TraceAttributesProps) {\n const { trace, span, attributeLinks } = props;\n\n return (\n <>\n <List>\n <AttributeItem name=\"span ID\" value={span.spanId} />\n <AttributeItem name=\"start\" value={formatDuration(span.startTimeUnixMs - trace.startTimeUnixMs)} />\n <AttributeItem name=\"duration\" value={formatDuration(span.endTimeUnixMs - span.startTimeUnixMs)} />\n </List>\n <Divider />\n {span.attributes.length > 0 && (\n <>\n <AttributeList attributeLinks={attributeLinks} attributes={span.attributes} />\n <Divider />\n </>\n )}\n <AttributeList attributeLinks={attributeLinks} attributes={span.resource.attributes} />\n </>\n );\n}\n\nexport interface AttributeListProps {\n attributeLinks?: AttributeLinks;\n attributes: otlpcommonv1.KeyValue[];\n}\n\nexport function AttributeList(props: AttributeListProps): ReactElement {\n const { attributeLinks, attributes } = props;\n const attributesMap = useMemo(\n () => Object.fromEntries(attributes.map((attr) => [attr.key, attr.value])),\n [attributes]\n );\n\n return (\n <List>\n {attributes\n .sort((a, b) => a.key.localeCompare(b.key))\n .map((attribute, i) => (\n <AttributeItem\n key={i}\n name={attribute.key}\n value={renderAttributeValue(attribute.value)}\n link={attributeLinks?.[attribute.key]?.(attributesMap)}\n />\n ))}\n </List>\n );\n}\n\ninterface AttributeItemProps {\n name: string;\n value: string;\n link?: string;\n}\n\nfunction AttributeItem(props: AttributeItemProps): ReactElement {\n const { name, value, link } = props;\n\n const valueComponent = link ? (\n <Link component={RouterLink} to={link}>\n {value}\n </Link>\n ) : (\n value\n );\n\n return (\n <ListItem disablePadding>\n <ListItemText\n primary={name}\n secondary={valueComponent}\n slotProps={{\n primary: { variant: 'h5' },\n secondary: { variant: 'body1', sx: { wordBreak: 'break-word' } },\n }}\n />\n </ListItem>\n );\n}\n\nfunction renderAttributeValue(value: otlpcommonv1.AnyValue): string {\n if ('stringValue' in value) return value.stringValue.length > 0 ? value.stringValue : '<empty string>';\n if ('intValue' in value) return value.intValue;\n if ('boolValue' in value) return value.boolValue.toString();\n if ('arrayValue' in value) return value.arrayValue.values.map(renderAttributeValue).join(', ');\n return 'unknown';\n}\n"],"names":["useMemo","Divider","Link","List","ListItem","ListItemText","RouterLink","formatDuration","TraceAttributes","props","trace","span","attributeLinks","AttributeItem","name","value","spanId","startTimeUnixMs","endTimeUnixMs","attributes","length","AttributeList","resource","attributesMap","Object","fromEntries","map","attr","key","sort","a","b","localeCompare","attribute","i","renderAttributeValue","link","valueComponent","component","to","disablePadding","primary","secondary","slotProps","variant","sx","wordBreak","stringValue","intValue","boolValue","toString","arrayValue","values","join"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,YAAY,QAAQ,gBAAgB;AAC5E,SAASH,QAAQI,UAAU,QAAQ,mBAAmB;AAGtD,SAASC,cAAc,QAAQ,WAAW;AAU1C,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGH;IAExC,qBACE;;0BACE,MAACN;;kCACC,KAACU;wBAAcC,MAAK;wBAAUC,OAAOJ,KAAKK,MAAM;;kCAChD,KAACH;wBAAcC,MAAK;wBAAQC,OAAOR,eAAeI,KAAKM,eAAe,GAAGP,MAAMO,eAAe;;kCAC9F,KAACJ;wBAAcC,MAAK;wBAAWC,OAAOR,eAAeI,KAAKO,aAAa,GAAGP,KAAKM,eAAe;;;;0BAEhG,KAAChB;YACAU,KAAKQ,UAAU,CAACC,MAAM,GAAG,mBACxB;;kCACE,KAACC;wBAAcT,gBAAgBA;wBAAgBO,YAAYR,KAAKQ,UAAU;;kCAC1E,KAAClB;;;0BAGL,KAACoB;gBAAcT,gBAAgBA;gBAAgBO,YAAYR,KAAKW,QAAQ,CAACH,UAAU;;;;AAGzF;AAOA,OAAO,SAASE,cAAcZ,KAAyB;IACrD,MAAM,EAAEG,cAAc,EAAEO,UAAU,EAAE,GAAGV;IACvC,MAAMc,gBAAgBvB,QACpB,IAAMwB,OAAOC,WAAW,CAACN,WAAWO,GAAG,CAAC,CAACC,OAAS;gBAACA,KAAKC,GAAG;gBAAED,KAAKZ,KAAK;aAAC,IACxE;QAACI;KAAW;IAGd,qBACE,KAAChB;kBACEgB,WACEU,IAAI,CAAC,CAACC,GAAGC,IAAMD,EAAEF,GAAG,CAACI,aAAa,CAACD,EAAEH,GAAG,GACxCF,GAAG,CAAC,CAACO,WAAWC,kBACf,KAACrB;gBAECC,MAAMmB,UAAUL,GAAG;gBACnBb,OAAOoB,qBAAqBF,UAAUlB,KAAK;gBAC3CqB,MAAMxB,gBAAgB,CAACqB,UAAUL,GAAG,CAAC,GAAGL;eAHnCW;;AAQjB;AAQA,SAASrB,cAAcJ,KAAyB;IAC9C,MAAM,EAAEK,IAAI,EAAEC,KAAK,EAAEqB,IAAI,EAAE,GAAG3B;IAE9B,MAAM4B,iBAAiBD,qBACrB,KAAClC;QAAKoC,WAAWhC;QAAYiC,IAAIH;kBAC9BrB;SAGHA;IAGF,qBACE,KAACX;QAASoC,cAAc;kBACtB,cAAA,KAACnC;YACCoC,SAAS3B;YACT4B,WAAWL;YACXM,WAAW;gBACTF,SAAS;oBAAEG,SAAS;gBAAK;gBACzBF,WAAW;oBAAEE,SAAS;oBAASC,IAAI;wBAAEC,WAAW;oBAAa;gBAAE;YACjE;;;AAIR;AAEA,SAASX,qBAAqBpB,KAA4B;IACxD,IAAI,iBAAiBA,OAAO,OAAOA,MAAMgC,WAAW,CAAC3B,MAAM,GAAG,IAAIL,MAAMgC,WAAW,GAAG;IACtF,IAAI,cAAchC,OAAO,OAAOA,MAAMiC,QAAQ;IAC9C,IAAI,eAAejC,OAAO,OAAOA,MAAMkC,SAAS,CAACC,QAAQ;IACzD,IAAI,gBAAgBnC,OAAO,OAAOA,MAAMoC,UAAU,CAACC,MAAM,CAAC1B,GAAG,CAACS,sBAAsBkB,IAAI,CAAC;IACzF,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAC;AAG/D,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA6B/D"}
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
14
|
-
import { Box,
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { Box, IconButton, Tab, Tabs, Typography } from '@mui/material';
|
|
15
15
|
import { useState } from 'react';
|
|
16
16
|
import CloseIcon from 'mdi-material-ui/Close';
|
|
17
|
-
import {
|
|
17
|
+
import { TraceAttributes } from './Attributes';
|
|
18
18
|
import { SpanEventList } from './SpanEvents';
|
|
19
19
|
/**
|
|
20
20
|
* DetailPane renders a sidebar showing the span attributes etc.
|
|
@@ -71,18 +71,10 @@ import { SpanEventList } from './SpanEvents';
|
|
|
71
71
|
]
|
|
72
72
|
})
|
|
73
73
|
}),
|
|
74
|
-
tab === 'attributes' && /*#__PURE__*/
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
attributes: span.attributes
|
|
79
|
-
}),
|
|
80
|
-
span.attributes.length > 0 && /*#__PURE__*/ _jsx(Divider, {}),
|
|
81
|
-
/*#__PURE__*/ _jsx(AttributeList, {
|
|
82
|
-
attributeLinks: attributeLinks,
|
|
83
|
-
attributes: span.resource.attributes
|
|
84
|
-
})
|
|
85
|
-
]
|
|
74
|
+
tab === 'attributes' && /*#__PURE__*/ _jsx(TraceAttributes, {
|
|
75
|
+
trace: trace,
|
|
76
|
+
span: span,
|
|
77
|
+
attributeLinks: attributeLinks
|
|
86
78
|
}),
|
|
87
79
|
tab === 'events' && /*#__PURE__*/ _jsx(SpanEventList, {
|
|
88
80
|
trace: trace,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"sourcesContent":["// Copyright 2024 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 { Box,
|
|
1
|
+
{"version":3,"sources":["../../../../src/TracingGanttChart/DetailPane/DetailPane.tsx"],"sourcesContent":["// Copyright 2024 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 { Box, IconButton, Tab, Tabs, Typography } from '@mui/material';\nimport { ReactElement, useState } from 'react';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { Span, Trace } from '../trace';\nimport { AttributeLinks, TraceAttributes } from './Attributes';\nimport { SpanEventList } from './SpanEvents';\n\nexport interface DetailPaneProps {\n attributeLinks?: AttributeLinks;\n trace: Trace;\n span: Span;\n onCloseBtnClick: () => void;\n}\n\n/**\n * DetailPane renders a sidebar showing the span attributes etc.\n */\nexport function DetailPane(props: DetailPaneProps): ReactElement {\n const { attributeLinks, trace, span, onCloseBtnClick } = props;\n const [tab, setTab] = useState<'attributes' | 'events'>('attributes');\n\n // if the events tab is selected, and then a span without events is clicked,\n // we need to switch the current selected tab back to the attributes tab.\n if (tab === 'events' && span.events.length === 0) {\n setTab('attributes');\n }\n\n return (\n <Box>\n <IconButton sx={{ float: 'right' }} onClick={onCloseBtnClick}>\n <CloseIcon />\n </IconButton>\n <Typography sx={{ wordBreak: 'break-word' }}>{span.resource.serviceName}</Typography>\n <Typography variant=\"h2\" sx={{ wordBreak: 'break-word' }}>\n {span.name}\n </Typography>\n <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>\n <Tabs value={tab} onChange={(_, tab) => setTab(tab)}>\n <Tab sx={{ p: 0 }} value=\"attributes\" label=\"Attributes\" />\n {span.events.length > 0 && <Tab value=\"events\" label=\"Events\" />}\n </Tabs>\n </Box>\n {tab === 'attributes' && <TraceAttributes trace={trace} span={span} attributeLinks={attributeLinks} />}\n {tab === 'events' && <SpanEventList trace={trace} span={span} />}\n </Box>\n );\n}\n"],"names":["Box","IconButton","Tab","Tabs","Typography","useState","CloseIcon","TraceAttributes","SpanEventList","DetailPane","props","attributeLinks","trace","span","onCloseBtnClick","tab","setTab","events","length","sx","float","onClick","wordBreak","resource","serviceName","variant","name","borderBottom","borderColor","value","onChange","_","p","label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAEC,GAAG,EAAEC,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACvE,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,eAAe,wBAAwB;AAE9C,SAAyBC,eAAe,QAAQ,eAAe;AAC/D,SAASC,aAAa,QAAQ,eAAe;AAS7C;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGJ;IACzD,MAAM,CAACK,KAAKC,OAAO,GAAGX,SAAkC;IAExD,4EAA4E;IAC5E,yEAAyE;IACzE,IAAIU,QAAQ,YAAYF,KAAKI,MAAM,CAACC,MAAM,KAAK,GAAG;QAChDF,OAAO;IACT;IAEA,qBACE,MAAChB;;0BACC,KAACC;gBAAWkB,IAAI;oBAAEC,OAAO;gBAAQ;gBAAGC,SAASP;0BAC3C,cAAA,KAACR;;0BAEH,KAACF;gBAAWe,IAAI;oBAAEG,WAAW;gBAAa;0BAAIT,KAAKU,QAAQ,CAACC,WAAW;;0BACvE,KAACpB;gBAAWqB,SAAQ;gBAAKN,IAAI;oBAAEG,WAAW;gBAAa;0BACpDT,KAAKa,IAAI;;0BAEZ,KAAC1B;gBAAImB,IAAI;oBAAEQ,cAAc;oBAAGC,aAAa;gBAAU;0BACjD,cAAA,MAACzB;oBAAK0B,OAAOd;oBAAKe,UAAU,CAACC,GAAGhB,MAAQC,OAAOD;;sCAC7C,KAACb;4BAAIiB,IAAI;gCAAEa,GAAG;4BAAE;4BAAGH,OAAM;4BAAaI,OAAM;;wBAC3CpB,KAAKI,MAAM,CAACC,MAAM,GAAG,mBAAK,KAAChB;4BAAI2B,OAAM;4BAASI,OAAM;;;;;YAGxDlB,QAAQ,8BAAgB,KAACR;gBAAgBK,OAAOA;gBAAOC,MAAMA;gBAAMF,gBAAgBA;;YACnFI,QAAQ,0BAAY,KAACP;gBAAcI,OAAOA;gBAAOC,MAAMA;;;;AAG9D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TraceDetails.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAahC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2BnE"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
// Copyright 2025 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
import { Stack, Typography } from '@mui/material';
|
|
15
|
+
import { useTimeZone } from '@perses-dev/components';
|
|
16
|
+
import { formatDuration } from './utils';
|
|
17
|
+
const DATE_FORMAT_OPTIONS = {
|
|
18
|
+
year: 'numeric',
|
|
19
|
+
month: 'long',
|
|
20
|
+
day: 'numeric',
|
|
21
|
+
hour: 'numeric',
|
|
22
|
+
minute: 'numeric',
|
|
23
|
+
second: 'numeric',
|
|
24
|
+
fractionalSecondDigits: 3,
|
|
25
|
+
timeZoneName: 'short'
|
|
26
|
+
};
|
|
27
|
+
export function TraceDetails(props) {
|
|
28
|
+
const { trace } = props;
|
|
29
|
+
const { dateFormatOptionsWithUserTimeZone } = useTimeZone();
|
|
30
|
+
const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);
|
|
31
|
+
const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);
|
|
32
|
+
const rootSpan = trace.rootSpans[0];
|
|
33
|
+
if (!rootSpan) {
|
|
34
|
+
return /*#__PURE__*/ _jsx(Typography, {
|
|
35
|
+
children: "Trace contains no spans."
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return /*#__PURE__*/ _jsxs(Stack, {
|
|
39
|
+
direction: "row",
|
|
40
|
+
sx: {
|
|
41
|
+
justifyContent: 'space-between'
|
|
42
|
+
},
|
|
43
|
+
children: [
|
|
44
|
+
/*#__PURE__*/ _jsxs(Typography, {
|
|
45
|
+
variant: "h3",
|
|
46
|
+
children: [
|
|
47
|
+
rootSpan.resource.serviceName,
|
|
48
|
+
": ",
|
|
49
|
+
rootSpan.name,
|
|
50
|
+
" (",
|
|
51
|
+
formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs),
|
|
52
|
+
")"
|
|
53
|
+
]
|
|
54
|
+
}),
|
|
55
|
+
/*#__PURE__*/ _jsxs(Typography, {
|
|
56
|
+
variant: "h4",
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ _jsxs(Typography, {
|
|
59
|
+
component: "span",
|
|
60
|
+
sx: {
|
|
61
|
+
px: 1
|
|
62
|
+
},
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ _jsx("strong", {
|
|
65
|
+
children: "Start:"
|
|
66
|
+
}),
|
|
67
|
+
" ",
|
|
68
|
+
dateFormatter.format(trace.startTimeUnixMs)
|
|
69
|
+
]
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ _jsxs(Typography, {
|
|
72
|
+
component: "span",
|
|
73
|
+
sx: {
|
|
74
|
+
px: 1
|
|
75
|
+
},
|
|
76
|
+
children: [
|
|
77
|
+
/*#__PURE__*/ _jsx("strong", {
|
|
78
|
+
children: "Trace ID:"
|
|
79
|
+
}),
|
|
80
|
+
" ",
|
|
81
|
+
rootSpan.traceId
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
//# sourceMappingURL=TraceDetails.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/TracingGanttChart/TraceDetails.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { useTimeZone } from '@perses-dev/components';\nimport { formatDuration } from './utils';\nimport { Trace } from './trace';\n\nconst DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3,\n timeZoneName: 'short',\n};\n\nexport interface TraceDetailsProps {\n trace: Trace;\n}\n\nexport function TraceDetails(props: TraceDetailsProps): ReactElement {\n const { trace } = props;\n\n const { dateFormatOptionsWithUserTimeZone } = useTimeZone();\n const dateFormatOptions = dateFormatOptionsWithUserTimeZone(DATE_FORMAT_OPTIONS);\n const dateFormatter = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n\n const rootSpan = trace.rootSpans[0];\n if (!rootSpan) {\n return <Typography>Trace contains no spans.</Typography>;\n }\n\n return (\n <Stack direction=\"row\" sx={{ justifyContent: 'space-between' }}>\n <Typography variant=\"h3\">\n {rootSpan.resource.serviceName}: {rootSpan.name} ({formatDuration(trace.endTimeUnixMs - trace.startTimeUnixMs)})\n </Typography>\n <Typography variant=\"h4\">\n <Typography component=\"span\" sx={{ px: 1 }}>\n <strong>Start:</strong> {dateFormatter.format(trace.startTimeUnixMs)}\n </Typography>\n <Typography component=\"span\" sx={{ px: 1 }}>\n <strong>Trace ID:</strong> {rootSpan.traceId}\n </Typography>\n </Typography>\n </Stack>\n );\n}\n"],"names":["Stack","Typography","useTimeZone","formatDuration","DATE_FORMAT_OPTIONS","year","month","day","hour","minute","second","fractionalSecondDigits","timeZoneName","TraceDetails","props","trace","dateFormatOptionsWithUserTimeZone","dateFormatOptions","dateFormatter","Intl","DateTimeFormat","undefined","rootSpan","rootSpans","direction","sx","justifyContent","variant","resource","serviceName","name","endTimeUnixMs","startTimeUnixMs","component","px","strong","format","traceId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAElD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,cAAc,QAAQ,UAAU;AAGzC,MAAMC,sBAAkD;IACtDC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,wBAAwB;IACxBC,cAAc;AAChB;AAMA,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,iCAAiC,EAAE,GAAGd;IAC9C,MAAMe,oBAAoBD,kCAAkCZ;IAC5D,MAAMc,gBAAgB,IAAIC,KAAKC,cAAc,CAACC,WAAWJ;IAEzD,MAAMK,WAAWP,MAAMQ,SAAS,CAAC,EAAE;IACnC,IAAI,CAACD,UAAU;QACb,qBAAO,KAACrB;sBAAW;;IACrB;IAEA,qBACE,MAACD;QAAMwB,WAAU;QAAMC,IAAI;YAAEC,gBAAgB;QAAgB;;0BAC3D,MAACzB;gBAAW0B,SAAQ;;oBACjBL,SAASM,QAAQ,CAACC,WAAW;oBAAC;oBAAGP,SAASQ,IAAI;oBAAC;oBAAG3B,eAAeY,MAAMgB,aAAa,GAAGhB,MAAMiB,eAAe;oBAAE;;;0BAEjH,MAAC/B;gBAAW0B,SAAQ;;kCAClB,MAAC1B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAe;4BAAEjB,cAAckB,MAAM,CAACrB,MAAMiB,eAAe;;;kCAErE,MAAC/B;wBAAWgC,WAAU;wBAAOR,IAAI;4BAAES,IAAI;wBAAE;;0CACvC,KAACC;0CAAO;;4BAAkB;4BAAEb,SAASe,OAAO;;;;;;;AAKtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"TracingGanttChart.d.ts","sourceRoot":"","sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAOhE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,wBAAwB,CAAC;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAqD7E"}
|
|
@@ -19,6 +19,7 @@ import { GanttTable } from './GanttTable/GanttTable';
|
|
|
19
19
|
import { GanttTableProvider } from './GanttTable/GanttTableProvider';
|
|
20
20
|
import { ResizableDivider } from './GanttTable/ResizableDivider';
|
|
21
21
|
import { getTraceModel } from './trace';
|
|
22
|
+
import { TraceDetails } from './TraceDetails';
|
|
22
23
|
/**
|
|
23
24
|
* The core GanttChart panel for Perses.
|
|
24
25
|
*
|
|
@@ -61,6 +62,9 @@ import { getTraceModel } from './trace';
|
|
|
61
62
|
gap
|
|
62
63
|
},
|
|
63
64
|
children: [
|
|
65
|
+
/*#__PURE__*/ _jsx(TraceDetails, {
|
|
66
|
+
trace: trace
|
|
67
|
+
}),
|
|
64
68
|
/*#__PURE__*/ _jsx(MiniGanttChart, {
|
|
65
69
|
options: options,
|
|
66
70
|
trace: trace,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 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, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { AttributeLinks } from './DetailPane/Attributes';\nimport { getTraceModel, Span } from './trace';\n\nexport interface TracingGanttChartProps {\n options: TracingGanttChartOptions;\n attributeLinks?: AttributeLinks;\n trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n const { options, attributeLinks, trace: otlpTrace } = props;\n\n const theme = useTheme();\n const trace = useMemo(() => {\n try {\n return getTraceModel(otlpTrace);\n } catch (e) {\n throw new Error(`Error: unable to parse trace: ${e}`);\n }\n }, [otlpTrace]);\n const [viewport, setViewport] = useState<Viewport>({\n startTimeUnixMs: trace.startTimeUnixMs,\n endTimeUnixMs: trace.endTimeUnixMs,\n });\n const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(undefined);\n\n const ganttChart = useRef<HTMLDivElement>(null);\n // tableWidth only comes to effect if the detail pane is visible.\n // setTableWidth() is only called by <ResizableDivider />\n const [tableWidth, setTableWidth] = useState<number>(0.82);\n const gap = 2;\n\n return (\n <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n <Stack sx={{ flexGrow: 1, gap }}>\n <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n <GanttTableProvider>\n <GanttTable\n options={options}\n trace={trace}\n viewport={viewport}\n selectedSpan={selectedSpan}\n onSpanClick={setSelectedSpan}\n />\n </GanttTableProvider>\n </Stack>\n {selectedSpan && (\n <>\n <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n <Box sx={{ width: `${(1 - tableWidth) * 100}%`, overflow: 'auto' }}>\n <DetailPane\n attributeLinks={attributeLinks}\n trace={trace}\n span={selectedSpan}\n onCloseBtnClick={() => setSelectedSpan(undefined)}\n />\n </Box>\n </>\n )}\n </Stack>\n );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TracingGanttChart","props","options","attributeLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AAEjE,SAASC,aAAa,QAAc,UAAU;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEtD,MAAMK,
|
|
1
|
+
{"version":3,"sources":["../../../src/TracingGanttChart/TracingGanttChart.tsx"],"sourcesContent":["// Copyright 2024 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, useMemo, useRef, useState } from 'react';\nimport { Box, Stack, useTheme } from '@mui/material';\nimport { otlptracev1 } from '@perses-dev/core';\nimport { TracingGanttChartOptions } from '../gantt-chart-model';\nimport { MiniGanttChart } from './MiniGanttChart/MiniGanttChart';\nimport { DetailPane } from './DetailPane/DetailPane';\nimport { Viewport } from './utils';\nimport { GanttTable } from './GanttTable/GanttTable';\nimport { GanttTableProvider } from './GanttTable/GanttTableProvider';\nimport { ResizableDivider } from './GanttTable/ResizableDivider';\nimport { AttributeLinks } from './DetailPane/Attributes';\nimport { getTraceModel, Span } from './trace';\nimport { TraceDetails } from './TraceDetails';\n\nexport interface TracingGanttChartProps {\n options: TracingGanttChartOptions;\n attributeLinks?: AttributeLinks;\n trace: otlptracev1.TracesData;\n}\n\n/**\n * The core GanttChart panel for Perses.\n *\n * The UI/UX of this panel is based on Jaeger UI, licensed under Apache License, Version 2.0.\n * https://github.com/jaegertracing/jaeger-ui\n */\nexport function TracingGanttChart(props: TracingGanttChartProps): ReactElement {\n const { options, attributeLinks, trace: otlpTrace } = props;\n\n const theme = useTheme();\n const trace = useMemo(() => {\n try {\n return getTraceModel(otlpTrace);\n } catch (e) {\n throw new Error(`Error: unable to parse trace: ${e}`);\n }\n }, [otlpTrace]);\n const [viewport, setViewport] = useState<Viewport>({\n startTimeUnixMs: trace.startTimeUnixMs,\n endTimeUnixMs: trace.endTimeUnixMs,\n });\n const [selectedSpan, setSelectedSpan] = useState<Span | undefined>(undefined);\n\n const ganttChart = useRef<HTMLDivElement>(null);\n // tableWidth only comes to effect if the detail pane is visible.\n // setTableWidth() is only called by <ResizableDivider />\n const [tableWidth, setTableWidth] = useState<number>(0.82);\n const gap = 2;\n\n return (\n <Stack ref={ganttChart} direction=\"row\" sx={{ height: '100%', minHeight: '240px', gap }}>\n <Stack sx={{ flexGrow: 1, gap }}>\n <TraceDetails trace={trace} />\n <MiniGanttChart options={options} trace={trace} viewport={viewport} setViewport={setViewport} />\n <GanttTableProvider>\n <GanttTable\n options={options}\n trace={trace}\n viewport={viewport}\n selectedSpan={selectedSpan}\n onSpanClick={setSelectedSpan}\n />\n </GanttTableProvider>\n </Stack>\n {selectedSpan && (\n <>\n <ResizableDivider parentRef={ganttChart} spacing={parseInt(theme.spacing(gap))} onMove={setTableWidth} />\n <Box sx={{ width: `${(1 - tableWidth) * 100}%`, overflow: 'auto' }}>\n <DetailPane\n attributeLinks={attributeLinks}\n trace={trace}\n span={selectedSpan}\n onCloseBtnClick={() => setSelectedSpan(undefined)}\n />\n </Box>\n </>\n )}\n </Stack>\n );\n}\n"],"names":["useMemo","useRef","useState","Box","Stack","useTheme","MiniGanttChart","DetailPane","GanttTable","GanttTableProvider","ResizableDivider","getTraceModel","TraceDetails","TracingGanttChart","props","options","attributeLinks","trace","otlpTrace","theme","e","Error","viewport","setViewport","startTimeUnixMs","endTimeUnixMs","selectedSpan","setSelectedSpan","undefined","ganttChart","tableWidth","setTableWidth","gap","ref","direction","sx","height","minHeight","flexGrow","onSpanClick","parentRef","spacing","parseInt","onMove","width","overflow","span","onCloseBtnClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,GAAG,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAGrD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,gBAAgB,QAAQ,gCAAgC;AAEjE,SAASC,aAAa,QAAc,UAAU;AAC9C,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C;;;;;CAKC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,OAAOC,SAAS,EAAE,GAAGJ;IAEtD,MAAMK,QAAQd;IACd,MAAMY,QAAQjB,QAAQ;QACpB,IAAI;YACF,OAAOW,cAAcO;QACvB,EAAE,OAAOE,GAAG;YACV,MAAM,IAAIC,MAAM,CAAC,8BAA8B,EAAED,GAAG;QACtD;IACF,GAAG;QAACF;KAAU;IACd,MAAM,CAACI,UAAUC,YAAY,GAAGrB,SAAmB;QACjDsB,iBAAiBP,MAAMO,eAAe;QACtCC,eAAeR,MAAMQ,aAAa;IACpC;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGzB,SAA2B0B;IAEnE,MAAMC,aAAa5B,OAAuB;IAC1C,iEAAiE;IACjE,yDAAyD;IACzD,MAAM,CAAC6B,YAAYC,cAAc,GAAG7B,SAAiB;IACrD,MAAM8B,MAAM;IAEZ,qBACE,MAAC5B;QAAM6B,KAAKJ;QAAYK,WAAU;QAAMC,IAAI;YAAEC,QAAQ;YAAQC,WAAW;YAASL;QAAI;;0BACpF,MAAC5B;gBAAM+B,IAAI;oBAAEG,UAAU;oBAAGN;gBAAI;;kCAC5B,KAACpB;wBAAaK,OAAOA;;kCACrB,KAACX;wBAAeS,SAASA;wBAASE,OAAOA;wBAAOK,UAAUA;wBAAUC,aAAaA;;kCACjF,KAACd;kCACC,cAAA,KAACD;4BACCO,SAASA;4BACTE,OAAOA;4BACPK,UAAUA;4BACVI,cAAcA;4BACda,aAAaZ;;;;;YAIlBD,8BACC;;kCACE,KAAChB;wBAAiB8B,WAAWX;wBAAYY,SAASC,SAASvB,MAAMsB,OAAO,CAACT;wBAAOW,QAAQZ;;kCACxF,KAAC5B;wBAAIgC,IAAI;4BAAES,OAAO,GAAG,AAAC,CAAA,IAAId,UAAS,IAAK,IAAI,CAAC,CAAC;4BAAEe,UAAU;wBAAO;kCAC/D,cAAA,KAACtC;4BACCS,gBAAgBA;4BAChBC,OAAOA;4BACP6B,MAAMpB;4BACNqB,iBAAiB,IAAMpB,gBAAgBC;;;;;;;AAOrD"}
|