puphpet/puphpet

View on GitHub
src/PuphpetBundle/Resources/views/vagrantfile-linode.html.twig

Summary

Maintainability
Test Coverage
{% set providerChosen = (data.target == 'linode') ? true : false %}

{% set machines = (data.vm.provider.linode.machines is defined and data.vm.provider.linode.machines)
    ? data.vm.provider.linode.machines : [] %}
{% set syncedFolders = (data.vm.synced_folder is defined and data.vm.synced_folder)
    ? data.vm.synced_folder : [] %}

<div class="container-fluid cm-container-white section-title">
    <div class="checkbox checkbox-lg no-padding">
        <input type="radio" id="vagrantfile-vm-provider-linode-install"
               name="vagrantfile[target]" value="linode"
               {% if providerChosen %}checked{% endif %}
               data-toggle="radio-collapse" data-target="#vagrantfile-linode-container"
               data-enforce-group-single="vagrantfile"
               data-enable-on-check data-disable-on-uncheck />
        <label for="vagrantfile-vm-provider-linode-install">Deploy to Linode</label>

        <p>
            A new server will be spun up at Linode.
            <a href="#" data-toggle="modal"
               data-target="#vagrantfile-linode-modal">Click here for instructions</a>.
        </p>
    </div>
</div>

<div id="vagrantfile-linode-container"
     class="container-fluid collapse {% if providerChosen %}in{% endif %}">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group col-xs-12">
                <div class="clearfix"><label>Distro</label></div>

                {% for distribution in data.available.distributions %}
                    <div class="radio">
                        <input type="radio" id="vagrantfile-vm-provider-linode-distribution-{{ distribution.distribution }}"
                               name="vagrantfile[vm][provider][linode][distribution]"
                               value="{{ distribution.distribution }}"
                               {% if distribution.distribution == data.vm.provider.linode.distribution %}checked{% endif %} />
                        <label for="vagrantfile-vm-provider-linode-distribution-{{ distribution.distribution }}">
                            {{ distribution.long_name }}
                        </label>
                    </div>
                {% endfor %}
            </div>

            <div class="clearfix"></div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-linode-token">
                    Linode API Key
                </label>
                <input type="text" id="vagrantfile-vm-provider-linode-token"
                       name="vagrantfile[vm][provider][linode][token]"
                       placeholder="LINODE API KEY" class="form-control"
                       value="{{ data.vm.provider.linode.token }}" />
                <div class="help-block">
                    <a href="https://manager.linode.com/profile/index/"
                       target="_blank">Get it here</a>.
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-ssh-username">
                    Local Private Key Username
                </label>
                <input type="text" id="vagrantfile-ssh-username"
                       name="vagrantfile[ssh][username]"
                       placeholder="" class="form-control"
                       value="{{ data.ssh.username }}" />
                <div class="help-block">
                    The username associated with the private key entered.
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-ssh-private_key_path">
                    Local Private Key Path
                </label>
                <input type="text" id="vagrantfile-ssh-private_key_path"
                       name="vagrantfile[ssh][private_key_path]"
                       placeholder="~/.ssh/id_rsa" class="form-control"
                       value="{{ data.ssh.private_key_path }}" />
                <div class="help-block">
                    <p>The Linode server will not be accessible without your
                        <span class="label label-info" data-toggle="help-text">
                            <i class="fa fa-ellipsis-h"></i></span>
                        <span class="hidden">private/public key.</span>
                    </p>
                    <div class="hidden">
                        <p><strong>It will not be accessible using username/password,
                                only private key!</strong></p>
                    </div>
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-linode-ssh_key_name">
                    SSH Key Name
                </label>
                <input type="text" id="vagrantfile-vm-provider-linode-ssh_key_name"
                       name="vagrantfile[vm][provider][linode][ssh_key_name]"
                       placeholder="Vagrant" class="form-control"
                       value="{{ data.vm.provider.linode.ssh_key_name }}" />
                <div class="help-block">
                    Change if you already have an SSH key you would like to use.
                    Leave as default otherwise.
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Machines</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_linode.machine') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, machine in machines %}
                    {% set blockId = "vagrantfile-vm-provider-linode-machines-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][linode][machines][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a Linode machine
                </div>
                {% for index, machine in machines %}
                    {% include 'PuphpetBundle:vagrantfile-linode:machine.html.twig' with {
                        'machine': machine,
                        'datacenters': data.available.datacenters,
                        'plans': data.available.plans,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Shared Folders</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_linode.synced_folder') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% set blockId = "vagrantfile-vm-provider-linode-synced_folder-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][linode][synced_folder][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a shared folder
                </div>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% include 'PuphpetBundle:vagrantfile-linode:synced-folder.html.twig' with {
                        'synced_folder': synced_folder,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="vagrantfile-linode-modal" tabindex="-1" role="dialog"
     aria-labelledby="vagrantfile-linode-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="vagrantfile-linode-modal-label">
                    Instructions for Linode Deployment
                </h4>
            </div>
            <div class="modal-body">
                <h3>Linode Instance</h3>

                <p>
                    Don't have a Linode account?
                    <a href="https://www.linode.com/" target="_blank">Click here to create one</a>
                </p>

                <p>
                    Login to Linode and
                    <a href="https://manager.linode.com/profile/api" target="_blank">go to the API page</a>.
                    You will need an API Key.
                </p>

                <h3>Installation Requirements</h3>

                <p>Run the following commands from your host's terminal (not within the VM):</p>

                <ul class="nav nav-pills">
                    <li class="active"><a href="#linode-instructions-mac" data-toggle="pill">Mac</a></li>
                    <li><a href="#linode-instructions-windows" data-toggle="pill">Windows</a></li>
                    <li><a href="#linode-instructions-linux" data-toggle="pill">Linux</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="linode-instructions-mac">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-linode<br />
                            $ vagrant box add dummy https://github.com/displague/vagrant-linode/raw/master/box/linode.box
                        </code>
                    </div>
                    <div class="tab-pane" id="linode-instructions-windows">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-linode<br />
                            $ vagrant box add dummy https://github.com/displague/vagrant-linode/raw/master/box/linode.box
                        </code>

                        <div class="clearfix"></div>

                        <p>
                            You need rsync installed. Easiest way is to use Cygwin and install it through there.
                            Alternatively, you can
                            <a href="https://www.itefix.no/i2/content/cwrsync-free-edition" target="_blank">install rsync separately</a>
                            and add it to your PATH.
                        </p>
                    </div>
                    <div class="tab-pane" id="linode-instructions-linux">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-linode<br />
                            $ vagrant box add dummy https://github.com/displague/vagrant-linode/raw/master/box/linode.box
                        </code>
                    </div>
                </div>

                <h3>Accessing Your VM</h3>

                <p>
                    To access your VM after running <code>$ vagrant up</code>, type
                    <code>$ vagrant ssh-config</code> to get the IP address assigned to the server you created,
                    and add the IP address to your computer's hosts file. Type <code>$ vagrant ssh</code> to
                    be immediately connected via SSH to your new server!
                </p>

                <h3 class="text-warning">If you choose CentOS</h3>

                <p>
                    The CentOS distributions do not ship with <code>rsync</code> installed! The first time you run
                    <code>$ vagrant up</code> IT WILL ERROR, but this is OK! Simply <code>$ vagrant ssh</code>
                    and type <code>$ sudo yum install rsync</code>. Once it finished installing, run
                    <code>$ vagrant provision</code>.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>