Merge pull request #2473 from coreos-inc/certs-fixes

Fixes and improvements around custom certificate handling

static/directives/config/config-certificates-field.html

@@ -12,6 +12,7 @@
           <p>
           Custom certificates are typically used in place of publicly signed certificates for corporate-internal services.
           </p>
+          <p>Please <strong>make sure</strong> that all custom names used for downstream services (such as Clair) are listed in the certificates below.</p>
         </div>
 
         <table class="config-table" style="margin-bottom: 20px;">
@@ -19,9 +20,10 @@
             <td>Upload certificates:</td>
             <td>
               <div class="file-upload-box"
-                     select-message="Select custom certificate to add to configuration. Must be in PEM format."
+                     select-message="Select custom certificate to add to configuration. Must be in PEM format and end extension '.crt'"
                      files-selected="handleCertsSelected(files, callback)"
-                     reset="resetUpload"></div>
+                     reset="resetUpload"
+                     extensions="['.crt']"></div>
             </td>
           </tr>
         </table>
@@ -33,7 +35,7 @@
             <td>Names Handled</td>
             <td class="options-col"></td>
           </thead>
-          <tr ng-repeat="certificate in certInfo.certs">
+          <tr ng-repeat="certificate in certInfo.certs" ng-if="!certsUploading">
             <td>{{ certificate.path }}</td>
             <td class="cert-status">
               <div ng-if="certificate.error" class="red">
@@ -62,7 +64,11 @@
             </td>
           </tr>
         </table>
-        <div class="empty" ng-if="!certInfo.certs.length" style="margin-top: 20px;">
+        <div ng-if="certsUploading" style="margin-top: 20px; text-align: center;">
+          <div class="cor-loader-inline"></div>
+          Uploading, validating and updating certificate(s)
+        </div>
+        <div class="empty" ng-if="!certInfo.certs.length && !certsUploading" style="margin-top: 20px;">
           <div class="empty-primary-msg">No custom certificates found.</div>
         </div>
       </div>

static/directives/config/config-setup-tool.html

@@ -14,7 +14,7 @@
     </div>
 
     <!-- Custom SSL certificates -->
-    <div class="co-panel">
+    <div class="co-panel" id="custom-ssl">
       <div class="co-panel-heading">
         <i class="fa fa-certificate"></i> Custom SSL Certificates
       </div>
@@ -342,6 +342,16 @@
         </div>
 
         <table class="config-table" ng-if="config.FEATURE_SECURITY_SCANNER">
+          <tr>
+            <td>Authentication Key:</td>
+            <td>
+              <span class="config-service-key-field" service-name="{{ config.SECURITY_SCANNER_ISSUER_NAME || 'secscan' }}"></span>
+              <div class="help-text">
+                The security scanning service requires an authorized service key to speak to Quay. Once setup, the key
+                can be managed in the Service Keys panel under the Super User Admin Panel.
+              </div>
+            </td>
+          </tr>
           <tr>
             <td>Security Scanner Endpoint:</td>
             <td>
@@ -351,15 +361,8 @@
               <div class="help-text">
                 The HTTP URL at which the security scanner is running.
               </div>
-            </td>
-          </tr>
-          <tr>
-            <td>Authentication Key:</td>
-            <td>
-              <span class="config-service-key-field" service-name="{{ config.SECURITY_SCANNER_ISSUER_NAME || 'secscan' }}"></span>
-              <div class="help-text">
-                The security scanning service requires an authorized service key to speak to Quay. Once setup, the key
-                can be managed in the Service Keys panel under the Super User Admin Panel.
+              <div class="co-alert co-alert-info" ng-if="config.SECURITY_SCANNER_ENDPOINT.indexOf('https:') == 0" style="margin-top: 20px;">
+                Is the security scanner behind a domain signed with a <strong>self-signed TLS certificate</strong>? If so, please make sure to register your SSL CA in the <a href="#custom-ssl">custom certificates panel</a> above.
               </div>
             </td>
           </tr>

static/directives/file-upload-box.html

@@ -2,7 +2,9 @@
   <div class="file-input-container">
     <div ng-show="state != 'uploading'">
       <form id="file-drop-form-{{ boxId }}">
-        <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop" type="file" files-changed="handleFilesChanged(files)">
+        <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop"
+               type="file" files-changed="handleFilesChanged(files)"
+               accept="{{ getAccepts(extensions) }}">
         <label for="file-drop-{{ boxId }}" ng-class="state">
           <span class="chosen-file">
             <span ng-if="selectedFiles.length">

static/js/core-config-setup.js

@@ -1322,10 +1322,12 @@ angular.module("core-config-setup", ['angularFileUpload'])
       },
       controller: function($scope, $element, $upload, ApiService, UserService) {
         $scope.resetUpload = 0;
+        $scope.certsUploading = false;
 
         var loadCertificates = function() {
           $scope.certificatesResource = ApiService.getCustomCertificatesAsResource().get(function(resp) {
             $scope.certInfo = resp;
+            $scope.certsUploading = false;
           });
         };
 
@@ -1336,6 +1338,7 @@ angular.module("core-config-setup", ['angularFileUpload'])
         });
 
         $scope.handleCertsSelected = function(files, callback) {
+          $scope.certsUploading = true;
           $upload.upload({
             url: '/api/v1/superuser/customcerts/' + files[0].name,
             method: 'POST',

static/js/directives/ui/file-upload-box.js

@@ -15,6 +15,8 @@ angular.module('quay').directive('fileUploadBox', function () {
       'filesCleared': '&filesCleared',
       'filesValidated': '&filesValidated',
 
+      'extensions': '<extensions',
+
       'reset': '=?reset'
     },
     controller: function($rootScope, $scope, $element, ApiService) {
@@ -150,6 +152,14 @@ angular.module('quay').directive('fileUploadBox', function () {
         }
       };
 
+      $scope.getAccepts = function(extensions) {
+        if (!extensions || !extensions.length) {
+          return '*';
+        }
+
+        return extensions.join(',');
+      };
+
       $scope.$watch('reset', function(reset) {
         if (reset) {
           $scope.state = 'clear';