don't show logs spinner if there aren't any logs in the app event card and small improvements to status footer (#3131)

* don't show logs if there aren't any in the app event

* small improvements to status footer

dashboard/src/main/home/app-dashboard/expanded-app/StatusFooter.tsx

@@ -204,11 +204,6 @@ const StatusFooter: React.FC<Props> = ({
     return podsDividedByReplicaSet;
   }, [pods]);
 
-  const percentage = Number(1 - available / total).toLocaleString(undefined, {
-    style: "percent",
-    minimumFractionDigits: 2,
-  });
-
   const formatCreationTimestamp = timeFormat("%H:%M:%S %b %d, '%y");
 
   const updatePods = async () => {
@@ -243,9 +238,8 @@ const StatusFooter: React.FC<Props> = ({
             new Date(pod?.metadata?.creationTimestamp)
           );
 
-          // console.log(containerStatus)
-          const crashLoopReason =
-            containerStatus?.lastState?.terminated?.message ?? "";
+          const failing = containerStatus?.state?.waiting?.reason === "CrashLoopBackOff" ?? false;
+          const crashLoopReason = containerStatus?.lastState?.terminated?.message ?? "";
 
           return {
             namespace: pod?.metadata?.namespace,
@@ -259,6 +253,7 @@ const StatusFooter: React.FC<Props> = ({
             revisionNumber:
               pod?.metadata?.annotations?.["helm.sh/revision"] || "N/A",
             crashLoopReason,
+            failing
           };
         });
 
@@ -304,7 +299,7 @@ const StatusFooter: React.FC<Props> = ({
             <>
               <StyledStatusFooterTop key={i} expanded={expanded}>
                 <StyledContainer row spaced>
-                  {replicaSet.some((r) => r.crashLoopReason != "") ? (
+                  {replicaSet.some((r) => r.crashLoopReason != "") || replicaSet.some((r) => r.failing) ? (
                     <>
                       <Running>
                         <StatusDot color="#ff0000" />
@@ -315,22 +310,24 @@ const StatusFooter: React.FC<Props> = ({
                             }`}
                         </Text>
                       </Running>
-                      <Button
-                        onClick={() => {
-                          expanded ? setHeight(0) : setHeight(122);
-                          setExpanded(!expanded);
-                        }}
-                        height="20px"
-                        color="#ffffff11"
-                        withBorder
-                      >
-                        {expanded ? (
-                          <I className="material-icons">arrow_drop_up</I>
-                        ) : (
-                          <I className="material-icons">arrow_drop_down</I>
-                        )}
-                        <Text color="helper">See failure reason</Text>
-                      </Button>
+                      {replicaSet.some((r) => r.crashLoopReason != "") &&
+                        <Button
+                          onClick={() => {
+                            expanded ? setHeight(0) : setHeight(122);
+                            setExpanded(!expanded);
+                          }}
+                          height="20px"
+                          color="#ffffff11"
+                          withBorder
+                        >
+                          {expanded ? (
+                            <I className="material-icons">arrow_drop_up</I>
+                          ) : (
+                            <I className="material-icons">arrow_drop_down</I>
+                          )}
+                          <Text color="helper">See failure reason</Text>
+                        </Button>
+                      }
                     </>
                   ) : // check if there are more recent replicasets and if the previous replicaset has a crashloop reason
                     i > 0 &&

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/AppEventCard.tsx

@@ -50,12 +50,21 @@ const AppEventCard: React.FC<Props> = ({ event, appData }) => {
         }
       )
 
-      const updatedLogs = logResp.data.logs.map((l: { line: string; timestamp: string; }, index: number) =>
-      ({
-        line: Anser.ansiToJson(l.line),
-        lineNumber: index + 1,
-        timestamp: l.timestamp,
-      }));
+      const updatedLogs = logResp.data.logs.map((l: { line: string; timestamp: string; }, index: number) => {
+        try {
+          return {
+            line: JSON.parse(l.line)?.log ?? Anser.ansiToJson(l.line),
+            lineNumber: index + 1,
+            timestamp: l.timestamp,
+          }
+        } catch (err) {
+          return {
+            line: Anser.ansiToJson(l.line),
+            lineNumber: index + 1,
+            timestamp: l.timestamp,
+          }
+        }
+      });
 
       setLogs(updatedLogs);
     } catch (error) {

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/PreDeployEventCard.tsx

@@ -61,10 +61,18 @@ const PreDeployEventCard: React.FC<Props> = ({ event, appData }) => {
         }
       )
       const updatedLogs = logResp.data.logs.map((l: { line: string; timestamp: string; }, index: number) => {
-        return {
-          line: JSON.parse(l.line)?.log ?? Anser.ansiToJson(l.line),
-          lineNumber: index + 1,
-          timestamp: l.timestamp,
+        try {
+          return {
+            line: JSON.parse(l.line)?.log ?? Anser.ansiToJson(l.line),
+            lineNumber: index + 1,
+            timestamp: l.timestamp,
+          }
+        } catch (err) {
+          return {
+            line: Anser.ansiToJson(l.line),
+            lineNumber: index + 1,
+            timestamp: l.timestamp,
+          }
         }
       });
 

dashboard/src/main/home/app-dashboard/expanded-app/status/AppEventModal.tsx

@@ -52,7 +52,9 @@ const AppEventModal: React.FC<AppEventModalProps> = ({ logs, porterAppName, setM
                 <img src={document} />
                 {expandedAppEventMessage}
             </Message>
-            <ExpandedIncidentLogs logs={logs} />
+            {logs.length > 0 &&
+                <ExpandedIncidentLogs logs={logs} />
+            }
         </Modal>
     );
 };

dashboard/src/main/home/app-dashboard/expanded-app/status/ControllerTab.tsx

@@ -30,6 +30,7 @@ export type ControllerTabPodType = {
   revisionNumber?: number;
   containerStatus: any;
   crashLoopReason?: string;
+  failing?: boolean;
 };
 
 const formatCreationTimestamp = timeFormat("%H:%M:%S %b %d, '%y");