#102 coreos-download: revert routing for coreos-download and use URL parameters instead
Merged 7 months ago by dustymabe. Opened 7 months ago by abai.
fedora-web/ abai/websites coreos-download  into  master

@@ -8,7 +8,6 @@ 

  import jinja2

  import os

  import yaml

- import re

  

  #FEDORA_LANGUAGES = { 'en' : 'English' , 'de': 'Deutsch'}

  
@@ -178,11 +177,6 @@ 

      global freeze_indexes

      freeze_indexes.add(name)

      def r():

-         # If requested routing under '/coreos/download/', render with '/coreos/download/index.html'

-         # and handle the requested tab view in frontend (sites/static/js/coreos-download.js)

-         # using the request url.

-         if (re.search("^coreos_download_.*$", name)):

-             return render_template(template or '/coreos/download/index.html')

          return render_template(template or path.strip('/') + '/index.html')

      r.__name__ = name

      if freezing:
@@ -212,9 +206,6 @@ 

  export_route('server_download', '/server/download/')

  export_route('coreos', '/coreos/')

  export_route('coreos_download', '/coreos/download/')

- export_route('coreos_download_cloud_launchable', '/coreos/download/cloud_launchable/')

- export_route('coreos_download_metal_virtualized', '/coreos/download/metal_virtualized/')

- export_route('coreos_download_cloud_operators', '/coreos/download/cloud_operators/')

  export_route('silverblue', '/silverblue/')

  export_route('silverblue_download', '/silverblue/download/')

  export_route('iot', '/iot/')

@@ -33,14 +33,14 @@ 

  // innerText of tab button

  const tabInnerText = {

    "cloud_launchable": "Cloud Launchable",

-   "metal_virt": "Bare Metal & Virtualized",

+   "metal_virtualized": "Bare Metal & Virtualized",

    "cloud_operators": "For Cloud Operators"

  }

  // frequently used IDs

  const IdPool = {

    "cloud_launchable": "cloud-launchable",

-   "metal_virt": "metal-virt",

-   "cloud_operators": "cloud-operator"

+   "metal_virtualized": "metal-virtualized",

+   "cloud_operators": "cloud-operators"

  }

  function getMember(obj, member) {

    return (member in obj) ? obj[member] : null;
@@ -142,6 +142,8 @@ 

          const key = pair[0];

          const val = pair[1];

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

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

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

            const show_id = IdPool[key];

            id_list.map(id => document.getElementById(id).hidden = (id !== show_id));

            this.shownId = show_id;
@@ -154,7 +156,7 @@ 

        nav_cloud_launchable = h('li', { class: "nav-item col-4" }, [ nav_cloud_launchable_btn ]);

  

        server_icon = h('i', { class: "fas fa-server mr-2" })

-       nav_metal_virt_btn = h('button', { class: "nav-link col-12 h-100 overflow-hidden".concat(this.shownId === IdPool.metal_virt ? " active" : ""), attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, [ server_icon, tabInnerText.metal_virt ]);

+       nav_metal_virt_btn = h('button', { class: "nav-link col-12 h-100 overflow-hidden".concat(this.shownId === IdPool.metal_virtualized ? " active" : ""), attrs: { "data-toggle": "tab" }, on: { click: this.toggleHidden } }, [ server_icon, tabInnerText.metal_virtualized ]);

        nav_metal_virt = h('li', { class: "nav-item col-4" }, [ nav_metal_virt_btn ]);

  

        cloud_upload_icon = h('i', { class: "fas fa-cloud-upload-alt mr-2" })
@@ -166,6 +168,7 @@ 

      },

      // Add dropdown options of streams

      getStreamName: function(h) {

+       const self = this;

        if (this.streamData === null) return;

        option_stable = h('option', { attrs: { value: "stable", selected: this.stream === "stable" ? "selected" : null }}, "stable");

        option_testing = h('option', { attrs: { value: "testing", selected: this.stream === "testing" ? "selected" : null }}, "testing");
@@ -173,7 +176,10 @@ 

          class: "mx-1",

          on: {

            change: function(e) {

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

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

              coreos_download_app.stream = e.target.value;

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

            }

          }

        }, [
@@ -332,24 +338,44 @@ 

      }

    },

    render: function(h) {

-     // Extracts the route under `/coreos/download/`

-     const route = window.location.pathname.replace(/\/.*\/coreos\/download\//, '').replace(/\/+$/, '');

-     if (route !== '') {

-       switch(route) {

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

+     searchParams = new URLSearchParams(window.location.search);

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

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

+       switch(searchParams.get('tab')) {

          case 'cloud_launchable':

            this.shownId = IdPool.cloud_launchable;

            break;

          case 'metal_virtualized':

-           this.shownId = IdPool.metal_virt;

+           this.shownId = IdPool.metal_virtualized;

            break;

          case 'cloud_operators':

            this.shownId = IdPool.cloud_operators;

            break;

          default:

-           // we shouldn't hit this since the routes are safe-guarded by `sites/getfedora.org/main.py`

            this.shownId = IdPool.cloud_launchable;

        }

+     } else {

+       searchParams.set('tab', 'cloud_launchable');

      }

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

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

+       switch(searchParams.get('stream')) {

+         case 'stable':

+           this.stream = "stable";

+           break;

+         case 'testing':

+           this.stream = "testing";

+           break;

+         default:

+           this.stream = "stable";

+       }

+     } else {

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

+     }

+     // Update the url with the parameters

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

+ 

      var signature_sha256_verification_modal = this.getSignatureAndShaModal(h);

      var stream_select_container = h('div', { class: "pb-0 pt-3 mb-3" }, [ h('div', { class: "container" }, [ this.getStreamName(h), this.getNavbar(h) ]) ]);

      if (this.loading) {
@@ -564,7 +590,7 @@ 

        let virtualized_container = h('div', { class: "col-6" }, [ virtualizedTitle, verifyBlurb, virtualized ]);

  

        let cloud_launchable_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_launchable, hidden: this.shownId !== IdPool.cloud_launchable } }, [ cloudLaunchableTitle, cloudLaunchable ]);

