GUI-2814 now warns about bucket usage, working on create_bucket conve…

…rsion to angular directive/modal
eucalyptus · Nov 21, 2016 · 26567dc · 26567dc
1 parent 97b2fc7
commit 26567dc
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 13 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -191,6 +191,7 @@ module.exports = function(grunt) {
             },
             elbWizard: {
                 src: [
+                   'eucaconsole/static/js/services/bucket-service.js',
                    'eucaconsole/static/js/services/instances-service.js',
                    'eucaconsole/static/js/services/zones-service.js',
                    'eucaconsole/static/js/services/vpc-service.js',

diff --git a/eucaconsole/static/js/dist/elb-wizard.js b/eucaconsole/static/js/dist/elb-wizard.js
diff --git a/eucaconsole/static/js/dist/elb-wizard.js.map b/eucaconsole/static/js/dist/elb-wizard.js.map
diff --git a/eucaconsole/static/js/pages/elb-wizard/advanced.js b/eucaconsole/static/js/pages/elb-wizard/advanced.js
@@ -1,7 +1,10 @@
 angular.module('ELBWizard')
-.controller('AdvancedController', ['$scope', '$routeParams', 'ELBWizardService', 'ELBService', function ($scope, $routeParams, ELBWizardService, ELBService) {
-    this.values = ELBWizardService.values;
-    this.createELB = function($event) {
+.controller('AdvancedController', ['$scope', '$routeParams', 'ELBWizardService', 'ELBService', 'BucketService', 'eucaHandleError', 'ModalService',
+function ($scope, $routeParams, ELBWizardService, ELBService, BucketService, eucaHandleError, ModalService) {
+    var vm = this;
+    vm.values = ELBWizardService.values;
+    vm.buckets = [];
+    vm.createELB = function($event) {
         $event.preventDefault();
         ELBService.createELB($('#csrf_token').val(), this.values).then(
             function success() {
@@ -12,5 +15,42 @@ angular.module('ELBWizard')
             }
         );
     };
-}]);
+    vm.accessLogConfirmationDialogKey = 'doNotShowAccessLogConfirmationAgain';
+    vm.handleLoggingChange = function() {
+        if (vm.values.loggingEnabled) {
+            if (vm.buckets.length === 0) {
+                BucketService.getBuckets($('#csrf_token').val()).then(
+                    function success(result) {
+                        result.forEach(function(val) {
+                            vm.buckets.push(val.bucket_name); 
+                        });
+                    },
+                    function error(errData) {
+                        eucaHandleError(errData.data.message, errData.status);
+                    });
+            }
+            if (Modernizr.localstorage && !localStorage.getItem(vm.accessLogConfirmationDialogKey)) {
+                ModalService.openModal('loggingConfirmDialog');
+            }
+        }
+    };
+}])
+.directive('loggingConfirmDialog', function() {
+    return {
+        restrict: 'A',
+        require: ['^modal', 'loggingConfirmDialog'],
+        templateUrl: '/_template/elbs/wizard/logging-confirm-dialog',
+        controller: ['ModalService', function(ModalService) {
+            var vm = this;
+            vm.accessLogConfirmationDialogKey = 'doNotShowAccessLogConfirmationAgain';
+            vm.confirmEnableAccessLogs = function() {
+                if (vm.dontShowBucketWarnAgain && Modernizr.localstorage) {
+                    localStorage.setItem(vm.accessLogConfirmationDialogKey, true);
+                }
+                ModalService.closeModal('loggingConfirmDialog');
+            };
+        }],
+        controllerAs: 'loggingConfirm'
+    };
+});
 
diff --git a/eucaconsole/static/js/pages/elb-wizard/wizard.js b/eucaconsole/static/js/pages/elb-wizard/wizard.js
@@ -2,7 +2,8 @@ angular.module('ELBWizard', [
     'ngRoute', 'TagEditorModule', 'ELBListenerEditorModule', 'localytics.directives',
     'ELBSecurityPolicyEditorModule', 'ELBCertificateEditorModule', 'ModalModule',
     'InstancesSelectorModule', 'EucaConsoleUtils', 'InstancesServiceModule',
-    'ZonesServiceModule', 'VPCServiceModule', 'ELBServiceModule'
+    'ZonesServiceModule', 'VPCServiceModule', 'ELBServiceModule', 'BucketServiceModule',
+    'ModalModule',
 ])
 .factory('ELBWizardService', ['$location', function ($location) {
     var steps = [

diff --git a/eucaconsole/templates/elbs/wizard/advanced.pt b/eucaconsole/templates/elbs/wizard/advanced.pt
@@ -1,4 +1,4 @@
-<form id="elb-form">
+<form id="elb-form" i18n:domain="eucaconsole">
     <div i18n:translate="">Your load balancer will monitor the health of its instances based on the following health check.</div>
     <div i18n:translate="">Instances that fail the health check will be removed from the load balancer.</div>
 
@@ -73,7 +73,7 @@
                     </label>
                 </div>
                 <div class="large-12 small-12 columns field">
-                    <select id="time_between_pings" class="ping-delay ng-pristine ng-valid ng-not-empty ng-valid-required ng-touched" required="required" ng-model="advanced.values.timeBetweenPings" name="time_between_pings" aria-invalid="false">
+                    <select id="time_between_pings" class="ping-delay ng-pristine ng-valid ng-not-empty ng-valid-required ng-touched" required="required" ng-model="advanced.values.timeBetweenPings" name="time_between_pings">
                         <option value="30" i18n:translate="">30 seconds</option>
                         <option value="60" i18n:translate="">1 minute</option>
                         <option value="300" i18n:translate="">5 minutes</option>
@@ -105,6 +105,62 @@
                     </select>
                 </div>
             </div>
+            <h6 class="section-label">Access logs</h6>
+            <div id="controls_logging_enabled" class="row inline controls-wrapper">
+                <div class="columns field">
+                    <input id="logging_enabled" type="checkbox" value="y" ng-model="advanced.values.loggingEnabled" name="logging_enabled" ng-click="advanced.handleLoggingChange()">
+                    <label class="left-align" for="logging_enabled" i18n:translate="">Enable logging</label>
+                </div>
+            </div>
+            <div id="access-logs-wrapper" ng-show="advanced.values.loggingEnabled">
+                <p i18n:translate="">Specify where your logs should be stored in the cloud.</p>
+                <div id="controls_bucket_name" class="row inline stacked controls-wrapper">
+                    <div class="columns">
+                        <label class="left stack-label">
+                            <span i18n:translate="">Bucket name</span>
+                            <span class="req">*</span>
+                            <span class="" data-tooltip="" title="Choose from your existing buckets, or create a new bucket." i18n:attributes="title">
+                                <i class="helptext-icon"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="large-12 small-12 columns field">
+                        <select id="bucket_name" required="required" ng-options="bucket for bucket in advanced.buckets" ng-model="advanced.values.bucketName" name="bucket_name">
+                            <option value="">Select...</option>
+                        </select>
+                        <small class="error" i18n:translate="">Bucket name is required</small>
+                    </div>
+                </div>
+                <div id="create-bucket-link">
+                    <span i18n:translate="">OR:</span>
+                    <a data-reveal-id="create-bucket-modal" i18n:translate="">Create bucket</a>
+                </div>
+                <div id="controls_bucket_prefix" class="row inline stacked controls-wrapper">
+                    <div class="columns">
+                        <label class="left stack-label">
+                            <span i18n:translate="">Prefix</span> 
+                            <span data-tooltip="" title="The path where log files will be stored within the bucket. If not specified, logs will be created at the bucket's root level" i18n:attributes="title">
+                                <i class="helptext-icon"></i>
+                            </span>
+                        </label>
+                    </div>
+                    <div class="large-12 small-12 columns field">
+                        <input id="bucket_prefix" type="text" value="" pattern="^[^A-Z]*$" name="bucket_prefix" ng-model="advanced.values.bucketPrefix">
+                        <small class="error" i18n:translate="">Prefix may not contain uppercase letters</small>
+                    </div>
+                </div>
+                <div id="controls_collection_interval" class="row inline stacked controls-wrapper">
+                    <div class="columns">
+                        <label class="left stack-label" i18n:translate="">Collection interval</label>
+                    </div>
+                    <div class="large-12 small-12 columns field">
+                        <select id="collection_interval" name="collection_interval" ng-model="advanced.values.collectionInterval">
+                            <option value="60" i18n:translate="">60 minutes</option>
+                            <option value="5" i18n:translate="">5 minutes</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <hr>
@@ -123,4 +179,7 @@
             <a class="cancel-link" href="/elbs" i18n:translate="">Cancel</a>
         </div>
     </div>
+    <div class="modal medium" modal="loggingConfirmDialog">
+        <div logging-confirm-dialog=""></div>
+    </div>
 </form>