Desktops

The Desktops view allows the user to select a desktop to start in a cloud workstation. It is one of the sub-views the overview page can display.

We will not offer all available desktop (webtop) images provided by linuxserver.io. KDE images will be excluded for performance reasons. The i3 images will be excluded as their desktop environment seems too basic. The Enterprise Linux images are excluded as the licensing is unclear, I would first need to research if I am allowed to use them for commercial purposes since they seem to be similar to or based on RHEL.

Architecture

The Desktops view follows the same architecture as the Browsers and Apps views. For more information, please see the Architecture section on the Browsers page of this guide.

Tests

E2E Test

Create an E2E test in Qase. Add a new test case to the Common suite named Desktops. The existing Apps test can be cloned and adjusted to be specific to Desktops.

Automated Tests

We already added an automated test for verifying that the workstation launch view is displayed when the user selects a workstation. Please see the Launch Workstation page of this guide for more information.

There is no need to add separate tests for the desktop selection since it is already covered by the generic workstation selection test.

Production Code

Modify app_live.ex to include the list of available desktops in the state:

app_live.ex

@impl true
def mount(_params, session, socket) do
  {:ok,
    assign(socket,
      apps: Workstations.get_apps(),
      browsers: Workstations.get_browsers(),
      desktops: Workstations.get_desktops(),
      ...
    )}
end

Now modify app_live.html.heex to pass the list of available desktops into the overview view:

app_live.html.heex

<%= if @view == "overview" do %>
  <DesktermWeb.Views.overview
    apps={@apps}
    browsers={@browsers}
    desktops={@desktops}
    loading={@loading}
    overview_view={@overview_view}
    session={@session}
  />
<% end %>

Update workstations.ex to include a list of available desktops:

workstations.ex

@desktops [
  "Alpine MATE",
  "Arch MATE",
  "Arch XFCE",
  "Debian MATE",
  "Debian XFCE",
  "Fedora MATE",
  "Fedora XFCE",
  "Ubuntu MATE",
  "Ubuntu XFCE"
]

def get_desktops do
  @desktops
end

Update images.ex to include the desktop image mappings. Desktop images use the linuxserver.io webtop image with a tag specifying the distribution and desktop environment:

images.ex

# Desktops
"Alpine MATE" => "lscr.io/linuxserver/webtop:alpine-mate",
"Arch MATE" => "lscr.io/linuxserver/webtop:arch-mate",
"Arch XFCE" => "lscr.io/linuxserver/webtop:arch-xfce",
"Debian MATE" => "lscr.io/linuxserver/webtop:debian-mate",
"Debian XFCE" => "lscr.io/linuxserver/webtop:debian-xfce",
"Fedora MATE" => "lscr.io/linuxserver/webtop:fedora-mate",
"Fedora XFCE" => "lscr.io/linuxserver/webtop:fedora-xfce",
"Ubuntu MATE" => "lscr.io/linuxserver/webtop:ubuntu-mate",
"Ubuntu XFCE" => "lscr.io/linuxserver/webtop:ubuntu-xfce"

Now modify overview.html.heex to display the desktops sub-view in the content section when the user has selected the Desktops overview sub-view:

overview.html.heex

<%= if @overview_view == "desktops" do %>
  <DesktermWeb.Views.workstations workstations={@desktops} />
<% end %>

Since desktop workstation names contain spaces (e.g. "Alpine MATE"), we need to handle two things. First, update workstations.html.heex to derive the logo filename from the first word of the workstation name, and to display multi-word names across multiple lines:

workstations.html.heex

<img
  src={"/images/logos/workstations/#{workstation |> String.split() |> hd()}.svg"}
  alt={workstation}
  class="w-full"
/>
<span class="text-white text-sm text-center">
  <%= for word <- String.split(workstation) do %>
    {word}<br />
  <% end %>
</span>

Second, update container_utilities.ex to sanitize the workstation name for use as a Docker container name, since Docker does not allow spaces in container names. Extract a get_container_name/1 helper and use it in all places where the workstation name is passed to Docker:

container_utilities.ex

defp get_container_name(name), do: name |> String.replace(" ", "_") |> String.downcase()

This helper is used in the docker run --name, docker start, and docker exec commands.

We will now add the necessary logos. Add an SVG logo for each distribution to the directory priv/static/images/logos/workstations. The logo filename should match the first word of the workstation name (e.g. Alpine.svg, Arch.svg, Debian.svg, Fedora.svg, Ubuntu.svg). Since the old VS Code.svg logo filename contained a space, rename it to VS.svg to match the new naming convention.