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

Abstruse CI

<app-header></app-header>

<div class="container" *ngIf="loading">
  <img src="/assets/images/icons/flickr.svg" class="main-loader">
</div>

<div class="container" *ngIf="!loading">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div class="columns is-multiline">

          <div class="column is-12 is-hidden-mobile is-tablet" *ngIf="build">
            <div class="build-top-container" [ngClass]="{ green: status === 'success', yellow: status === 'running', red: status === 'failed' }">
              <div class="build-top-content">
                <div class="columns is-multiline">
                  <div class="column is-8">
                    <h1 class="bold">
                      <span *ngIf="build?.repository?.full_name"><a [routerLink]="['/repo', build?.repository.id]">{{ build?.repository?.full_name }}</a></span>
                      <span *ngIf="!build?.repository?.full_name && build?.data?.project?.path_with_namespace"><a [routerLink]="['/repo', build?.repository.id]">{{ build?.data?.project?.path_with_namespace }}</a></span>
                    </h1>
                    <div class="branch-container">
                      <span class="icon">
                        <img src="/assets/images/icons/git-branch.svg">
                      </span>
                      <span *ngIf="build?.branch">{{ build?.branch }}</span>
                    </div>
                    <span class="build-icon">
                      <img src="/assets/images/icons/clock.svg" *ngIf="status === 'queued'">
                      <img src="/assets/images/icons/flickr.svg" *ngIf="status === 'running'">
                      <img src="/assets/images/icons/check-true.svg" *ngIf="status === 'success'">
                      <img src="/assets/images/icons/check-false.svg" *ngIf="status === 'failed'">
                    </span>
                  </div>
                  <div class="column is-2" [class.is-hidden]="status !== 'success' && status !== 'failed'"></div>
                  <div class="column is-2" *ngIf="userId && build?.hasPermission">
                    <button class="button is-fullwidth" name="restart-build" type="button" (click)="restartBuild($event, build.id)" [disabled]="processingBuild">
                      <div class="centered">
                        <span class="icon">
                          <img src="/assets/images/icons/restart.svg">
                        </span>
                        <span>Restart Build</span>
                      </div>
                    </button>
                  </div>
                  <div class="column is-2" *ngIf="build?.hasPermission" [class.is-hidden]="status === 'success' || status === 'failed'">
                    <button class="button is-fullwidth" name="stop-build" type="button" (click)="stopBuild($event, build.id)" [disabled]="processingBuild">
                      <div class="centered">
                        <span class="icon">
                          <img src="/assets/images/icons/stop.svg">
                        </span>
                        <span>Stop Build</span>
                      </div>
                    </button>
                  </div>

                  <hr/>

                  <div class="column is-1">
                    <p class="text-small">
                      <span class="icon">
                        <img src="/assets/images/icons/git-commit.svg">
                      </span>
                      <span name="sha" *ngIf="build?.data?.pull_request?.head?.sha">{{ build?.data?.pull_request?.head?.sha.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="!build?.data?.pull_request?.head?.sha && build?.data?.after">{{ build?.data?.after?.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="!build?.data?.pull_request?.head?.sha && !build?.data?.after && build?.data?.sha">{{ build?.data?.sha.slice(0, 7) }}</span>
                      <span name="sha" *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.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="build?.data?.push?.changes">{{ build?.data?.push?.changes[0].commits[0].hash.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="build?.data?.pullrequest">{{ build?.data?.pullrequest?.source?.commit?.hash.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="build?.data?.commit">{{ build?.data?.commit?.id?.slice(0, 7) }}</span>
                    </p>
                  </div>
                  <div class="column is-4">
                    <p name="message" *ngIf="commitMessage" class="text-small">{{ commitMessage }}</p>
                  </div>
                  <div class="column is-4">
                    <p class="text-small">
                      <span class="avatar-img-container">
                        <img *ngIf="authorAvatar" [src]="authorAvatar" class="avatar-img">
                        <img *ngIf="authorAvatar && committerAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
                      </span>

                      <span name="author-and-commited" *ngIf="nameAuthor && nameCommitter === nameAuthor">
                        {{ nameAuthor }} authored and commited
                      </span>
                      <span name="author-commited" *ngIf="nameCommitter !== nameAuthor">
                        {{ nameAuthor }} commited with {{ nameCommitter }}
                      </span>

                      <span class="text-time">{{ dateTimeToNow }} ago</span>
                    </p>
                  </div>
                  <div class="column is-2">
                    <p class="text-small">
                      <span *ngIf="status !== 'running'">Build started {{ timeWords }} ago</span>
                      <span name="approximately-remainig-time" *ngIf="status === 'running' && previousRuntime && previousRuntime > 0 && previousRuntime >= (currentTime - minRunningJobStartTime)">approximately {{ previousRuntime - (currentTime - minRunningJobStartTime) | date:'mm:ss' }} remaining</span>
                    </p>
                  </div>
                  <div class="column is-1">
                    <p class="total-time" *ngIf="!processingBuild">
                      <img src="/assets/images/icons/clock.svg">
                      <span *ngIf="status !== 'running' && maxCompletedJobTime">{{ maxCompletedJobTime | toTime }}</span>
                      <span *ngIf="status !== 'running' && !maxCompletedJobTime">00:00</span>
                      <span *ngIf="status === 'running' && maxCompletedJobTime > (currentTime - minRunningJobStartTime)">{{ maxCompletedJobTime | toTime }}</span>
                      <span *ngIf="status === 'running' && (!maxCompletedJobTime || maxCompletedJobTime <= (currentTime - minRunningJobStartTime))">{{ currentTime - minRunningJobStartTime | toTime }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-12 is-hidden-tablet mobile-build-top-container" *ngIf="build">
            <div class="mobile-build-top-container">
              <div class="columns is-mobile" [ngClass]="{ green: status === 'success', yellow: status === 'running', red: status === 'failed' }">
                <div class="column is-2">
                  <img *ngIf="authorAvatar" [src]="authorAvatar" class="mobile-avatar-img">
                </div>
                <div class="column is-8">
                  <span class="bold" *ngIf="build?.repository?.full_name"><a [routerLink]="['/repo', build?.repository.id]">{{ build?.repository?.full_name }}</a></span>
                  <span class="bold" *ngIf="!build?.repository?.full_name && build?.data?.project?.path_with_namespace"><a [routerLink]="['/repo', build?.repository.id]">{{ build?.data?.project?.path_with_namespace }}</a></span>
                  <span class="name" *ngIf="build?.branch">{{ build?.branch }}</span>
                  <span *ngIf="commitMessage" class="commit-message">{{ commitMessage }}</span>
                </div>
                <div class="column is-2">
                  <span class="build-time" *ngIf="status !== 'running' && maxCompletedJobTime">{{ maxCompletedJobTime | toTime }}</span>
                  <span class="build-time" *ngIf="status !== 'running' && !maxCompletedJobTime">00:00</span>
                  <span class="build-time" *ngIf="status === 'running' && maxCompletedJobTime > (currentTime - minRunningJobStartTime)">{{ maxCompletedJobTime | toTime }}</span>
                  <span class="build-time" *ngIf="status === 'running' && (!maxCompletedJobTime || maxCompletedJobTime <= (currentTime - minRunningJobStartTime))">{{ currentTime - minRunningJobStartTime | toTime }}</span>

                  <div *ngIf="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]="status === 'success' || status === 'failed'">
                      <i class="ionicon ion-stop"></i>
                    </span>
                  </div>
                </div>

                <span class="build-icon">
                  <img src="/assets/images/icons/clock.svg" *ngIf="status === 'queued'">
                  <img src="/assets/images/icons/flickr.svg" *ngIf="status === 'running'">
                  <img src="/assets/images/icons/check-true.svg" *ngIf="status === 'success'">
                  <img src="/assets/images/icons/check-false.svg" *ngIf="status === 'failed'">
                </span>
              </div>
            </div>
          </div>

          <div class="column is-12 is-hidden-mobile is-tablet" *ngIf="build?.jobs && build?.jobs.length">
            <div class="columns list-item list-item-slim"
                 *ngFor="let job of build.jobs; let i = index;"
                 [ngClass]="{ 'is-queued': job.status === 'queued', 'is-success': job.status === 'success', 'is-running': job.status === 'running', 'is-errored': job.status === 'failed' }"
                 (click)="gotoJob($event, job.id)">
              <div class="column is-1">
                <span class="bold larger"># {{ build.id }}.{{ job.id }}</span>
              </div>
              <div class="column is-3">
                <span class="icon is-large">
                  <img src="/assets/images/logos/docker.svg">
                </span>
                <span class="version">
                  IMAGE: {{ job?.data?.image }}
                </span>
              </div>
              <div class="column is-4">
                <div class="icon-and-text">
                  <span class="icon is-medium">
                    <img src="/assets/images/icons/computing-script.svg">
                  </span>
                  <span class="env-text">{{ job?.data?.env }}</span>
                </div>
              </div>
              <div class="column is-2">
                <progress min="0" max="1" [value]="(currentTime - job?.start_time) / job.lastRunTime" *ngIf="job?.status === 'running' && job?.lastRunTime && job?.lastRunTime > 0 && (currentTime - job?.start_time) / job?.lastRunTime < 1"></progress>
                <span class="data-label green" *ngIf="job?.status === 'success'">Success</span>
                <span class="data-label red" *ngIf="job?.status === 'failed'">Failed</span>
                <span class="data-label bright" *ngIf="job?.status === 'queued'">Queued</span>
                <span class="data-label bright" *ngIf="job?.status === 'running' && (job?.lastRunTime && (currentTime - job?.start_time) / job?.lastRunTime) >= 1">Running</span>
              </div>
              <div class="column is-1" *ngIf="processingBuild"></div>
              <div class="column is-1" *ngIf="!processingBuild">
                <span class="job-time" *ngIf="job?.status === 'running'">{{ currentTime - job.start_time | toTime }}</span>
                <span class="job-time" *ngIf="job?.end_time && (job?.status === 'success' || job?.status === 'failed')">{{ job.end_time - job.start_time | toTime }}</span>
                <span class="job-time" *ngIf="job?.status === 'queued' || (!job.end_time && (job?.status === 'success' || job?.status === 'failed'))">00:00</span>
              </div>
              <div class="column is-1" *ngIf="userId && build?.hasPermission">
                <span class="icon circle" name="restart-job" (click)="restartJob($event, job.id)" [class.disabled]="job.processing">
                  <i class="ionicon ion-refresh"></i>
                </span>
                <span class="icon circle" name="stop-job" (click)="stopJob($event, job.id)" [class.disabled]="job.processing" [class.is-hidden]="job?.status === 'success' || job?.status === 'failed'">
                  <i class="icon">
                    <img src="/assets/images/icons/stop.svg">
                  </i>
                </span>
              </div>
            </div>
          </div>

          <div class="column is-12 is-hidden-tablet" *ngIf="build?.jobs && build?.jobs.length">
            <div class="columns list-item mobile-build-item is-mobile"
                  *ngFor="let job of build.jobs; let i = index;"
                  [ngClass]="{ 'is-queued': job.status === 'queued', 'is-success': job.status === 'success', 'is-running': job.status === 'running', 'is-errored': job.status === 'failed' }"
                  (click)="gotoJob($event, job.id)">
              <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">IMAGE: {{ job?.data?.image }}</span>

                  <span class="bold">{{ job?.data?.env }}</span>

                  <span class="data-label green" *ngIf="job?.status === 'success'">Success</span>
                  <span class="data-label red" *ngIf="job?.status === 'failed'">Failed</span>
                  <span class="data-label bright" *ngIf="job?.status === 'queued'">Queued</span>
                  <span class="data-label bright" *ngIf="job?.status === 'running' && (job?.lastRunTime && (currentTime - job?.start_time) / job?.lastRunTime) >= 1">Running</span>
                </div>
              </div>
              <div class="column is-2">
                <span class="build-time" *ngIf="job?.status === 'running'">{{ currentTime - job.start_time | toTime }}</span>
                <span class="build-time" *ngIf="job?.status === 'success' || job?.status === 'failed'">{{ job.end_time - job.start_time | toTime }}</span>
                <span class="build-time" *ngIf="job?.status === 'queued'">00:00</span>

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

        </div>
      </div>
    </div>
  </div>
</div>