[YUNIKORN-2342] Skeleton of the new UI

[doupache]

What is this PR for?

Skeleton of the new UI

What type of PR is it?

• - Feature

What is the Jira issue?

YUNIKORN-2342

Screenshots (if appropriate)

[doupache]

cc @wilfred-s @craigcondit
This marks the initial phase of the new UI, currently comprising only HTML and CSS components. TypeScript functionalities have not yet been implemented.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7051f34) 66.66% compared to head (328d388) 66.66%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #163   +/-   ##
=======================================
  Coverage   66.66%   66.66%           
=======================================
  Files           1        1           
  Lines          30       30           
=======================================
  Hits           20       20           
  Misses          7        7           
  Partials        3        3           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[wilfred-s]

To make it easy later on I think we should change the name of the component to something we can use in the long run. Also not sure if we want to use the Visualizer in the menu, Queues v2 makes more sense.
For the components and references something more in this direction means we can keep it long term:

• yaml-visualizer -> queue-visualizer
• VisualizerComponent -> QueueVisualizerComponent
• experiment-tab -> queues-tab

Last point: we probably should use the logo without the text below it. See https://github.com/apache/yunikorn-site/blob/master/static/img/logo/yunikorn_blue_logo.png for the small version.

[doupache]

@wilfred-s Thanks for reviewing 👍

The new ui contains two part

1. Queue V2: This version introduces a modernized UI that provides an enhanced view of the queues currently operational within YuniKorn, offering improvements over the previous Queue (V1) interface.

2. Visualizer: This feature allows for the visualization of any valid YuniKorn configuration yaml uploaded by the user. It can display configurations that are currently active (It will look exactly like what Queue V2 displays), explore potential new configuration settings(It will look different from what Queue V2 displays.), or serve as a debugging tool for examining how different YuniKorn config.yaml files will affect queue visualization.

My strategy involves prioritizing the development of the Visualizer component, which is why I focused solely on implementing it in the previous pull request. However, I believe it's beneficial to establish a framework for both components upfront. For the time being, Queue V2 will continue to utilize the V1 components. I plan to upgrade these to the new version once the Visualizer section is completed.

[craigcondit]

I have a few concerns with the Visualizer page. The functionality is interesting, but it's not something that's immediately usable by most users -- the configmap contains a quoted yaml of the queues; there's really no context in which a bare queues.yaml file file is ever dealt with outside of this component. The visualizer feels more like a development tool rather than a usable UI for YuniKorn. If we want to keep it around for playing "what-if" with the design, that's fine, but then maybe it's best to simply make it a hidden URL and not put it in the side navigation bar.

[doupache]

Thanks Craig for reviewing. I agree with all your points that the Visualizer page is mostly developer tool. I am okay with moving the Visualizer page to another URL after the beta phase, hidden from the menu tab. However, I think keeping the page during the beta phase has four great benefits:

1. It helps a lot during the development phase, and I also add a beta tag on the tab, so users may expect this is an experimental feature.

2. I always prefer seeing a visualized queue rather than reading the YAML config file. iirc , @lixmgl would also love to see the visualized queue.

3. We can render preemption fences on the static Visualizer page (see YUNIKORN-2358). I think this is a pretty nice feature.

4. We can even achieve some WYSIWYG feature.

Inspired by Dagster

• what preemption fences may look like
  

Imagine we hover over a specific queue on the leaf queue, and all other queues it can preempt will be highlighted on the page !

• WYSIWYG

Imagine a user editing the YAML, and the visualizer visualizes what you edit instantly.

[craigcondit]

We can't really do a functional WYSIWYG editor, as the UI doesn't integrate into the security model of Kubernetes (nor are there any plans to do so - that's a much larger conversation). Consequently the editor, if implemented, would always be half-functional. It simply does NOT belong in the UI as the UI is a user-oriented, not dev-oriented tool. Since we will likely never make this available as is, it should be hidden completely (not even a BETA link). Beta implies it will some day be stable. This will not.

[craigcondit]

There may be a place for some sort of development tool or optional IDE plugin that could be used for this (though maintaining it could be burdensome). It just doesn't belong in the UI.

[doupache]

@craigcondit, what do you think about using the URL YuniKorn-web-ui-host/queue-visualizer during the development cycle? I'm fine with removing the queue-visualizer page when we ship the new queue UI.

[craigcondit]

@craigcondit, what do you think about using the URL YuniKorn-web-ui-host/queue-visualizer during the development cycle? I'm fine with removing the queue-visualizer page when we ship the new queue UI.

Whatever URL is fine. I just think we shouldn't put it in the navigation bar and advertise it.

[doupache]

Close this. Implement in #177