Toolhub/Progress reports/2020-10-23
Report on activities in the Toolhub project for the week ending 2020-10-23.
Gerrit repo created
editThe always helpful QChrisNonWMF did the needful to create wikimedia/toolhub in Gerrit and imported the contents of the GitHub repo that Bryan had been working from. This unblocks further work on PipelineLib integration.
PipelineLib integration
editWith a lot of trial and error, and a very helpful assist from JHuneidi (WMF), Bryan was able to get the Gerrit repo connected to Jenkins with tests for both the Python and Node.js codebase sections running. This all uses the magic of the PipelineLib project. The pipeline that has been defined at this point only runs linters and unit tests. Future additions are likely to include functional tests and publishing tested images to the Foundation's Docker registry.
Vue UI bootstrapped
editBryan followed up on last week's conversation with Srishti about how we will be using Vue by integrating a skeleton Vue project into the Toolhub git repo and development tooling. The approach used borrows heavily from Mike Hoolehan's "Vue + Django — Best of Both Frontends" blog post.
There are several ways the implementation differs from Mike's however:
- A single package.json in the root of the repository is used for both the Vue frontend and testing needs of the Django backend.
- Vue source files are maintained inside of a Django "application".
- vue.config.js contains adjustments to tell Vue where we have put the source code and where we want output to be sent based on our deviations from the default Vue project template.
Vue uses the webpack JavaScript module bundler and other node.js tools to create "bundles" of javascript. For production we will have a build step to produce the needed artifacts and add them to the published container.
In local development mode we would like to have a faster cycle between editing js for the interface and delivery to the browser. Towards that end, our docker-compose configuration is updated to run a container hosting Vue running in development mode with its own http service.
Authentication connection between Django and Vue
editOnce the Vue development environment was available, Bryan moved on to connecting the OAuth login process from the Django backend with the Vue frontend. A blog post by Ashutosh Singh was very helpful in reasoning about and implementing this connection.
The changes included:
- Adding a new Django 'user' app to handle routes for login, logout, and active user state fetching.
- Adding a new UserStatus component to the frontend to display and change login state.
- Tracking backend user state in the Vuex store for the frontend.
Authentication flow with this setup looks something like:
- User visits Toolhub (http://localhost:8000/ in the default development environment)
- Vue app loads and triggers the 'getUserInfo' action in Vuex
- Vuex calls the Django backend's /user/info/ route to load user information
- UserStatus displays "login" button because
is_authenticated = false - User clicks on UserStatus "login" button
- Browser redirected to meta for OAuth approval
- Browser redirected to Toolhub
- Vue app loads and triggers the 'getUserInfo' action in Vuex
- Vuex calls Django backend's /user/info/ route to load user information
- UserStatus component displays username because
is_authenticated = true
Wrap up
editThis was a good week for progress on the project. As hoped for last week, the migration to Gerrit and initial Vue setup have been completed. Finding a workflow for the OAuth login and communicating user data to the Vue frontend was a nice bonus completion. Bryan plans on starting work on the Django backend's API endpoints for adding and removing toolinfo.json external URLs to configure the crawler in the coming week. Srishti is planning on UI design for the external URLs management.