User List

In this step, you will develop a view-plugin source to present the application service in the list of users.

Presentation Modes

The system User Manager allows selecting one of presentation formats, either a set of tiles or a grid. Therefore, the application view-plugin must return the service presentation also in two different formats. In this project, we expect the following:

• In the grid format, the view-plugin will show a gauge presenting the total number of VPSes assigned to each user and the number of VPSes in the Stopped state:

  

• In the tile format, the view-plugin will show the same data using the tile widgets:

  

Input, Output, and Requirements

When showing services assigned to a user, the User Manager calls certain functions of each view-plugin module. Like other views, a view-plugin may define the init, onContext, onShow, and onHide methods.

• The User Manager passes the mediator module to the view-plugin and expects from the latter the definition of the following functions:
  • mediator.getServicesList() - returns the title for the application service assigned to users. The title is assigned to the grid column that presents the application service.
  • mediator.getState(users) - returns a list mapping APS ID of each user from the users array to an array of the state objects.
• A state object contains the following child objects that present an application service assigned to a user:
  • state.status - a string that indicates if the application service is assigned to the user.
  • state.title - the title of the application service displayed in a tile.
  • state.widget - a UI container that displays in a tile the service and its resources assigned to the user.
  • state.gridWidget - an output widget to displays in the User Manager grid the service and its resources assigned to the user.

Continue Your Demo Project

This section continues the demo project from the previous step.

In meta definition, you specified the ui/plugins/vps-user-list-plugin.js file as the source of the view-plugin that provides information about the application services in the list of users.

First, create the ui/plugins/ folder and then creating the script in it following these steps:

1. Create the script skeleton:

   define([
       "aps/nav/ViewPlugin",
       "dojo/_base/declare",
       "dojo/Deferred",
       "dojox/mvc/getStateful",
       "aps/FieldSet",
       "aps/Container",
       "aps/Output",
       "aps/Gauge"
   ], function(ViewPlugin, declare, Deferred, getStateful, FieldSet, Container, Output, Gauge) {
   
      return declare(ViewPlugin, {
         init: function(mediator) {
   
            /* Define the function that returns the title of the service for the Grid */
            mediator.getServicesList = function() {
                return { "title": "VPSes" };
            };
   
            /* The main function that defines UI elements presenting
               the services assigned to users */
   
            mediator.getState = function(users) {
   
              /* Return a list of user APS IDs mapped to an array of <state> objects */
   
               return userStates;
            };    // End of getState method
         }        // End of Init
      });         // End of Declare
   });
   

2. In the mediator.getState function, create a cycle processing each user in the users array. Use a typical approach provided by the standard JavaScript method reduce:

   var userStates =  users.reduce(function(userServiceMap, user) {
   
      /* Process each user and add the result to userServiceMap */
   
         /* Initialize the state object and resource counters */
   
         /* Figure out service resources assigned to each user */
   
         /* Define the state.widget */
   
         /* Define the state.gridWidget */
   
      /* Return a list of user APS IDs mapped to an array of <state> objects */
      return userServiceMap;
   }, {}); // {} is the initial value of the userServiceMap set
   

   The reduce(callback,{}) method calls the callback function in a cycle to process each user from the users array. The callback function defines resources assigned to the user. It collects the resource usage for the user in the userServiceMap set and returns it on each cycle. The initial value of userServiceMap in the first call is {} as defined by the second argument in the reduce call.

   In the following steps, define the callback function.

3. In the reduce callback function, initialize service parameters for the specified user:

   var state = {};
   state.status = "Not Assigned";    // Initially, suppose so
   state.title = "VPSes";            // Title in a tile
   var vpses = 0,                    // Number of VPSes assigned to the user
      stopped = 0,                   // Number of stopped VPSes
      running = 0;                   // Number of running VPSes
   

4. In the reduce callback function, figure out service resources assigned to the specified user. The user input object contains all services from all applications assigned to a certain user. Select only resources based on the VPS type. This type defined in vpses.php contains the state property that can be “Stopped” or “Running”.

   user.services.forEach(function(service) {
     if (service.aps.type === "http://aps-standard.org/samples/suwizard1p/vps/1.0") {
         state.status = "Assigned";
         vpses += 1;
         if (service.state === "Stopped") {
            stopped += 1;
         }
         else running += 1;
     }
   });
   

5. In the reduce callback function, define the UI container presenting service resources and assign the container to the state.widget object. This UI object will display service parameters for each user in a tile defined by the User Manager. In the container, add a child output widget presenting the two parameters initialized earlier and calculated on the previous steps: the number of stopped VPSes, and the number of running VPSes:

   if(state.status === "Assigned") {
     if (!state.widget) {
       var vpsOutput = new Container();
       vpsOutput.addChild(new Output({
         value: vpses,
         running: running,
         stopped: stopped,
         content: "Assigned: ${value} <br/> Running: ${running} <br/> Stopped: ${stopped}"
       }));
       state.widget = vpsOutput;
     }
   
      /* Continue with definition of the state.gridWidget object in the next step */
   
   }
   

6. Similarly, in the if(state.status...){} clause, define a gauge presenting service resources in the grid and assign the gauge to the state.gridWidget object. Add the following code in the end of the if(state.status...){} clause:

   if(state.status === "Assigned") {   // Start of if(state.status...)
   
      /* Definition of the state.widget object is done at the previous step */
   
      /* Continue with definition of the state.gridWidget object */
      if(!state.gridWidget) {
         var vpsGridOutput = new Gauge({
             legend : "${value} of ${maximum} are stopped",
             minimum : 0,
             maximum : vpses,
             value: stopped
         });
         state.gridWidget = vpsGridOutput;
      }  // End of if(!state.gridWidget)
   
   }  // End of if(state.status...)
   

7. After all elements of the state object are defined, add the latter to the userServiceMap collection:

   userServiceMap[user.aps.id] = [state]; // Generally - [state-1, state-2, ... etc.]
   

   Generally, in other applications a user may have more than one type of services assigned, for example, VPSes, backup, and virus protection. That is why the user APS ID is mapped to an array of state objects.

Conclusion

You have completed the development of the view-plugin source code in the ui/plugins/vps-user-list-plugin.js file.

The project file you have created is similar to the respective file in the sample package.

← New Users

User Profile →