Update odlux

Update performance app: fix scrolling bug, reduce loading times, update ui to use tabs instead of panels, change the view to toggle between chart and table to better visualize data, minior bugfixes for other apps

Issue-ID: SDNC-1080
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I2b5cf3a5f580f4193421bc047e5256d8e9497e6b
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>

9 files changed, 253 insertions, 16 deletions

diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
index 09d3accd4..c62698630 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -28,13 +28,18 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createAdaptiveModulationProperties, createAdaptiveModulationActions } from '../handlers/adaptiveModulationHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   adaptiveModulationProperties: createAdaptiveModulationProperties(state),
+  currentView: state.performanceHistory.subViews.adaptiveModulation,
+
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)),
 });
 
 type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +52,10 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM
  * The Component which gets the adaptiveModulation data from the database based on the selected time period.
  */
 class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.adaptiveModulationProperties;
     const actions = this.props.adaptiveModulationActions;
@@ -69,8 +78,10 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
 
     return (
       <>
-        {lineChart(chartPagedData)}
-        <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index 267e00bbe..7489757f5 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -28,13 +28,19 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import { SetSubViewAction } from '../actions/toggleActions';
+import ToggleContainer from './toggleContainer';
+
 
 const mapProps = (state: IApplicationStoreState) => ({
   crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state),
+  currentView: state.performanceHistory.subViews.CPD,
+
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)),
 });
 
 type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +53,11 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro
  * The Component which gets the crossPolarDiscrimination data from the database based on the selected time period.
  */
 class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.crossPolarDiscriminationProperties;
     const actions = this.props.crossPolarDiscriminationActions;
@@ -70,8 +81,10 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
     });
     return (
       <>
-        {lineChart(chartPagedData)}
-        <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
new file mode 100644
index 000000000..8327ec4ed
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -0,0 +1,87 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from 'react';
+import { MenuItem, Select, FormControl } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { LtpIds } from 'models/availableLtps';
+import { Loader } from '../../../../framework/src/components/material-ui';
+
+
+const useStyles = makeStyles(theme => ({
+    display: {
+        display: "inline-block"
+    },
+    selectDropdown: {
+        borderRadius: 1,
+        position: "relative",
+        backgroundColor: theme.palette.background.paper,
+        border: "1px solid #ced4da",
+        fontSize: 16,
+        width: "auto",
+        padding: "5px 26px 5px 12px",
+        transition: theme.transitions.create(["border-color", "box-shadow"]),
+    },
+    center: {
+        "flex": "1",
+        "height": "100%",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+    }
+}));
+
+type LtpSelectionProps = { selectedNE: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void };
+
+export const LtpSelection = (props: LtpSelectionProps) => {
+    const classes = useStyles();
+    return (
+        <>
+            <h3>Selected Network Element: {props.selectedNE} </h3>
+            <FormControl className={classes.display}>
+                <span>
+                    Select LTP
+                </span>
+                <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp}  >
+                    <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
+                    {props.availableLtps.map(ltp =>
+                        (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
+                </Select>
+                <span> Time-Period </span>
+                <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} >
+                    <MenuItem value={"15min"}>15min</MenuItem>
+                    <MenuItem value={"24hours"}>24hours</MenuItem>
+                </Select>
+            </FormControl>
+            {
+                !props.finishedLoading &&
+                <div className={classes.center}>
+                    <Loader />
+                    <h3>Collecting Data ...</h3>
+                </div>
+            }
+            {
+                props.selectedLtp === "-1" && props.finishedLoading &&
+                <div className={classes.center}>
+                    <h3>Please select a LTP</h3>
+                </div>
+            }
+        </>)
+}
+
+export default LtpSelection;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index c58c49c9e..d0caa6fd6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -27,13 +27,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createPerformanceDataProperties, createPerformanceDataActions } from '../handlers/performanceDataHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   performanceDataProperties: createPerformanceDataProperties(state),
+  currentView: state.performanceHistory.subViews.performanceDataSelection,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   performanceDataActions: createPerformanceDataActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)),
 });
 
 type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -46,6 +50,11 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD
  * The Component which gets the performance data from the database based on the selected time period.
  */
 class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.performanceDataProperties;
     const actions = this.props.performanceDataActions;
