generationtux/brizo

<style>
.previous-versions .version:first-of-type {
  padding-left: 0
}

.previous-versions .version:nth-child(3n+1) {
  padding-left: 0
}
</style>

<div class="container-fluid">
  <div class="page-header">
    <h2>
      <small class="breadcrumb-previous"><a [routerLink]="['/']">Apps</a> &gt;</small>
      <small class="breadcrumb-previous"><a [routerLink]="['/applications', application.uuid]">{{ application?.name }}</a> &gt;</small>
      <br>
      {{ environment?.name }}
      <a class="btn btn-link title-settings" [routerLink]="['/environments', environment.uuid, 'configuration']"><i class="fa fa-cog"></i></a>
    </h2>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div *ngIf="versions?.length==0" class="col-md-4 col-md-offset-4 text-center">
        <h2>No versions yet...</h2>
        <p>Verions allow you to deploy your app with different configurations.</p>
        <p><i>To apply configuration values, make sure you set your configuration before creating your first version.</i></p>
        <a class="btn btn-default" [routerLink]="['/environments', environment.uuid, 'versions', 'create']">
          <i class="fa fa-plus"></i> Version
        </a>
        <a [routerLink]="['/environments/', environment.uuid, 'configuration']" class="btn btn-default">
          <i class="fa fa-gear"></i> Configuration
        </a>
      </div>
      <div *ngIf="versions?.length > 0">
        <a href="#" class="btn btn-success btn-outline pull-right" [routerLink]="['/environments', environment.uuid, 'versions', 'create']">
          <i class="fa fa-plus"></i> Create Version
        </a>
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Active</th>
              <th>Replicas</th>
              <th>Created At</th>
              <th>Last Updated</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let version of versions; let l = last">
              <td><a [routerLink]="['/environments/', environment.uuid, 'versions', version.uuid]">{{ version.name }}</a></td>
              <td><i class="fa fa-check" aria-hidden="true" *ngIf="l"></i></td>
              <td>{{ version.replicas }}</td>
              <td>{{ version.created_at | date:'medium'}}</td>
              <td>{{ version.updated_at | date:'medium'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>