form-step4.html

<h2 class="text-center">Configure database</h2>
<hr>
<div ng-if="formData.provider == 'aws'">
    <div ng-if="formData.db_provider == 'mysql'">
        <form name="awsForm" novalidate ng-submit="nextStep('/step7', awsForm)">
            <div class="help-block">
                <strong>NOTICE:</strong> Amazon Web Services currently doesn't provide other setup than master-slave or just one database instance.
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && awsForm.num_instances.$invalid}">
                <label>
                    How many database instances do you want?
                </label>
                <input required name="num_instances" type="number" max="6" class="form-control"
                       ng-model="formData.db.num_instances"/>
                <span class="help-block" ng-show="formData.db.num_instances > 1">
                    There will be one master instance and {% verbatim %}{{ formData.db.num_instances - 1 }}{% endverbatim %} replicas
                </span>
                <span class="help-block" ng-show="formData.db.num_instances == 1">
                    There will be just one database instance
                </span>
                <span class="help-block" ng-show="submitted && awsForm.num_instances.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && awsForm.master_identifier.$invalid}">
                <label>
                    Master identifier
                </label>
                <input value="cloudscale-master" required name="master_identifier" type="text" class="form-control"
                       ng-model="formData.db.master_identifier" placeholder="cloudscale-master"/>
                <span class="help-block" ng-show="submitted && awsForm.master_identifier.$invalid">Required</span>
            </div>
            <div class="form-group" ng-show="formData.db.num_instances > 0" ng-class="{'has-error' : submitted && awsForm.replica_identifier.$invalid}">
                <label>
                    Replica identifier
                </label>
                <input value="cloudscale-replica" required name="replica_identifier" type="text" class="form-control"
                       ng-model="formData.db.replica_identifier" placeholder="cloudscale-replica"/>
                <span class="help-block" ng-show="submitted && awsForm.replica_identifier.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && awsForm.instance_type.$invalid}">
                <label>
                    Instance type
                </label>
                <select required class="form-control" name="instance_type" ng-model="formData.db.instance_type"
                        ng-init="formData.db.instance_type=rds_instance_types[0]"
                        ng-options="value for value in rds_instance_types">
                </select>
                <span class="help-block" ng-show="submitted && awsForm.instance_type.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && awsForm.connection_pool_size.$invalid}">
                <label>
                    Connection pool size
                </label>
                <input required class="form-control" ng-model="formData.db.connection_pool_size" type="text"
                       name="connection_pool_size">
                <span class="help-block" ng-show="submitted && awsForm.connection_pool_size.$invalid">Required</span>
            </div>
            <hr>
            <div class="text-center">
                <button name="prev" ng-click="prevStep('/step3')" class="btn btn-primary">Prev</button>
                <button name="next" type="submit" class="btn btn-primary">Next</button>
            </div>
        </form>
    </div>
</div>
<div ng-if="formData.provider == 'openstack'">
    <form name="openstackForm" ng-submit="nextStep('/step7', openstackForm)">
        <div ng-if="formData.db_provider == 'mysql'">
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.setup_type.$invalid}">
                <label>
                    Choose setup type
                </label>
                <div class="radio">
                    <label>
                        <input required type="radio" name="setup_type" ng-model="formData.db.setup_type" value="master-master">
                        master-master
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input required type="radio" name="setup_type" ng-model="formData.db.setup_type" value="master-slave">
                        master-slave
                    </label>
                </div>
                <span class="help-block" ng-show="submitted && openstackForm.setup_type.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.num_instances.$invalid}">
                <label>
                    How many instances do you want?
                </label>
                <input required class="form-control" type="text" name="num_instances" ng-model="formData.db.num_instances">
                <span class="help-block" ng-show="submitted && openstackForm.num_instances.$invalid">Required</span>
                <span class="help-block small"><strong>Notice:</strong> If you chose master-slave, the number you'll enter include master instance.</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.connection_pool_size.$invalid}">
                <label>
                    Connection pool size
                </label>
                <input required class="form-control" type="number" min="2" max="700" name="connection_pool_size"
                       ng-model="formData.db.connection_pool_size">
                <span class="help-block" ng-show="submitted && openstackForm.connection_pool_size.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.flavor.$invalid}">
                <label>
                    Choose flavor <span tooltip="This will load when you fill in your credentials" class="glyphicon glyphicon-question-sign"></span>
                </label>
                <select required class="form-control" name="dbFlavor" ng-options="flavor for flavor in flavors" ng-model="formData.db.flavor">
                </select>
                <span class="help-block" ng-show="submitted && openstackForm.dbFlavor.$invalid">Required</span>
            </div>
        </div>
        <div ng-if="formData.db_provider == 'mongodb'">
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.sharding.$invalid}">
                <label>
                    Do you want use sharding?
                </label>
                <div class="radio">
                    <label>
                        <input type="radio" value="yes" name="sharding" ng-model="formData.sharding" required>
                        Yes
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" value="no" name="sharding" ng-model="formData.sharding" required>
                        No
                    </label>
                </div>
                <span class="help-block" ng-show="submitted && openstackForm.sharding.$invalid">Required</span>
            </div>
            <div ng-if="formData.sharding == 'yes'" class="form-group" ng-class="{'has-error' : submitted && openstackForm.num_shards.$invalid}">
                <label>
                    How many shards do you want?
                </label>
                <input class="form-control" type="number" min="2" max="10" name="num_shards" ng-model="formData.db.num_shards">
                <span class="help-block" ng-show="submitted && openstackForm.num_shards.$invalid">Required</span>
            </div>
            <div class="form-group" ng-class="{'has-error' : submitted && openstackForm.flavor.$invalid}">
                <label>
                    Choose flavor <span tooltip="This will load when you fill in your credentials" class="glyphicon glyphicon-question-sign"></span>
                </label>
                <select required class="form-control" name="dbFlavor" ng-options="flavor for flavor in flavors" ng-model="formData.db.flavor">
                </select>
                <span class="help-block" ng-show="submitted && openstackForm.dbFlavor.$invalid">Required</span>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <button name="prev" ng-click="prevStep('/step3')" class="btn btn-primary">Prev</button>
            <button name="next" type="submit" class="btn btn-primary">Finish</button>
        </div>
    </form>
</div>