Commits

Enis Afgan  committed 7bf68fb

Finally get the modal confirmation view for removing a file system to work

  • Participants
  • Parent commits 1c86c16

Comments (0)

Files changed (3)

File static/scripts/Backbone.ModalDialog.js

         events:
             {
             },
-       
+
         showModalBlanket:
             function()
             {
 				var centreY = $(window).height() / 2;
                 var centreX = $(window).width() / 2;
                 var modalContainer = this.ensureModalContainer( this.options.targetContainer).empty();
-		
+
 		        $el.addClass( "modal");
 
                 var coords = {
 
                 var animateProperties = {opacity:1};
                 var modalOffset = modalContainer.offset();
-                    
+
                 if( this.options.slideFromAbove)
                 {
                     modalContainer.css({"top": (modalOffset.top - this.options.slideDistance) + "px"});

File static/scripts/admin.js

         },
 
         initialize: function() {
-            //CMApp.vent.bind("fs:confirmFSRemove", this.handleRemove);
-        },
+            this.model.bind("change", this.render, this); // watch for any model changes
+       },
 
         onRender: function() {
             // Must clear tooltips; otherwise, following a rerender, the binding
 
         triggerRemove: function(event) {
             event.preventDefault();
-            console.log("triggered FS " + this.model.get('name') + " removal");
-            this.$el.animate({backgroundColor: '#FEF1B5'}, "fast");
-            // Show confirmation dialog
+            this.$el.css({backgroundColor: '#FEF1B5'}, "fast");
+            // Show a modal confirmation dialog
             var filesystemRemoveConfirmationView =
                 new FilesystemRemoveConfirmationView({model: this.model});
-            CMApp.fsConfirmRemove.show(filesystemRemoveConfirmationView);
+            // CMApp.fsConfirmRemove.show(filesystemRemoveConfirmationView);
+            filesystemRemoveConfirmationView.render().showModal();
+            // Listen for the modal dialog's action event and act accordingly
             var that = this;
-            (function () {
-                CMApp.vent.on("fs:FSRemoveAction", function(action){
-                    if (action === 'remove') {
-                        console.log("Closure handling removal of FS " + that.model.get('name'));
-                    }
-                    that.$el.animate({backgroundColor: 'transparent'}, "fast");
-                });
-            })();
+            filesystemRemoveConfirmationView.on('fs:removeFS', function(){
+                    that.handleRemove();
+            });
+            // closeModalWindow is automatically triggered by Backbone.ModalView
+            filesystemRemoveConfirmationView.on('closeModalWindow', function(){
+                that.$el.animate({backgroundColor: 'transparent'}, "slow");
+            });
         },
 
-        handleRemove: function(model) {
-            console.log("Handling removal of FS " + model.get('name'));
+        handleRemove: function() {
+            url = this.$el.find('a.fs-remove').attr('href');
+            $.get(url, function(data) {
+                $('#msg').html(data).fadeIn();
+                clear_msg();
+            });
+            this.model.attributes.status = 'Removing';
+            this.model.save();
         },
 
         showDetails: function(event) {
             event.preventDefault();
-            // Before displaying a new details box, close any others
+            // Before displaying a new details box, close any others and clear tr
             CMApp.vent.trigger("fs:detailsClose");
+            // Highlight the file system for which the details are being shown
             this.$el.animate({backgroundColor: '#FEF1B5'}, "fast");
             var detailsView = new FilesystemDetailsView({model: this.model});
             CMApp.fsDetails.show(detailsView);
-            // Add a hide event on the 'close' button
-            // Need to use closure here to keep a reference to the highlighted tr
+            // Listen for a hide event on the 'close' button to remove the tr highlight
             var that = this;
             (function () {
                 CMApp.vent.on("fs:detailsClose", function(){
                     that.$el.animate({backgroundColor: 'transparent'}, "fast");
                 });
             })();
-        },
+       },
 
         /*
         attributes: function() {
         }
     });
 
-    // Define the confirmation popup before removing a file system
-    var FilesystemRemoveConfirmationView= Backbone.Marionette.ItemView.extend({
-        template: "#fs-confirmRemove-template",
-        className: "fs-confirmRemove-box modal-box",
+    var FilesystemRemoveConfirmationView = Backbone.ModalView.extend({
+        removeFSConfirmationDialogTemplate:
+            '<div class="modal-dialog-header">Remove <%= name %> file system?</div>' +
+            '<div class="modal-dialog-text">Removing this file system will first stop any ' +
+                'services that require this file system. Then, the file system will be ' +
+                'unmounted and the underlying device disconnected from this instance.</div>' +
+            '<div class="modal-dialog-buttons">' +
+                '<button id="confirm_fs_remove" class="modal-dialog-ok-button">Confirm</button>' +
+                '<button class="modal-dialog-cancel-button">Cancel</button>' +
+            '</div>',
 
         events: {
             "click #confirm_fs_remove": "confirmFSRemove",
-            "click .modal-dialog-cancel-button": "cancelFSRemove",
+            "click .modal-dialog-cancel-button": function(){this.hideModal();}
         },
 
-        //initialize: function() {
-            //_.bindAll(this, "render");
-        //},
-        cancelFSRemove: function() {
-            console.log("Canceling FS " + this.model.get('name') + " removal");
-            CMApp.vent.trigger("fs:FSRemoveAction", "cancel");
-            CMApp.fsConfirmRemove.close();
+        initialize: function() {
+            // TODO: move the template out of the .js file
+            this.template = _.template(this.removeFSConfirmationDialogTemplate);
+        },
+
+        render: function() {
+            $(this.el).html(this.template(this.model.toJSON()));
+            return this;
         },
 
         confirmFSRemove: function() {
-            console.log("Confirming FS " + this.model.get('name') + " removal");
-            CMApp.vent.trigger("fs:FSRemoveAction", 'remove');
-            CMApp.fsConfirmRemove.close();
+            this.trigger('fs:removeFS');
+            this.hideModal();
         }
     });
 
-
     // Define the master view, i.e., list of all the file systems
     var FilesystemsView = Backbone.Marionette.CompositeView.extend({
         template: "#fileSystems-template",
             // Show the new file system resize form
             $('#'+formId).show("blind");
         },
-        
+
         */
 
     });

