app/views/showBake.scala.html

@import data.PackageListDiff
@import fun.mike.dmp.Operation
@(bake: Bake,
  bakeLogs: Iterable[BakeLog],
  packageList: Either[String, List[String]],
  packageListDiff: Either[String, PackageListDiff],
  inUse: Boolean)
@layout("AMIgo"){

  <h1><a href="@routes.RecipeController.showRecipe(bake.recipe.id)">@bake.recipe.id</a> bake number @bake.bakeId.buildNumber</h1>

  <div class="panel panel-default">
    <div class="panel-heading">Info</div>
    <ul class="list-group">
      <li class="list-group-item bake--info">
        <span class="bake--info--title">Number: </span>
        <span><b>#@bake.buildNumber</b></span>
      </li>
      <li class="list-group-item bake--info">
        <span class="bake--info--title">Status: </span>
        <span><b>@bake.status</b></span>
      </li>
      <li class="list-group-item bake--info">
        <span class="bake--info--title">AMI: </span>
        <span id="ami-id"><b>@bake.amiId.getOrElse("(none)")</b></span>
        <span class="bake--info--right">
          <button class="btn btn-primary" title="Copy to clipboard" id="copy-button" data-clipboard-target="#ami-id">
            <img src="@routes.Assets.versioned("images/clippy.svg")" width="13" alt="Copy to clipboard">
          </button>
        </span>
      </li>
      <li class="list-group-item bake--info">
        <span class="bake--info--title">Usage: </span>
        <span>@if(inUse){Bake in use and cannot be deleted}else{Bake is not currently used}</span>
      </li>
      <li class="list-group-item">
        <span class="bake--info--refresh--message"><b>Refresh page to see current status.</b></span>
    </ul>
  </div>

    <div class="panel panel-default">
      <div class="panel-heading">Actions</div>
      <div class="panel-body">
        <a href="@routes.BakeController.deleteConfirm(bake.bakeId.recipeId, bake.bakeId.buildNumber)" class="btn btn-danger" @if(inUse){disabled}>Delete bake and all associated AMIs...</a>
      </div>
    </div>

  <div class="well" id="packer-output">
    @for(log <- bakeLogs) {
      <div class="bake-log">[@log.timestamp.toString("YYYY-MM-dd HH:mm:ss")] @log.messageHtml</div>
    }
    <div class="bake-log">Refresh the page to view new log messages</div>
  </div>

  <div class="package-list">

      @packageListDiff match {
        case Right(PackageListDiff(previousBakeId, removed, added, diff)) => {
          <h2>Package Changes</h2>
          <div class="row">
            <div class="col-md-12">
              Package changes since the <a href="@routes.BakeController.showBake(previousBakeId.recipeId, previousBakeId.buildNumber)">last succesful bake</a>.
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="well package-list">

              @for(d <- diff) {
                @d.operation match {
                  case Operation.EQUAL => {
                    <span>@Html(d.text)</span>
                  }
                  case Operation.INSERT => {
                    <ins class="package-diff-insert">@Html(d.text)</ins>
                  }
                  case Operation.DELETE => {
                    <del class="package-diff-delete">@Html(d.text)</del>
                  }
                }
              }
              </div>
          </div>
         </div>
        }
        case Left(message) => {}
      }
    </div>

    <h2>All installed packages</h2>
      <p>
        This data comes from the OS default package manager (e.g. apt on Ubuntu, yum on amazon linux).
      </p>
    @packageList match {
      case Left(message) => {
        @views.html.fragments.bakeOutput(List(message))
      }
     case Right(list) => {
       @views.html.fragments.bakeOutput(list)
     }
    }

  </div>

} {
  <script src="@routes.Assets.versioned("javascripts/show-bake.js")" type="text/javascript"></script>
  <script src="@routes.Assets.versioned("javascripts/clipboard.min.js")"></script>
  <script>
    var copy = document.getElementById('copy-button');
    var clipboard = new Clipboard(copy);

    clipboard.on('success', function(e) {
      console.log(e);
      copy.classList.add('btn--success');
    });
    clipboard.on('error', function(e) {
      console.log(e);
    });

  </script>

}