[ci_runner] Support build remotely and running locally via bash command

app/invocation/BUILD

@@ -97,7 +97,8 @@ ts_library(
     deps = [
         "//app/components/link",
         "//app/format",
-        "//proto:build_event_stream_ts_proto",
+        "//proto:invocation_status_ts_proto",
+        "//proto:invocation_ts_proto",
         "@npm//@types/react",
         "@npm//lucide-react",
         "@npm//react",
@@ -109,8 +110,7 @@ ts_library(
     srcs = ["child_invocations.tsx"],
     deps = [
         "//app/invocation:child_invocation_card",
-        "//app/invocation:invocation_model",
-        "//app/util:proto",
+        "//proto:invocation_ts_proto",
         "@npm//@types/react",
         "@npm//react",
     ],

app/invocation/child_invocation_card.tsx

@@ -1,40 +1,49 @@
 import React from "react";
 import format from "../format/format";
-import { build_event_stream } from "../../proto/build_event_stream_ts_proto";
-import { CheckCircle, PlayCircle, XCircle, CircleSlash, Timer } from "lucide-react";
+import { invocation } from "../../proto/invocation_ts_proto";
+import { CheckCircle, PlayCircle, XCircle, CircleSlash } from "lucide-react";
 import Link from "../components/link/link";
+import { invocation_status } from "../../proto/invocation_status_ts_proto";
 
-export type CommandStatus = "failed" | "succeeded" | "in-progress" | "queued" | "not-run";
-
-export type BazelCommandResult = {
-  status: CommandStatus;
-  invocation: InvocationMetadata;
-  durationMillis?: number;
-};
-
-export type InvocationMetadata =
-  | build_event_stream.WorkflowConfigured.IInvocationMetadata
-  | build_event_stream.ChildInvocationsConfigured.IInvocationMetadata;
+type CommandStatus = "failed" | "succeeded" | "in-progress" | "not-run";
 
 export type ChildInvocationCardProps = {
-  result: BazelCommandResult;
+  invocation: invocation.Invocation;
 };
 
 export default class ChildInvocationCard extends React.Component<ChildInvocationCardProps> {
-  private isClickable() {
-    return this.props.result.status !== "queued" && this.props.result.status !== "not-run";
+  private getStatus(): CommandStatus {
+    const inv = this.props.invocation;
+    switch (inv.invocationStatus) {
+      case invocation_status.InvocationStatus.COMPLETE_INVOCATION_STATUS:
+      case invocation_status.InvocationStatus.DISCONNECTED_INVOCATION_STATUS:
+        return inv.bazelExitCode == "SUCCESS" ? "succeeded" : "failed";
+      case invocation_status.InvocationStatus.PARTIAL_INVOCATION_STATUS:
+        return "in-progress";
+      default:
+        return "not-run";
+    }
+  }
+
+  private isClickable(status: CommandStatus): boolean {
+    return status !== "not-run";
+  }
+
+  private getDurationLabel(status: CommandStatus): string {
+    if (status == "failed" || status == "succeeded") {
+      return format.durationUsec(this.props.invocation.durationUsec);
+    }
+    return "";
   }
 
-  private renderStatusIcon() {
-    switch (this.props.result.status) {
+  private renderStatusIcon(status: CommandStatus) {
+    switch (status) {
       case "succeeded":
         return <CheckCircle className="icon" />;
       case "failed":
         return <XCircle className="icon" />;
       case "in-progress":
         return <PlayCircle className="icon" />;
-      case "queued":
-        return <Timer className="icon" />;
       case "not-run":
         return <CircleSlash className="icon" />;
       default:
@@ -44,15 +53,16 @@ export default class ChildInvocationCard extends React.Component<ChildInvocation
   }
 
   render() {
+    const status = this.getStatus();
+    const inv = this.props.invocation;
+    const command = `${inv.command} ${inv.pattern.join(" ")}`;
     return (
       <Link
-        className={`child-invocation-card status-${this.props.result.status} ${this.isClickable() ? "clickable" : ""}`}
-        href={this.isClickable() ? `/invocation/${this.props.result.invocation.invocationId}` : undefined}>
-        <div className="icon-container">{this.renderStatusIcon()}</div>
-        <div className="command">{this.props.result.invocation.bazelCommand}</div>
-        <div className="duration">
-          {this.props.result.durationMillis !== undefined && format.durationMillis(this.props.result.durationMillis)}
-        </div>
+        className={`child-invocation-card status-${status} ${this.isClickable(status) ? "clickable" : ""}`}
+        href={this.isClickable(status) ? `/invocation/${this.props.invocation.invocationId}` : undefined}>
+        <div className="icon-container">{this.renderStatusIcon(status)}</div>
+        <div className="command">{command}</div>
+        <div className="duration">{this.getDurationLabel(status)}</div>
       </Link>
     );
   }

app/invocation/child_invocations.tsx

@@ -1,61 +1,22 @@
 import React from "react";
-import InvocationModel from "./invocation_model";
-import ChildInvocationCard, { CommandStatus, InvocationMetadata } from "./child_invocation_card";
-import { BazelCommandResult } from "./child_invocation_card";
-import { durationToMillisWithFallback } from "../util/proto";
+import ChildInvocationCard from "./child_invocation_card";
+import { invocation } from "../../proto/invocation_ts_proto";
 
 export type ChildInvocationProps = {
-  model: InvocationModel;
+  childInvocations: invocation.Invocation[];
 };
 
 export default class ChildInvocations extends React.Component<ChildInvocationProps> {
-  private getDurationMillis(invocation: InvocationMetadata): number | undefined {
-    const completedEvent = this.props.model.childInvocationCompletedByInvocationId.get(invocation.invocationId ?? "");
-    if (!completedEvent) return undefined;
-    return durationToMillisWithFallback(completedEvent.duration, +(completedEvent?.durationMillis ?? 0));
-  }
-
   render() {
-    const childInvocationConfiguredEvents = this.props.model.childInvocationsConfigured;
-    let invocations = [];
-    for (let i = 0; i < childInvocationConfiguredEvents.length; i++) {
-      const event = childInvocationConfiguredEvents[i];
-      for (let inv of event.invocation) {
-        invocations.push(inv);
-      }
-    }
-
-    const results: BazelCommandResult[] = [];
-    let inProgressCount = 0;
-    const getStatus = (invocation: InvocationMetadata): CommandStatus => {
-      const completedEvent = this.props.model.childInvocationCompletedByInvocationId.get(invocation.invocationId ?? "");
-      if (completedEvent) {
-        return completedEvent.exitCode === 0 ? "succeeded" : "failed";
-      } else if (this.props.model.finished) {
-        return "not-run";
-      } else if (inProgressCount === 0) {
-        // Only one command should be marked in progress; the rest should be
-        // marked queued.
-        inProgressCount++;
-        return "in-progress";
-      } else {
-        return "queued";
-      }
-    };
-
-    for (const invocation of invocations) {
-      results.push({ invocation, status: getStatus(invocation), durationMillis: this.getDurationMillis(invocation) });
-    }
-
-    if (!results.length) return null;
+    if (!this.props.childInvocations.length) return null;
 
     return (
       <div className="child-invocations-section">
         <h2>Bazel commands</h2>
         <div className="subtitle">Click a command to see results.</div>
         <div className="child-invocations-list">
-          {results.map((result) => (
-            <ChildInvocationCard key={result.invocation.invocationId} result={result} />
+          {this.props.childInvocations.map((result) => (
+            <ChildInvocationCard key={result.invocationId} invocation={result} />
           ))}
         </div>
       </div>

app/invocation/invocation.tsx

@@ -60,6 +60,13 @@ interface State {
   runnerExecution?: execution_stats.Execution;
   runnerLastExecuteOperation?: ExecuteOperation;
 
+  /*
+   * We only need to update the child invocation cards right when they've started and ended.
+   * Memoize them on the client, so we don't need to keep fetching them from the
+   * db in the meantime.
+   */
+  childInvocations: invocation.Invocation[];
+
   keyboardShortcutHandle: string;
 }
 
@@ -80,6 +87,7 @@ export default class InvocationComponent extends React.Component<Props, State> {
     inProgress: false,
     error: null,
     keyboardShortcutHandle: "",
+    childInvocations: [],
   };
 
   private timeoutRef: number = 0;
@@ -88,6 +96,9 @@ export default class InvocationComponent extends React.Component<Props, State> {
   private modelChangedSubscription?: Subscription;
   private runnerExecutionRPC?: CancelablePromise;
 
+  private seenChildInvocationConfiguredIds = new Set<string>();
+  private seenChildInvocationCompletedIds = new Set<string>();
+
   componentWillMount() {
     document.title = `Invocation ${this.props.invocationId} | BuildBuddy`;
     // TODO(siggisim): Move moment configuration elsewhere
@@ -189,24 +200,36 @@ export default class InvocationComponent extends React.Component<Props, State> {
       this.fetchRunnerExecution();
     }
 
+    const fetchChildren = this.shouldFetchChildren(this.state.model);
     let request = new invocation.GetInvocationRequest();
     request.lookup = new invocation.InvocationLookup();
     request.lookup.invocationId = this.props.invocationId;
+    request.lookup.fetchChildInvocations = fetchChildren;
     rpcService.service
       .getInvocation(request)
       .then((response: invocation.GetInvocationResponse) => {
         console.log(response);
         if (!response.invocation || response.invocation.length === 0) {
           throw new BuildBuddyError("NotFound", "Invocation not found.");
         }
-        const model = new InvocationModel(response.invocation[0]);
+        const inv = response.invocation[0];
+        const model = new InvocationModel(inv);
         // Only show the in-progress screen if we don't have any events yet.
-        const showInProgressScreen = model.isInProgress() && !response.invocation[0].event?.length;
+        const showInProgressScreen = model.isInProgress() && !inv.event?.length;
+        // Only update the child invocations if we've fetched new updates.
+        const childInvocations = fetchChildren ? inv.childInvocations : this.state.childInvocations;
         this.setState({
           inProgress: showInProgressScreen,
           model: model,
           error: null,
+          childInvocations: childInvocations,
         });
+
+        if (fetchChildren) {
+          for (let child of childInvocations) {
+            this.seenChildInvocationConfiguredIds.add(child.invocationId);
+          }
+        }
       })
       .catch((error: any) => {
         console.error("Failed to fetch invocation:", error);
@@ -215,6 +238,29 @@ export default class InvocationComponent extends React.Component<Props, State> {
       .finally(() => this.setState({ loading: false }));
   }
 
+  shouldFetchChildren(model: InvocationModel | undefined): boolean {
+    if (!model) return true;
+    const childInvocationConfiguredEvents = model.childInvocationsConfigured;
+    let shouldFetch = false;
+
+    for (const event of childInvocationConfiguredEvents) {
+      for (let inv of event.invocation) {
+        if (!this.seenChildInvocationConfiguredIds.has(inv.invocationId)) {
+          shouldFetch = true;
+        }
+      }
+    }
+
+    for (const iid of model.childInvocationCompletedByInvocationId.keys()) {
+      if (!this.seenChildInvocationCompletedIds.has(iid)) {
+        this.seenChildInvocationCompletedIds.add(iid);
+        shouldFetch = true;
+      }
+    }
+
+    return shouldFetch;
+  }
+
   scheduleRefetch() {
     clearTimeout(this.timeoutRef);
     // Refetch invocation data in 3 seconds to update status.
@@ -463,7 +509,7 @@ export default class InvocationComponent extends React.Component<Props, State> {
           )}
           {!isBazelInvocation && (
             <div className="container">
-              <ChildInvocations model={this.state.model} />
+              <ChildInvocations childInvocations={this.state.childInvocations} />
             </div>
           )}
         </div>

app/invocation/invocation_model.tsx

@@ -51,10 +51,7 @@ export default class InvocationModel {
   failedAction?: build_event_stream.BuildEvent;
   workflowConfigured?: build_event_stream.WorkflowConfigured;
   childInvocationsConfigured: build_event_stream.ChildInvocationsConfigured[] = [];
-  childInvocationCompletedByInvocationId = new Map<
-    string,
-    build_event_stream.IChildInvocationCompleted | build_event_stream.IWorkflowCommandCompleted
-  >();
+  childInvocationCompletedByInvocationId = new Map<string, build_event_stream.IChildInvocationCompleted>();
   workspaceStatus?: build_event_stream.WorkspaceStatus;
   configuration?: build_event_stream.Configuration;
   workspaceConfig?: build_event_stream.WorkspaceConfig;
@@ -145,12 +142,6 @@ export default class InvocationModel {
           buildEvent.childInvocationsConfigured as build_event_stream.ChildInvocationsConfigured
         );
       }
-      if (buildEvent.workflowCommandCompleted && buildEvent.id?.workflowCommandCompleted?.invocationId) {
-        this.childInvocationCompletedByInvocationId.set(
-          buildEvent.id.workflowCommandCompleted.invocationId,
-          buildEvent.workflowCommandCompleted
-        );
-      }
       if (buildEvent.childInvocationCompleted && buildEvent.id?.childInvocationCompleted?.invocationId) {
         this.childInvocationCompletedByInvocationId.set(
           buildEvent.id.childInvocationCompleted.invocationId,

cli/remotebazel/BUILD

@@ -21,6 +21,7 @@ go_library(
         "//proto:build_event_stream_go_proto",
         "//proto:buildbuddy_service_go_proto",
         "//proto:eventlog_go_proto",
+        "//proto:execution_stats_go_proto",
         "//proto:git_go_proto",
         "//proto:invocation_go_proto",
         "//proto:remote_execution_go_proto",
@@ -39,6 +40,7 @@ go_library(
         "@com_github_go_git_go_git_v5//plumbing",
         "@org_golang_google_genproto_googleapis_bytestream//:bytestream",
         "@org_golang_google_grpc//metadata",
+        "@org_golang_x_sync//errgroup",
         "@org_golang_x_sys//unix",
     ],
 )