Viewers of One · The Ruby Dispatch

Subsequent exchange app/views/demo/command.html.erb with the next:

<div class="w-full" data-controller="submit">

<h1 class="text-4xl font-extrabold text-center">Command demo</h1>

<enter data-submit-target="enter" title="app" placeholder="appname"
  class="appearance-none mt-4 w-40 mx-auto block bg-gray-200
         text-gray-700 border rounded py-3 px-4 mb-3
         leading-tight focus:outline-none focus:bg-white">

<button data-submit-target="submit" 
  class="flex mx-auto bg-blue-500 hover:bg-blue-700 text-white
          font-bold py-2 px-4 border-2 rounded-xl
          my-4">submit</button>

<div class="border-2 border-black rounded-xl p-2 hidden">
<div data-submit-target="output" data-stream=""
  class="w-full mx-auto overflow-y-auto h-auto font-mono text-sm
         max-h-[25rem] min-h-[25rem]">
</div>
</div>

</div>

That is normal HTML. It doesn’t even use any Rails kind helpers.
Nor even a HTML <kind> factor – the fields can be wired collectively
utilizing Stimulus. Notes:

• data-controller names the stimulus class (submit)
• data-submit-target recognized the enter subject(s),
  the submit button, and the output space.
• data-steam on the output goal incorporates the one little bit of ERB,
  and that comprise the token that can uniquely establish the stream.

The tailwind CSS stylings are taken from the Monitoring tab from the
fly io dashboard, minus the background colour.

The div factor that incorporates the output is initially hidden.

Change app/javascript/controllers/submit_controller.js with the
following:

import { Controller } from "@hotwired/stimulus"
import shopper from '../channels/shopper'

// Connects to data-controller="submit"
export default class extends Controller {
  static targets = [ "input", "submit", "output" ]

  join() {
    this.buttonTarget.addEventListener('click on', occasion => {
      occasion.preventDefault()

      const { outputTarget } = this

      const params = {}
      for (const enter of this.inputTargets) {
        params[input.name] = enter.worth
      }

      shopper.subscriptions.create({
        channel: "OutputChannel",
        stream: outputTarget.dataset.stream
      }, {
        related() {
          this.carry out("command", params)
          outputTarget.parentNode.classList.take away("hidden")
        },

        obtained(information) {
          let div = doc.createElement("div")
          div.setAttribute("class",
             "pb-2 break-all overflow-x-hidden")
          div.innerHTML = information

          let backside = outputTarget.scrollHeight -
            outputTarget.scrollTop -
            outputTarget.clientHeight
          outputTarget.appendChild(div)
          if (backside == 0) div.scrollIntoView()
        }
      })
    })
  }
}

This stimulus class:

• Identifies the three “targets” to match within the HTML: enter, submit,
  and output.
• Defines an motion to be executed when the submit button is clicked
• Extracts the outputTarget and the title and worth of every of the inputs.
• Creates a subscription on the OutputChannel, figuring out the substream
  taken from the output goal factor. Two features are outlined
  for the subscription:
  • related will request that the command be carried out, passing
    the parameters constructed from the enter(s). Moreover the
    enclosing factor for the output goal can be unhidden.
  • obtained will add a line to the output. If the output stream
    was scrolled to the underside on the time a line is added the
    scroll will advance to point out the brand new content material.

Change app/controllers/demo_controller.rb with the next:

class DemoController < ApplicationController
  def cmd
    @stream = OutputChannel.register do |params|
      ["flyctl", "logs", "--app", params["app"]]
    finish
  finish
finish

This will not appear to be a lot, however it’s maybe a very powerful
half. I’m not an professional on safety, however I’m fairly certain that
letting random individuals on the web present instructions to be executed
in your server is a nasty concept. This code takes various precautions:

• Streams are by invitation solely. As we are going to quickly see a random
  token can be generated by the channel, and this token can be
  positioned within the HTML which presumably can be served through https,
  so solely the recipient can provoke a stream.
• Even with a token, the one instructions that can be issued are
  offered by the server, optionally augmented by parameters that
  are handed by the shopper. This code can do additional validation
  and even present totally different instructions primarily based on the enter offered.
• The ultimate command is an array of strings permitting the shell
  to be bypassed, stopping shell injection assaults.

Change app/channels/output_channel.rb with the next:

require 'open3'

class OutputChannel < ApplicationCable::Channel
  def subscribed
    @stream = params[:stream]
    @pid = nil
    stream_from @stream if @@registry[@stream]
  finish

  def command(information)
    block = @@registry[@stream]
    run(block.name(information)) if block
  finish

  def unsubscribed
    Course of.kill("KILL", @pid) if @pid
  finish

non-public
  @@registry = {}

  BLOCK_SIZE = 4096

  def self.register(&block)
    token = SecureRandom.base64(15)
    @@registry[token] = block
    token
  finish

  def logger
    @logger ||= Logger.new(nil)
  finish

  def html(string)
    Ansi::To::Html.new(string).to_html
  finish

  def run(command)
    Open3.popen3(*command) do |stdin, stdout, stderr, wait_thr|
      @pid = wait_thr.pid
      information = [stdout, stderr]
      stdin.close_write

      half = { stdout => "", stderr => "" }

      till information.all? file do
        prepared = IO.choose(information)
        subsequent except prepared
        prepared[0].every do |f|
          strains = f.read_nonblock(BLOCK_SIZE).cut up("n", -1)
          subsequent if strains.empty?
          strains[0] = half[f] + strains[0] except half[f].empty?
          half[f] = strains.pop()
          strains.every line
          rescue EOFError => e
        finish
      finish

      half.values.every do |half|
        transmit html(half) except half.empty?
      finish

      information.every  file.shut

      @pid = nil

    rescue Interrupt
    rescue => e
      places e.to_s

    guarantee
      information.every  file.shut
      @pid = nil
    finish    
  finish
finish

There’s so much right here. Let’s begin with the general public interface:

• self.register is what generates a safe random token and
  saves away the block of code that generates the command to
  be executed for later use.
• subscribed is known as when the stimulus controller creates a subscription.
  Observe that it’s going to solely create a stream if the title of the
  stream is within the registry.
• command is what is known as when the stimulus controller calls
  carry out. It can run the block of code from the registry to
  decide the command.
• unsubscribed will kill any operating course of if the cable is closed

Now the non-public components:

• logger will disable the logger. By default Motion Cable will
  log each request which may produce plenty of output. Be happy
  to take away this or filter the output as desired.
• html will name the ANSI to html converter.
• run will launch the command and monitor each the stdout and
  stderr streams, studying from them in buffered blocks as output
  turns into out there, splitting that output in strains and transmitting
  these strains as they develop into out there.

That completes the implementation. Give it a whirl!

Launch your Rails software utilizing bin/dev, after which navitate to
http://localhost:3000/demo/cmd. If you happen to don’t have an current fly
software to observe, change the command in app/controllers/demo_controller.rb
to one thing that can produce output. Maybe tail -f on a file?