ubicloud/views/github/runner.erb

<% @page_title = "Active Runners" %>

<div class="auto-refresh hidden" data-interval="10"></div>

<%== render("github/tabbar") %>

<div class="grid gap-6">
  <%
    free_upgrade_badge = if @installation.free_runner_upgrade?
      <<~CONTENT
        <a href="#{@project_data[:path]}/github/#{@installation.ubid}/setting">
          <span class="rounded-full bg-green-600/10 px-2.5 py-1 text-xs/5 font-medium text-green-600">
            You’re eligible for an exclusive <span class="font-semibold">50% off</span> premium runners until
            <span class="font-semibold">#{@installation.free_runner_upgrade_expires_at.strftime("%B %d, %Y")}</span>
          </span>
        </a>
      CONTENT
    end
  %>
  <%== part(
    "components/table_card",
    headers: ["Repository", "Runner", "Workflow Job", "", ""],
    rows:
      @runners.map do |runner|
        destroy_url = "#{@project_data[:path]}/github/#{@installation.ubid}/runner/#{runner.ubid}"
        os = runner.label_data["boot_image"].match(/(ubuntu-\d{2})\d{2}/)[1]
        family = runner.vm&.family || runner.label_data["family"]
        [
          [
            [[
              [runner.repository_name, {link: runner.repository_url}],
              runner.workflow_job&.[]("head_branch")
            ], {}],
            [[
              [runner.ubid, {link: runner.runner_url}],
              [<<~CONTENT, {escape: false}],
                <div class="flex gap-1">
                  <div class="rounded-md px-2 text-xs font-medium leading-5 bg-slate-100 text-slate-800">#{runner.label_data["vcpus"]} vCPU</div>
                  <div class="rounded-md px-2 text-xs font-medium leading-5 #{(family == "premium") ? "bg-orange-100 text-orange-600" : "bg-slate-100 text-slate-800"}">#{family}</div>
                  <div class="rounded-md px-2 text-xs font-medium leading-5 bg-slate-100 text-slate-800">#{runner.label_data["arch"]}</div>
                  <div class="rounded-md px-2 text-xs font-medium leading-5 bg-slate-100 text-slate-800">#{os}</div>
                </div>
              CONTENT
            ], {}],
            if (workflow_job = runner.workflow_job)
              [[
                [workflow_job["workflow_name"].to_s, {link: runner.run_url}],
                [workflow_job["name"].to_s, {link: runner.job_url}],
              ], {}]
            elsif runner.ready_at
              [
                  [
                    "Waiting for GitHub to assign a job",
                    "Ready for #{format_time_diff(runner.ready_at, Time.now)}"
                  ], {}
                ]
            elsif runner.strand && runner.strand.label == "wait_concurrency_limit"
                [
                  [
                    "Reached your concurrency limit",
                    "Waiting for #{format_time_diff(runner.created_at, Time.now)}"
                  ], {}
                ]
            else
                [
                  [
                    "Provisioning an ephemeral virtual machine",
                    "Waiting for #{format_time_diff(runner.created_at, Time.now)}"
                  ], {}
                ]
            end,
            if (job = runner.workflow_job)
              [
                [
                  "Running for #{format_time_diff(Time.parse(job["started_at"]), Time.now)}",
                  "Started in #{format_time_diff(Time.parse(job["created_at"]), Time.parse(job["started_at"]))}"
                ], {}
              ]
            else
              ""
            end,
            [
              "button",
              {
                component: {
                  text: nil,
                  icon: "hero-x-circle",
                  extra_class: "delete-btn",
                  type: "danger",
                  attributes: {
                    "title" => "Terminate",
                    "data-url" => destroy_url,
                    "data-csrf" => csrf_token(destroy_url, "DELETE"),
                    "data-confirmation-message" => "Are you sure to terminate this runner?\nThis will cancel its current job and permanently delete all its data.",
                    "data-redirect" => request.path,
                    "data-method" => "DELETE"
                  }
                },
                extra_class: "text-right"
              }
            ]
          ],
          { id: "runner-#{runner.ubid}" }
        ]
      end,
    empty_state: <<~EMPTY
      <div class="flex flex-col gap-3">
        <h3 class="text-xl leading-10 font-medium">No active runners</h3>
        <p class="leading-6">
          To use Ubicloud runners, you need to change
          <span class="text-rose-500 text-sm font-medium bg-slate-100 py-0.5 px-2 rounded font-mono whitespace-nowrap">runs-on: ...</span>
          line to one of our labels such as
          <span class="text-rose-500 text-sm font-medium bg-slate-100 py-0.5 px-2 rounded font-mono whitespace-nowrap">runs-on: ubicloud-standard-2</span>
          in your workflow file. Then, trigger your workflow to start a runner.
          <br>
          Check out
          <a href="https://www.ubicloud.com/docs/github-actions-integration/quickstart" class="text-orange-500 font-medium">our documentation</a>
          for using larger runners, using arm64, enabling GPU.
        </p>
        #{free_upgrade_badge}
      </div>
    EMPTY
  ) %>
</div>