Work in progress: UI fixes for the new trigger type

static/directives/credentials.html

@@ -1,18 +1,6 @@
 <div ng-switch on="trigger.service">
   <!-- Message -->
-  <div ng-switch-when="custom-git" class="alert alert-info">
+  <div ng-include="triggerTemplate" ng-if="triggerTemplate"></div>
-    <p>
-      In order to use this trigger, the following first requires action:
-      <ul>
-        <li>You must give the following public key read access to the git repository.</li>
-        <li>You must set your repository to POST to the following URL to trigger a build.</li>
-      </ul>
-      For more information, refer to the <a href="http://docs.quay.io/guides/custom-trigger.html" target="_blank">Custom Git Triggers documentation</a>.
-    </p>
-  </div>
-  <div ng-switch-when="github" class="alert alert-info">
-    <p>The following key has been automatically added to your GitHub repository.</p>
-  </div>
 
   <!-- Credentials -->
   <div ng-repeat="credential in trigger.config.credentials">

static/directives/source-commit-link.html

@@ -1,4 +1,6 @@
 <span class="source-commit-link-elememt">
   <i class="fa fa-dot-circle-o" data-title="Commit" data-container="body" bs-tooltip></i>
-  <a ng-href="{{ getUrl(commitSha, urlTemplate) }}" target="_blank">{{ commitSha.substring(0, 8) }}</a>
+  <span class="anchor" href="getUrl(commitSha, urlTemplate)" target="_blank" is-only-text="!urlTemplate">
+    {{ commitSha.substring(0, 8) }}
+  </span>
 </span>

static/directives/source-ref-link.html

@@ -3,13 +3,13 @@
     <!-- Branch -->
     <span ng-switch-when="heads">
       <i class="fa fa-code-fork" data-container="body" data-title="Branch" bs-tooltip></i>
-      <a ng-href="{{ getUrl(ref, branchTemplate, 'branch') }}" target="_blank">{{ getTitle(ref) }}</a>
+      <span href="getUrl(ref, branchTemplate, 'branch')" is-only-text="!branchTemplate" target="_blank">{{ getTitle(ref) }}</span>
     </span>
 
     <!-- Tag -->
     <span ng-switch-when="tags">
       <i class="fa fa-tag" data-container="body" data-title="Tag" bs-tooltip></i>
-      <a ng-href="{{ getUrl(ref, tagTemplate, 'tag') }}" target="_blank">{{ getTitle(ref) }}</a>
+      <span href="getUrl(ref, tagTemplate, 'tag')" is-only-text="!tagTemplate" target="_blank">{{ getTitle(ref) }}</span>
     </span>
   </span>
 </span>

static/directives/trigger-description.html

@@ -1,39 +1,3 @@
 <span class="trigger-description-element" ng-switch on="trigger.service">
-  <!-- GitHub -->
+  <span ng-include="triggerTemplate" ng-if="triggerTemplate"></span>
-  <span ng-switch-when="github">
-    <i class="fa fa-github fa-lg" style="margin-right: 6px" data-title="GitHub" bs-tooltip="tooltip.title"></i>
-    Push to GitHub <span ng-if="KeyService.isEnterprise('github-trigger')">Enterprise</span> repository
-    <a href="{{ KeyService['githubTriggerEndpoint'] }}{{ trigger.config.build_source }}" target="_new">
-      {{ trigger.config.build_source }}
-    </a>
-    <div style="margin-top: 4px; margin-left: 26px; font-size: 12px; color: gray;" ng-if="!short">
-      <div>
-        <span class="trigger-description-subtitle">Branches/Tags:</span>
-        <span ng-if="trigger.config.branchtag_regex">Matching Regular Expression {{ trigger.config.branchtag_regex }}</span>
-        <span ng-if="!trigger.config.branchtag_regex">(All Branches and Tags)</span>
-      </div>
-
-      <div>
-        <span class="trigger-description-subtitle">Dockerfile:</span>
-        <span>{{ TriggerService.getDockerfileLocation(trigger) }}</span>
-      </div>
-    </div>
-  </span>
-
-  <!-- Git -->
-  <span ng-switch-when="custom-git">
-    <i class="fa fa-git fa-lg" style="margin-right: 6px;" data-title="git" bs-tooltip="tooltip.title"></i>
-    Push to {{ trigger.config.build_source }}
-    <div style="margin-top: 4px; margin-left: 26px; font-size: 12px; color: gray;" ng-if="!short">
-      <div>
-        <span class="trigger-description-subtitle">Dockerfile:</span>
-        <span>{{ TriggerService.getDockerfileLocation(trigger) }}</span<
-      </div>
-    </div>
-  </span>
-
-  <!-- Who knows? -->
-  <span ng-switch-default>
-    Unknown
-  </span>
 </span>

