[status] Fix links to task drivers

Bug: b/491418947
Change-Id: If44edb101c40294e3a2e8bbbf19903632e323375
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/1236476
Commit-Queue: Kaylee Lubick <kjlubick@google.com>
Auto-Submit: Eric Boren <borenet@google.com>
Reviewed-by: Kaylee Lubick <kjlubick@google.com>
diff --git a/status/modules/details-dialog-sk/details-dialog-sk.ts b/status/modules/details-dialog-sk/details-dialog-sk.ts
index 6abcf57..feda752 100644
--- a/status/modules/details-dialog-sk/details-dialog-sk.ts
+++ b/status/modules/details-dialog-sk/details-dialog-sk.ts
@@ -175,23 +175,77 @@
         : html``}
     `;
 
-    const td = fetch(`/json/td/${task.id}`)
+    const tdData = fetch(`/json/td/${task.id}`)
       .then(jsonOrThrow)
-      .then(
-        (td) => html`
-          ${until(
-            summaryData.then((s) =>
-              s && (s.errorMessage || s.analysis)
-                ? html`<table class="task-info">
-                    ${summaryRows(s)}
-                  </table>`
-                : html``
-            ),
-            html``
-          )}
-          <br /><task-driver-sk id="tdStatus" .data=${td} embedded></task-driver-sk>
-        `
-      );
+      .catch(() => null);
+
+    const detailsTable = html`
+      <div>
+        <table class="task-info">
+          <tr>
+            <td>Status:</td>
+            <td class=${`task-${(task.status || 'PENDING').toLowerCase()}`}>${task.status}</td>
+          </tr>
+          ${until(summaryData.then(summaryRows), html``)}
+          <tr>
+            <td>Context:</td>
+            <td>
+              <a href=${this.taskUrl(task)} target="_blank" rel="noopener noreferrer">
+                View on Task Scheduler
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td>This Task:</td>
+            <td>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="${this.swarmingTaskUrl(task.taskExecutor, task.swarmingTaskId)}">
+                View on Swarming
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td>Other Tasks Like This:</td>
+            <td>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href=${this.swarmingTaskListUrl(task.taskExecutor, task.name)}>
+                View on Swarming
+              </a>
+            </td>
+          </tr>
+        </table>
+      </div>
+    `;
+
+    const td = tdData.then((data) => {
+      if (!data) {
+        return detailsTable;
+      }
+      return html`
+        ${until(
+          summaryData.then((s) =>
+            s && (s.errorMessage || s.analysis)
+              ? html`<table class="task-info">
+                  ${summaryRows(s)}
+                </table>`
+              : html``
+          ),
+          html``
+        )}
+        <br /><task-driver-sk id="tdStatus" .data=${data} embedded></task-driver-sk>
+      `;
+    });
+
+    const launchUrl = tdData.then((data) => {
+      if (data) {
+        return `https://task-driver.skia.org/td/${task.id}`;
+      }
+      return logsUrl(this.repo, task.swarmingTaskId);
+    });
 
     this.titleSection = html`
       <h3>
@@ -199,57 +253,14 @@
         ><a
           target="_blank"
           rel="noopener noreferrer"
-          href="${logsUrl(this.repo, task.swarmingTaskId)}"
+          href="${until(launchUrl, logsUrl(this.repo, task.swarmingTaskId))}"
           ><launch-icon-sk></launch-icon-sk>
         </a>
       </h3>
     `;
 
     this.detailsSection = html`
-      ${until(
-        td,
-        html`
-          <div>
-            <table class="task-info">
-              <tr>
-                <td>Status:</td>
-                <td class=${`task-${(task.status || 'PENDING').toLowerCase()}`}>${task.status}</td>
-              </tr>
-              ${until(summaryData.then(summaryRows), html``)}
-              <tr>
-                <td>Context:</td>
-                <td>
-                  <a href=${this.taskUrl(task)} target="_blank" rel="noopener noreferrer">
-                    View on Task Scheduler
-                  </a>
-                </td>
-              </tr>
-              <tr>
-                <td>This Task:</td>
-                <td>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="${this.swarmingTaskUrl(task.taskExecutor, task.swarmingTaskId)}">
-                    View on Swarming
-                  </a>
-                </td>
-              </tr>
-              <tr>
-                <td>Other Tasks Like This:</td>
-                <td>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href=${this.swarmingTaskListUrl(task.taskExecutor, task.name)}>
-                    View on Swarming
-                  </a>
-                </td>
-              </tr>
-            </table>
-          </div>
-        `
-      )}
+      ${until(td, detailsTable)}
       <h3>Blamelist</h3>
       <table class="blamelist">
         ${task.commits?.map((hash: string) => {
diff --git a/status/modules/details-dialog-sk/details-dialog-sk_test.ts b/status/modules/details-dialog-sk/details-dialog-sk_test.ts
index 9ba4b04..fe29713 100644
--- a/status/modules/details-dialog-sk/details-dialog-sk_test.ts
+++ b/status/modules/details-dialog-sk/details-dialog-sk_test.ts
@@ -74,6 +74,7 @@
     });
     element.displayTask(task, [comment], commitsByHash);
     await fetchMock.flush(true);
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
     expect($$('button.action', element)).to.have.property('innerText', 'Re-run Job');
     // The task summary has an error message which, in addition to the task
@@ -94,6 +95,7 @@
     fetchMock.getOnce('path:/json/td/999990', taskDriverData);
     element.displayTask(task, [comment], commitsByHash);
     await fetchMock.flush(true);
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
     expect($$('button.action', element)).to.have.property('innerText', 'Re-run Job');
     // No simple title with status, we have the task-driver-sk instead.
@@ -103,6 +105,8 @@
     expect($('hr', element)).to.have.length(1);
     expect($('table.blamelist tr', element)).to.have.length(2);
     expect($('table.comments tr.comment', element)).to.have.length(1);
+
+    expect($$('h3 a', element)).to.have.property('href', 'https://task-driver.skia.org/td/999990');
   });
 
   it('displays tasks with summary and taskdriver', async () => {
@@ -113,6 +117,7 @@
     fetchMock.getOnce('path:/json/td/999990', taskDriverData);
     element.displayTask(task, [comment], commitsByHash);
     await fetchMock.flush(true);
+    await new Promise((resolve) => setTimeout(resolve, 0));
 
     expect($$('button.action', element)).to.have.property('innerText', 'Re-run Job');
     // The task summary has an error message which gives us one element with
@@ -123,6 +128,8 @@
     expect($('hr', element)).to.have.length(1);
     expect($('table.blamelist tr', element)).to.have.length(2);
     expect($('table.comments tr.comment', element)).to.have.length(1);
+
+    expect($$('h3 a', element)).to.have.property('href', 'https://task-driver.skia.org/td/999990');
   });
 
   it('displays taskspec', () => {