prettier

dashboard/src/components/events/EventCard.tsx

@@ -26,7 +26,7 @@ const EventCard: React.FunctionComponent<CardProps> = ({
   const [showTooltip, setShowTooltip] = useState(false);
   return (
     <>
-      <StyledCard 
+      <StyledCard
         onClick={() => selectEvent(event)}
         status={event.event_type.toLowerCase()}
       >
@@ -64,7 +64,8 @@ const StyledCard = styled.div<{ status: string }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid ${({ status }) => status === "critical" ? "#ff385d" : "#ffffff44"};
+  border: 1px solid
+    ${({ status }) => (status === "critical" ? "#ff385d" : "#ffffff44")};
   background: #ffffff08;
   margin-bottom: 5px;
   border-radius: 10px;
@@ -75,7 +76,8 @@ const StyledCard = styled.div<{ status: string }>`
   cursor: pointer;
   :hover {
     background: #ffffff11;
-    border: 1px solid ${({ status }) => status === "critical" ? "#ff385d" : "#ffffff66"};
+    border: 1px solid
+      ${({ status }) => (status === "critical" ? "#ff385d" : "#ffffff66")};
   }
   animation: fadeIn 0.5s;
   @keyframes fadeIn {
@@ -99,7 +101,7 @@ const Icon = styled.span<{ status: "critical" | "normal" }>`
   font-size: 20px;
   margin-left: 10px;
   margin-right: 20px;
-  color: ${({ status }) => status === "critical" ? "#ff385d" : "#aaaabb"};
+  color: ${({ status }) => (status === "critical" ? "#ff385d" : "#aaaabb")};
 `;
 
 const EventInformation = styled.div`

dashboard/src/components/events/SubEventsList.tsx

@@ -135,9 +135,7 @@ const SubEventsList: React.FC<{
                     {getReadableDate(subEvent.timestamp)}
                   </TimelineNode>
                   <LogBucketCard logEvent={subEvent} />
-                  {i === sortedSubEvents.length - 1 && (
-                    <RailCover />
-                  )}
+                  {i === sortedSubEvents.length - 1 && <RailCover />}
                 </Wrapper>
               );
             }
@@ -150,9 +148,7 @@ const SubEventsList: React.FC<{
                   {getReadableDate(subEvent.timestamp)}
                 </TimelineNode>
                 <SubEventCard subEvent={subEvent} />
-                {i === sortedSubEvents.length - 1 && (
-                  <RailCover />
-                )}
+                {i === sortedSubEvents.length - 1 && <RailCover />}
               </Wrapper>
             );
           })}
@@ -240,7 +236,7 @@ const Rail = styled.div`
   width: 3px;
   height: 100%;
   z-index: -1;
-  background: #36383D;
+  background: #36383d;
 `;
 
 const Timeline = styled.div`
@@ -263,7 +259,7 @@ const Icon = styled.span<{ status: "critical" | "normal" }>`
   font-size: 26px;
   margin-left: 17px;
   margin-right: 10px;
-  color: ${({ status }) => status === "critical" ? "#ff385d" : "#aaaabb"};
+  color: ${({ status }) => (status === "critical" ? "#ff385d" : "#aaaabb")};
 `;
 
 const ControlRow = styled.div`

dashboard/src/components/events/sub-events/LogBucketCard.tsx

