ubicloud/views/github/setting.erb

<% @page_title = "GitHub Runner Settings" %>

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

<div class="grid gap-6">
  <!-- Premium runners -->
  <div class="overflow-hidden rounded-lg ring-1 ring-black ring-opacity-5 bg-white lg:flex shadow">
    <div class="p-8 sm:p-10 lg:flex-auto">
      <div class="flex items-center">
        <h3 class="text-3xl font-semibold tracking-tight text-gray-900 whitespace-nowrap">
          Premium Runners
        </h3>
        <% if @installation.premium_runner_enabled? %>
          <span class="rounded-full bg-orange-600/10 px-2.5 py-1 text-xs/5 font-semibold text-orange-600 ml-2">
            Enabled
          </span>
        <% end %>
      </div>
      <% if @installation.free_runner_upgrade? %>
        <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>
      <% end %>
      <p class="mt-4 text-base/7 text-gray-600">
        Speed up your builds with cutting edge gaming CPUs! We automatically route your jobs to premium machines. If
        capacity's full, you seamlessly fall back to standard runners with no extra wait time. You always get billed by
        the minute and for the runner type you're using.
      </p>
      <div class="mt-6 flex items-center gap-x-4">
        <h4 class="flex-none text-sm/6 font-semibold text-orange-600">What’s different</h4>
        <div class="h-px flex-auto bg-gray-100"></div>
      </div>
      <ul role="list" class="mt-4 grid grid-cols-1 gap-4 text-sm/6 text-gray-600 sm:grid-cols-2">
        <% [
          "Twice as fast",
          "One fifth the cost",
          "10x better price-performance",
          "100GB free cache storage",
        ].each do |text| %>
          <li class="flex gap-x-3">
            <%== part("components/icon", name: "hero-check", classes: "h-6 w-5 flex-none text-orange-600") %>
            <%= text %>
          </li>
        <% end %>
      </ul>
    </div>
    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-sm lg:shrink-0">
      <div
        class="rounded-lg h-full bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16"
      >
        <div class="mx-auto max-w-sm px-8 space-y-8">
          <p class="flex items-baseline justify-center gap-x-2">
            <span class="text-4xl font-semibold tracking-tight text-gray-900">Boost your builds</span>
          </p>
          <%== part("components/form/toggle_form", name: "premium_runner_enabled", action: "#{@project_data[:path]}/github/#{@installation.ubid}", active: @installation.premium_runner_enabled?) %>
          <div class="mt-6 text-sm/5 text-gray-600 italic">
            <p class="font-semibold">1/5th the cost of GitHub runners</p>
            <p>For example, 2 gaming vCPUs, 8GB of RAM, 80GB of NVMe storage comes at $0.0016/min.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
      <!-- Transparent Cache Card -->
      <div class="px-4 py-5 sm:p-6">
        <div class="sm:flex sm:items-center sm:justify-between">
          <div>
            <div class="flex items-center">
              <h3 class="text-base font-semibold leading-6 text-gray-900">Ubicloud Transparent Cache</h3>
              <% if @installation.cache_enabled %>
                <span class="rounded-full bg-orange-600/10 px-2.5 py-1 text-xs font-semibold text-orange-600 ml-2">
                  Enabled
                </span>
              <% end %>
            </div>
            <div class="mt-2 text-sm text-gray-500">
              <p>Transparent cache allows you to use Ubicloud’s cache service without modifying your workflow files.
                Check out
                <a href="https://www.ubicloud.com/docs/github-actions-integration/ubicloud-cache" class="text-orange-500 font-medium">our documentation</a>
                for information.</p>
            </div>
          </div>
          <div class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
            <div class="col-span-12 sm:col-span-2 flex justify-end items-end">
              <%== part("components/form/toggle_form", name: "cache_enabled", action: "#{@project_data[:path]}/github/#{@installation.ubid}", active: @installation.cache_enabled) %>
            </div>
          </div>
        </div>
      </div>
      <!-- Configure Repositories -->
      <div class="px-4 py-5 sm:p-6">
        <div class="sm:flex sm:items-center sm:justify-between">
          <div>
            <h3 class="text-base font-semibold leading-6 text-gray-900">Repository Access</h3>
            <div class="mt-2 text-sm text-gray-500">
              <p>Configure the list of repositories that Ubicloud can access on GitHub's UI.</p>
            </div>
          </div>
          <div id="configure-<%=@installation.ubid%>" class="mt-5 sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
            <div class="col-span-12 sm:col-span-2 flex justify-end items-end">
              <%== part("components/button", text: "Configure", link: "https://github.com/apps/#{Config.github_app_name}/installations/#{@installation.installation_id}") %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>