Implement new step-by-step setup
This commit is contained in:
Joseph Schorr
parent
28d319ad26
commit
c8229b9c8a
20 changed files with 1393 additions and 599 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<div class="quay-spinner" ng-show="!configStatus"></div>
|
||||
<div class="page-content" quay-show="Features.SUPER_USERS && configStatus.ready">
|
||||
<div class="cor-loader" ng-show="!configStatus"></div>
|
||||
<div class="page-content" quay-show="Features.SUPER_USERS && configStatus == 'ready'">
|
||||
<div class="cor-title">
|
||||
<span class="cor-title-link"></span>
|
||||
<span class="cor-title-content">Enterprise Registry Management</span>
|
||||
|
|
@ -8,11 +8,8 @@
|
|||
|
||||
<div class="cor-tab-panel">
|
||||
<div class="cor-tabs">
|
||||
<span class="cor-tab" tab-active="true" tab-title="Registry Settings" tab-target="#setup"
|
||||
tab-init="loadConfig()">
|
||||
<i class="fa fa-cog"></i>
|
||||
</span>
|
||||
<span class="cor-tab" tab-title="Manage Users" tab-target="#users" tab-init="loadUsers()">
|
||||
<span class="cor-tab" tab-active="true" tab-title="Manage Users"
|
||||
tab-target="#users" tab-init="loadUsers()">
|
||||
<i class="fa fa-group"></i>
|
||||
</span>
|
||||
<span class="cor-tab" tab-title="Container Usage" tab-target="#usage-counter" tab-init="getUsage()">
|
||||
|
|
@ -24,17 +21,21 @@
|
|||
<span class="cor-tab" tab-title="Internal Logs and Debugging" tab-target="#debug" tab-init="loadDebugServices()">
|
||||
<i class="fa fa-bug"></i>
|
||||
</span>
|
||||
<span class="cor-tab" tab-title="Registry Settings" tab-target="#setup"
|
||||
tab-init="loadConfig()">
|
||||
<i class="fa fa-cog"></i>
|
||||
</span>
|
||||
</div> <!-- /cor-tabs -->
|
||||
|
||||
<div class="cor-tab-content">
|
||||
<!-- Setup tab -->
|
||||
<div id="setup" class="tab-pane active">
|
||||
<div class="config-setup-tool" is-active="configStatus.ready"></div>
|
||||
<div id="setup" class="tab-pane">
|
||||
<div class="config-setup-tool" is-active="configStatus == 'ready'"></div>
|
||||
</div>
|
||||
|
||||
<!-- Debugging tab -->
|
||||
<div id="debug" class="tab-pane">
|
||||
<div class="quay-spinner" ng-show="!debugServices"></div>
|
||||
<div class="cor-loader" ng-show="!debugServices"></div>
|
||||
|
||||
<div role="tabpanel" ng-show="debugServices">
|
||||
<!-- Nav tabs -->
|
||||
|
|
@ -65,7 +66,7 @@
|
|||
|
||||
<!-- Usage tab -->
|
||||
<div id="usage-counter" class="tab-pane">
|
||||
<div class="quay-spinner" ng-show="systemUsage == null"></div>
|
||||
<div class="cor-loader" ng-show="systemUsage == null"></div>
|
||||
<div class="usage-chart" total="systemUsage.allowed" limit="systemUsageLimit"
|
||||
current="systemUsage.usage" usage-title="Deployed Containers"></div>
|
||||
|
||||
|
|
@ -88,9 +89,9 @@
|
|||
For more information: <a href="https://coreos.com/products/enterprise-registry/plans/">See Here</a>.
|
||||
</div> <!-- /usage-counter tab-->
|
||||
|
||||
<!-- Users tab -->
|
||||
<div id="users" class="tab-pane">
|
||||
<div class="quay-spinner" ng-show="!users"></div>
|
||||
<!-- Users tab -->
|
||||
<div id="users" class="tab-pane active">
|
||||
<div class="cor-loader" ng-show="!users"></div>
|
||||
<div class="alert alert-error" ng-show="usersError">
|
||||
{{ usersError }}
|
||||
</div>
|
||||
|
|
@ -207,7 +208,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="modal-body" ng-show="creatingUser">
|
||||
<div class="quay-spinner"></div>
|
||||
<div class="cor-loader"></div>
|
||||
</div>
|
||||
<div class="modal-body" ng-show="!creatingUser && !createdUser">
|
||||
<div class="form-group">
|
||||
|
|
@ -263,176 +264,4 @@
|
|||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div> <!-- /page-content -->
|
||||
|
||||
<!-- Modal message dialog -->
|
||||
<div class="modal fade initial-setup-modal" id="createSuperuserModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"><span><span class="registry-name"></span> Setup</h4></span>
|
||||
</div>
|
||||
<div class="modal-body config-setup-tool-element" ng-show="configStep == 'creating-superuser'">
|
||||
Creating super user account.... Please Wait
|
||||
</div>
|
||||
<form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">
|
||||
<div class="modal-body config-setup-tool-element" ng-show="configStep == 'create-superuser'">
|
||||
<p>A super user account is required to manage the <span class="registry-name"></span>
|
||||
installation. Please enter details for the new account below.</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>
|
||||
<div class="modal-footer alert alert-warning" ng-show="createSuperuserIssue">
|
||||
{{ createSuperuserIssue }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary" ng-disabled="!superuserForm.$valid"
|
||||
ng-show="configStep == 'create-superuser'">
|
||||
Create Super User
|
||||
</button>
|
||||
|
||||
<span class="modal-body config-setup-tool-element" ng-show="configStep == 'creating-superuser'">
|
||||
<span class="quay-spinner"></span>
|
||||
Creating account...
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
<!-- Modal message dialog -->
|
||||
<div class="modal fade initial-setup-modal" id="initializeConfigModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title"><span><span class="registry-name"></span> Setup</h4></span>
|
||||
</div>
|
||||
<div class="modal-body config-setup-tool-element valid-database" ng-show="configStep == 'valid-database'">
|
||||
<div class="verified">
|
||||
<i class="fa fa-check-circle"></i> Your database has been verified as working.
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<strong>Please restart the <span class="registry-name"></span> container</strong>, which will automatically generate the database's schema.
|
||||
</p>
|
||||
|
||||
<p>This operation may take a few minutes.</p>
|
||||
</div>
|
||||
<div class="modal-body config-setup-tool-element" ng-show="configStep == 'updating-config'">
|
||||
Updating Configuration.... Please Wait
|
||||
</div>
|
||||
<div class="modal-body config-setup-tool-element" ng-show="configStep == 'validating-database'">
|
||||
Validating Database.... Please Wait
|
||||
</div>
|
||||
<div class="modal-body config-setup-tool-element"
|
||||
ng-show="configStep == 'enter-database' || configStep == 'invalid-database'">
|
||||
<div class="alert alert-warning" ng-show="configStatus.has_file">
|
||||
Could not connect to or validate the database configuration found. Please reconfigure to continue.
|
||||
</div>
|
||||
|
||||
<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"></span>
|
||||
<div class="help-text">
|
||||
The server (and optionally, custom port) where the database lives
|
||||
</div>
|
||||
</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>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>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer alert alert-warning" ng-show="databaseInvalid">
|
||||
Database Validation Issue: {{ databaseInvalid }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="btn btn-primary" ng-disabled="!databaseUri"
|
||||
ng-click="validateDatabase()"
|
||||
ng-show="configStep == 'enter-database' || configStep == 'invalid-database'">
|
||||
Confirm Database
|
||||
</button>
|
||||
|
||||
<span class="modal-body config-setup-tool-element" ng-show="configStep == 'validating-database'">
|
||||
<span class="quay-spinner"></span>
|
||||
Validating Database...
|
||||
</span>
|
||||
|
||||
<span class="modal-body config-setup-tool-element" ng-show="configStep == 'updating-config'">
|
||||
<span class="quay-spinner"></span>
|
||||
Updating Configuration...
|
||||
</span>
|
||||
|
||||
<span class="modal-body config-setup-tool-element" ng-show="configStep == 'valid-database'">
|
||||
<span class="quay-spinner"></span>
|
||||
Waiting For Updated Container...
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue