Commit d2a32039 authored by Francis Renaud's avatar Francis Renaud
Browse files

WIP - Create Event Pane layout

parent e982a907

js-apps/meep-frontend/src/js/components/helper-components/nc-group.js

+137 −63
Original line number Diff line number Diff line
@@ -158,6 +158,68 @@ const validateThroughput = (val) => { 
  return null;

};



export const NC_TABLE_LAYOUT = 'NC_TABLE_LAYOUT';

export const NC_LINE_LAYOUT = 'NC_LINE_LAYOUT';



const TableLayout = (props) => {

  return (

    <div>

      <Grid>

        <GridCell span="6">

          {props.latencyComponent}

        </GridCell>

        <GridCell span="6">

          {props.latencyVariationComponent}

        </GridCell>

      </Grid>



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

        <GridCell span="6">

          {props.packetLossComponent}

        </GridCell>

        <GridCell span="6">

          {props.throughputComponent}

        </GridCell>

      </Grid>

    </div>

  );

};



const LineLayout = (props) => {

  return (

    <div>

      <Grid>

        <GridCell span="3">

          {props.latencyComponent}

        </GridCell>

        <GridCell span="3">

          {props.latencyVariationComponent}

        </GridCell>

        <GridCell span="3">

          {props.packetLossComponent}

        </GridCell>

        <GridCell span="3">

          {props.throughputComponent}

        </GridCell>

      </Grid>

    </div>

  );

};



const NCLayout = (props) => {

  switch (props.layout) {

  case NC_LINE_LAYOUT:

    return (

      <LineLayout {...props} />

    );

  case NC_TABLE_LAYOUT:

    return (

      <TableLayout {...props} />

    );  

  }

};





const NCGroup = ({prefix, onUpdate, element}) => {

  const formLabel = (valueName) => {

    const space = prefix ? ' ' : '';
@@ -229,10 +291,8 @@ const NCGroup = ({prefix, onUpdate, element}) => { 
    return null;

  }



  return (

    <div>

      <Grid>

        <GridCell span="6">

  const latencyComponent = (

    <>

     <TextField outlined style={{width: '100%'}}

       label={formLabel('Latency') + ' (ms)'}

       onChange={(e) => handleEvent(e, latencyFieldName, validateLatency)}
@@ -245,8 +305,11 @@ const NCGroup = ({prefix, onUpdate, element}) => { 
        {getElemFieldErr(element, latencyFieldName)}

      </span>

    </TextFieldHelperText>

        </GridCell>

        <GridCell span="6">

    </>

  );



  const latencyVariationComponent = (

    <>

    <TextField outlined style={{width: '100%'}}

      label={formLabel('Latency Variation') + ' (ms)'}

      onChange={(e) => handleEvent(e, latencyVarFieldName, validateLatencyVariation)}
@@ -259,11 +322,11 @@ const NCGroup = ({prefix, onUpdate, element}) => { 
        {getElemFieldErr(element, latencyVarFieldName)}

      </span>

    </TextFieldHelperText>

        </GridCell>

      </Grid>

    </>

  );



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

        <GridCell span="6">

  const packetLossComponent = (

    <>

    <TextField outlined style={{width: '100%'}}

      label={formLabel('Packet Loss') + ' (%)'}

      onChange={(e) =>  handleEvent(e, packetLossFieldName, validatePacketLoss)}
@@ -276,9 +339,11 @@ const NCGroup = ({prefix, onUpdate, element}) => { 
        {getElemFieldErr(element, packetLossFieldName)}

      </span>

    </TextFieldHelperText>

    </>

  );



        </GridCell>

        <GridCell span="6">

  const throughputComponent = (

    <>

    <TextField outlined style={{width: '100%'}}

      label={formLabel('Throughput') + ' Mbps'}

      onChange={(e) =>  handleEvent(e, throughputFieldName, validateThroughput)}
@@ -291,9 +356,18 @@ const NCGroup = ({prefix, onUpdate, element}) => { 
        {getElemFieldErr(element, throughputFieldName)}

      </span>

    </TextFieldHelperText>

        </GridCell>

      </Grid>

    </div>

    </>

  );



  return (

    <NCLayout

      layout={NC_TABLE_LAYOUT}

      latencyComponent={latencyComponent}

      latencyVariationComponent={latencyVariationComponent}

      packetLossComponent={packetLossComponent}

      throughputComponent={throughputComponent}

    >

    </NCLayout>

  );

};

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

+1 −0
Original line number Diff line number Diff line
@@ -132,6 +132,7 @@ const ConfigurationView = (props) => { 
      <GridCell span={5}>

      </GridCell>

    </Grid>

    

  );

};

js-apps/meep-frontend/src/js/containers/exec/event-creation-pane.js

+6 −0
Original line number Diff line number Diff line
@@ -36,6 +36,11 @@ import { 
  execZones

} from '../../state/exec';



import {

  NC_LINE_LAYOUT,

  NC_TABLE_LAYOUT

} from '../../components/helper-components/nc-group';



import {

  PAGE_EXECUTE

} from '../../state/ui';
@@ -67,6 +72,7 @@ const EventCreationFields = (props) => { 
  case MOBILITY_EVENT:

    return (

      <MobilityEventPane

        layout={NC_TABLE_LAYOUT}

        element={props.element}

        eventTypes={props.eventTypes}

        api={props.api}

js-apps/meep-frontend/src/js/containers/exec/mobility-event-pane.js

+32 −6
Original line number Diff line number Diff line
@@ -29,6 +29,14 @@ import { 
  getElemFieldVal,

  FIELD_NAME

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

import { NC_TABLE_LAYOUT,  NC_LINE_LAYOUT} from '../../components/helper-components/nc-group';



const LineLayout = (props) => {

  return (<div>

    



  </div>);

};



class MobilityEventPane extends Component {
@@ -157,13 +165,31 @@ class MobilityEventPane extends Component { 
          <GridCell span="4">

          </GridCell>

        </Grid>

        <CancelApplyPairComponent />

        </>

      );

      break;



        <CancelApplyPair

          cancelText="Close"

          applyText="Submit"

          onCancel={this.props.onClose}

          onApply={(e) => this.triggerEvent(e)}

        />

    case NC_LINE_LAYOUT:

      Layout = (

        <>

        <Grid style={styles.field}>

          <GridCell span="6">

            <TargetSelectComponent />

          </GridCell>

          <GridCell span="6">

            <DestinationSelectComponent />

          </GridCell>

        </Grid>

        <CancelApplyPairComponent />

        </>

      );

      break;

    }



    return (

      <div>

        {Layout}

      </div>

    );

  }

js-apps/meep-frontend/src/js/containers/idc-node.js

+1 −1
Original line number Diff line number Diff line
@@ -90,7 +90,7 @@ export default class IDCNode extends Component { 
      transform={translate(d)}

    >

      <Plus width={10} height={10} d={d} updateParent={this.props.updateParent}/>

      <circle xlinkHref={`../img/${d.data.iconName}`} height={size} width={size} cx={-size/2 + 10} cy={-size/2 + 10} /*filter={d.selected ? 'url(#filter)' : '' }*/

      <circle xlinkHref={`../img/${d.data.iconName}`} height={size} width={size} cx={-size/2 + 15} cy={-size/2 + 15} /*filter={d.selected ? 'url(#filter)' : '' }*/

        r={radius}

        style={{fill: fill}}

        stroke={'black'}