Presentation Logic

The application UI must provide some tools for customers to manage DNS properties. In addition, it must plug its view-plugins into the platform built-in Domain Manager UI.

Requirements to UI

In accordance with the Scenario, you should update the application UI for the following purposes:

• List of servers - presents a list of VPSes with DNS properties
• VPS creation - creates a VPS with DNS properties
• VPS as a service hosted on a domain - presents the VPS service in the list of domains
• Start VPS Creation - starts creation of a VPS from a domain profile

Since the vps APS type is changed, start with updating the JSON representation of the default VPS properties and the list of servers.

Continue Your Demo Project

Continue the demo project from the previous step.

Auxiliary File

The only auxiliary file you need to update is ui/wizard/newvps.json. This file brings default values for a newly created VPS.

Add the domainName and cnameRecord properties defined in the vps APS type directly and the domain link inherited from the domain service type:

{ ...
   "domain": {
      "aps": {
         "id": ""
      }
   },
   "domainName": "",
   "cnameRecord": false
}

List of Servers

Make the list of servers present the assigned domains and show if the CNAME is used to alias the VPS name to the DNS A record in this domain. For this purpose, update the ui/servers.js file as follows.

1. In the grid presenting the list of servers, add the Domain column.

   • Locate the columns definition in the return statement that creates a set of widgets.

   • Insert the new column in the second position, just below the column presenting the VPS name:

     { field: "domainName",   name: "Domain" },
     

2. Add the CNAME column. This column must display an icon indicating if the CNAME is created for the VPS or not.

   • Insert the new column in the third position, just below the new Domain column.

   • Using the renderCell method and the VPS cnameRecord property, show one of two icon types, either default (CNAME does not exist) or success (CNAME exists):

     { field: "cnameRecord",  name: "CNAME", type: "icon",
         renderCell: function(row, cnameRecord) {
            return new Status({
               status: cnameRecord ? "yes" : "no",
               useIcon: true,
               statusInfo: {
                  "no": {
                     "label": "",
                     "type": "default"
                  },
                  "yes": {
                     "label": "",
                     "type": "success"
                  }
               }
            });
         }
     },
     

3. Since the renderCell method requires the aps/Status object, add the respective module to the list of defined modules and declare it in the main callback function.

   • In the top level define function, add the “aps/Status” string to the list of required modules:

     define([
              "dojo/_base/declare",
              "dojo/when",
              "aps/View",
              "aps/ResourceStore",
              "aps/Status",
              "./displayError"
         ],
     

   • Add the Status argument that supplies the aps/Status module to the main callback function:

     function (declare, when, View, Store, Status, displayError) {
     

Conclusion

You have started designing and developing the presentation logic for the demo application. In accordance with the scenario, the new UI view allows a customer to see the domains bound to VPSes and verify if a CNAME record is created for a certain VPS.

The files you have updated are similar to the respective files in the the sample package.

← Provisioning Logic

VPS Creation →