Consolidate app event card (#3129)

* confirm overlay on revert + prevent on most recent revision

* consolidate app event card

* consolidate app events

---------

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air.local>

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

@@ -56,6 +56,7 @@ import Anser, { AnserJsonEntry } from "anser";
 import GHALogsModal from "./status/GHALogsModal";
 import _ from "lodash";
 import AnimateHeight from "react-animate-height";
+import EventsTab from "./EventsTab";
 
 type Props = RouteComponentProps & {};
 
@@ -746,6 +747,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             </Button>
           </>
         );
+      case "events":
+        return <EventsTab currentChart={appData.chart} />;
       case "activity":
         return (
           <ActivityFeed
@@ -773,6 +776,35 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
             clearStatus={() => setButtonStatus("")}
           />
         );
+      case "pre-deploy":
+        return (
+          <>
+            {!isLoading && !services.some(Service.isRelease) && (
+              <>
+                <Fieldset>
+                  <Container row>
+                    <PlaceholderIcon src={notFound} />
+                    <Text color="helper">
+                      No pre-deploy jobs were found. You can add a pre-deploy
+                      job in the Overview tab to perform an operation before
+                      your application services deploy, like a database
+                      migration.
+                    </Text>
+                  </Container>
+                </Fieldset>
+                <Spacer y={0.5} />
+              </>
+            )}
+            {services.some(Service.isRelease) && (
+              <JobRuns
+                lastRunStatus="all"
+                namespace={appData.chart?.namespace}
+                sortType="Newest"
+                releaseName={appData.app.name + "-r"}
+              />
+            )}
+          </>
+        );
       default:
         return <div>Tab not found</div>;
     }
@@ -1014,9 +1046,14 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                 options={[
                   { label: "Overview", value: "overview" },
                   featurePreview && { label: "Activity", value: "activity" },
+                  hasBuiltImage && { label: "Events", value: "events" },
                   hasBuiltImage && { label: "Logs", value: "logs" },
                   hasBuiltImage && { label: "Metrics", value: "metrics" },
                   hasBuiltImage && { label: "Debug", value: "status" },
+                  appData.app.git_repo_id && {
+                    label: "Pre-deploy logs",
+                    value: "pre-deploy",
+                  },
                   {
                     label: "Environment",
                     value: "environment-variables",

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

@@ -64,20 +64,21 @@ const AppEventCard: React.FC<Props> = ({ event, appData }) => {
   };
 
   return (
-    <StyledEventCard row>
+    <StyledEventCard>
       <Container row spaced>
-        <Container row spaced>
+        <Container row>
           <Icon height="16px" src={app_event} />
           <Spacer inline width="10px" />
           <Text additionalStyles={"overflow: auto;max-height: 70px;max-width: 600px;"}>{event.metadata.detail}</Text>
         </Container>
       </Container>
+      <Spacer y={1} />
       <Container row spaced>
-        <ViewDetailsButton onClick={getAppLogs}>
-          <Icon src={info} />
-          <Spacer inline width="6px" />
-          <Text>Details</Text>
-        </ViewDetailsButton>
+        <TempWrapper>
+          <Link onClick={getAppLogs} hasunderline>
+            View details
+          </Link>
+        </TempWrapper>
       </Container>
       {showModal && (
         <AppEventModal
@@ -94,6 +95,10 @@ const AppEventCard: React.FC<Props> = ({ event, appData }) => {
 
 export default AppEventCard;
 
+const TempWrapper = styled.div`
+  margin-top: -3px;
+`;
+
 const ViewDetailsButton = styled.div<{ width?: string }>`
   border-radius: 5px;
   height: 30px;

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

@@ -80,7 +80,7 @@ const DeployEventCard: React.FC<Props> = ({ event, appData }) => {
               <Spacer inline x={1} />
               <TempWrapper>
                 <Link hasunderline onClick={() => setShowOverlay(true)}>
-                  Revert to v{event?.metadata?.revision}
+                  Revert to version {event?.metadata?.revision}
                 </Link>
               </TempWrapper>
             </>