static/directives/trigger/bitbucket/trigger-description.html

@@ -0,0 +1,19 @@
+<span>
+  <i class="fa fa-bitbucket fa-lg" style="margin-right: 6px" data-title="BitBucket" bs-tooltip="tooltip.title"></i>
+  Push to BitBucket repository
+  <a href="https://bitbucket.org/{{ trigger.config.build_source }}" target="_new">
+    {{ trigger.config.build_source }}
+  </a>
+  <div style="margin-top: 4px; margin-left: 26px; font-size: 12px; color: gray;" ng-if="!short">
+    <div>
+      <span class="trigger-description-subtitle">Branches/Tags:</span>
+      <span ng-if="trigger.config.branchtag_regex">Matching Regular Expression {{ trigger.config.branchtag_regex }}</span>
+      <span ng-if="!trigger.config.branchtag_regex">(All Branches and Tags)</span>
+    </div>
+
+    <div>
+      <span class="trigger-description-subtitle">Dockerfile:</span>
+      <span>{{ TriggerService.getDockerfileLocation(trigger) }}</span>
+    </div>
+  </div>
+</span>

static/directives/trigger/custom-git/credentials.html

@@ -0,0 +1,10 @@
+<div class="co-alert co-alert-info">
+  <p>
+    In order to use this trigger, the following first requires action:
+    <ul>
+      <li>You must give the following public key read access to the git repository.</li>
+      <li>You must set your repository to POST to the following URL to trigger a build.</li>
+    </ul>
+    For more information, refer to the <a href="http://docs.quay.io/guides/custom-trigger.html" target="_blank">Custom Git Triggers documentation</a>.
+  </p>
+</div>

static/directives/trigger/custom-git/trigger-description.html

@@ -0,0 +1,10 @@
+<span>
+  <i class="fa fa-git fa-lg" style="margin-right: 6px;" data-title="git" bs-tooltip="tooltip.title"></i>
+  Push to {{ trigger.config.build_source }}
+  <div style="margin-top: 4px; margin-left: 26px; font-size: 12px; color: gray;" ng-if="!short">
+    <div>
+      <span class="trigger-description-subtitle">Dockerfile:</span>
+      <span>{{ TriggerService.getDockerfileLocation(trigger) }}</span<
+    </div>
+  </div>
+</span>

static/directives/trigger/githost/credentials.html

@@ -0,0 +1,3 @@
+<div class="co-alert co-alert-info">
+  <p>The following key has been automatically added to your source control repository.</p>
+</div>

static/directives/trigger/github/trigger-description.html

@@ -0,0 +1,19 @@
+<span>
+  <i class="fa fa-github fa-lg" style="margin-right: 6px" data-title="GitHub" bs-tooltip="tooltip.title"></i>
+  Push to GitHub <span ng-if="KeyService.isEnterprise('github-trigger')">Enterprise</span> repository
+  <a href="{{ KeyService['githubTriggerEndpoint'] }}{{ trigger.config.build_source }}" target="_new">
+    {{ trigger.config.build_source }}
+  </a>
+  <div style="margin-top: 4px; margin-left: 26px; font-size: 12px; color: gray;" ng-if="!short">
+    <div>
+      <span class="trigger-description-subtitle">Branches/Tags:</span>
+      <span ng-if="trigger.config.branchtag_regex">Matching Regular Expression {{ trigger.config.branchtag_regex }}</span>
+      <span ng-if="!trigger.config.branchtag_regex">(All Branches and Tags)</span>
+    </div>
+
+    <div>
+      <span class="trigger-description-subtitle">Dockerfile:</span>
+      <span>{{ TriggerService.getDockerfileLocation(trigger) }}</span>
+    </div>
+  </div>
+</span>

static/directives/triggered-build-description.html

@@ -1,100 +1,46 @@
 <div class="triggered-build-description-element">
-
+  <div ng-switch on="infoDisplay">
-  <span class="tbd-content" class="manual" ng-if="!build.trigger && !build.job_config.manual_user">
+    <!-- Manually built with no user -->
+    <div class="tbd-content" class="manual" ng-switch-when="manual">
       (Manually Triggered Build)
-  </span>
+    </div>
 
-  <span class="tbd-content" ng-if="!build.trigger && build.job_config.manual_user">
+    <!-- Manually built with a user -->
+    <div class="tbd-content" ng-switch-when="manual+user">
       <i class="fa fa-user"></i> {{ build.job_config.manual_user }}
