Change: upgrade the frontend stack

[arikfr]

This is still work in progress. What is done:

• Setup basic project structure to use npm, ES6 & Webpack instead of <script> tags, gulp and Bower. As part of the process I've upgraded Angular version to 1.5 along with relevant dependencies.
• Establish basic folder structure & naming conventions. I'm still experimenting here and will try to cleanup and standardize everything before merging.
• Start migrating code from the old structure to the new. At first I was translating directives to components, but this turned to be too time consuming so now the focus is to migrate the code pretty much as is. Later on we will refactor each directive into component when we "touch" them (either fix something or add new feature)

What's left:

• Users list.
• User view/edit.
• Query snippet editor.
• Query snippets list.
• Group page.
• Groups list.
• Alert destinations list.
• Alert destination view.
• Data sources list.
• Data source view.
• Query editor and results page.
• Query search results page.
• New widget form.
• Edit dashboard form.
• All the visualization types.
• Public dashboard page.
• Embedded visualization page.
• Review all the places I used show-errors and input-errors.
• Embed URL is missing host.
• Make sure I didn't break sanitization in results table.
• Sorting of values in results tables.
• Control page title.

(closes #1125)

[arikfr]

Pushed an update that gets us closer to finalizing this. Renamed frontend to client and also wired it up to work with the Flask app. You can now use npm run watch instead of npm run start to have webpack build (and rebuild on changes) the app into client/dist folder from where the Flask server will serve it.

@luke14free fyi.

[luke14free]

👍

[arikfr]

And.... it's merged ! 💃

@luke14free you need to update your pull requests to point at master now.

[luke14free]

ahw great :) 👍 will do

[adamlwgriffiths]

@arikfr We're having trouble getting this new version running.
The webpack command builds under client/dist (styles.css, app.js, etc).
But the flask templates are configured with path names that are referencing older filenames.
For example: signed_out.html
<link rel="stylesheet" href="/styles/superflat_redash.css">

I can change the following environment variable to attempt to handle this:
REDASH_STATIC_ASSETS_PATH="../client/app/assets/,../redash/static"
But I just get a 500 on login as it is attempting to load index.html from redash/../redash/static/index.html'.

Am I missing something or is the merge not 100% working?

I have a feeling that the files in app/dist should be moved under redash/static after building.
I also believe some of the include paths are obsolete (js / css).

[adamlwgriffiths]

I've opened pull request #1441 which fixes the underlying cause of the issues I was having.