This repository has been archived on 2020-03-24. You can view files and clone it, but cannot push or open issues or pull requests.
quay/static/directives/config/config-setup-tool.html

611 lines
No EOL
23 KiB
HTML

<div class="config-setup-tool-element">
<div class="quay-spinner" ng-if="!config"></div>
<div ng-show="config && config['SERVER_HOSTNAME']">
<!-- Basic Configuration -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-gears"></i> Basic Configuration
</div>
<div class="co-panel-body">
<table class="config-table">
<tr>
<td>Enterprise Logo URL:</td>
<td>
<span class="config-string-field" binding="config.ENTERPRISE_LOGO_URL"
placeholder="http://example.com/logo.png"></span>
<div class="help-text">
Enter the full URL to your company's logo.
</div>
</td>
<td>
<img class="registry-logo-preview" ng-src="{{ config.ENTERPRISE_LOGO_URL }}">
</td>
</tr>
<tr>
<td class="non-input">Contact Information:</td>
<td colspan="2">
<span class="config-contacts-field" binding="config.CONTACT_INFO"></span>
<div class="help-text" style="margin-top: 10px;">
Information to show in the Contact Page. If none specified, CoreOS contact information
is displayed.
</div>
</td>
</tr>
<tr>
<td>User Creation:</td>
<td colspan="2">
<div class="co-checkbox">
<input id="ftuc" type="checkbox" ng-model="config.FEATURE_USER_CREATION">
<label for="ftuc">Enable Open User Creation</label>
</div>
<div class="help-text">
If enabled, user accounts can be created by anyone.
Users can always be created in the users panel under this superuser view.
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Server Configuration -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-cloud"></i> Server Configuration
</div>
<div class="co-panel-body">
<table class="config-table">
<tr>
<td>Server Hostname:</td>
<td>
<span class="config-string-field" binding="config.SERVER_HOSTNAME"
placeholder="Hostname (and optional port if non-standard)"></span>
<div class="help-text">
The HTTP host (and optionally the port number if a non-standard HTTP/HTTPS port) of the location
where the registry will be accessible on the network
</div>
</td>
</tr>
<tr>
<td>SSL:</td>
<td>
<div class="co-checkbox">
<input id="enable-ssl" type="checkbox" ng-model="config.PREFERRED_URL_SCHEME"
ng-true-value="https" ng-false-value="http">
<label for="enable-ssl">Enable SSL</label>
</div>
<div class="help-text" style="margin-bottom: 10px">
A valid SSL certificate and private key files are required to use this option.
</div>
<table class="config-table" ng-show="config.PREFERRED_URL_SCHEME == 'https'">
<tr>
<td class="non-input">Certificate:</td>
<td>
<span class="config-file-field" filename="ssl.cert"></span>
<div class="help-text">
The certificate must be in PEM format.
</div
</td>
</tr>
<tr>
<td class="non-input">Private key:</td>
<td>
<span class="config-file-field" filename="ssl.key"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<!-- Redis -->
<div class="co-panel">
<div class="co-panel-heading">
<img src="/static/img/redis-small.png"> redis
</div>
<div class="co-panel-body">
<div class="description">
<p>A <a href="http://redis.io" target="_blank">redis</a> key-value store is required for real-time events and build logs.</p>
</div>
<table class="config-table">
<tr>
<td>Redis Hostname:</td>
<td>
<span class="config-string-field" binding="mapped.redis.host"
placeholder="The redis server hostname"></span>
</td>
</tr>
<tr>
<td>Redis port:</td>
<td>
<span class="config-numeric-field" binding="mapped.redis.port" default-value="6379"></span>
<div class="help-text">
Access to this port and hostname must be allowed from all hosts running
the enterprise registry
</div>
</td>
</tr>
<tr>
<td>Redis password:</td>
<td>
<input class="form-control" type="password" ng-model="mapped.redis.password"
placeholder="Optional password for connecting to redis">
</td>
</tr>
</table>
</div>
</div> <!-- /Redis -->
<!-- Registry Storage -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-download"></i> Registry Storage
</div>
<div class="co-panel-body">
<div class="description">
<p>
Registry images can be stored either locally or in a remote storage system.
<strong>A remote storage system is required for high-avaliability systems.</strong>
</p>
<table class="config-table">
<tr>
<td class="non-input">Storage Engine:</td>
<td>
<select ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[0]">
<option value="LocalStorage">Locally mounted directory</option>
<option value="S3Storage">Amazon S3</option>
<option value="GoogleCloudStorage">Google Cloud Storage</option>
<option value="RadosGWStorage">Ceph Object Gateway (RADOS)</option>
</select>
</td>
</tr>
<!-- Fields -->
<tr ng-repeat="field in STORAGE_CONFIG_FIELDS[config.DISTRIBUTED_STORAGE_CONFIG.local[0]]">
<td>{{ field.title }}:</td>
<td>
<span class="config-string-field"
binding="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]"
placeholder="{{ field.placeholder }}"
ng-if="field.kind == 'text'"></span>
<div class="co-checkbox" ng-if="field.kind == 'bool'">
<input id="dsc-{{ field.name }}" type="checkbox"
ng-model="config.DISTRIBUTED_STORAGE_CONFIG.local[1][field.name]">
<label for="dsc-{{ field.name }}">{{ field.placeholder }}</label>
</div>
<div class="help-text" ng-if="field.help_url">
See <a href="{{ field.help_url }}" target="_blank">Documentation</a> for more information
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- E-mail -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-envelope"></i> E-mail
</div>
<div class="co-panel-body">
<div class="description">
<p>Valid e-mail server configuration is required for notification e-mails and the ability of
users to reset their passwords.</p>
</div>
<div class="co-checkbox">
<input id="ftmail" type="checkbox" ng-model="config.FEATURE_MAILING">
<label for="ftmail">Enable E-mails</label>
</div>
<table class="config-table" ng-show="config.FEATURE_MAILING">
<tr>
<td>SMTP Server:</td>
<td>
<span class="config-string-field" binding="config.MAIL_SERVER"
placeholder="SMTP server for sending e-mail"></span>
</td>
</tr>
<tr>
<td>SMTP Server Port:</td>
<td>
<span class="config-numeric-field" binding="config.MAIL_PORT"
default-value="587"></span>
</td>
</tr>
<tr>
<td>TLS:</td>
<td>
<div class="co-checkbox">
<input id="mut" type="checkbox" ng-model="config.MAIL_USE_TLS">
<label for="mut">Use TLS</label>
</div>
</td>
</tr>
<tr>
<td>Mail Sender:</td>
<td>
<span class="config-string-field" binding="config.DEFAULT_MAIL_SENDER"
placeholder="E-mail address"></span>
<div class="help-text">
E-mail address from which all e-mails are sent. If not specified,
<code>support@quay.io</code> will be used.
</div>
</td>
</tr>
<tr>
<td>Authentication:</td>
<td>
<div class="co-checkbox">
<input id="uma" type="checkbox" ng-model="config.MAIL_USE_AUTH">
<label for="uma">Requires Authentication</label>
</div>
<table class="config-table" ng-show="config.MAIL_USE_AUTH">
<tr>
<td>Username:</td>
<td>
<span class="config-string-field" binding="config.MAIL_USERNAME"
placeholder="Username for authentication"></span>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input class="form-control" type="password"
ng-model="config.MAIL_PASSWORD"
placeholder="Password for authentication"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div> <!-- /E-mail -->
<!-- Authentication -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-users"></i> Authentication
</div>
<div class="co-panel-body">
<div class="description">
<p>
Authentication for the registry can be handled by either the registry itself or LDAP.
External authentication providers (such as Github) can be used on top of this choice.
</p>
</div>
<table class="config-table">
<tr>
<td class="non-input">Authentication:</td>
<td>
<select ng-model="config.AUTHENTICATION_TYPE">
<option value="Database">Local Database</option>
<option value="LDAP">LDAP</option>
</select>
</td>
</tr>
</table>
<table class="config-table" ng-show="config.AUTHENTICATION_TYPE == 'LDAP'">
<tr>
<td>LDAP URI:</td>
<td><span class="config-string-field" binding="config.LDAP_URI"></span></td>
</tr>
<tr>
<td>Administrator DN:</td>
<td><span class="config-string-field" binding="config.LDAP_ADMIN_DN"></span></td>
</tr>
<tr>
<td>Base DN:</td>
<td><span class="config-list-field" item-title="DN" binding="config.LDAP_BASE_DN"></span></td>
</tr>
<tr>
<td>Administrator Password:</td>
<td><span class="config-string-field" binding="config.LDAP_ADMIN_PASSWD"></span></td>
</tr>
<tr>
<td>E-mail Attribute:</td>
<td><span class="config-string-field" binding="config.LDAP_EMAIL_ATTR"></span></td>
</tr>
<tr>
<td>UID Attribute:</td>
<td><span class="config-string-field" binding="config.LDAP_UID_ATTR"></span></td>
</tr>
<tr>
<td>User RDN:</td>
<td><span class="config-list-field" item-title="RDN" binding="config.LDAP_USER_RDN"></span></td>
</tr>
</table>
</div>
</div> <!-- /Authentication -->
<!-- Github Authentication -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-github"></i> Github (Enterprise) Authentication
</div>
<div class="co-panel-body">
<div class="description">
<p>
If enabled, users can use Github or Github Enterprise to authenticate to the registry.
</p>
<p>
<strong>Note:</strong> A registered Github (Enterprise) OAuth application is required.
View instructions on how to
<a href="https://coreos.com/docs/enterprise-registry/github-auth/" target="_blank">
Create an OAuth Application in GitHub
</a>
</p>
</div>
<div class="co-checkbox">
<input id="ftghl" type="checkbox" ng-model="config.FEATURE_GITHUB_LOGIN">
<label for="ftghl">Enable Github Authentication</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN">
<tr>
<td>Github:</td>
<td>
<select ng-model="mapped.GITHUB_LOGIN_KIND">
<option value="hosted">Github.com</option>
<option value="enterprise">Github Enterprise</option>
</select>
</td>
</tr>
<tr ng-show="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
<td>Github Endpoint:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.API_ENDPOINT"
placeholder="https://my.githubserver">
</span>
<div class="help-text">
The Github Enterprise endpoint.
</div>
</td>
</tr>
<tr>
<td>OAuth Client ID:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_ID">
</span>
</td>
</tr>
<tr>
<td>OAuth Client Secret:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_LOGIN_CONFIG.CLIENT_SECRET">
</span>
</td>
</tr>
</table>
</div>
</div> <!-- /Github Authentication -->
<!-- Google Authentication -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-google"></i> Google Authentication
</div>
<div class="co-panel-body">
<div class="description">
<p>
If enabled, users can use Google to authenticate to the registry.
</p>
<p>
<strong>Note:</strong> A registered Google OAuth application is required.
Visit the
<a href="https://console.developers.google.com" target="_blank">
Google Developer Console
</a>
to register an application.
</p>
</div>
<div class="co-checkbox">
<input id="ftgoa" type="checkbox" ng-model="config.FEATURE_GOOGLE_LOGIN">
<label for="ftgoa">Enable Google Authentication</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GOOGLE_LOGIN">
<tr>
<td>OAuth Client ID:</td>
<td>
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_ID">
</span>
</td>
</tr>
<tr>
<td>OAuth Client Secret:</td>
<td>
<span class="config-string-field" binding="config.GOOGLE_LOGIN_CONFIG.CLIENT_SECRET">
</span>
</td>
</tr>
</table>
</div>
</div> <!-- /Google Authentication -->
<!-- Build Support -->
<div class="co-panel">
<div class="co-panel-heading">
<i class="fa fa-tasks"></i> Dockerfile Build Support
</div>
<div class="co-panel-body">
<div class="description">
If enabled, users can submit Dockerfiles to be built and pushed by the Enterprise Registry.
</div>
<div class="co-checkbox">
<input id="ftbs" type="checkbox" ng-model="config.FEATURE_BUILD_SUPPORT">
<label for="ftbs">Enable Dockerfile Build</label>
</div>
<div ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 10px">
<strong>Note: Build workers are required for this feature.</strong>
See <a href="https://coreos.com/docs/enterprise-registry/build-support/" target="_blank">Adding Build Workers</a> for instructions on how to setup build workers.
</div>
</div>
</div> <!-- /Build Support -->
<!-- Github Trigger -->
<div class="co-panel" ng-show="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
<div class="co-panel-heading">
<i class="fa fa-github"></i> Github (Enterprise) Build Triggers
</div>
<div class="co-panel-body">
<div class="description">
<p>
If enabled, users can setup Github or Github Enterprise triggers to invoke Registry builds.
</p>
<p>
<strong>Note:</strong> A registered Github (Enterprise) OAuth application (<strong>separate from Github Authentication</strong>) is required.
View instructions on how to
<a href="https://coreos.com/docs/enterprise-registry/github-auth/" target="_blank">
Create an OAuth Application in GitHub
</a>
</p>
</div>
<div class="co-checkbox">
<input id="ftgb" type="checkbox" ng-model="config.FEATURE_GITHUB_BUILD">
<label for="ftgb">Enable Github Triggers</label>
</div>
<table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD">
<tr>
<td>Github:</td>
<td>
<select ng-model="mapped.GITHUB_TRIGGER_KIND">
<option value="hosted">Github.com</option>
<option value="enterprise">Github Enterprise</option>
</select>
</td>
</tr>
<tr ng-show="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
<td>Github Endpoint:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.API_ENDPOINT"
placeholder="https://my.githubserver">
</span>
<div class="help-text">
The Github Enterprise endpoint.
</div>
</td>
</tr>
<tr>
<td>OAuth Client ID:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_ID">
</span>
</td>
</tr>
<tr>
<td>OAuth Client Secret:</td>
<td>
<span class="config-string-field" binding="config.GITHUB_TRIGGER_CONFIG.CLIENT_SECRET">
</span>
</td>
</tr>
</table>
</div>
</div> <!-- /Github Trigger -->
<!-- Save Bar -->
<div class="cor-floating-bottom-bar">
<button class="btn" ng-class="mapped.$hasChanges ? 'btn-primary' : 'btn-success'"
ng-click="validateAndSave()">
<i class="fa fa-lg" ng-class="mapped.$hasChanges ? 'fa-dot-circle-o' : 'fa-check-circle'"></i>
<span ng-if="mapped.$hasChanges">Save Configuration Changes</span>
<span ng-if="!mapped.$hasChanges">Configuration Saved</span>
</button>
</div>
<!-- Modal message dialog -->
<div class="modal fade initial-setup-modal" id="validateAndSaveModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"
ng-show="mapped.$hasChanges && validationStatus(validating) == 'validating'">
Validating Configuration... Please Wait
</h4>
<h4 class="modal-title"
ng-show="mapped.$hasChanges && validationStatus(validating) == 'failed'">
<i class="fa fa-warning"></i> Configuration Validation Failed
</h4>
<h4 class="modal-title"
ng-show="mapped.$hasChanges && validationStatus(validating) == 'success'">
<i class="fa fa-check-circle"></i> Configuration Validation Succeeded!
</h4>
<h4 class="modal-title" ng-show="!mapped.$hasChanges">
Configuration Changes Saved
</h4>
</div>
<div class="modal-body" ng-show="!mapped.$hasChanges">
<div class="verified">
<i class="fa fa-check-circle"></i> Configuration Changes Saved
</div>
<p>Your configuration changes have been saved and will be applied the next time the <span class="registry-title"></span> container is restarted.</p>
<p>
<strong>
It is highly recommended that you restart your container now and test these changes!
</strong>
</p>
</div>
<div class="modal-body" ng-show="mapped.$hasChanges">
<div class="service-verification">
<div class="service-verification-row" ng-repeat="serviceInfo in validating">
<span class="quay-spinner" ng-show="serviceInfo.status == 'validating'"></span>
<i class="fa fa-lg fa-check-circle" ng-show="serviceInfo.status == 'success'"></i>
<i class="fa fa-lg fa-warning" ng-show="serviceInfo.status == 'error'"></i>
<span class="service-title">{{ serviceInfo.service.title }}</span>
<div class="service-verification-error" ng-show="serviceInfo.status == 'error'">{{ serviceInfo.errorMessage }}</div>
</div>
</div>
</div>
<div class="modal-footer" ng-show="!mapped.$hasChanges">
<button class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
<div class="modal-footer" ng-show="mapped.$hasChanges">
<span ng-show="validating.length == 0">Please Wait...</span>
<button class="btn btn-primary"
ng-show="validationStatus(validating) == 'success'"
ng-click="saveConfiguration()"
ng-disabled="savingConfiguration">
<i class="fa fa-upload" style="margin-right: 10px;"></i>Save Configuration
</button>
<button class="btn btn-default"
ng-show="validationStatus(validating) == 'failed'"
data-dismiss="modal">
Continue Editing Configuration
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>