Add compatibility for structured status reports of errors

src/components/ErrorMessageDetails/index.jsx

@@ -0,0 +1,30 @@
+export default function ErrorMessageDetails({ details }) {
+  console.log(details);
+  let children = [];
+  if (details.messages) {
+    if (details.kind) {
+      children.push(<span className="badge badge--warning">
+        {details.kind && details.kind || "error"}
+        {details.base_branch && ` @ ${details.base_branch}` || null}
+        {details.attempts && ` after ${details.attempts.toFixed(1)} attempts` || null}
+      </span>)
+    }
+    if (details.url) {
+      children.push(
+        <a href={details.url} target="_blank" title="View CI job" style={{ marginLeft: "1em"}}>
+          View CI job{" "}
+          <small className="fa fa-fw">
+            <i className="fa fa-fw fa-arrow-up-right-from-square"></i>
+          </small>
+        </a>
+      )
+    }
+    for (const message of details.messages) {
+      children.push(<pre>{message}</pre>)
+    }
+  /* Legacy: string only values */
+  } else {
+    children.push(<pre>{details.toString()}</pre>)
+  }
+  return <>{children}</>
+}

src/components/StatusDashboard/version_updates.jsx

@@ -2,6 +2,7 @@ import Link from "@docusaurus/Link";
 import { urls } from "@site/src/constants";
 import React, { useEffect, useState } from "react";
 import styles from "./styles.module.css";
+import ErrorMessageDetails from "@site/src/components/ErrorMessageDetails";
 
 export default function VersionUpdates({ onLoad }) {
   const [{ collapsed, expanded, errors, queued }, setState] =
@@ -97,7 +98,7 @@ export default function VersionUpdates({ onLoad }) {
               </div>
               <div className={styles.errored_item_content}
                 style={{ display: !expanded[name] && "none" }}>
-                <pre>{ message }</pre>
+                <ErrorMessageDetails details={ message }/>
               </div>
             </React.Fragment>
           ))}

src/pages/status/migration/index.jsx

@@ -14,6 +14,7 @@ import { compare } from '@site/src/components/StatusDashboard/current_migrations
 import { useSorting, SortableHeader } from '@site/src/components/SortableTable';
 import * as d3 from "d3";
 import DependencyGraph from "@site/src/components/DependencyGraph";
+import ErrorMessageDetails from "@site/src/components/ErrorMessageDetails";
 
 // GitHub GraphQL MergeStateStatus documentation
 // Reference: https://docs.github.com/en/graphql/reference/enums#mergestatestatus
@@ -593,9 +594,9 @@ function Row({ children }) {
         </React.Fragment>))}
       </td>
     </tr>
-    {details && !collapsed && (<tr>
-      <td colSpan={6}><pre>{ details }</pre></td>
-    </tr>)}
+    {details && !collapsed && (
+      <tr><td colSpan={6}><ErrorMessageDetails details={details}/></td></tr>
+    )}
   </>);
 }