Set Up Embedded Map in Your Web Portal

The system supports integration with your web portals to enable end users to access NetworkBrain maps and paths from your portal.

Follow the steps below to properly set up NetworkBrain Embedded Map in your web portal.

Tip: It is highly recommended to set the size of the iframe as 1200 x 800 pixels (width x height) in your portal page head.

Workflow

The pseudo code below describes the high-level workflow to embed a NetworkBrain map into your portal.

1. Modify the web.config file of your NetBrain Web Server to allow the iframe to render NetBrain web page.
2. Reference the Web Server script library in the portal. 
3. Initialize NetBrain instance.
4. Construct the drop-down menu for Tenant.
5. Construct the drop-down menu for Domain.
6. Construct the drop-down menu for Site/Device Group/Public Map File.
7. Browse and open a specific map.
8. Construct the text box and drop-down menu for path options.
9. Calculate a path and view the path result.

Deployment Process

1.Modify the web.config file of your NetworkBrain Web Server to enable iframe.

▪Append the Content-Security-Policy configuration to the bottom of the file. Replace the highlighted value with the actual domain name of your web portal.

 

Sample Web Config File

<..\NetBrain\Web Server\nb_publish_client\Web.config>

<httpProtocol>
  <customHeaders>
    <remove name="X-Frame-Options"/>
    <remove name="X-Content-Type-Options"/>
    <remove name="X-XSS-Protection"/>
    <remove name="Strict-Transport-Security"/>
 
    <add name="X-Frame-Options" value="SAMEORIGIN"/>
    <add name="X-Content-Type-Options" value="nosniff"/>
    <add name="X-XSS-Protection" value="1; mode=block"/>
    <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains; preload"/>
    <add name="Content-Security-Policy" value="frame-ancestors 'self' http://ite.netbraintech.com"/>
  </customHeaders>

Tip: To learn more about the HTTP Content-Security-Policy response header, click here.

2.Reference the script library of your NetworkBrain Web Server in the portal. This script library provides an interface to call NetworkBrain APIs in the subsequent deployment.
<script src="http(s)://<your NetBrain Web Server address>/js/nb.embedmap.netbraintools.min.js"></script> 

3.Initialize NetBrain instance.

var netbrain, map;
 
var options = {
    netbrainUrl: 'http(s)://your NetBrain Web Server address', //required
    ssoAlias: 'sso',   //required
    virtualDir: '/'   //Optional. The path of the virtual directory where NetBrain is deployed.
};
 
NetbrainTools.createNetbrainInstance(options)
    .then(function(netbrainInstance) {
        netbrain = netbrainInstance;
    })
    .then(initBinds)
    .catch(logError);

Note: Before proceeding to initialize NetBrain instance, please ensure netbrainInstance is accessible. netbrainInstance contains all NetworkBrain APIs for Embedded Map deployment. Failing to fetch netbrainInstance will cause error prompt indicating ‘create netbrain instance failed’.

 

Sample <netbrainInstance>

{
    api: object
    createMap: function,
    relogin: function
}

4.Construct the drop-down list for the Tenant field.

netbrain.api
    .getTenants({})
    .then(function(result) {
        var tenants = result.tenants;
        console.log(tenants); // render your UI list here
    });

Following output example is shown here for reference purposes:

{
  "tenants": [
    {
      "tenantId": "6b2ac0ce-5817-831f-4d79-acfc62aa2920",
      "tenantName": "xxf_tenant"
    },
    {
      "tenantId": "e58f795c-8262-126f-fa04-90210bfcbe6c",
      "tenantName": "xxf_sdn_tenant"
    },
    {
      "tenantId": "fc29f127-35af-20cc-797e-0caec793cc26",
      "tenantName": "rwang_tenant"
    },
    {
      "tenantId": "06b63b6c-698e-f5fb-c249-082036df95e1",
      "tenantName": "MIMIC"
    },
    {
      "tenantId": "42a296d4-d8ca-5a6c-5e0c-ecdc393f0ff7",
      "tenantName": "gcui_test"
    }
  ],
  "statusCode": 790200,
  "statusDescription": "Success."
}

Tip: For more details about how to leverage NetworkBrain API to retrieve the tenant list, see Get all accessible tenants.

5.Construct the drop-down list for the Domain filed.

Note: Make sure to replace the highlighted values with the desired tenantId value.

netbrain.api
    .getDomains({
        tenantId: '6b2ac0ce-5817-831f-4d79-acfc62aa2920'
    })
    .then(function(result) {
        var Domains = result.domains;
        console.log(Domains); // render your UI list here
    });

