Merge pull request #2316 from jaimergp/view-raw-data

Author: beckermr

src/components/StatusDashboard/version_updates.jsx

@@ -37,6 +37,12 @@ export default function VersionUpdates({ onLoad }) {
             <span className="badge badge--secondary">{Object.keys(queued).length}</span>
             {" "}
             <span className="badge badge--warning">{Object.keys(errors).length}</span>
+            {" "}
+            <small className="fa fa-fw">
+              <a href={urls.versions.api} target="_blank" title="View raw payload">
+                <i className="fa fa-fw fa-arrow-up-right-from-square"></i>
+              </a>
+            </small>
         </h3>
       </div>
       <div className="card__body">

src/pages/status/migration/index.jsx

@@ -7,6 +7,8 @@ import React, { useEffect, useState } from "react";
 import SVG from 'react-inlinesvg';
 import styles from "./styles.module.css";
 import { Tooltip } from "react-tooltip";
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 // { Done, In PR, Awaiting PR, Awaiting parents, Not solvable, Bot error }
 // The third value is a boolean representing the default display state on load
@@ -90,8 +92,37 @@ export default function MigrationDetails() {
         <div className={`card margin-top--xs`}>
           <div className="card__header">
             <div className={styles.migration_details_toggle}>
-              <button onClick={() => toggle("table")}>Table View</button>{" "}
-              <button onClick={() => toggle("graph")}>Graph View</button>
+              <div class="tabs-container">
+                <ul role="tablist" aria-orientation="horizontal" class="tabs">
+                  <li
+                    key="table"
+                    role="tab"
+                    class={["tabs__item", (view == "table" ? "tabs__item--active" : null)].join(" ")}
+                    onClick={() => toggle("table")}
+                  >
+                    Table
+                  </li>
+                  <li
+                    key="graph"
+                    role="tab"
+                    class={["tabs__item", (view == "graph" ? "tabs__item--active" : null)].join(" ")}
+                    onClick={() => toggle("graph")}
+                  >
+                    Graph
+                  </li>
+                  {name &&
+                    <a href={urls.migrations.details.replace("<NAME>", name)} target="_blank">
+                      <li
+                        key="raw"
+                        role="tab"
+                        class="tabs__item"
+                      >
+                        <span>Raw <i className="fa fa-fw fa-arrow-up-right-from-square"></i></span>
+                      </li>
+                    </a>
+                  }
+                </ul>
+              </div>
             </div>
             <Breadcrumbs>{name}</Breadcrumbs>
             <div style={{ clear: "both" }}></div>