abstruse/src/app/components/app-build-item/app-build-item.component.html

Abstruse CI

<div class="columns is-hidden-mobile is-tablet">
  <div class="column is-2">
    <span class="avatar-img-container is-hidden-mobile">
      <img *ngIf="authorAvatar" [src]="authorAvatar" class="avatar-img">
      <img *ngIf="authorAvatar && committerAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
    </span>
    <span *ngIf="!build?.pr && build?.data?.object_kind !== 'merge_request' && !build?.data?.pull_request && !tag" class="bold larger">#{{ build?.id }}</span>
    <span *ngIf="(build?.pr && !build?.data?.object_kind) && !build?.data?.pull_request && !tag" class="bold larger">PR #{{ build?.pr }}</span>
    <span *ngIf="build?.data?.object_kind === 'merge_request' && !build?.data?.pull_request && !tag" class="bold larger">PR #{{ build?.data?.object_attributes?.iid }}</span>
    <span *ngIf="build?.data?.pull_request && !tag" class="bold larger">PR #{{ build?.data?.pull_request?.number }}</span>
    <span *ngIf="tag" class="bold larger">{{ tag }}</span>
  </div>
  <div class="column is-2">
    <div class="repo-branch-column">
      <span class="larger bold repo-full-name" *ngIf="build?.repository?.full_name">{{ build?.repository?.full_name }}</span>
      <span class="larger bold repo-full-name" *ngIf="!build?.repository?.full_name">{{ build?.data?.repository?.full_name }}</span>

      <span *ngIf="build?.branch" class="span-branch is-hidden-mobile">
        <img src="/assets/images/icons/git-branch.svg">
        {{ build?.branch }}
      </span>
    </div>
  </div>
  <div class="column is-4 commit-column">
    <span class="icon">
      <img src="/assets/images/icons/git-commit.svg">
    </span>
    <span name="sha" class="bold" *ngIf="build?.data?.pull_request?.head?.sha">{{ build?.data?.pull_request.head.sha }}</span>
    <span name="sha" class="bold" *ngIf="!build?.data?.pull_request?.head?.sha && build?.data?.after">{{ build?.data?.after }}</span>
    <span name="sha" class="bold" *ngIf="!build?.data?.pull_request?.head?.sha && !build?.data?.after && build?.data?.sha">{{ build?.data?.sha }}</span>
    <span name="sha" class="bold" *ngIf="!build?.data?.pull_request?.head?.sha && !build?.data?.after && !build?.data?.sha && build?.data?.object_attributes?.last_commit?.id">{{ build?.data?.object_attributes?.last_commit?.id }}</span>
    <span name="sha" class="bold" *ngIf="build?.data?.push?.changes">{{ build?.data?.push?.changes[0].commits[0].hash }}</span>
    <span name="sha" class="bold" *ngIf="build?.data?.pullrequest">{{ build?.data?.pullrequest?.source?.commit?.hash }}</span>
    <span name="sha" class="bold" *ngIf="build?.data?.pull_request">{{ build?.data?.pull_request?.source?.commit?.hash }}</span>
    <span name="sha" class="bold" *ngIf="build?.data?.commit">{{ build?.data?.commit?.id }}</span>

    <span name="commit-message">{{ commitMessage }}</span>

    <span class="smaller">{{ buildCreated }} ago</span>
  </div>
  <div class="column is-2 justify-center">
    <span name="author" *ngIf="name && !tag">{{ name }}</span>
    <span name="author" *ngIf="!build?.data?.user_name && !build?.data?.commits && build?.data?.actor?.display_name && !tag">{{ build?.data?.actor?.display_name }}</span>
    <span name="author" *ngIf="!build?.data?.user_name && !build?.data?.commits && !build?.data?.actor?.display_name && !build?.data?.sender?.login && build?.data?.user?.name && !tag">{{ build?.data?.user?.name }}</span>
    <span name="author" *ngIf="tag">{{ build?.data?.head_commit?.committer?.name }}</span>
    <span name="author" *ngIf="build?.data?.user_name">{{ build?.data?.user_name }}</span>
    <span name="author" *ngIf="build?.data?.pusher">{{ build?.data?.pusher?.username }}</span>
    <span name="author" *ngIf="build?.data?.pull_request">{{ build?.data?.pull_request?.user?.username }}</span>
    <span name="author" *ngIf="build?.data?.commit">{{ build?.data?.commit?.author_name }}</span>
  </div>
  <div class="column is-1">
    <span class="build-time" *ngIf="build?.status === 'running' && build?.maxCompletedJobTime && build?.minRunningJobStartTime && build?.maxCompletedJobTime > (currentTime - build?.minRunningJobStartTime)">{{ build?.maxCompletedJobTime | toTime }} </span>
    <span class="build-time" *ngIf="build?.status === 'running' && build?.maxCompletedJobTime && build?.minRunningJobStartTime && build?.maxCompletedJobTime <= (currentTime - build?.minRunningJobStartTime)">{{ currentTime - build?.minRunningJobStartTime | toTime }} </span>
    <span class="build-time" *ngIf="build?.status !== 'running' && build?.maxCompletedJobTime">{{ build?.maxCompletedJobTime | toTime }}</span>
  </div>
  <div class="column is-1 justify-end" *ngIf="build?.hasPermission">
    <span class="icon circle restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="processingRequest">
      <i class="ionicon ion-refresh"></i>
    </span>
    <span class="icon circle stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="processingRequest" [class.is-hidden]="build.status === 'success' || build.status === 'failed'">
      <i class="icon">
        <img src="/assets/images/icons/stop.svg">
      </i>
    </span>
  </div>
