Add support full static generation

[dmsimard]

In ARA 0.x, there is a ara generate html command that wraps around
Frozen-Flask which takes care of crawling all the pages known by the web application and generate the static HTML/JS/CSS files as a result.

It is a useful feature since it allows users to generate a report and render it without requiring a database or an API server -- regardless of the tooling or platform they run Ansible with.

At this time, ara-web can be built to static html/js/css but still expects an API server to query in order to retrieve the data it needs to render the report pages.

We would need a way to generate a static version of the web application that doesn't call out to the API.

[dmsimard]

From my own research and experimentation, it feels like react-snap might be able to help but there are some things to figure out.

I sent a test patch which adds the react-snap dependency, a npm run snapshot command and the necessary adjustments to src/index.js: https://review.opendev.org/#/c/664941/

The generated tree looks like this:

$ tree build/
build/
├── 200.html
├── 404.html
├── asset-manifest.json
├── config.json
├── favicon.ico
├── index.html
├── manifest.json
├── playbooks
│   ├── 1
│   │   └── index.html
│   ├── 2
│   │   └── index.html
│   └── index.html
├── precache-manifest.ed3415637a06426d718ebbe2d579a0d8.js
├── service-worker.js
└── static
    ├── css
    │   ├── 2.b346d2ff.chunk.css
    │   └── 2.b346d2ff.chunk.css.map
    ├── js
    │   ├── 2.fb10dc57.chunk.js
    │   ├── 2.fb10dc57.chunk.js.map
    │   ├── main.bd44d76a.chunk.js
    │   ├── main.bd44d76a.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        ├── fa-solid-900.27603739.svg
        ├── fa-solid-900.2e302fa4.eot
        ├── fa-solid-900.5dc01cfc.woff2
        ├── fa-solid-900.80c404ff.ttf
        ├── fa-solid-900.a8eedaad.woff
        ├── logo.37841b5d.svg
        ├── overpass-bold.03f13d81.ttf
        ├── overpass-bold.1be69fa3.eot
        ├── overpass-bold.c6179bc8.woff
        ├── overpass-bold.d031db25.woff2
        ├── overpass-bold-italic.a3014aca.woff2
        ├── overpass-bold-italic.a7525e62.ttf
        ├── overpass-bold-italic.ad84fcd4.eot
        ├── overpass-bold-italic.c0b5bb3c.woff
        ├── overpass-extrabold.1168ce1e.woff
        ├── overpass-extrabold.5174bc0e.ttf
        ├── overpass-extrabold.6e768ba3.woff2
        ├── overpass-extrabold.b184d3d7.eot
        ├── overpass-extrabold-italic.0e4f5b12.eot
        ├── overpass-extrabold-italic.1120bb04.ttf
        ├── overpass-extrabold-italic.83caef4a.woff
        ├── overpass-extrabold-italic.cd4ba352.woff2
        ├── overpass-extralight.453031be.eot
        ├── overpass-extralight.7a42efd1.ttf
        ├── overpass-extralight.86fd9ea3.woff
        ├── overpass-extralight.c5791995.woff2
        ├── overpass-extralight-italic.07d68df8.ttf
        ├── overpass-extralight-italic.5a7110dd.eot
        ├── overpass-extralight-italic.85914371.woff2
        ├── overpass-extralight-italic.b4ac9dd8.woff
        ├── overpass-heavy.196bf61d.ttf
        ├── overpass-heavy.33b983b6.woff2
        ├── overpass-heavy.42aa590b.woff
        ├── overpass-heavy.7fe4082d.eot
        ├── overpass-heavy-italic.77a29c6c.woff2
        ├── overpass-heavy-italic.9a846a97.woff
        ├── overpass-heavy-italic.e171c10c.eot
        ├── overpass-heavy-italic.fc408a5c.ttf
        ├── overpass-italic.0010a44b.woff
        ├── overpass-italic.5f705c0e.ttf
        ├── overpass-italic.6a8cb294.eot
        ├── overpass-italic.f45ba39e.woff2
        ├── overpass-light.3875601d.woff
        ├── overpass-light.b065f905.eot
        ├── overpass-light.c97e1959.woff2
        ├── overpass-light.f3914c0c.ttf
        ├── overpass-light-italic.14564a08.eot
        ├── overpass-light-italic.5b90b726.woff
        ├── overpass-light-italic.6715ec5e.woff2
        ├── overpass-light-italic.df98f835.ttf
        ├── overpass-mono-bold.433b5c73.eot
        ├── overpass-mono-bold.525102cd.ttf
        ├── overpass-mono-bold.6cb4a77b.woff2
        ├── overpass-mono-bold.75f6145e.woff
        ├── overpass-mono-light.326c58fb.eot
        ├── overpass-mono-light.3be32ac5.ttf
        ├── overpass-mono-light.773ec666.woff
        ├── overpass-mono-light.d34d136b.woff2
        ├── overpass-mono-regular.052fe015.woff2
        ├── overpass-mono-regular.88c46de6.ttf
        ├── overpass-mono-regular.96c8503e.eot
        ├── overpass-mono-regular.cf00f67f.woff
        ├── overpass-mono-semibold.3eade9d0.ttf
        ├── overpass-mono-semibold.404c69d4.woff
        ├── overpass-mono-semibold.b199b8f9.woff2
        ├── overpass-mono-semibold.b430c0bc.eot
        ├── overpass-regular.02d9e0ef.woff2
        ├── overpass-regular.7053cc87.eot
        ├── overpass-regular.7b93997b.woff
        ├── overpass-regular.f3dbad81.ttf
        ├── overpass-semibold.5ee7acc2.eot
        ├── overpass-semibold.aabbde80.ttf
        ├── overpass-semibold.ca834120.woff2
        ├── overpass-semibold.ec228a39.woff
        ├── overpass-semibold-italic.4e4b8fd4.ttf
        ├── overpass-semibold-italic.73eb8e6d.eot
        ├── overpass-semibold-italic.d91e16a1.woff2
        ├── overpass-semibold-italic.e244fb96.woff
        ├── overpass-thin.69bb205a.ttf
        ├── overpass-thin.8c022f6d.woff2
        ├── overpass-thin.94f49172.woff
        ├── overpass-thin.964a9d1d.eot
        ├── overpass-thin-italic.16380cc4.woff2
        ├── overpass-thin-italic.2ad7b693.ttf
        ├── overpass-thin-italic.849bc426.woff
        ├── overpass-thin-italic.a452cd38.eot
        ├── pfbg_2000.9a2fcbae.jpg
        ├── [email protected]
        ├── pfbg_576.85341a9c.jpg
        ├── [email protected]
        ├── pfbg_768.c9839717.jpg
        ├── [email protected]
        ├── pficon.4f40e753.eot
        ├── pficon.7382cd2e.woff2
        ├── pficon.efcb4963.woff
        ├── pficon.f45433f4.svg
        └── pficon.f907e666.ttf