Following output example is shown here for reference purposes:

{
  "domains": [
    {
      "domainId": "debfbef3-fa56-45f0-82b1-a90e20154454",
      "domainName": "xxf_domain"
    },
    {
      "domainId": "10c05674-0b3b-4b4e-b672-87ae32eace98",
      "domainName": "normaluser"
    },
    {
      "domainId": "b9e6e637-eab0-4024-905f-3906756f2fb9",
      "domainName": "ertret"
    }
  ],
  "statusCode": 790200,
  "statusDescription": "Success."
}

Tip: For more details about how to leverage NetworkBrain API to retrieve the domain list from one of your NetBrain tenants, see Get all accessible domains of a tenant.

6.Construct the Site/Device Group/Public Map File drop-down list.

Note: Site Map/Device Group Map/Public Map are hard-coded categories. Following APIs are designed for the purposes of rendering map list when corresponding map type is selected.

 

Site drop-down list

netbrain.api
    .getSites({
        tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
        domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480',
        sitePath: 'My Network' //referring to Site Map
    })
    .then(function(result) {
        var sites = result.sites;
        console.log(sites);
    });

Following output example is shown here for reference purposes:

{
  "sites": [
    {
      "siteId": "13e91c22-ffc8-4a31-82ad-786ae976c31e",
      "sitePath": "My Network/USXACanada",
      "isContainer": true,
      "children": [
        "e2eaad3f-b829-4715-87c0-72eb1f038274",
        "718a69b0-448b-4645-b0de-466adf88423d"
      ],
      "siteType": 1
    },
    {
      "siteId": "97a22e99-a042-4366-8ecc-d69bd32adc42",
      "sitePath": "My Network/USXACanada/United States of America/MASSACHUSETTS/CANTON/Canton_NB1",
      "isContainer": false,
      "siteType": 2
    },
    {
      "siteId": "8ea30269-b348-4ca4-86fc-79557881a6f3",
      "sitePath": "My Network/USXACanada/United States of America/MASSACHUSETTS/CANTON/Canton_NB2",
      "isContainer": false,
      "siteType": 2
    },
    // ...
    {
      "siteId": "732e8ab6-6b69-417d-ad03-2cc447100166",
      "sitePath": "My Network",
      "isContainer": true,
      "children": [
        "13e91c22-ffc8-4a31-82ad-786ae976c31e",
        "a3a9d329-fcdd-49d9-9669-9ec205d587c2",
        "74a72061-0412-428d-8448-6cbd3f9c70b1",
        "d2628098-be31-49b5-befc-167e9f1e9d88"
      ],
      "siteType": 0
    }
  ],
  "statusCode": 790200,
  "statusDescription": "Success."
}
Device Group drop-down list

Note: Make sure to replace the highlighted values with your specific request parameters.

netbrain.api
    .getDeviceGroups({
        tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
        domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480'
    })
    .then(function(result) {
        var deviceGroups = result.deviceGroups;
        console.log(deviceGroups);
    });

Following output example is shown here for reference purposes:

{
  "deviceGroups": [
    {
    "id": "8196020b-b223-4bc8-8178-ac4da95b1695",
    "name": "#BGP 64512",
    "type": 2
  },
  {
    "id": "fbd027f2-24c9-4616-a6bd-62b7613b07e1",
    "name": "#BGP 65000",
    "type": 2
  },
  {
    "id": "f84008dd-a406-4b30-b71a-18e66b4a7d68",
    "name": "#BGP 65012",
    "type": 2
  }
  ],
  "statusCode": 790200,
  "statusDescription": "Success."
}
Public Map File drop-down list

Note: Make sure to replace the highlighted values with your specific request parameters.

netbrain.api
    .getPublicFiles({
        tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
        domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480',
        folderId: '',
        fileTypes: [ 0, 11 ]
    })
    .then(function(result) {
        var files = result.Items;
        console.log(files);
    });

Following output example is shown here for reference purposes:

{
    "items":[
        {   
            "originalId":"267752c5-c01b-8ee3-d5aa-8fec88da8927",
            "id":"28337b50-25a0-40df-a0c8-20b79dce3f42",
            "name":"Public/test",
            "type":0
        },
        {
            "originalId":"267752c5-c01b-8ee3-d5aa-8fec88da8927",
            "id":"ff4e2847-2692-4a55-932c-b58978baaf2a",
            "name":"Public/Map3",
            "type":11
        },
        {
            "originalId":"7a249ae9-8dab-435d-88fa-5c698356c069",
            "id":"4a6cd1a3-558f-4288-acf3-e13825ea28af",
            "name":"Public/test/Map1cgc",
            "type":11
        }
    ],
    "statusCode":790200,
    "statusDescription":"Success."
}

