Extract a component for rendering benchmark request tag as commit SHA link

Author: Kobzol

site/frontend/src/pages/status_new/collector.vue

@@ -1,8 +1,14 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
 import {parseISO, differenceInHours} from "date-fns";
-import {formatISODate, shortenTag} from "../../utils/formatting";
-import {CollectorConfig, BenchmarkJobStatus, isJobComplete} from "./data";
+import {formatISODate} from "../../utils/formatting";
+import {
+  CollectorConfig,
+  BenchmarkJobStatus,
+  isJobComplete,
+  BenchmarkJob,
+} from "./data";
+import CommitSha from "./commit-sha.vue";
 
 const props = defineProps<{
   collector: CollectorConfig;
@@ -163,6 +169,7 @@ function toggleShowJobs() {
             <tr v-if="ACTIVE_FILTERS[job.status]">
               <td class="table-cell-padding">
                 {{ shortenTag(job.requestTag) }}
+                <CommitSha :tag="job.requestTag"></CommitSha>
               </td>
               <td class="table-cell-padding">
                 {{ formatJobStatus(job.status) }}

site/frontend/src/pages/status_new/commit-sha.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {computed} from "vue";
+
+const props = defineProps<{
+  tag: string;
+}>();
+
+const looksLikeSha = computed(() => props.tag.length === 40);
+</script>
+
+<template>
+  <a
+    v-if="looksLikeSha"
+    :href="'https://github.com/rust-lang/rust/commit/' + tag"
+  >
+    {{ tag.substring(0, 13) }}
+  </a>
+  <template v-else>
+    {{ tag }}
+  </template>
+</template>

site/frontend/src/pages/status_new/page.vue

@@ -14,6 +14,7 @@ import {
   StatusResponse,
 } from "./data";
 import Collector from "./collector.vue";
+import CommitSha from "./commit-sha.vue";
 
 const loading = ref(true);
 
@@ -116,18 +117,6 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) {
   );
 }
 
-function CommitSha({request}: {request: BenchmarkRequest}): string {
-  if (request.requestType === "Release") {
-    return request.tag;
-  }
-  const sha = request.tag;
-  return (
-    <a href={`https://github.com/rust-lang/rust/commit/${sha}`}>
-      {sha.substring(0, 13)}
-    </a>
-  );
-}
-
 function RequestProgress({
   request,
   collectors,
@@ -197,7 +186,7 @@ loadStatusData(loading);
               <tr :class="getRequestRowClassName(req)">
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
-                <td><CommitSha :request="req" /></td>
+                <td><CommitSha :tag="req.tag"></CommitSha></td>
                 <td>
                   {{ formatStatus(req.status)
                   }}{{

site/frontend/src/utils/formatting.ts

@@ -27,11 +27,3 @@ export function formatISODate(dateString?: string): string {
   }
   return "";
 }
-
-// Shorten a tag, only commit shas will be truncated
-export function shortenTag(tag: string): string {
-  if (tag.length < 40) {
-    return tag;
-  }
-  return tag.slice(0, 12);
-}