7 directories, 117 files

Observations:

• Running the snapshot requires the API server to be running so the app can retrieve the data and generate the pages
• react-snap does not seem to detect the links to the playbook reports (presumably because we're using onClick instead of href?) but is able to render them "manually" by specifying them (as shown in the patch)
• Despite the pages (such as /playbooks/2) being fully rendered to html (see sample here), there are bits of code that attempt to call out to the API and if the API server is no longer running, it will fail as if you were running from npm start or from a regular build out of npm run build

If react-snap is the right choice, we need to figure out:

• How to get it to crawl all the links automatically (switch from onclick to href?)
• How to prevent API calls from being sent (could it be as simple as a boolean toggle ?)

If it's not the right choice, I am most definitely open to suggestions.

[dmsimard]

If react-snap is the right choice, we need to figure out:

* How to get it to crawl all the links automatically (switch from onclick to href?)

Yeah, switching from onclick to href made react-snap able to find links to the playbook pages properly, see: https://review.opendev.org/#/c/664941/2/src/playbooks/PlaybookSummary.js

$ npm run snapshot

> [email protected] snapshot /home/dmsimard/dev/git/ansible-community/ara-web
> react-scripts build && react-snap

Creating an optimized production build...
Compiled with warnings.

./src/playbooks/PlaybookSummary.js
  Line 148:  'history' is assigned a value but never used  no-unused-vars

./src/index.js
  Line 2:  'ReactDOM' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  126.69 KB  build/static/js/2.fb10dc57.chunk.js
  59.57 KB   build/static/css/2.b346d2ff.chunk.css
  5.4 KB     build/static/js/main.eeeae9ea.chunk.js
  762 B      build/static/js/runtime~main.a8a9905a.js

The project was built assuming it is hosted at http://localhost:3000/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

/playbooks
💬  in browser redirect (/playbooks)
✅  crawled 1 out of 11 (/)
⚠️  warning: 404 page title does not contain "404" string
✅  crawled 2 out of 11 (/404.html)
✅  crawled 3 out of 11 (/playbooks)
✅  crawled 4 out of 11 (/playbooks/1)
✅  crawled 5 out of 11 (/playbooks/2)
✅  crawled 6 out of 11 (/playbooks/3)
✅  crawled 7 out of 11 (/playbooks/4)
✅  crawled 8 out of 11 (/playbooks/6)
✅  crawled 9 out of 11 (/playbooks/5)
✅  crawled 10 out of 11 (/playbooks/7)
✅  crawled 11 out of 11 (/playbooks/8)