src/repair-duts.html

<div class="container">
  <h1>Repairs</h1>
  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group">
      <a href="/scanner-repairs.html" class="btn btn-primary">Scanner repairs</a>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-secondary">Export to CSV</button>
    </div>
  </div>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">DUT</th>
        <th scope="col">Model</th>
        <th scope="col">Board</th>
        <th scope="col">Actions</th>
        <th scope="col">History</th>
        <th scope="col">Verifier details</th>
        <th scope="col">Servo</th>
        <th scope="col">Power</th>
        <th scope="col">USB</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">chromeos2-row3-rack4-host6</th>
        <td>lava</td>
        <td>coral</td>
        <td>
          <div class="btn-group">
            <button type="button" class="btn btn-primary">Mark Reset servo</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Mark Reset servo</a>
              <a class="dropdown-item" href="#" data-toggle="modal" data-target="#markOther">Mark Other</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Rerun repair</a>
              <a class="dropdown-item" href="#">Start replacement</a>
            </div>
          </div>
        </td>
        <td><a href="/dut-history/dut1.html">History</a></td>
        <td><a href="/dut-verifiers/dut1.html">details</a></td>
        <td class="bg-danger">Fail</td>
        <td class="bg-success">Pass</td>
        <td class="bg-success">Pass</td>
      </tr>
      <tr>
        <th scope="row">chromeos2-row3-rack4-host7</th>
        <td>lava</td>
        <td>coral</td>
        <td></td>
        <td></td>
        <td>
          <a href="/dut-verifiers/running.html">Running</a>
          <div class="spinner-border spinner-border-sm text-warning" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </td>
        <td class="bg-success">Pass</td>
        <td class="bg-danger">Fail</td>
        <td class="bg-success">Pass</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="modal fade" id="markOther" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Mark custom manual action</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="action">Manual action</label>
            <input class="form-control" id="exampleInputEmail1">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>