add create & update job features

distribworks · Aug 1, 2018 · 4ce0402 · 4ce0402
1 parent adf1c20
commit 4ce0402
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 4 deletions.
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
@@ -23,6 +23,28 @@ dkron.filter('statusClass', function() {
 dkron.constant('hideDelay', 2000);
 
 dkron.controller('JobListCtrl', function ($scope, $http, $interval, hideDelay) {
+  $scope.jobTemplateId = "job_template"
+  $scope.jobTemplate = {
+    name: "child_job",
+    schedule: "",
+    shell: false,
+    command: "",
+    environment_variables: null,
+    owner: "",
+    owner_email: "",
+    disabled: false,
+    tags: {},
+    retries: 0,
+    dependent_jobs: [],
+    parent_job: "",
+    processors: null,
+    concurrency: "forbid",
+    executor: "shell",
+    executor_config: {
+      command: ""
+    }
+  }
+
   $scope.runJob = function(jobName) {
     $scope["running_" + jobName] = true;
     var response = $http.post(DKRON_API_PATH + '/jobs/' + jobName);
@@ -40,6 +62,54 @@ dkron.controller('JobListCtrl', function ($scope, $http, $interval, hideDelay) {
     });
   };
 
+  $scope.createJob = function() {
+    jsonJob = document.getElementById($scope.jobTemplateId).innerHTML;
+    try {
+      job = angular.fromJson(jsonJob);
+    } catch (err) {
+      window.alert('Json Format Error');
+      return
+    }
+    $scope["creating_" + job.name] = true;
+    var response = $http.post(DKRON_API_PATH + '/jobs/', job);
+    response.success(function(data, status, headers, config) {
+      $('#message').html('<div class="alert alert-success fade in">Success created job ' + job.name + '</div>');
+
+      $(".alert-success").delay(hideDelay).slideUp(200, function(){
+        $(".alert").alert('close');
+        window.location.reload();
+      });
+    });
+
+    response.error(function(data, status, headers, config) {
+      $('#message').html('<div class="alert alert-danger fade in"><button type="button" class="close close-alert" data-dismiss="alert" aria-hidden="true">x</button>Error creating job ' +  job.name + '</div>');
+    });
+  };
+
+  $scope.updateJob = function(job) {
+    jsonJob = document.getElementById(job.name).innerHTML;
+    try {
+      job = angular.fromJson(jsonJob);
+    } catch (err) {
+      window.alert('Json Format Error');
+      return
+    }
+    $scope["updating_" + job.name] = true;
+    var response = $http.post(DKRON_API_PATH + '/jobs/', job);
+    response.success(function(data, status, headers, config) {
+      $('#message').html('<div class="alert alert-success fade in">Success updating job ' + job.name + '</div>');
+
+      $(".alert-success").delay(hideDelay).slideUp(200, function(){
+        $(".alert").alert('close');
+        window.location.reload();
+      });
+    });
+
+    response.error(function(data, status, headers, config) {
+      $('#message').html('<div class="alert alert-danger fade in"><button type="button" class="close close-alert" data-dismiss="alert" aria-hidden="true">x</button>Error updating job ' + job.name + '</div>');
+    });
+  };
+
   $scope.deleteJob = function(jobName) {
     $scope["deleting_" + jobName] = true;
     var response = $http.delete(DKRON_API_PATH + '/jobs/' + jobName);
@@ -171,7 +241,8 @@ dkron.controller('JobListCtrl', function ($scope, $http, $interval, hideDelay) {
   }
 
   updateView();
-  hljs.initHighlightingOnLoad();
+  // not in use
+  // hljs.initHighlightingOnLoad();
 
 });
 

diff --git a/templates/jobs.html.tmpl b/templates/jobs.html.tmpl
@@ -7,6 +7,9 @@
           <div class="input-group">
             <div class="input-group-addon"><i class="fa fa-search"></i></div>
             <input type="text" class="form-control" placeholder="Filter" ng-model="searchJob">
+            <div class="input-group-addon">
+              <a href="#" data-toggle="modal" data-target="#jobTemplateModal" title="New"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></a>
+            </div>
           </div>      
         </div>
     </form>
@@ -54,7 +57,7 @@
             <i ng-class="job | statusClass" class="glyphicon"></i>
         </td>
         <td>
-          <a href="#" data-toggle="modal" data-target="#{{`{{ $index }}`}}-modal" title="View"><i class="glyphicon glyphicon-eye-open" aria-hidden="true"></i></a>
+          <a href="#" data-toggle="modal" data-target="#{{`{{ $index }}`}}-modal"  title="View"><i class="glyphicon glyphicon-eye-open" aria-hidden="true"></i></a>
           &nbsp;
           <a href="#" ng-click="runJob(job.name)" ng-show="!running_{{`{{ $index }}`}}" title="Run"><i class="glyphicon glyphicon-play" aria-hidden="true"></i></a>
           <a href="#"><i class="fa fa-cog fa-spin fa-1x fa-fw" ng-show="running_{{`{{ $index }}`}}"></i></a>
@@ -91,11 +94,31 @@
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title" id="myModalLabel" ng-bind="'View ' + job.name"></h4>
             </div>
-            <div class="modal-body">
-              <pre><code class="hljs json" ng-bind="job | json"></code></pre>
+            <div class="modal-body" contenteditable="true">
+              <pre><code class="hljs json" ng-bind="job | json" id="{{`{{ job.name }}`}}"></code></pre>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button class="btn btn-default" ng-click="updateJob(job)" value="update" data-dismiss="modal">Update</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!--Job Template Modal -->
+      <div  class="modal fade" id="jobTemplateModal" role="dialog" aria-labelledby="myModalLabel">
+        <div class="modal-dialog" role="document">
+          <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="myModalLabel" ng-bind="'Create'"></h4>
+            </div>
+            <div class="modal-body" contenteditable="true">
+              <pre><code class="hljs json" ng-bind="jobTemplate | json" id="{{`{{ jobTemplateId }}`}}"></code></pre>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button class="btn btn-default" ng-click="createJob(jobTemplate)" value="Create" data-dismiss="modal">Create</button>
             </div>
           </div>
         </div>