[POR-1885] [POR-1864] Add links commit sha to events, clear up unnumb…

…ered revisions (#3810)
porter-dev · Oct 13, 2023 · 9cdd24a · 9cdd24a
1 parent 277a3ef
commit 9cdd24a
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 127 deletions.
diff --git a/cli/cmd/v2/app_events.go b/cli/cmd/v2/app_events.go
@@ -13,7 +13,7 @@ import (
 	"github.com/porter-dev/porter/internal/telemetry"
 )
 
-func createBuildEvent(ctx context.Context, client api.Client, applicationName string, projectId uint, clusterId uint, deploymentTargetID string) (string, error) {
+func createBuildEvent(ctx context.Context, client api.Client, applicationName string, projectId uint, clusterId uint, deploymentTargetID string, commitSHA string) (string, error) {
 	ctx, span := telemetry.NewSpan(ctx, "create-build-event")
 	defer span.End()
 
@@ -53,6 +53,8 @@ func createBuildEvent(ctx context.Context, client api.Client, applicationName st
 		}
 	}
 
+	req.Metadata["commit_sha"] = commitSHA
+
 	event, err := client.CreateOrUpdatePorterAppEvent(ctx, projectId, clusterId, applicationName, req)
 	if err != nil {
 		fmt.Println("could not create build event")
@@ -62,7 +64,7 @@ func createBuildEvent(ctx context.Context, client api.Client, applicationName st
 	return event.ID, nil
 }
 
-func createPredeployEvent(ctx context.Context, client api.Client, applicationName string, projectId, clusterId uint, deploymentTargetID string, createdAt time.Time, appRevisionID string) (string, error) {
+func createPredeployEvent(ctx context.Context, client api.Client, applicationName string, projectId, clusterId uint, deploymentTargetID string, createdAt time.Time, appRevisionID string, commitSHA string) (string, error) {
 	ctx, span := telemetry.NewSpan(ctx, "create-predeploy-event")
 	defer span.End()
 
@@ -74,6 +76,7 @@ func createPredeployEvent(ctx context.Context, client api.Client, applicationNam
 	}
 	req.Metadata["start_time"] = createdAt
 	req.Metadata["app_revision_id"] = appRevisionID
+	req.Metadata["commit_sha"] = commitSHA
 
 	event, err := client.CreateOrUpdatePorterAppEvent(ctx, projectId, clusterId, applicationName, req)
 	if err != nil {

diff --git a/cli/cmd/v2/apply.go b/cli/cmd/v2/apply.go
@@ -181,7 +181,7 @@ func Apply(ctx context.Context, inp ApplyInput) error {
 	if applyResp.CLIAction == porterv1.EnumCLIAction_ENUM_CLI_ACTION_BUILD {
 		color.New(color.FgGreen).Printf("Building new image...\n") // nolint:errcheck,gosec
 
-		eventID, _ := createBuildEvent(ctx, client, appName, cliConf.Project, cliConf.Cluster, deploymentTargetID)
+		eventID, _ := createBuildEvent(ctx, client, appName, cliConf.Project, cliConf.Cluster, deploymentTargetID, commitSHA)
 
 		reportBuildFailureInput := reportBuildFailureInput{
 			client:             client,
@@ -279,7 +279,7 @@ func Apply(ctx context.Context, inp ApplyInput) error {
 		color.New(color.FgGreen).Printf("Waiting for predeploy to complete...\n") // nolint:errcheck,gosec
 
 		now := time.Now().UTC()
-		eventID, _ := createPredeployEvent(ctx, client, appName, cliConf.Project, cliConf.Cluster, deploymentTargetID, now, applyResp.AppRevisionId)
+		eventID, _ := createPredeployEvent(ctx, client, appName, cliConf.Project, cliConf.Cluster, deploymentTargetID, now, applyResp.AppRevisionId, commitSHA)
 		metadata := make(map[string]interface{})
 		eventStatus := types.PorterAppEventStatus_Success
 		for {

diff --git a/dashboard/src/components/porter/Link.tsx b/dashboard/src/components/porter/Link.tsx
@@ -10,6 +10,7 @@ type Props = {
   hasunderline?: boolean;
   color?: string;
   hoverColor?: string;
+  showTargetBlankIcon?: boolean;
 };
 
 const Link: React.FC<Props> = ({
@@ -20,16 +21,15 @@ const Link: React.FC<Props> = ({
   hasunderline,
   color = "#ffffff",
   hoverColor,
+  showTargetBlankIcon = true,
 }) => {
   return (
     <LinkWrapper hoverColor={hoverColor} color={color}>
       {to ? (
         <StyledLink to={to} target={target} color={color}>
           {children}
-          {target === "_blank" && (
-            <div>
-              <Svg data-testid="geist-icon" fill="none" height="1em" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" strokeLinejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" data-darkreader-inline-stroke="" data-darkreader-inline-color=""><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></Svg>
-            </div>
+          {target === "_blank" && showTargetBlankIcon && (
+              <Svg color={color} hoverColor={hoverColor} data-testid="geist-icon" fill="none" height="1em" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" strokeLinejoin="round" stroke-width="2" viewBox="0 0 24 24" width="1em" data-darkreader-inline-stroke="" data-darkreader-inline-color=""><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></Svg>
           )}
         </StyledLink>
       ) : (
@@ -44,11 +44,9 @@ const Link: React.FC<Props> = ({
 
 export default Link;
 
-const Svg = styled.svg`
-  margin-bottom: -1px;
+const Svg = styled.svg<{ color: string, hoverColor?: string }>`
   margin-left: 5px;
-  color: #ffffff;
-  stroke: #ffffff;
+  stroke: ${(props) => props.color};
   stroke-width: 2;
 `;
 
@@ -93,5 +91,9 @@ const LinkWrapper = styled.span<{ hoverColor?: string, color: string }>`
     ${Underline} {
       background-color: ${({ hoverColor, color }) => hoverColor ?? color};
     }
+
+    svg {
+      stroke: ${({ hoverColor, color }) => hoverColor ?? color};
+    }
   };
 `;
diff --git a/...d/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/BuildEventCard.tsx b/...d/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/BuildEventCard.tsx
@@ -12,29 +12,43 @@ import Spacer from "components/porter/Spacer";
 import Link from "components/porter/Link";
 import Icon from "components/porter/Icon";
 import { getDuration, getStatusColor, getStatusIcon, triggerWorkflow } from '../utils';
-import { StyledEventCard } from "./EventCard";
+import { Code, ImageTagContainer, CommitIcon, StyledEventCard } from "./EventCard";
 import document from "assets/document.svg";
 import { PorterAppBuildEvent } from "../types";
-import { useLatestRevision } from "main/home/app-dashboard/app-view/LatestRevisionContext";
+import { match } from "ts-pattern";
+import pull_request_icon from "assets/pull_request_icon.svg";
+import { PorterAppRecord } from "main/home/app-dashboard/app-view/AppView";
 
 type Props = {
   event: PorterAppBuildEvent;
   appName: string;
   projectId: number;
   clusterId: number;
+  gitCommitUrl: string;
+  displayCommitSha: string;
+  porterApp: PorterAppRecord;
 };
 
-const BuildEventCard: React.FC<Props> = ({ event, appName, projectId, clusterId }) => {
-  const { porterApp } = useLatestRevision();
+const BuildEventCard: React.FC<Props> = ({ 
+  event, 
+  appName, 
+  projectId, 
+  clusterId,
+  gitCommitUrl,
+  displayCommitSha, 
+  porterApp,
+}) => {
   const renderStatusText = (event: PorterAppBuildEvent) => {
-    switch (event.status) {
-      case "SUCCESS":
-        return <Text color={getStatusColor(event.status)}>Build succeeded</Text>;
-      case "FAILED":
-        return <Text color={getStatusColor(event.status)}>Build failed</Text>;
-      default:
-        return <Text color={getStatusColor(event.status)}>Build in progress...</Text>;
-    }
+    const color = getStatusColor(event.status);
+    return (
+      <StatusContainer color={color}>
+        {match(event.status)
+          .with("SUCCESS", () => "Build successful")
+          .with("FAILED", () => "Build failed")
+          .otherwise(() => "Build in progress...")
+        }
+      </StatusContainer>
+    );
   };
 
   const renderInfoCta = (event: PorterAppBuildEvent) => {
@@ -48,7 +62,7 @@ const BuildEventCard: React.FC<Props> = ({ event, appName, projectId, clusterId
               <Container row>
                 <Icon src={document} height="10px" />
                 <Spacer inline width="5px" />
-                View details
+                View build logs
               </Container>
             </Link>
             <Spacer inline x={1} />
@@ -88,6 +102,17 @@ const BuildEventCard: React.FC<Props> = ({ event, appName, projectId, clusterId
           <Icon height="16px" src={build} />
           <Spacer inline width="10px" />
           <Text>Application build</Text>
+          {gitCommitUrl && displayCommitSha &&
+            <>
+              <Spacer inline x={0.5} />
+              <ImageTagContainer>
+                <Link to={gitCommitUrl} target="_blank" showTargetBlankIcon={false}>
+                  <CommitIcon src={pull_request_icon} />
+                  <Code>{displayCommitSha}</Code>
+                </Link>
+              </ImageTagContainer> 
+            </>
+          }
         </Container>
         <Container row>
           <Icon height="14px" src={run_for} />
@@ -113,5 +138,14 @@ const BuildEventCard: React.FC<Props> = ({ event, appName, projectId, clusterId
 export default BuildEventCard;
 
 const Wrapper = styled.div`
+  display: flex;
+  height: 20px;
   margin-top: -3px;
 `;
+
+const StatusContainer = styled.div<{ color: string }>`
+  display: flex;
+  align-items: center;
+  color: ${props => props.color};
+  font-size: 13px;
+`;