Longhorn UI Extension (POC) by yiya.chen

Description

The goal is to create a Longhorn UI extension within Rancher using existing resources.
Longhorn’s UI is built using React, while Rancher’s UI extensions are built using Vue. Developers will explore different approaches to integrate and extend Longhorn’s UI within Rancher’s Vue-based ecosystem, aiming to create a seamless, functional UI extension.

Goals

• Build a Longhorn UI extension (look and feel)
• Support theme switching to align with Rancher’s UI

Results

• https://github.com/a110605/longhorn-hackday
• https://github.com/a110605/longhorn-ui/tree/darkmode
• https://github.com/houhoucoop/hackweek/tree/main/hackweek24

Resources

• Longhorn UI: https://github.com/longhorn/longhorn-ui
• Rancher UI Extension: https://extensions.rancher.io/extensions/next/home
• darkreader: https://www.npmjs.com/package/darkreader
• veaury: https://github.com/gloriasoft/veaury
• module federation: https://webpack.js.org/concepts/module-federation/

Agama installer on-line demo by lslezak

Description

The Agama installer provides a quite complex user interface. We have some screenshots on the web page but as it is basically a web application it would be nice to have some on-line demo where users could click and check it live.

The problem is that the Agama server directly accesses the hardware (storage probing) and loads installation repositories. We cannot easily mock this in the on-line demo so the easiest way is to have just a read-only demo. You could explore the configuration options but you could not change anything, all changes would be ignored.

The read-only demo would be a bit limited but I still think it would be useful for potential users get the feeling of the new Agama installer and get familiar with it before using in a real installation.

As a proof of concept I already created this on-line demo.

The implementation basically builds Agama in two modes - recording mode where it saves all REST API responses and replay mode where it for the REST API requests returns the previously recorded responses. Recording in the browser is inconvenient and error prone, there should be some scripting instead (see below).

Goals

• Create an Agama on-line demo which can be easily tested by users
• The Agama installer is still in alpha phase and in active development, the online demo needs to be easily rebuilt with the latest Agama version
• Ideally there should be some automation so the demo page is rebuilt automatically without any developer interactions (once a day or week?)

TODO

• Use OpenAPI to get all Agama REST API endpoints, write a script which queries all the endpoints automatically and saves the collected data to a file (see this related PR).
• Write a script for starting an Agama VM (use libvirt/qemu?), the script should ensure we always use the same virtual HW so if we need to dump the latest REST API state we get the same (or very similar data). This should ensure the demo page does not change much regarding the storage proposal etc...
• Fix changing the product, currently it gets stuck after clicking the "Select" button.
• Move the mocking data (the recorded REST API responses) outside the Agama sources, it's too big and will be probably often updated. To avoid messing the history keep it in a separate GitHub repository
• Allow changing the UI language
• Display some note (watermark) in the page so it is clear it is a read-only demo (probably with some version or build date to know how old it is)
• Automation for building new demo page from the latest sources. There should be some check which ensures the recorded data still matches the OpenAPI specification.

Changing the UI language

This will be quite tricky because selecting the proper translation file is done on the server side. We would probably need to completely re-implement the logic in the browser side and adapt the server for that.

Also some REST API responses contain translated texts (storage proposal, pattern names in software). We would need to query the respective endpoints in all supported languages and return the correct response in runtime according to the currently selected language.

Resources

• Agama sources
• Experimental proof of concept demo
• The respective source code change

OpenQA Golang api client by hilchev

Description

I would like to make a simple cli tool to communicate with the OpenQA API

Goals

• OpenQA has a ton of information that is hard to get via the UI. A tool like this would make my life easier :)
• Would potentially make it easier in the future to make UI changes without Perl.
• Improve my Golang skills

Resources

• https://go.dev/doc/
• https://openqa.opensuse.org/api