execution.component.html

<div class="row no-gutters mx-1 py-2">
  <div class="col-1">
    <button class="btn btn-link p-0" (click)="detailsExposed = !detailsExposed">{{ job.job_id }}</button>
  </div>
  <div class="col overflow-hidden">
    <button class="btn btn-link p-0" (click)="detailsExposed = !detailsExposed">{{ job.job_name }}</button>
    <br/>
    <button type="button" class="btn btn-xs btn-outline-primary mr-2"
            (click)="copyToClipboard(getConfigRootDataDirectory() + '/' + queue.name + '/' + job.job_name)">
      <fa-icon [icon]="faCopy"></fa-icon>
      Lustre
    </button>

    <a target="_blank" class="btn btn-xs btn-outline-primary"
       href="{{ getConfigWebLogBaseUrl() }}/vlass/weblog/{{ queue.name }}/{{ job.job_name }}">
      <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
      Weblog
    </a>

  </div>
  <div class="col overflow-hidden">
    {{ job.job_starttime | date:'MMM d, y h:mm a' }} <span class="badge badge-light border mr-2">Start</span>
    {{ job.job_endtime | date:'MMM d, y h:mm a' }} <span class="badge badge-light border"
                                                         *ngIf="job.job_endtime">End</span>
    <br/>
    <span class="text-warning mr-1" *ngIf="showWarning(job)"><fa-icon [icon]="faExclamationTriangle"></fa-icon></span>
    {{duration}} <span class="badge badge-light border mr-2">Duration</span>
  </div>
  <div class="col-2">
    <div ngbDropdown>
      <button class="btn btn-xs" [ngClass]="getJobStatusClass()" type="button" ngbDropdownToggle>
        {{ job.job_status }}
      </button>
      <ul ngbDropdownMenu>
        <li ngbDropdownItem *ngFor="let ps of productStatuses">
          <button type="button" class="btn btn-link p-0" (click)="updateStatus(ps)">{{ps}}</button>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-1">
    <h6><span class="badge ml-2"
              [ngClass]="job.job_arch_status === 'ARCHIVED' ? 'badge-dark' : 'badge-light border'">
            {{ job.job_arch_status }}
        </span></h6>
  </div>
</div>

<div class="p-3 mx-1 mt-1 mb-2 bg-white shadow" *ngIf="detailsExposed" @vslider>
  <app-execution-detail [job]="job" (reload)="reload.emit($event)"></app-execution-detail>
</div>

<div class="border-bottom mx-1"></div>