Registry content viewer

[elsony]

(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 & Java should 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)

Related Issue:

#481 (for the 2nd page)
#484 (documentation)

[johnmcollier]

Is this the same as #366 or different?

[rkratky]

JIRA: https://issues.redhat.com/browse/RHDEVDOCS-2871

[Nadianw36]

included are mockups of the tile page and metadata page (both for samples and stacks). we are aiming to produce the tile page with the blue tags but note that the colored tags are a possible future aim