Commit 7e5348cd authored by miki yin's avatar miki yin
Browse files

render compute pop-up details

parent a1d769ee

js-apps/frontend/src/js/containers/sandbox/map-info.js

+28 −2
Original line number Diff line number Diff line
@@ -25,7 +25,10 @@ import { 
  FIELD_WIRELESS_TYPE,

  FIELD_META_DISPLAY_MAP_COLOR,

  FIELD_META_DISPLAY_MAP_ICON,

  getElemFieldVal

  getElemFieldVal,

  FIELD_DATA_NETWORK_NAME,

  FIELD_EDGE_COMPUTE_PROVIDER,

  FIELD_DN_LADN

} from '../../util/elem-utils';



import {
@@ -505,8 +508,31 @@ class MapInfo extends Component { 
  updateComputePopup(marker) {

    if (marker) {

      var latlng = marker.getLatLng();

      var table = this.getTable();

      var services = [];

      for (var i in table.entries) {

        if (table.entries[i].parent.val === marker.options.meep.compute.id) {

          services.push(table.entries[i].name.val);

        }

      }

      const networkName = getElemFieldVal(table.entries[marker.options.meep.compute.id], FIELD_DATA_NETWORK_NAME);

      const edgeProvider = getElemFieldVal(table.entries[marker.options.meep.compute.id], FIELD_EDGE_COMPUTE_PROVIDER);

      const ladn = getElemFieldVal(table.entries[marker.options.meep.compute.id], FIELD_DN_LADN);

      var msg = '<b>id: ' + marker.options.meep.compute.id + '</b><br>';

      msg += 'location: ' + this.getLocationStr(latlng);

      msg += 'location: ' + this.getLocationStr(latlng) + '<br>';

      if (networkName) {

        msg += 'network: ' + networkName  + '<br>';

      }

      if (edgeProvider) {

        msg += 'provider: ' + edgeProvider + '<br>';

      }

      if (ladn) {

        msg += 'LADN: ' + ladn + '<br>';

      }

      if (services) {

        var serviceString = services.join(', ');

        msg += 'services: ' + serviceString;

      }

      marker.getPopup().setContent(msg);

    }

  }

js-apps/frontend/src/js/util/elem-utils.js

+3 −0
Original line number Diff line number Diff line
@@ -20,6 +20,9 @@ export const FIELD_GEO_EOP_MODE = 'eopMode'; 
export const FIELD_GEO_VELOCITY = 'velocity';

export const FIELD_META_DISPLAY_MAP_COLOR = 'metaDisplayMapColor';

export const FIELD_META_DISPLAY_MAP_ICON = 'metaDisplayMapIcon';

export const FIELD_DATA_NETWORK_NAME = 'dataNetworkName';

export const FIELD_EDGE_COMPUTE_PROVIDER = 'edgeServiceProvider';

export const FIELD_DN_LADN = 'ladn';



export const getElemFieldVal = (elem, field) => {

  return (elem && elem[field]) ? elem[field].val : null;

js-apps/frontend/src/js/util/scenario-utils.js

+15 −1
Original line number Diff line number Diff line
@@ -24,7 +24,10 @@ import { 
  FIELD_META_DISPLAY_MAP_COLOR,

  FIELD_META_DISPLAY_MAP_ICON,

  createElem,

  setElemFieldVal

  setElemFieldVal,

  FIELD_DATA_NETWORK_NAME,

  FIELD_EDGE_COMPUTE_PROVIDER,

  FIELD_DN_LADN

} from './elem-utils';



import {
@@ -258,6 +261,17 @@ export function getElementFromScenario(scenario, elementId) { 
              setElemFieldVal(elem, FIELD_GEO_EOP_MODE, pl.geoData.eopMode || '');

              setElemFieldVal(elem, FIELD_GEO_VELOCITY, pl.geoData.velocity || '');

            }

            if (pl.dataNetwork) {

              if (pl.dataNetwork.dnn) {

                setElemFieldVal(elem, FIELD_DATA_NETWORK_NAME, pl.dataNetwork.dnn);

              }

              if (pl.dataNetwork.ecsp) {

                setElemFieldVal(elem, FIELD_EDGE_COMPUTE_PROVIDER, pl.dataNetwork.ecsp);

              }

              if (pl.dataNetwork.ladn) {

                setElemFieldVal(elem, FIELD_DN_LADN, pl.dataNetwork.ladn);

              }

            }

            if (pl.meta) {

              setElemFieldVal(elem, FIELD_META_DISPLAY_MAP_ICON, pl.meta[META_DISPLAY_MAP_ICON]);

            }