Create webpack config for config app

further improve developer morale

get initial angular loading

Add remote css to config index

Starts work to port endpoints into config app

Add the api blueprint

config_app/js/setup/setup.component.js

@@ -0,0 +1,332 @@
+import * as URI from 'urijs';
+const templateUrl = require('./setup.html');
+
+(function() {
+    /**
+     * The Setup page provides a nice GUI walkthrough experience for setting up Quay Enterprise.
+     */
+
+    angular.module('quay-config').directive('setup', () => {
+      const directiveDefinitionObject = {
+        priority: 1,
+        templateUrl,
+        replace: true,
+        transclude: true,
+        restrict: 'C',
+        scope: {
+          'isActive': '=isActive',
+          'configurationSaved': '&configurationSaved'
+        },
+        controller: SetupCtrl,
+      };
+
+      return directiveDefinitionObject;
+    })
+
+    function SetupCtrl($scope, $timeout, ApiService, Features,  UserService, ContainerService, CoreDialog) {
+        // if (!Features.SUPER_USERS) {
+        //     return;
+        // }
+
+        $scope.HOSTNAME_REGEX = '^[a-zA-Z-0-9_\.\-]+(:[0-9]+)?$';
+
+        $scope.validateHostname = function(hostname) {
+            if (hostname.indexOf('127.0.0.1') == 0 || hostname.indexOf('localhost') == 0) {
+                return 'Please specify a non-localhost hostname. "localhost" will refer to the container, not your machine.'
+            }
+
+            return null;
+        };
+
+        // Note: The values of the enumeration are important for isStepFamily. For example,
+        // *all* states under the "configuring db" family must start with "config-db".
+        $scope.States = {
+            // Loading the state of the product.
+            'LOADING': 'loading',
+
+            // The configuration directory is missing.
+            'MISSING_CONFIG_DIR': 'missing-config-dir',
+
+            // The config.yaml exists but it is invalid.
+            'INVALID_CONFIG': 'config-invalid',
+
+            // DB is being configured.
+            'CONFIG_DB': 'config-db',
+
+            // DB information is being validated.
+            'VALIDATING_DB': 'config-db-validating',
+
+            // DB information is being saved to the config.
+            'SAVING_DB': 'config-db-saving',
+
+            // A validation error occurred with the database.
+            'DB_ERROR': 'config-db-error',
+
+            // Database is being setup.
+            'DB_SETUP': 'setup-db',
+
+            // Database setup has succeeded.
+            'DB_SETUP_SUCCESS': 'setup-db-success',
+
+            // 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',
+
+            // The superuser is being created.
+            'CREATING_SUPERUSER': 'create-superuser-creating',
+
+            // An error occurred when setting up the superuser.
+            'SUPERUSER_ERROR': 'create-superuser-error',
+
+            // The superuser was created successfully.
+            'SUPERUSER_CREATED': 'create-superuser-created',
+
+            // General configuration is being setup.
+            'CONFIG': 'config',
+
+            // 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'
+        }
+
+        $scope.csrf_token = window.__token;
+        $scope.currentStep = $scope.States.LOADING;
+        $scope.errors = {};
+        $scope.stepProgress = [];
+        $scope.hasSSL = false;
+        $scope.hostname = null;
+        $scope.currentConfig = null;
+
+        $scope.currentState = {
+            'hasDatabaseSSLCert': false
+        };
+
+        $scope.$watch('currentStep', function(currentStep) {
+            $scope.stepProgress = $scope.getProgress(currentStep);
+
+            switch (currentStep) {
+                case $scope.States.CONFIG:
+                    $('#setupModal').modal('hide');
+                    break;
+
+                case $scope.States.MISSING_CONFIG_DIR:
+                    $scope.showMissingConfigDialog();
+                    break;
+
+                case $scope.States.INVALID_CONFIG:
+                    $scope.showInvalidConfigDialog();
+                    break;
+
+                case $scope.States.DB_SETUP:
+                    $scope.performDatabaseSetup();
+                // 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:
+                    $('#setupModal').modal({
+                        keyboard: false,
+                        backdrop: 'static'
+                    });
+                    break;
+            }
+        });
+
+        $scope.restartContainer = function(state) {
+            $scope.currentStep = state;
+            ContainerService.restartContainer(function() {
+                $scope.checkStatus()
+            });
+        };
+
+        $scope.showSuperuserPanel = function() {
+            $('#setupModal').modal('hide');
+            var prefix = $scope.hasSSL ? 'https' : 'http';
+            var hostname = $scope.hostname;
+            if (!hostname) {
+                hostname = document.location.hostname;
+                if (document.location.port) {
+                    hostname = hostname + ':' + document.location.port;
+                }
+            }
+
+            window.location = prefix + '://' + hostname + '/superuser';
+        };
+
+        $scope.configurationSaved = function(config) {
+            $scope.hasSSL = config['PREFERRED_URL_SCHEME'] == 'https';
+            $scope.hostname = config['SERVER_HOSTNAME'];
+            $scope.currentConfig = config;
+
+            $scope.currentStep = $scope.States.VALID_CONFIG;
+        };
+
+        $scope.getProgress = function(step) {
+            var isStep = $scope.isStep;
+            var isStepFamily = $scope.isStepFamily;
+            var States = $scope.States;
+
+            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)
+            ];
+        };
+
+        $scope.isStepFamily = function(step, family) {
+            if (!step) { return false; }
+            return step.indexOf(family) == 0;
+        };
+
+        $scope.isStep = function(step) {
+            for (var i = 1; i < arguments.length; ++i) {
+                if (arguments[i] == step) {
+                    return true;
+                }
+            }
+            return false;
+        };
+
+        $scope.beginSetup = function() {
+            $scope.currentStep = $scope.States.CONFIG_DB;
+        };
+
+        $scope.showInvalidConfigDialog = function() {
+            var message = "The <code>config.yaml</code> file found in <code>conf/stack</code> could not be parsed."
+            var title = "Invalid configuration file";
+            CoreDialog.fatal(title, message);
+        };
+
+
+        $scope.showMissingConfigDialog = function() {
+            var message = "A volume should be mounted into the container at <code>/conf/stack</code>: " +
+                "<br><br><pre>docker run -v /path/to/config:/conf/stack</pre>" +
+                "<br>Once fixed, restart the container. For more information, " +
+                "<a href='https://coreos.com/docs/enterprise-registry/initial-setup/'>" +
+                "Read the Setup Guide</a>"
+
+            var title = "Missing configuration volume";
+            CoreDialog.fatal(title, message);
+        };
+
+        $scope.parseDbUri = function(value) {
+            if (!value) { return null; }
+
+            // Format: mysql+pymysql://<username>:<url escaped password>@<hostname>/<database_name>
+            var uri = URI(value);
+            return {
+                'kind': uri.protocol(),
+                'username': uri.username(),
+                'password': uri.password(),
+                'server': uri.host(),
+                'database': uri.path() ? uri.path().substr(1) : ''
+            };
+        };
+
+        $scope.serializeDbUri = function(fields) {
+            if (!fields['server']) { return ''; }
+            if (!fields['database']) { return ''; }
+
+            var uri = URI();
+            try {
+                uri = uri && uri.host(fields['server']);
+                uri = uri && uri.protocol(fields['kind']);
+                uri = uri && uri.username(fields['username']);
+                uri = uri && uri.password(fields['password']);
+                uri = uri && uri.path('/' + (fields['database'] || ''));
+                uri = uri && uri.toString();
+            } catch (ex) {
+                return '';
+            }
+
+            return uri;
+        };
+
+        $scope.createSuperUser = function() {
+            $scope.currentStep = $scope.States.CREATING_SUPERUSER;
+            ApiService.scCreateInitialSuperuser($scope.superUser, null).then(function(resp) {
+                UserService.load();
+                $scope.checkStatus();
+            }, function(resp) {
+                $scope.currentStep = $scope.States.SUPERUSER_ERROR;
+                $scope.errors.SuperuserCreationError = ApiService.getErrorMessage(resp, 'Could not create superuser');
+            });
+        };
+
+        $scope.performDatabaseSetup = function() {
+            $scope.currentStep = $scope.States.DB_SETUP;
+            ApiService.scSetupDatabase(null, null).then(function(resp) {
+                if (resp['error']) {
+                    $scope.currentStep = $scope.States.DB_SETUP_ERROR;
+                    $scope.errors.DatabaseSetupError = resp['error'];
+                } else {
+                    $scope.currentStep = $scope.States.DB_SETUP_SUCCESS;
+                }
+            }, ApiService.errorDisplay('Could not setup database. Please report this to support.'))
+        };
+
+        $scope.validateDatabase = function() {
+            $scope.currentStep = $scope.States.VALIDATING_DB;
+            $scope.databaseInvalid = null;
+
+            var data = {
+                'config': {
+                    'DB_URI': $scope.databaseUri
+                },
+                'hostname': window.location.host
+            };
+
+            if ($scope.currentState.hasDatabaseSSLCert) {
+                data['config']['DB_CONNECTION_ARGS'] = {
+                    'ssl': {
+                        'ca': 'conf/stack/database.pem'
+                    }
+                };
+            }
+
+            var params = {
+                'service': 'database'
+            };
+
+            ApiService.scValidateConfig(data, params).then(function(resp) {
+                var status = resp.status;
+
+                if (status) {
+                    $scope.currentStep = $scope.States.SAVING_DB;
+                    ApiService.scUpdateConfig(data, null).then(function(resp) {
+                        $scope.checkStatus();
+                    }, ApiService.errorDisplay('Cannot update config. Please report this to support'));
+                } else {
+                    $scope.currentStep = $scope.States.DB_ERROR;
+                    $scope.errors.DatabaseValidationError = resp.reason;
+                }
+            }, ApiService.errorDisplay('Cannot validate database. Please report this to support'));
+        };
+
+        $scope.checkStatus = function() {
+            ContainerService.checkStatus(function(resp) {
+                $scope.currentStep = resp['status'];
+            }, $scope.currentConfig);
+        };
+
+        // Load the initial status.
+        $scope.checkStatus();
+    };
+})();

