Add more visual separation between builds, add copy to clipboard for webhook URLs

assets/Gruntfile.js

@@ -392,6 +392,12 @@ module.exports = function (grunt) {
           cwd: 'bower_components/patternfly/components/font-awesome',
           src: 'fonts/*',
           dest: '<%= yeoman.dist %>/styles'
+        }, 
+        {
+          expand: true,
+          cwd: 'bower_components/zeroclipboard/dist',
+          src: 'ZeroClipboard.swf',
+          dest: '<%= yeoman.dist %>/scripts'
         }]
       },
       styles: {

assets/app/index.html

@@ -101,6 +101,7 @@
     <script src="bower_components/sifter/sifter.js"></script>
     <script src="bower_components/microplugin/src/microplugin.js"></script>
     <script src="bower_components/selectize/dist/js/selectize.js"></script>
+    <script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

assets/app/scripts/controllers/overview.js

@@ -265,7 +265,7 @@ angular.module('openshiftConsole')
           }
 
           var triggerTag = trigger.imageChangeParams.tag;
-          var buildTag = build.parameters.output.tag;
+          var buildTag = build.parameters.output.tag || "latest";
           if (triggerTag !== buildTag) {
           	continue;
           }

assets/app/scripts/directives/util.js

@@ -22,4 +22,38 @@ angular.module('openshiftConsole')
         });
       }
     };
+  })
+  .directive('clickToReveal', function() {
+    return {
+      restrict: 'A',
+      transclude: true,
+      scope: {
+        linkText: "@"
+      },      
+      templateUrl: 'views/directives/_click-to-reveal.html',
+      link: function($scope, element, attrs) {
+        $('.reveal-contents-link', element).click(function (evt) {
+          $(this).hide();
+          $('.reveal-contents', element).show();
+        });
+      }
+    };
+  })  
+  .directive('copyToClipboardButton', function() {
+    return {
+      restrict: 'E',
+      scope: {
+        clipboardText: "="
+      },
+      templateUrl: 'views/directives/_copy-to-clipboard.html',
+      link: function($scope, element, attrs) {
+        if (ZeroClipboard.isFlashUnusable()) {
+          $(element).hide();
+        }
+        else {
+          new ZeroClipboard( $('button', element) );
+          $("#global-zeroclipboard-html-bridge").tooltip({title: "Copy to clipboard", placement: 'bottom'});
+        }
+      }
+    }
   });

assets/app/styles/_core.less

