@verifiedinc-public/shared-ui-elements 9.9.2-beta.2 → 9.9.2-beta.4

package/dist/components/CopyableUuid/index.mjs

@@ -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 _}from"../../hooks/useCopyToClipboard.mjs";import{useSnackbar as $}from"../Snackbar/index.mjs";import{jsx as r,jsxs as B}from"react/jsx-runtime";function S(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 z({uuid:o,label:t="UUID",head:e=4,tail:d=4,variant:y="button",placeholder:b="\u2014",mono:f=!0,typographyProps:m,iconSx:x,sx:n}){const{copy:h}=_({type:"text/plain"}),{enqueueSnackbar:g}=$(),{sx:a,...i}=m??{},l=f?{fontFamily:"monospace"}:{};if(!o)return r(s,{variant:"body2",color:"text.secondary",...i,sx:[l,a,n].filter(Boolean),children:b});const p=S(o,e,d),u=async c=>{c.stopPropagation();try{await h(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 r(s,{component:"button",type:"button",variant:"body2","aria-label":`Copy ${t}`,onClick:u,...i,sx:[l,c,a,n].filter(Boolean),children:p})}return B(v,{direction:"row",alignItems:"center",sx:{"& .copyable-uuid__btn":{opacity:0},"&:hover .copyable-uuid__btn":{opacity:1},...n},children:[r(s,{variant:"body2",color:"text.secondary",noWrap:!0,...i,sx:[l,a].filter(Boolean),children:p}),r(k,{className:"copyable-uuid__btn",size:"small","aria-label":`Copy ${t}`,onClick:u,sx:[{p:.25,ml:.5},x].filter(Boolean),children:r(C,{sx:{fontSize:13}})})]})}export{z as CopyableUuid};
+"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};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as k,Paper as x,Table as B,TableHead as C,TableRow as h,TableCell as i,TableBody as S,TableSortLabel as U}from"@mui/material";import{useMemo as p}from"react";import{EmptyChartSection as D}from"../EmptyChartSection.mjs";import{LoadingChartSection as L}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as v}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as I}from"../BillableEventsTable/useBillableSort.hook.mjs";import{CopyableUuid as E}from"../../CopyableUuid/index.mjs";import{white as P}from"../../../styles/colors.mjs";import{jsx as e,jsxs as d}from"react/jsx-runtime";const w=["brand","integrationType"],R=({data:n,isLoading:b,isFetching:u,product:s,columnSlots:o})=>{const{sortKey:c,sortDir:g,handleSort:y,sortedData:T}=I(n,w,"brand"),l=p(()=>v.find(a=>a.product===s),[s]),m=p(()=>l?.columns??[],[l]),t=(a,r,f="left")=>e(U,{active:c===a,direction:c===a?g:"asc",onClick:()=>y(a),sx:f==="right"?{flexDirection:"row"}:void 0,children:r});return!(n!=null&&n.length)&&b?e(L,{}):n!=null&&n.length?e(k,{component:x,sx:{opacity:u?.4:1},children:d(B,{sx:{backgroundColor:P},children:[e(C,{children:d(h,{children:[e(i,{children:t("brand","Brand Name")}),e(i,{children:"Brand UUID"}),e(i,{children:t("integrationType","Integration Type")}),m.map(a=>e(i,{align:"right",children:t(a.key,a.label,"right")},a.key))]})}),e(S,{children:T.map(a=>d(h,{children:[e(i,{children:a.brand}),e(i,{children:e(E,{uuid:a.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"}})}),e(i,{children:a.integrationType}),m.map(r=>e(i,{align:"right",children:o!=null&&o[r.key]?o[r.key](a):a.metrics[r.key]??0},r.key))]},a.brandUuid))})]})}):e(D,{})};export{R as BillableEventsProductTable};
+"use strict";import{TableContainer as k,Paper as x,Table as B,TableHead as C,TableRow as h,TableCell as i,TableBody as S,TableSortLabel as U}from"@mui/material";import{useMemo as p}from"react";import{EmptyChartSection as v}from"../EmptyChartSection.mjs";import{LoadingChartSection as D}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as L}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as I}from"../BillableEventsTable/useBillableSort.hook.mjs";import{CopyableUuid as P}from"../../CopyableUuid/index.mjs";import{white as E}from"../../../styles/colors.mjs";import{jsx as e,jsxs as d}from"react/jsx-runtime";const w=["brand","integrationType"],R=({data:o,isLoading:b,isFetching:u,product:s,columnSlots:n})=>{const{sortKey:c,sortDir:g,handleSort:y,sortedData:T}=I(o,w,"brand"),l=p(()=>L.find(a=>a.product===s),[s]),m=p(()=>l?.columns??[],[l]),t=(a,r,f="left")=>e(U,{active:c===a,direction:c===a?g:"asc",onClick:()=>y(a),sx:f==="right"?{flexDirection:"row"}:void 0,children:r});return!(o!=null&&o.length)&&b?e(D,{}):o!=null&&o.length?e(k,{component:x,sx:{opacity:u?.4:1},children:d(B,{sx:{backgroundColor:E},children:[e(C,{children:d(h,{children:[e(i,{children:t("brand","Brand Name")}),e(i,{children:"Brand UUID"}),e(i,{children:t("integrationType","Integration Type")}),m.map(a=>e(i,{align:"right",children:t(a.key,a.label,"right")},a.key))]})}),e(S,{children:T.map(a=>d(h,{children:[e(i,{children:a.brand}),e(i,{children:e(P,{uuid:a.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"},typographyProps:{variant:"inherit",color:"inherit"}})}),e(i,{children:a.integrationType}),m.map(r=>e(i,{align:"right",children:n!=null&&n[r.key]?n[r.key](a):a.metrics[r.key]??0},r.key))]},a.brandUuid))})]})}):e(v,{})};export{R as BillableEventsProductTable};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.mjs

@@ -1 +1 @@
-"use strict";import{TableContainer as C,Paper as x,Table as w,TableHead as U,TableRow as u,TableCell as a,TableBody as v,TableSortLabel as D}from"@mui/material";import{useEffect as L,useMemo as b}from"react";import{EmptyChartSection as E}from"../EmptyChartSection.mjs";import{LoadingChartSection as I}from"../LoadingChartSection.mjs";import{BillableProduct as P,BILLABLE_PRODUCTS as j}from"./BillableEventsTable.types.mjs";import{useBillableSort as M}from"./useBillableSort.hook.mjs";import{CopyableUuid as O}from"../../CopyableUuid/index.mjs";import{white as R}from"../../../styles/colors.mjs";import{jsx as r,jsxs as s}from"react/jsx-runtime";const K=["brand","integrationType"],_=({data:o,isLoading:f,isFetching:S,visibleProducts:y,onSortedDataChange:d,columnSlots:l,topLevelColumns:t=[]})=>{const{sortKey:g,sortDir:T,handleSort:B,sortedData:c}=M(o,K,"brand");L(()=>{d?.(c)},[c,d]);const m=b(()=>{const e=y??Object.values(P);return j.filter(n=>e.includes(n.product))},[y]),h=b(()=>new Set(t.map(e=>e.key)),[t]),k=b(()=>m.flatMap(e=>e.columns).filter(e=>!h.has(e.key)),[m,h]),i=(e,n,p="left")=>r(D,{active:g===e,direction:g===e?T:"asc",onClick:()=>B(e),sx:p==="right"?{flexDirection:"row"}:void 0,children:n});return!(o!=null&&o.length)&&f?r(I,{}):o!=null&&o.length?r(C,{component:x,sx:{opacity:S?.4:1},children:s(w,{sx:{backgroundColor:R},children:[s(U,{children:[s(u,{children:[r(a,{rowSpan:2,children:i("brand","Brand Name")}),r(a,{rowSpan:2,children:"Brand UUID"}),r(a,{rowSpan:2,children:i("integrationType","Integration Type")}),t.map(e=>r(a,{rowSpan:2,children:i(e.key,e.label)},e.key)),m.map(e=>{const n=e.columns.filter(p=>!h.has(p.key)).length;return n===0?null:r(a,{colSpan:n,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:e.label},e.product)})]}),r(u,{children:k.map(e=>r(a,{align:"right",children:i(e.key,e.label,"right")},e.key))})]}),r(v,{children:c.map(e=>s(u,{children:[r(a,{children:e.brand}),r(a,{children:r(O,{uuid:e.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"}})}),r(a,{children:e.integrationType}),t.map(n=>r(a,{children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key)),k.map(n=>r(a,{align:"right",children:l!=null&&l[n.key]?l[n.key](e):e.metrics[n.key]??0},n.key))]},e.brandUuid))})]})}):r(E,{})};export{_ as BillableEventsTable};
+"use strict";import{TableContainer as C,Paper as x,Table as v,TableHead as w,TableRow as u,TableCell as a,TableBody as U,TableSortLabel as D}from"@mui/material";import{useEffect as L,useMemo as b}from"react";import{EmptyChartSection as P}from"../EmptyChartSection.mjs";import{LoadingChartSection as E}from"../LoadingChartSection.mjs";import{BillableProduct as I,BILLABLE_PRODUCTS as j}from"./BillableEventsTable.types.mjs";import{useBillableSort as M}from"./useBillableSort.hook.mjs";import{CopyableUuid as O}from"../../CopyableUuid/index.mjs";import{white as R}from"../../../styles/colors.mjs";import{jsx as e,jsxs as s}from"react/jsx-runtime";const K=["brand","integrationType"],_=({data:l,isLoading:f,isFetching:S,visibleProducts:y,onSortedDataChange:d,columnSlots:o,topLevelColumns:t=[]})=>{const{sortKey:g,sortDir:T,handleSort:B,sortedData:c}=M(l,K,"brand");L(()=>{d?.(c)},[c,d]);const h=b(()=>{const r=y??Object.values(I);return j.filter(n=>r.includes(n.product))},[y]),m=b(()=>new Set(t.map(r=>r.key)),[t]),k=b(()=>h.flatMap(r=>r.columns).filter(r=>!m.has(r.key)),[h,m]),i=(r,n,p="left")=>e(D,{active:g===r,direction:g===r?T:"asc",onClick:()=>B(r),sx:p==="right"?{flexDirection:"row"}:void 0,children:n});return!(l!=null&&l.length)&&f?e(E,{}):l!=null&&l.length?e(C,{component:x,sx:{opacity:S?.4:1},children:s(v,{sx:{backgroundColor:R},children:[s(w,{children:[s(u,{children:[e(a,{rowSpan:2,children:i("brand","Brand Name")}),e(a,{rowSpan:2,children:"Brand UUID"}),e(a,{rowSpan:2,children:i("integrationType","Integration Type")}),t.map(r=>e(a,{rowSpan:2,children:i(r.key,r.label)},r.key)),h.map(r=>{const n=r.columns.filter(p=>!m.has(p.key)).length;return n===0?null:e(a,{colSpan:n,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:r.label},r.product)})]}),e(u,{children:k.map(r=>e(a,{align:"right",children:i(r.key,r.label,"right")},r.key))})]}),e(U,{children:c.map(r=>s(u,{children:[e(a,{children:r.brand}),e(a,{children:e(O,{uuid:r.brandUuid,label:"Brand UUID",variant:"button",head:6,tail:0,mono:!1,iconSx:{color:"success.main"},typographyProps:{variant:"inherit",color:"inherit"}})}),e(a,{children:r.integrationType}),t.map(n=>e(a,{children:o!=null&&o[n.key]?o[n.key](r):r.metrics[n.key]??0},n.key)),k.map(n=>e(a,{align:"right",children:o!=null&&o[n.key]?o[n.key](r):r.metrics[n.key]??0},n.key))]},r.brandUuid))})]})}):e(P,{})};export{_ as BillableEventsTable};

package/dist/components/logs/LogsTable/LogsTable.mjs

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

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "9.9.2-beta.2",
+  "version": "9.9.2-beta.4",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,