@@ -68,8 +77,10 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
     });
     return (
       <>
-        {lineChart(chartPagedData)}
-        <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
index 55bc39860..4b0a835d4 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -23,18 +23,24 @@ import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '.
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
 
-import { ReceiveLevelDataType,ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType';
+import { ReceiveLevelDataType, ReceiveLevelDatabaseDataType } from '../models/receiveLevelDataType';
 import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createReceiveLevelProperties, createReceiveLevelActions } from '../handlers/receiveLevelHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import { SetSubViewAction } from '../actions/toggleActions';
+import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   receiveLevelProperties: createReceiveLevelProperties(state),
+  currentView: state.performanceHistory.subViews.receiveLevelDataSelection,
+
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)),
+
 });
 
 type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +53,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat
  * The Component which gets the receiveLevel data from the database based on the selected time period.
  */
 class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.receiveLevelProperties;
     const actions = this.props.receiveLevelActions;
@@ -70,8 +81,10 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
 
     return (
       <>
-        {lineChart(chartPagedData)}
-        <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
index 42aa007a9..ba480d57d 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import { SetSubViewAction } from '../actions/toggleActions';
+import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   signalToInterferenceProperties: createSignalToInterferenceProperties(state),
+  currentView: state.performanceHistory.subViews.SINR,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)),
 });
 
 type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT
  * The Component which gets the signal to interference data from the database based on the selected time period.
  */
 class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.signalToInterferenceProperties;
     const actions = this.props.signalToInterferenceActions;
@@ -70,9 +79,11 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
     });
     return (
       <>
-        {lineChart(chartPagedData)}
-        <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
-        />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
+          />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
index 256911c2d..28f75d84c 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createTemperatureProperties, createTemperatureActions } from '../handlers/temperatureHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import ToggleContainer from './toggleContainer';
+import { SetSubViewAction } from '../actions/toggleActions';
 
 const mapProps = (state: IApplicationStoreState) => ({
   temperatureProperties: createTemperatureProperties(state),
+  currentView: state.performanceHistory.subViews.temperatur,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   temperatureActions: createTemperatureActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)),
 });
 
 type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT
  * The Component which gets the temperature data from the database based on the selected time period.
  */
 class TemperatureComponent extends React.Component<TemperatureComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.temperatureProperties;
     const actions = this.props.temperatureActions;
@@ -69,8 +78,11 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
     });
     return (
       <>
-        {lineChart(chartPagedData)}
-        <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} />
+
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
new file mode 100644
index 000000000..97a2006f7
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx
@@ -0,0 +1,68 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+
+import * as React from 'react';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import TableChartIcon from '@material-ui/icons/TableChart';
+import { makeStyles } from '@material-ui/core';
+import Tooltip from '@material-ui/core/Tooltip';
+
+const styles = makeStyles({
+    toggleButton: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "10px",
+    }
+});
+
+type toggleProps = { selectedValue: string, onChange(value: string): void };
+
+const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
+
+    const classes = styles();
+
+    const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
+        if (newView !== null) {
+            props.onChange(newView)
+        }
+    };
+
+    const children = React.Children.toArray(props.children);
+
+    return (
+        <>
+            <ToggleButtonGroup className={classes.toggleButton} size="medium" value={props.selectedValue} exclusive onChange={handleChange}>
+                <ToggleButton aria-label="display-chart" key={1} value="chart">
+                    <Tooltip title="Chart">
+                        <BarChartIcon />
+                    </Tooltip>
+                </ToggleButton>
+                <ToggleButton aria-label="display-table" key={2} value="table">
+                    <Tooltip title="Table">
+                        <TableChartIcon />
+                    </Tooltip>
+                </ToggleButton>
+            </ToggleButtonGroup>
+            {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]}
+        </>);
+
+}
+
+export default ToggleContainer;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index 635cbf103..6fe66d2b5 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -28,13 +28,17 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes';
 import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler';
 import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
 import { addColumnLabels } from '../utils/tableUtils';
+import { SetSubViewAction } from '../actions/toggleActions';
+import ToggleContainer from './toggleContainer';
 
 const mapProps = (state: IApplicationStoreState) => ({
   transmissionPowerProperties: createTransmissionPowerProperties(state),
+  currentView: state.performanceHistory.subViews.transmissionPower,
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
   transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch),
+  setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)),
 });
 
 type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -47,6 +51,11 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi
  * The Component which gets the transmission power data from the database based on the selected time period.
  */
 class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{
+
+  onChange = (value: "chart" | "table") => {
+    this.props.setSubView(value);
+  }
+
   render(): JSX.Element {
     const properties = this.props.transmissionPowerProperties
     const actions = this.props.transmissionPowerActions
@@ -71,8 +80,10 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
 
     return (
       <>
-        {lineChart(chartPagedData)}
-        <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
+        <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}>
+          {lineChart(chartPagedData)}
+          <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
+        </ToggleContainer>
       </>
     );
   };