Commit 3d3c7229 authored by Francis Renaud's avatar Francis Renaud
Browse files

Styles time range slider in DashboardContainer

parent d6b9da56

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

+53 −19
Original line number Diff line number Diff line
@@ -57,6 +57,30 @@ import { 


const TIME_FORMAT = moment.HTML5_FMT.DATETIME_LOCAL_MS;



const MIN_TIME_RANGE_VALUE = 15;

const MAX_TIME_RANGE_VALUE = 60;



const greyColor = 'grey';



const styles = {

  button: {

    marginRight: 0

  },

  slider: {

    container: {

      marginTop:10,

      marginBottom: 10,

      color: greyColor

    },

    boundaryValues: {

      marginTop: 15

    },

    title: {

      marginBottom: 0

    }

  }

};



function colorArray(dataLength) {

  const colorScale = d3.interpolateInferno;

  // Other possible color scales:
@@ -116,22 +140,36 @@ const TimeIntervalConfig = (props) => { 
      </Button>

    );

  }



  return (

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

      <Grid>

        <GridCell span={3}>

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

            <div>

          <div style={styles.slider.container}>

            <div style={styles.slider.title}>

              <span className="mdc-typography--headline8">Timeframe in secs </span>

            </div>

            <Grid>

              <GridCell span={1} style={styles.slider.boundaryValues}>

                <span>{MIN_TIME_RANGE_VALUE}</span>

              </GridCell>

              <GridCell span={10}>

                <Slider

                  value={props.value}

              onChange={e => props.timeIntervalDurationChanged(e.detail.value)}

                  onChange={e => props.changeTimeIntervalDuration(e.detail.value)}

                  discrete

              min={5}

              max={60}

                  min={MIN_TIME_RANGE_VALUE}

                  max={MAX_TIME_RANGE_VALUE}

                  step={1}

                />

              </GridCell>

              <GridCell span={1} style={styles.slider.boundaryValues}>

                <span>{MAX_TIME_RANGE_VALUE}</span>

              </GridCell>

            </Grid>

            

            

           

          </div>

          

        </GridCell>
@@ -199,7 +237,7 @@ const ConfigurationView = (props) => { 
      </GridCell>

    </Grid>

    <TimeIntervalConfig 

      timeIntervalDurationChanged={(value) => {props.timeIntervalDurationChanged(value);}}

      changeTimeIntervalDuration={(value) => {props.changeTimeIntervalDuration(value);}}

      stopSlidingWindow={props.stopSlidingWindow}

      startSlidingWindow={props.startSlidingWindow}

      slidingWindowStopped={props.slidingWindowStopped}
@@ -208,10 +246,6 @@ const ConfigurationView = (props) => { 
  );

};



const buttonStyles = {

  marginRight: 0

};



const ViewForName = (

  {

    keyForSvg,
@@ -365,7 +399,7 @@ const DashboardConfiguration = (props) => { 
        changeSourceNodeSelected={props.changeSourceNodeSelected}

        changeDisplayEdgeLabels={props.changeDisplayEdgeLabels}

        displayEdgeLabels={props.displayEdgeLabels}

        timeIntervalDurationChanged={props.timeIntervalDurationChanged}

        changeTimeIntervalDuration={props.changeTimeIntervalDuration}

        stopSlidingWindow={props.stopSlidingWindow}

        startSlidingWindow={props.startSlidingWindow}

        slidingWindowStopped={props.slidingWindowStopped}
@@ -375,7 +409,7 @@ const DashboardConfiguration = (props) => { 


  const buttonConfig = !props.dashboardConfigExpanded

    ? (

      <Button outlined style={buttonStyles} onClick={() => props.expandDashboardConfig(true)}>

      <Button outlined style={styles.button} onClick={() => props.expandDashboardConfig(true)}>

          Open

      </Button>

    )
@@ -383,7 +417,7 @@ const DashboardConfiguration = (props) => { 


  const buttonClose = props.dashboardConfigExpanded

    ? (

      <Button outlined style={buttonStyles} onClick={() => props.expandDashboardConfig(false)}>

      <Button outlined style={styles.button} onClick={() => props.expandDashboardConfig(false)}>

          Close

      </Button>

    )
@@ -672,7 +706,7 @@ class DashboardContainer extends Component { 
          nodeIds={appIds}

          sourceNodeSelected={this.props.sourceNodeSelected}

          changeSourceNodeSelected={(nodeId) => this.props.changeSourceNodeSelected(appMap[nodeId])}

          timeIntervalDurationChanged={(duration) => {this.changeMetricsTimeIntervalDuration(duration);}}

          changeTimeIntervalDuration={(duration) => {this.changeMetricsTimeIntervalDuration(duration);}}

          stopSlidingWindow={() => this.stopSlidingWindow()}

          startSlidingWindow={() => this.startSlidingWindow()}

          slidingWindowStopped={this.state.slidingWindowStopped}

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

+3 −5
Original line number Diff line number Diff line
@@ -154,6 +154,9 @@ export { 


  // Action types

  EXEC_CHANGE_CURRENT_EVENT,

  UI_EXEC_CHANGE_SHOW_DASHBOARD_CONFIG,

  UI_EXEC_CHANGE_DASHBOARD_VIEW1,

  UI_EXEC_CHANGE_DASHBOARD_VIEW2,



  // Dialogs types

  IDC_DIALOG_OPEN_SCENARIO,
@@ -175,11 +178,6 @@ export { 
  uiSetAutomaticRefresh,

  uiChangeRefreshInterval,

  uiExecChangeShowApps,



  // Dashboard

  UI_EXEC_CHANGE_SHOW_DASHBOARD_CONFIG,

  UI_EXEC_CHANGE_DASHBOARD_VIEW1,

  UI_EXEC_CHANGE_DASHBOARD_VIEW2,

  uiExecChangeShowDashboardConfig,

  uiExecExpandDashboardConfig,

  uiExecChangeDashboardView1,