fixes #153

dashboard/src/components/ResourceTab.tsx

@@ -204,7 +204,7 @@ const Info = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
+  width: 80%;
   height: 100%;
 `;
 
@@ -217,6 +217,7 @@ const Metadata = styled.div`
 
 const Status = styled.div`
   display: flex;
+  width; 20%;
   font-size: 12px;
   text-transform: capitalize;
   justify-content: flex-end;

dashboard/src/components/StatusIndicator.tsx

@@ -32,9 +32,20 @@ export default class StatusIndicator extends Component<PropsType, StateType> {
     if (chartStatus === 'deployed') {
       for (var uid in this.props.controllers) {
         let value = this.props.controllers[uid]
-        let status = this.getAvailability(value.metadata.kind, value)
-        if (!status) {
+        let available = this.getAvailability(value.metadata.kind, value)
+        let progressing = true
+
+        this.props.controllers[uid]?.status?.conditions?.forEach((condition: any) => {
+          if (condition.type == "Progressing" && condition.status == "False"
+              && condition.reason == "ProgressDeadlineExceeded") {
+            progressing = false
+          }
+        })
+
+        if (!available && progressing) {
           return 'loading'
+        } else if (!available && !progressing) {
+          return 'failed'
         }
       }
       return 'deployed'

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -390,13 +390,23 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
   getChartStatus = (chartStatus: string) => {
     if (chartStatus === 'deployed') {
+
       for (var uid in this.state.controllers) {
-        console.log(this.state.controllers)
         let value = this.state.controllers[uid]
-        let status = this.getAvailability(value.metadata.kind, value)
-        console.log(status)
-        if (!status) {
+        let available = this.getAvailability(value.metadata.kind, value)
+        let progressing = true
+
+        this.state.controllers[uid]?.status?.conditions?.forEach((condition: any) => {
+          if (condition.type == "Progressing" && condition.status == "False" 
+              && condition.reason == "ProgressDeadlineExceeded") {
+            progressing = false
+          }
+        })
+        
+        if (!available && progressing) {
           return 'loading'
+        } else if (!available && !progressing) {
+          return 'failed'
         }
       }
       return 'deployed'
@@ -458,7 +468,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               <InfoWrapper>
                 <StatusIndicator 
                   controllers={this.state.controllers}
-                  status={status}
+                  status={chart.info.status}
                   margin_left={'0px'}
                 />
                 <LastDeployed>

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -81,7 +81,8 @@ export default class ControllerTab extends Component<PropsType, StateType> {
 
   getPodStatus = (status: any) => {
     if (status?.phase == 'Pending') {
-      return 'waiting'
+      return status?.containerStatuses[0].state.waiting.reason
+      // return 'waiting'
     }
 
     if (status?.phase == 'Failed') {
@@ -116,6 +117,7 @@ export default class ControllerTab extends Component<PropsType, StateType> {
       >
         {
           this.state.raw.map((pod, i) => {
+            console.log('pod', pod)
             let status = this.getPodStatus(pod.status)
             return (
               <Tab 
@@ -128,7 +130,9 @@ export default class ControllerTab extends Component<PropsType, StateType> {
                   <Circle />
                   <Rail lastTab={i === this.state.raw.length - 1} />
                 </Gutter>
-                {pod.metadata?.name}
+                <Name>
+                  {pod.metadata?.name}
+                </Name>
                 <Status>
                   <StatusColor status={status} />
                   {status}
@@ -195,8 +199,14 @@ const StatusColor = styled.div`
   border-radius: 20px;
 `;
 
+const Name = styled.div`
+  width: 50%;
+  overflow: hidden;
+`
+
 const Tab = styled.div`
   width: 100%;
+  overflow: hidden;
   height: 50px;
   position: relative;
   display: flex;