-  </span>
-
-  <!-- Full Commit Information -->
-  <span class="tbd-content" ng-if="build.job_config.trigger_metadata.commit_info" ng-switch on="build.trigger.service">
-    <!-- GitHub -->
-    <div ng-switch-when="github">
-      <div class="commit-message">
-        <a ng-href="{{ getGitHubRepoURL(build) }}/commit/{{ build.job_config.trigger_metadata.commit_sha }}"
-           target="_blank">
-          {{ build.job_config.trigger_metadata.commit_info.message }}
-        </a>
-      </div>
-      <div class="commit-information">
-        <span class="commit-who-when">
-          Authored
-          <span am-time-ago="build.job_config.trigger_metadata.commit_info.date"></span>
-          <span class="commit-who">
-            <img ng-src="{{ build.job_config.trigger_metadata.commit_info.author.avatar_url }}">
-            <a ng-href="{{ build.job_config.trigger_metadata.commit_info.author.url }}"
-               target="_blank">
-              {{ build.job_config.trigger_metadata.commit_info.author.username }}
-            </a>
-          </span>
-        </span>
-        <span class="source-commit-link"
-              commit-sha="build.job_config.trigger_metadata.commit_sha"
-              url-template="getGitHubRepoURL(build) + '/commit/{sha}'"></span>
-        <span class="source-ref-link"
-              ref="build.job_config.trigger_metadata.ref"
-              branch-template="getGitHubRepoURL(build) + '/tree/{branch}'"
-              tag-template="getGitHubRepoURL(build) + '/releases/tag/{tag}'"></span>
-      </div>
     </div>
 
-    <!-- Git -->
+    <!-- Source information only (i.e. no info) -->
-    <div ng-switch-when="custom-git">
+    <div class="tbd-content" ng-switch-when="source">
-      <div class="commit-message">
+      Triggered by commit to
-        {{ build.job_config.trigger_metadata.commit_info.message }}
+      <div class="trigger-description" short="true" trigger="build.trigger"></div>
     </div>
-      <div class="commit-information">
-        <span class="commit-who-when">
-          Authored
-          <span am-time-ago="build.job_config.trigger_metadata.commit_info.date"></span>
-          <span class="commit-who">
-            {{ build.job_config.trigger_metadata.commit_info.author.username }}
-          </span>
-        </span>
-        <span>
-          {{ build.job_config.trigger_metadata.commit_sha }}
-        </span>
-        <span>
-          {{ build.job_config.trigger_metadata.ref }}
-        </span>
-      </div>
-    </div>
- </span>
 
     <!-- Just commit SHA -->
-  <span class="tbd-content" ng-if="build.job_config.trigger_metadata && !build.job_config.trigger_metadata.commit_info" ng-switch on="build.trigger.service">
+    <div class="tbd-content" ng-switch-when="commitsha">
       Triggered by commit
-    <!-- GitHub -->
-    <div ng-switch-when="github">
       <span class="source-commit-link"
-            commit-sha="build.job_config.trigger_metadata.commit_sha"
+            commit-sha="build.job_config.trigger_metadata.commit_sha"></span>
-            url-template="getGitHubRepoURL(build) + '/commit/{sha}'"></span>
     </div>
 
-    <!-- Git -->
+    <!-- Full Commit Information -->
-    <div ng-switch-when="custom-git">
+    <div class="tbd-content" ng-switch-when="fullcommit">
-      <span>{{ build.job_config.trigger_metadata.commit_sha }}</span>
+      <div class="commit-message">
+        {{ build.job_config.trigger_metadata.commit_info.message }}
       </div>
+      <div class="commit-information">
+        <span class="commit-who-when">
+          Authored
+          <span am-time-ago="build.job_config.trigger_metadata.commit_info.date"></span>
+          <span class="commit-who">
+            {{ build.job_config.trigger_metadata.commit_info.author.username }}
           </span>
-
-  <!-- No information -->
-  <span class="tbd-content" ng-if="!build.job_config.trigger_metadata" ng-switch on="build.trigger.service">
-    Triggered by commit to
-    <!-- GitHub -->
-    <div ng-switch-when="github">
-      <i class="fa fa-github fa-lg" data-title="GitHub" data-container="body" bs-tooltip></i>
-      <a ng-href="{{ getGitHubRepoURL(build) }}" target="_new">
-        {{ build.trigger.config.build_source }}
-      </a>
-    </div>
-
-    <!-- Git -->
-    <div ng-switch-when="custom-git">
-      <i class="fa fa-git fa-lg" data-title="git" data-container="body" bs-tooltip></i>
-      {{ build.trigger.config.build_source }}
-    </div>
         </span>
-
+        <span class="source-commit-link"
+              commit-sha="build.job_config.trigger_metadata.commit_sha"></span>
+        <span class="source-ref-link"
+              ref="build.job_config.trigger_metadata.ref"></span>
+      </div>
+    </div>
+  </div>
 </div>

