5e9db75c4d
The current row design has two main drawbacks: - Its width is too large, making it difficult to display on smaller screens. - It shows the runner's display state, but customers without prior knowledge find it hard to understand. I converted some cells to two lines to make it more compact. Additionally, I replaced the display state with a clearer description. It now shows how many seconds the runner has been waiting to pick up a job or is currently running a job or waiting for idle capacity.
111 lines
4.6 KiB
Plaintext
111 lines
4.6 KiB
Plaintext
<% @page_title = "Active Runners" %>
|
|
|
|
<div class="auto-refresh hidden" data-interval="10"></div>
|
|
|
|
<%== render("github/tabbar") %>
|
|
|
|
<div class="grid gap-6">
|
|
<%== 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}"
|
|
vm_size = runner.label_data["vm_size_data"]
|
|
os = runner.label_data["boot_image"].match(/(ubuntu-\d{2})\d{2}/)[1]
|
|
family = runner.vm&.family || vm_size.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">#{vm_size.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">#{vm_size.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
|
|
<h3 class="text-xl leading-10 font-medium mb-2">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>
|
|
EMPTY
|
|
) %>
|
|
</div>
|