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

Abstruse CI

<app-header></app-header>

<nav class="nav sub-nav">
  <div class="container">
    <div class="nav-left">
      <span class="nav-item">
        <h1>{{ repo?.full_name }}</h1>
        <span *ngIf="statusBadge" [innerHTML]="statusBadge | safeHtml" class="status-badge-repo"></span>
      </span>
    </div>
    <div class="nav-center"></div>
    <div class="nav-right">
      <div class="group-buttons bright" *ngIf="userId">
        <button class="group-button" name="btn-builds" [class.is-active]="tab === 'builds'" (click)="switchTab('builds')">
          <i class="ionicon ion-hammer"></i>
          Builds
        </button>
        <button class="group-button" name="btn-settings" [class.is-active]="tab === 'settings'" (click)="switchTab('settings')">
          <i class="ionicon ion-wrench"></i>
          Settings
        </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 class="columns is-multiline" *ngIf="!loading">
          <div class="column is-12">
            <div class="columns repository-details">
              <div class="column is-8">
                <span>
                  <i class="ion ion-network"></i>
                  <a [href]="repo?.html_url">{{ repo?.html_url }}</a>
                </span>
                <span>
                  <i class="ion ion-merge"></i>
                  {{ repo?.default_branch }}
                </span>
                <span *ngIf="repo?.private">
                  <i class="ion ion-ios-locked-outline"></i>
                  Private Repository
                </span>
                <span *ngIf="!repo?.private">
                  <i class="ion ion-ios-unlocked-outline"></i>
                  Public Repository
                </span>
              </div>
              <div class="column is-4"></div>
            </div>
          </div>

          <div class="column is-12" *ngIf="!repo?.builds?.length && tab === 'builds'">
            <div class="message is-info">
              No builds have been run yet.
            </div>
          </div>

          <div class="column is-12" *ngIf="repo?.builds?.length && tab === 'builds'">
            <div class="columns list-item" *ngFor="let build of repo.builds; let i = index;" [ngClass]="{ 'is-queued': build.status === 'queued', 'is-success': build.status === 'success', 'is-running': build.status === 'running', 'is-errored': build.status === 'failed' }" (click)="gotoBuild(build.id)">
              <app-build-item [build]="build"></app-build-item>
            </div>
            <div layout-align="center" *ngIf="repo?.builds?.length" align="center" class="more-button-container">
              <button type="button" class="button" name="btn-loadmore" (click)="fetchBuilds($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
                <img src="/assets/images/icons/more.svg">
                Load more builds
              </button>
            </div>
          </div>

          <div class="column is-12" *ngIf="tab === 'settings' && repo.hasPermission">
            <div class="columns">
              <div class="column is-12">
                <div class="settings-container">
                  <div class="columns is-multiline">
                    <div class="column is-12 is-marginless is-paddingless">
                      <h2>Repository Settings</h2>
                    </div>

                    <div class="column is-6">
                      <form class="form" #repoForm="ngForm" (ngSubmit)="saveRepoSettings($event)">
                        <h4>General Settings</h4>
                        <div class="columns">
                          <div class="column is-9">
                            <div class="form-field">
                              <label class="form-label">Repository Provider</label>
                              <app-selectbox [data]="repositoryProviders" [(ngModel)]="form.repository_provider" name="repository_provider" ngDefaultControl></app-selectbox>
                              <p class="helper">Set git provider where this repository is hosted.</p>
                            </div>
                            <div class="form-field">
                              <label class="form-label">API URL</label>
                              <input type="text" placeholder="https://api.github.com" name="api_url" [(ngModel)]="form.api_url" class="form-input">
                              <p class="helper">Set API URL for git repository provider. Example for GitHub (not GHE) is https://api.github.com</p>
                            </div>
                          </div>
                          <div class="column is-3">
                            <div class="form-field">
                              <label class="form-label">Is Public</label>
                              <app-toggle [(ngModel)]="form.public" name="public"></app-toggle>
                            </div>
                          </div>
                        </div>
                        <hr/>
                        <h4>Access Token</h4>
                        <div class="message">
                          <div class="columns">
                            <div class="column is-1">
                              <i class="ion ion-information"></i>
                            </div>
                            <div class="column is-11">
                              <p>It is important to set access token so abstruse can:</p>
                              <ul>
                                <li>access and clone repository</li>
                                <li>send build status to repository</li>
                              </ul>
                            </div>
                          </div>
                        </div>
                        <div class="form-field">
                          <app-selectbox [data]="accessTokensOptions" [(ngModel)]="form.access_tokens_id" name="access_tokens_id" ngDefaultControl></app-selectbox>
                          <p class="helper">
                            If you cannot find access token that is suitable for this repository then create new one <a routerLink="/settings">here</a>.
                          </p>
                        </div>
                        <input type="hidden" name="id" [(ngModel)]="form.id">
                        <div class="form-field">
                          <button type="submit" name="save-settings" class="button float-right" [class.is-loading]="saving" [disabled]="!repoForm.form.valid">Save Settings</button>
                        </div>
                      </form>

                    </div>

                    <div class="column is-6">
                      <form class="form" (ngSubmit)="addEnvironmentVariable()" #envVarForm="ngForm">
                        <h4>Environment Variables</h4>
                        <div class="env-variables-list" *ngIf="repo?.variables?.length">
                          <div class="columns list-item list-item-mini" *ngFor="let v of repo?.variables; let i = index;">
                            <div class="column is-9">
                              <span class="bold">{{ v.name }}: {{ v.value }}</span>
                            </div>
                            <div class="column is-2">
                              <span *ngIf="v.encrypted">(encrypted)</span>
                              <span *ngIf="!v.encrypted">(public)</span>
                            </div>
                            <div class="column is-1 justify-center">
                              <span class="icon" name="remove-variable" (click)="removeVariable(v.id)">
                                <img src="/assets/images/icons/remove.svg">
                              </span>
                            </div>
                          </div>
                        </div>

                        <div class="message">
                          <div class="columns">
                            <div class="column is-1">
                              <i class="ion ion-information"></i>
                            </div>
                            <div class="column is-11">
                              <p>Environment variables are the way to customize the build process. They can be accessed from any stage of the build.</p>
                              <p>If the variable contain, for example SSH token then you need to encrypt it with Abstruse CLI tool.</p>
                            </div>
                          </div>
                        </div>

                        <div class="form-field">
                          <label class="form-label">Name</label>
                          <input class="form-input" type="text" placeholder="VARIABLE_NAME" name="name" required [(ngModel)]="environmentVariableForm.name">
                          <p class="helper">
                            Name of the variable, please use uppercase letters. Example: DEPLOY_KEY
                          </p>
                        </div>
                        <div class="form-field">
                          <label class="form-label">Value</label>
                          <input class="form-input" type="text" placeholder="Value" name="value" required [(ngModel)]="environmentVariableForm.value">
                          <p class="helper">
                            Variable value. Make sure you encrypt it if includes sensitive data.
                          </p>
                        </div>
                        <div class="form-field">
                          <label class="form-label">Encrypted</label>
                          <app-selectbox [data]="yesNoOptions" name="encrypted" required [(ngModel)]="environmentVariableForm.encrypted" ngDefaultControl></app-selectbox>
                        </div>
                        <div class="form-field">
                          <button type="submit" class="button float-right" name="btn-add-variable" [class.is-loading]="addingEnvVar" [disabled]="!envVarForm.form.valid" required>Add Variable</button>
                        </div>
                      </form>
                    </div>

                    <div class="column is-12 is-marginless is-paddingless">
                      <h2>Repository Cache</h2>
                    </div>

                    <div class="column is-6">
                      <form class="form">
                        <h4>Cached Dependencies and Directories</h4>
                        <p>Using cache can speed up builds as it stores contents that does not often change.</p>

                        <div *ngIf="cache?.length && !fetchingCache">
                          <div class="columns cache-item" *ngFor="let c of cache">
                            <div class="column is-9">
                              <span>{{ c.filename }}</span>
                            </div>
                            <div class="column is-3 justify-center">
                              <span>{{ c.size }}</span>
                            </div>
                          </div>
                        </div>

                        <div class="message" *ngIf="!cache?.length">
                          <p>
                            <i class="ion ion-information"></i>
                            No cached files or folders found for this repository.
                          </p>
                        </div>

                        <div class="message green" *ngIf="cacheDeleted">
                          <p>
                            <i class="ion ion-checkmark-round"></i>
                            Cache has been deleted.
                          </p>
                        </div>

                        <button type="button" class="button is-fullwidth mtb20" *ngIf="cache?.length" [class.is-loading]="deletingCache" (click)="deleteCache()">Delete Cache</button>
                      </form>
                    </div>

                    <div class="column is-6"></div>

                    <div class="column is-12 is-marginless is-paddingless">
                      <h2>Repository Configuration</h2>
                    </div>

                    <div class="column is-6">
                      <form class="form">
                        <h4>Check Configuration</h4>
                        <p>Here you can make test if settings provided works in the wild.</p>
                        <p>Tests includes access to repository and checking presence of .abstruse.yml config file inside repository.</p>
                        <div class="message green" *ngIf="checkConfigResult && (checkConfigResult.read || checkConfigResult.config)">
                          <p *ngIf="checkConfigResult.read">
                            <i class="ion ion-checkmark-round"></i>
                            Has read permissions on repository
                          </p>
                          <p *ngIf="checkConfigResult.config">
                            <i class="ion ion-checkmark-round"></i>
                            Repository includes .abstruse.yml configuration
                          </p>
                          <p *ngIf="checkConfigResult.parsedcfg">
                            <i class="ion ion-checkmark-round"></i>
                            Abstruse can parse .abstruse.yml configuration
                          </p>
                        </div>
                        <div class="message red" *ngIf="checkConfigResult && (!checkConfigResult.read || !checkConfigResult.config)">
                          <p *ngIf="!checkConfigResult.read">
                            <i class="ion ion-close-round"></i>
                            Has read permissions on repository (clone)
                          </p>
                          <p *ngIf="!checkConfigResult.config">
                            <i class="ion ion-close-round"></i>
                            Repository includes .abstruse.yml configuration
                          </p>
                          <p *ngIf="!checkConfigResult.parsedcfg">
                            <i class="ion ion-close-round"></i>
                            Abstruse cannot parse .abstruse.yml configuration
                          </p>
                        </div>
                        <button type="button" name="check-repository-configuration" class="button is-fullwidth mtb20" [class.is-loading]="checkingConfig" (click)="checkRepositoryConfig()">Check Repository Configuration</button>

                        <hr/>

                        <h4>Test Build</h4>
                        <p>To see if everything works as expected you can trigger new build here. Build will be run from the last commit and default branch.</p>
                        <div class="message green" *ngIf="buildSuccessfullyTriggered && !triggeringBuild">
                          <p>
                            <i class="ion ion-checkmark-round"></i>
                            Build successfully triggered.
                          </p>
                        </div>
                        <div class="message red" *ngIf="buildTriggerError && !triggeringBuild">
                          <p>
                            <i class="ion ion-close-round"></i>
                            Error triggering build. Please check your configuration.
                          </p>
                        </div>
                        <button type="button" name="trigger-test-build" class="button is-fullwidth mtb20" [class.is-loading]="triggeringBuild" (click)="triggerTestBuild()">Trigger Test Build</button>

                      </form>
                    </div>

                    <div class="column is-6">
                      <form class="form">
                        <h4>Check Build Configuration File</h4>
                        <p>If you want to check how <code>.abstruse.yml</code> config file behaves on abstruse, here you can fetch it from repository and adopt changes then run build from it.</p>

                        <button type="button" name="fetch-config" class="button is-fullwidth mtb20" [class.is-loading]="fetchingConfig" (click)="fetchConfigFile()">Fetch Config</button>

                        <div *ngIf="configFile">
                          <div class="form-field">
                            <label class="form-label">.abstruse.yml config file</label>
                            <textarea class="form-input" rows="25" [(ngModel)]="configFile" [ngModelOptions]="{ standalone: true }"></textarea>
                          </div>
                          <button type="button" name="run-build-from-config" class="button is-fullwidth mtb20" [class.is-loading]="runningConfigBuild" (click)="runConfigBuild()">Run Build From Config</button>
                          <div class="message green" *ngIf="configBuildStatus">
                            <p>
                              <i class="ion ion-checkmark-round"></i>
                              Build has been run successfully.
                            </p>
                          </div>
                        </div>
                      </form>
                    </div>

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

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