Commit 05ec3084 authored by Simon Pastor's avatar Simon Pastor
Browse files

dashboard integration with different sources and destinations

parent 0658a7a4

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

+10 −172
Original line number Diff line number Diff line
@@ -20,22 +20,14 @@ import autoBind from 'react-autobind'; 
import { Grid, GridCell } from '@rmwc/grid';

import { Elevation } from '@rmwc/elevation';

// import ReactDOM from 'react-dom';

import { Button } from '@rmwc/button';

import { Checkbox } from '@rmwc/checkbox';

import * as d3 from 'd3';



import IDSelect from '../../components/helper-components/id-select';

import IDCMap from '../idc-map';

import IDCVis from '../idc-vis';

import Iframe from 'react-iframe';



import { getScenarioNodeChildren, isApp, isUe, isPoa } from '../../util/scenario-utils';



import {

  uiExecChangeDashboardView1,

  uiExecChangeDashboardView2,

  uiExecChangeSourceNodeSelected,

  uiExecChangeDestNodeSelected,

  uiExecChangeSandboxCfg

} from '../../state/ui';
@@ -44,8 +36,7 @@ import { 
  VIEW_NAME_NONE,

  MAP_VIEW,

  NET_TOPOLOGY_VIEW,

  DEFAULT_DASHBOARD_OPTIONS,

  EXEC_BTN_DASHBOARD_BTN_CLOSE

  DEFAULT_DASHBOARD_OPTIONS

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



import { updateObject } from '../../util/object-util';
@@ -63,67 +54,6 @@ const styles = { 
const showInExecStr = '<exec>';

const passVarsStr = '<vars>';



const ConfigurationView = props => {

  return (

    <>

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

        <GridCell span={2}>

          <IDSelect

            label={'View 1'}

            outlined

            options={props.dashboardViewsList}

            onChange={e => {

              props.changeView1(e.target.value);

            }}

            value={props.view1Name}

          />

        </GridCell>

        <GridCell span={2}>

          <IDSelect

            label={'View 2'}

            outlined

            options={props.dashboardViewsList}

            onChange={e => {

              props.changeView2(e.target.value);

            }}

            value={props.view2Name}

          />

        </GridCell>

        <GridCell span={2}>

          <IDSelect

            label={'Source Node'}

            outlined

            options={props.srcIds}

            onChange={e => {

              props.changeSourceNodeSelected(e.target.value);

            }}

            value={props.sourceNodeSelected}

          />

        </GridCell>

        <GridCell span={2}>

          <IDSelect

            label={'Destination Node'}

            outlined

            options={props.destIds}

            onChange={e => {

              props.changeDestNodeSelected(e.target.value);

            }}

            value={props.destNodeSelected}

          />

        </GridCell>

        <GridCell span={2}>

          <Checkbox

            checked={props.showApps}

            onChange={e => props.changeShowApps(e.target.checked)}

          >

            Show Apps

          </Checkbox>

        </GridCell>

      </Grid>

    </>

  );

};



const getUrl = (dashboardName, dashboardOptions) => {

  var url = '';

  if (dashboardOptions) {
@@ -214,62 +144,6 @@ const ViewForName = ({ 
  return null;

};



const DashboardConfiguration = props => {

  if (!props.dashCfgMode) {

    return null;

  }



  let configurationView = null;



  configurationView = (

    <ConfigurationView

      dashboardViewsList={props.dashboardViewsList}

      view1Name={props.view1Name}

      view2Name={props.view2Name}

      changeView1={props.changeView1}

      changeView2={props.changeView2}

      srcIds={props.srcIds}

      destIds={props.destIds}

      sourceNodeSelected={props.sourceNodeSelected}

      destNodeSelected={props.destNodeSelected}

      changeSourceNodeSelected={props.changeSourceNodeSelected}

      changeDestNodeSelected={props.changeDestNodeSelected}

      changeShowApps={props.changeShowApps}

      showApps={props.showApps}

    />

  );

  return (

    <Elevation

      z={2}

      className='idcc-elevation'

      style={{ padding: 10, marginBottom: 10 }}

    >

      <Grid>

        <GridCell span={6}>

          <div style={{ marginBottom: 10 }}>

            <span className='mdc-typography--headline6'>

              Dashboard

            </span>

          </div>

        </GridCell>

        <GridCell span={6}>

          <div align={'right'}>

            <Button

              outlined

              style={styles.button}

              onClick={() => props.onCloseDashCfg()}

              data-cy={EXEC_BTN_DASHBOARD_BTN_CLOSE}

            >

            Close

            </Button>

          </div>

        </GridCell>

      </Grid>

      {configurationView}

    </Elevation>

  );

};



class DashboardContainer extends Component {

  constructor(props) {

    super(props);
@@ -302,10 +176,6 @@ class DashboardContainer extends Component { 
    }

  }



  getRoot() {

    return d3.hierarchy(this.props.displayedScenario, getScenarioNodeChildren);

  }



  changeShowApps(checked) {

    this.props.onShowAppsChanged(checked);

  }
@@ -353,23 +223,7 @@ class DashboardContainer extends Component { 


  render() {

    this.keyForSvg++;

    const root = this.getRoot();

    const nodes = root.descendants();

    const apps = nodes.filter(isApp);

    const appIds = apps.map(a => a.data.name);

    const ues = nodes.filter(isUe);

    const ueIds = ues.map(a => a.data.name);

    const poas = nodes.filter(isPoa);

    const poaIds = poas.map(a => a.data.name);

    const srcIds = appIds.concat(ueIds).sort();

    const destIds = appIds.concat(poaIds).sort();



    appIds.unshift('None');

    srcIds.unshift('None');

    destIds.unshift('None');



    const selectedSource = srcIds.includes(this.props.sourceNodeSelected) ? this.props.sourceNodeSelected : 'None';

    const selectedDest = destIds.includes(this.props.destNodeSelected) ? this.props.destNodeSelected : 'None';



    const view1Name = this.getView1();

    const view2Name = this.getView2();

    const view1Present = view1Name !== VIEW_NAME_NONE;
@@ -389,8 +243,8 @@ class DashboardContainer extends Component { 
      <ViewForName

        sandboxName={this.props.sandbox}

        scenarioName={this.props.scenarioName}

        selectedSource={selectedSource}

        selectedDest={selectedDest}

        selectedSource={this.props.sourceNodeSelectedView1}

        selectedDest={this.props.destNodeSelectedView1}

        viewName={view1Name}

        dashboardOptions={this.props.dashboardOptions}

      />
@@ -400,8 +254,8 @@ class DashboardContainer extends Component { 
      <ViewForName

        sandboxName={this.props.sandbox}

        scenarioName={this.props.scenarioName}

        selectedSource={selectedSource}

        selectedDest={selectedDest}

        selectedSource={this.props.sourceNodeSelectedView2}

        selectedDest={this.props.destNodeSelectedView2}

        viewName={view2Name}

        dashboardOptions={this.props.dashboardOptions}

      />
@@ -418,24 +272,6 @@ class DashboardContainer extends Component { 


    return (

      <>

        <DashboardConfiguration

          dashCfgMode={this.props.dashCfgMode}

          onCloseDashCfg={this.props.onCloseDashCfg}

          srcIds={srcIds}

          destIds={destIds}

          view1Name={view1Name}

          view2Name={view2Name}

          sourceNodeSelected={selectedSource}

          destNodeSelected={selectedDest}

          changeSourceNodeSelected={this.props.changeSourceNodeSelected}

          changeDestNodeSelected={this.props.changeDestNodeSelected}

          dashboardViewsList={dashboardViewsList}

          changeView1={this.changeView1}

          changeView2={this.changeView2}

          changeShowApps={this.changeShowApps}

          showApps={this.props.showApps}

        />



        <Grid>

          {!view1Present ? null : (

            <GridCell span={span1} className='chartContainer'>
@@ -475,6 +311,10 @@ const mapStateToProps = state => { 
    displayedScenario: state.exec.displayedScenario,

    sourceNodeSelected: state.ui.sourceNodeSelected,

    destNodeSelected: state.ui.destNodeSelected,

    sourceNodeSelectedView1: state.ui.sourceNodeSelectedView1,

    destNodeSelectedView1: state.ui.destNodeSelectedView1,

    sourceNodeSelectedView2: state.ui.sourceNodeSelectedView2,

    destNodeSelectedView2: state.ui.destNodeSelectedView2,

    eventCreationMode: state.exec.eventCreationMode,

    scenarioState: state.exec.state.scenario,

    view1Name: state.ui.dashboardView1,
@@ -486,8 +326,6 @@ const mapStateToProps = state => { 


const mapDispatchToProps = dispatch => {

  return {

    changeSourceNodeSelected: src => dispatch(uiExecChangeSourceNodeSelected(src)),

    changeDestNodeSelected: dest => dispatch(uiExecChangeDestNodeSelected(dest)),

    changeView1: name => dispatch(uiExecChangeDashboardView1(name)),

    changeView2: name => dispatch(uiExecChangeDashboardView2(name)),

    changeSandboxCfg: cfg => dispatch(uiExecChangeSandboxCfg(cfg))

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

+7 −2
Original line number Diff line number Diff line
@@ -24,7 +24,8 @@ import { Typography } from '@rmwc/typography'; 
import {

  uiExecChangeEventCreationMode,

  uiExecChangeEventAutomationMode,

  uiExecChangeEventReplayMode

  uiExecChangeEventReplayMode,

  uiExecChangeViewMode

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



import {
@@ -91,6 +92,7 @@ class EventContainer extends Component { 
    this.props.changeEventCreationMode(true);

    this.props.changeEventAutomationMode(false);

    this.props.changeEventReplayMode(false);

    this.props.changeViewMode(false);

  }



  // EVENT AUTOMATION PANE
@@ -98,6 +100,7 @@ class EventContainer extends Component { 
    this.props.changeEventCreationMode(false);

    this.props.changeEventAutomationMode(true);

    this.props.changeEventReplayMode(false);

    this.props.changeViewMode(false);

  }



  // SHOW REPLAY EVENT PANE
@@ -105,6 +108,7 @@ class EventContainer extends Component { 
    this.props.changeEventCreationMode(false);

    this.props.changeEventAutomationMode(false);

    this.props.changeEventReplayMode(true);

    this.props.changeViewMode(false);



    // Refresh 

    this.props.onShowReplay();
@@ -211,7 +215,8 @@ const mapDispatchToProps = dispatch => { 
  return {

    changeEventCreationMode: mode => dispatch(uiExecChangeEventCreationMode(mode)),

    changeEventAutomationMode: mode => dispatch(uiExecChangeEventAutomationMode(mode)),

    changeEventReplayMode: mode => dispatch(uiExecChangeEventReplayMode(mode))

    changeEventReplayMode: mode => dispatch(uiExecChangeEventReplayMode(mode)),

    changeViewMode: mode => dispatch(uiExecChangeViewMode(mode))

  };

};

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

+37 −1
Original line number Diff line number Diff line
@@ -30,6 +30,7 @@ import HeadlineBar from '../../components/headline-bar'; 
import EventCreationPane from './event-creation-pane';

import EventAutomationPane from './event-automation-pane';

import EventReplayPane from './event-replay-pane';

import ViewPane from './view-pane';



import ExecTable from './exec-table';
@@ -46,6 +47,7 @@ import { execChangeScenarioList} from '../../state/exec'; 
import {

  uiChangeCurrentDialog,

  uiExecChangeEventCreationMode,

  uiExecChangeViewMode,

  uiExecChangeEventAutomationMode,

  uiExecChangeEventReplayMode,

  uiExecChangeDashCfgMode,
@@ -74,6 +76,8 @@ import { 
  NETWORK_CHARACTERISTICS_EVENT,

  SCENARIO_UPDATE_EVENT,

  PDU_SESSION_EVENT,

  VIEW_1,

  VIEW_2,

  EXEC_SELECT_SANDBOX

} from '../../meep-constants';
@@ -212,6 +216,7 @@ class ExecPageContainer extends Component { 
    this.props.eventCreationMode ? this.onQuitEventCreationMode() : '';

    this.props.eventAutomationMode ? this.onQuitEventAutomationMode() : '';

    this.props.eventReplayMode ? this.onQuitEventReplayMode() : '';

    this.props.viewMode ? this.onQuitViewMode() : '';



    // Retrieve list of available scenarios

    this.props.cfgApi.getScenarioList((error, data, response) => {
@@ -255,6 +260,11 @@ class ExecPageContainer extends Component { 
    this.props.changeEventCreationMode(false);

  }



  // CLOSE VIEW PANE

  onQuitViewMode() {

    this.props.changeViewMode(false);

  }



  // CLOSE EVENT AUTOMATION PANE

  onQuitEventAutomationMode() {

    this.props.changeEventAutomationMode(false);
@@ -265,6 +275,14 @@ class ExecPageContainer extends Component { 
    this.props.changeEventReplayMode(false);

  }



  // CONFIGURE DASHBOARD

  onOpenViewMode() {

    this.props.changeViewMode(true);

    this.props.changeEventCreationMode(false);

    this.props.changeEventAutomationMode(false);

    this.props.changeEventReplayMode(false);

  }



  // CONFIGURE DASHBOARD

  onOpenDashCfg() {

    this.props.changeDashCfgMode(true);
@@ -275,6 +293,11 @@ class ExecPageContainer extends Component { 
    this.props.changeDashCfgMode(false);

  }



  // STOP CONFIGURE DASHBOARD

  onCloseViewMode() {

    this.props.changeViewMode(false);

  }



  // CONFIGURE EVENTS

  onOpenEventCfg() {

    this.props.changeEventCfgMode(true);
@@ -366,7 +389,7 @@ class ExecPageContainer extends Component { 
      (this.props.scenarioState !== EXEC_STATE_IDLE) ? this.props.execScenarioName : 'None' :

      this.props.cfgScenarioName;



    const eventPaneOpen = this.props.eventCreationMode || this.props.eventAutomationMode || this.props.eventReplayMode;

    const eventPaneOpen = this.props.eventCreationMode || this.props.eventAutomationMode || this.props.eventReplayMode || this.props.viewMode;

    const spanLeft = eventPaneOpen ? 8 : 12;

    const spanRight = eventPaneOpen ? 4 : 0;

    return (
@@ -417,6 +440,7 @@ class ExecPageContainer extends Component { 
                        onTerminate={this.onTerminateScenario}

                        onOpenDashCfg={this.onOpenDashCfg}

                        onOpenEventCfg={this.onOpenEventCfg}

                        onOpenViewMode={this.onOpenViewMode}

                      />

                    </GridCell>

                  </GridInner>
@@ -477,6 +501,16 @@ class ExecPageContainer extends Component { 
                  onClose={this.onQuitEventAutomationMode}

                />

              </Elevation>

              <Elevation className='idcc-elevation' z={2}>

                <ViewPane

                  viewOptions={[VIEW_1, VIEW_2]}

                  hide={!this.props.viewMode}

                  onClose={this.onQuitViewMode}

                  sandbox={this.props.sandbox}

                  scenarioName={this.props.execScenarioName}

                  showApps={this.props.showApps}

                />

              </Elevation>

            </GridCell>

          </Grid>

        )}
@@ -513,6 +547,7 @@ const mapStateToProps = state => { 
    scenarioState: state.exec.state.scenario,

    scenarios: state.exec.apiResults.scenarios,

    eventCreationMode: state.ui.eventCreationMode,

    viewMode: state.ui.viewMode,

    eventAutomationMode: state.ui.eventAutomationMode,

    eventReplayMode: state.ui.eventReplayMode,

    dashCfgMode: state.ui.dashCfgMode,
@@ -534,6 +569,7 @@ const mapDispatchToProps = dispatch => { 
    changeEventReplayMode: val => dispatch(uiExecChangeEventReplayMode(val)), // (true or false)

    changeDashCfgMode: val => dispatch(uiExecChangeDashCfgMode(val)), // (true or false)

    changeEventCfgMode: val => dispatch(uiExecChangeEventCfgMode(val)), // (true or false)

    changeViewMode: val => dispatch(uiExecChangeViewMode(val)), // (true or false)

    changeCurrentEvent: e => dispatch(uiExecChangeCurrentEvent(e)),

    execChangeOkToTerminate: ok => dispatch(execChangeOkToTerminate(ok)),

    changeShowApps: show => dispatch(uiExecChangeShowApps(show)),

js-apps/meep-frontend/src/js/containers/exec/exec-page-scenario-buttons.js

+3 −3
Original line number Diff line number Diff line
@@ -65,7 +65,7 @@ class ExecPageScenarioButtons extends Component { 
    );

  }



  canOpenDashCfg() {

  canOpenViewMode() {

    return (

      this.props.sandbox &&

      !this.props.podsPending &&
@@ -125,8 +125,8 @@ class ExecPageScenarioButtons extends Component { 
        <Button

          raised

          style={styles.button}

          onClick={this.props.onOpenDashCfg}

          disabled={!this.canOpenDashCfg()}

          onClick={this.props.onOpenViewMode}

          disabled={!this.canOpenViewMode()}

          data-cy={EXEC_BTN_DASHBOARD}

        >

          DASHBOARD

js-apps/meep-frontend/src/js/containers/exec/view-pane.js

0 → 100644
+387 −0

File added.

Preview size limit exceeded, changes collapsed.