HomeAdministrationTemplatesExtend templatesUI resource ordering

UI resource ordering

On this page

In Coder templates, managing the order of UI elements is crucial for a seamless user experience. This page outlines how resources can be aligned using the order Terraform property or inherit the natural order from the file.

The resource with the lower order is presented before the one with greater value. A missing order property defaults to 0. If two resources have the same order property, the resources will be ordered by property name (or key).

Use the "order" property

Coder parameters

The order property of coder_parameter resource allows specifying the order of parameters in UI forms. In the below example, project_id will appear before account_id:

data "coder_parameter" "project_id" {
  name         = "project_id"
  display_name = "Project ID"
  description  = "Specify cloud provider project ID."
  order = 2
}

data "coder_parameter" "account_id" {
  name         = "account_id"
  display_name = "Account ID"
  description  = "Specify cloud provider account ID."
  order = 1
}

Agents

Agent resources within the UI left pane are sorted based on the order property, followed by name, ensuring a consistent and intuitive arrangement.

resource "coder_agent" "primary" {
  ...

  order = 1
}

resource "coder_agent" "secondary" {
  ...

  order = 2
}

The agent with the lowest order is presented at the top in the workspace view.

Agent metadata

The coder_agent exposes metadata to present operational metrics in the UI. Metrics defined with Terraform metadata blocks can be ordered using additional order property; otherwise, they are sorted by key.

resource "coder_agent" "main" {
  ...

  metadata {
    display_name = "CPU Usage"
    key          = "cpu_usage"
    script       = "coder stat cpu"
    interval     = 10
    timeout      = 1
    order        = 1
  }
  metadata {
    display_name = "CPU Usage (Host)"
    key          = "cpu_usage_host"
    script       = "coder stat cpu --host"
    interval     = 10
    timeout      = 1
    order        = 2
  }
  metadata {
    display_name = "RAM Usage"
    key          = "ram_usage"
    script       = "coder stat mem"
    interval     = 10
    timeout      = 1
    order        = 1
  }
  metadata {
    display_name = "RAM Usage (Host)"
    key          = "ram_usage_host"
    script       = "coder stat mem --host"
    interval     = 10
    timeout      = 1
    order        = 2
  }
}

Applications

Similarly to Coder agents, coder_app resources incorporate the order property to organize button apps in the app bar within a coder_agent in the workspace view.

Only template defined applications can be arranged. VS Code or Terminal buttons are static.

resource "coder_app" "code-server" {
  agent_id     = coder_agent.main.id
  slug         = "code-server"
  display_name = "code-server"
  ...

  order = 2
}

resource "coder_app" "filebrowser" {
  agent_id     = coder_agent.main.id
  display_name = "File Browser"
  slug         = "filebrowser"
  ...

  order = 1
}

Inherit order from file

Coder parameter options

The options for Coder parameters maintain the same order as in the file structure. This simplifies management and ensures consistency between configuration files and UI presentation.

data "coder_parameter" "database_region" {
  name         = "database_region"
  display_name = "Database Region"

  icon        = "/icon/database.svg"
  description = "These are options."
  mutable     = true
  default     = "us-east1-a"

  // The order of options is stable and inherited from .tf file.
  option {
    name        = "US Central"
    description = "Select for central!"
    value       = "us-central1-a"
  }
  option {
    name        = "US East"
    description = "Select for east!"
    value       = "us-east1-a"
  }
  ...
}

Coder metadata items

In cases where multiple item properties exist, the order is inherited from the file, facilitating seamless integration between a Coder template and UI presentation.

resource "coder_metadata" "attached_volumes" {
  resource_id = docker_image.main.id

  // Items will be presented in the UI in the following order.
  item {
    key   = "disk-a"
    value = "60 GiB"
  }
  item {
    key   = "disk-b"
    value = "128 GiB"
  }
}