Make Flyte UI more customizable

[vkaiser-mb]

FlyteConsole has the potential to be the main entry point for a user too see and analyze everything that is related to their workflow and task.

I really like the open interfaces and support of 3rd party in flyte, e.g., you can use any logging solution and configure the link.

But for the following usecases I cant find a good solution:

Usecase 1: Metric dashboard
As a user I want to see the consumption of compute resources (cpu, memory, gpu) of my task execution.
The visualization of the metrics will be done by a third party tool, e.g., cloud watch, grafana, ....

Usecase 2: ML specific Apps
Some workflows or tasks may be connected with other 3rd party tools, e.g. experiment tracking with W&B, Mlflow, ....
In case the task / workflow is of this type, there should be a link to access this third party apps.

Usecase 3: Generate convenience information, e.g.,
Generate kubectl command for e.g. attaching to a pod for debuging, e.g. kubectl exec --stdin --tty <pod_name> -n <namespace> -- /bin/bash and give a copy to clipboard function in the UI.

Usecase 4: Links for specific input / output types,
If there is a path to a S3 bucket (e.g. as input of a task, or as output) I may want to have a look at it with a 3rd party tool, e.g. a S3 data browser or some kind of gallery app.

Similar arguments were raised some years ago here:
#146

Looking at the issue, it was closed due to the introduction of FlyteDeck, which cant handle the usecases described above in user-friendly way from my POV.

I created a very basic mockup and how I would image it:

From code-side I would image that you could implement the shown features like this:

Usecase 1:
Create a link type:
metrics_link = FlyteUILink(name="Metrics", url=http://www.some.url/pod_uuid={POD_UUI})
(There might be more types like "popup" or "accordion")

In any cases you would add this via the task annotation, e.g.

ui_extend = UiExtension(execution_addons=[metrics_link])

@task(ui_extension=ui_extend)
def regular_task():
    do_something()

Usecase 2:

Depending on the task you are able to show different links.

ui_extend = UiExtension(execution_addons=[metrics_link])
ui_ml_extend = UiExtension(execution_addons=[metrics_link], overview_addons=[experiment_tracking_link])

@task(ui_extension=ui_ml_extend)
def ml_task():
    do_something()

@task(ui_extension=ui_extend)
def regular_task():
    do_something()

Usecase 3:

We add a "accordion" UI element and the content is specified via a MD format.
Whenever there is a code part (">") we add a copy to clipboard button/icon next to the line.

k8_content = MdRenderer(
    """Connect to a running pod: /n
    > kubectl exec --stdin --tty <pod_name> -n <namespace> -- /bin/bash
    """
)
k8_acc = UiAccordion(name="K8s commands", content=k8_content)


ui_extend = UiExtension(execution_addons=[k8_acc])

@task(ui_extension=ui_extend)
def regular_task():
    do_something()

Usecase 4:

The user can iterate over the input or output and add potentially multiple links how to forward the user.
This links could be shown aside with the already existing "copy to clipboard" icon. There is no mockup for this.

def io_interpreter(task_context, list_of_value_pairs: Dict) -> List[List[FlyteUiElement]]:

    links_for_value_pair = []

    for key, value in list_of_value_pairs:

        if key = "parquet"
            parquet_viewers = [FlyteUILink(name="Parquet", url=f"http://parquet_viever/path={value}"), icon="parquet"]
            links_for_value_pair.append(parquet_viewers)

        if value.contains("s3://"):
            aws_ui = FlyteUILink(name="AWS", url="http://aws/path=value")
            custom_gallery_ui = FlyteUILink(name="Our Gallery App", url=f"http://gallery/path={value}&pod={task_context.pod_uuid}", icon="aws_s3")
            links_for_value_pair = [aws_ui, custom_gallery_ui]

    return links_for_value_pair

ui_extend = UiExtension(input_interpreter=io_interpreter, output_interpreter=io_interpreter)

@task(ui_extension=ui_extend)
def regular_task():
    do_something()

(Dont judge me on the logic of this function, this mainly to make an example.)

Usecase 1 a bit more fancy:

Lets make metric dashboard directly available as a panel, so the user can see the usage metrics without leaving the flyteconsole.

metric_content = ExternalWebsite("http://metric.app/pod_uuid={POD_UUID}")
metric_panel = UiPanel(name="Metrics", content=metric_content) 

ui_extend = UiExtension(panel_addons=[metric_panel])

@task(ui_extension=ui_extend)
def regular_task():
    do_something()

The user of course could partially bind the task function with default values and would not need to specify all this every time.

I hope you like the idea.
I would be open to help in the implementation and testing (would probably need some support to understand all the flyte code mechanics).

Best regards,
Vitali