How to Show Operation Progress in a Windows Azure Pack Management Portal Extension

Applies To: Windows Azure Pack

If a user-initiated operation will take a while to process, it is recommended you use ProgressOperation in order not to block the management portal user interface, but still allow the user to see that the operation is ongoing. A ProgressOperation has several options to allow you to keep the user informed about the operation. Each of these options may be used independently of each other.

Progress operations can be determinate. You can tell how complete the operation is, for example, the operation can report the percent complete value. Alternatively, they can be indeterminate. You know that the operation is or is not complete, but not how close it is to either state.

ProgressOperation has an indeterminate property that hints to the user that there is, or is not, going to be reported progress towards completion.

An operation may be made up of a sequence of individual steps, each of which may succeed or fail. When failure occurs any further progress in the operation is stopped.When operations have steps, a Details button appears:

Clicking it reveals the individual steps, with individual states such as success, fail, or warning: See the addStep / removeStep methods in ProgressOperation for details.

An example of a progress operation is contained within the showing a Wizard sample. The wizard’s onComplete function sets up a progress operation to show when the server operation completes.

To Show Progress for an Operation within a Wizard

1. Use the following code to show progress within a Wizard.

   cdm.stepWizard({
       extension: "DomainTenantExtension",
       steps: [{
         template: "createStep1",
         data: data,
         // Called when the step is first created
         onStepCreated: function () {
           wizard = this;
         },
         // Called each time the step is displayed
         onStepActivate: step1Activate,
         // Called before the wizard moves to the next step
         onNextStep: function () {
           return Shell.UI.Validation.validateContainer("#dm-create-step1");
         }
       }],
       // Called when the user clicks the "Finish" button on the last step
       onComplete: function () {
         var newPassword, newResellerPortalUrl;
         newPassword = $("#dm-password").val();
         newResellerPortalUrl = registerReseller ? $("#dm-portalUrl").val() : null;
         // Call whatever backend function we need to. In our example, it returns a promise
         promise = callback(newPassword, newResellerPortalUrl);
   
         // Create a new Progress Operation object
         var progressOperation = new Shell.UI.ProgressOperation(
           // Title of operation
           "Registering endpoint...",
           // Initial status. null = default
           null,
           // Is indeterministic? (Does it NOT provide a % complete)
           true);
   
         // This adds the progress operation we set up earlier to the visible list of PrOp's
         Shell.UI.ProgressOperations.add(progressOperation);
   
         promise
           .done(function() {
              // When the operation succeeds, complete the progress operation
              progressOperation.complete(
                "Successfully registered the endpoint.",
                Shell.UI.InteractionSeverity.information);
              })
           .fail(function() {
              // When the operation fails, complete the progress operation
              progressOperation.complete(
                "Failed to register the endpoint.",
                Shell.UI.InteractionSeverity.error,
                Shell.UI.InteractionBehavior.ok);
           });
       }
     },
     {
       // Other supported sized include large, medium & small
       size: "mediumplus" 
     });
   

See Also

Performing Common Tasks in a Windows Azure Pack Management Portal Extension