static/js/directives/ui/credentials.js

@@ -10,7 +10,9 @@ angular.module('quay').directive('credentials', function() {
     scope: {
       'trigger': '=trigger'
     },
-    controller: function($scope) {}
+    controller: function($scope, TriggerService) {
+      TriggerService.populateTemplate($scope, 'credentials');
+    }
   };
   return directiveDefinitionObject;
 });

static/js/directives/ui/trigger-description.js

@@ -13,8 +13,10 @@ angular.module('quay').directive('triggerDescription', function () {
       'short': '=short'
     },
     controller: function($scope, $element, KeyService, TriggerService) {
+      // TODO(jschorr): Clean up and remove the 'short' once we're on new layout.
       $scope.KeyService = KeyService;
       $scope.TriggerService = TriggerService;
+      TriggerService.populateTemplate($scope, 'trigger-description');
     }
   };
   return directiveDefinitionObject;

static/js/directives/ui/triggered-build-description.js

@@ -12,9 +12,33 @@ angular.module('quay').directive('triggeredBuildDescription', function () {
       'build': '=build'
     },
     controller: function($scope, $element, KeyService, TriggerService) {
-      $scope.getGitHubRepoURL = function(build) {
+      $scope.$watch('build', function(build) {
-        return KeyService['githubTriggerEndpoint'] + build.trigger.config.build_source + '/';
+        if (!build) { return; }
-      };
+
+        var jobConfig = build.job_config || {};
+        var triggerMetadata = jobConfig.trigger_metadata || {};
+
+        if (!build.trigger && !jobConfig.manual_user) {
+          $scope.infoDisplay = 'manual';
+          return;
+        }
+
+        if (!build.trigger && jobConfig.manual_user) {
+          $scope.infoDisplay = 'manual+user';
+          return;
+        }
+
+        if (triggerMetadata.commit_info) {
+          $scope.infoDisplay = 'fullcommit';
+          return;
+        }
+
+        if (triggerMetadata.commit_sha) {
+          $scope.infoDisplay = 'commitsha';
+        }
+
+        $scope.infoDisplay = 'source';
+      });
     }
   };
   return directiveDefinitionObject;

static/js/services/trigger-service.js

@@ -50,7 +50,11 @@ angular.module('quay').factory('TriggerService', ['UtilService', '$sanitize', 'K
 
         return 'GitHub Repository Push';
       },
-      'supports_full_directory_listing': true
+      'supports_full_directory_listing': true,
+      'templates': {
+        'credentials': '/static/directives/trigger/githost/credentials.html',
+        'trigger-description': '/static/directives/trigger/github/trigger-description.html'
+      }
     },
 
     'bitbucket': {
@@ -77,7 +81,11 @@ angular.module('quay').factory('TriggerService', ['UtilService', '$sanitize', 'K
       },
       'icon': 'fa-bitbucket',
       'title': function() { return 'Bitbucket Repository Push'; },
-      'supports_full_directory_listing': false
+      'supports_full_directory_listing': false,
+      'templates': {
+        'credentials': '/static/directives/trigger/githost/credentials.html',
+        'trigger-description': '/static/directives/trigger/bitbucket/trigger-description.html'
+      }
     },
 
     'custom-git': {
@@ -102,9 +110,20 @@ angular.module('quay').factory('TriggerService', ['UtilService', '$sanitize', 'K
       'is_external': false,
       'is_enabled': function() { return true; },
       'icon': 'fa-git',
-      'title': function() { return 'Custom Git Repository Push'; }
+      'title': function() { return 'Custom Git Repository Push'; },
+      'templates': {
+        'credentials': '/static/directives/trigger/custom-git/credentials.html',
+        'trigger-description': '/static/directives/trigger/custom-git/trigger-description.html'
       }
     }
+  };
+
+  triggerService.populateTemplate = function(scope, name) {
+    scope.$watch('trigger', function(trigger) {
+      if (!trigger) { return; }
+      scope.triggerTemplate = triggerService.getTemplate(trigger.service, name);
+    });
+  };
 
   triggerService.supportsFullListing = function(name) {
     var type = triggerTypes[name];
@@ -126,6 +145,14 @@ angular.module('quay').factory('TriggerService', ['UtilService', '$sanitize', 'K
     return types;
   };
 
+  triggerService.getTemplate = function(name, template) {
+    var type = triggerTypes[name];
+    if (!type) {
+      return '';
+    }
+    return type['templates'][template];
+  };
+
   triggerService.getRedirectUrl = function(name, namespace, repository) {
     var type = triggerTypes[name];
     if (!type) {