[Epic/ODO-93] Integrate devfile.odo.dev website into odo

[rm3l]

/kind epic

Copied from ODO-93

Problem statement

One of the biggest challenges for users is devfile customization to fit their project. 

Solution

We need to make customizing devfiles simpler, ideally to the point that users don’t have to deal with or understand devfiles.

We could try to create a Web UI that will abstract devfile structure to a better digestible form. This new form doesn’t have to; in fact, it should not resemble the devfile file structure.  

---

User Story

As an odo user, I want a better and simpler way to visualize and edit my local Devfile, So that I don't struggle with manually tailoring the Devfile to my project needs.

Acceptance Criteria

• It should expose a Web UI integrated with odo dev and connected to the local Devfile for visualization and editing
• It should not be hidden in experimental mode
• API/web server should by started by default in odo dev
• The output of the odo dev should show on which host an port the web interface and API is served

Links

• ODO-93

Sub-stories / tasks

• Move Devfile Builder UI PoC into odo (as separate frontend app) #6899
• Serve the static files from odo dev #6934
• Add API endpoints to get and save the local Devfile #6901
• Move the odo dev web UI state to odo #6903
• Capture telemetry data from odo dev web UI #6900
• Propagate changes from the local Devfile to the odo dev web UI #6902
• New odo api-server command (hidden) only for testing #6943
• odo describe component should display the running API Server #6942
• Logs from the API should not be displayed by default in the odo dev output #6987
• Move odo dev UI out of the experimental mode #6963

Enhancements

• [ui] Create Volume #7018
• More parameters for Container creation #7019
• Check if devfileRegistry and git Dockerfiles are supported by odo #7020
• [UI] AutoBuild / deployByDefault support #7021

Bugs

• Events selection #7022

/kind user-story

[rm3l]

Grooming (2023-06-15)

• Integrate @feloy's POC in odo: https://devfile.odo.dev/
• Integrate telemetry into that as well (enabled only if odo telemetry is enabled)
  • Current POC is a single page application => track what info people are modifying
• Website should use the API we are developing
• 1 website per dev session; so 2 dev sessions for the same component on different platforms might modify the same devfile. Look for a way to propagate changes.
• Experimental mode
• Work on raw Devfile
• Make it clear that parent is not fully supported yet.

Actions / Issues to create

• Move PoC to odo and serve the static files (same port as API): Move Devfile Builder UI PoC into odo (as separate frontend app) #6899
• API endpoints to get and save the local Devfile (to initialize the website state): Add API endpoints to get and save the local Devfile #6901
• Propagate changes from the local Devfile to the website and vice-versa. Question: auto-save or not? (if the dev session is stopped but user had made changes to the Devfile via the website) => auto-save. : Propagate changes from the local Devfile to the odo dev web UI #6902
• Move the state (stored currently in WebAssembly module) to odo. Modify the API endpoints to manipulate this state: Move the odo dev web UI state to odo #6903
• Integrate telemetry into this website (to enable only if odo telemetry is enabled): Capture telemetry data from odo dev web UI #6900

For the future

• Vision: This web UI will serve as the console of odo dev (logs, controls to trigger sync, ...)
• Living chart with the current state

[rm3l]

/remove-triage needs-information

Issue groomed and broken down into smaller issues that we will consider sizing later.

[rm3l]

@kadel Per your recent update on this issue, I've created a specific task to track the last 3 acceptance criteria (to move the UI and API out of the experimental mode): #6963

[feloy]

All issues have been done