abstruse/src/app/components/app-images/app-images.component.html

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left is-hidden-mobile">
      <span class="nav-item">
        <h1>Docker Build Images</h1>
      </span>
    </div>
    <div class="nav-center is-hidden-mobile"></div>
    <div class="nav-right">
      <div class="group-buttons bright">
        <button class="group-button" name="tab-images" [ngClass]="{ 'is-active': tab === 'images' }" (click)="tab = 'images'">
          <i class="ionicon ion-ios-paper-outline"></i>
          Images
        </button>
        <button class="group-button" name="tab-build-image" [ngClass]="{ 'is-active': tab === 'build' }" (click)="tab = 'build'; resetForm(!!baseImages.length);">
          <i class="ionicon ion-hammer"></i>
          Build Image
        </button>
      </div>
    </div>
  </div>
</nav>

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

      <div *ngIf="!loading">

        <div *ngIf="tab === 'images'">
          <div class="content-box image-builder-box">

            <div class="content-box approve" *ngIf="removeingImage">
              <div class="columns is-multiline">
                <div class="column is-12">
                  <h1>Warning:</h1>
                </div>
                <div class="column is-12">
                    <div class="column is-12">
                        Are you sure you want to delete image {{form.name}}?
                    </div>
                    <div class="column is-12">
                      This step cannot be revert once delete is performed.
                    </div>
                </div>
                <div class="column is-6">
                  <button class="button is-fullwidth" name="btn-build" type="button" (click)="startDelete()">
                    <i class="ionicon ion-checkmark"></i>
                    <span>Delete</span>
                  </button>
                </div>
                <div class="column is-6">
                  <button class="button is-fullwidth" name="btn-cancel" type="button" (click)="removeingImage = false">
                    <i class="ionicon ion-close"></i>
                    <span>Cancel</span>
                  </button>
                </div>
              </div>
            </div>

            <div class="columns" *ngIf="!baseImages?.length">
              <div class="column is-12">
                <div class="message">
                  <div class="columns">
                    <div class="column is-1">
                      <i class="ion ion-information"></i>
                    </div>
                    <div class="column is-11">
                      <p><strong>No Base Images found.</strong></p>
                      <p>It is important to build images using <a (click)="tab = 'build'">this</a> form so files needed for Abstruse to work are included.</p>
                      <p>Images built using Abstruse form are later easily upgradeable as config files are stored with the application.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="content-box" *ngIf="baseImages?.length">
              <div class="content-box-header">
                <h1>Base Images</h1>
              </div>
              <div class="columns is-multiline">
                <div class="column is-3" *ngFor="let i of baseImages; let index = index;">
                  <div class="base-image-item">
                    <div class="remove-image" *ngIf="baseImages.length > 1">
                      <i class="ionicon ion-close pointer" (click)="removeImage(index, true)"></i>
                    </div>
                    <h2>{{ i.name }}</h2>
                    <span class="version">{{ i.version }}</span>
                    <img src="/assets/images/logos/docker.svg" class="docker-img">
                    <span class="time">{{ i.created }}</span>
                    <span class="size">Size {{ i.size }}</span>
                    <button type="button" class="button is-small" (click)="editImage(index, true)">Edit Image</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="content-box" *ngIf="customImages?.length">
              <div class="content-box-header">
                <h1>Custom Images</h1>
              </div>
              <div class="columns is-multiline">
                <div class="column is-4" *ngFor="let i of customImages; let index = index;">
                  <div class="image-item">
                    <div class="remove-image">
                        <i class="ionicon ion-close pointer" (click)="removeImage(index, false)"></i>
                    </div>
                    <h2>{{ i.name }}</h2>
                    <span class="version">{{ i.version }}</span>
                    <img src="/assets/images/logos/docker.svg" class="docker-img">
                    <span class="time">{{ i.created }}</span>
                    <span class="time">Created {{ i.createdAgo }} ago</span>
                    <span class="size">Size {{ i.size }}</span>
                    <button type="button" class="button is-fullwidth" (click)="editImage(index, false)">Edit Image</button>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div *ngIf="tab === 'build'">
          <div class="content-box image-builder-box" *ngIf="!building">
            <div class="columns is-multiline">
              <div class="column is-12">
                <div class="content-box approve" *ngIf="approve">
                  <div class="columns is-multiline">
                    <div class="column is-12">
                      <h1>Warning:</h1>
                    </div>
                    <div class="column is-12">
                        <div class="column is-12">
                            Your docker file contains commands that can cause Abstruse to work incorrectly ({{dangerousCommands}}).
                        </div>
                        <div class="column is-12">
                          Are you sure, you want to build that image?
                        </div>
                    </div>
                    <div class="column is-6">
                      <button class="button is-fullwidth" name="btn-build" type="button" (click)="startBuild()">
                        <i class="ionicon ion-checkmark"></i>
                        <span>Build</span>
                      </button>
                    </div>
                    <div class="column is-6">
                      <button class="button is-fullwidth" name="btn-cancel" type="button" (click)="approve = false">
                        <i class="ionicon ion-close"></i>
                        <span>Cancel</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="columns is-multiline error-item" *ngIf="buildingError">
                  <div class="column is-12">
                    Error (check your build configurations):
                  </div>
                  <div class="column is-12">
                    {{buildingError}}
                  </div>
                </div>
                <h2>Image name</h2>
                <input type="text" class="image-name-input" [(ngModel)]="form.name" placeholder="Image Name">
                <div class="columns is-multiline" *ngIf="baseImages?.length && !editingImage">
                  <div class="column is-6">
                    <h2>Image Type</h2>
                    <app-selectbox [data]="imageTypeOptions" (ngModelChange)="changeImageTypeSelect($event)" name="imageType" [(ngModel)]="form.base" [disabled]="baseImages?.length"></app-selectbox>
                  </div>
                  <div class="column is-6">
                    <div *ngIf="!form.base">
                      <h2>Base Image</h2>
                      <app-selectbox [data]="baseImageOptions" (ngModelChange)="changeBaseImageSelect($event)" name="baseImage" [(ngModel)]="baseImage"></app-selectbox>
                    </div>
                  </div>
                </div>
                <h2>Dockerfile</h2>
                <app-editor [options]="editorOptions" [(ngModel)]="form.dockerfile" class="editor-large"></app-editor>
                <div *ngIf="!form.base">
                  <h2>init.sh</h2>
                  <app-editor [options]="initEditorOptions" [(ngModel)]="form.initsh" class="editor-small"></app-editor>
                </div>
                <div class="images-buttons-container">
                  <button type="button" class="button w300 green" (click)="buildImage()" name="build-image-btn" [disabled]="approve">Build Image</button>
                </div>
              </div>
            </div>
          </div>

          <div class="content-box image-builder-box" *ngIf="building">
            <p class="has-text-centered">
              Building image <strong>{{ form.name }}</strong> <span *ngIf="imageBuildsText">({{ imageBuildsText }} layers)</span> ...
            </p>
            <app-terminal [data]="terminalInput" [options]="terminalOptions"></app-terminal>
          </div>
        </div>

      </div>

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