Tip: For more details on the corresponding APIs, refer to Get Site, Get Device Group or Get File respectively.

7.Browse a specific map.

1)Create a map instance.

Note: mapContainer is a container div used to render returned map instance.

netbrain.createMap($('#mapContainer').get(0) ).then(function(mapInstance) {
    map = mapInstance;
});

2)Verify mapInstance has been generated.

if (mapInstance) {
    openMap(param);
} else {
    netbrainInstance.createMap(mapOption.container).then(function (instance) {
        mapInstance = instance;
        openMap(param);
    });
}

3)Open a specific map.

Note: Make sure to replace the highlighted values with your specific request parameters.

Open a site map

map.open({
    siteId: siteId,
    tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
    domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480'
}).then(function () {
    // ...
});
Open a device group map

map.open({
    deviceGroupId: deviceGroupId,//referring to the output ‘id’ in Step 6
    tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
    domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480'
}).then(function () {
    // ...
});
Open a map in the Public file

map.open({
    mapId: mapId,// referring to the output ‘originalID’ in Step 6
    tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
    domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480'
}).then(function () {
    // ...
});

4)Refresh a map.

map.refresh();

8.Construct the text box and drop-down menu for path options. For the API details of Path Analysis and Gateway, see Calculate a path and Get the gateway of a device.

9.Calculate a path and view the result.

1)Calculate a path.

map.calculatePath({
    tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c', //required
    domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480', //required
    sourceIP: '10.10.3.253', //required
    sourcePort: 0,
    sourceGwIP: '10.10.3.253', 
    sourceGwDev: 'GW2Lab', 
    sourceGwIntf: 'GigabitEthernet0/0.10',
    destIP: '172.24.32.225', //required
    destPort: 0,
    pathAnalysisSet: 1,
    protocol: 4,
    isLive: 1
}).then(function (result) {
    var taskId =result.taskId
    // ...
});

2)View the path result.

netbrain.api.getPathResult({
    tenantId: 'e58f795c-8262-126f-fa04-90210bfcbe6c',
    domainId: 'b3752773-f37f-4a3e-b547-062d2c0a0480',
    taskId: 'b69c0af1-73ce-49e7-8cc7-59ce8ce5eb37'
}).then(function (result) {
    var hoplist =result.hopList
    // ...
});

Following output example is shown here for reference purposes:

  
result example:
{
  "hopList": [
    {
      "hopId": "b1612e9f-491f-4edf-9e40-156052b0f708",
      "srcDeviceName": "GW2Lab",
      "inboundInterface": "GigabitEthernet0/1",
      "mediaName": "172.24.30.0/30",
      "dstDeviceName": "NY_Router",
      "outboundInterface": "FastEthernet0/0",
      "nextHopIdList": [
        "97f40ee6-dee0-4b1f-a723-fec130292aa0"
      ]
    },
    {
      "hopId": "97f40ee6-dee0-4b1f-a723-fec130292aa0",
      "srcDeviceName": "NY_Router",
      "inboundInterface": "Vlan100",
      "mediaName": "172.24.30.4/30",
      "dstDeviceName": "NY_POPP",
      "outboundInterface": "Ethernet0/1",
      "nextHopIdList": [
        "6846b938-a666-412c-99b8-9e400a80b6b7"
      ]
    },
    {
      "hopId": "6846b938-a666-412c-99b8-9e400a80b6b7",
      "srcDeviceName": "NY_POPP",
      "inboundInterface": "Ethernet0/0",
      "mediaName": "172.24.31.64/26",
      "dstDeviceName": "NY-core-bak",
      "outboundInterface": "FastEthernet0/0",
      "nextHopIdList": [
        "63d88b57-201e-41e3-85f3-a5965c450d52"
      ]
    },
    {
      "hopId": "63d88b57-201e-41e3-85f3-a5965c450d52",
      "srcDeviceName": "NY-core-bak",
      "inboundInterface": "FastEthernet0/1.1",
      "mediaName": "172.24.31.192/26",
      "dstDeviceName": "BJ*POP",
      "outboundInterface": "FastEthernet0/1",
      "nextHopIdList": []
    }
  ],
  "statusCode": 790200,
  "statusDescription": "Success."
}

Tip: For more details about the path APIs, refer to the following API documentations:

▪Calculate a path

▪Get the gateway of a device

▪Get the status of a path