@verifiedinc-public/shared-ui-elements 9.9.2-beta.3 → 9.9.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{ContentCopy as C}from"@mui/icons-material";import{Typography as s,Stack as v,IconButton as k}from"@mui/material";import{useCopyToClipboard as
|
|
1
|
+
"use strict";import{ContentCopy as C}from"@mui/icons-material";import{Typography as s,Stack as v,IconButton as k}from"@mui/material";import{useCopyToClipboard as S}from"../../hooks/useCopyToClipboard.mjs";import{useSnackbar as _}from"../Snackbar/index.mjs";import{jsx as n,jsxs as $}from"react/jsx-runtime";function B(o,t,e){return e===0?o.length<=t?o:`${o.slice(0,t)}...`:o.length<=t+e+1?o:`${o.slice(0,t)}\u2026${o.slice(-e)}`}function w({uuid:o,label:t="UUID",head:e=4,tail:d=4,variant:y="button",placeholder:b="\u2014",mono:f=!0,typographyProps:h,iconSx:m,sx:r}){const{copy:x}=S({type:"text/plain"}),{enqueueSnackbar:g}=_(),{sx:i,...a}=h??{},l=f?{fontFamily:"monospace"}:{};if(!o)return n(s,{variant:"body2",color:"text.secondary",...a,sx:[l,i,r].filter(Boolean),children:b});const p=B(o,e,d),u=async c=>{c.stopPropagation();try{await x(o),g(`${t} copied to clipboard`,"success")}catch{}};if(y==="text"){const c={background:"transparent",border:0,padding:0,margin:0,font:"inherit",color:"inherit",textAlign:"inherit",cursor:"pointer","&:hover":{textDecoration:"underline"},"&:focus-visible":{outline:"2px solid currentColor",outlineOffset:2}};return n(s,{component:"button",type:"button",variant:"body2","aria-label":`Copy ${t}`,onClick:u,...a,sx:[l,c,i,r].filter(Boolean),children:p})}return $(v,{direction:"row",alignItems:"center",sx:{"& .copyable-uuid__btn":{opacity:0},"&:hover .copyable-uuid__btn":{opacity:1},...r},children:[n(s,{variant:"body2",color:"text.secondary",noWrap:!0,...a,sx:[l,i].filter(Boolean),children:p}),n(k,{className:"copyable-uuid__btn",size:"small","aria-label":`Copy ${t}`,onClick:u,sx:[{p:.25,ml:.5,fontSize:"inherit"},m].filter(Boolean),children:n(C,{fontSize:"inherit"})})]})}export{w as CopyableUuid};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import
|
|
1
|
+
"use strict";import q,{useMemo as O,useState as v,useRef as S,useEffect as T}from"react";import{useVirtualizer as K}from"@tanstack/react-virtual";import{useTheme as V,useMediaQuery as G,Stack as m,TableContainer as Q,Paper as Z,Table as _,TableHead as J,TableRow as x,TableCell as t,Typography as a,TableBody as X,CircularProgress as $,Chip as A,Box as Y,IconButton as ee,Tooltip as B}from"@mui/material";import{ContentCopy as re}from"@mui/icons-material";import{EmptyChartSection as oe}from"../../chart/EmptyChartSection.mjs";import{useCopyToClipboard as ne}from"../../../hooks/useCopyToClipboard.mjs";import{useSnackbar as te}from"../../Snackbar/index.mjs";import{formatLogTimestamp as ie}from"../../../utils/date.mjs";import{PRODUCT_LABELS as le}from"../constants.mjs";import{LogDetailPanel as ae}from"./LogDetailPanel.mjs";import{useBidirectionalScroll as se}from"../../../hooks/useBidirectionalScroll.mjs";import{jsx as e,jsxs as s}from"react/jsx-runtime";function de({statusCode:o,errorCode:i}){let l="grey.400";return i??o>=400?l="error.main":o>=200&&o<300&&(l="success.main"),e(Y,{sx:{width:8,height:8,borderRadius:"50%",bgcolor:l,flexShrink:0}})}function N({value:o,label:i,onCopy:l}){return e(ee,{className:"copy-btn",size:"small",onClick:h=>{h.stopPropagation(),l(i,o)},sx:{p:.25,ml:.5},children:e(re,{sx:{fontSize:13}})})}function ce(o){return o?o.length<=12?o:`${o.slice(0,4)}\u2026${o.slice(-4)}`:"\u2014"}function he(o){return o.source==="sdk"?o.path:`${o.method} /${o.path}`}function pe({text:o}){const i=S(null),[l,h]=v(!1);return T(()=>{const d=i.current;d&&h(d.scrollWidth>d.clientWidth)},[o]),e(B,{title:l?o:"",placement:"top",children:e(a,{ref:i,variant:"body2",noWrap:!0,sx:{fontSize:"0.8em",color:"text.primary",fontFamily:"monospace"},children:o})})}function ue({label:o,...i}){const l=S(null),[h,d]=v(!1);return T(()=>{var g;const y=(g=l.current)==null?void 0:g.querySelector(".MuiChip-label");y&&d(y.scrollWidth>y.clientWidth)},[o]),e(B,{title:h?o:"",placement:"top",children:e(A,{ref:l,label:o,...i,sx:{...i.sx,maxWidth:"100%","& .MuiChip-label":{overflow:"hidden",textOverflow:"ellipsis"}}})})}const me=48,xe={fontFamily:"monospace"};function ge({data:o,isLoading:i,hasOlder:l,hasNewer:h,isLoadingOlder:d,isLoadingNewer:g,onLoadNewer:y,onLoadOlder:M,filterKey:j,timeZone:F}){const U=V(),k=G(U.breakpoints.down("xl")),p={...xe,fontSize:"0.8em"},D=O(()=>[{label:"Timestamp",width:230},{label:"Phone",width:150},{label:"1-Click UUID",width:130},{label:"Source",width:90},{label:"Product",width:140},{label:"Event",width:k?125:200},{label:"HTTP",align:"right",width:75},{label:"Latency",align:"right",width:100},{label:"Error",width:140}],[k]),[b,L]=v(null),C=S(null),{copy:H}=ne({type:"text/plain"}),{enqueueSnackbar:R}=te(),z=async(n,r)=>{await H(r),R(`${n} copied to clipboard`,"success")},u=O(()=>o?.data??[],[o?.data]),f=K({count:u.length,getScrollElement:()=>C.current,estimateSize:()=>me,overscan:5});se({scrollContainerRef:C,virtualizer:f,rowCount:u.length,hasNewer:h,hasOlder:l,isLoadingNewer:g,isLoadingOlder:d,onLoadNewer:y,onLoadOlder:M,resetKey:j});const c=f.getVirtualItems(),I=(n,r)=>`${n.eventTimestamp}-${r}`;T(()=>{b&&(c.some(n=>{const r=u[n.index];return I(r,n.index)===b})||L(null))},[c,b,u]);const W=c.length>0?c[0].start:0,E=c.length>0?f.getTotalSize()-c[c.length-1].end:0;return!i&&u.length===0?e(oe,{}):e(m,{sx:{width:"100%",flex:1,minHeight:0},children:e(Q,{component:Z,ref:C,sx:{flex:1,scrollbarGutter:"stable",minHeight:500},children:s(_,{size:"small",stickyHeader:!0,sx:{minWidth:1230,tableLayout:"fixed"},children:[e(J,{children:s(x,{children:[e(t,{sx:{width:32,bgcolor:"background.paper"}}),D.map(n=>e(t,{sx:{textAlign:n.align,width:n.width},children:e(a,{sx:{textTransform:"uppercase"},variant:"subtitle2",children:n.label})},n.label))]})}),s(X,{children:[i&&u.length===0&&e(x,{children:e(t,{colSpan:10,sx:{textAlign:"center",py:2},children:e(a,{color:"text.secondary",children:"Loading..."})})}),g&&e(x,{sx:{position:"sticky",top:37,zIndex:1,pointerEvents:"none"},children:e(t,{colSpan:10,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderBottom:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e($,{size:12}),e(a,{variant:"caption",color:"text.secondary",children:"Loading newer logs"})]})})}),W>0&&e("tr",{children:e("td",{style:{height:W,padding:0,border:"none"}})}),c.map(n=>{const r=u[n.index],P=I(r,n.index),w=b===P;return s(q.Fragment,{children:[s(x,{"data-index":n.index,ref:f.measureElement,onClick:()=>L(w?null:P),hover:!0,sx:{cursor:"pointer","& > td":{borderBottom:w?"none":void 0}},children:[e(t,{sx:{width:32,px:1},children:e(m,{alignItems:"center",justifyContent:"center",height:"100%",children:e(de,{statusCode:r.statusCode,errorCode:r.errorCode})})}),e(t,{sx:{whiteSpace:"nowrap"},children:e(a,{variant:"body2",color:"text.secondary",sx:p,children:ie(r.eventTimestamp,F)})}),e(t,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",children:[e(a,{variant:"body2",color:"text.secondary",sx:p,children:r.phone??"\u2014"}),r.phone&&e(N,{value:r.phone,label:"Phone",onCopy:z})]})}),e(t,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",overflow:"hidden",children:[e(a,{variant:"body2",color:"text.secondary",noWrap:!0,sx:p,children:ce(r.uuid)}),r.uuid&&e(N,{value:r.uuid,label:"1-Click UUID",onCopy:z})]})}),e(t,{children:e(A,{label:r.source.toUpperCase(),size:"small",variant:"filled",sx:{fontWeight:600,fontSize:12,minWidth:40,bgcolor:r.source==="sdk"?"#4FC3F7":"primary.main",color:"white"}})}),e(t,{children:e(ue,{label:le[r.product],variant:"outlined",sx:{fontSize:13,fontWeight:600,minWidth:110}})}),e(t,{children:e(pe,{text:he(r)})}),e(t,{sx:{textAlign:"right"},children:e(a,{variant:"body2",sx:{...p,color:r.source==="sdk"?"text.secondary":r.statusCode>=400?"error.main":"success.main"},children:r.source==="sdk"?"\u2014":r.statusCode})}),e(t,{sx:{textAlign:"right"},children:e(a,{variant:"body2",color:"text.secondary",sx:p,children:r.source==="sdk"||!r.latencyMs?"\u2014":`${r.latencyMs}ms`})}),e(t,{children:r.errorCode?e(a,{variant:"body2",sx:{...p,color:"error.main"},children:r.errorCode}):e(a,{variant:"body2",color:"text.secondary",sx:p,children:"\u2014"})})]}),w&&e(x,{children:e(t,{colSpan:10,sx:{py:0,px:1,borderTop:"none",bgcolor:"grey.50"},children:e(ae,{log:r})})})]},n.key)}),E>0&&e("tr",{children:e("td",{style:{height:E,padding:0,border:"none"}})}),d&&e(x,{sx:{position:"sticky",bottom:0,zIndex:1,pointerEvents:"none"},children:e(t,{colSpan:10,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderTop:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e($,{size:12}),e(a,{variant:"caption",color:"text.secondary",children:"Loading older logs"})]})})})]})]})})})}export{ge as LogsTable};
|
package/package.json
CHANGED