@odigos/ui-kit 0.0.131 → 0.0.132
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.0.132](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.131...ui-kit-v0.0.132) (2025-12-03)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* handle undefined values in gateway and node collector data retrieval ([#491](https://github.com/odigos-io/ui-kit/issues/491)) ([8f20271](https://github.com/odigos-io/ui-kit/commit/8f2027113b63742d26200050263d9983d321095f))
|
|
9
|
+
|
|
3
10
|
## [0.0.131](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.130...ui-kit-v0.0.131) (2025-12-03)
|
|
4
11
|
|
|
5
12
|
|
package/lib/containers/v2.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{useState as a,useEffect as
|
|
1
|
+
import e,{useState as a,useEffect as l,useMemo as t,useCallback as i}from"react";import{T as s,u as o,a as n,g as r,b as d,D as c,C as u,F as g,S as b,c as p,d as m,e as y,I as k,f as C,B as w,h as v,i as f,j as h,k as L,l as x,m as P,n as R,o as I,p as D,q as M,O as $,W as A,P as N}from"../chunks/ui-components-c940a3cc.js";import S from"styled-components";import{PodIcon as T,ChevronUpIcon as V,ChevronDownIcon as z,YamlIcon as j,VIcon as O,CopyIcon as U,PipelineCollectorIcon as E,DownloadIcon as H,RefreshIcon as q,GatewayIcon as G}from"../icons.js";import"zustand";import"javascript-time-ago";import"../chunks/vendor-55cc654c.js";import"react-dom";import"@xyflow/react";import"prism-react-renderer";import"react-error-boundary";import"lottie-react";const Y=S.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: space-between;
|
|
@@ -8,8 +8,8 @@ import e,{useState as a,useEffect as t,useMemo as l,useCallback as i}from"react"
|
|
|
8
8
|
background-color: ${({theme:e})=>e.v2.colors.silver[800]};
|
|
9
9
|
`,F=S.div`
|
|
10
10
|
animation-name: ${s.animations.fade.in};
|
|
11
|
-
`,W=({pod:i,getExtendedPodInfo:s,onClose:h})=>{const{formatTimeAgo:L}=o(),{clickCopy:x,isCopied:P}=n(),[R,I]=a(null),[D,M]=a(!1);
|
|
11
|
+
`,W=({pod:i,getExtendedPodInfo:s,onClose:h})=>{const{formatTimeAgo:L}=o(),{clickCopy:x,isCopied:P}=n(),[R,I]=a(null),[D,M]=a(!1);l(()=>{i?s(i.namespace,i.name).then(I):(I(null),M(!1))},[i]);const $=t(()=>[{id:r(),title:"Node",label:R?.node??"-"},{id:r(),title:"Role",label:R?.role??"-"},{id:r(),title:"Status",badge:{status:d(R?.status),label:R?.status??"-"}}],[R]),A=t(()=>R?.containers?.map(e=>({id:r(),items:[{id:r(),title:"Container",label:e.name??"-"},{id:r(),title:"Status",badge:{status:d(e.status),label:e.status??"-"},label:e.startedAt?`(since ${L(e.startedAt)})`:""},{id:r(),title:"Image Version",label:e.image?.split(":")?.[1]??"-"},{id:r(),title:"Image Repository",label:e.image?.split(":")?.[0]??"-"},{id:r(),title:"Restarts",label:e.restarts.toString()},{id:r(),title:"State Reason",label:e.stateReason??"-"},{id:r(),title:"Resource Requests",label:`CPU ${e.resources.requests.cpu} • Memory ${e.resources.requests.memory}`},{id:r(),title:"Resource Limits",label:`CPU ${e.resources.limits.cpu} • Memory ${e.resources.limits.memory}`}]}))||[],[R]);return e.createElement(c,{isOpen:!!i,header:{icon:T,title:"Pod Information",onClose:h}},R?null:e.createElement(u,null,e.createElement(g,null)),R?e.createElement(e.Fragment,null,e.createElement(b,{icon:T,title:R.name},e.createElement(p,{$gap:24},e.createElement(m,{cellsPerRow:3,items:$}),A.length>0&&e.createElement(p,{$gap:12},e.createElement(Y,null,e.createElement(y,null,"Containers Overview"),e.createElement(k,{icon:D?V:z,onClick:()=>M(e=>!e)})),D&&A.map(({id:a,items:l})=>e.createElement(F,{key:a},e.createElement(m,{cellsPerRow:2,items:l})))))),e.createElement(b,{icon:j,title:"YAML",actions:[{id:r(),type:C.Button,props:{label:"",leftIcon:P?O:U,onClick:()=>x(R.manifestYAML),disabled:P,size:w.S,variant:v.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(f,{code:R.manifestYAML,language:"yaml",theme:"duotoneDark"})))):null)};var B;!function(e){e.PodName="podName",e.Ready="ready",e.Status="status",e.Restarts="restarts",e.NodeName="nodeName",e.Age="age",e.DockerImage="dockerImage"}(B||(B={}));const J=[{key:B.PodName,label:"Pod Name",sortable:!0},{key:B.Ready,label:"Ready",sortable:!0,textAlign:"right"},{key:B.Status,label:"Status",sortable:!0},{key:B.Restarts,label:"Restarts",sortable:!0,textAlign:"right"},{key:B.NodeName,label:"Node Name",sortable:!0},{key:B.Age,label:"Age",sortable:!0,textAlign:"right"},{key:B.DockerImage,label:"Docker Image",sortable:!0,textAlign:"right"}],K=({isLoading:l,tableRowsMaxHeight:i,pods:s,getExtendedPodInfo:n})=>{const{formatTimeAgo:r}=o(),[d,c]=a(null),u=t(()=>s.map(e=>({onClick:()=>c(e),cells:[{key:B.PodName,rawValue:e.name},{key:B.Ready,rawValue:e.ready},{key:B.Status,rawValue:e.status??"-"},{key:B.Restarts,rawValue:e.restartsCount},{key:B.NodeName,rawValue:e.nodeName},{key:B.Age,rawValue:r(e.creationTimestamp)},{key:B.DockerImage,rawValue:e.image}]})),[s]);return e.createElement(b,{icon:T,title:"Pods"},e.createElement(h,{maxHeight:i,isLoading:l,columns:J,rows:u}),e.createElement(W,{pod:d,getExtendedPodInfo:n,onClose:()=>c(null)}))};var Q;!function(e){e.Gateway="gateway",e.Node="node"}(Q||(Q={}));const X=[{value:Q.Gateway,label:"Gateway"},{value:Q.Node,label:"Node Collector"}],Z=S.div`
|
|
12
12
|
display: flex;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: space-between;
|
|
15
|
-
`,_=({selectedTab:a,setSelectedTab:
|
|
15
|
+
`,_=({selectedTab:a,setSelectedTab:l,onClickDownloadDiagnose:t,onClickRefresh:i,isLoading:s})=>e.createElement(Z,null,e.createElement(L,{$gap:12},e.createElement(L,{$gap:8},e.createElement(E,{size:32}),e.createElement(y,{size:x.M,weight:500},"Pipeline Collectors")),e.createElement(P,{options:X,selected:a,setSelected:l})),e.createElement(L,{$gap:8},t&&e.createElement(R,{label:"Download Diagnose",leftIcon:H,size:w.S,variant:v.Text,onClick:t}),i&&e.createElement(R,{label:"Refresh",leftIcon:q,size:w.S,variant:v.Text,onClick:i,loading:s}))),ee=({isOpen:a,onClose:l,title:t,yaml:i})=>{const{clickCopy:s,isCopied:o}=n();return e.createElement(c,{isOpen:a,header:{icon:G,title:t,onClose:l}},e.createElement(b,{icon:j,title:"YAML",actions:[{id:r(),type:C.Button,props:{label:"",leftIcon:o?O:U,onClick:()=>s(i),disabled:o,size:w.S,variant:v.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(f,{code:i,language:"yaml",theme:"duotoneDark"}))))},ae=({icon:l,title:t,badge:i,statusCard:s,textCards:o,yaml:n})=>{const[d,c]=a(!1);return e.createElement(b,{icon:l,title:t,badge:i,actions:[{id:r(),type:C.Button,props:{variant:v.Secondary,size:w.S,leftIcon:j,label:"View YAML",onClick:()=>c(!0)}}]},e.createElement(L,{$gap:16},e.createElement(I,{...s}),o.map(a=>e.createElement(D,{key:a.title,...a}))),e.createElement(ee,{isOpen:d,onClose:()=>c(!1),title:t,yaml:n}))},le=e=>{switch(e){case A.Healthy:return"All desired replicas are updated, available, and ready";case A.Updating:return"Workload is progressing towards desired state (e.g., updating pods)";case A.Degraded:return"Progressing but with availability issues (e.g., not enough available replicas)";case A.Failed:return"Progress deadline exceeded or an unrecoverable error occurred";case A.Down:return"No available replicas";case A.Unknown:return"Status cannot be determined from current signals";default:return"Status unknown"}},te=({tableRowsMaxHeight:s,getGatewayInfo:n,getGatewayPods:r,getNodeCollectorInfo:c,getNodeCollectorPods:u,getExtendedPodInfo:g})=>{const{formatTimeAgo:b}=o(),[p,m]=a(!1),[y,k]=a(Q.Gateway),[C,w]=a(null),[v,f]=a([]),[h,L]=a(null),[x,P]=a([]),R=i(async()=>{switch(m(!0),y){case Q.Gateway:w(await n()??null),f(await r()??[]);break;case Q.Node:L(await c()??null),P(await u()??[])}m(!1)},[y]);l(()=>{R().catch(e=>{})},[R]);const I=t(()=>(e=>{const a=X.find(a=>a.value===e);return a?.label??"Pipeline Collectors"})(y),[y]),D=t(()=>((e,a,l,t)=>{const i={status:$.Disabled,label:"No rollouts yet"};let s=!1,o=null;switch(e){case Q.Gateway:s=a?.rolloutInProgress??!1,o=a?.lastRolloutAt??null;break;case Q.Node:s=l?.rolloutInProgress??!1,o=l?.lastRolloutAt??null;break;default:return i}return s?{status:M.Info,label:"Rollout in progress",rightIcon:q,useSecondaryTone:!0}:o?{status:$.Disabled,label:`Last Rollout: ${t(o)}`}:i})(y,C,h,b),[C,h,y,b]),S=t(()=>((e,a,l,t)=>{if(t)return{status:M.Info,title:"Loading",description:"Fetching data..."};let i=$.Unknown,s=A.Unknown,o=le(A.Unknown);switch(e){case Q.Gateway:i=d(a?.status),s=a?.status??s,o=a?.status?le(a.status):o;break;case Q.Node:i=d(a?.status),s=l?.status??s,o=l?.status?le(l.status):o}return{status:i,title:s,description:o}})(y,C,h,p),[C,h,y,p]),T=t(()=>((e,a,l,t)=>{switch(e){case Q.Gateway:return[{title:"HPA Spec (Replicas)",cells:[{label:"Min.",value:a?.hpa.min.toString()??"-",isLoading:t},{label:"Max.",value:a?.hpa.max.toString()??"-",isLoading:t},{label:"Current",value:a?.hpa.current.toString()??"-",isLoading:t},{label:"Desired",value:a?.hpa.desired.toString()??"-",isLoading:t}]},{title:"Requests",cells:[{label:"CPU",value:a?.resources.requests.cpu??"-",isLoading:t},{label:"Memory",value:a?.resources.requests.memory??"-",isLoading:t}]},{title:"Limits",cells:[{label:"CPU",value:a?.resources.limits.cpu??"-",isLoading:t},{label:"Memory",value:a?.resources.limits.memory??"-",isLoading:t}]},{title:"Docker Image",cells:[{value:a?.imageVersion??"-",isLoading:t}]}];case Q.Node:return[{title:"Nodes",cells:[{label:"Desired",value:l?.nodes.desired.toString()??"-",isLoading:t},{label:"Ready",value:l?.nodes.ready.toString()??"-",isLoading:t}]},{title:"Requests",cells:[{label:"CPU",value:l?.resources.requests.cpu??"-",isLoading:t},{label:"Memory",value:l?.resources.requests.memory??"-",isLoading:t}]},{title:"Limits",cells:[{label:"CPU",value:l?.resources.limits.cpu??"-",isLoading:t},{label:"Memory",value:l?.resources.limits.memory??"-",isLoading:t}]},{title:"Docker Image",cells:[{value:l?.imageVersion??"-",isLoading:t}]}];default:return[]}})(y,C,h,p),[C,h,y,p]),V=t(()=>(y===Q.Gateway?C?.manifestYAML:h?.manifestYAML)??"",[C,h,y]),z=t(()=>y===Q.Gateway?v:x,[v,x,y]);return e.createElement(N,null,e.createElement(_,{isLoading:p,selectedTab:y,setSelectedTab:k,onClickDownloadDiagnose:void 0,onClickRefresh:R}),e.createElement(ae,{icon:G,title:I,badge:D,statusCard:S,textCards:T,yaml:V}),e.createElement(K,{isLoading:p,tableRowsMaxHeight:s,pods:z,getExtendedPodInfo:g}))};export{te as PipelineCollectors};
|
|
@@ -75,10 +75,10 @@ export interface PodInfo {
|
|
|
75
75
|
creationTimestamp: string;
|
|
76
76
|
image: string;
|
|
77
77
|
}
|
|
78
|
-
export type GetGatewayInfo = () => Promise<GatewayInfo>;
|
|
79
|
-
export type GetGatewayPods = () => Promise<PodInfo[]>;
|
|
80
|
-
export type GetNodeCollectorInfo = () => Promise<NodeCollectoInfo>;
|
|
81
|
-
export type GetNodeCollectorPods = () => Promise<PodInfo[]>;
|
|
78
|
+
export type GetGatewayInfo = () => Promise<GatewayInfo | undefined>;
|
|
79
|
+
export type GetGatewayPods = () => Promise<PodInfo[] | undefined>;
|
|
80
|
+
export type GetNodeCollectorInfo = () => Promise<NodeCollectoInfo | undefined>;
|
|
81
|
+
export type GetNodeCollectorPods = () => Promise<PodInfo[] | undefined>;
|
|
82
82
|
interface PodContainer {
|
|
83
83
|
name: string;
|
|
84
84
|
image: string | null;
|