@@ -54,17 +54,11 @@ const LogBucketCard: React.FunctionComponent<LogBucketCardProps> = ({
   return (
     <StyledCard>
       {/* Case: Is still getting logs and user triggered expanded */}
-      {isLoading && (
-        <Loading>Loading . . .</Loading>
-      )}
+      {isLoading && <Loading>Loading . . .</Loading>}
       {/* Case: No logs found after the api call */}
-      {!isLoading && !logs?.length && (
-        <Loading>No logs found.</Loading>
-      )}
+      {!isLoading && !logs?.length && <Loading>No logs found.</Loading>}
       {/* Case: Logs were found successfully  */}
-      {!isLoading &&
-        logs?.length &&
-        logs?.map((l) => <Log>{l}</Log>)}
+      {!isLoading && logs?.length && logs?.map((l) => <Log>{l}</Log>)}
     </StyledCard>
   );
 };
@@ -105,4 +99,4 @@ const StyledCard = styled.div`
       opacity: 1;
     }
   }
-`;
+`;

dashboard/src/components/events/sub-events/SubEventCard.tsx

@@ -7,9 +7,7 @@ type CardProps = {
 
 const SubEventCard: React.FunctionComponent<CardProps> = ({ subEvent }) => {
   return (
-    <StyledCard
-      status={subEvent.event_type.toLowerCase()}
-    >
+    <StyledCard status={subEvent.event_type.toLowerCase()}>
       <Icon
         status={subEvent.event_type.toLowerCase() as any}
         className="material-icons-outlined"
@@ -29,7 +27,8 @@ const StyledCard = styled.div<{ status: string }>`
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  border: 1px solid ${({ status }) => status === "critical" ? "#ff385d" : "#ffffff44"};
+  border: 1px solid
+    ${({ status }) => (status === "critical" ? "#ff385d" : "#ffffff44")};
   background: #ffffff08;
   margin-bottom: 30px;
   border-radius: 10px;
@@ -54,5 +53,5 @@ const Icon = styled.span<{ status: "critical" | "normal" }>`
   font-size: 20px;
   margin-left: 10px;
   margin-right: 13px;
-  color: ${({ status }) => status === "critical" ? "#ff385d" : "#aaaabb"};
-`;
+  color: ${({ status }) => (status === "critical" ? "#ff385d" : "#aaaabb")};
+`;

dashboard/src/main/home/cluster-dashboard/dashboard/events/EventsTab.tsx

@@ -60,46 +60,44 @@ const EventsTab = () => {
 
   return (
     <EventsPageWrapper>
-      {
-        kubeEvents.length > 0 ? (
-          <>
-            <ControlRow>
-              {/*
+      {kubeEvents.length > 0 ? (
+        <>
+          <ControlRow>
+            {/*
               <Dropdown
                 selectedOption={resourceType}
                 options={availableResourceTypes}
                 onSelect={(o) => setResourceType({ ...o, value: o.value as string })}
               />
               */}
-            </ControlRow>
-            <InfiniteScroll
-              dataLength={kubeEvents.length}
-              next={loadMoreEvents}
-              hasMore={hasMore}
-              loader={<h4>Loading...</h4>}
-              scrollableTarget="HomeViewWrapper"
-            >
-              <EventsGrid>
-                {kubeEvents.map((event, i) => {
-                  return (
-                    <React.Fragment key={i}>
-                      <EventCard
-                        event={event}
-                        selectEvent={() => setCurrentEvent(event)}
-                      />
-                    </React.Fragment>
-                  );
-                })}
-              </EventsGrid>
-            </InfiniteScroll>
-          </>
-        ) : (
-          <Placeholder>
-            <i className="material-icons">search</i>
-            No matching events were found.
-          </Placeholder>
-        )
-      }
+          </ControlRow>
+          <InfiniteScroll
+            dataLength={kubeEvents.length}
+            next={loadMoreEvents}
+            hasMore={hasMore}
+            loader={<h4>Loading...</h4>}
+            scrollableTarget="HomeViewWrapper"
+          >
+            <EventsGrid>
+              {kubeEvents.map((event, i) => {
+                return (
+                  <React.Fragment key={i}>
+                    <EventCard
+                      event={event}
+                      selectEvent={() => setCurrentEvent(event)}
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </EventsGrid>
+          </InfiniteScroll>
+        </>
+      ) : (
+        <Placeholder>
+          <i className="material-icons">search</i>
+          No matching events were found.
+        </Placeholder>
+      )}
     </EventsPageWrapper>
   );
 };

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -92,55 +92,53 @@ const EventsTab: React.FC<{
 
   return (
     <EventsPageWrapper>
-      {
-        kubeEvents.length > 0 ? (
-          <>
-            <ControlRow>
-              {/*
+      {kubeEvents.length > 0 ? (
+        <>
+          <ControlRow>
+            {/*
               <Dropdown
                 selectedOption={resourceType}
                 options={availableResourceTypes}
                 onSelect={(o) => setResourceType({ ...o, value: o.value as string })}
               />
               */}
-              <Label>Controller -</Label>
-              <Dropdown
-                selectedOption={currentControllerOption}
-                options={controllerOptions}
-                onSelect={(o) => setSelectedControllerKey(o?.value)}
-              />
-            </ControlRow>
-
-            <InfiniteScroll
-              dataLength={kubeEvents.length}
-              next={loadMoreEvents}
-              hasMore={hasMore}
-              loader={<h4>Loading...</h4>}
-              scrollableTarget="HomeViewWrapper"
-            >
-              <EventsGrid>
-                {kubeEvents.map((event, i) => {
-                  return (
-                    <React.Fragment key={i}>
-                      <EventCard
-                        event={event as any}
-                        selectEvent={() => {
-                          setCurrentEvent(event);
-                        }}
-                      />
-                    </React.Fragment>
-                  );
-                })}
-              </EventsGrid>
-            </InfiniteScroll>
-          </>
-        ) : (
-          <Placeholder>
-            <i className="material-icons">search</i>
-            No matching events were found.
-          </Placeholder>
-        )
-      }
+            <Label>Controller -</Label>
+            <Dropdown
+              selectedOption={currentControllerOption}
+              options={controllerOptions}
+              onSelect={(o) => setSelectedControllerKey(o?.value)}
+            />
+          </ControlRow>
+
+          <InfiniteScroll
+            dataLength={kubeEvents.length}
+            next={loadMoreEvents}
+            hasMore={hasMore}
+            loader={<h4>Loading...</h4>}
+            scrollableTarget="HomeViewWrapper"
+          >
+            <EventsGrid>
+              {kubeEvents.map((event, i) => {
+                return (
+                  <React.Fragment key={i}>
+                    <EventCard
+                      event={event as any}
+                      selectEvent={() => {
+                        setCurrentEvent(event);
+                      }}
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </EventsGrid>
+          </InfiniteScroll>
+        </>
+      ) : (
+        <Placeholder>
+          <i className="material-icons">search</i>
+          No matching events were found.
+        </Placeholder>
+      )}
     </EventsPageWrapper>
   );
 };

dashboard/src/main/home/navbar/Help.tsx

@@ -96,7 +96,7 @@ const Option = styled.div`
 
   :hover {
     color: #ffffff;
-    
+
     > img {
       opacity: 100%;
     }