index.html

﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>REX-Ray Configuration Generator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/responsive.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/formdata.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/images/favicons/manifest.json">
    <link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/images/favicons/favicon.ico">
    <meta name="msapplication-config" content="/images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
</head>
<body ng-app="mainForm">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <a href="https://github.com/kacole2/rexray-config-generator" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/" style="margin:10px 0">
                    REX-Ray Configuration Generator
                </a>
            </div>
            <!-- pull right for webview in responsive.css -->
            <div id="navbar" class="collapse navbar-collapse pull-right">
                <ul class="nav navbar-nav">
                    <li><a href="https://rexray.thecodeteam.com/" class="banner-image" target="_blank"><img src="images/lowresrr.png" width="30px"></a></li>
                    <li><a href="http://rexray.readthedocs.io/en/stable/" class="banner-image" target="_blank"><img src="images/readthedocs-white.png" width="31px"></a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="opener">
            <h2>Create REX-Ray Configurations with Ease</h2>
            <p class="lead">Enter your information and watch the configuration be generated automatically</p>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div ng-controller="GlobalLoggingLevelController">
                <div ng-controller="AddServiceController">
                    <div ng-controller="AddServiceButtonController">
                        <div class="col-md-6">
                            <h4>Step 1: Download REX-Ray <h6 class="yamlbox">$ curl -sSL https://dl.bintray.com/emccode/rexray/install | sh</h6></h4>
                            <form class="form-horizontal">
                                <fieldset>
                                    <!-- Form Name -->
                                    <legend><h4>Step 2: Create the configuration</h4></legend>

                                    <!-- GLOBAL LOGGING LEVEL DROPDOWN -->
                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="global-logging-level" uib-popover="The default level is 'Warn'" popover-trigger="mouseenter">REX-Ray Logging Level</label>
                                        <div class="col-md-8">
                                            <select ng-options="loggingLevelOption.label for loggingLevelOption in loggingLevelsData.loggingLevelOptions track by loggingLevelOption.value" ng-model="loggingLevelsData.selectedLoggingLevel" id="global-logging-level" name="global-logging-level" class="form-control">
                                            </select>
                                        </div>
                                    </div>

                                    <!-- ADD A NEW SERVICE DROPDOWN -->
                                    <div class="form-group">
                                        <label class="col-md-4 control-label" for="add-service">Add A Service</label>
                                        <div class="col-md-6">
                                            <select ng-model="serviceData.serviceRepeatSelect" id="add-service" name="add-service" class="form-control">
                                                <option ng-repeat="serviceOption in serviceData.serviceOptions" value="{{serviceOption.value}}">{{serviceOption.label}}</option>
                                            </select>
                                        </div>

                                        <!-- ADD NEW FORM BUTTON -->
                                        <div class="col-md-2">
                                            <button ng-click="addNewService()" ng-model="service.type" id="addServiceButton" name="addServiceButton" class="btn btn-primary">Add</button>
                                        </div>
                                        <br>

                                        <!-- SCALEIO FORM -->
                                        <div id="scaleioServiceForm" ng-show="service.type == 'scaleio'" ng-repeat="service in services" ng-include="'services/scaleio.html'">
                                        </div>

                                        <!-- ISILON FORM -->
                                        <div id="isilonServiceForm" ng-repeat="service in services" ng-show="service.type == 'isilon'" ng-include="'services/isilon.html'">
                                        </div>

                                        <!-- VIRTUALBOX FORM -->
                                        <div id="virtualboxServiceForm" ng-repeat="service in services" ng-show="service.type == 'virtualbox'" ng-include="'services/virtualbox.html'">
                                        </div>

                                        <!-- AWS EFS -->
                                        <div id="awsEfsServiceForm" ng-repeat="service in services" ng-show="service.type == 'efs'" ng-include="'services/efs.html'">
                                        </div>

                                        <!-- AWS EBS -->
                                        <div id="awsEbsServiceForm" ng-repeat="service in services" ng-show="service.type == 'ebs'" ng-include="'services/ebs.html'">
                                        </div>

                                         <!-- AWS S3FS -->
                                        <div id="s3fsServiceForm" ng-repeat="service in services" ng-show="service.type == 's3fs'" ng-include="'services/s3fs.html'">
                                        </div>

                                        <!-- Ceph RBD -->
                                        <div id="cephRbdServiceForm" ng-repeat="service in services" ng-show="service.type == 'rbd'" ng-include="'services/rbd.html'">
                                        </div>

                                        <!-- Digital Ocean -->
                                        <div id="dobsServiceForm" ng-repeat="service in services" ng-show="service.type == 'dobs'" ng-include="'services/dobs.html'">
                                        </div>

                                        <!-- Fitted Cloud -->
                                        <div id="fittedcloudServiceForm" ng-repeat="service in services" ng-show="service.type == 'fittedcloud'" ng-include="'services/fittedcloud.html'">
                                        </div>

                                        <!-- Google Compute Engine -->
                                        <div id="gcepdServiceForm" ng-repeat="service in services" ng-show="service.type == 'gcepd'" ng-include="'services/gcepd.html'">
                                        </div>

                                        <!-- Azure -->
                                        <div id="azureudServiceForm" ng-repeat="service in services" ng-show="service.type == 'azureud'" ng-include="'services/azureud.html'">
                                        </div>

                                        <!-- OpenStack Cinder -->
                                        <div id="cinderServiceForm" ng-repeat="service in services" ng-show="service.type == 'cinder'" ng-include="'services/cinder.html'">
                                        </div>

                                        <!-- LIBSTORAGE OPTIONS FORM -->
                                        <div id="libStorageServiceForm" ng-repeat="service in services" ng-show="service.type" ng-include="'services/libstorage.html'">
                                        </div>

                                    </div>
                                </fieldset>
                            </form>
                        </div>

                        <!-- the space between -->
                        <div class="col-md-1"></div>

                        <!-- THE YAML OUTPUT -->
                        <div class="col-md-5">
                            <div id="output">
                                <div class="yamlbox" >
                                    <span id="yamlconfig"><yaml-Configuration/></span>
                                </div>
                                <p><small><em>hint: hover over labels to get more information about individual options</em></small><button ng-click="downloadOutput('#yamlconfig')" class="btn btn-success">download</button><button ng-click="copyOutput('#yamlconfig')" class="btn btn-success">copy</button></p>
                            </div>
                            <br>
                            <h4>Step 3: Place the file at <h4 class="yamlbox">/etc/rexray/config.yml</h4></h4>
                            <h4>Step 4: Run as a service <h4 class="yamlbox">$ rexray start</h4></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
        <br>
        <br>
            <footer class="footer pull-right">
                    <p>&copy; 2017 <a href="http://thecodeteam.com/">The {code} Team</a> | <img src="images/angular.png" width="20px"></p>
            </footer>
        </div>
    </div>

    <!-- Google Analytics Script -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-57022521-4', 'auto');
        ga('send', 'pageview');
    </script>
</body>
</html>