Commit cb11830a authored by miki's avatar miki
Browse files

optimize userapp redux state & compute popup ui

parent 18980b4c

js-apps/frontend/src/js/containers/app-container.js

+5 −2
Original line number Diff line number Diff line
@@ -965,9 +965,12 @@ class AppContainer extends Component { 
      return;

    }



    // Update App Instance table

    // Update App Instance table only if data is different 

    var appInstances = data ? data : [];

    const isArrayEqual = (x, y) => _.isEmpty(_.xorWith(x, y, _.isEqual));

    if (!isArrayEqual(this.props.appInstanceTable,appInstances)) {

      this.props.changeAppInstanceTable(appInstances);

    }



    // Update Edge App states

    this.refreshEdgeApps(appInstances);

js-apps/frontend/src/js/containers/sandbox/app-instance-info.js

+1 −1
Original line number Diff line number Diff line
@@ -130,7 +130,7 @@ class AppInstanceInfo extends Component { 
    let edgeApp = this.props.edgeApp;

    let isMec011 = edgeApp.pseudoName.includes('011');

    let disabled = (isMec011 || edgeApp.enableInProgressCount !== -1 || edgeApp.disableInProgressCount !== -1) ? true : false;

    let mepInfoStr = 'Running on ' + edgeApp.mepName;

    let mepInfoStr = edgeApp.name + ' running on ' + edgeApp.mepName;

    let appInfoStr = isMec011 ? 'ID: not applicable' : 'ID: ' + edgeApp.id;



    return (

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

+23 −30
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ import L from 'leaflet'; 
import 'mapbox-gl';

import 'mapbox-gl-leaflet';

import tinycolor from 'tinycolor2';

import _ from 'lodash';



import {

  updateObject
@@ -25,10 +26,7 @@ import { 
  FIELD_WIRELESS_TYPE,

  FIELD_META_DISPLAY_MAP_COLOR,

  FIELD_META_DISPLAY_MAP_ICON,

  getElemFieldVal,

  FIELD_DATA_NETWORK_NAME,

  FIELD_EDGE_COMPUTE_PROVIDER,

  FIELD_DN_LADN

  getElemFieldVal

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



import {
@@ -501,40 +499,33 @@ class MapInfo extends Component { 
    }

  }







  // UE Marker Event Handler

  updateComputePopup(marker) {

    var table = this.getTable();

    if (marker && table && table.entries) {

      var latlng = marker.getLatLng();

      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);

    var appInstanceTable = this.props.appInstanceTable;

    var appInstances = [];

    for (var i = 0; i < appInstanceTable.length ; i++) {

      if (appInstanceTable[i].mepName === marker.options.meep.compute.id) {

        appInstances.push(appInstanceTable[i]);

      }

    }

      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 sortedAppInstances = _.sortBy(appInstances, ['name']);

    if (marker) {

      var latlng = marker.getLatLng();

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

      if (edgeProvider) {

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

      }

      if (networkName) {

        msg += 'data-network: ' + networkName;

        if (ladn) {

          msg += ' (LADN)';

        }

        msg += '<br>';

      }

      if (services) {

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

        msg += 'running-services: ' + serviceString + '<br>';

      msg += 'applications: <br>';

      if (appInstances) {

        sortedAppInstances.forEach(elem => {

          msg += '<li>' + elem.name + ' ' + '(id: ' + elem.id.substring(0,6) + '...' + elem.id.substring(elem.id.length - 6,elem.id.length + 1) + ')'   + '<br>';

        });

      }

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

      marker.getPopup().setContent(msg);

    }

    marker.getPopup().setContent(msg);

  }





  setUeMarker(ue) {

    var latlng = L.latLng(L.GeoJSON.coordsToLatLng(ue.location.coordinates));

    var pathLatLngs = ue.path ? L.GeoJSON.coordsToLatLngs(ue.path.coordinates) : null;
@@ -858,7 +849,9 @@ const mapStateToProps = state => { 
    mapCfg: state.ui.mapCfg,

    // SBOX

    map: state.sbox.map,

    table: state.sbox.table

    table: state.sbox.table,

    // EDGE APPS

    appInstanceTable: state.sbox.appInstanceTable.data

  };

};