Add support for TZID in schedule rrules

awx/ui/client/src/scheduler/factories/r-rule-to-api.factory.js

@@ -1,9 +1,11 @@
 export default
     function RRuleToAPI() {
-        return function(rrule) {
+        return function(rrule, scope) {
-            var response;
+            let localTime = scope.schedulerLocalTime;
-            response = rrule.replace(/(^.*(?=DTSTART))(DTSTART=.*?;)(.*$)/, function(str, p1, p2, p3) {
+            let timeZone = scope.schedulerTimeZone.name;
-                return p2.replace(/\;/,'').replace(/=/,':') + ' ' + 'RRULE:' + p1 + p3;
+
+            let response = rrule.replace(/(^.*(?=DTSTART))(DTSTART.*?)(=.*?;)(.*$)/, (str, p1, p2, p3, p4) => {
+                return p2 + ';TZID=' + timeZone + ':' + localTime + ' ' + 'RRULE:' + p4;
             });
             return response;
         };

awx/ui/client/src/scheduler/factories/schedule-post.factory.js

@@ -14,7 +14,7 @@ export default
                 newSchedule = scheduler.getValue();
                 rrule = scheduler.getRRule();
                 schedule.name = newSchedule.name;
-                schedule.rrule = RRuleToAPI(rrule.toString());
+                schedule.rrule = RRuleToAPI(rrule.toString(), scope);
                 schedule.description = (/error/.test(rrule.toText())) ? '' : rrule.toText();
 
                 if (scope.isFactCleanup) {

awx/ui/client/src/scheduler/schedulerAdd.controller.js

@@ -4,14 +4,14 @@
  * All Rights Reserved
  *************************************************/
 
-export default ['$filter', '$state', '$stateParams', 'Wait',
+export default ['$filter', '$state', '$stateParams', '$http', 'Wait',
     '$scope', '$rootScope', 'CreateSelect2', 'ParseTypeChange', 'GetBasePath',
     'Rest', 'ParentObject', 'JobTemplateModel', '$q', 'Empty', 'SchedulePost',
-    'ProcessErrors', 'SchedulerInit', '$location', 'PromptService',
+    'ProcessErrors', 'SchedulerInit', '$location', 'PromptService', 'RRuleToAPI',
-    function($filter, $state, $stateParams, Wait,
+    function($filter, $state, $stateParams, $http, Wait,
         $scope, $rootScope, CreateSelect2, ParseTypeChange, GetBasePath,
         Rest, ParentObject, JobTemplate, $q, Empty, SchedulePost,
-        ProcessErrors, SchedulerInit, $location, PromptService) {
+        ProcessErrors, SchedulerInit, $location, PromptService, RRuleToAPI) {
 
     var base = $scope.base || $location.path().replace(/^\//, '').split('/')[0],
         scheduler,
@@ -283,6 +283,16 @@ export default ['$filter', '$state', '$stateParams', 'Wait',
     Wait('start');
     $('#form-container').empty();
     scheduler = SchedulerInit({ scope: $scope, requireFutureStartTime: false });
+    let timeZonesAPI = () => {
+        return $http.get(`/api/v2/schedules/zoneinfo/`);
+    };
+    // set API timezones to scheduler object
+    timeZonesAPI().then(({data}) => {
+        scheduler.scope.timeZones = data;
+        scheduler.scope.schedulerTimeZone = _.find(data, (zone) => {
+            return zone.name === scheduler.scope.current_timezone.name;
+        });
+    });
     if($scope.schedulerUTCTime) {
         // The UTC time is already set
         processSchedulerEndDt();
@@ -306,7 +316,22 @@ export default ['$filter', '$state', '$stateParams', 'Wait',
         $scope.$on("formUpdated", function() {
             $rootScope.$broadcast("loadSchedulerDetailPane");
         });
+        $scope.$on("setPreviewPane", (event) => {
+            let rrule = event.currentScope.rrule.toString();
+            let req = RRuleToAPI(rrule, $scope);
 
+            $http.post('/api/v2/schedules/preview/', {'rrule': req})
+                .then(({data}) => {
+
+                    $scope.preview_list = data;
+                    for (let tz in data) {
+                        $scope.preview_list.isEmpty = data[tz].length === 0;
+                        $scope.preview_list[tz] = data[tz].map(function(date) {
+                            return date.replace(/Z/, '');
+                        });
+                    }
+                });
+        });
         $scope.$watchGroup(["schedulerName",
             "schedulerStartDt",
             "schedulerStartHour",

awx/ui/client/src/scheduler/schedulerEdit.controller.js

@@ -1,9 +1,9 @@
 export default ['$filter', '$state', '$stateParams', 'Wait', '$scope',
-'$rootScope', 'CreateSelect2', 'ParseTypeChange', 'ParentObject', 'ProcessErrors', 'Rest',
+'$rootScope', '$http', 'CreateSelect2', 'ParseTypeChange', 'ParentObject', 'ProcessErrors', 'Rest',
-'GetBasePath', 'SchedulerInit', 'SchedulePost', 'JobTemplateModel', '$q', 'Empty', 'PromptService',
+'GetBasePath', 'SchedulerInit', 'SchedulePost', 'JobTemplateModel', '$q', 'Empty', 'PromptService', 'RRuleToAPI',
 function($filter, $state, $stateParams, Wait, $scope,
-    $rootScope, CreateSelect2, ParseTypeChange, ParentObject, ProcessErrors, Rest,
+    $rootScope, $http, CreateSelect2, ParseTypeChange, ParentObject, ProcessErrors, Rest,
-    GetBasePath, SchedulerInit, SchedulePost, JobTemplate, $q, Empty, PromptService) {
+    GetBasePath, SchedulerInit, SchedulePost, JobTemplate, $q, Empty, PromptService, RRuleToAPI) {
 
     let schedule, scheduler;
 
@@ -85,6 +85,22 @@ function($filter, $state, $stateParams, Wait, $scope,
         callSelect2();
     });
 
+    $scope.$on("setPreviewPane", (event) => {
+        let rrule = event.currentScope.rrule.toString();
+        let req = RRuleToAPI(rrule, $scope);
+
+        $http.post('/api/v2/schedules/preview/', {'rrule': req})
+            .then(({data}) => {
+                $scope.preview_list = data;
+                for (let tz in data) {
+                    $scope.preview_list.isEmpty = data[tz].length === 0;
+                    $scope.preview_list[tz] = data[tz].map(function(date) {
+                        return date.replace(/Z/, '');
+                    });
+                }
+            });
+    });
+
     Wait('start');
 
     // Get the existing record
@@ -111,6 +127,13 @@ function($filter, $state, $stateParams, Wait, $scope,
 
             $('#form-container').empty();
             scheduler = SchedulerInit({ scope: $scope, requireFutureStartTime: false });
+
+            $http.get('/api/v2/schedules/zoneinfo/').then(({data}) => {
+                scheduler.scope.timeZones = data;
+                scheduler.scope.schedulerTimeZone = _.find(data, (zone) => {
+                    return zone.name === scheduler.scope.current_timezone.name;
+                });
+            });
             scheduler.inject('form-container', false);
             scheduler.injectDetail('occurrences', false);
 

awx/ui/client/src/scheduler/schedulerForm.partial.html

@@ -28,6 +28,12 @@
                     name="schedulerName"
                     id="schedulerName"
                     ng-model="schedulerName" required
+                    ng-model-options="{
+                        'updateOn': 'default blur',
+                        'debounce': {
+                        'default': 300,
+                        'blur': 0
+                    }}"
                     ng-disabled="!(schedule_obj.summary_fields.user_capabilities.edit || canAdd)"
                     placeholder="Schedule name">
                 <div class="error"
@@ -578,7 +584,7 @@
             </p>
         </div>
         <div class="SchedulerFormDetail-container"
-            ng-show="schedulerIsValid">
+            ng-show="schedulerIsValid &&  !preview_list.isEmpty">
             <label class="SchedulerFormDetail-label">
                 Schedule Description
             </label>
@@ -623,15 +629,15 @@
             <ul class="occurrence-list mono-space
                 SchedulerFormDetail-occurrenceList"
                 ng-show="dateChoice == 'utc'">
-                <li ng-repeat="occurrence in occurrence_list">
+                <li ng-repeat="occurrence in preview_list.utc">
-                    {{ occurrence.utc }}
+                    {{ occurrence | date:'MM-dd-yyyy HH:mm:ss'}} UTC
                 </li>
             </ul>
             <ul class="occurrence-list mono-space
                 SchedulerFormDetail-occurrenceList"
                 ng-show="dateChoice == 'local'">
-                <li ng-repeat="occurrence in occurrence_list">
+                <li ng-repeat="occurrence in preview_list.local">
-                    {{ occurrence.local }}
+                    {{ occurrence | date:'MM-dd-yyyy HH:mm:ss'}}
                 </li>
             </ul>