app-job.component.html

<app-header></app-header>

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

<div class="container" [class.hidden]="loading">
  <div class="columns">
    <div class="column is-12">
      <div class="content">
        <div class="columns is-multiline">
          <div class="column is-12" *ngIf="jobRun">
            <div class="build-top-container" [ngClass]="{ green: jobRun?.status === 'success', yellow: jobRun?.status === 'running', red: jobRun?.status === 'failed' }">
              <div class="build-top-content">
                <div class="columns is-multiline">
                  <div class="column is-7">
                    <h1 class="bold">
                      <span *ngIf="job?.build?.data?.repository?.full_name"><a [routerLink]="['/repo', job?.build?.repository?.id]">{{ job?.build?.data?.repository?.full_name }}</a></span>
                      <span *ngIf="!job?.build?.data?.repository?.full_name && job?.build?.data?.project?.path_with_namespace"><a [routerLink]="['/repo', job?.build?.repository?.id]">{{ job?.build?.data?.project?.path_with_namespace }}</a></span>
                      <span class="build-icon">
                        <img src="images/icons/clock.svg" *ngIf="jobRun?.status === 'queued'">
                        <img src="images/icons/flickr.svg" *ngIf="jobRun?.status === 'running'">
                        <img src="images/icons/check-true.svg" *ngIf="jobRun?.status === 'success'">
                        <img src="images/icons/check-false.svg" *ngIf="jobRun?.status === 'failed'">
                      </span>
                    </h1>
                  </div>
                  <div class="column is-5 justify-end right-buttons-top" *ngIf="userId && job?.hasPermission">
                    <button class="button is-fullwidth" name="btn-restart-ssh" type="button" (click)="restartJobWithSSH($event)" [disabled]="processing">
                      <div class="centered">
                        <span class="icon">
                          <img src="images/icons/restart.svg">
                        </span>
                        <span>Restart (debug)</span>
                      </div>
                    </button>
                    <button class="button is-fullwidth" name="btn-restart" type="button" (click)="restartJob($event)" [disabled]="processing">
                      <div class="centered">
                        <span class="icon">
                          <img src="images/icons/restart.svg">
                        </span>
                        <span>Restart</span>
                      </div>
                    </button>
                    <button class="button is-fullwidth" name="btn-stop" type="button" (click)="stopJob($event)" [class.is-hidden]="jobRun.status !== 'running'" [disabled]="processing">
                      <div class="centered">
                        <span class="icon">
                          <img src="images/icons/stop.svg">
                        </span>
                        <span>Stop</span>
                      </div>
                    </button>
                  </div>

                  <hr/>

                  <div class="column is-4">
                    <h2 *ngIf="job?.build?.data?.pull_request && !tag">{{ job?.build?.data?.pull_request?.title }}</h2>
                    <h2 *ngIf="!job?.build?.data?.pull_request && job?.build?.data?.commits && !tag">{{ job?.build?.data?.commits[0]?.message }}</h2>
                    <h2 *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.commits && job?.build?.data?.message && !tag">{{ job?.build?.data?.message }}</h2>
                    <h2 *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.commits && !job?.build?.data?.message && job?.build?.data?.object_attributes?.last_commit?.message && !tag">{{ job?.build?.data?.object_attributes?.last_commit?.message }}</h2>
                    <h2 *ngIf="tag">{{ job?.build?.data?.head_commit?.message }}</h2>
                  </div>
                  <div class="column is-1">
                    <p>
                      <span class="icon">
                        <img src="images/icons/git-commit.svg">
                      </span>
                      <span *ngIf="job?.build?.data?.pull_request?.head?.sha">{{ job?.build?.data?.pull_request?.head.sha.slice(0, 7) }}</span>
                      <span *ngIf="!job?.build?.data?.pull_request && job?.build?.data?.after">{{ job?.build?.data?.after.slice(0, 7) }}</span>
                      <span *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.after && job?.build?.data?.sha">{{ job?.build?.data?.sha.slice(0, 7) }}</span>
                      <span *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.after && !job?.build?.data?.sha && job?.build?.data?.object_attributes?.last_commit?.id">{{ job?.build?.data?.object_attributes?.last_commit?.id.slice(0, 7) }}</span>
                    </p>
                  </div>
                  <div class="column is-4">
                    <p>
                      <span class="avatar-img-container">
                        <img *ngIf="job?.build?.data?.sender?.avatar_url && authorAvatar" [src]="authorAvatar" class="avatar-img">
                        <img *ngIf="job?.build?.data?.sender?.avatar_url && authorAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
                        <img *ngIf="!job?.build?.data?.sender?.avatar_url && job?.build?.data?.actor?.links?.avatar?.href" [src]="job?.build?.data?.actor?.links?.avatar?.href" class="avatar-img">
                        <img *ngIf="!job?.build?.data?.sender?.avatar_url && !job?.build?.data?.actor?.links?.avatar?.href && job?.build?.data?.user_avatar" [src]="job?.build?.data?.user_avatar" class="avatar-img">
                        <img *ngIf="!job?.build?.data?.sender?.avatar_url && !job?.build?.data?.actor?.links?.avatar?.href && !job?.build?.data?.user_avatar && job?.build?.data?.user?.avatar_url" class="avatar-img" [src]="job?.build?.data?.user?.avatar_url">
                      </span>
                      <span *ngIf="job?.build?.data?.pull_request">{{ job?.build?.data?.sender?.login }} commited {{ timeWords }} ago</span>
                      <span *ngIf="!job?.build?.data?.pull_request && job?.build?.data?.commits">{{ job?.build?.data?.commits[0]?.committer?.name }} commited {{ timeWords }} ago</span>
                      <span *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.commits && job?.build?.data?.actor?.display_name && !tag">{{ job?.build?.data?.actor?.display_name }} commited {{ timeWords }} ago</span>
                      <span *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.commits && !job?.build?.data?.actor?.display_name && job?.build?.data?.user?.name && !tag">{{ job?.build?.data?.user?.name }} commited {{ timeWords }} ago</span>
                    </p>
                  </div>
                  <div class="column is-2">
                    <progress *ngIf="jobRun.status === 'running' && previousRuntime" class="progress-bar is-success is-small" [value]="(jobRun.start_time | timeDurationRaw) / previousRuntime" max="1" min="0"></progress>
                  </div>
                  <div class="column is-1">
                    <p class="total-time">
                      <img src="images/icons/clock.svg">
                      <span *ngIf="jobRun.status === 'running'">{{ jobRun.start_time | timeDuration }}</span>
                      <span *ngIf="jobRun.status !== 'running'">{{ jobRun.end_time - jobRun.start_time | toTime }}</span>
                    </p>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="column is-12" *ngIf="sshd && vnc">
            <div class="ssh-container">
              <span class="icon">
                <img src="images/icons/ssh.svg">
              </span>
              <span>SSH Daemon is enabled in this container.</span>
              <code>ssh {{ sshd.split(':')[0] }} -p {{ sshd.split(':')[1] }} -l abstruse</code>
              <code>VNC: {{ vnc.split(':')[0] }} VNC Port: {{ vnc.split(':')[1] }}</code>
              <code>password: abstruse</code>
            </div>
          </div>
          <div class="column is-12">
            <app-terminal [data]="terminalInput" (outputData)="terminalOutput($event)" [options]="terminalOptions"></app-terminal>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>