@odigos/ui-kit 0.0.118-dev.384 → 0.0.118-dev.385
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/lib/containers.js +1 -1
- package/package.json +1 -1
package/lib/containers.js
CHANGED
|
@@ -49,7 +49,7 @@ import e,{useState as t,useEffect as o,forwardRef as i,useRef as n,useImperative
|
|
|
49
49
|
width: 100%;
|
|
50
50
|
height: ${({$heightToRemove:e})=>`calc(100vh - ${e}px)`};
|
|
51
51
|
position: relative;
|
|
52
|
-
`,un=({heightToRemove:t,metrics:i})=>{const n=I.useTheme(),{isVm:a}=He(),r=he(),{selectedStreamName:s}=ze(),{isAwaitingInstrumentation:c}=We(),{containerRef:d,containerWidth:u,containerHeight:m}=je(),{sources:h,sourcesLoading:g,destinations:y,destinationsLoading:v,actions:f,actionsLoading:b,instrumentationRules:x,instrumentationRulesLoading:C}=B(),[$,k,S]=Xo([]),[w,D,N]=Zo([]);o(()=>D((({theme:e,isVm:t,nodes:o,metrics:i,containerHeight:n})=>{const a=[],l=o.find(({id:e})=>(t?[`${j.Namespace}-${Ee.OdiLogo}`]:[`${j.Action}-${Ee.Frame}`,`${j.Action}-${Ee.Add}`]).includes(e))?.id,r=-Wi/2+ji,s=Math.floor(n/Wi)*Wi-(Wi/2+ji),c=e=>e===Ee.Base||e===Ee.Edged;return o.forEach(({type:t,id:o,data:{type:n,id:d,status:u},position:p})=>{if(n===j.Source&&c(t)){const{namespace:t,name:n,kind:c}=d,m=i?.sources.find(e=>e.kind===c&&e.name===n&&e.namespace===t);p.y>=r&&p.y<=s&&a.push(Vi(`${o}-to-${l}`,{theme:e,animated:!1,isMultiTarget:!1,label:Oe(m?.throughput),isError:u===V.Error}))}if(n===j.Destination&&c(t)){const t=i?.destinations.find(e=>e.id===d);p.y>=r&&p.y<=s&&a.push(Vi(`${l}-to-${o}`,{theme:e,animated:!1,isMultiTarget:!0,label:Oe(t?.throughput),isError:u===V.Error}))}}),a})({theme:n,isVm:a,nodes:$,metrics:i,containerHeight:m})),[n,a,$,i,m]);const T=l(()=>(({isVm:e,containerWidth:t})=>{const o=(!e&&t<=1500?1500:t)-nn-24,i=e=>an*((e||0)+1),n={[j.Namespace]:{x:0,y:()=>0},[j.InstrumentationRule]:{x:24,y:i},[j.Source]:{x:Pe(t,[[0,1600,o/3.5],[1600,null,o/4]]),y:i},[j.Action]:{x:Pe(t,[[0,1600,o/1.55],[1600,null,o/1.6]]),y:i},[j.Destination]:{x:o,y:i}},a={[j.Namespace]:{x:o/2+100,y:()=>i(2)},[j.InstrumentationRule]:{x:0,y:()=>0},[j.Source]:{x:24,y:i},[j.Action]:{x:0,y:()=>0},[j.Destination]:{x:o,y:i}};return e?a:n})({isVm:a,containerWidth:u}),[a,u]),E=(e,t)=>{k(o=>{const i=[...o].filter(({id:e})=>e.split("-")[0]!==t);return i.push(...e),i})},O=(e,t,o)=>{k(i=>ei(e.filter(e=>"parent"===e.extent&&e.parentId===`${t}-${Ee.Scroll}`).map(e=>({id:e.id,type:"position",position:{...e.position,y:e.position.y-o}})),i))};return o(()=>{const e=Ve(h,s),t=(({isVm:e,loading:t,entities:o,positions:i,unfilteredCount:n,containerHeight:a,onScroll:l})=>{const r=[],s=i[j.Source],c=o.length!==n;return r.push({id:`${j.Source}-${Ee.Header}`,type:Ee.Header,position:{x:i[j.Source].x,y:0},data:{nodeWidth:Zi,title:p.SOURCES,icon:$e(j.Source),badge:c?`${o.length}/${n}`:n,badgeTooltip:c?p.FILTERED_COUNT_TOOLTIP:void 0,isFetching:t,sources:o}}),o.length?(r.push({id:`${j.Source}-${Ee.Scroll}`,type:Ee.Scroll,position:{x:s.x,y:s.y()-tn},style:{zIndex:1},data:{nodeWidth:Zi,nodeHeight:a-en+2*tn,items:o.map((t,o)=>({id:`${j.Source}-${o}`,data:on(e,t)})),onScroll:l}}),o.forEach((t,o)=>{r.push({id:`${j.Source}-${o}-hidden`,type:Ee.Edged,extent:"parent",parentId:`${j.Source}-${Ee.Scroll}`,position:{x:tn,y:s.y(o)-(en-tn/2)},style:{zIndex:-1},data:on(e,t)})})):t?r.push({id:`${j.Source}-${Ee.Skeleton}`,type:Ee.Skeleton,position:{x:s.x,y:s.y()},data:{nodeWidth:Zi}}):r.push({id:`${j.Source}-${Ee.Add}`,type:Ee.Add,position:{x:s.x,y:s.y()},data:{nodeWidth:Zi,type:Fe.AddSource,title:p.ADD_SOURCE,subTitle:p.TO_COLLECT_OTEL_DATA}}),r})({isVm:a,entities:Be(e,r),loading:g||c,unfilteredCount:e.length,positions:T,containerHeight:m,onScroll:({scrollTop:e})=>O(t,j.Source,e)});E(t,j.Source)},[a,s,h,g,c,T[j.Source],r,m]),o(()=>{const e=Ue(y,s),t=
|
|
52
|
+
`,un=({heightToRemove:t,metrics:i})=>{const n=I.useTheme(),{isVm:a}=He(),r=he(),{selectedStreamName:s}=ze(),{isAwaitingInstrumentation:c}=We(),{containerRef:d,containerWidth:u,containerHeight:m}=je(),{sources:h,sourcesLoading:g,destinations:y,destinationsLoading:v,actions:f,actionsLoading:b,instrumentationRules:x,instrumentationRulesLoading:C}=B(),[$,k,S]=Xo([]),[w,D,N]=Zo([]);o(()=>D((({theme:e,isVm:t,nodes:o,metrics:i,containerHeight:n})=>{const a=[],l=o.find(({id:e})=>(t?[`${j.Namespace}-${Ee.OdiLogo}`]:[`${j.Action}-${Ee.Frame}`,`${j.Action}-${Ee.Add}`]).includes(e))?.id,r=-Wi/2+ji,s=Math.floor(n/Wi)*Wi-(Wi/2+ji),c=e=>e===Ee.Base||e===Ee.Edged;return o.forEach(({type:t,id:o,data:{type:n,id:d,status:u},position:p})=>{if(n===j.Source&&c(t)){const{namespace:t,name:n,kind:c}=d,m=i?.sources.find(e=>e.kind===c&&e.name===n&&e.namespace===t);p.y>=r&&p.y<=s&&a.push(Vi(`${o}-to-${l}`,{theme:e,animated:!1,isMultiTarget:!1,label:Oe(m?.throughput),isError:u===V.Error}))}if(n===j.Destination&&c(t)){const t=i?.destinations.find(e=>e.id===d);p.y>=r&&p.y<=s&&a.push(Vi(`${l}-to-${o}`,{theme:e,animated:!1,isMultiTarget:!0,label:Oe(t?.throughput),isError:u===V.Error}))}}),a})({theme:n,isVm:a,nodes:$,metrics:i,containerHeight:m})),[n,a,$,i,m]);const T=l(()=>(({isVm:e,containerWidth:t})=>{const o=(!e&&t<=1500?1500:t)-nn-24,i=e=>an*((e||0)+1),n={[j.Namespace]:{x:0,y:()=>0},[j.InstrumentationRule]:{x:24,y:i},[j.Source]:{x:Pe(t,[[0,1600,o/3.5],[1600,null,o/4]]),y:i},[j.Action]:{x:Pe(t,[[0,1600,o/1.55],[1600,null,o/1.6]]),y:i},[j.Destination]:{x:o,y:i}},a={[j.Namespace]:{x:o/2+100,y:()=>i(2)},[j.InstrumentationRule]:{x:0,y:()=>0},[j.Source]:{x:24,y:i},[j.Action]:{x:0,y:()=>0},[j.Destination]:{x:o,y:i}};return e?a:n})({isVm:a,containerWidth:u}),[a,u]),E=(e,t)=>{k(o=>{const i=[...o].filter(({id:e})=>e.split("-")[0]!==t);return i.push(...e),i})},O=(e,t,o)=>{k(i=>ei(e.filter(e=>"parent"===e.extent&&e.parentId===`${t}-${Ee.Scroll}`).map(e=>({id:e.id,type:"position",position:{...e.position,y:e.position.y-o}})),i))};return o(()=>{const e=Ve(h,s),t=(({isVm:e,loading:t,entities:o,positions:i,unfilteredCount:n,containerHeight:a,onScroll:l})=>{const r=[],s=i[j.Source],c=o.length!==n;return r.push({id:`${j.Source}-${Ee.Header}`,type:Ee.Header,position:{x:i[j.Source].x,y:0},data:{nodeWidth:Zi,title:p.SOURCES,icon:$e(j.Source),badge:c?`${o.length}/${n}`:n,badgeTooltip:c?p.FILTERED_COUNT_TOOLTIP:void 0,isFetching:t,sources:o}}),o.length?(r.push({id:`${j.Source}-${Ee.Scroll}`,type:Ee.Scroll,position:{x:s.x,y:s.y()-tn},style:{zIndex:1},data:{nodeWidth:Zi,nodeHeight:a-en+2*tn,items:o.map((t,o)=>({id:`${j.Source}-${o}`,data:on(e,t)})),onScroll:l}}),o.forEach((t,o)=>{r.push({id:`${j.Source}-${o}-hidden`,type:Ee.Edged,extent:"parent",parentId:`${j.Source}-${Ee.Scroll}`,position:{x:tn,y:s.y(o)-(en-tn/2)},style:{zIndex:-1},data:on(e,t)})})):t?r.push({id:`${j.Source}-${Ee.Skeleton}`,type:Ee.Skeleton,position:{x:s.x,y:s.y()},data:{nodeWidth:Zi}}):r.push({id:`${j.Source}-${Ee.Add}`,type:Ee.Add,position:{x:s.x,y:s.y()},data:{nodeWidth:Zi,type:Fe.AddSource,title:p.ADD_SOURCE,subTitle:p.TO_COLLECT_OTEL_DATA}}),r})({isVm:a,entities:Be(e,r),loading:g||c,unfilteredCount:e.length,positions:T,containerHeight:m,onScroll:({scrollTop:e})=>O(t,j.Source,e)});E(t,j.Source)},[a,s,h,g,c,T[j.Source],r,m]),o(()=>{const e=Ue(y,s),t=(({loading:e,entities:t,positions:o,unfilteredCount:i,containerHeight:n,onScroll:a})=>{const l=[],r=o[j.Destination];return l.push({id:`${j.Destination}-${Ee.Header}`,type:Ee.Header,position:{x:o[j.Destination].x,y:0},data:{nodeWidth:ln,title:p.DESTINATIONS,icon:$e(j.Destination),badge:i,isFetching:e}}),t.length?(l.push({id:`${j.Destination}-${Ee.Scroll}`,type:Ee.Scroll,position:{x:r.x,y:r.y()-sn},style:{zIndex:1},data:{nodeWidth:ln,nodeHeight:n-rn+2*sn,items:t.map((e,t)=>({id:`${j.Destination}-${t}`,data:cn(e)})),onScroll:a}}),t.forEach((e,t)=>{l.push({id:`${j.Destination}-${t}-hidden`,type:Ee.Edged,extent:"parent",parentId:`${j.Destination}-${Ee.Scroll}`,position:{x:sn,y:r.y(t)-(rn-sn/2)},style:{zIndex:-1},data:cn(e)})})):e?l.push({id:`${j.Destination}-${Ee.Skeleton}`,type:Ee.Skeleton,position:{x:r.x,y:r.y()},data:{nodeWidth:ln}}):l.push({id:`${j.Destination}-${Ee.Add}`,type:Ee.Add,position:{x:r.x,y:r.y()},data:{nodeWidth:ln,type:Fe.AddDestination,title:p.ADD_DESTINATION,subTitle:p.TO_MONITOR_OTEL_DATA}}),l})({entities:_e(e,r),loading:v,unfilteredCount:e.length,positions:T,containerHeight:m,onScroll:({scrollTop:e})=>O(t,j.Destination,e)});E(t,j.Destination)},[a,s,y,v,T[j.Destination],r,m]),o(()=>{const e=a?[]:(({loading:e,entities:t,positions:o,unfilteredCount:i,containerHeight:n,onScroll:a})=>{const l=[],r=o[j.Action];return l.push({id:`${j.Action}-${Ee.Header}`,type:Ee.Header,position:{x:o[j.Action].x,y:0},data:{nodeWidth:Ji,title:p.ACTIONS,icon:$e(j.Action),badge:i,isFetching:e}}),t.length?(l.push({id:`${j.Action}-${Ee.Scroll}`,type:Ee.Scroll,position:{x:r.x,y:r.y()-Qi},style:{zIndex:1},data:{nodeWidth:Ji,nodeHeight:n-Yi+2*Qi,items:t.map((e,t)=>({id:`${j.Action}-${t}`,data:Xi(e)})),onScroll:a}}),t.forEach((e,t)=>{l.push({id:`${j.Action}-${t}-hidden`,type:Ee.Edged,extent:"parent",parentId:`${j.Action}-${Ee.Scroll}`,position:{x:Qi,y:r.y(t)-(Yi-Qi/2)},style:{zIndex:-1},data:Xi(e)})}),l.push({id:`${j.Action}-${Ee.Frame}`,type:Ee.Frame,position:{x:r.x-Qi,y:r.y()-Qi},data:{nodeWidth:Ji+2*Qi,nodeHeight:Math.min(n,Yi*t.length+Qi)}})):e?l.push({id:`${j.Action}-${Ee.Skeleton}`,type:Ee.Skeleton,position:{x:r.x,y:r.y()},data:{nodeWidth:Ji}}):l.push({id:`${j.Action}-${Ee.Add}`,type:Ee.Add,position:{x:r.x,y:r.y()},data:{nodeWidth:Ji,type:Fe.AddAction,title:p.ADD_ACTION,subTitle:p.TO_MODIFY_OTEL_DATA}}),l})({entities:ge(f,r),loading:b,unfilteredCount:f.length,positions:T,containerHeight:m,onScroll:({scrollTop:t})=>O(e,j.Action,t)});E(e,j.Action)},[a,f,b,T[j.Action],r,m]),o(()=>{const e=a?[]:(({loading:e,entities:t,positions:o,unfilteredCount:i,containerHeight:n,onScroll:a})=>{const l=[],r=o[j.InstrumentationRule];return l.push({id:`${j.InstrumentationRule}-${Ee.Header}`,type:Ee.Header,position:{x:o[j.InstrumentationRule].x,y:0},data:{nodeWidth:Bi,title:p.INSTRUMENTATION_RULES,icon:$e(j.InstrumentationRule),badge:i,isFetching:e}}),t.length?(l.push({id:`${j.InstrumentationRule}-${Ee.Scroll}`,type:Ee.Scroll,position:{x:r.x,y:r.y()-_i},style:{zIndex:1},data:{nodeWidth:Bi,nodeHeight:n-Ui+2*_i,items:t.map((e,t)=>({id:`${j.InstrumentationRule}-${t}`,data:Gi(e)})),onScroll:a}}),t.forEach((e,t)=>{l.push({id:`${j.InstrumentationRule}-${t}-hidden`,type:Ee.Edged,extent:"parent",parentId:`${j.InstrumentationRule}-${Ee.Scroll}`,position:{x:_i,y:r.y(t)-(Ui-_i/2)},style:{zIndex:-1},data:Gi(e)})})):e?l.push({id:`${j.InstrumentationRule}-${Ee.Skeleton}`,type:Ee.Skeleton,position:{x:r.x,y:r.y()},data:{nodeWidth:Bi}}):l.push({id:`${j.InstrumentationRule}-${Ee.Add}`,type:Ee.Add,position:{x:r.x,y:r.y()},data:{nodeWidth:Bi,type:Fe.AddRule,title:p.ADD_INSTRUMENTATION_RULE,subTitle:p.TO_MODIFY_OTEL_DATA}}),l})({entities:x,loading:C,unfilteredCount:x.length,positions:T,containerHeight:m,onScroll:({scrollTop:t})=>O(e,j.InstrumentationRule,t)});E(e,j.InstrumentationRule)},[a,x,C,T[j.InstrumentationRule],m]),o(()=>{const e=(({isVm:e,positions:t})=>{const o=[];if(!e)return o;const i=t[j.Namespace];return o.push({id:`${j.Namespace}-${Ee.OdiLogo}`,type:Ee.OdiLogo,position:{x:i.x,y:i.y()},data:{}}),o})({isVm:a,positions:T});E(e,j.Namespace)},[a,T[j.Namespace],m]),e.createElement(dn,{ref:d,$heightToRemove:t},e.createElement(Ge,{nodes:$,edges:w,onNodesChange:S,onEdgesChange:N}))},pn=d.div`
|
|
53
53
|
position: relative;
|
|
54
54
|
max-width: 200px;
|
|
55
55
|
`;d.div`
|