#199 coreos-download.js: Added dropdown to display aarch64 artifacts and images
Merged 3 years ago by dustymabe. Opened 3 years ago by gursewak.
Unknown source fct959  into  master

@@ -205,13 +205,21 @@

          const val = pair[1];

          if (val === e.target.innerText) {

            const downloadPageUrl = window.location.href.match(/^.*\/coreos\/download/)[0];

-           history.replaceState(null, null, `${downloadPageUrl}?tab=${key}&stream=${coreos_download_app.stream}`);

+           history.replaceState(null, null, `${downloadPageUrl}?tab=${key}&stream=${coreos_download_app.stream}&arch=${coreos_download_app.architecture}`);

            const showId = IdPool[key];

            idList.map(id => document.getElementById(id).hidden = (id !== showId));

            this.shownId = showId;

          }

        });

      },

+     // Handle the dropdown for architectures

+     toggleArch: function (e) {

+       coreos_download_app.architecture = e.target.text

+       const currentShownKey = Object.keys(IdPool).find(key => IdPool[key] === coreos_download_app.shownId);

+       const downloadPageUrl = window.location.href.match(/^.*\/coreos\/download/)[0];

+       history.replaceState(null, null, `${downloadPageUrl}?tab=${currentShownKey}&stream=${coreos_download_app.stream}&arch=${coreos_download_app.architecture}`);

+       this.loadStreamDisplay();

+     },

      // Render a navbar section

      getNavbar: function (h) {

        cloudIcon = h('i', { class: "fas fa-cloud mr-2" })
@@ -245,7 +253,7 @@

          const downloadPageUrl = window.location.href.match(/^.*\/coreos\/download/)[0];

          const currentShownKey = Object.keys(IdPool).find(key => IdPool[key] === coreos_download_app.shownId);

          coreos_download_app.stream = e.target.id;

-         history.replaceState(null, null, `${downloadPageUrl}?tab=${currentShownKey}&stream=${coreos_download_app.stream}`);

+         history.replaceState(null, null, `${downloadPageUrl}?tab=${currentShownKey}&stream=${coreos_download_app.stream}&arch=${coreos_download_app.architecture}`);

        }

  

        const overviewPageUrl = window.location.href.match(/^.*\/coreos/)[0];
@@ -366,7 +374,50 @@

          "next": "text-fedora-orange"

        };

  

-       displayedStreamTitle = h('div', { class: "font-weight-light text-left pt-5", attrs: { id: "stream-title" } }, [

+       //Getting the list of all the architectures

+       const architectures = getMember(this.streamData, "architectures");

+       let architectureList = Object.keys(architectures);

+       

+       archDropdown = h('div', {attrs: {style: "text-align: right;" }}, [

+         `Architecture: `,

+           h('a', {

+             class: "dropdown-toggle",

+             attrs: {

+               "href": "#",

+               "role": "button",

+               "data-toggle": "dropdown",

+               "aria-haspopup": true,

+               "aria-expanded": false

+             },

+             on: {

+               click: function (e) {

+                 e.preventDefault();

+               }

+             }

+           }, this.architecture),

+           h('div', { class: "dropdown-menu" }, [

+             h('div', { class: "container" }, [

+                 h('div', { class: "col-12 px-0" }, [

+                   Object.entries(architectureList).map(pair => {

+                     let arch = pair[1];

+                     return h('a', {

+                       class: "dropdown-item",

+                       attrs: {

+                         href: "#",

+                       },

+                       on: {

+                         click: this.toggleArch

+                       }

+                     },

+                       arch);

+                   })

+                 ])

+             ])

+           ]),

+       ]);

+       

+       displayedStreamTitle = h('div', { class: "font-weight-light text-left pt-5", attrs: { id: "stream-title"} }, [

+         h('div', {attrs: {style: "width: 70%; float: left;" } }, [

          `Currently displayed stream:`,

          // https://stackoverflow.com/a/1026087 for making the first letter uppercase

          h('span', { class: `${textColorMap[this.stream]} mx-2` }, this.stream.charAt(0).toUpperCase() + this.stream.slice(1)),
@@ -377,10 +428,10 @@

              href: `${overviewPageUrl}?stream=${coreos_download_app.stream}`

            }

          }, `View Releases`),

-         `)`

+         `)`])      

        ]);

  

-       wrapperDiv = h('div', {}, [title, streamsIntroDiv, displayedStreamTitle]);

+       wrapperDiv = h('div', {}, [title, streamsIntroDiv, displayedStreamTitle, archDropdown]);

        return wrapperDiv;

      },

      isAws: function (platform) {
@@ -599,6 +650,18 @@

      } else {

        searchParams.set('stream', 'stable');

      }

+     // switch to specified arch if `arch` parameter is set

+     if (searchParams.has('arch')) {

+       const architectures = getMember(this.streamData, "architectures");

+       let architectureList = Object.keys(architectures);

+       // Checking if the value of arch is in the list of arches from streamData

+       if (architectureList.includes(searchParams.get('arch')))

+         this.architecture = searchParams.get('arch');

+       else

+         this.architecture = "x86_64";

+     } else {

+       searchParams.set('arch', 'x86_64');

+     }  

      // Update the url with the parameters

      history.replaceState(null, null, `${downloadPageUrl}?${searchParams.toString()}`);

  

Linked issue: https://github.com/coreos/fedora-coreos-tracker/issues/959

Added a dropdown to display aarch64 artifacts and images on coreos downloads page. The dropdown allows the user to select from either of the architecture and it updates the page with links to the appropriate images/artifacts. It takes and displays all the architectures under various streams(stable,testing and next).
Eg. https://builds.coreos.fedoraproject.org/streams/stable.json

Could you deploy a preview or take a couple of screenshots to help review the change? Thanks!

Looks great so far. Thanks @gursewak.

I have 1 suggestion and 1 separate change that I'm thinking is probably a requirement.

  • suggestion: maybe we should make it not right justified and just to the right of the text on the left hand side where is says "Currently displayed stream".
  • requirement: it would be AMAZING if we can link people directly to the page they need. For example we'd want to add a &architecture=aarch64 to the URL and have it show the page directly. Notice when you click around on the other options the URL changes to add these options. Then you can copy/paste to share with people the exact page you're on.

rebased onto cc5a32da22808b5941576c934c5a4242be388aad

3 years ago

If we add ppc64le architecture we'll need to update this code. Is there any way to make this code generic so we wouldn't be required to do that?

Minor/optional: maybe just arch for the URL parameter name?

Maybe by just checking if the value is in the list of arches in the stream metadata and if not default to x86_64?

I had suggested to him &architecture=, but I support changing it to &arch= if that's preferred.

rebased onto ee0ae5ce9fafad41a4dbcd9389b7689b9dace89e

3 years ago

rebased onto 203cf52

3 years ago

Pull-Request has been merged by dustymabe

3 years ago
Metadata