Merge pull request #2269 from Jamesbarford/fix/more-screen-responsive-status-page

Fix; 12 chars for a tag and a more responsive collectors grid

Author: Kobzol

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

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
 import {parseISO, differenceInHours} from "date-fns";
-import {formatISODate} from "../../utils/formatting";
+import {formatISODate, shortenTag} from "../../utils/formatting";
 import {CollectorConfig, BenchmarkJobStatus} from "./data";
 
 const props = defineProps<{
@@ -149,7 +149,7 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
           <template v-for="job in collector.jobs">
             <tr v-if="ACTIVE_FILTERS[job.status]">
               <td class="table-cell-padding">
-                {{ job.requestTag }}
+                {{ shortenTag(job.requestTag) }}
               </td>
               <td class="table-cell-padding">
                 {{ formatJobStatus(job.status) }}

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

@@ -4,7 +4,11 @@ import {h, ref, Ref} from "vue";
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatSecondsAsDuration, formatISODate} from "../../utils/formatting";
+import {
+  formatSecondsAsDuration,
+  formatISODate,
+  shortenTag,
+} from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
@@ -150,7 +154,7 @@ loadStatusData(loading);
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
                 <td>
-                  {{ req.tag }}
+                  {{ shortenTag(req.tag) }}
                 </td>
                 <td>
                   {{ formatStatus(req.status)
@@ -324,7 +328,7 @@ loadStatusData(loading);
 .collectors-grid {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(500px, 100%));
   gap: 20px;
 }
 </style>

site/frontend/src/utils/formatting.ts

@@ -27,3 +27,11 @@ 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);
+}