Merge pull request #2238 from Jamesbarford/fix/queue-ordering

Fix; queue ordering and errors formatting

Author: Kobzol

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

@@ -5,6 +5,7 @@ import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
 import {formatSecondsAsDuration} from "../../utils/formatting";
+import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
   BenchmarkRequestStatus,
@@ -97,6 +98,15 @@ function formatStatus(status: BenchmarkRequestStatus): string {
   }
 }
 
+function hasErrors(errors: Dict<string>) {
+  return Object.keys(errors).length !== 0;
+}
+
+function getErrorsLength(errors: Dict<string>) {
+  const errorsLen = Object.keys(errors).length;
+  return `${errorsLen} ${errorsLen > 1 ? "s" : ""}`;
+}
+
 function PullRequestLink({request}: {request: BenchmarkRequest}) {
   if (request.requestType === "Release") {
     return "";
@@ -108,6 +118,9 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) {
   );
 }
 
+const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} =
+  useExpandedStore();
+
 loadStatusData(loading);
 </script>
 
@@ -145,10 +158,28 @@ loadStatusData(loading);
                     req.status === "Completed" && req.hasPendingJobs ? "*" : ""
                   }}
                 </td>
-                <td v-html="req.createdAt"></td>
+                <td v-html="req.completedAt"></td>
                 <td v-html="getDuration(req)"></td>
-                <td>
-                  <pre>{{ req.errors }}</pre>
+
+                <td v-if="hasErrors(req.errors)">
+                  <button @click="toggleExpandedErrors(req.tag)">
+                    {{ hasExpandedErrors(req.tag) ? "Hide" : "Show" }}
+                    {{ getErrorsLength(req.errors) }}
+                  </button>
+                </td>
+                <td v-else></td>
+              </tr>
+
+              <tr v-if="hasExpandedErrors(req.tag)">
+                <td colspan="7" style="padding: 10px 0">
+                  <div v-for="benchmark in Object.entries(req.errors)">
+                    <div>
+                      <details open>
+                        <summary>{{ benchmark[0] }}</summary>
+                        <pre class="error">{{ benchmark[1] }}</pre>
+                      </details>
+                    </div>
+                  </div>
                 </td>
               </tr>
             </template>