File templates/admin.mako

                         Add Galaxy admin users to Galaxy. This action simply
                         adds users' emails to Galaxy's universe_wsgi.ini file
                         and does not check of the users exist or register new
-                        users. Note that this action implies restarting Galaxy. 
+                        users. Note that this action implies restarting Galaxy.
                     </div>
                 </span>
                 <form class="generic_form" action="${h.url_for(controller='root', action='add_galaxy_admin_users')}" method="post">
                         changes.<br />This action will:
                         <ol>
                             <li>Stop Galaxy service</li>
-                            <li>Pull and apply any changes from the provided repository. 
+                            <li>Pull and apply any changes from the provided repository.
                             If there are conflicts during the merge, local changes
                             will be preserved.</li>
                             <li>Call Galaxy database migration script</li>
                         repository is stored under your cloud account and is accessible
                         only with your credentials. <br/>
                         In the context of AWS, S3 acts as a persistent data repository where
-                        all the data is stored in an S3 bucket. The name of the bucket 
+                        all the data is stored in an S3 bucket. The name of the bucket
                         provided here corresponds to the current cluster and is provided
                         simply as a reference.
                     </div>
             <li><a id='cloudman_log' href="${h.url_for(controller='root', action='service_log')}?service_name=CloudMan">Show CloudMan log</a></li>
             </li>
             <li>
-                <a class="action" id="master_is_exec_host" href="${h.url_for(controller='root', action='toggle_master_as_exec_host')}">&nbsp;</a> 
+                <a class="action" id="master_is_exec_host" href="${h.url_for(controller='root', action='toggle_master_as_exec_host')}">&nbsp;</a>
                 <span class="help_info">
                     <span class="help_link">What will this do?</span>
                     <div class="help_content" style="display: none">
-                        By default, the master instance running all the services is also configured to 
+                        By default, the master instance running all the services is also configured to
                         execute jobs. You may toggle this functionality here. Note that if job execution
                         on the master is disabled, at least one worker instance will be required to
                         run any jobs.
                     <span class="help_info">
                         <span class="help_link">What will this do?</span>
                         <div class="help_content" style="display: none">
-                            If you have made changes to any of the available 
+                            If you have made changes to any of the available
                             file systems and would like to persist the changes
                             across cluster invocations, click on the name of the
                             desired file system and the cluster configuration
-                            will be updated (all of the file systems are 
+                            will be updated (all of the file systems are
                             mounted on the system unter /mnt/[file system name]).
-                            Note that depending on the amount of changes made to 
+                            Note that depending on the amount of changes made to
                             the underlying file system, this process may take a
                             long time. Also note that the user data file system cannot
                             be persistent through this method (it makes no logical
                 <span class="help_info">
                     <span class="help_link">What will this do?</span>
                     <div class="help_content" style="display: none">
-                        Try to (re)start CloudMan service monitor thread, which is 
+                        Try to (re)start CloudMan service monitor thread, which is
                         responsible for monitoring the status of all of the other
                         services. This should only be used if the CloudMan user
                         interface becomes unresponsive or during debugging.
         <td class="fs-td-15pct">
         <!-- Only display controls when the file system is 'Available' -->
         <% if (status === "Available" || status === "Running") { %>
-            <a class="fs-remove icon-button" id="fs-<%= name %>-remove" 
+            <a class="fs-remove icon-button" id="fs-<%= name %>-remove"
                 href="</%text>${h.url_for(controller='root',action='manage_service')}<%text filter='trim'>?service_name=<%= name %>&to_be_started=False&is_filesystem=True"
                 title="Remove this file system"></a>
             <!-- // It only makes sense to persist DoT, snapshot-based file systems -->
         <td class="fs-td-spacer"></td>
     </%text>
     </script>
-    <script type="text/template" id="fs-confirmRemove-template">
-    <%text filter='trim'>
-        <div class="modal-dialog-header">Remove <%= name %> file system?</div>
-        <div class="modal-dialog-text">Removing this file system will first stop any
-            services that require this file system. Then, the file system will be
-            unmounted and the underlying device disconnected from this instance.</div>
-        <div class="modal-dialog-buttons">
-            <button id="confirm_fs_remove" class="modal-dialog-ok-button">Confirm</button>
-            <button class="modal-dialog-cancel-button">Cancel</button>
-        </div>
-    </%text>
-    </script>
     <script type='text/javascript' src="${h.url_for('/static/scripts/jquery.form.js')}"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
     <script type='text/javascript' src="${h.url_for('/static/scripts/jquery.tipsy.js')}"></script>