@@ -295,3 +295,11 @@ select:invalid {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.well > {
+  h1, h2, h3, h4, h5 {
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}

assets/app/views/builds.html

@@ -8,58 +8,68 @@ <h1>Builds</h1>
           <em>{{emptyMessage}}</em>
         </div>
       </div>
-      <div ng-repeat="(buildConfigName, buildConfig) in buildConfigs">
-        <h2>{{buildConfigName}}</h2>
-        <div>Build strategy: {{buildConfig.parameters.strategy.type}}</div>
-        <div ng-switch="buildConfig.parameters.strategy.type">
-          <div ng-switch-when="STI">
-            Builder image: {{buildConfig.parameters.strategy.stiStrategy.image}}
-          </div>
-          <div ng-switch-when="Docker">
-            <div ng-if="buildConfig.parameters.strategy.dockerStrategy.image">
-              Builder image: {{buildConfig.parameters.strategy.dockerStrategy.image}}
+      <div class="tile" ng-repeat="(buildConfigName, buildConfig) in buildConfigs">
+        <div>
+          <h2>{{buildConfigName}}</h2>
+          <div>Build strategy: {{buildConfig.parameters.strategy.type}}</div>
+          <div ng-switch="buildConfig.parameters.strategy.type">
+            <div ng-switch-when="STI">
+              Builder image: {{buildConfig.parameters.strategy.stiStrategy.image}}
+            </div>
+            <div ng-switch-when="Docker">
+              <div ng-if="buildConfig.parameters.strategy.dockerStrategy.image">
+                Builder image: {{buildConfig.parameters.strategy.dockerStrategy.image}}
+              </div>
+            </div>
+            <div ng-switch-when="Custom">
+              Builder image: {{buildConfig.parameters.strategy.customStrategy.image}}
             </div>
           </div>
-          <div ng-switch-when="Custom">
-            Builder image: {{buildConfig.parameters.strategy.customStrategy.image}}
+          <div ng-if="buildConfig.parameters.source">
+            <div ng-if="buildConfig.parameters.source.type == 'Git'">Source repo: {{buildConfig.parameters.source.git.uri}}</div>
           </div>
-        </div>
-        <div ng-if="buildConfig.parameters.source">
-          <div ng-if="buildConfig.parameters.source.type == 'Git'">Source repo: {{buildConfig.parameters.source.git.uri}}</div>
-        </div>
-        <div ng-if="buildConfig.parameters.output">
-          <div ng-switch="buildConfig.parameters.output.to.kind">
-            <div ng-switch-when="ImageRepository">
-              Output image: {{buildConfig.parameters.output.to.name}}
+          <div ng-if="buildConfig.parameters.output">
+            <div ng-switch="buildConfig.parameters.output.to.kind">
+              <div ng-switch-when="ImageRepository">
+                Output image: {{buildConfig.parameters.output.to.name}}
+              </div>
+            </div>
+            <div ng-if="!buildConfig.parameters.output.to && buildConfig.parameters.output.dockerImageReference">
+              Output image: {{buildConfig.parameters.output.dockerImageReference}}
             </div>
           </div>
-          <div ng-if="!buildConfig.parameters.output.to && buildConfig.parameters.output.dockerImageReference">
-            Output image: {{buildConfig.parameters.output.dockerImageReference}}
-          </div>
-        </div>
-        <div>
-          Triggers: 
-          <ul>
-            <li ng-repeat="trigger in buildConfig.triggers">
-              <span ng-switch="trigger.type">
-                <span ng-switch-when="github">
-                  GitHub webhook URL: <input class="small" readonly="readonly" value="{{buildConfigName | webhookURL : trigger.type : trigger.github.secret : project.metadata.name}}" select-on-focus>
-                  <a href="{{'webhooks' | helpLink}}" target="_blank"><i class="pficon pficon-help"></i></a>
-                </span>
-                <span ng-switch-when="generic">
-                  Generic webhook URL: <input class="small" readonly="readonly" value="{{buildConfigName | webhookURL : trigger.type : trigger.generic.secret : project.metadata.name}}" select-on-focus>
-                  <a href="{{'webhooks' | helpLink}}" target="_blank"><i class="pficon pficon-help"></i></a>
-                </span>
-                <span ng-switch-when="imageChange">
-                  Image change on image repository {{trigger.imageChange.from.name}}:{{trigger.imageChange.tag}}
+          <div>
+            Triggers: 
+            <ul>
+              <li ng-repeat="trigger in buildConfig.triggers">
+                <span ng-switch="trigger.type">
+                  <span ng-switch-when="github">
+                    <span style="margin-right: 5px;">GitHub webhook URL</span>
+                    <a href="{{'webhooks' | helpLink}}" target="_blank"><i class="pficon pficon-help"></i></a>
+                    <div>
+                      <span click-to-reveal link-text='Show URL...' style="margin-right: 5px;">{{buildConfigName | webhookURL : trigger.type : trigger.github.secret : project.metadata.name}}</span>
+                      <copy-to-clipboard-button clipboard-text="buildConfigName | webhookURL : trigger.type : trigger.github.secret : project.metadata.name"></copy-to-clipboard-button>
+                    </div>
+                  </span>
+                  <span ng-switch-when="generic">
+                    <span style="margin-right: 5px;">Generic webhook URL</span>
+                    <a href="{{'webhooks' | helpLink}}" target="_blank"><i class="pficon pficon-help"></i></a>
+                    <div>
+                      <span click-to-reveal link-text='Show URL...' style="margin-right: 5px;">{{buildConfigName | webhookURL : trigger.type : trigger.generic.secret : project.metadata.name}}</span>
+                      <copy-to-clipboard-button clipboard-text="buildConfigName | webhookURL : trigger.type : trigger.github.secret : project.metadata.name"></copy-to-clipboard-button>                    
+                    </div>
+                  </span>
+                  <span ng-switch-when="imageChange">
+                    Image change on image repository {{trigger.imageChange.from.name}}:{{trigger.imageChange.tag}}
+                  </span>
+                  <span ng-switch-default>{{trigger.type}}</span>
                 </span>
-                <span ng-switch-default>{{trigger.type}}</span>
-              </span>
-            </li>
-            <li>Manual: <code>osc start-build {{buildConfigName}} -n {{project.metadata.name}}</code></li>
-          </ul>
+              </li>
+              <li>Manual: <code>osc start-build {{buildConfigName}} -n {{project.metadata.name}}</code></li>
+            </ul>
+          </div>
         </div>
-        <div style="margin-bottom: 10px;" ng-repeat="build in buildsByBuildConfig[buildConfigName] | orderObjectsByDate : true">
+        <div class="well" style="margin-bottom: 10px;" ng-repeat="build in buildsByBuildConfig[buildConfigName] | orderObjectsByDate : true">
           <h3>{{build.metadata.name}}</h3>
           <div>Created: <relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp></div>            
           <div>
@@ -74,15 +84,15 @@ <h3>{{build.metadata.name}}</h3>
             <div>Build strategy: {{build.parameters.strategy.type}}</div>
           </div>
           <div ng-switch="build.parameters.strategy.type">
-            <div ng-switch-when="STI" ng-if="buildConfig.parameters.strategy.stiStrategy.image != build.parameters.strategy.stiStrategy.image">
+            <div ng-switch-when="STI" ng-if="build.parameters.strategy.stiStrategy.image">
               Builder image: {{build.parameters.strategy.stiStrategy.image}}
             </div>
             <div ng-switch-when="Docker">
-              <div ng-if="build.parameters.strategy.dockerStrategy.image && buildConfig.parameters.strategy.dockerStrategy.image != build.parameters.strategy.dockerStrategy.image">
+              <div ng-if="build.parameters.strategy.dockerStrategy.image">
                 Builder image: {{build.parameters.strategy.dockerStrategy.image}}
               </div>
             </div>
-            <div ng-switch-when="Custom" ng-if="buildConfig.parameters.strategy.customStrategy.image != build.parameters.strategy.customStrategy.image">
+            <div ng-switch-when="Custom" ng-if="build.parameters.strategy.customStrategy.image">
               Builder image: {{build.parameters.strategy.customStrategy.image}}
             </div>
           </div>          
@@ -109,15 +119,15 @@ <h3>{{build.metadata.name}}</h3>
         </div>
       </div>
       <!-- render any builds whose build configs no longer exist -->
-      <div ng-repeat="(buildConfigName, blds) in buildsByBuildConfig" ng-if="!buildConfigs[buildConfigName]">
+      <div class="tile" ng-repeat="(buildConfigName, blds) in buildsByBuildConfig" ng-if="!buildConfigs[buildConfigName]">
         <h2 ng-if="buildConfigName != ''">
           {{buildConfigName}}
           <span class="pficon-layered" data-toggle="tooltip" data-placement="right" title="This build config no longer exists" style="cursor: help;">
             <span class="pficon pficon-warning-triangle"></span>
             <span class="pficon pficon-warning-exclamation"></span>
           </span>            
         </h2>
-        <div ng-repeat="build in blds | orderObjectsByDate : true">
+        <div class="well" ng-repeat="build in blds | orderObjectsByDate : true">
           <h3>{{build.metadata.name}}</h3>
           <div>Created: <relative-timestamp timestamp="build.metadata.creationTimestamp"></relative-timestamp></div>            
           <div>

assets/app/views/directives/_click-to-reveal.html

@@ -0,0 +1,2 @@
+<a class="reveal-contents-link" href="javascript:;">{{linkText || "Show..."}}</a>
+<span style="display: none;" class="reveal-contents" ng-transclude></span>

assets/app/views/directives/_copy-to-clipboard.html

@@ -0,0 +1 @@
+<button data-clipboard-text="{{clipboardText}}"><i class="fa fa-clipboard"/></button>

assets/bower.json

@@ -20,9 +20,10 @@
     "hawtio-extension-service": "2.0.0",
     "lodash": "2.4.1",
     "jquery": "2.1.3",
-    "sifter": "0.3.4",    
+    "sifter": "0.3.4",
     "microplugin": "0.0.3",
-    "selectize": "0.11.2"
+    "selectize": "0.11.2",
+    "zeroclipboard": "2.2.0"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8",

pkg/assets/mime.go

@@ -27,6 +27,9 @@ func RegisterMimeTypes() {
 	// http://www.iana.org/assignments/media-types/application/font-sfnt
 	registerIfNeeded(".ttf", "application/font-sfnt")
 	registerIfNeeded(".otf", "application/font-sfnt")
+
+	// Flash
+	registerIfNeeded(".swf", "application/x-shockwave-flash")
 }
 
 func registerIfNeeded(extension, mimeType string) {