Commit af028099 authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

state cleanup + dashboard list persistence in MON tab + dashboard list... 

state cleanup + dashboard list persistence in MON tab + dashboard list synchronisation with exec tab (<exec> & <vars> in URL)
parent a45dee9a

js-apps/meep-frontend/src/js/components/helper-components/cancel-apply-pair.js

+1 −1
Original line number Diff line number Diff line
@@ -26,7 +26,7 @@ const buttonStyles = { 
const CancelApplyPair = props => {

  return (

    <Grid style={{ marginTop: 10 }}>

      <GridInner align={'right'}>

      <GridInner align={'left'}>

        <GridCell span={12}>

          <Button

            outlined

js-apps/meep-frontend/src/js/containers/cfg/cfg-network-element-container.js

+4 −4
Original line number Diff line number Diff line
@@ -924,8 +924,8 @@ const getParentTypes = type => { 
};



const buttonStyles = {

  marginRight: 5,

  width: 100

  marginRight: 10,

  marginBottom: 5

};



const ElementCfgButtons = ({
@@ -1007,7 +1007,7 @@ const HeaderGroup = ({ element, onTypeChange, onUpdate, typeDisabled, parentDisa 


  return (

    <>

      <Grid style={{ marginTop: 10 }}>

      <Grid style={{ marginTop: 20 }}>

        {type !== 'SCENARIO' && (

          <IDSelect

            label="Element Type"
@@ -1179,7 +1179,7 @@ const styles = { 
    height: '100%'

  },

  block: {

    marginBottom: 20

    marginBottom: 10

  },

  field: {

    marginBottom: 10

js-apps/meep-frontend/src/js/containers/cfg/cfg-page-container.js

+7 −7
Original line number Diff line number Diff line
@@ -45,12 +45,7 @@ import { 
} from '../../state/cfg';



import {

  uiChangeCurrentDialog,

  IDC_DIALOG_OPEN_SCENARIO,

  IDC_DIALOG_NEW_SCENARIO,

  IDC_DIALOG_SAVE_SCENARIO,

  IDC_DIALOG_DELETE_SCENARIO,

  IDC_DIALOG_EXPORT_SCENARIO

  uiChangeCurrentDialog

} from '../../state/ui';



import {
@@ -59,7 +54,12 @@ import { 
  CFG_STATE_NEW,

  CFG_STATE_IDLE,

  PAGE_CONFIGURE,

  ELEMENT_TYPE_SCENARIO

  ELEMENT_TYPE_SCENARIO,

  IDC_DIALOG_OPEN_SCENARIO,

  IDC_DIALOG_NEW_SCENARIO,

  IDC_DIALOG_SAVE_SCENARIO,

  IDC_DIALOG_DELETE_SCENARIO,

  IDC_DIALOG_EXPORT_SCENARIO

} from '../../meep-constants';



import {

js-apps/meep-frontend/src/js/containers/exec/dashboard-container.js

+69 −33
Original line number Diff line number Diff line
@@ -41,10 +41,8 @@ import { 


import {

  TYPE_EXEC,

  DASHBOARD_VIEWS_LIST,

  VIEW_NAME_NONE,

  METRICS_VIEW,

  VIS_VIEW

  NET_TOPOLOGY_VIEW

} from '../../meep-constants';



const greyColor = 'grey';
@@ -68,6 +66,9 @@ const styles = { 
  }

};



const showInExecStr = '<exec>';

const passVarsStr = '<vars>';



const ConfigurationView = props => {

  return (

    <>
@@ -137,28 +138,55 @@ const ViewForName = ({ 
  scenarioName,

  selectedSource,

  selectedDest,

  viewName

  viewName,

  dashboardOptions

}) => {



  // Handle Network Topology view

  if (viewName === NET_TOPOLOGY_VIEW) {

    return (

      <div style={{ height: '80vh' }}>

        <IDCVis

          type={TYPE_EXEC}

          width='100%'

          height='100%'

          onEditElement={() => { }}

        />

      </div>

    );

  }



  // Get URL from Monitoring page dashboard options

  var selectedUrl = null;

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

    var dashboard = dashboardOptions[i];

    if (dashboard.label === viewName) {

      selectedUrl = dashboard.value;

      selectedUrl = selectedUrl.replace(showInExecStr, '');

      break;

    }

  }



  if (selectedUrl) {



    // Add variables if requested

    if (selectedUrl.indexOf(passVarsStr) !== -1) {

      selectedUrl = selectedUrl.replace(passVarsStr, '');

      

      // Remove '-' from scenario name

      var scenario = scenarioName.replace(/-/g, '');



  const dashboard = 'http://' + location.hostname + ':30009/d/100/metrics-dashboard?orgId=1';

  const datasource = '&var-datasource=meep-influxdb';

  const database = '&var-database=' + scenario;

  const refreshInterval = '&refresh=1s';

  const srcApp = '&var-src=' + selectedSource;

  const destApp = '&var-dest=' + selectedDest;

  const viewMode = '&kiosk';

  const theme = '&theme=light';

  const dashboardUrl = dashboard + datasource + database + refreshInterval + srcApp + destApp + viewMode + theme;

  

  switch (viewName) {

  case METRICS_VIEW:

      var url = new URL(selectedUrl);

      url.searchParams.append('var-database', scenario);

      url.searchParams.append('var-src', selectedSource);

      url.searchParams.append('var-dest', selectedDest);

      selectedUrl = url.href + '&kiosk';

    }



    return (

      <div style={{ height: '80vh' }}>

        <Iframe

          url={dashboardUrl}

          url={selectedUrl}

          id="myId"

          display="initial"

          position="relative"
@@ -168,20 +196,9 @@ const ViewForName = ({ 
        />

      </div>

    );

  case VIS_VIEW:

    return (

      <div style={{ height: '80vh' }}>

        <IDCVis

          type={TYPE_EXEC}

          width='100%'

          height='100%'

          onEditElement={() => { }}

        />

      </div>

    );

  default:

    return null;

  }



  return null;

};



const DashboardConfiguration = props => {
@@ -258,6 +275,15 @@ class DashboardContainer extends Component { 
    this.props.onShowAppsChanged(checked);

  }



  populateDashboardList(dashboardViewsList, dashboardOptions) {

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

      var dashboard = dashboardOptions[i];

      if ((dashboard.label !== '') && (dashboard.value !== '') && (dashboard.value.indexOf(showInExecStr) !== -1)) {

        dashboardViewsList.push(dashboard.label);

      }

    }

  }



  render() {

    this.keyForSvg++;

    const root = this.getRoot();
@@ -308,6 +334,7 @@ class DashboardContainer extends Component { 
        selectedSource={selectedSource}

        selectedDest={selectedDest}

        viewName={view1Name}

        dashboardOptions={this.props.dashboardOptions}

      />

    );
@@ -317,9 +344,17 @@ class DashboardContainer extends Component { 
        selectedSource={selectedSource}

        selectedDest={selectedDest}

        viewName={view2Name}

        dashboardOptions={this.props.dashboardOptions}

      />

    );



    // Populate Dashboard view list using links from monitoring tab

    var dashboardViewsList = [

      VIEW_NAME_NONE,

      NET_TOPOLOGY_VIEW

    ];

    this.populateDashboardList(dashboardViewsList, this.props.dashboardOptions);



    return (

      <>

        <DashboardConfiguration
@@ -336,7 +371,7 @@ class DashboardContainer extends Component { 
          changeDestNodeSelected={nodeId =>

            this.props.changeDestNodeSelected(appMap[nodeId])

          }

          dashboardViewsList={DASHBOARD_VIEWS_LIST}

          dashboardViewsList={dashboardViewsList}

          changeView1={viewName => this.props.changeView1(viewName)}

          changeView2={viewName => this.props.changeView2(viewName)}

          changeShowApps={checked => this.changeShowApps(checked)}
@@ -385,7 +420,8 @@ const mapStateToProps = state => { 
    eventCreationMode: state.exec.eventCreationMode,

    scenarioState: state.exec.state.scenario,

    view1Name: state.ui.dashboardView1,

    view2Name: state.ui.dashboardView2

    view2Name: state.ui.dashboardView2,

    dashboardOptions: state.monitor.dashboardOptions

  };

};

js-apps/meep-frontend/src/js/containers/exec/exec-page-container.js

+7 −9
Original line number Diff line number Diff line
@@ -37,14 +37,7 @@ import { 
  uiExecChangeEventCreationMode,

  uiExecChangeDashCfgMode,

  uiExecChangeCurrentEvent,

  uiExecChangeShowApps,

  IDC_DIALOG_DEPLOY_SCENARIO,

  IDC_DIALOG_TERMINATE_SCENARIO,

  IDC_DIALOG_SAVE_SCENARIO,



  // Event types

  MOBILITY_EVENT,

  NETWORK_CHARACTERISTICS_EVENT

  uiExecChangeShowApps

} from '../../state/ui';



import {
@@ -57,7 +50,12 @@ import { 
import {

  // States

  EXEC_STATE_IDLE,

  PAGE_EXECUTE

  PAGE_EXECUTE,

  IDC_DIALOG_DEPLOY_SCENARIO,

  IDC_DIALOG_TERMINATE_SCENARIO,

  IDC_DIALOG_SAVE_SCENARIO,

  MOBILITY_EVENT,

  NETWORK_CHARACTERISTICS_EVENT

} from '../../meep-constants';



class ExecPageContainer extends Component {