@odigos/ui-kit 0.0.139 → 0.0.140

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.140](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.139...ui-kit-v0.0.140) (2025-12-10)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * loading & error on connection config drawer ([#517](https://github.com/odigos-io/ui-kit/issues/517)) ([6f9f898](https://github.com/odigos-io/ui-kit/commit/6f9f8988002d181abe07993237efcdc1b4b6851b))
9
+
3
10
  ## [0.0.139](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.138...ui-kit-v0.0.139) (2025-12-10)
4
11
 
5
12
 
@@ -1,18 +1,19 @@
1
1
  import { type FC, type Dispatch, type SetStateAction } from 'react';
2
2
  import { type Connection } from '@/types';
3
3
  import { DrawerProps } from '@/components/_v2';
4
- interface ConnectionConfigurationsFormData {
4
+ export interface ConnectionConfigurationsFormData {
5
5
  automaticRollout: boolean;
6
6
  }
7
- export type ApplyConfigurationsFunc = (connectionIds: string[], formData: ConnectionConfigurationsFormData) => Promise<void>;
7
+ export type ApplyConnectionsConfigurationsFunc = (connectionIds: string[], formData: ConnectionConfigurationsFormData) => Promise<{
8
+ error?: string;
9
+ }>;
8
10
  export interface ConfigDrawerProps {
9
11
  isOpen: boolean;
10
12
  onClose: DrawerProps['header']['onClose'];
11
13
  connections: Connection[];
12
14
  selectedConnectionIds: string[];
13
15
  setSelectedConnectionIds: Dispatch<SetStateAction<string[]>>;
14
- onApply: ApplyConfigurationsFunc;
16
+ onApply: ApplyConnectionsConfigurationsFunc;
15
17
  }
16
18
  export declare const CONFIG_DRAWER_WIDTH = "75vw";
17
19
  export declare const ConfigDrawer: FC<ConfigDrawerProps>;
18
- export {};
@@ -1,13 +1,14 @@
1
1
  import { type FC } from 'react';
2
2
  import { CSSProperties } from 'styled-components';
3
3
  import { type Connection } from '@/types';
4
- import { type ApplyConfigurationsFunc } from './config-drawer';
4
+ import { type ApplyConnectionsConfigurationsFunc } from './config-drawer';
5
+ export { type ApplyConnectionsConfigurationsFunc, type ConnectionConfigurationsFormData } from './config-drawer';
5
6
  export interface CentralConnectionsProps {
6
7
  tableRowsMaxHeight: CSSProperties['maxHeight'];
7
8
  connections?: Connection[];
8
9
  getConnections: () => Promise<Connection[]>;
9
10
  onClickConnection: (id: string) => void;
10
11
  deleteConnection: (id: string) => Promise<void>;
11
- applyConfigurations: ApplyConfigurationsFunc;
12
+ applyConfigurations: ApplyConnectionsConfigurationsFunc;
12
13
  }
13
14
  export declare const CentralConnections: FC<CentralConnectionsProps>;
@@ -1,4 +1,4 @@
1
- import e,{useState as a,useMemo as t,useCallback as l,useEffect as o}from"react";import i,{useTheme as n}from"styled-components";import{F as s,u as r,D as c,S as d,a as u,T as p,b as g,B as b,O as m,C as y,c as C,d as h,e as k,L as f,f as w,g as x,h as v,P as $,i as L,j as P,k as I,l as R,m as A,n as S,o as z,p as M,q as D,r as V,s as N,t as O,I as T,v as j,w as Y,x as F,y as H,N as U,z as E,A as q,W as G}from"../chunks/ui-components-eab2149b.js";import{ConnectionsIcon as W,OdigosLogo as B,RefreshIcon as K,SettingsIcon as J,DeleteIcon as Q,VIcon as X,XIcon as Z,PodIcon as _,ChevronUpIcon as ee,ChevronDownIcon as ae,TerminalIcon as te,YamlIcon as le,CopyIcon as oe,VSquareIcon as ie,XSquareIcon as ne,PipelineCollectorIcon as se,DownloadIcon as re,GatewayIcon as ce}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 de="75vw",ue=i.div`
1
+ import e,{useState as a,useMemo as t,useCallback as l,useEffect as o}from"react";import i,{useTheme as n}from"styled-components";import{F as s,u as r,D as c,S as d,a as u,T as p,b as g,B as b,O as m,C as y,c as C,d as h,e as k,L as f,f as w,g as v,h as x,P as $,i as L,j as P,k as I,l as R,m as A,n as z,o as S,p as M,q as D,r as V,s as N,t as O,I as T,v as j,w as Y,x as F,y as H,N as U,z as E,A as q,W as G}from"../chunks/ui-components-eab2149b.js";import{ConnectionsIcon as W,OdigosLogo as B,RefreshIcon as K,SettingsIcon as J,DeleteIcon as Q,VIcon as X,XIcon as Z,PodIcon as _,ChevronUpIcon as ee,ChevronDownIcon as ae,TerminalIcon as te,YamlIcon as le,CopyIcon as oe,VSquareIcon as ie,XSquareIcon as ne,PipelineCollectorIcon as se,DownloadIcon as re,GatewayIcon as ce}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 de="75vw",ue=i.div`
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  border-radius: 16px;
@@ -46,7 +46,7 @@ import e,{useState as a,useMemo as t,useCallback as l,useEffect as o}from"react"
46
46
  justify-content: flex-end;
47
47
  gap: 16px;
48
48
  padding: 0 24px;
49
- `,he=({isOpen:l,onClose:o,connections:i,selectedConnectionIds:s,setSelectedConnectionIds:v,onApply:$})=>{const L=n(),[P,I]=a(""),R=t(()=>i.filter(e=>!P||e.name.toLowerCase().includes(P.toLowerCase())),[i,P]),A=s.length>0,S=e=>{v(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},[z,M]=a(!1),{formData:D,handleFormChange:V,resetFormData:N}=r({automaticRollout:!0});return e.createElement(c,{isOpen:l,hideOverlay:!0,width:de,header:{icon:W,title:"Cluster Configuration",onClose:o}},e.createElement(ue,null,e.createElement(pe,null,e.createElement(d,{value:P,onChange:I})),e.createElement(ge,null,e.createElement(be,{$width:"40%"},e.createElement(u,{$padding:"0 12px",$justifyContent:"space-between"},e.createElement(u,{$gap:8},e.createElement(p,{size:g.XS},"Clusters"),e.createElement(b,{label:i.length,status:m.Unknown})),e.createElement(u,{$gap:8},e.createElement(p,{size:g.XXXS,color:L.v2.colors.silver[200]},"Selected"),e.createElement(b,{label:`${s.length}/${i.length}`,status:m.Unknown}))),e.createElement(me,{$isFooterOpen:A,$borderRadius:"16px 0 0 16px"},R.map(a=>e.createElement(ye,{key:a.id,onClick:()=>S(a.id)},e.createElement(y,{value:s.includes(a.id),onChange:()=>S(a.id)}),e.createElement(p,{size:g.XS},a.name))))),e.createElement(be,{$width:"60%"},e.createElement(u,{$padding:"2px 12px"},e.createElement(p,{size:g.XS},"Configurations")),e.createElement(me,{$isFooterOpen:A,$borderRadius:"0 16px 16px 0"},e.createElement(u,{$gap:12},e.createElement(p,{size:g.XS},"Automatic Rollout"),e.createElement(C,{size:h.S,value:D.automaticRollout,onChange:e=>V("automaticRollout",e)}),e.createElement(k,{text:"Automatic Rollout",withIcon:!0})))))),A&&e.createElement(Ce,null,z&&e.createElement(f,{label:"Applying configurations...",icon:B,withGradient:!0,typographyProps:{size:g.XXS}}),e.createElement("div",{style:{width:"150px"}},e.createElement(w,{variant:x.Secondary,label:"Cancel",fullWidth:!0,onClick:()=>{N(),v([])}})),e.createElement("div",{style:{width:"150px"}},e.createElement(w,{variant:x.Primary,label:"Apply",fullWidth:!0,onClick:async()=>{M(!0),await $(s,D),M(!1),o()}}))))};var ke;!function(e){e.Id="id",e.Name="name",e.Type="type",e.Status="status",e.OdigosVersion="odigosVersion",e.ConnectedSince="connectedSince",e.LastActivity="lastActivity"}(ke||(ke={}));const fe=[{key:ke.Name,label:"Name",sortable:!0},{key:ke.Type,label:"Type",sortable:!0,textAlign:"right"},{key:ke.Status,label:"Status",sortable:!0},{key:ke.OdigosVersion,label:"Odigos Version",sortable:!0},{key:ke.ConnectedSince,label:"Connected Since",sortable:!0},{key:ke.LastActivity,label:"Last Activity",sortable:!0}],we=({tableRowsMaxHeight:i,connections:n,getConnections:s,onClickConnection:r,deleteConnection:c,applyConfigurations:d})=>{const{formatTimeAgo:u}=v(),[p,g]=a(!1),[y,C]=a(n||[]),[h,k]=a(""),f=l(async()=>{try{g(!0),C(await s()??[])}catch(e){}finally{g(!1)}},[]);o(()=>{y.length||f()},[y.length,f]);const[w,z]=a([]),[M,D]=a(!1),V=t(()=>y.map(a=>({onClick:()=>r(a.id),isSelected:w.includes(a.id),onSelect:()=>z(e=>[...e,a.id]),onDeselect:()=>z(e=>e.filter(e=>e!==a.id)),cells:[{key:ke.Id,rawValue:a.id},{key:ke.Name,rawValue:a.name},{key:ke.Type,rawValue:a.type},{key:ke.Status,rawValue:a.status,component:()=>(a=>{const t=a===S.Success?"Connection live":"Connection lost",l=a===S.Success?X:Z;return e.createElement(b,{status:a,label:t,leftIcon:l})})(a.status)},{key:ke.OdigosVersion,rawValue:a.odigosVersion},{key:ke.ConnectedSince,rawValue:a.connectedAt?u(a.connectedAt):"-"},{key:ke.LastActivity,rawValue:a.lastSeenAt?u(a.lastSeenAt):"-"}]})),[y,w]);return e.createElement($,null,e.createElement(L,{icon:W,title:"Connections",badge:{label:y.length.toString(),status:m.Unknown},search:{placeholder:"Search by cluster name",value:h,onChange:e=>k(e)},actions:[{id:P(),type:I.Button,buttonProps:{variant:x.Secondary,size:R.S,label:"",leftIcon:K,onClick:()=>f(),disabled:p}},{id:P(),type:I.Button,buttonProps:{variant:x.Primary,size:R.S,label:"Configurations",rightIcon:J,onClick:()=>D(!0)}}]},e.createElement(A,{maxHeight:i,isLoading:p,withCheckboxes:!0,columns:fe,rows:V,rowActionsPushRightPosition:M?`calc(${de} - 24px)`:void 0,rowActions:[{id:P(),label:"",leftIcon:J,onClick:({cells:e})=>{const a=e.find(e=>e.key===ke.Id)?.rawValue;a&&(z([a.toString()]),D(!0))},variant:x.Secondary,size:R.S},{id:P(),label:"",leftIcon:Q,onClick:async({cells:e})=>{const a=e.find(e=>e.key===ke.Id)?.rawValue;a&&(await c(a.toString()),f())},variant:x.Secondary,size:R.S}]}),e.createElement(he,{isOpen:M,onClose:()=>{z([]),D(!1)},connections:y,selectedConnectionIds:w,setSelectedConnectionIds:z,onApply:d})))},xe=i.div`
49
+ `,he=({isOpen:l,onClose:o,connections:i,selectedConnectionIds:s,setSelectedConnectionIds:x,onApply:$})=>{const L=n(),[P,I]=a(""),R=t(()=>i.filter(e=>!P||e.name.toLowerCase().includes(P.toLowerCase())),[i,P]),A=s.length>0,z=e=>{x(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},[S,M]=a(!1),[D,V]=a(void 0),{formData:N,handleFormChange:O,resetFormData:T}=r({automaticRollout:!0});return e.createElement(c,{isOpen:l,hideOverlay:!0,width:de,header:{icon:W,title:"Cluster Configuration",onClose:o}},e.createElement(ue,null,e.createElement(pe,null,e.createElement(d,{value:P,onChange:I})),e.createElement(ge,null,e.createElement(be,{$width:"40%"},e.createElement(u,{$padding:"0 12px",$justifyContent:"space-between"},e.createElement(u,{$gap:8},e.createElement(p,{size:g.XS},"Clusters"),e.createElement(b,{label:i.length,status:m.Unknown})),e.createElement(u,{$gap:8},e.createElement(p,{size:g.XXXS,color:L.v2.colors.silver[200]},"Selected"),e.createElement(b,{label:`${s.length}/${i.length}`,status:m.Unknown}))),e.createElement(me,{$isFooterOpen:A,$borderRadius:"16px 0 0 16px"},R.map(a=>e.createElement(ye,{key:a.id,onClick:()=>z(a.id)},e.createElement(y,{value:s.includes(a.id),onChange:()=>z(a.id)}),e.createElement(p,{size:g.XS},a.name))))),e.createElement(be,{$width:"60%"},e.createElement(u,{$padding:"2px 12px"},e.createElement(p,{size:g.XS},"Configurations")),e.createElement(me,{$isFooterOpen:A,$borderRadius:"0 16px 16px 0"},e.createElement(u,{$gap:12},e.createElement(p,{size:g.XS},"Automatic Rollout"),e.createElement(C,{size:h.S,value:N.automaticRollout,onChange:e=>O("automaticRollout",e)}),e.createElement(k,{text:"Automatic Rollout",withIcon:!0})))))),A&&e.createElement(Ce,null,S?e.createElement(f,{label:"Applying configurations...",icon:B,withGradient:!0,typographyProps:{size:g.XXS}}):D?e.createElement(p,{size:g.XXS,color:L.v2.colors.red[500]},D):null,e.createElement("div",{style:{width:"150px"}},e.createElement(w,{variant:v.Secondary,label:"Cancel",fullWidth:!0,onClick:()=>{T(),x([])},disabled:S})),e.createElement("div",{style:{width:"150px"}},e.createElement(w,{variant:v.Primary,label:"Apply",fullWidth:!0,onClick:async()=>{M(!0);const{error:e}=await $(s,N);M(!1),e?V(e):o()},disabled:S}))))};var ke;!function(e){e.Id="id",e.Name="name",e.Type="type",e.Status="status",e.OdigosVersion="odigosVersion",e.ConnectedSince="connectedSince",e.LastActivity="lastActivity"}(ke||(ke={}));const fe=[{key:ke.Name,label:"Name",sortable:!0},{key:ke.Type,label:"Type",sortable:!0,textAlign:"right"},{key:ke.Status,label:"Status",sortable:!0},{key:ke.OdigosVersion,label:"Odigos Version",sortable:!0},{key:ke.ConnectedSince,label:"Connected Since",sortable:!0},{key:ke.LastActivity,label:"Last Activity",sortable:!0}],we=({tableRowsMaxHeight:i,connections:n,getConnections:s,onClickConnection:r,deleteConnection:c,applyConfigurations:d})=>{const{formatTimeAgo:u}=x(),[p,g]=a(!1),[y,C]=a(n||[]),[h,k]=a(""),f=l(async()=>{try{g(!0),C(await s()??[])}catch(e){}finally{g(!1)}},[]);o(()=>{y.length||f()},[y.length,f]);const[w,S]=a([]),[M,D]=a(!1),V=t(()=>y.map(a=>({onClick:()=>r(a.id),isSelected:w.includes(a.id),onSelect:()=>S(e=>[...e,a.id]),onDeselect:()=>S(e=>e.filter(e=>e!==a.id)),cells:[{key:ke.Id,rawValue:a.id},{key:ke.Name,rawValue:a.name},{key:ke.Type,rawValue:a.type},{key:ke.Status,rawValue:a.status,component:()=>(a=>{const t=a===z.Success?"Connection live":"Connection lost",l=a===z.Success?X:Z;return e.createElement(b,{status:a,label:t,leftIcon:l})})(a.status)},{key:ke.OdigosVersion,rawValue:a.odigosVersion},{key:ke.ConnectedSince,rawValue:a.connectedAt?u(a.connectedAt):"-"},{key:ke.LastActivity,rawValue:a.lastSeenAt?u(a.lastSeenAt):"-"}]})),[y,w]);return e.createElement($,null,e.createElement(L,{icon:W,title:"Connections",badge:{label:y.length.toString(),status:m.Unknown},search:{placeholder:"Search by cluster name",value:h,onChange:e=>k(e)},actions:[{id:P(),type:I.Button,buttonProps:{variant:v.Secondary,size:R.S,label:"",leftIcon:K,onClick:()=>f(),disabled:p}},{id:P(),type:I.Button,buttonProps:{variant:v.Primary,size:R.S,label:"Configurations",rightIcon:J,onClick:()=>D(!0)}}]},e.createElement(A,{maxHeight:i,isLoading:p,withCheckboxes:!0,columns:fe,rows:V,rowActionsPushRightPosition:M?`calc(${de} - 24px)`:void 0,rowActions:[{id:P(),label:"",leftIcon:J,onClick:({cells:e})=>{const a=e.find(e=>e.key===ke.Id)?.rawValue;a&&(S([a.toString()]),D(!0))},variant:v.Secondary,size:R.S},{id:P(),label:"",leftIcon:Q,onClick:async({cells:e})=>{const a=e.find(e=>e.key===ke.Id)?.rawValue;a&&(await c(a.toString()),f())},variant:v.Secondary,size:R.S}]}),e.createElement(he,{isOpen:M,onClose:()=>{S([]),D(!1)},connections:y,selectedConnectionIds:w,setSelectedConnectionIds:S,onApply:d})))},ve=i.div`
50
50
  display: flex;
51
51
  align-items: center;
52
52
  justify-content: space-between;
@@ -58,10 +58,10 @@ import e,{useState as a,useMemo as t,useCallback as l,useEffect as o}from"react"
58
58
  &:hover {
59
59
  background: ${({theme:e})=>e.v2.colors.silver[700]};
60
60
  }
61
- `,ve=i.div`
62
- animation-name: ${z.animations.fade.in};
63
- `,$e=({pod:l,getExtendedPodInfo:i,onClose:n})=>{const{formatTimeAgo:r}=v(),{clickCopy:d,isCopied:u}=M(),[g,b]=a(null),[m,y]=a(!1);o(()=>{l?i(l.namespace,l.name).then(e=>b(e??null)):(b(null),y(!1))},[l]);const C=t(()=>[{id:P(),title:"Node",label:g?.node??"-",withCopy:!0},{id:P(),title:"Status",badge:{status:D(g?.status),label:g?.status??"-"}}],[g]),h=t(()=>g?.containers?.map(e=>({id:P(),items:[{id:P(),title:"Container",label:e.name??"-"},{id:P(),title:"Status",badge:{status:D(e.status),label:e.status??"-"},label:e.startedAt?`(since ${r(e.startedAt)})`:""},{id:P(),title:"Image Version",label:e.image?.split(":")?.[1]??"-"},{id:P(),title:"Image Repository",label:e.image?.split(":")?.[0]??"-"},{id:P(),title:"Restarts",label:e.restarts.toString()},{id:P(),title:"State Reason",label:e.stateReason??"-"},{id:P(),title:"Resource Requests",label:`CPU ${e.resources.requests.cpu} • Memory ${e.resources.requests.memory}`},{id:P(),title:"Resource Limits",label:`CPU ${e.resources.limits.cpu} • Memory ${e.resources.limits.memory}`}]}))||[],[g]);return e.createElement(c,{isOpen:!!l,header:{icon:_,title:"Pod Information",onClose:n}},g?null:e.createElement(V,null,e.createElement(N,null)),g?e.createElement(e.Fragment,null,e.createElement(L,{icon:_,title:g.name,withCopyTitle:!0},e.createElement(s,{$gap:24},e.createElement(O,{cellsPerRow:2,items:C}),h.length>0&&e.createElement(s,{$gap:12},e.createElement(xe,{onClick:()=>y(e=>!e)},e.createElement(p,null,"Containers Overview"),e.createElement(T,{icon:m?ee:ae})),m&&h.map(({id:a,items:t})=>e.createElement(ve,{key:a},e.createElement(O,{cellsPerRow:2,items:t})))))),e.createElement(L,{icon:te,title:"Kubectl Commands"},e.createElement(s,{$gap:12},e.createElement(j,{value:`kubectl get pod ${g.name} -n ${g.namespace} -o yaml`}),e.createElement(j,{value:`kubectl describe pod ${g.name} -n ${g.namespace}`}),e.createElement(j,{value:`kubectl logs ${g.name} -n ${g.namespace}`}))),e.createElement(L,{icon:le,title:"YAML",actions:[{id:P(),type:I.Button,buttonProps:{label:"",leftIcon:u?X:oe,onClick:()=>d(g.manifestYAML),disabled:u,size:R.S,variant:x.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(Y,{code:g.manifestYAML,language:"yaml",theme:"duotoneDark"})))):null)};var Le;!function(e){e.PodName="podName",e.Ready="ready",e.Started="started",e.Status="status",e.Restarts="restarts",e.NodeName="nodeName",e.Age="age",e.DockerImage="dockerImage"}(Le||(Le={}));const Pe=[{key:Le.PodName,label:"Pod Name",sortable:!0},{key:Le.Ready,label:"Ready",sortable:!0,textAlign:"right"},{key:Le.Started,label:"Started",sortable:!0,textAlign:"right"},{key:Le.Status,label:"Status",sortable:!0},{key:Le.Restarts,label:"Restarts",sortable:!0,textAlign:"right"},{key:Le.NodeName,label:"Node Name",sortable:!0},{key:Le.Age,label:"Age",sortable:!0,textAlign:"right"},{key:Le.DockerImage,label:"Docker Image",sortable:!0,textAlign:"right"}],Ie=({isLoading:l,tableRowsMaxHeight:o,pods:i,getExtendedPodInfo:s})=>{const r=n(),{formatTimeAgo:c}=v(),[d,u]=a(null),p=t(()=>{const a=a=>a?e.createElement(ie,{fill:F(r,S.Success,"500"),size:20}):e.createElement(ne,{fill:F(r,S.Error,"500"),size:20});return i.map(t=>({onClick:()=>u(t),cells:[{key:Le.PodName,rawValue:t.name},{key:Le.Ready,rawValue:t.ready,component:()=>a(t.ready)},{key:Le.Started,rawValue:t.started,component:()=>a(t.started)},{key:Le.Status,rawValue:t.status,component:()=>{return a=t.status,e.createElement(b,{status:D(a),label:a});var a}},{key:Le.Restarts,rawValue:t.restartsCount.toString()},{key:Le.NodeName,rawValue:t.nodeName},{key:Le.Age,rawValue:c(t.creationTimestamp)},{key:Le.DockerImage,rawValue:t.image}]}))},[i,r]);return e.createElement(L,{icon:_,title:"Pods"},e.createElement(A,{maxHeight:o,isLoading:l,columns:Pe,rows:p}),e.createElement($e,{pod:d,getExtendedPodInfo:s,onClose:()=>u(null)}))};var Re;!function(e){e.Gateway="gateway",e.Node="node"}(Re||(Re={}));const Ae=[{value:Re.Gateway,label:"Gateway"},{value:Re.Node,label:"Node Collector"}],Se=i.div`
61
+ `,xe=i.div`
62
+ animation-name: ${S.animations.fade.in};
63
+ `,$e=({pod:l,getExtendedPodInfo:i,onClose:n})=>{const{formatTimeAgo:r}=x(),{clickCopy:d,isCopied:u}=M(),[g,b]=a(null),[m,y]=a(!1);o(()=>{l?i(l.namespace,l.name).then(e=>b(e??null)):(b(null),y(!1))},[l]);const C=t(()=>[{id:P(),title:"Node",label:g?.node??"-",withCopy:!0},{id:P(),title:"Status",badge:{status:D(g?.status),label:g?.status??"-"}}],[g]),h=t(()=>g?.containers?.map(e=>({id:P(),items:[{id:P(),title:"Container",label:e.name??"-"},{id:P(),title:"Status",badge:{status:D(e.status),label:e.status??"-"},label:e.startedAt?`(since ${r(e.startedAt)})`:""},{id:P(),title:"Image Version",label:e.image?.split(":")?.[1]??"-"},{id:P(),title:"Image Repository",label:e.image?.split(":")?.[0]??"-"},{id:P(),title:"Restarts",label:e.restarts.toString()},{id:P(),title:"State Reason",label:e.stateReason??"-"},{id:P(),title:"Resource Requests",label:`CPU ${e.resources.requests.cpu} • Memory ${e.resources.requests.memory}`},{id:P(),title:"Resource Limits",label:`CPU ${e.resources.limits.cpu} • Memory ${e.resources.limits.memory}`}]}))||[],[g]);return e.createElement(c,{isOpen:!!l,header:{icon:_,title:"Pod Information",onClose:n}},g?null:e.createElement(V,null,e.createElement(N,null)),g?e.createElement(e.Fragment,null,e.createElement(L,{icon:_,title:g.name,withCopyTitle:!0},e.createElement(s,{$gap:24},e.createElement(O,{cellsPerRow:2,items:C}),h.length>0&&e.createElement(s,{$gap:12},e.createElement(ve,{onClick:()=>y(e=>!e)},e.createElement(p,null,"Containers Overview"),e.createElement(T,{icon:m?ee:ae})),m&&h.map(({id:a,items:t})=>e.createElement(xe,{key:a},e.createElement(O,{cellsPerRow:2,items:t})))))),e.createElement(L,{icon:te,title:"Kubectl Commands"},e.createElement(s,{$gap:12},e.createElement(j,{value:`kubectl get pod ${g.name} -n ${g.namespace} -o yaml`}),e.createElement(j,{value:`kubectl describe pod ${g.name} -n ${g.namespace}`}),e.createElement(j,{value:`kubectl logs ${g.name} -n ${g.namespace}`}))),e.createElement(L,{icon:le,title:"YAML",actions:[{id:P(),type:I.Button,buttonProps:{label:"",leftIcon:u?X:oe,onClick:()=>d(g.manifestYAML),disabled:u,size:R.S,variant:v.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(Y,{code:g.manifestYAML,language:"yaml",theme:"duotoneDark"})))):null)};var Le;!function(e){e.PodName="podName",e.Ready="ready",e.Started="started",e.Status="status",e.Restarts="restarts",e.NodeName="nodeName",e.Age="age",e.DockerImage="dockerImage"}(Le||(Le={}));const Pe=[{key:Le.PodName,label:"Pod Name",sortable:!0},{key:Le.Ready,label:"Ready",sortable:!0,textAlign:"right"},{key:Le.Started,label:"Started",sortable:!0,textAlign:"right"},{key:Le.Status,label:"Status",sortable:!0},{key:Le.Restarts,label:"Restarts",sortable:!0,textAlign:"right"},{key:Le.NodeName,label:"Node Name",sortable:!0},{key:Le.Age,label:"Age",sortable:!0,textAlign:"right"},{key:Le.DockerImage,label:"Docker Image",sortable:!0,textAlign:"right"}],Ie=({isLoading:l,tableRowsMaxHeight:o,pods:i,getExtendedPodInfo:s})=>{const r=n(),{formatTimeAgo:c}=x(),[d,u]=a(null),p=t(()=>{const a=a=>a?e.createElement(ie,{fill:F(r,z.Success,"500"),size:20}):e.createElement(ne,{fill:F(r,z.Error,"500"),size:20});return i.map(t=>({onClick:()=>u(t),cells:[{key:Le.PodName,rawValue:t.name},{key:Le.Ready,rawValue:t.ready,component:()=>a(t.ready)},{key:Le.Started,rawValue:t.started,component:()=>a(t.started)},{key:Le.Status,rawValue:t.status,component:()=>{return a=t.status,e.createElement(b,{status:D(a),label:a});var a}},{key:Le.Restarts,rawValue:t.restartsCount.toString()},{key:Le.NodeName,rawValue:t.nodeName},{key:Le.Age,rawValue:c(t.creationTimestamp)},{key:Le.DockerImage,rawValue:t.image}]}))},[i,r]);return e.createElement(L,{icon:_,title:"Pods"},e.createElement(A,{maxHeight:o,isLoading:l,columns:Pe,rows:p}),e.createElement($e,{pod:d,getExtendedPodInfo:s,onClose:()=>u(null)}))};var Re;!function(e){e.Gateway="gateway",e.Node="node"}(Re||(Re={}));const Ae=[{value:Re.Gateway,label:"Gateway"},{value:Re.Node,label:"Node Collector"}],ze=i.div`
64
64
  display: flex;
65
65
  align-items: center;
66
66
  justify-content: space-between;
67
- `,ze=({selectedTab:a,setSelectedTab:t,onClickDownloadDiagnose:l,onClickRefresh:o,isLoading:i})=>e.createElement(Se,null,e.createElement(u,{$gap:12},e.createElement(u,{$gap:8},e.createElement(se,{size:32}),e.createElement(p,{size:g.M,weight:500},"Pipeline Collectors")),e.createElement(H,{options:Ae,selected:a,setSelected:t})),e.createElement(u,{$gap:8},l&&e.createElement(w,{label:"Download Diagnose",leftIcon:re,size:R.S,variant:x.Text,onClick:l}),o&&e.createElement(w,{label:"Refresh",leftIcon:K,size:R.S,variant:x.Text,onClick:o,loading:i}))),Me=({isOpen:a,onClose:t,title:l,yaml:o})=>{const{clickCopy:i,isCopied:n}=M();return e.createElement(c,{isOpen:a,header:{icon:ce,title:l,onClose:t}},o?e.createElement(L,{icon:le,title:"YAML",actions:[{id:P(),type:I.Button,buttonProps:{label:"",leftIcon:n?X:oe,onClick:()=>i(o),disabled:n,size:R.S,variant:x.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(Y,{code:o,language:"yaml",theme:"duotoneDark"}))):e.createElement(U,{title:"No YAML found",subTitle:"The YAML for this resource is not available"}))};var De;!function(e){e.ManifestYaml="manifest-yaml",e.ConfigMapYaml="configmap-yaml"}(De||(De={}));const Ve=({icon:t,title:l,badge:o,statusCard:i,textCards:n,manifestYaml:s,configMapYaml:r})=>{const[c,d]=a(null);return e.createElement(L,{icon:t,title:l,badge:o,actions:[{id:P(),type:I.ButtonDropData,buttonProps:{variant:x.Secondary,size:R.S,label:"View YAML",onClick:e=>d(e)},dropDataItems:[{id:De.ManifestYaml,label:l,icon:le},{id:De.ConfigMapYaml,label:"ConfigMap",icon:le}]}]},e.createElement(u,{$gap:16},e.createElement(E,{...i}),n.map(a=>e.createElement(q,{key:a.title,...a}))),e.createElement(Me,{isOpen:c===De.ManifestYaml,onClose:()=>d(null),title:l,yaml:s}),e.createElement(Me,{isOpen:c===De.ConfigMapYaml,onClose:()=>d(null),title:"ConfigMap",yaml:r}))},Ne=e=>{switch(e){case G.Healthy:return"All desired replicas are updated, available, and ready";case G.Updating:return"Workload is progressing towards desired state (e.g., updating pods)";case G.Degraded:return"Progressing but with availability issues (e.g., not enough available replicas)";case G.Failed:return"Progress deadline exceeded or an unrecoverable error occurred";case G.Down:return"No available replicas";case G.Unknown:return"Status cannot be determined from current signals";default:return"Status unknown"}},Oe=({tableRowsMaxHeight:i,getGatewayInfo:n,getGatewayPods:s,getNodeCollectorInfo:r,getNodeCollectorPods:c,getExtendedPodInfo:d})=>{const{formatTimeAgo:u}=v(),[p,g]=a(!1),[b,y]=a(Re.Gateway),[C,h]=a(null),[k,f]=a([]),[w,x]=a(null),[L,P]=a([]),I=l(async()=>{g(!0);try{switch(b){case Re.Gateway:h(await n()??null),f(await s()??[]);break;case Re.Node:x(await r()??null),P(await c()??[])}}catch(e){}g(!1)},[b]);o(()=>{I()},[I]);const R=t(()=>(e=>{switch(e){case Re.Gateway:return"Deployment";case Re.Node:return"DaemonSet";default:return"Pipeline Collectors"}})(b),[b]),A=t(()=>((e,a,t,l)=>{const o={status:m.Disabled,label:"No rollouts yet"};let i=!1,n=null;switch(e){case Re.Gateway:i=a?.rolloutInProgress??!1,n=a?.lastRolloutAt??null;break;case Re.Node:i=t?.rolloutInProgress??!1,n=t?.lastRolloutAt??null;break;default:return o}return i?{status:S.Info,label:"Rollout in progress",rightIcon:K,useSecondaryTone:!0}:n?{status:m.Disabled,label:`Last Rollout: ${l(n)}`}:o})(b,C,w,u),[C,w,b,u]),z=t(()=>((e,a,t,l)=>{let o=l?S.Info:m.Unknown,i=l?"Loading":G.Unknown,n=l?"Fetching data...":Ne(G.Unknown);switch(e){case Re.Gateway:o=a?.status?D(a?.status):o,i=a?.status??i,n=a?.status?Ne(a.status):n;break;case Re.Node:o=t?.status?D(t?.status):o,i=t?.status??i,n=t?.status?Ne(t.status):n}return{status:o,title:i,description:n}})(b,C,w,p),[C,w,b,p]),M=t(()=>((e,a,t,l)=>{switch(e){case Re.Gateway:return[{title:"HPA Spec (Replicas)",cells:[{label:"Min.",value:a?.hpa?.min.toString()??"-",isLoading:l},{label:"Max.",value:a?.hpa?.max.toString()??"-",isLoading:l},{label:"Current",value:a?.hpa?.current.toString()??"-",isLoading:l},{label:"Desired",value:a?.hpa?.desired.toString()??"-",isLoading:l}]},{title:"Requests",cells:[{label:"CPU",value:a?.resources?.requests.cpu??"-",isLoading:l},{label:"Memory",value:a?.resources?.requests.memory??"-",isLoading:l}]},{title:"Limits",cells:[{label:"CPU",value:a?.resources?.limits.cpu??"-",isLoading:l},{label:"Memory",value:a?.resources?.limits.memory??"-",isLoading:l}]},{title:"Docker Image",cells:[{value:a?.imageVersion??"-",isLoading:l}]}];case Re.Node:return[{title:"Nodes",cells:[{label:"Desired",value:t?.nodes?.desired.toString()??"-",isLoading:l},{label:"Ready",value:t?.nodes?.ready.toString()??"-",isLoading:l}]},{title:"Requests",cells:[{label:"CPU",value:t?.resources?.requests.cpu??"-",isLoading:l},{label:"Memory",value:t?.resources?.requests.memory??"-",isLoading:l}]},{title:"Limits",cells:[{label:"CPU",value:t?.resources?.limits.cpu??"-",isLoading:l},{label:"Memory",value:t?.resources?.limits.memory??"-",isLoading:l}]},{title:"Docker Image",cells:[{value:t?.imageVersion??"-",isLoading:l}]}];default:return[]}})(b,C,w,p),[C,w,b,p]),V=t(()=>(b===Re.Gateway?C?.manifestYAML:w?.manifestYAML)??"",[C,w,b]),N=t(()=>(b===Re.Gateway?C?.configMapYAML:w?.configMapYAML)??"",[C,w,b]),O=t(()=>b===Re.Gateway?k:L,[k,L,b]);return e.createElement($,null,e.createElement(ze,{isLoading:p,selectedTab:b,setSelectedTab:y,onClickDownloadDiagnose:void 0,onClickRefresh:I}),e.createElement(Ve,{icon:ce,title:R,badge:A,statusCard:z,textCards:M,manifestYaml:V,configMapYaml:N}),e.createElement(Ie,{isLoading:p,tableRowsMaxHeight:i,pods:O,getExtendedPodInfo:d}))};export{we as CentralConnections,Oe as PipelineCollectors};
67
+ `,Se=({selectedTab:a,setSelectedTab:t,onClickDownloadDiagnose:l,onClickRefresh:o,isLoading:i})=>e.createElement(ze,null,e.createElement(u,{$gap:12},e.createElement(u,{$gap:8},e.createElement(se,{size:32}),e.createElement(p,{size:g.M,weight:500},"Pipeline Collectors")),e.createElement(H,{options:Ae,selected:a,setSelected:t})),e.createElement(u,{$gap:8},l&&e.createElement(w,{label:"Download Diagnose",leftIcon:re,size:R.S,variant:v.Text,onClick:l}),o&&e.createElement(w,{label:"Refresh",leftIcon:K,size:R.S,variant:v.Text,onClick:o,loading:i}))),Me=({isOpen:a,onClose:t,title:l,yaml:o})=>{const{clickCopy:i,isCopied:n}=M();return e.createElement(c,{isOpen:a,header:{icon:ce,title:l,onClose:t}},o?e.createElement(L,{icon:le,title:"YAML",actions:[{id:P(),type:I.Button,buttonProps:{label:"",leftIcon:n?X:oe,onClick:()=>i(o),disabled:n,size:R.S,variant:v.Secondary}}]},e.createElement("div",{style:{padding:"0 12px"}},e.createElement(Y,{code:o,language:"yaml",theme:"duotoneDark"}))):e.createElement(U,{title:"No YAML found",subTitle:"The YAML for this resource is not available"}))};var De;!function(e){e.ManifestYaml="manifest-yaml",e.ConfigMapYaml="configmap-yaml"}(De||(De={}));const Ve=({icon:t,title:l,badge:o,statusCard:i,textCards:n,manifestYaml:s,configMapYaml:r})=>{const[c,d]=a(null);return e.createElement(L,{icon:t,title:l,badge:o,actions:[{id:P(),type:I.ButtonDropData,buttonProps:{variant:v.Secondary,size:R.S,label:"View YAML",onClick:e=>d(e)},dropDataItems:[{id:De.ManifestYaml,label:l,icon:le},{id:De.ConfigMapYaml,label:"ConfigMap",icon:le}]}]},e.createElement(u,{$gap:16},e.createElement(E,{...i}),n.map(a=>e.createElement(q,{key:a.title,...a}))),e.createElement(Me,{isOpen:c===De.ManifestYaml,onClose:()=>d(null),title:l,yaml:s}),e.createElement(Me,{isOpen:c===De.ConfigMapYaml,onClose:()=>d(null),title:"ConfigMap",yaml:r}))},Ne=e=>{switch(e){case G.Healthy:return"All desired replicas are updated, available, and ready";case G.Updating:return"Workload is progressing towards desired state (e.g., updating pods)";case G.Degraded:return"Progressing but with availability issues (e.g., not enough available replicas)";case G.Failed:return"Progress deadline exceeded or an unrecoverable error occurred";case G.Down:return"No available replicas";case G.Unknown:return"Status cannot be determined from current signals";default:return"Status unknown"}},Oe=({tableRowsMaxHeight:i,getGatewayInfo:n,getGatewayPods:s,getNodeCollectorInfo:r,getNodeCollectorPods:c,getExtendedPodInfo:d})=>{const{formatTimeAgo:u}=x(),[p,g]=a(!1),[b,y]=a(Re.Gateway),[C,h]=a(null),[k,f]=a([]),[w,v]=a(null),[L,P]=a([]),I=l(async()=>{g(!0);try{switch(b){case Re.Gateway:h(await n()??null),f(await s()??[]);break;case Re.Node:v(await r()??null),P(await c()??[])}}catch(e){}g(!1)},[b]);o(()=>{I()},[I]);const R=t(()=>(e=>{switch(e){case Re.Gateway:return"Deployment";case Re.Node:return"DaemonSet";default:return"Pipeline Collectors"}})(b),[b]),A=t(()=>((e,a,t,l)=>{const o={status:m.Disabled,label:"No rollouts yet"};let i=!1,n=null;switch(e){case Re.Gateway:i=a?.rolloutInProgress??!1,n=a?.lastRolloutAt??null;break;case Re.Node:i=t?.rolloutInProgress??!1,n=t?.lastRolloutAt??null;break;default:return o}return i?{status:z.Info,label:"Rollout in progress",rightIcon:K,useSecondaryTone:!0}:n?{status:m.Disabled,label:`Last Rollout: ${l(n)}`}:o})(b,C,w,u),[C,w,b,u]),S=t(()=>((e,a,t,l)=>{let o=l?z.Info:m.Unknown,i=l?"Loading":G.Unknown,n=l?"Fetching data...":Ne(G.Unknown);switch(e){case Re.Gateway:o=a?.status?D(a?.status):o,i=a?.status??i,n=a?.status?Ne(a.status):n;break;case Re.Node:o=t?.status?D(t?.status):o,i=t?.status??i,n=t?.status?Ne(t.status):n}return{status:o,title:i,description:n}})(b,C,w,p),[C,w,b,p]),M=t(()=>((e,a,t,l)=>{switch(e){case Re.Gateway:return[{title:"HPA Spec (Replicas)",cells:[{label:"Min.",value:a?.hpa?.min.toString()??"-",isLoading:l},{label:"Max.",value:a?.hpa?.max.toString()??"-",isLoading:l},{label:"Current",value:a?.hpa?.current.toString()??"-",isLoading:l},{label:"Desired",value:a?.hpa?.desired.toString()??"-",isLoading:l}]},{title:"Requests",cells:[{label:"CPU",value:a?.resources?.requests.cpu??"-",isLoading:l},{label:"Memory",value:a?.resources?.requests.memory??"-",isLoading:l}]},{title:"Limits",cells:[{label:"CPU",value:a?.resources?.limits.cpu??"-",isLoading:l},{label:"Memory",value:a?.resources?.limits.memory??"-",isLoading:l}]},{title:"Docker Image",cells:[{value:a?.imageVersion??"-",isLoading:l}]}];case Re.Node:return[{title:"Nodes",cells:[{label:"Desired",value:t?.nodes?.desired.toString()??"-",isLoading:l},{label:"Ready",value:t?.nodes?.ready.toString()??"-",isLoading:l}]},{title:"Requests",cells:[{label:"CPU",value:t?.resources?.requests.cpu??"-",isLoading:l},{label:"Memory",value:t?.resources?.requests.memory??"-",isLoading:l}]},{title:"Limits",cells:[{label:"CPU",value:t?.resources?.limits.cpu??"-",isLoading:l},{label:"Memory",value:t?.resources?.limits.memory??"-",isLoading:l}]},{title:"Docker Image",cells:[{value:t?.imageVersion??"-",isLoading:l}]}];default:return[]}})(b,C,w,p),[C,w,b,p]),V=t(()=>(b===Re.Gateway?C?.manifestYAML:w?.manifestYAML)??"",[C,w,b]),N=t(()=>(b===Re.Gateway?C?.configMapYAML:w?.configMapYAML)??"",[C,w,b]),O=t(()=>b===Re.Gateway?k:L,[k,L,b]);return e.createElement($,null,e.createElement(Se,{isLoading:p,selectedTab:b,setSelectedTab:y,onClickDownloadDiagnose:void 0,onClickRefresh:I}),e.createElement(Ve,{icon:ce,title:R,badge:A,statusCard:S,textCards:M,manifestYaml:V,configMapYaml:N}),e.createElement(Ie,{isLoading:p,tableRowsMaxHeight:i,pods:O,getExtendedPodInfo:d}))};export{we as CentralConnections,Oe as PipelineCollectors};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odigos/ui-kit",
3
- "version": "0.0.139",
3
+ "version": "0.0.140",
4
4
  "author": "Odigos",
5
5
  "license": "MIT",
6
6
  "repository": {