Presentation Logic

The presentation logic must help you initiate sync or async provisioning from the customer control pane and then monitor the provisioning flow.

Requirements

The following UI views must be modified to demonstrate the sync and async provisioning modes.

• The view that creates a VPS must allow the customers to select a virtualization technology, either to create a VM with its own OS kernel or a container that shares the OS kernel with other containers.

• For the async provisioning, it is important to show the current status of the VPSes.

Continue Your Demo Project

Continue your demo project from the previous step.

The following parts of the presentation logic are subjected to update.

Auxiliary Files

In the newvps.json auxiliary file, provide default values for the newly added VPS properties. Add the hardware.VM and retry properties as follows:

{
   "aps": {
      "type": "http://aps-standard.org/samples/async1p/vps/1.0"
   },
   "state": "Stopped",
   "platform": {
      "OS": {
         "name": "centos7"
      }
   },
   "hardware": {
      "CPU": {
         "number": 4
      },
      "diskspace": 32,
      "memory": 512,
      "VM": false
   },
   "name": "",
   "description": "",
   "retry": 0
}

This completes modification of the newvps.json file.

Server Creation

When creating a VPS using the ui/wizard/server-new-1.js script, subscribers must be able to select the VPS type.

In the server creation view, ui/wizard/server-new-1.js, add one more widget (check-box) that will allow customers to select the VPS type they need to have.

["aps/CheckBox", {
   id: this.genId("srvNew1_srvOsKernel"),
   description: "I will manage the OS Kernel",
   checked: at(aps.app.model.newVPS.hardware, "VM")
}]

This completes modification of the ui/wizard/server-new-1.js file. The file you have created is similar to the respective file inside the sample package.

Servers List

When viewing the list of VPSes using the ui/servers.js script, the subscribers must be able to see the VPS state (either Creating, or Stopped, or Running) and the VPS provisioning status (either In progress or Ready).

In the list of VPSes, add the field that shows if the VPSes are ready or still in the provisioning status.

{
   field: "retry",
   name: "Provisioning Status",
   renderCell: function (row, data) {
      return new Status({
         useIcon: true,
         status: data >= 5 ? "ready" : "inprogress",
         statusInfo: {
            ready: {
               label: "Ready",
               type: "success"
            },
            inprogress: {
               label: "In progress",
               type: "warning"
            }
         }
      });
   }
}

This completes modification of the ui/servers.js file. The file you have created is similar to the respective file in the sample package.

UI Improvements (Optional)

You can prevent a user from opening a server in the editor unless the respective server is provisioned. For this purpose, update the ui/servers.js file as follows:

1. Remove or comment the definition of the apsResourceViewId property:

   // apsResourceViewId: "server-edit",
   

2. Update the name column definition as follows:

   • Remove or comment the definition of the type property:

     // type: "resourceName",
     

   • Add the renderCell method:

     renderCell: function(row, data) {
         return new Output({
            content: "<a href='javascript:void(0)'>${value}</a>",
            value: data,
            onClick: function() {
               if(row.state != "Creating") aps.apsc.gotoView("server-edit", row.aps.id);
            }
         });
     }
     

Conclusion

This completes modification of the presentation logic. You can compare the added code with the contents in the respective files inside the sample package.

← Provisioning Logic

Deployment →