Add more pipelines to /bazelci page (bazelbuild#2047)

- Added `Gogole Bazel Presubmit` pipeline   
-  Allow switch to branches other than `master`.

dashboard/client/pages/bazelci.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import Layout from "../src/Layout";
-import { useBuildkiteBuildStats } from "../src/data/BuildkiteBuildStats";
+import {
+  useBuildkiteBuildStats,
+  useBuildkitePipelineBranches,
+} from "../src/data/BuildkiteBuildStats";
 import { useBuildkiteJobStats } from "../src/data/BuildkiteJobStats";
 import {
   Area,
@@ -14,6 +17,8 @@ import {
 import { DateTime } from "luxon";
 import { intervalToDuration } from "date-fns";
 import _ from "lodash";
+import { useRouter } from "next/router";
+import Link from "next/link";
 
 function formatDuration(dur: Duration) {
   var items = [
@@ -261,40 +266,94 @@ function JobStats({
   );
 }
 
+const pipelines: {
+  [key: string]: { name: string; org: string; pipeline: string };
+} = {
+  "bazel-bazel-master": {
+    name: "Bazel",
+    org: "bazel",
+    pipeline: "bazel-bazel",
+  },
+  "google-bazel-presubmit": {
+    name: "Google Bazel Presubmit",
+    org: "bazel",
+    pipeline: "google-bazel-presubmit",
+  },
+};
+
 export default function Page() {
+  const router = useRouter();
+  const pipelineId = router.query.id;
+  const { name, org, pipeline } =
+    pipelines[pipelineId as string] || pipelines["bazel-bazel-master"];
+
+  const [branch, setBranch] = useState<string>("master");
   const [domain, setDomain] = useState<number[]>();
   const [monthOffset, setMonthOffset] = useState<number>(-1);
   const [excludeWaitTime, setExcludeWaitTime] = useState<boolean>(false);
   const [useBuildDomain, setUseBuildDomain] = useState<boolean>(true);
+  const { data: branches } = useBuildkitePipelineBranches(org, pipeline);
 
   const param = useMemo(() => {
     return {
-      org: "bazel",
-      pipeline: "bazel-bazel",
-      branch: "master",
+      org,
+      pipeline,
+      branch,
       from:
         monthOffset < 0
           ? DateTime.now().minus({ month: -monthOffset }).toISO()
           : DateTime.fromSeconds(0).toISO(),
     };
-  }, [monthOffset]);
+  }, [org, pipeline, branch, monthOffset]);
 
   return (
     <Layout>
       <div className="m-8 flex flex-col gap-8">
+        <div className="flex flex-row gap-4">
+          {Object.entries(pipelines).map(([id, pipeline]) => {
+            return (
+              <Link key={id} href={`/bazelci?id=${id}`}>
+                <a
+                  className={`text-black-600 ${
+                    id == pipelineId ? "font-bold" : ""
+                  }`}
+                  onClick={() => setBranch("master")}
+                >
+                  {pipeline.name}
+                </a>
+              </Link>
+            );
+          })}
+        </div>
         <div className="flex flex-row">
           <p className="flex-auto">
-            The times of successful builds in Bazel's{" "}
+            The times of successful builds in{" "}
             <a
               className="text-blue-600"
               target="_blank"
-              href="https://buildkite.com/bazel/bazel-bazel/builds?branch=master"
+              href={`https://buildkite.com/${org}/${pipeline}/builds?branch=${branch}`}
             >
-              postsubmit
+              {name}, {branch}{" "}
             </a>
-            :
+            branch :
           </p>
           <div className="flex flex-row space-x-2">
+            <label>
+              <span className="mx-2">Branch:</span>
+              <select
+                value={branch}
+                onChange={(e) => {
+                  setBranch(e.target.value);
+                }}
+              >
+                {(branches || []).map((branch) => (
+                  <option key={branch} value={branch}>
+                    {branch}
+                  </option>
+                ))}
+              </select>
+            </label>
+
             <label>
               <span className="mx-2">Time:</span>
               <select

dashboard/client/src/data/BuildkiteBuildStats.ts

@@ -44,3 +44,20 @@ export function useBuildkiteBuildStats(
     loading: !error && !data,
   };
 }
+
+export function useBuildkitePipelineBranches(org: string, pipeline: string) {
+  const { data, error } = useSWR(
+    queryString.stringifyUrl(
+      {
+        url: `/api/buildkite/organizations/${org}/pipelines/${pipeline}/branches`,
+      },
+      { skipNull: true }
+    ),
+    fetcher
+  );
+  return {
+    data: data as string[],
+    error,
+    loading: !error && !data,
+  };
+}

dashboard/server/src/main/java/build/bazel/dashboard/buildkite/build/BuildkiteBuildRepo.java

@@ -24,6 +24,21 @@ public class BuildkiteBuildRepo {
   private final DatabaseClient databaseClient;
   private final ObjectMapper objectMapper;
 
+  public List<String> findBranches(String org, String pipeline) {
+    return databaseClient
+        .sql(
+            "SELECT branch FROM buildkite_job_mview "
+                + "WHERE org=:org AND pipeline=:pipeline "
+                + "GROUP BY branch "
+                + "ORDER BY MAX(build_created_at) DESC, branch")
+        .bind("org", org)
+        .bind("pipeline", pipeline)
+        .map(row -> requireNonNull(row.get("branch", String.class)))
+        .all()
+        .collectList()
+        .block();
+  }
+
   public Optional<BuildkiteBuild> findOne(String org, String pipeline, int buildNumber) {
     return Optional.ofNullable(
         databaseClient

dashboard/server/src/main/java/build/bazel/dashboard/buildkite/build/BuildkiteBuildRestController.java

@@ -8,6 +8,7 @@
 import io.reactivex.rxjava3.core.Maybe;
 import io.reactivex.rxjava3.core.Single;
 import java.time.Instant;
+import java.util.List;
 import java.util.Optional;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -52,4 +53,10 @@ public Single<JobStats> findJobStats(
   ) {
     return single(() -> buildkiteBuildService.findJobStats(org, pipeline, branch, from, to));
   }
+
+  @GetMapping("/buildkite/organizations/{org}/pipelines/{pipeline}/branches")
+  public Single<List<String>> findJobStats(
+      @PathVariable("org") String org, @PathVariable("pipeline") String pipeline) {
+    return single(() -> buildkiteBuildService.findBranches(org, pipeline));
+  }
 }

dashboard/server/src/main/java/build/bazel/dashboard/buildkite/build/BuildkiteBuildService.java

@@ -119,4 +119,8 @@ public JobStats findJobStats(String org, String pipeline, @Nullable String branc
     }
     return buildkiteBuildRepo.findJobStats(org, pipeline, branch, from, to);
   }
+
+  public List<String> findBranches(String org, String pipeline) {
+    return buildkiteBuildRepo.findBranches(org, pipeline);
+  }
 }