Преглед изворни кода

HUE-1647 [oozie] Copy button response

Added new loading overlay
Enrico Berti пре 12 година
родитељ
комит
2bfe602

+ 14 - 0
apps/jobsub/src/jobsub/templates/designs.mako

@@ -175,6 +175,15 @@ ${ commonheader(None, "jobsub", user) | n,unicode }
 
 </div>
 
+<div class="hueOverlay" data-bind="visible: isLoading">
+  <!--[if lte IE 9]>
+    <img src="/static/art/spinner-big.gif" />
+  <![endif]-->
+  <!--[if !IE]> -->
+    <i class="icon-spinner icon-spin"></i>
+  <!-- <![endif]-->
+</div>
+
 <script id="designTemplate" type="text/html">
   <tr style="cursor: pointer" data-bind="with: design">
     <td data-row-selector-exclude="true" data-bind="click: function(data, event) {$root.toggleSelect.call($root, $index());}" class="center" style="cursor: default">
@@ -765,9 +774,11 @@ var designTable = $('#designTable').dataTable( designTableOptions );
  * This is useful when datatables doesn't automatically update and no extra rows have been added.
  */
 function redraw() {
+  designs.isLoading(true);
   designTable.fnDestroy();
   designTable = $('#designTable').dataTable( designTableOptions );
   designTable.fnFilter(designs.inTrash().toString(), 7);
+  designs.isLoading(false);
 }
 
 /**
@@ -777,6 +788,7 @@ function redraw() {
  * Clearing the table is necessary so multiple rows will not be added.
  */
 function reload() {
+  designs.isLoading(true);
   $(document).one('load.designs', function() {
     designTable.fnClearTable();
     designTable.fnDestroy();
@@ -785,6 +797,7 @@ function reload() {
   $(document).one('initialized.designs', function() {
     designTable = $('#designTable').dataTable( designTableOptions );
     designTable.fnFilter(designs.inTrash().toString(), 7);
+    designs.isLoading(false);
   });
 }
 
@@ -919,6 +932,7 @@ $(document).ready(function(e) {
     $('#restoreWf').modal('show');
   });
   $('body').on('click', '#copy-designs', function() {
+    designs.isLoading(true);
     designs.cloneDesigns();
   });
   $('#home').click(function() {

+ 1 - 0
apps/jobsub/static/js/jobsub.ko.js

@@ -285,6 +285,7 @@ var Designs = (function($, ko, NodeModelChooser) {
     self.temporary = ko.observable();
     self.inTrash = ko.observable(false);
     self.isEditing = ko.observable(false);
+    self.isLoading = ko.observable(false);
     self.designs = ko.observableArray([]);
     self.trashedDesignObjects = ko.computed(function() {
       var selected = [];

+ 12 - 2
apps/oozie/src/oozie/templates/editor/list_bundles.mako

@@ -119,6 +119,14 @@ ${ layout.menubar(section='bundles') }
 </div>
 </div>
 
+<div class="hueOverlay" data-bind="visible: isLoading">
+  <!--[if lte IE 9]>
+    <img src="/static/art/spinner-big.gif" />
+  <![endif]-->
+  <!--[if !IE]> -->
+    <i class="icon-spinner icon-spin"></i>
+  <!-- <![endif]-->
+</div>
 
 <div id="submit-job-modal" class="modal hide"></div>
 
@@ -160,8 +168,9 @@ ${ layout.menubar(section='bundles') }
 <script type="text/javascript" charset="utf-8">
   $(document).ready(function () {
     var viewModel = {
-        availableJobs : ko.observableArray(${ json_jobs | n }),
-        chosenJobs : ko.observableArray([])
+      availableJobs : ko.observableArray(${ json_jobs | n }),
+      chosenJobs : ko.observableArray([]),
+      isLoading: ko.observable(false)
     };
 
     ko.applyBindings(viewModel);
@@ -240,6 +249,7 @@ ${ layout.menubar(section='bundles') }
     });
 
     $("#clone-btn").click(function (e) {
+      viewModel.isLoading(true);
       var _this = $(".hueCheckbox[checked='checked']");
       var _url = _this.attr("data-clone-url");
       $.post(_url, function (data) {

+ 12 - 2
apps/oozie/src/oozie/templates/editor/list_coordinators.mako

@@ -115,6 +115,14 @@ ${ layout.menubar(section='coordinators') }
 </div>
 </div>
 
+<div class="hueOverlay" data-bind="visible: isLoading">
+  <!--[if lte IE 9]>
+    <img src="/static/art/spinner-big.gif" />
+  <![endif]-->
+  <!--[if !IE]> -->
+    <i class="icon-spinner icon-spin"></i>
+  <!-- <![endif]-->
+</div>
 
 <div id="submit-job-modal" class="modal hide"></div>
 
@@ -156,8 +164,9 @@ ${ layout.menubar(section='coordinators') }
 <script type="text/javascript" charset="utf-8">
   $(document).ready(function () {
     var viewModel = {
-        availableJobs : ko.observableArray(${ json_jobs | n }),
-        chosenJobs : ko.observableArray([])
+      availableJobs : ko.observableArray(${ json_jobs | n }),
+      chosenJobs : ko.observableArray([]),
+      isLoading: ko.observable(false)
     };
 
     ko.applyBindings(viewModel);
@@ -244,6 +253,7 @@ ${ layout.menubar(section='coordinators') }
     });
 
     $("#clone-btn").click(function (e) {
+      viewModel.isLoading(true);
       var _this = $(".hueCheckbox[checked='checked']");
       var _url = _this.attr("data-clone-url");
       $.post(_url, function (data) {

+ 17 - 2
apps/oozie/src/oozie/templates/editor/list_workflows.mako

@@ -118,6 +118,14 @@ ${ layout.menubar(section='workflows') }
   </div>
 </div>
 
+<div class="hueOverlay" data-bind="visible: isLoading">
+  <!--[if lte IE 9]>
+    <img src="/static/art/spinner-big.gif" />
+  <![endif]-->
+  <!--[if !IE]> -->
+    <i class="icon-spinner icon-spin"></i>
+  <!-- <![endif]-->
+</div>
 
 <div id="submit-wf-modal" class="modal hide"></div>
 
@@ -160,8 +168,9 @@ ${ layout.menubar(section='workflows') }
 <script type="text/javascript" charset="utf-8">
   $(document).ready(function () {
     var viewModel = {
-        availableJobs : ko.observableArray(${ json_jobs | n }),
-        chosenJobs : ko.observableArray([])
+      availableJobs : ko.observableArray(${ json_jobs | n }),
+      chosenJobs : ko.observableArray([]),
+      isLoading: ko.observable(false)
     };
 
     ko.applyBindings(viewModel);
@@ -241,6 +250,7 @@ ${ layout.menubar(section='workflows') }
     });
 
     $("#clone-btn").click(function (e) {
+      viewModel.isLoading(true);
       var _this = $(".hueCheckbox[checked='checked']");
       var _url = _this.attr("data-clone-url");
       $.post(_url, function (data) {
@@ -249,15 +259,20 @@ ${ layout.menubar(section='workflows') }
     });
 
     $("#schedule-btn").click(function (e) {
+      viewModel.isLoading(true);
       var _this = $(".hueCheckbox[checked='checked']");
       var _url = _this.attr("data-schedule-url");
       window.location.replace(_url);
     });
 
     $("#export-btn").click(function (e) {
+      viewModel.isLoading(true);
       var _this = $(".hueCheckbox[checked='checked']");
       var _url = _this.attr("data-export-url");
       window.location.replace(_url);
+      window.setTimeout(function(){
+        viewModel.isLoading(false);
+      }, 500);
     });
 
     var oTable = $("#workflowTable").dataTable({

+ 16 - 0
desktop/core/static/css/hue3.css

@@ -1470,4 +1470,20 @@ a, a:hover, a:active, a:focus {
 
 #jHueTourVideoPlayer .modal-body {
   max-height: 460px;
+}
+
+.hueOverlay {
+  top: 28px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: fixed;
+  z-index: 100500;
+  background-color: #FFF;
+  color: #333;
+  font-size: 60px;
+  opacity: 0.7;
+  text-align: center;
+  vertical-align: middle;
+  padding-top: 70px;
 }