</div>

<div class="columns is-mobile is-hidden-tablet mobile-build-item">
  <div class="column is-2">
    <img *ngIf="authorAvatar" [src]="authorAvatar" class="mobile-avatar-img">
  </div>
  <div class="column is-8">
    <div class="mobile-build-item-body">
      <span class="name" *ngIf="name && !tag">{{ name }}</span>
      <span class="name" *ngIf="!build?.data?.user_name && !build?.data?.commits && build?.data?.actor?.display_name && !tag">{{ build?.data?.actor?.display_name }}</span>
      <span class="name" *ngIf="!build?.data?.user_name && !build?.data?.commits && !build?.data?.actor?.display_name && !build?.data?.sender?.login && build?.data?.user?.name && !tag">{{ build?.data?.user?.name }}</span>
      <span class="name" *ngIf="tag">{{ build?.data?.head_commit?.committer?.name }}</span>

      <span class="bold" *ngIf="build?.repository?.full_name">{{ build?.repository?.full_name }}</span>
      <span class="bold" *ngIf="!build?.repository?.full_name">{{ build?.data?.repository?.full_name }}</span>

      <span class="commit-message">{{ commitMessage }}</span>
    </div>
  </div>
  <div class="column is-2">
    <span class="build-time" *ngIf="build?.status === 'running' && build?.maxCompletedJobTime && build?.minRunningJobStartTime && build?.maxCompletedJobTime > (currentTime - build?.minRunningJobStartTime)">{{ build?.maxCompletedJobTime | toTime }} </span>
    <span class="build-time" *ngIf="build?.status === 'running' && build?.maxCompletedJobTime && build?.minRunningJobStartTime && build?.maxCompletedJobTime <= (currentTime - build?.minRunningJobStartTime)">{{ currentTime - build?.minRunningJobStartTime | toTime }} </span>
    <span class="build-time" *ngIf="build?.status !== 'running' && build?.maxCompletedJobTime">{{ build?.maxCompletedJobTime | toTime }}</span>

    <div *ngIf="build?.userId && build?.hasPermission">
      <span class="icon circle restart-build" (click)="restartBuild($event, build.id)" [class.disabled]="processingRequest">
        <i class="ionicon ion-refresh"></i>
      </span>
      <span class="icon circle stop-build" (click)="stopBuild($event, build.id)" [class.disabled]="processingRequest" [class.is-hidden]="build.status === 'success' || build.status === 'failed'">
        <i class="ionicon ion-stop"></i>
      </span>
    </div>
  </div>
</div>