Add progress bar to other parts of the config app

Hardcode active classes to modal step bars

config_app/config_endpoints/common.py

@@ -5,6 +5,9 @@ import re
 from flask import make_response, render_template
 from flask_restful import reqparse
 
+from config import frontend_visible_config
+
+from config_app.c_app import app
 from config_app._init_config import ROOT_DIR
 
 
@@ -45,6 +48,7 @@ def render_page_template(name, route_data=None, js_bundle_name=DEFAULT_JS_BUNDLE
     contents = render_template(name,
                                route_data=route_data,
                                main_scripts=main_scripts,
+                               config_set=frontend_visible_config(app.config),
                                **kwargs)
 
     resp = make_response(contents)

config_app/config_util/config/TransientDirectoryProvider.py

@@ -16,6 +16,10 @@ class TransientDirectoryProvider(FileConfigProvider):
         self.temp_dir = temp_dir
         super(TransientDirectoryProvider, self).__init__(temp_dir.name, yaml_filename, py_filename)
 
+    @property
+    def provider_id(self):
+        return 'transient'
+
     def new_config_dir(self):
         """
         Update the path with a new temporary directory, deleting the old one in the process

config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html

@@ -0,0 +1,3 @@
+<div class="co-floating-bottom-bar">
+    <span ng-transclude/>
+</div>

config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js

@@ -0,0 +1,44 @@
+const templateUrl = require('./cor-floating-bottom-bar.html');
+
+angular.module('quay-config')
+    .directive('corFloatingBottomBar', function() {
+        var directiveDefinitionObject = {
+            priority: 3,
+            templateUrl,
+            replace: true,
+            transclude: true,
+            restrict: 'C',
+            scope: {},
+            controller: function($rootScope, $scope, $element, $timeout, $interval) {
+                var handler = function() {
+                    $element.removeClass('floating');
+                    $element.css('width', $element[0].parentNode.clientWidth + 'px');
+
+                    var windowHeight = $(window).height();
+                    var rect = $element[0].getBoundingClientRect();
+                    if (rect.bottom > windowHeight) {
+                        $element.addClass('floating');
+                    }
+                };
+
+                $(window).on("scroll", handler);
+                $(window).on("resize", handler);
+
+                var previousHeight = $element[0].parentNode.clientHeight;
+                var stop = $interval(function() {
+                    var currentHeight = $element[0].parentNode.clientWidth;
+                    if (previousHeight != currentHeight) {
+                        currentHeight = previousHeight;
+                        handler();
+                    }
+                }, 100);
+
+                $scope.$on('$destroy', function() {
+                    $(window).off("resize", handler);
+                    $(window).off("scroll", handler);
+                    $interval.cancel(stop);
+                });
+            }
+        };
+        return directiveDefinitionObject;
+    });

config_app/js/components/cor-progress/cor-progress-components.js

@@ -13,7 +13,7 @@ angular.module('quay-config')
             transclude: true,
             restrict: 'C',
             scope: {
-                'progress': '=progress'
+                'progress': '=?progress'
             },
             controller: function($rootScope, $scope, $element) {
                 $scope.$watch('progress', function(progress) {

config_app/js/components/download-tarball-modal/download-tarball-modal.component.html

@@ -5,6 +5,14 @@
             <div class="modal-content">
                 <!-- Header -->
                 <div class="modal-header">
+                    <span class="cor-step-bar">
+                        <span class="cor-step active" title="Configure Database" text="1"></span>
+                        <span class="cor-step active" title="Setup Database" icon="database"></span>
+                        <span class="cor-step active" title="Create Superuser" text="2"></span>
+                        <span class="cor-step active" title="Configure Registry" text="3"></span>
+                        <span class="cor-step active" title="Validate Configuration" text="4"></span>
+                        <span class="cor-step active" title="Setup Complete" icon="download"></span>
+                    </span>
                     <h4 class="modal-title"><span>Download Configuration</span></h4>
                 </div>
                 <!-- Body -->

config_app/js/components/download-tarball-modal/download-tarball-modal.css

@@ -5,7 +5,3 @@
 .modal__warning-box {
     margin-top: 15px;
 }
-
-.modal__warning-box .co-alert.co-alert-warning::before {
-    font-family:Font Awesome\ 5 Free;
-}

config_app/js/components/load-config/load-config.component.html

@@ -5,6 +5,14 @@
             <div class="modal-content">
                 <!-- Header -->
                 <div class="modal-header">
+                    <span class="cor-step-bar">
+                        <span class="cor-step active" title="Configure Database" text="1"></span>
+                        <span class="cor-step" title="Setup Database" icon="database"></span>
+                        <span class="cor-step" title="Create Superuser" text="2"></span>
+                        <span class="cor-step" title="Configure Registry" text="3"></span>
+                        <span class="cor-step" title="Validate Configuration" text="4"></span>
+                        <span class="cor-step" title="Setup Complete" icon="download"></span>
+                    </span>
                     <h4 class="modal-title"><span>Load Config</span></h4>
                 </div>
                 <!-- Body -->

config_app/js/components/load-config/load-config.component.ts

@@ -1,22 +1,22 @@
-import {Component, EventEmitter, Inject, Output} from 'ng-metadata/core';
+import {
-const templateUrl = require('./load-config.html');
+    Component,
-const styleUrl = require('./load-config.css');
+    EventEmitter,
+    Inject,
+    Output,
+} from 'ng-metadata/core';
+const templateUrl = require('./load-config.component.html');
 
 declare var bootbox: any;
 
 @Component({
     selector: 'load-config',
     templateUrl,
-    styleUrls: [ styleUrl ],
 })
 export class LoadConfigComponent {
     private readyToSubmit: boolean = false;
     private uploadFunc: Function;
     @Output() public configLoaded: EventEmitter<any> = new EventEmitter();
 
-    private constructor(@Inject('ApiService') private apiService: any) {
-    }
-
     private handleTarballSelected(files: File[], callback: Function) {
         this.readyToSubmit = true;
         callback(true)

config_app/js/components/registry-name/registry-name.html

@@ -0,0 +1 @@
+<span class="registry-name-element">{{ name }}</span>

config_app/js/components/registry-name/registry-name.js

@@ -0,0 +1,22 @@
+const templateUrl = require('./registry-name.html');
+
+/**
+ * An element which displays the name of the registry (optionally the short name).
+ */
+angular.module('quay-config').directive('registryName', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl,
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'isShort': '=isShort'
+    },
+    controller: function($scope, $element, Config) {
+      $scope.name = $scope.isShort ? Config.REGISTRY_TITLE_SHORT : Config.REGISTRY_TITLE;
+    }
+  };
+  return directiveDefinitionObject;
+});
+

config_app/js/core-config-setup/config-setup-tool.html

@@ -932,7 +932,7 @@
               <span class="config-file-field" filename="ldap.crt" has-file="hasfile.LDAPTLSCert"></span>
               <div class="help-text">
                 If specified, the certificate (in PEM format) for the LDAP TLS connection.
-              </div
+              </div>
             </td>
           </tr>
           <tr ng-if="config.LDAP_URI.indexOf('ldaps://') == 0">
@@ -1578,6 +1578,7 @@
       </div>
     </div> <!-- /GitLab Trigger -->
 
+    </div>
     </form>
 
     <!-- Save Bar -->
@@ -1605,6 +1606,14 @@
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
+            <span class="cor-step-bar">
+              <span class="cor-step active" title="Configure Database" text="1"></span>
+              <span class="cor-step active" title="Setup Database" icon="database"></span>
+              <span class="cor-step active" title="Create Superuser" text="2"></span>
+              <span class="cor-step active" title="Configure Registry" text="3"></span>
+              <span class="cor-step active" title="Validate Configuration" text="4"></span>
+              <span class="cor-step" title="Setup Complete" icon="download"></span>
+            </span>
           <h4 class="modal-title">
               Checking your settings
           </h4>

config_app/js/setup/setup.component.js

@@ -69,9 +69,6 @@ const templateUrl = require('./setup.html');
             // An error occurred when setting up the database.
             'DB_SETUP_ERROR': 'setup-db-error',
 
-            // The container is being restarted for the database changes.
-            'DB_RESTARTING': 'setup-db-restarting',
-
             // A superuser is being configured.
             'CREATE_SUPERUSER': 'create-superuser',
 
@@ -90,9 +87,6 @@ const templateUrl = require('./setup.html');
             // The configuration is fully valid.
             'VALID_CONFIG': 'valid-config',
 
-            // The container is being restarted for the configuration changes.
-            'CONFIG_RESTARTING': 'config-restarting',
-
             // The product is ready for use.
             'READY': 'ready'
         }
@@ -130,7 +124,6 @@ const templateUrl = require('./setup.html');
                 // Fall-through.
 
                 case $scope.States.CREATE_SUPERUSER:
-                case $scope.States.DB_RESTARTING:
                 case $scope.States.CONFIG_DB:
                 case $scope.States.VALID_CONFIG:
                 case $scope.States.READY:
@@ -179,11 +172,9 @@ const templateUrl = require('./setup.html');
             return [
                 isStepFamily(step, States.CONFIG_DB),
                 isStepFamily(step, States.DB_SETUP),
-                isStep(step, States.DB_RESTARTING),
                 isStepFamily(step, States.CREATE_SUPERUSER),
                 isStep(step, States.CONFIG),
                 isStep(step, States.VALID_CONFIG),
-                isStep(step, States.CONFIG_RESTARTING),
                 isStep(step, States.READY)
             ];
         };

config_app/js/setup/setup.html

@@ -12,12 +12,10 @@
         <span class="cor-step-bar" progress="stepProgress">
           <span class="cor-step" title="Configure Database" text="1"></span>
           <span class="cor-step" title="Setup Database" icon="database"></span>
-          <span class="cor-step" title="Container Restart" icon="sync"></span>
           <span class="cor-step" title="Create Superuser" text="2"></span>
           <span class="cor-step" title="Configure Registry" text="3"></span>
           <span class="cor-step" title="Validate Configuration" text="4"></span>
-          <span class="cor-step" title="Container Restart" icon="sync"></span>
+          <span class="cor-step" title="Setup Complete" icon="download"></span>
-          <span class="cor-step" title="Setup Complete" icon="check"></span>
         </span>
 
         <div><strong>Almost done!</strong></div>
@@ -41,12 +39,10 @@
         <span class="cor-step-bar" progress="stepProgress">
           <span class="cor-step" title="Configure Database" text="1"></span>
           <span class="cor-step" title="Setup Database" icon="database"></span>
-          <span class="cor-step" title="Container Restart" icon="sync"></span>
           <span class="cor-step" title="Create Superuser" text="2"></span>
           <span class="cor-step" title="Configure Registry" text="3"></span>
           <span class="cor-step" title="Validate Configuration" text="4"></span>
-          <span class="cor-step" title="Container Restart" icon="sync"></span>
+          <span class="cor-step" title="Setup Complete" icon="download"></span>
-          <span class="cor-step" title="Setup Complete" icon="check"></span>
         </span>
         <h4 class="modal-title">Setup</h4>
       </div>

config_app/static/css/config-setup-app-component.css

@@ -22,3 +22,15 @@
     background-color: #dddddd;
     text-decoration: none;
 }
+
+/* Overrides for fixing old quay styles*/
+
+
+/* Fixes the transition to font awesome 5 */
+.quay-config-app .co-alert.co-alert-warning::before {
+    font-family: Font Awesome\ 5 Free;
+}
+
+.quay-config-app .co-alert.co-alert-info::before {
+    font-family: Font Awesome\ 5 Free;
+}

config_app/templates/index.html

@@ -3,6 +3,7 @@
 <head>
     <script type="text/javascript">
       window.__endpoints = {{ route_data|tojson|safe }}.paths;
+      window.__config = {{ config_set|tojson|safe }};
     </script>
 
 
@@ -28,7 +29,7 @@
     {% endfor %}
     <title>Config app</title>
 </head>
-<body class="co-img-bg-network">
+<body class="co-img-bg-network quay-config-app">
 <config-setup-app></config-setup-app>
 </body>
 </html>