[camel-karavan] branch main updated: Improve pod info UI

[marat]

This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git


The following commit(s) were added to refs/heads/main by this push:
     new f5ecaa6  Improve pod info UI
f5ecaa6 is described below

commit f5ecaa6c86818cae8d9164f28a36e1aedee5d2ae
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Mon Dec 19 15:11:58 2022 -0500

    Improve pod info UI
---
 karavan-app/src/main/webui/src/projects/ProjectInfo.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx 
b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
index e12da0e..49bf1db 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectInfo.tsx
@@ -180,7 +180,7 @@ export class ProjectInfo extends React.Component<Props, 
State> {
     }
 
     getEnvPanel(env: string) {
-        const {deploymentStatus} = this.state;
+        const {deploymentStatus, podStatuses} = this.state;
         return (
             <DescriptionList isHorizontal>
                 <DescriptionListGroup>
@@ -198,7 +198,7 @@ export class ProjectInfo extends React.Component<Props, 
State> {
                 <DescriptionListGroup>
                     <DescriptionListTerm>Pods</DescriptionListTerm>
                     <DescriptionListDescription>
-                        {this.getPodsPanel(env, deploymentStatus)}
+                        {this.getPodsPanel(env, podStatuses)}
                     </DescriptionListDescription>
                 </DescriptionListGroup>
                 <DescriptionListGroup>
@@ -211,8 +211,6 @@ export class ProjectInfo extends React.Component<Props, 
State> {
     }
 
     getReplicasPanel(env: string, deploymentStatus?: DeploymentStatus) {
-        console.log(deploymentStatus);
-
         const ok = (deploymentStatus && deploymentStatus?.readyReplicas > 0
             && (deploymentStatus.unavailableReplicas === 0 || 
deploymentStatus.unavailableReplicas === undefined || 
deploymentStatus.unavailableReplicas === null)
             && deploymentStatus?.replicas === deploymentStatus?.readyReplicas)
@@ -237,13 +235,12 @@ export class ProjectInfo extends React.Component<Props, 
State> {
         )
     }
 
-    getPodsPanel(env: string, deploymentStatus?: DeploymentStatus) {
-        const podStatuses = this.state.podStatuses;
+    getPodsPanel(env: string, podStatuses: PodStatus[]) {
         return (
-            <Flex justifyContent={{default: "justifyContentSpaceBetween"}} 
alignItems={{default: "alignItemsCenter"}}>
+            <Flex justifyContent={{default: "justifyContentSpaceBetween"}} 
alignItems={{default: "alignItemsFlexStart"}}>
                 <FlexItem>
-                    <LabelGroup numLabels={3}>
-                        {(podStatuses === undefined || podStatuses.length === 
0) && <Label icon={<DownIcon/>} color={"grey"}>No pods</Label>}
+                    {podStatuses.length === 0 && <Label icon={<DownIcon/>} 
color={"grey"}>No pods</Label>}
+                    <LabelGroup numLabels={2} isVertical>
                         {podStatuses.map(pod => {
                                 const running = pod.phase === 'Running'
                                 return (
@@ -396,7 +393,7 @@ export class ProjectInfo extends React.Component<Props, 
State> {
                 <CardBody>
 
                     <Flex direction={{default: "row"}}
-                          style={{height: "200px"}}
+                          // style={{height: "200px"}}
                           justifyContent={{default: 
"justifyContentSpaceBetween"}}>
                         <FlexItem flex={{default: "flex_1"}}>
                             {this.getProjectDescription()}