VPS Service in Domain Profile

The Domain Manager view that shows details of a domain (domain profile) must show if the application service (VPS in our scenario) is bound to the domain and it must allow a customer to run the application tools, such as:

• Create resources bound to the domain

• Remove all application resources linked to a domain

• Show a list of all application resources

Requirements

Expected Behavior

In meta description, you added the ui/plugins/DomainInfoPlugin.js file as the source that provides information about the application services in a domain profile presented in a tile. In this project, let us provide a menu to select an operation, such as Go to VPSes or Remove Servers. A click on the tile itself must run the custom VPS creation wizard.

Input, Output, and Data Processing

• The Domain Manager passes the mediator module to the view-plugin and expects from the latter the definition of the mediator.setServiceData(data) function.

• When calling the mediator.setServiceData(data), the Domain Manager provides the data argument that contains the presentation of the selected domain as defined by the PAHostedDomain type. In addition, it contains data.services - a list of all services assigned to the domain.

• The mediator.setServiceData(data) function must return a UI tile containing the data and menu to be displayed and used in the domain profile.

Continue Your Demo Project

Continue the demo project from the previous step.

When creating the script from scratch in the ui/plugins/DomainInfoPlugin.js file, follow these steps:

1. Create the script skeleton:

   define([
      "dojo/_base/declare",
      "dojo/promise/all",
      "aps/xhr",
      "aps/Memory",
      "aps/Tile",
      "aps/nav/ViewPlugin",
      "aps/Output",
      "aps/FieldSet"
   ], function (declare, all, xhr, Memory,  Tile, ViewPlugin, Output, FieldSet) {
   
      /* Define the function that removes all servers linked with a domain */
      function removeService(tile, domainApsId, vpses) {
   
      }
   
      return declare(ViewPlugin, {
         init: function (mediator) {
   
            /* Main function for the Domain Manager */
            mediator.setServiceData = function(data) {
   
               /* Initialize internal variables */
   
               /* Initialize the tile */
   
               /* Fill in the tile with the list of assigned servers and a menu */
   
               return tile;
            }; // End of mediator.setServiceData
   
         }     // End of Init
      });      // End of Declare
   });         // End of Define
   

2. Define a function that removes all application servers linked with a domain.

   function removeService(tile, domainApsId, vpses) {
      tile.set("isBusy", true);
   
      /* Remove all VPSes through the APS controller */
      all(vpses.data.map(function(vps) {
         return xhr('/aps/2/resources/' + vps.aps.id, {
            method: 'DELETE'
         });
      })).then(function () {
         tile.removeAll();
         tile.set({
            /* Enable the customer to create a new VPS */
            onClick: function() {
               aps.apsc.gotoView("http://aps-standard.org/samples/dns1p#vps-wizard",
                     null,
                     { domainApsId: domainApsId }   // You may send more parameters
               );      // In the destination view, they are available as aps.context.params
            },
            isBusy: false
         });
         tile.addChild(new Output({"value": "Click to create a VPS bound to the domain"}));
      });
   }
   

   Later, you will add a menu item in the tile that will call this function. The function requests the APS controller to remove all VPSes listed in one of the arguments. Once this is done, it clears the tile content and then provides a way to the create again a VPS bound to the domain identified by its APS ID - domainApsId.

   Note

   If you remove a domain using the Domain Manager, all VPSes linked to the domain will be removed automatically since they implement the PADomainService type that requires a link with a domain.

3. In the mediator.setServiceData(data) function, initialize internal variables. The Domain Manager must call the mediator.setServiceData(data) function that must be defined in this view-plugin. The view-plugin gets the data argument that represent the domain as defined in the PAHostedDomain type and a list of assigned services in its data.services structure.

   • Declare a cache that you will use for collecting a list of VPSes assigned to the selected domain:

     var vpses = new Memory({data: [], idProperty: "aps.id"});
     

   • Collect domain and VPS service data that might be needed in various functions:

     var domainData = {
         serviceName: "Virtual Server",  // Name of the service in Domain tile
         domainApsId: data.aps.id,
         domainName: data.name,
         status: "Not Assigned"
     };
     

4. Declare and initialize the tile.

   • Declare the tile and make it redirect users to the VPS creation view if they click on the tile:

     var tile = new Tile({
         title: domainData.serviceName,
         onClick: function() {
            aps.apsc.gotoView("http://aps-standard.org/samples/dns1p#vps-wizard",
               null,
               {
                  domainApsId: domainData.domainApsId
            });
         }
     });
     

   • Print out the invitation to click on the tile.

     tile.addChild(new Output({
       value: "Click to host a VPS on this domain"
     }));
     

   • For the sake of performance, close the function and return the initial tile if there is no services to process.

     if (!data.services || data.services.length === 0) {
         return tile;
     }
     

5. Fill in the tile with the list of assigned servers.

   • From the full list of all services hosted on the domain, collect the list of hosted VPSes:

     data.services.forEach(function (service) {
         if(service.aps.type === "http://aps-standard.org/samples/dns1p/vps/1.0") {
            vpses.data.push(service);
         }
     });
     

   • In the tile, add the name of each assigned VPS to the list of servers:

     if(vpses.data.length > 0) {
             domainData.status = "Assigned";
             var container = new FieldSet({title: "Assigned services: "});
             vpses.data.forEach( function(vps) {
                     container.addChild(new Output({
                             content: "VPS name: ${value}",
                             value: vps.name
                     }));
             });
             tile.addChild(container);
     
         // Context menu will be here
      }
     

6. In the tile, add the menu with two items. The former item will direct users to the list of VPSes and the latter one will allow users to remove the selected domain.

   tile.set("buttons", [
      {
         icon: "fa-times-circle",
         label: "Go to VPS list",
         onClick: function () {
            aps.apsc.gotoView("http://aps-standard.org/samples/dns1p#servers");
           }
       },
      {
         icon: "fa-times-circle",
         label: "Remove Servers",
         onClick: function () {
            removeService(tile, domainData.domainApsId, vpses);
           }
       }
   ]);
   

Conclusion

On completion of this step, you have the application integrated into the domain profile presented by the Domain Manager. The project file you have created is similar to the respective file in the sample package.

You have completed development of the APS application. Follow the next steps to test the application functionality on your test platform.

← VPS Service in Domain List

Deployment →