Commit 7001392c authored by Francis Renaud's avatar Francis Renaud Committed by Michel Roy
Browse files

Keeping the chosen monitor dashboard across tab change

parent 507d982b

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

+4 −3
Original line number Diff line number Diff line
@@ -71,8 +71,8 @@ import { 
} from '../state/ui';



// MEEP Controller REST API JS client

var basepath = 'http://' + location.host + location.pathname + 'v1';

// var basepath = 'http://10.3.16.73:30000/v1';

// var basepath = 'http://' + location.host + location.pathname + 'v1';

var basepath = 'http://10.3.16.73:30000/v1';



meepCtrlRestApiClient.ApiClient.instance.basePath = basepath.replace(/\/+$/, '');
@@ -327,12 +327,14 @@ class MeepContainer extends Component { 


    case PAGE_EXECUTE:

      return (

        <>

        <ExecPageContainer style={{width: '100%'}}

          api={this.meepExecApi}

          cfgApi={this.meepCfgApi}

          refreshScenario={() => {this.refreshScenario();}}

          deleteScenario={() => {this.deleteScenario(TYPE_EXEC);}}

        />

        </>

      );



    case PAGE_SETTINGS:
@@ -350,7 +352,6 @@ class MeepContainer extends Component { 


    default:

      return null;



    }

  }

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

+83 −73
Original line number Diff line number Diff line
@@ -16,10 +16,13 @@ import Iframe from 'react-iframe'; 
import HeadlineBar from '../../components/headline-bar';



import {

  uiSetAutomaticRefresh,

  PAGE_MONITOR

  uiSetAutomaticRefresh

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



import {

  changeDashboardUrl

} from '../../state/monitor';



import { 

  MON_DASHBOARD_SELECT,

  MON_DASHBOARD_IFRAME
@@ -42,30 +45,36 @@ const selectOptions = [ 


const kibanaDashboardUrl = 'http://' + location.hostname + ':32003/app/kibana#/dashboard';



class MonitorPageContainer extends Component {

  constructor(props) {

    super(props);

    this.state = {

      iFrameUrl: '',

      dashboardSelected: null

    };

  }



  handleSelectionChange(e) {

    this.setState({

      iFrameUrl: e.target.value,

      dashboardSelected: true

    });

  }



  render() {



    if (this.props.page != PAGE_MONITOR) {

const DashboardContainer = (props) => {

  if (!props.dashboardUrl) {

    return null;

  }

  return (

    <Grid style={{width: '100%', height: '100%'}} >

      <GridInner style={{width: '100%', height: '100%'}}>

        <GridCell span={12} style={styles.inner}>

          <Elevation className="component-style" z={2} style={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>                

            <div style={{flex: 1, padding: 10}}>

              <div data-cy={MON_DASHBOARD_IFRAME} style={{height: '100%'}}>

                <Iframe

                  url={props.dashboardUrl}

                  id="myId"

                  display="initial"

                  position="relative"

                  allowFullScreen

                  styles={{width: '100%', height: '100%'}}

                />

              </div>

            </div>

          </Elevation>

        </GridCell>

      </GridInner>

    </Grid>

  );

};



const MonitorPageHeadlineBar = (props) => {

  return(

      <div style={{width: '100%', height: '100%'}}>

    <div style={{width: '100%'}}>   

      <Grid style={styles.headlineGrid}>

        <GridCell span={12}>
@@ -74,7 +83,7 @@ class MonitorPageContainer extends Component { 
              <GridCell align={'middle'} span={6}>

                <HeadlineBar

                  titleLabel="Deployed Scenario"

                      scenarioName={this.props.scenarioName}

                  scenarioName={props.scenarioName}

                />

              </GridCell>

              <GridCell span={4}>
@@ -83,7 +92,8 @@ class MonitorPageContainer extends Component { 
                  label='Dashboard'

                  outlined

                  options={selectOptions}

                      onChange={(e) => this.handleSelectionChange(e)}

                  onChange={(e) => props.onChangeDashboard(e)}

                  value={props.dashboardUrl}

                  data-cy={MON_DASHBOARD_SELECT}

                />

              </GridCell>
@@ -100,29 +110,27 @@ class MonitorPageContainer extends Component { 
        </GridCell>

      </Grid>

    </div>

  );

};



        <Grid style={{width: '100%', height: '100%'}} hidden={!this.state.dashboardSelected}>

          <GridInner style={{width: '100%', height: '100%'}}>

            <GridCell span={12} style={styles.inner}>

              <Elevation className="component-style" z={2} style={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>

class MonitorPageContainer extends Component {

  constructor(props) {

    super(props);

    this.state = {};

  }



                <div style={{flex: 1, padding: 10}}>

                  <div data-cy={MON_DASHBOARD_IFRAME} style={{height: '100%'}}>

                    <Iframe

                      url={this.state.iFrameUrl}

                      id="myId"

                      display="initial"

                      position="relative"

                      allowFullScreen

                      styles={{width: '100%', height: '100%'}}

                    />

                  </div>

                </div>

              </Elevation>

            </GridCell>

          </GridInner>

        </Grid>

  handleSelectionChange(e) {

    this.props.changeDashboardUrl(e.target.value);

  }



  render() {

    return (

      <div style={{width: '100%', height: '100%'}}>

        <MonitorPageHeadlineBar

          scenarioName={this.props.scenarioName}

          onChangeDashboard={(e) => this.handleSelectionChange(e)}

        />

        <DashboardContainer dashboardUrl={this.props.dashboardUrl}/>

      </div>

    );

  }
@@ -162,12 +170,14 @@ const mapStateToProps = state => { 
    devMode: state.ui.devMode,

    page: state.ui.page,

    scenarioName: state.exec.scenario.name,

    dashboardUrl: state.monitor.dashboardUrl

  };

};



const mapDispatchToProps = dispatch => {

  return {

    setAutomaticRefresh: (val) => dispatch(uiSetAutomaticRefresh(val))

    setAutomaticRefresh: (val) => dispatch(uiSetAutomaticRefresh(val)),

    changeDashboardUrl: (url) => dispatch(changeDashboardUrl(url))

  };

};

js-apps/meep-frontend/src/js/state/meep-reducer.js

+2 −0
Original line number Diff line number Diff line
@@ -12,11 +12,13 @@ import uiReducer from './ui'; 
import cfgReducer from './cfg';

import execReducer from './exec';

import settingsReducer from './settings';

import monitorReducer from './monitor';



const meepReducer = combineReducers({

  ui: uiReducer,

  cfg: cfgReducer,

  exec: execReducer,

  monitor: monitorReducer,

  settings: settingsReducer

});

js-apps/meep-frontend/src/js/state/monitor/index.js

0 → 100644
+29 −0
Original line number Diff line number Diff line 
/*

 * Copyright (c) 2019

 * InterDigital Communications, Inc.

 * All rights reserved.

 *

 * The information provided herein is the proprietary and confidential

 * information of InterDigital Communications, Inc.

 */

const initialState = {

  dashboardUrl: ''

};

  

const CHANGE_DASHBOARD_URL = 'CHANGE_DASHBOARD_URL';

export function changeDashboardUrl(url) {

  return {

    type: CHANGE_DASHBOARD_URL,

    payload: url

  };

}

  

export default function settingsReducer(state = initialState, action) {

  switch (action.type) {

  case CHANGE_DASHBOARD_URL:

    return {...state, dashboardUrl: action.payload};

  default:

    return state;

  }

}

  
 No newline at end of file