-       let metal_virt_container = h('div', { class: "row col-12 py-2 my-2", attrs: { id: IdPool.metal_virt, hidden: this.shownId !== IdPool.metal_virt } }, [ bare_metal_container, virtualized_container ]);

+       let metal_virt_container = h('div', { class: "row col-12 py-2 my-2", attrs: { id: IdPool.metal_virtualized, hidden: this.shownId !== IdPool.metal_virtualized } }, [ bare_metal_container, virtualized_container ]);

        let cloud_operators_container = h('div', { class: "col-12 py-2 my-2", attrs: { id: IdPool.cloud_operators, hidden: this.shownId !== IdPool.cloud_operators } }, [ cloudTitle, verifyBlurb, cloud ]);

  

        return h('div', {}, [

Reverts https://pagure.io/fedora-web/websites/pull-request/99# since using routing to different tabs introduces more overhead and over-complicates the problem.

For the need of querying different tabs under /coreos/download, a query parameter tab is used and set when clicking on tabs. This is much simpler than adding routing and redirect to tabs with routes.

Also adds an option to specify stream by setting the URL parameter stream.

Usage:
- http://localhost:5000/en/coreos/download/?tab=cloud_operators
- http://localhost:5000/en/coreos/download/?stream=testing
- http://localhost:5000/en/coreos/download/?tab=cloud_launchable&stream=stable
- http://localhost:5000/en/coreos/download?tab=metal_virtualized&stream=testing

Closes: https://github.com/coreos/fedora-coreos-tracker/issues/417
Signed-off-by: Allen Bai abai@redhat.com

Demo

Does this look reasonable? Thanks!

cc @dustymabe @codeblock @bcotton

this looks amazing. I did want the ability to specify stream as well! thanks @abai

looks like ben is out until the end of march..

Pull-Request has been merged by dustymabe

7 months ago