Task Scheduler UI Changes

client/cat3/main.html

@@ -175,6 +175,7 @@
 		<script src="src/partials/sections/dashboard/workzone/instance/popups/updateChefRunlistConfirmationCtrl.js"></script>
 		<script src="src/partials/sections/dashboard/workzone/instance/popups/viewRunListCtrl.js"></script>
 		<script src="src/partials/sections/dashboard/workzone/orchestration/orchestrationCtrl.js"></script>
+		<script src="src/partials/sections/dashboard/workzone/orchestration/popups/addChefJobEventCtrl.js"></script>
 		<script src="src/partials/sections/dashboard/workzone/orchestration/popups/addJenkinsParamsCtrl.js"></script>
 		<script src="src/partials/sections/dashboard/workzone/orchestration/popups/addJobLinksCtrl.js"></script>
 		<script src="src/partials/sections/dashboard/workzone/orchestration/popups/addScriptParamsCtrl.js"></script>

client/cat3/src/factory/chefDataFormatterService.js

@@ -101,6 +101,19 @@
 					}
 					return list;
 				},
+				formatInstanceList: function (obj) {
+					var list = [];
+					for (var i = 0; i < obj.length; i++) {
+						if (obj[i].instanceState === "running" || obj[i].instanceState === "pending" || obj[i].instanceState === "unknown") {
+							list.push({
+								className: 'chef',
+								value: obj[i].name,
+								data: obj[i]._id
+							});
+						}
+					}
+					return list;
+				},
 				formatRunListFromComponent: function (nodesList) {
 					var reqBody = {
 						cookbooks: [],

client/cat3/src/partials/global.scss

@@ -724,6 +724,10 @@ accordion .panel-heading {
     margin-top: 15px;
 }
 
+.margintop10 {
+    margin-top: 10px;
+}
+
 .marginleft15 {
     margin-left: 15px;
 }
@@ -1365,20 +1369,22 @@ label {
         line-height: 34;
         font-size: 13px !important;
     }
-    .btnDay{
-        border-radius: 15px;
-        margin: 0 3px;
-        height: 24px;
-        width: 24px;
-        font-weight: 600;
-        padding: 1px 5px;
 
-    }
-    .activeDay {
-        background: #0B5475 !important;
-    }
+}
+
+.btnDay{
+    border-radius: 15px;
+    margin: 0 3px;
+    height: 24px;
+    width: 24px;
+    font-weight: 600;
+    padding: 1px 5px;
 
 }
+.activeDay {
+    background: #0B5475 !important;
+}
+
 .form-control-date{
     display: block;
     width: 100%;

client/cat3/src/partials/sections/dashboard/workzone/orchestration/orchestration.scss

@@ -66,6 +66,12 @@ $imagePath : "../../../../../../images";
 			padding-right: 0px;
 		}
 	}
+
+	.my-modal-popup {
+		.modal-lg {
+			width:1056px;
+		}
+	}
 }
 
 #orchestrationPage {
