Description
(Edited and compiled, check history for original content)
Background
Currently, devfile registries are accessed by https://registry.devfile.io/index/all which is pretty much the index metadata for all the stack and sample devfiles located at https://github.com/devfile/registry (Check out the index schema)
We would like to have a website where we can view the various stacks and samples of the registry and interact with it. The stacks and samples should be presented as tiles and should have the ability to let users download the starter projects associated with it.
Work
The website should be able to filter the various devfiles associated with an index metadata like the type, framework, language, etc. The tiles should be present like how the ODC displays samples displays tiles for samples.
Other examples for reference include Tekton Hub, Dockerhub and Che/CRW devfile v1 list
Suggested Framework - Typescript PatternFly https://www.patternfly.org/v4/get-started/develop/
Stretch Goal
-
A devfile stack can have a starter project associated with it. Here is a python devfile with a starter project. Users should be able to download the starter project from the stack page of the registry viewer website. Only download the subDir path of the repo. If absent, download the whole project. (See issue for detailed technical info Registry Viewer Sample/Stack Page Technical Details #481)
-
We should have a Try Me option in the form of a button, that will perhaps allow the user try out a devfile sample in an OpenShift Sandbox cluster (the list should be configurable to allow the community to add to the list).
Checklist:
- Create a mockup of the UI and the flow based on the registry index and the checklist below
- Host all the devfile samples and stacks in tiles using the name, icon, description, version and tags @schultzp2020
- Allow users to filter the list based on the various registry index fields - Type(sample vs stack), Tags
- Filter values should be sanitized ie
java,JAVA&Javashould be one value -java - Filter view should be expandable ie if we have 10 values, show 5 and the rest on clicking more/scrolling.. @schultzp2020
- Search bar and sorting option on the top to allow users to filter based on name, desc, tags
- Clicking on a stack/sample, should present a new page with metadata information(name, version, display name, desc, tags); the raw devfile.yaml and starterProjects for the stack and the git url info for the sample (See issue for detailed technical info Registry Viewer Sample/Stack Page Technical Details #481)
- Hovering over a tile should animate shadow underneath the tile
- Allow users to download an associated starterProject from the stack page (See issue for detailed technical info Registry Viewer Sample/Stack Page Technical Details #481) @Nadianw36
- Provide a Try it out button for users to launch Sandbox (provide option for other clouds providers) (More info Registry Viewer should have a Try It Out feature #604)
- Write test cases for UI testing based on a test framework (Some options: Mocha, chai with Selenium, Cypress, etc.) @schultzp2020
Cleanups
- Utilize a standard logging tool for the repository
- Ensure the code and the repository is well documented (Registry Viewer Source Code Documentation #484)
- Make sure the UI is cleaned up and polished
- Should we provide more info on the first about page Devfiles? (Devfile.io landing page to have this info)