abstruse/src/app/components/app-job/app-job.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" [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 is-hidden-mobile is-tablet" [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-8">
                    <h1 class="bold">
                      <span *ngIf="job?.build?.repository?.full_name"><a [routerLink]="['/repo', job?.build?.repository?.id]">{{ job?.build?.repository?.full_name }}</a></span>
                      <span *ngIf="!job?.build?.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>
                    </h1>
                    <div class="branch-container">
                      <span class="icon is-small">
                        <img src="/assets/images/icons/git-branch.svg">
                      </span>
                      <span *ngIf="job?.build?.branch">{{ job?.build?.branch }}</span>
                    </div>
                    <span class="build-icon">
                      <img src="/assets/images/icons/clock.svg" *ngIf="jobRun?.status === 'queued'">
                      <img src="/assets/images/icons/flickr.svg" *ngIf="jobRun?.status === 'running' && !debug">
                      <img src="/assets/images/icons/check-true.svg" *ngIf="jobRun?.status === 'success'">
                      <img src="/assets/images/icons/check-false.svg" *ngIf="jobRun?.status === 'failed'">
                    </span>
                  </div>

                  <div class="column is-2" *ngIf="userId && job?.hasPermission">
                    <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="/assets/images/icons/stop.svg">
                        </span>
                        <span>Stop</span>
                      </div>
                    </button>
                  </div>
                  <div class="column is-2" *ngIf="userId && job?.hasPermission">
                    <button class="button is-fullwidth restart-job" name="btn-restart" type="button" (click)="restartJob($event)" [disabled]="processing">
                      <div class="centered">
                        <span class="icon">
                          <img src="/assets/images/icons/restart.svg">
                        </span>
                        <span>Restart</span>
                      </div>
                    </button>
                  </div>

                  <hr/>

                  <div class="column is-4">
                    <h2 name="message" *ngIf="commitMessage">{{ commitMessage }}</h2>
                  </div>
                  <div class="column is-1">
                    <p>
                      <span class="icon">
                        <img src="/assets/images/icons/git-commit.svg">
                      </span>
                      <span name="sha" *ngIf="job?.build?.data?.pull_request?.head?.sha">{{ job?.build?.data?.pull_request?.head.sha.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="!job?.build?.data?.pull_request && job?.build?.data?.after">{{ job?.build?.data?.after.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="!job?.build?.data?.pull_request && !job?.build?.data?.after && job?.build?.data?.sha">{{ job?.build?.data?.sha.slice(0, 7) }}</span>
                      <span name="sha" *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>
                      <span name="sha" *ngIf="job?.build?.data?.push?.changes">{{ job?.build?.data?.push?.changes[0].commits[0].hash.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="job?.build?.data?.pullrequest">{{ job?.build?.data?.pullrequest?.source?.commit?.hash.slice(0, 7) }}</span>
                      <span name="sha" *ngIf="job?.build?.data?.commit">{{ job?.build?.data?.commit?.id?.slice(0, 7) }}</span>
                    </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">
                    <progress *ngIf="jobRun.status === 'running' && previousRuntime && previousRuntime > 0" class="progress-bar is-success is-small" [value]="(currentTime - jobRun.start_time) / previousRuntime" max="1" min="0"></progress>
                    <p class="text-small" *ngIf="jobRun.status !== 'running'">
                      Build started {{ timeWords }} ago
                    </p>
                  </div>
                  <div class="column is-1">
                    <p class="total-time">
                      <img src="/assets/images/icons/clock.svg">
                      <span *ngIf="jobRun.status === 'running'">{{ currentTime - jobRun.start_time | toTime }}</span>
                      <span *ngIf="jobRun.status !== 'running' && jobRun.end_time">{{ jobRun.end_time - jobRun.start_time | toTime }}</span>
                    </p>
                  </div>

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

            <div class="is-hidden-tablet mobile-build-top-container">
              <div class="mobile-build-top-container">
                <div class="columns is-mobile" [ngClass]="{ green: jobRun?.status === 'success', yellow: jobRun?.status === 'running', red: jobRun?.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="job?.build?.repository?.full_name"><a [routerLink]="['/repo', job?.build?.repository.id]">{{ job?.build?.repository?.full_name }}</a></span>
                    <span class="bold" *ngIf="!job?.build?.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="name" *ngIf="job?.build?.branch">{{ job?.build?.branch }}</span>
                    <span *ngIf="commitMessage" class="commit-message">{{ commitMessage }}</span>
                  </div>
                  <div class="column is-2">
                    <span class="build-time" *ngIf="jobRun.status === 'running'">{{ currentTime - jobRun.start_time | toTime }}</span>
                    <span class="build-time" *ngIf="jobRun.status !== 'running'">{{ jobRun.end_time - jobRun.start_time | toTime }}</span>

                    <div *ngIf="userId && job?.hasPermission">
                      <span class="icon circle restart-build" name="btn-restart" type="button" (click)="restartJob($event)" [class.disabled]="processing">
                        <i class="ionicon ion-refresh"></i>
                      </span>
                      <span class="icon circle stop-build" name="btn-stop" (click)="stopJob($event)" [class.is-hidden]="jobRun.status !== 'running'" [class.disabled]="processing">
                        <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>
          <div class="column is-12 is-hidden-mobile" *ngIf="jobRun?.status === 'running' && sshd && vnc && userId">
            <div class="ssh-container">
              <div>
                <img src="/assets/images/icons/ssh.svg" class="ssh-icon">
                <span class="span-ssh">SSH and VNC enabled.</span>
                <code class="ssh-code code-copy" [attr.data-clipboard-text]="'ssh ' + sshd.split(':')[0] + ' -p ' + sshd.split(':')[1] + ' -l abstruse'">
                  SSH: ssh {{ sshd.split(':')[0] }} -p {{ sshd.split(':')[1] }} -l abstruse
                  <img src="/assets/images/icons/copy.svg">
                </code>
                <code class="vnc-code code-copy" [attr.data-clipboard-text]="vnc">
                  VNC: {{ vnc.split(':')[0] }} VNC Port: {{ vnc.split(':')[1] }}
                  <img src="/assets/images/icons/copy.svg">
                </code>
                <code class="remote-passwd code-copy" [attr.data-clipboard-text]="'abstrusePass'">
                  password: abstrusePass
                  <img src="/assets/images/icons/copy.svg">
                </code>
              </div>
              <button [class.is-hidden]="debug" class="button is-small debug" name="btn-debug" type="button" (click)="debugMode($event)">
                <i class="ionicon ion-android-lock"></i>
                Start Debug
              </button>
            </div>
          </div>
          <div class="column is-12">
            <div class="terminal-container">
              <app-terminal [data]="terminalInput" (outputData)="terminalOutput($event)" [options]="terminalOptions"></app-terminal>
              <a class="view-raw-log" *ngIf="jobRun?.status !== 'running'" [href]="'/api/jobs/' + job?.id + '/log'" target="_blank">
                <i class="ionicon ion-document-text"></i>
                View Raw Log
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>