config_app/js/setup/setup.html

@@ -0,0 +1,311 @@
+<div>
+<div>
+  <div class="cor-loader" ng-show="currentStep == States.LOADING"></div>
+  <div class="page-content" quay-show="Features.SUPER_USERS && currentStep == States.CONFIG">
+    <div class="cor-title">
+      <span class="cor-title-link"></span>
+      <span class="cor-title-content">Quay Enterprise Setup</span>
+    </div>
+
+    <div class="co-main-content-panel" style="padding: 20px;">
+      <div class="co-alert alert alert-info">
+        <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="refresh"></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="refresh"></span>
+          <span class="cor-step" title="Setup Complete" icon="check"></span>
+        </span>
+
+        <div><strong>Almost done!</strong></div>
+        <div>Configure your Redis database and other settings below</div>
+      </div>
+
+      <!--<config-setup-tool is-active="isStep(currentStep, States.CONFIG)"-->
+          <!--configuration-saved="configurationSaved(config)"></config-setup-tool>-->
+      <div class="config-setup-tool" is-active="true"
+           configuration-saved="configurationSaved(config)"></div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal message dialog -->
+<div class="co-dialog modal fade initial-setup-modal" id="setupModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <!-- Header -->
+      <div class="modal-header">
+        <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="refresh"></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="refresh"></span>
+          <span class="cor-step" title="Setup Complete" icon="check"></span>
+        </span>
+        <h4 class="modal-title"><span><span class="registry-name" is-short="true"></span> Setup</h4>
+      </div>
+
+      <form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">
+        <!-- Content: CREATE_SUPERUSER or SUPERUSER_ERROR or CREATING_SUPERUSER -->
+        <div class="modal-body config-setup-tool-element" style="padding: 20px"
+             ng-show="isStep(currentStep, States.CREATE_SUPERUSER, States.SUPERUSER_ERROR, States.CREATING_SUPERUSER)">
+            <p>A superuser is the main administrator of your <span class="registry-name" is-short="true"></span>. Only superusers can edit configuration settings.</p>
+
+            <div class="form-group">
+              <label>Username</label>
+              <input class="form-control" type="text" ng-model="superUser.username"
+                     ng-pattern="/^[a-z0-9_]{4,30}$/" required>
+              <div class="help-text">Minimum 4 characters in length</div>
+            </div>
+
+            <div class="form-group">
+              <label>Email address</label>
+              <input class="form-control" type="email" ng-model="superUser.email" required>
+            </div>
+
+            <div class="form-group">
+              <label>Password</label>
+              <input class="form-control" type="password" ng-model="superUser.password"
+                     ng-pattern="/^[^\s]+$/"
+                     ng-minlength="8" required>
+              <div class="help-text">Minimum 8 characters in length</div>
+            </div>
+
+            <div class="form-group">
+              <label>Repeat Password</label>
+              <input class="form-control" type="password" ng-model="superUser.repeatPassword"
+                     match="superUser.password" required>
+            </div>
+       </div>
+
+        <!-- Footer: CREATE_SUPERUSER or SUPERUSER_ERROR -->
+        <div class="modal-footer"
+             ng-show="isStep(currentStep, States.CREATE_SUPERUSER, States.SUPERUSER_ERROR)">
+          <button type="submit" class="btn btn-primary" ng-disabled="!superuserForm.$valid">
+            Create Super User
+          </button>
+        </div>
+      </form>
+
+      <!-- Content: DB_RESTARTING or CONFIG_RESTARTING -->
+      <div class="modal-body" style="padding: 20px;"
+           ng-show="isStep(currentStep, States.DB_RESTARTING, States.CONFIG_RESTARTING)">
+           <h4 style="margin-bottom: 20px;">
+            <i class="fa fa-lg fa-refresh" style="margin-right: 10px;"></i>
+             <span class="registry-name"></span> is currently being restarted
+           </h4>
+           This can take several minutes. If the container does not restart on its own,
+           please re-execute the <code>docker run</code> command.
+      </div>
+
+     <!-- Content: READY -->
+      <div class="modal-body" style="padding: 20px;"
+           ng-show="isStep(currentStep, States.READY)">
+           <h4>Installation and setup of <span class="registry-name"></span> is complete</h4>
+           You can now invite users to join, create organizations and start pushing and pulling
+           repositories.
+
+           <strong ng-if="hasSSL" style="margin-top: 20px;">
+            Note: SSL is enabled. Please make sure to visit with
+            an <u>https</u> prefix
+           </strong>
+      </div>
+
+     <!-- Content: VALID_CONFIG -->
+      <div class="modal-body" style="padding: 20px;"
+           ng-show="isStep(currentStep, States.VALID_CONFIG)">
+           <h4>All configuration has been validated and saved</h4>
+           The container must be restarted to apply the configuration changes.
+      </div>
+
+      <!-- Content: DB_SETUP_SUCCESS -->
+      <div class="modal-body" style="padding: 20px;"
+           ng-show="isStep(currentStep, States.DB_SETUP_SUCCESS)">
+           <h4>The database has been setup and is ready</h4>
+           The container must be restarted to apply the configuration changes.
+      </div>
+
+      <!-- Content: DB_SETUP or DB_SETUP_ERROR -->
+      <div class="modal-body" style="padding: 20px;"
+           ng-show="isStep(currentStep, States.DB_SETUP, States.DB_SETUP_ERROR)">
+           <h4>
+             <i class="fa fa-lg fa-database" style="margin-right: 10px;"></i>
+             <span class="registry-name"></span> is currently setting up its database
+             schema
+           </h4>
+           This can take several minutes.
+      </div>
+
+      <!-- Content: CONFIG_DB or DB_ERROR or VALIDATING_DB or SAVING_DB -->
+      <div class="modal-body validate-database config-setup-tool-element"
+           ng-show="isStep(currentStep, States.CONFIG_DB, States.DB_ERROR, States.VALIDATING_DB, States.SAVING_DB)">
+        <p>
+        Please enter the connection details for your <strong>empty</strong> database. The schema will be created in the following step.</p>
+        </p>
+
+        <div class="config-parsed-field" binding="databaseUri"
+                                   parser="parseDbUri(value)"
+                                   serializer="serializeDbUri(fields)">
+          <table class="config-table">
+            <tr>
+              <td class="non-input">Database Type:</td>
+              <td>
+                 <select ng-model="fields.kind">
+                    <option value="mysql+pymysql">MySQL</option>
+                    <option value="postgresql">Postgres</option>
+                 </select>
+              </td>
+            </tr>
+            <tr ng-show="fields.kind">
+              <td>Database Server:</td>
+              <td>
+                <span class="config-string-field" binding="fields.server"
+                      placeholder="dbserverhost"
+                      pattern="{{ HOSTNAME_REGEX }}"
+                      validator="validateHostname(value)">></span>
+                <div class="help-text">
+                  The server (and optionally, custom port) where the database lives
+                </div>
+              </td>
+            </tr>
+            <tr ng-show="fields.kind">
+              <td>Username:</td>
+              <td>
+                <span class="config-string-field" binding="fields.username"
+                      placeholder="someuser"></span>
+                <div class="help-text">This user must have <strong>full access</strong> to the database</div>
+              </td>
+            </tr>
+            <tr ng-show="fields.kind">
+              <td>Password:</td>
+              <td>
+                <input class="form-control" type="password" ng-model="fields.password"></span>
+              </td>
+            </tr>
+            <tr ng-show="fields.kind">
+              <td>Database Name:</td>
+              <td>
+                <span class="config-string-field" binding="fields.database"
+                      placeholder="registry-database"></span>
+              </td>
+            </tr>
+            <tr ng-show="fields.kind">
+              <td>SSL Certificate:</td>
+              <td>
+                <span class="config-file-field" filename="database.pem"
+                      skip-check-file="true" has-file="currentState.hasDatabaseSSLCert"></span>
+                <div class="help-text">Optional SSL certicate (in PEM format) to use to connect to the database</div>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+      <!-- Footer: CREATING_SUPERUSER -->
+      <div class="modal-footer working" ng-show="isStep(currentStep, States.CREATING_SUPERUSER)">
+        <span class="cor-loader-inline"></span> Creating superuser...
+      </div>
+
+      <!-- Footer: SUPERUSER_ERROR -->
+      <div class="modal-footer alert alert-warning"
+           ng-show="isStep(currentStep, States.SUPERUSER_ERROR)">
+        {{ errors.SuperuserCreationError }}
+      </div>
+
+      <!-- Footer: DB_SETUP_ERROR -->
+      <div class="modal-footer alert alert-warning"
+           ng-show="isStep(currentStep, States.DB_SETUP_ERROR)">
+        Database Setup Failed. Please report this to support: {{ errors.DatabaseSetupError }}
+      </div>
+
+      <!-- Footer: DB_ERROR -->
+      <div class="modal-footer alert alert-warning" ng-show="isStep(currentStep, States.DB_ERROR)">
+        Database Validation Issue: {{ errors.DatabaseValidationError }}
+      </div>
+
+      <!-- Footer: CONFIG_DB or DB_ERROR -->
+      <div class="modal-footer"
+           ng-show="isStep(currentStep, States.CONFIG_DB, States.DB_ERROR)">
+          <span class="left-align" ng-show="isStep(currentStep, States.DB_ERROR)">
+            <i class="fa fa-warning"></i>
+            Problem Detected
+          </span>
+
+          <button type="submit" class="btn btn-primary"
+                  ng-disabled="!databaseUri"
+                  ng-click="validateDatabase()">
+            Validate Database Settings
+          </button>
+      </div>
+
+      <!-- Footer: READY -->
+      <div class="modal-footer"
+           ng-show="isStep(currentStep, States.READY)">
+          <span class="left-align">
+            <i class="fa fa-check"></i>
+            Installation Complete!
+          </span>
+
+          <a ng-click="showSuperuserPanel()" class="btn btn-primary">
+            View Superuser Panel
+          </a>
+      </div>
+
+      <!-- Footer: VALID_CONFIG -->
+      <div class="modal-footer"
+           ng-show="isStep(currentStep, States.VALID_CONFIG)">
+          <span class="left-align">
+            <i class="fa fa-check"></i>
+            Configuration Validated and Saved
+          </span>
+
+          <button type="submit" class="btn btn-primary"
+                  ng-click="restartContainer(States.CONFIG_RESTARTING)">
+            Restart Container
+          </button>
+      </div>
+
+      <!-- Footer: DB_SETUP_SUCCESS -->
+      <div class="modal-footer"
+           ng-show="isStep(currentStep, States.DB_SETUP_SUCCESS)">
+          <span class="left-align">
+            <i class="fa fa-check"></i>
+            Database Setup and Ready
+          </span>
+
+          <button type="submit" class="btn btn-primary"
+                  ng-click="restartContainer(States.DB_RESTARTING)">
+            Restart Container
+          </button>
+      </div>
+
+      <!-- Footer: DB_SETUP -->
+      <div class="modal-footer working" ng-show="isStep(currentStep, States.DB_SETUP)">
+        <span class="cor-loader-inline"></span> Setting up database...
+      </div>
+
+      <!-- Footer: SAVING_DB -->
+      <div class="modal-footer working" ng-show="isStep(currentStep, States.SAVING_DB)">
+        <span class="cor-loader-inline"></span> Saving database configuration...
+      </div>
+
+      <!-- Footer: VALIDATING_DB -->
+      <div class="modal-footer working" ng-show="isStep(currentStep, States.VALIDATING_DB)">
+        <span class="cor-loader-inline"></span> Testing database settings...
+      </div>
+
+      <!-- Footer: DB_RESTARTING or CONFIG_RESTARTING-->
+      <div class="modal-footer working"
+           ng-show="isStep(currentStep, States.DB_RESTARTING, States.CONFIG_RESTARTING)">
+        <span class="cor-loader-inline"></span> Waiting for container to restart...
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+</div>