@@ -187,7 +193,17 @@ $imagePath : "../../../../../../images";
 	.select-nodes {
 		border: 1px solid #dddddd;
 		list-style: none outside none;
-		height: 235px;
+		height: 150px;
+		overflow-y: auto;
+		margin-top: 5px;
+		margin-bottom: 10px;
+		padding: 5px;
+	}
+
+	.select-nodeInstance {
+		border: 1px solid #dddddd;
+		list-style: none outside none;
+		height: 350px;
 		overflow-y: auto;
 		margin-top: 5px;
 		margin-bottom: 10px;

client/cat3/src/partials/sections/dashboard/workzone/orchestration/orchestrationCtrl.js

@@ -275,7 +275,8 @@
 						controller: 'newTaskCtrl',
 						backdrop: 'static',
 						keyboard: false,
-						size: 'lg',
+						size:'lg',
+						windowClass: 'my-modal-popup',
 						resolve: {
 							items: function() {
 								return type;

client/cat3/src/partials/sections/dashboard/workzone/orchestration/popups/addChefJobEvent.html

@@ -0,0 +1,156 @@
+<div id='addEventsPage'>
+   <form name="newSchedule" novalidate>
+      <div class="modal-header">
+         <span class="close" ng-click="cancel()">×</span>
+         <h4 class="modal-title"><i class="fa fa-calendar"></i>&nbsp;Schedule your Task</h4>
+      </div>
+      <div class="modal-body">
+         <!--dropdown for selecting the repeat type-->
+         <div class="col-lg-6 col-md-6 ">
+            <label>Starts on: <span class="red">*</span>
+            </label>
+            <input id="date-start"  ng-change="dateChange()" required  type="text"  ng-model="schedulerStartOn" class="form-control-date"  >
+         </div>
+         <div class="col-lg-6 col-md-6 ">
+            <label>Ends on: <span class="red">*</span>
+            </label>
+            <input ng-change="dateChange()" type="text"  id="date-end" ng-model="schedulerEndOn" class="form-control-date" required >
+            <span class="error red" ng-show="validDateRange">Start Date should be less than End date !</span>
+         </div>
+         <div class="clearfix margintop15"></div>
+         <div class="clearfix margintop15"></div>
+         <fieldset class="repo-job-details-wrapper">
+            <legend class="repo-job-details-wrapper-inner"><i class="fa fa-hourglass-start" ></i> Interval </legend>
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
+               <label>Repeats: <span class="red">*</span></label>
+               <select class="form-control-date" ng-model="repeatsType">
+                  <option selected="selected" value="Minutes" title="Repeat in Minutes">Minutes</option>
+                  <option value="Daily" title="Repeats Daily">Daily</option>
+                  <option value="Weekly" title="Repeats Weekly">Weekly</option>
+                  <option value="Monthly" title="Repeats Monthly">Monthly</option>
+                  <!-- <option value="Yearly" title="Repeats Yearly">Yearly</option> -->
+               </select>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
+               <label>Repeat By: <span class="red">*</span>
+                <span ng-show="newSchedule.repeatBy.$touched && newSchedule.repeatBy.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <select name="repeatBy" class="form-control-date" ng-model="repeatBy" required>
+                  <option value="" selected="selected">Choose</option>
+                  <option ng-repeat="repeatBy in repeatCount(30)" value="{{repeatBy}}" title="Repeat Every {{repeatBy}}">{{repeatBy}}</option>
+               </select>
+            </div>
+            <!--repeat on yearly for month starts -->
+            <!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margintop10" ng-show=" repeatsType==='Yearly'">
+               <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 text-padding control-label">Choose Month:
+                <span class="control-label red">&nbsp;*</span>
+               <span ng-show="newSchedule.selectedMonth.$touched && newSchedule.selectedMonth.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
+               <select id="selectedMonth" name="selectedMonth" class="ng-pristine ng-valid ng-touched" aria-invalid="false" ng-model="selectedMonth">
+                 <option value="" selected="selected">Choose the Month</option>
+                 <option ng-repeat="selectedMonth in monthOfYear" value="{{selectedMonth}}" title="Repeats every {{day}} {{repeatsType}}">{{selectedMonth}}</option>
+               </select>
+               </div>
+               </div> -->
+            <!--repeat on yearly for month ends-->
+            <!--starts at dropdown-->
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 margintop10" ng-show="repeatsType!=='Minutes'">
+               <label>Time(Hrs):
+               <span class="red">&nbsp;*</span>
+               <span ng-show="newSchedule.timeEventHour.$touched && newSchedule.timeEventHour.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <select name="timeEventHour" class="form-control-date" ng-model="timeEventType">
+                  <option value="" selected="selected">Choose Start Hour</option>
+                  <option ng-repeat="timeNumber in repeatCount(23)" value="{{timeNumber}}" title="Time Starts {{timeNumber}} {{repeatsType}}">{{timeNumber}}</option>
+               </select>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 margintop10" ng-show="repeatsType!=='Minutes'">
+               <label>Time(Mins):
+               <span class="red">&nbsp;*</span>
+               <span ng-show="newSchedule.timeEventMinute.$touched && newSchedule.timeEventMinute.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <select name="timeEventMinute" class="form-control-date" ng-model="timeEventMinute">
+                  <option value="" selected="selected">Choose Start Minute</option>
+                  <option ng-repeat="timeNumberMinutes in repeatCount(59)" value="{{timeNumberMinutes}}" title="Time Starts {{timeNumberMinutes}} {{repeatsType}}">{{timeNumberMinutes}}</option>
+               </select>
+            </div>
+            <!--repeat on weekly -->
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 margintop10" ng-show="repeatsType==='Weekly'">
+               <label>Repeat On:
+               <span class="control-label red">&nbsp;*</span>
+               <span ng-show="newSchedule.weekOfTheDay.$touched && newSchedule.weekOfTheDay.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <select name="weekOfTheDay" class="form-control-date" ng-model="weekOfTheDay">
+                  <option value="" selected="selected">Choose The Day</option>
+                  <option ng-repeat="(key,value) in daysOfWeek" value="{{key}}" title="Repeats every {{value}}">{{value}}</option>
+               </select>
+            </div>
+            <!--repeat on weekly ends--> 
+            <!--repeat on monthly & yearly starts -->
+            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 margintop10" ng-show="repeatsType==='Monthly'">
+               <label>Choose Date:
+               <span class="control-label red">&nbsp;*</span>
+               <span ng-show="newSchedule.selectedDayOfTheMonth.$touched && newSchedule.selectedDayOfTheMonth.$invalid" class="inputValidationMsg">required
+               </span>
+               </label>
+               <select name="selectedDayOfTheMonth" class="form-control-date" ng-model="selectedDayOfTheMonth">
+                  <option value="" selected="selected">Choose the Date</option>
+                  <option ng-repeat="selectedDayOfTheMonth in repeatCount(31)" value="{{selectedDayOfTheMonth}}" title="Day of the Month selected {{selectedDayOfTheMonth}}">{{selectedDayOfTheMonth}}</option>
+               </select>
+            </div>
+            <!--repeat on monthly & yearly ends-->
+            <!--starts at dropdown ends here-->
+            <!--dropdown ends here-->
+         </fieldset>
+      </div>
+      <div class="modal-footer">
+         <button type="button" class="btn cat-btn-close" ng-click="cancel()">
+         <i class="fa fa-times black"></i> Cancel
+         </button>
+         <button type="submit" class="btn cat-btn-update" ng-disabled="newSchedule.$invalid" ng-click="ok()">
+         <i class="fa fa-check white"></i> Save
+         </button>      
+      </div>
+   </form>
+</div>
+
+<script>
+    $(document).ready(function () {
+        $('#date-end').bootstrapMaterialDatePicker({
+            format: 'MM/DD/YYYY ',
+            weekStart: 1,
+            time: false,
+            switchOnClick : true,
+            nowButton : true,
+        });
+        $('#date-start').bootstrapMaterialDatePicker({
+            format: 'MM/DD/YYYY',
+            weekStart: 1,
+            time: false,
+            switchOnClick : true,
+            nowButton : true,
+        }).on('change', function(e, date)
+        {
+            $('#date-end').bootstrapMaterialDatePicker('setMinDate', date);
+        });
+        $.material.init();
+        $(document).on('click', 'input.time', function(){
+            var $this = $(this);
+            setTimeout(function () {
+                $this.bootstrapMaterialDatePicker({
+                    format: 'HH:mm',
+                    date: false,
+                    switchOnClick : true,
+                });
+            },100);
+
+        });
+    });
+
+</script>

client/cat3/src/partials/sections/dashboard/workzone/orchestration/popups/addChefJobEventCtrl.js

@@ -0,0 +1,103 @@
+/* Copyright (C) Relevance Lab Private Limited- All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ * Proprietary and confidential
+ * Written by Relevance UI Team,
+ * Aug 2015
+ */
+
+(function(angular){
+	"use strict";
+	angular.module('workzone.orchestration')
+		.controller('addChefJobEventCtrl',['$scope', '$modalInstance', 'items' ,'toastr',function($scope, $modalInstance , items , toastr){
+			console.log(items);
+			if(items.type !== 'new'){
+				$scope.schedulerStartOn = items.chefJenkScriptTaskObj.cronStart;
+				$scope.schedulerEndOn = items.chefJenkScriptTaskObj.cronEnd;
+				$scope.repeatBy = items.chefJenkScriptTaskObj.repeatBy;
+				$scope.repeatsType = items.chefJenkScriptTaskObj.repeats;
+				$scope.timeEventType = items.chefJenkScriptTaskObj.startTime;
+				$scope.timeEventMinute = items.chefJenkScriptTaskObj.startTimeMinute;
+				$scope.weekOfTheDay = items.chefJenkScriptTaskObj.dayOfWeek;
+				$scope.currentDate = items.chefJenkScriptTaskObj.startDate;
+				$scope.selectedDayOfTheMonth = items.chefJenkScriptTaskObj.selectedDayOfTheMonth;
+				$scope.selectedMonth = items.chefJenkScriptTaskObj.monthOfYear;
+			} else {
+				$scope.repeatsType = 'Minutes';//default selection.
+				$scope.schedulerStartOn=moment(new Date()).format('MM/DD/YYYY');
+            	$scope.schedulerEndOn=moment(new Date()).format('MM/DD/YYYY');
+			}
+
+			$scope.dateChange= function () {
+                var startDate =  Date.parse($scope.schedulerStartOn);
+                var endDate =  Date.parse($scope.schedulerEndOn);
+                if(startDate > endDate){
+                    $scope.validDateRange=true;
+                } else {
+                    $scope.validDateRange=false;
+                }
+            };
+
+			$scope.repeatCount = function(max, step) {
+                step = step || 1;
+                var input = [];
+                for (var i = 1; i <= max; i += step) {
+                    input.push(i);
+                }
+                return input;
+            };
+            /*$scope.timeCount = function(max, step) {
+                step = step || 1;
+                var input = [];
+                for (var i = 0; i <= max; i += step) {
+                    input.push(i);
+                }
+                return input;
+            };
+            $scope.timeCountMinutes = function(max, step) {
+                step = step || 1;
+                var input = [];
+                for (var i = 0; i <= max; i += step) {
+                    input.push(i);
+                }
+                return input;
+            };
+            $scope.dayOfTheMonth = function(max, step) {
+                step = step || 1;
+                var input = [];
+                for (var i = 1; i <= max; i += step) {
+                    input.push(i);
+                }
+                return input;
+            };*/
+            /*$scope.currentDate = new Date();
+            $scope.currentEndDate = new Date();*/
+            $scope.isDaySelected = {
+            	flag:true
+            }
+
+			$scope.daysOfWeek = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
+			;
+
+			$scope.monthOfYear = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
+			;
+			$scope.cancel = function() {
+				$modalInstance.dismiss('cancel');
+			};
+			$scope.ok=function(){
+				$scope.eventParams = {
+					repeats: $scope.repeatsType,
+					repeatBy: $scope.repeatBy,
+					cronStart: $scope.schedulerStartOn,
+					cronEnd: $scope.schedulerEndOn,
+					startTime: $scope.timeEventType,
+					startTimeMinute: $scope.timeEventMinute,
+					dayOfWeek: $scope.weekOfTheDay,
+					selectedDayOfTheMonth: $scope.selectedDayOfTheMonth,
+					monthOfYear: $scope.selectedMonth
+				};
+				$modalInstance.close($scope.eventParams);
+			};
+		}
+	]);
+})(angular);
+