From 040c215a446b30f5f1110bcd1e9129b6946549e2 Mon Sep 17 00:00:00 2001
From: gursewak <gurssing@redhat.com>
Date: Oct 20 2021 19:20:21 +0000
Subject: Adding dropdown to select an arch to display info on overview page


---

diff --git a/sites/static/js/coreos-release-notes.js b/sites/static/js/coreos-release-notes.js
index d89a736..dc0624f 100644
--- a/sites/static/js/coreos-release-notes.js
+++ b/sites/static/js/coreos-release-notes.js
@@ -100,7 +100,7 @@ function gatherMetadataBtwReleases(currentReleaseIdx, targetReleaseIdx, config) 
   metaPromiseList.push(metaPromise);
   return Promise.all(metaPromiseList)
     .then(metaList => {
-      if (metaList[0][1]['parent-pkgdiff'] == null) {
+      if (metaList[0][0][1]['parent-pkgdiff'] == null) {
         for (let i = currentReleaseIdx + 1; i < targetReleaseIdx; i++) {
           let metaPromise = fetchBuildMeta(base, builds[i], legacy);
           metaPromiseList.push(metaPromise);
@@ -267,19 +267,32 @@ function fetchBuild(base, legacy, builds, fromIdx, toIdx) {
   let config = { builds, base, legacy };
   return gatherMetadataBtwReleases(fromIdx, toIdx, config).then(metaList => {
     let build = builds[fromIdx];
-    let [basearch, meta] = metaList[0];
-    // check if `parent-pkgdiff` field is present, if present there's no need to manually
-    // calculate pkgdiff here, use the field directly
-    // xref: https://github.com/coreos/fedora-coreos-pipeline/pull/247#event-3413080221
-    meta.pkgdiff = meta['parent-pkgdiff'] == null ? getPkgDiffFromMetaList(metaList) : meta['parent-pkgdiff'];
-    sortPkgDiff(meta);
-    build.meta = meta;
-    // and fetch extra commit metadata in async
-    return fetchBuildCommitMeta(base, build, basearch, legacy).then(commitmeta => {
-      commitmeta["importantPkgs"] = findImportantPkgs(commitmeta);
-      commitmeta["showImportantPkgsOnly"] = true;
-      build.commitmeta = commitmeta;
-      builds[fromIdx] = build;
+    metaList.forEach(metaListData => {
+      var meta = {}
+      var finalCommitMeta = {}
+      metaListData.forEach(metaForEachArch => {
+        let basearch= metaForEachArch[0];
+        // Adding meta for each architecture
+        meta[basearch] = metaForEachArch[1]
+        // check if `parent-pkgdiff` field is present, if present there's no need to manually
+        // calculate pkgdiff here, use the field directly
+        // xref: https://github.com/coreos/fedora-coreos-pipeline/pull/247#event-3413080221
+        metaListForPkgDiff = []
+        metaListForPkgDiff.push(metaForEachArch)
+        meta[basearch].pkgdiff = meta[basearch]['parent-pkgdiff'] == null ? getPkgDiffFromMetaList(metaListForPkgDiff) : meta[basearch]['parent-pkgdiff'];
+        sortPkgDiff(meta[basearch]);
+        build.selectedArch = "x86_64"
+        build.meta = meta;
+        // and fetch extra commit metadata in async
+        return fetchBuildCommitMeta(base, build, basearch, legacy).then(commitmeta => {
+          // Adding commitmeta for each architecture
+          finalCommitMeta[basearch] = commitmeta
+          finalCommitMeta[basearch]["importantPkgs"] = findImportantPkgs(commitmeta);
+          finalCommitMeta[basearch]["showImportantPkgsOnly"] = true;
+          build.commitmeta = finalCommitMeta;
+          builds[fromIdx] = build;
+        });
+      });
     });
   });
 }
@@ -290,14 +303,10 @@ function fetchBuildMeta(base, build, legacy) {
     return fetch(`${base}/${build.id}/meta.json`)
       .then(response => Promise.all([build.arches[0], response.ok ? response.json() : {}]));
   }
-  // XXX: just fetch the meta for the first arch right now
-  return fetch(`${base}/${build.id}/${build.arches[0]}/meta.json`)
-    .then(response => Promise.all([build.arches[0], response.ok ? response.json() : {}]));
-
-  // return Promise.all(build.arches.map(arch => {
-  //     fetch(`${base}/${build.id}/${arch}/meta.json`)
-  //         .then(response => Promise.all([arch, response.ok ? response.json() : {}]));
-  // }));
+  return Promise.all(build.arches.map(arch => {
+      return fetch(`${base}/${build.id}/${arch}/meta.json`)
+          .then(resp => Promise.all([arch, resp.ok ? resp.json() : {}]));
+  }));
 }
 
 // The actual fetch function for `commitmeta.json`
@@ -392,8 +401,10 @@ var coreos_release_notes = new Vue({
 
       rows = [];
       self.releases.forEach((build, idx) => {
-        // checked if build metadata has been fetched
-        if (build.arches.length == 0 || build.meta == null || build.commitmeta == null) {
+        let selectedArch = build.selectedArch
+        // checked if build metadata has been fetched 
+        // Also checked whether we have all the build data(commitMeta and meta) for all the arches
+        if (build.arches.length == 0 || build.meta == null || build.commitmeta == null || Object.keys(build.meta).length != Object.keys(build.commitmeta).length) {
           return;
         }
 
@@ -403,47 +414,71 @@ var coreos_release_notes = new Vue({
         build.arches.forEach((arch, _) => {
           headingListArches.push(h('h6', {}, arch));
         });
-        let leftPane = h('div', { class: "col-lg-2" }, [headingBuildId, headingListArches]);
-
-        // Right pane consists of detailed package information
-        let date = h('p', {}, `Release Date: ${timestampToPrettyString(build.meta['coreos-assembler.build-timestamp'])}`);
-        // List of important packages and versions
-        let importantPkgsElements = [];
-        build.commitmeta.importantPkgs.forEach((pkg, _) => {
-          importantPkgsElements.push(pkg[0]);
-          importantPkgsElements.push(h('span', { class: "mr-2 badge badge-pill badge-light" }, pkg[2]));
-        });
 
-        // Summary of pkglist and pkgdiffs with expand buttons
-        let pkgSummaryElements = []
-          .concat(`${build.commitmeta['rpmostree.rpmdb.pkglist'].length} packages (`)
-          .concat(
+        archDropdown = h('div', {attrs: {style: "text-align: left;" }}, [
+          `Arch: `,
             h('a', {
+              class: "dropdown-toggle",
               attrs: {
-                href: "#"
+                "id": build.id+"Dropdown",
+                "href": "#",
+                "role": "button",
+                "data-toggle": "dropdown",
+                "aria-haspopup": true,
+                "aria-expanded": false,
               },
               on: {
                 click: function (e) {
                   e.preventDefault();
-                  let totalPkgListElement = e.target.parentElement.nextSibling;
-                  if (totalPkgListElement.hidden == true) {
-                    totalPkgListElement.hidden = false;
-                    e.target.innerText = 'collapse';
-                  } else {
-                    totalPkgListElement.hidden = true;
-                    e.target.innerText = 'expand';
-                  }
                 }
               }
-            }, 'expand')
-          )
-          .concat('); ')
-        // Next, append the pkgdiffs summary
-        // `added` summary and expand button
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.added.length > 0) {
-          pkgSummaryElements = pkgSummaryElements.concat(
-            `${build.meta.pkgdiff.added.length} added (`
-          )
+            }, selectedArch),
+            h('div', { class: "dropdown-menu" }, [
+              h('div', { class: "container" }, [
+                  h('div', { class: "col-12 px-0" }, [
+                    Object.entries(build.arches).map(pair => {
+                      let arch = pair[1];
+                      return h('a', {
+                        class: "dropdown-item",
+                        attrs: {
+                          href: "#",
+                        },
+                        on: {
+                          click: function (e) {
+                            e.preventDefault();
+                            Object.entries(build.arches).map(pair => {
+                              if(pair[1] == e.target.text)
+                                document.getElementById(build.id+pair[1]).style.display = 'inline'
+                              else
+                                document.getElementById(build.id+pair[1]).style.display = 'none'
+                            });
+                            document.getElementById(build.id+"Dropdown").text = e.target.text;
+                          }
+                        }
+                      },
+                        arch);
+                    })
+                  ])
+              ])
+            ]),
+        ]);
+        let leftPane = h('div', { class: "col-lg-2" }, [headingBuildId, archDropdown]);
+
+        //Adding the information for all arches to rightPane but only showing the card for the selected arch in dropdown
+        let rightPane = [];
+        build.arches.forEach(eachArch => {
+          // Right pane consists of detailed package information
+          let date = h('p', {}, `Release Date: ${timestampToPrettyString(build.meta[eachArch]['coreos-assembler.build-timestamp'])}`);
+          // List of important packages and versions
+          let importantPkgsElements = [];
+          build.commitmeta[eachArch].importantPkgs.forEach((pkg, _) => {
+            importantPkgsElements.push(pkg[0]);
+            importantPkgsElements.push(h('span', { class: "mr-2 badge badge-pill badge-light" }, pkg[2]));
+          });
+
+          // Summary of pkglist and pkgdiffs with expand buttons
+          let pkgSummaryElements = []
+            .concat(`${build.commitmeta[eachArch]['rpmostree.rpmdb.pkglist'].length} packages (`)
             .concat(
               h('a', {
                 attrs: {
@@ -452,9 +487,7 @@ var coreos_release_notes = new Vue({
                 on: {
                   click: function (e) {
                     e.preventDefault();
-                    let totalPkgListElement = e.target.parentElement
-                      .nextSibling
-                      .nextSibling;
+                    let totalPkgListElement = e.target.parentElement.nextSibling;
                     if (totalPkgListElement.hidden == true) {
                       totalPkgListElement.hidden = false;
                       e.target.innerText = 'collapse';
@@ -466,163 +499,198 @@ var coreos_release_notes = new Vue({
                 }
               }, 'expand')
             )
-            .concat('); ');
-        }
-
-        // `removed` summary and expand button
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.removed.length > 0) {
-          pkgSummaryElements = pkgSummaryElements.concat(
-            `${build.meta.pkgdiff.removed.length} removed (`
-          )
-            .concat(
-              h('a', {
-                attrs: {
-                  href: "#"
-                },
-                on: {
-                  click: function (e) {
-                    e.preventDefault();
-                    let totalPkgListElement = e.target.parentElement
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling;
-                    if (totalPkgListElement.hidden == true) {
-                      totalPkgListElement.hidden = false;
-                      e.target.innerText = 'collapse';
-                    } else {
-                      totalPkgListElement.hidden = true;
-                      e.target.innerText = 'expand';
+            .concat('); ')
+          // Next, append the pkgdiffs summary
+          // `added` summary and expand button
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.added.length > 0) {
+            pkgSummaryElements = pkgSummaryElements.concat(
+              `${build.meta[eachArch].pkgdiff.added.length} added (`
+            )
+              .concat(
+                h('a', {
+                  attrs: {
+                    href: "#"
+                  },
+                  on: {
+                    click: function (e) {
+                      e.preventDefault();
+                      let totalPkgListElement = e.target.parentElement
+                        .nextSibling
+                        .nextSibling;
+                      if (totalPkgListElement.hidden == true) {
+                        totalPkgListElement.hidden = false;
+                        e.target.innerText = 'collapse';
+                      } else {
+                        totalPkgListElement.hidden = true;
+                        e.target.innerText = 'expand';
+                      }
                     }
                   }
-                }
-              }, 'expand')
-            )
-            .concat('); ');
-        }
+                }, 'expand')
+              )
+              .concat('); ');
+          }
 
-        // `upgraded` summary and expand button
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.upgraded.length > 0) {
-          pkgSummaryElements = pkgSummaryElements.concat(
-            `${build.meta.pkgdiff.upgraded.length} upgraded (`
-          )
-            .concat(
-              h('a', {
-                attrs: {
-                  href: "#"
-                },
-                on: {
-                  click: function (e) {
-                    e.preventDefault();
-                    let totalPkgListElement = e.target.parentElement
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling;
-                    if (totalPkgListElement.hidden == true) {
-                      totalPkgListElement.hidden = false;
-                      e.target.innerText = 'collapse';
-                    } else {
-                      totalPkgListElement.hidden = true;
-                      e.target.innerText = 'expand';
+          // `removed` summary and expand button
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.removed.length > 0) {
+            pkgSummaryElements = pkgSummaryElements.concat(
+              `${build.meta[eachArch].pkgdiff.removed.length} removed (`
+            )
+              .concat(
+                h('a', {
+                  attrs: {
+                    href: "#"
+                  },
+                  on: {
+                    click: function (e) {
+                      e.preventDefault();
+                      let totalPkgListElement = e.target.parentElement
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling;
+                      if (totalPkgListElement.hidden == true) {
+                        totalPkgListElement.hidden = false;
+                        e.target.innerText = 'collapse';
+                      } else {
+                        totalPkgListElement.hidden = true;
+                        e.target.innerText = 'expand';
+                      }
                     }
                   }
-                }
-              }, 'expand')
-            )
-            .concat('); ');
-        }
+                }, 'expand')
+              )
+              .concat('); ');
+          }
 
-        // `downgraded` summary and expand button
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.downgraded.length > 0) {
-          pkgSummaryElements = pkgSummaryElements.concat(
-            `${build.meta.pkgdiff.downgraded.length} downgraded (`
-          )
-            .concat(
-              h('a', {
-                attrs: {
-                  href: "#"
-                },
-                on: {
-                  click: function (e) {
-                    e.preventDefault();
-                    let totalPkgListElement = e.target.parentElement
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling
-                      .nextSibling;
-                    if (totalPkgListElement.hidden == true) {
-                      totalPkgListElement.hidden = false;
-                      e.target.innerText = 'collapse';
-                    } else {
-                      totalPkgListElement.hidden = true;
-                      e.target.innerText = 'expand';
+          // `upgraded` summary and expand button
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.upgraded.length > 0) {
+            pkgSummaryElements = pkgSummaryElements.concat(
+              `${build.meta[eachArch].pkgdiff.upgraded.length} upgraded (`
+            )
+              .concat(
+                h('a', {
+                  attrs: {
+                    href: "#"
+                  },
+                  on: {
+                    click: function (e) {
+                      e.preventDefault();
+                      let totalPkgListElement = e.target.parentElement
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling;
+                      if (totalPkgListElement.hidden == true) {
+                        totalPkgListElement.hidden = false;
+                        e.target.innerText = 'collapse';
+                      } else {
+                        totalPkgListElement.hidden = true;
+                        e.target.innerText = 'expand';
+                      }
                     }
                   }
-                }
-              }, 'expand')
-            )
-            .concat('); ');
-        }
+                }, 'expand')
+              )
+              .concat('); ');
+          }
 
-        let pkgSummaryDiv = h('div', { class: "mt-3" }, pkgSummaryElements);
+          // `downgraded` summary and expand button
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.downgraded.length > 0) {
+            pkgSummaryElements = pkgSummaryElements.concat(
+              `${build.meta[eachArch].pkgdiff.downgraded.length} downgraded (`
+            )
+              .concat(
+                h('a', {
+                  attrs: {
+                    href: "#"
+                  },
+                  on: {
+                    click: function (e) {
+                      e.preventDefault();
+                      let totalPkgListElement = e.target.parentElement
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling
+                        .nextSibling;
+                      if (totalPkgListElement.hidden == true) {
+                        totalPkgListElement.hidden = false;
+                        e.target.innerText = 'collapse';
+                      } else {
+                        totalPkgListElement.hidden = true;
+                        e.target.innerText = 'expand';
+                      }
+                    }
+                  }
+                }, 'expand')
+              )
+              .concat('); ');
+          }
 
-        // Package list
-        let totalPkgsElementsList = [];
-        let totalPkgsHeading = [];
-        if (build.commitmeta['rpmostree.rpmdb.pkglist'].length > 0) {
-          build.commitmeta['rpmostree.rpmdb.pkglist'].forEach((pkg, _) => {
-            totalPkgsElementsList.push(h('li', {}, self.getPkgNevraFull(pkg)));
-          });
-          totalPkgsHeading = h('p', { class: "mt-3" }, "Package List:")
-        }
-        let totalPkgsElements = h('div', { attrs: { hidden: true } }, [totalPkgsHeading, h('ul', {}, totalPkgsElementsList)]);
-
-        // Added package list
-        let addedPkgsElementsList = [];
-        let addedPkgsHeading = [];
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.added.length > 0) {
-          build.meta.pkgdiff.added.forEach((pkg, _) => {
-            addedPkgsElementsList.push(h('li', {}, self.getPkgNevra(pkg[2]["NewPackage"])));
-          });
-          addedPkgsHeading = h('p', { class: "mt-3" }, "Added:")
-        }
-        let addedPkgsElements = h('div', { attrs: { hidden: true } }, [addedPkgsHeading, h('ul', {}, addedPkgsElementsList)]);
-
-        // Removed package list
-        let removedPkgsElementsList = [];
-        let removedPkgsHeading = [];
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.removed.length > 0) {
-          build.meta.pkgdiff.removed.forEach((pkg, _) => {
-            removedPkgsElementsList.push(h('li', {}, self.getPkgNevra(pkg[2]["PreviousPackage"])));
-          });
-          removedPkgsHeading = h('p', { class: "mt-3" }, "Removed:");
-        }
-        let removedPkgsElements = h('div', { attrs: { hidden: true } }, [removedPkgsHeading, h('ul', {}, removedPkgsElementsList)]);
-
-        // Upgraded package list
-        let upgradedPkgsElementsList = [];
-        let upgradedPkgsHeading = [];
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.upgraded.length > 0) {
-          build.meta.pkgdiff.upgraded.forEach((pkg, _) => {
-            upgradedPkgsElementsList.push(h('li', {}, `${pkg[2]["PreviousPackage"][0]} ${self.getPkgEvra(pkg[2]["PreviousPackage"])} → ${self.getPkgEvra(pkg[2]["NewPackage"])}`));
-          });
-          upgradedPkgsHeading = h('p', { class: "mt-3" }, "Upgraded:");
-        }
-        let upgradedPkgsElements = h('div', { attrs: { hidden: true } }, [upgradedPkgsHeading, h('ul', {}, upgradedPkgsElementsList)]);
-
-        // Downgraded package list
-        let downgradedPkgsElementsList = [];
-        let downgradedPkgsHeading = [];
-        if (build.meta.pkgdiff != {} && build.meta.pkgdiff.downgraded.length > 0) {
-          build.meta.pkgdiff.downgraded.forEach((pkg, _) => {
-            downgradedPkgsElementsList.push(h('li', {}, `${pkg[2]["PreviousPackage"][0]} ${self.getPkgEvra(pkg[2]["PreviousPackage"])} → ${self.getPkgEvra(pkg[2]["NewPackage"])}`));
-          });
-          downgradedPkgsHeading = h('p', { class: "mt-3" }, "Downgraded:");
-        }
-        let downgradedPkgsElements = h('div', { attrs: { hidden: true } }, [downgradedPkgsHeading, h('ul', {}, downgradedPkgsElementsList)]);
+          let pkgSummaryDiv = h('div', { class: "mt-3" }, pkgSummaryElements);
 
-        let rightPane = h('div', { class: "col-lg-10 border-bottom mb-5 pb-4" }, [date, importantPkgsElements, pkgSummaryDiv, totalPkgsElements, addedPkgsElements, removedPkgsElements, upgradedPkgsElements, downgradedPkgsElements]);
+          // Package list
+          let totalPkgsElementsList = [];
+          let totalPkgsHeading = [];
+          if (build.commitmeta[eachArch]['rpmostree.rpmdb.pkglist'].length > 0) {
+            build.commitmeta[eachArch]['rpmostree.rpmdb.pkglist'].forEach((pkg, _) => {
+              totalPkgsElementsList.push(h('li', {}, self.getPkgNevraFull(pkg)));
+            });
+            totalPkgsHeading = h('p', { class: "mt-3" }, "Package List:")
+          }
+          let totalPkgsElements = h('div', { attrs: { hidden: true } }, [totalPkgsHeading, h('ul', {}, totalPkgsElementsList)]);
+
+          // Added package list
+          let addedPkgsElementsList = [];
+          let addedPkgsHeading = [];
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.added.length > 0) {
+            build.meta[eachArch].pkgdiff.added.forEach((pkg, _) => {
+              addedPkgsElementsList.push(h('li', {}, self.getPkgNevra(pkg[2]["NewPackage"])));
+            });
+            addedPkgsHeading = h('p', { class: "mt-3" }, "Added:")
+          }
+          let addedPkgsElements = h('div', { attrs: { hidden: true } }, [addedPkgsHeading, h('ul', {}, addedPkgsElementsList)]);
+
+          // Removed package list
+          let removedPkgsElementsList = [];
+          let removedPkgsHeading = [];
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.removed.length > 0) {
+            build.meta[eachArch].pkgdiff.removed.forEach((pkg, _) => {
+              removedPkgsElementsList.push(h('li', {}, self.getPkgNevra(pkg[2]["PreviousPackage"])));
+            });
+            removedPkgsHeading = h('p', { class: "mt-3" }, "Removed:");
+          }
+          let removedPkgsElements = h('div', { attrs: { hidden: true } }, [removedPkgsHeading, h('ul', {}, removedPkgsElementsList)]);
+
+          // Upgraded package list
+          let upgradedPkgsElementsList = [];
+          let upgradedPkgsHeading = [];
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.upgraded.length > 0) {
+            build.meta[eachArch].pkgdiff.upgraded.forEach((pkg, _) => {
+              upgradedPkgsElementsList.push(h('li', {}, `${pkg[2]["PreviousPackage"][0]} ${self.getPkgEvra(pkg[2]["PreviousPackage"])} → ${self.getPkgEvra(pkg[2]["NewPackage"])}`));
+            });
+            upgradedPkgsHeading = h('p', { class: "mt-3" }, "Upgraded:");
+          }
+          let upgradedPkgsElements = h('div', { attrs: { hidden: true } }, [upgradedPkgsHeading, h('ul', {}, upgradedPkgsElementsList)]);
+
+          // Downgraded package list
+          let downgradedPkgsElementsList = [];
+          let downgradedPkgsHeading = [];
+          if (build.meta[eachArch].pkgdiff != {} && build.meta[eachArch].pkgdiff.downgraded.length > 0) {
+            build.meta[eachArch].pkgdiff.downgraded.forEach((pkg, _) => {
+              downgradedPkgsElementsList.push(h('li', {}, `${pkg[2]["PreviousPackage"][0]} ${self.getPkgEvra(pkg[2]["PreviousPackage"])} → ${self.getPkgEvra(pkg[2]["NewPackage"])}`));
+            });
+            downgradedPkgsHeading = h('p', { class: "mt-3" }, "Downgraded:");
+          }
+          let downgradedPkgsElements = h('div', { attrs: { hidden: true } }, [downgradedPkgsHeading, h('ul', {}, downgradedPkgsElementsList)]);
+          let rightPaneData = h('div', { attrs: {id: build.id.concat(eachArch), style: "display: inline;" }, class: "col-lg-10 border-bottom mb-5 pb-4" }, 
+            [date, importantPkgsElements, pkgSummaryDiv, totalPkgsElements, addedPkgsElements, removedPkgsElements, upgradedPkgsElements, downgradedPkgsElements]);
+          
+            // Hiding the information cards of the unselected architectures
+          if(eachArch!=selectedArch)
+            rightPaneData.data.attrs.style = "display: none;"
+          rightPane.push(rightPaneData)
+        });
         let row = h('div', { class: "row" }, [leftPane, rightPane]);
         rows.push(row);
       })

