fix: update deployment visualisation files

current/index.html

@@ -22,9 +22,12 @@ <h1>Currently deployed versions</h1>
         shown after the repository name. When there is a new version that is not
         yet on production, the line is highlighted with a
         <span style="background-color: #d1e7dd; padding: 2px">green color</span>
-        .
+        and there is a
+        <span class="badge rounded-pill text-bg-warning">On Stage</span> badge
+        next to the repo name.
       </p>
-      <table class="table">
+      <h2>Core Platform</h2>
+      <table class="table" id="core-table">
         <thead>
           <tr>
             <th scope="col">Repo</th>
@@ -33,7 +36,20 @@ <h1>Currently deployed versions</h1>
             <th scope="col">Prod version</th>
           </tr>
         </thead>
-        <tbody id="table-content"></tbody>
+        <tbody id="core-table-content"></tbody>
+      </table>
+
+      <h2>Apps and Unity simulations</h2>
+      <table class="table" id="app-table">
+        <thead>
+          <tr>
+            <th scope="col">Repo</th>
+            <th scope="col">Latest version</th>
+            <th scope="col">Staging version</th>
+            <th scope="col">Prod version</th>
+          </tr>
+        </thead>
+        <tbody id="app-table-content"></tbody>
       </table>
     </div>
     <script src="main.js"></script>

current/main.js

@@ -4,7 +4,7 @@ const VERSIONS = ["latest", "staging", "production"];
 async function loadData() {
   return Promise.all([
     fetch(
-      "https://raw.githubusercontent.com/graasp/graasp-deploy/main/staging-versions/latest.json"
+      "https://raw.githubusercontent.com/graasp/graasp-deploy/main/candidate-versions/latest.json"
     ).then((res) => res.json()),
     ...DEPLOYED_VERSIONS.map((version) =>
       fetch(
@@ -31,20 +31,24 @@ function createVersionCell(row, key) {
   return node;
 }
 
-function populateTable(data) {
-  var tableElement = document.getElementById("table-content");
+function populateTable(data, id) {
+  var tableElement = document.getElementById(`${id}-table-content`);
   data.forEach((repoData) => {
     var tableRow = document.createElement("tr");
 
     const repoCell = document.createElement("td");
     const elem = document.createElement("a");
     elem.className = "text-decoration-none";
-    elem.href = "https://github.com/graasp/graasp/";
+    elem.href = `https://github.com/${repoData.repo}/`;
 
     elem.innerHTML = `${repoData.repo} ${
       repoData.staging !== repoData.latest
         ? '<span class="badge rounded-pill bg-success">New version</span>'
         : ""
+    } ${
+      repoData.production !== repoData.staging
+        ? '<span class="badge rounded-pill text-bg-warning">On Stage</span>'
+        : ""
     }`;
     elem.target = "_blank";
 
@@ -69,13 +73,21 @@ async function main() {
   const dataArr = await loadData();
 
   const repoData = {};
+  const appData = {};
 
   VERSIONS.map((version, i) =>
-    dataArr[i].include.forEach(({ repository, tag }) => {
-      repoData[repository] = {
-        ...repoData[repository],
-        [version]: tag,
-      };
+    Object.entries(dataArr[i]).forEach(([repository, tag]) => {
+      if (repository.includes("-app-") || repository.includes("-unity-")) {
+        appData[repository] = {
+          ...appData[repository],
+          [version]: tag,
+        };
+      } else {
+        repoData[repository] = {
+          ...repoData[repository],
+          [version]: tag,
+        };
+      }
     })
   );
 
@@ -84,8 +96,14 @@ async function main() {
     .sort()
     .map((repo) => ({ repo, ...repoData[repo] }));
 
+  // sort repo names alphabetically
+  const appArr = Object.keys(appData)
+    .sort()
+    .map((repo) => ({ repo, ...appData[repo] }));
+
   // populate table with versions
-  populateTable(repoArr);
+  populateTable(repoArr, "core");
+  populateTable(appArr, "app");
 }
 
 main();