ubicloud/views/cli.erb

<% @page_title = "Web Shell" %>
<% multi = typecast_query_params.bool("multi") %>

<%== part(
  "components/page_header",
  title: "Web Shell",
  right_items: [
    multi ? part("components/button", text: "Single command", link: "?")
      : part("components/button", text: "Multiple commands", link: "?multi=t")
  ],
) %>

<div class="grid gap-6">
  <% if !@last_cli && !@cli %>
    <div class="md:flex md:items-center md:justify-between pb-1 lg:pb-2">
      <div class="min-w-0 flex-1">
        <% unless multi %>
          This page provides access to a web version of
          <a class="font-medium text-orange-600 hover:text-orange-700" href="https://www.ubicloud.com/docs/quick-start/cli">Ubicloud's CLI</a>. You can use it without installing the CLI. All features are available, except ones that execute external
          programs.
        <% else %>
          This page allows scheduling the execution of multiple commands, one per line. It will run the command on the
          first line and display the output, and the set the next command for execution.
        <% end %>
      </div>
    </div>
  <% end %>

  <form action="<%= request.path_info %>" method="POST">
    <%== csrf_tag(request.path_info) %>

    <div class="flex gap-2 justify-between mb-6">
      <div class="font-mono flex-1">
        <% if multi %>
          <%== part("components/form/textarea", name: "multi-cli", attributes: {cols: 80, rows: 6, placeholder: "Multiple commands, one per line", autofocus: true, required: true}) %>
        <% else %>
          <%== part("components/form/text", name: "cli", value: @cli, prefix: "ubi", attributes: {placeholder: "Command. i.e: 'vm list'", autofocus: true, required: true}) %>
        <% end %>
      </div>
      <%== part("components/form/submit_button", text: "Run") %>
    </div>

    <div
      class="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200 <%= (multi && !@cli) ? "hidden" : ""%>"
    >
      <div class="px-4 py-5 sm:p-6 space-y-6">
        <% if @clis && !@clis.empty? %>
          <div class="space-y-2">
            <p class="text-xl font-semibold">Remaining commands:</p>
            <div class="w-full text-sm border p-3 bg-slate-100 text-rose-500 font-mono rounded">
              <% @clis.each do %>
                <pre><tt class="next-clis"><%= it %></tt></pre>
                <input type="hidden" name="clis[]" value="<%= it %>">
              <% end %>
            </div>
          </div>
        <% end %>

        <% if @last_cli %>
          <div class="space-y-2">
            <p class="text-xl font-semibold">Ran command:</p>
            <div class="w-full text-sm border p-3 bg-slate-100 text-rose-500 font-mono rounded">
              <pre><tt id="cli-executed"><%= @last_cli %></tt></pre>
            </div>
          </div>

          <div class="space-y-2">
            <p class="text-xl font-semibold"><%= @ubi_command_execute ? "Would execute" : "Output" %>:</p>
            <div class="w-full text-sm border p-3 bg-slate-100 text-rose-500 font-mono rounded">
              <pre><tt id="cli-output"><%== @output %></tt></pre>
            </div>
          </div>
          <% if @ubi_confirm %>
            <%== part("components/form/text", name: "confirm", label: @ubi_confirm) %>
          <% end %>
        <% end %>

        <% if !@last_cli && !@cli %>
          <% unless multi %>
            <div class="space-y-2">
              <h2 class="text-xl font-semibold">Examples</h2>
              <dl class="w-full text-sm border p-3 bg-slate-100 text-rose-500 font-mono rounded">
                <dt><code>help -ru</code></dt>
                <dd class="inline-block ml-6 mb-4">Display the syntax for all supported commands</dd>
                <dt><code>help -r</code></dt>
                <dd class="inline-block ml-6 mb-4">Show full help for all supported commands</dd>
                <dt><code>vm list</code></dt>
                <dd class="inline-block ml-6">List all virtual machines</dd>
              </dl>
            </div>

            <p>
              This page allows execution of a single command. However, you can also
              <a class="font-medium text-orange-600 hover:text-orange-700" href="?multi=t">schedule execution of multiple commands</a>.
            </p>
          <% end %>
        <% end %>
      </div>
    </div>
  </form>
</div>