quay/static/js/directives/ui/manage-trigger/manage-trigger.component.html

<div class="manage-trigger-githost-element manage-trigger-control">
  <linear-workflow done-title="Create Trigger"
                   (on-workflow-complete)="$ctrl.createTrigger($event)">
    <!-- Section: Namespace -->
    <linear-workflow-section class="row"
                             section-id="namespace"
                             section-title="::{{ 'Select ' + $ctrl.namespaceTitle }}"
                             section-valid="$ctrl.local.selectedNamespace"
                             skip-section="::$ctrl.githost == 'custom-git'">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.namespaces">
        <h3>Select {{ ::$ctrl.namespaceTitle }}</h3>
        <strong>Please select the {{ ::$ctrl.namespaceTitle }} under which the repository lives</strong>

        <cor-table table-data="$ctrl.local.namespaces"
                   table-item-title="namespaces"
                   max-display-count="$ctrl.namespacesPerPage"
                   filter-fields="::['title', 'id']">
          <cor-table-col datafield="title"
                         style="width: 20px;"
                         sortfield="title"
                         bind-model="$ctrl.local.selectedNamespace"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-radio-input.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-radio-input.html">
              <input type="radio"
                     ng-model="col.bindModel" ng-value="item"
                     ng-dblclick="col.bindModel = null">
            </script>
          </cor-table-col>
          <cor-table-col title="{{ ::$ctrl.namespaceTitle }}"
                         datafield="id"
                         sortfield="id"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-name.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-name.html">
              <img class="namespace-avatar" ng-src="{{ ::item.avatar_url }}" ng-if="::item.avatar_url">
              <span class="anchor"
                    href="{{ ::item.url }}"
                    is-text-only="::!item.url">{{ ::item.id }}</span>
            </script>
          </cor-table-col>
          <cor-table-col title="Importance"
                         datafield="score"
                         bind-model="$ctrl.local.maxScore"
                         style="display: flex; justify-content: flex-end"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/namespace-score.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/namespace-score.html">
              <div style="padding-right: 40px;">
                <span class="strength-indicator"
                      value="::item.score" maximum="::col.bindModel" log-base="10"></span>
              </div>
            </script>
          </cor-table-col>
        </cor-table>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
           ng-if="!$ctrl.local.namespaces">
        <span class="cor-loader-inline"></span> Retrieving {{ $ctrl.namespaceTitle }}s
      </div>
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col" ng-if="$ctrl.local.namespaces">
        <p>
          <span class="registry-name"></span> has been granted access to read and view these {{ $ctrl.namespaceTitle }}s.
        </p>
        <p>
          Don't see an expected {{ $ctrl.namespaceTitle }} here? Please make sure third-party access is enabled for <span class="registry-name"></span> under that {{ $ctrl.namespaceTitle }}.
        </p>
      </div>
    </linear-workflow-section><!-- /Section: Namespace -->

    <!-- Section: Githost Repository -->
    <linear-workflow-section class="row"
                             section-id="repo"
                             section-title="Select Repository"
                             section-valid="$ctrl.local.selectedRepository.full_name"
                             skip-section="::$ctrl.githost == 'custom-git'">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.repositories">
        <h3>Select Repository</h3>
        <strong>
          Select a repository in
          <img class="namespace-avatar"
               ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
               ng-if="$ctrl.local.selectedNamespace.avatar_url">
          {{ $ctrl.local.selectedNamespace.id }}
        </strong>

        <div style="display: flex; justify-content: flex-end;">
          <div class="filter-options">
            <label>
              <input type="checkbox"
                     ng-model="$ctrl.local.repositoryOptions.hideStale"
                     ng-change="$ctrl.buildOrderedRepositories()">
              Hide stale repositories
            </label>
          </div>
        </div>

        <cor-table table-data="$ctrl.local.orderedRepositories.entries"
                   table-item-title="repositories"
                   max-display-count="$ctrl.repositoriesPerPage"
                   filter-fields="['name', 'description']">
          <cor-table-col bind-model="$ctrl.local.selectedRepository"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-radio-input.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-radio-input.html">
              <span ng-if="!item.has_admin_permissions">
              <i class="fa fa-exclamation-triangle"
                 data-title="Admin access is required to add the webhook trigger to this repository" bs-tooltip></i>
            </span>
              <div ng-if="item.has_admin_permissions">
                <input type="radio"
                       ng-model="col.bindModel" ng-value="item"
                       ng-dblclick="col.bindModel = null">
              </div>
            </script>
          </cor-table-col>
          <cor-table-col title="Repository Name"
                         datafield="name"
                         sortfield="name"
                         bind-model="$ctrl.getTriggerIcon()"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-name.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-name.html">
              <i class="service-icon fa {{ ::col.bindModel }}"></i>
              <span class="anchor"
                    href="{{ item.url }}"
                    is-text-only="!item.url">{{ item.name }}</span>
            </script>
          </cor-table-col>
          <cor-table-col title="Updated"
                         datafield="last_updated_datetime"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-last-updated.html">
              <span am-time-ago="item.last_updated_datetime"></span>
            </script>
          </cor-table-col>
          <cor-table-col title="Description"
                         datafield="description"
                         sortfield="description"
                         templateurl="/static/js/directives/ui/manage-trigger-githost/repository-description.html">
            <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-githost/repository-description.html">
              <span ng-if="item.description">{{ item.description }}</span>
              <span class="empty-description" ng-if="!item.description">(None)</span>
            </script>
          </cor-table-col>
        </cor-table>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
           ng-if="!$ctrl.local.repositories">
        <span class="cor-loader-inline"></span> Retrieving repositories
      </div>
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
           ng-if="$ctrl.local.repositories">
        <p>
          A webhook will be added to the selected repository in order to detect when new commits are made.
        </p>
        <p>
          Don't see an expected repository here? Please make sure you have admin access on that repository.
        </p>
      </div>
    </linear-workflow-section><!-- /Section: Githost Repository -->

    <!-- Section: Custom Git Repository -->
    <linear-workflow-section class="row"
                             section-id="repo"
                             section-title="Git Repository"
                             section-valid="$ctrl.local.selectedRepository.full_name"
                             skip-section="::$ctrl.githost != 'custom-git'">

      <div class="col-lg-7 col-md-7 col-sm-12 main-col">
        <h3>Enter repository</h3>
        <strong>Please enter the HTTP or SSH style URL used to clone your git repository</strong>
        <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
               ng-model="$ctrl.buildSource"
               ng-change="$ctrl.checkBuildSource($ctrl.buildSource)"
               ng-pattern="/(((http|https):\/\/)(.+)|\w+@(.+):(.+))/">
      </div>
      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
        <p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>

        <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
      </div>
    </linear-workflow-section><!-- /Section: Repository -->

    <!-- Section: Trigger Options -->
    <linear-workflow-section class="row"
                             section-id="triggeroptions"
                             section-title="Configure Trigger"
                             section-valid="$ctrl.local.triggerOptions"
                             skip-section="$ctrl.githost == 'custom-git'">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col" ng-if="$ctrl.local.repositoryRefs">
        <h3>Configure Trigger</h3>
        <strong>
          Configure trigger options for
          <img class="namespace-avatar"
               ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
               ng-if="$ctrl.local.selectedNamespace.avatar_url">
          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
        </strong>

        <div class="radio" style="margin-top: 20px;">
          <label>
            <input type="radio" name="optionRadio"
                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
                   ng-value="false">
            <div class="title">Trigger for all branches and tags <span class="weak">(default)</span></div>
            <div class="description">Build a container image for each commit across all branches and tags</div>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio"
                   name="optionRadio"
                   ng-model="$ctrl.local.triggerOptions.hasBranchTagFilter"
                   ng-value="true">
            <div class="title">Trigger only on branches and tags matching a regular expression</div>
            <div class="description">Only build container images for a subset of branches and/or tags.</div>
            <div class="extended"
                 ng-if="$ctrl.local.triggerOptions.hasBranchTagFilter">
              <table>
                <tr>
                  <td style="white-space: nowrap;">Regular Expression:</td>
                  <td>
                    <input type="text" class="form-control"
                           ng-model="$ctrl.local.triggerOptions.branchTagFilter"
                           required>
                    <div class="description">Examples: heads/master, tags/tagname, heads/.+</div>
                    <regex-match-view items="$ctrl.local.repositoryFullRefs"
                                      regex="$ctrl.local.triggerOptions.branchTagFilter"
                                      ng-if="$ctrl.local.triggerOptions.branchTagFilter"></regex-match-view>
                  </td>
                </tr>
              </table>
            </div>
          </label>
        </div>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
           ng-if="!$ctrl.local.repositoryRefs">
        <span class="cor-loader-inline"></span> Retrieving repository refs
      </div>
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
        <p>Do you want to build a new container image for commits across all branches and tags, or limit to a subset?</p>
        <p>For example, if you use release branches instead of <code>master</code> for building versions of your software, you can configure the trigger to only build images for these branches.</p>
        <p>All images built will be tagged with the name of the branch or tag whose change invoked the trigger</p>
      </div>
    </linear-workflow-section><!-- /Section: Trigger Options -->

    <!-- Section: Dockerfile Location -->
    <linear-workflow-section class="row"
                             section-id="dockerfilelocation"
                             section-title="Select Dockerfile"
                             section-valid="$ctrl.local.hasValidDockerfilePath">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
        <div class="co-alert co-alert-warning">
          {{ $ctrl.local.dockerfileLocations.message }}
        </div>
      </div>

      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.githost == 'custom-git' || $ctrl.local.dockerfileLocations.status == 'success'">
        <h3>Select Dockerfile</h3>
        <strong>Please select the location of the Dockerfile to build when this trigger is invoked</strong>
        <dockerfile-path-select current-path="$ctrl.local.dockerfilePath"
                                paths="$ctrl.local.dockerfileLocations.dockerfile_paths"
                                supports-full-listing="true"
                                (path-changed)="$ctrl.checkDockerfilePath($event)"></dockerfile-path-select>
        <span ng-if="$ctrl.local.dockerfilePath.split('/').splice(-1)[0] == ''"
              style="color: #D64456;">
          Dockerfile path must end with a file, probably named <code>Dockerfile</code>
        </span>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
           ng-if="$ctrl.githost != 'custom-git' && !$ctrl.local.dockerfileLocations">
        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
      </div>
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
        <p>Please select the location containing the Dockerfile to be built.</p>
        <p>The Dockerfile path starts with the context and ends with the path to the Dockefile that you would like to build</p>
        <p>If the Dockerfile is located at the root of the git repository and named Dockerfile, enter <code>/Dockerfile</code> as the Dockerfile path.</p>
      </div>
    </linear-workflow-section><!-- /Section: Dockerfile Location -->

    <!-- Section: Context Location -->
    <linear-workflow-section class="row"
                             section-id="contextlocation"
                             section-title="Select Docker Context"
                             section-valid="$ctrl.local.hasValidContextLocation">
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.dockerfileLocations.status == 'error'">
        <div class="co-alert co-alert-warning">
          {{ $ctrl.local.dockerfileLocations.message }}
        </div>
      </div>

      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.githost == 'custom-git' || $ctrl.local.dockerfileLocations.status == 'success'">
        <h3>Select Context</h3>
        <strong>Please select the context for the Docker build</strong>

        <context-path-select current-context="$ctrl.local.dockerContext"
                             contexts="$ctrl.local.contexts"
                             (context-changed)="$ctrl.checkBuildContext($event)"></context-path-select>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-12 main-col"
           ng-if="$ctrl.githost != 'custom-git' && !$ctrl.local.dockerfileLocations">
        <span class="cor-loader-inline"></span> Retrieving Dockerfile locations
      </div>
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col">
        <p>Please select a Docker context.</p>
        <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
        <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
      </div>
    </linear-workflow-section><!-- /Section: Context Location -->

    <!-- Section: Robot Account -->
    <linear-workflow-section class="row"
                             section-id="robot"
                             section-title="Robot Account"
                             section-valid="$ctrl.local.triggerAnalysis.status != 'error' &&
                                            ($ctrl.local.triggerAnalysis.status != 'requiresrobot' || $ctrl.local.robotAccount)">
      <!-- Error -->
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.triggerAnalysis.status == 'error'">
        <h3 class="error"><i class="fa fa-exclamation-circle"></i> Verification Error</h3>
        <strong>
          There was an error when verifying the state of <img class="namespace-avatar"
                                                              ng-src="{{ $ctrl.local.selectedNamespace.avatar_url }}"
                                                              ng-if="$ctrl.local.selectedNamespace.avatar_url">
          {{ $ctrl.local.selectedNamespace.id }}/{{ $ctrl.local.selectedRepository.name }}
        </strong>

        {{ $ctrl.local.triggerAnalysis.message }}
      </div>

      <!-- Robot display for non-error cases -->
      <div class="col-lg-7 col-md-7 col-sm-12 main-col"
           ng-if="$ctrl.local.triggerAnalysis.status != 'error'">
        <!-- Warning -->
        <div ng-if="$ctrl.local.triggerAnalysis.status == 'warning'">
          <h3 class="warning"><i class="fa fa-exclamation-triangle"></i> Verification Warning</h3>
          {{ $ctrl.local.triggerAnalysis.message }}
        </div>

        <!-- Public base -->
        <div ng-if="$ctrl.local.triggerAnalysis.status == 'publicbase'">
          <h3>Optional Robot Account</h3>
          <strong>
            <span ng-if="$ctrl.local.triggerAnalysis.is_admin">Choose an optional robot account below or click "Continue" to complete setup of this build trigger.</span>
          </strong>
        </div>

        <!-- Requires robot and is not admin -->
        <div ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' && !$ctrl.local.triggerAnalysis.is_admin">
          <h3>Robot Account Required</h3>
          <p>The selected Dockerfile in the selected repository depends upon a private base image.</p>
          <p>A robot account with access to the base image is required to setup this trigger, but you are not the administrator of this namespace.</p>
          <p>Administrative access is required to continue to ensure security of the robot credentials.</p>
        </div>

        <!-- Requires robot and is admin -->
        <div ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' && $ctrl.local.triggerAnalysis.is_admin">
          <h3>Robot Account Required</h3>
          <p>The selected Dockerfile in the selected repository depends upon a private base image.</p>
          <p>A robot account with access to the base image is required to setup this trigger.</p>
        </div>

        <!-- Robots view -->
        <div ng-if="$ctrl.local.triggerAnalysis.is_admin">
          <cor-table table-data="$ctrl.local.triggerAnalysis.robots"
                     table-item-title="robot accounts"
                     filter-fields="['name']"
                     max-display-count="$ctrl.robotsPerPage">
            <cor-table-col datafield="name"
                           bind-model="$ctrl.local.robotAccount"
                           style="width: 20px;"
                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/robot-radio-input.html">
              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/robot-radio-input.html">
                <input type="radio"
                       ng-model="col.bindModel" ng-value="item"
                       ng-dblclick="col.bindModel = null">
              </script>
            </cor-table-col>
            <cor-table-col title="Robot Account"
                           sortfield="name"
                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/robot-name.html">
              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/robot-name.html">
                <span class="entity-reference" entity="item"></span>
              </script>
            </cor-table-col>
            <cor-table-col ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot' || true"
                           datafield="can_read"
                           templateurl="/static/js/directives/ui/manage-trigger-custom-git/can-read.html">
              <script type="text/ng-template" id="/static/js/directives/ui/manage-trigger-custom-git/can-read.html">
                <span ng-if="item.can_read" class="success">Can Read</span>
                <span ng-if="!item.can_read">Read access will be added if selected</span>
              </script>
            </cor-table-col>
          </cor-table>
        </div> <!-- /Robots view -->
      </div>

      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs help-col"
           ng-if="$ctrl.local.triggerAnalysis.is_admin">
        <p>
          In order for the <span class="registry-name"></span> to pull a <b>private base image</b> during the build
          process, a robot account with access must be selected.
        </p>
        <p ng-if="$ctrl.local.triggerAnalysis.status != 'requiresrobot'">
          If you know that a private base image is not used, you can skip this step.
        </p>
        <p ng-if="$ctrl.local.triggerAnalysis.status == 'requiresrobot'">
          Robot accounts that already have access to this base image are listed first. If you select a robot account
          that does not currently have access, read permission will be granted to that robot account on trigger creation.
        </p>
      </div>
    </linear-workflow-section><!-- /Section: Verification and Robot Account -->

    <!-- Verification -->
    <linear-workflow-section class="row"
                             section-id="verification"
                             section-title="Verification"
                             section-valid="true">
      <span>
        <h3 class="success"><i class="fa fa-check-circle"></i> Ready to go!</h3>
        Click "Continue" to complete setup of this build trigger.
      </span>
    </linear-workflow-section><!-- /Section: Verification -->
  </linear-workflow>
</div>