Show meaningful information on the session page while starting

[lorenzo-cavazzi]

Motivation

Sessions take time to start, 1 minute (or more) is not uncommon.
Especially when clicking on the quickstart button, users may be confused since they need to wait for such a long time with no feedback apart from the bouncing dots. The status line on top saying Started x seconds ago adds to the confusion.

Mock-ups / Design

We could improve the feedback by:

• Changing the status line to Starting.
• Adding better feedback in the main window.
  • A short message saying the sessions are starting and it may take a minute or two
  • A progress bar instead of the bounding dots
  • Some feedback from the status.message content. It currently mentions the pods with a non-ready state, maybe that should be changed a bit. The idea is to give the user the perception that something is going on in the background. E.G. showing starting x of 5 components, or come up with a short descriptive sentence based on what still needs to start.

Progress

• API Design (sprint-??)
• UI Implementation

[rokroskar]

This is how jupyterhub implements it: https://github.com/jupyterhub/jupyterhub/blob/6be3160d7487bb362df7095f24454ef2814951fc/share/jupyterhub/templates/spawn_pending.html

[andre-code]

@rokroskar It is possible to include the list of pending containers to start, do you think that information is useful for the user or the message 1 of n containers are ready. is enough. ?

[rokroskar]

I'm not sure having the names displayed is necessarily useful. Do we have information about what is happening with the individual containers, e.g. image being pulled?

[andre-code]

The message comes directly from notebook-service. So @olevski probably has more information about it.

[olevski]

Do we have information about what is happening with the individual containers, e.g. image being pulled?

The notebook service can get that information from k8s if you want to display it. It is a bit more complicated to implement than just saying 1 out of n containers are ready but definitely doable.

What would the message look like if we should what each individual container is doing? Is that too much information?

I guess it will be a dictionary with container names as keys and statuses/additional info as values. Currently we simply send a status (one of Running, Starting, Stopping, Failed) and a message (i.e. containers with unready status: a, b, c). These are directly then used by the ui.

[rokroskar]

I was just thinking it might be useful to show the information about the (main) image being pulled because that's typically what causes the longest delay. For the other containers it probably doesn't really matter, other than cloning the repo which I would call something like "setting up the repository".

If we had a checklist I guess it would be something like:

• setting up support containers
• cloning and configuring the repository
• pulling main image
• starting server

Would that make sense?

[andre-code]

If it is possible to know the steps in advance, it would be great to receive the status like this:

const status =
{
  state: "starting",
  details:
    [
      {
        step: "Setting up support containers",
        status: "done", // pending, error, done
      },
      {
        step: "Cloning and configuring the repository",
        status: "pending", // pending, error, done
      },
      {
        step: "Pulling main image",
        status: "pending", // pending, error, done
      },
      {
        step: "Starting server",
        status: "pending", // pending, error, done
      },
    ],
};

That way it would change the way of presenting the progress of start a session in to something like:

[gavin-k-lee]

My hypothesis is that a user does not care about all the intermediate steps, e.g. git proxy, oauth, sidecar - I think those elements could be hidden and they see a progress bar, with the option of expanding the steps.

[rokroskar]

@gavin-k-lee I agree - but the expansion should show what @andre-code has in the example above, not the container names, imho

[olevski]

I think that what you propose is doable. And as @andre-code suggests having the possible steps pre-defined and fixed makes my life easier too. And this will definitely improve things.

[olevski]

Ok since we want to have both the number of containers ready out of the total and the more detailed breakdown then I propose the following format:

const status =
{
  state: "starting",
  totalNumContainers: 7,  // NEW
  readyNumContainers: 3, // NEW
  details:
    [
      {
        step: "Setting up support containers",
        status: "done", // pending, error, done
      },
      {
        step: "Cloning and configuring the repository",
        status: "pending", // pending, error, done
      },
      {
        step: "Pulling main image",
        status: "pending", // pending, error, done
      },
      {
        step: "Starting server",
        status: "pending", // pending, error, done
      },
    ],
};

[olevski]

@andre-code do you want to have a /status endpoint to get the detailed status or you would prefer to have everything in one place?

[olevski]

Because if we have a separate endpoint for the status then I can simply not send the detailed status breakdown in the regular response. And if you need the detailed status you can go to a different endpoint and get that session's status.

[andre-code]

thanks @olevski. All at the same end point as you proposed.

[ksanao]

I recommend showing a progress bar (with the information on the completed steps that you suggest) and removing the timer (it looks that you already removed it in your designs :) )

[ciyer]

Also, in the session starting display, we should show a message indicating that the user will be brought into an autosave branch if that is the case.