diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx | 124 |
1 files changed, 61 insertions, 63 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index 218250d18..ae22f8041 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -25,7 +25,6 @@ import Select from '@material-ui/core/Select'; import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import { Panel } from '../../../../framework/src/components/material-ui'; -import { loadAllMountedNetworkElementsAsync } from '../../../connectApp/src/actions/mountedNetworkElementsActions'; import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; import { Dispatch } from '../../../../framework/src/flux/store'; @@ -38,7 +37,7 @@ import AdaptiveModulation from '../components/adaptiveModulation'; import Temperature from '../components/temperature'; import SignalToInterference from '../components/signalToInterference'; import CrossPolarDiscrimination from '../components/crossPolarDiscrimination'; -import { loadAllConnectedNetworkElementsAsync } from '../actions/connectedNetworkElementsActions'; +import { loadAllDeviceListAsync } from '../actions/deviceListActions'; import { TimeChangeAction } from '../actions/timeChangeAction'; import { loadDistinctLtpsbyNetworkElementAsync } from '../actions/ltpAction'; import { SetPanelAction } from '../actions/panelChangeActions'; @@ -58,7 +57,7 @@ const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({ flexWrap: "wrap", }, margin: { - margin: theme.spacing.unit, + margin: theme.spacing(1), }, display: { display: "inline-block" @@ -79,7 +78,7 @@ const mapProps = (state: IApplicationStoreState) => ({ ...state.performanceHistory, activePanel: state.performanceHistory.currentOpenPanel, availableLtps: state.performanceHistory.ltps.distinctLtps, - networkElements: state.performanceHistory.networkElements.connectedNetworkElementIds + networkElements: state.performanceHistory.networkElements.deviceList, }); const mapDispatcher = (dispatcher: IDispatcher) => ({ @@ -104,9 +103,8 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({ temperaturePreActions: createTemperaturePreActions(dispatcher.dispatch), signalToInterferencePreActions: createSignalToInterferencePreActions(dispatcher.dispatch), crossPolarDiscriminationPreActions: createCrossPolarDiscriminationPreActions(dispatcher.dispatch), - getConnectedNetworkElementsIds: async () => { - await dispatcher.dispatch(loadAllMountedNetworkElementsAsync) - dispatcher.dispatch(loadAllConnectedNetworkElementsAsync); + getAllDevicesPMdata: async () => { + await dispatcher.dispatch(loadAllDeviceListAsync); }, getDistinctLtpsIds: (selectedNetworkElement: string, selectedTimePeriod: string, selectedLtp: string, selectFirstLtp?: Function, resetLTP?: Function) => dispatcher.dispatch(loadDistinctLtpsbyNetworkElementAsync(selectedNetworkElement, selectedTimePeriod, selectedLtp, selectFirstLtp, resetLTP)), setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)), @@ -117,7 +115,7 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({ }); export type NetworkElementType = { - mountId: string, + nodeId: string, } const NetworkElementTable = MaterialTable as MaterialTableCtorType<NetworkElementType>; @@ -184,62 +182,62 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp render(): JSX.Element { const { classes } = this.props; - const { activePanel, mountId } = this.props; - if (mountId === "") { + const { activePanel, nodeId } = this.props; + if (nodeId === "") { return ( <> - <h2>Please select the network element !</h2> - <NetworkElementTable idProperty={"mountId"} rows={ this.props.networkElements } asynchronus - onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.mountId) }} columns={ - [{ property: "mountId" }] + <NetworkElementTable title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus + onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.nodeId) }} columns={ + [{ property: "nodeId", title: "Node Name" }] } /> </> ) } else { - this.handleURLChange(mountId); + 3 + this.handleURLChange(nodeId); return ( <> - <h2>Selected Network Element: { this.state.selectedNetworkElement } </h2> - { this.state.showLtps && ( + <h3>Selected Network Element: {this.state.selectedNetworkElement} </h3> + {this.state.showLtps && ( <div> - <FormControl className={ classes.display }> + <FormControl className={classes.display}> <span> Select LTP </span> - <Select className={ classes.selectDropdown } value={ this.state.selectedLtp } onChange={ this.handleLtpChange } > - <MenuItem value={ "-1" }><em>--Select--</em></MenuItem> - { this.props.availableLtps.map(ltp => - (<MenuItem value={ ltp.key } key={ ltp.key }>{ ltp.key }</MenuItem>)) } + <Select className={classes.selectDropdown} value={this.state.selectedLtp} onChange={this.handleLtpChange} > + <MenuItem value={"-1"}><em>--Select--</em></MenuItem> + {this.props.availableLtps.map(ltp => + (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))} </Select> <span> Time-Period </span> - <Select className={ classes.selectDropdown } value={ this.state.selectedTimePeriod } onChange={ this.handleTimePeriodChange } > - <MenuItem value={ "15min" }>15min</MenuItem> - <MenuItem value={ "24hours" }>24hours</MenuItem> + <Select className={classes.selectDropdown} value={this.state.selectedTimePeriod} onChange={this.handleTimePeriodChange} > + <MenuItem value={"15min"}>15min</MenuItem> + <MenuItem value={"24hours"}>24hours</MenuItem> </Select> </FormControl> - { this.state.showPanels && ( + {this.state.showPanels && ( <div> - <Panel activePanel={ activePanel } panelId={ "PerformanceData" } onToggle={ this.onTogglePanel } title={ "Performance Data" }> - <PerformanceData selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"PerformanceData"} onToggle={this.onTogglePanel} title={"Performance Data"}> + <PerformanceData selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "ReceiveLevel" } onToggle={ this.onTogglePanel } title={ "Receive Level" }> - <ReceiveLevel selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"ReceiveLevel"} onToggle={this.onTogglePanel} title={"Receive Level"}> + <ReceiveLevel selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "TransmissionPower" } onToggle={ this.onTogglePanel } title={ "Transmission Power" }> - <TransmissionPower selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"TransmissionPower"} onToggle={this.onTogglePanel} title={"Transmission Power"}> + <TransmissionPower selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "AdaptiveModulation" } onToggle={ this.onTogglePanel } title={ "Adaptive Modulation" }> - <AdaptiveModulation selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"AdaptiveModulation"} onToggle={this.onTogglePanel} title={"Adaptive Modulation"}> + <AdaptiveModulation selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "Temperature" } onToggle={ this.onTogglePanel } title={ "Temperature" }> - <Temperature selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"Temperature"} onToggle={this.onTogglePanel} title={"Temperature"}> + <Temperature selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "SINR" } onToggle={ this.onTogglePanel } title={ "Signal-to-interference-plus-noise ratio (SINR)" }> - <SignalToInterference selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"SINR"} onToggle={this.onTogglePanel} title={"Signal-to-interference-plus-noise ratio (SINR)"}> + <SignalToInterference selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> - <Panel activePanel={ activePanel } panelId={ "CPD" } onToggle={ this.onTogglePanel } title={ "Cross Polar Discrimination" }> - <CrossPolarDiscrimination selectedTimePeriod={ this.state.selectedTimePeriod } /> + <Panel activePanel={activePanel} panelId={"CPD"} onToggle={this.onTogglePanel} title={"Cross Polar Discrimination"}> + <CrossPolarDiscrimination selectedTimePeriod={this.state.selectedTimePeriod} /> </Panel> </div> )} @@ -251,7 +249,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp }; public componentDidMount() { - this.props.getConnectedNetworkElementsIds(); + this.props.getAllDevicesPMdata(); this.props.enableFilterPerformanceData.onToggleFilter(); this.props.enableFilterReceiveLevel.onToggleFilter(); this.props.enableFilterTransmissionPower.onToggleFilter(); @@ -290,38 +288,38 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp } - /** - * Function which handles network element changes. - */ - private handleNetworkElementSelect = (selectedNetworkElement: string) => { - - this.setState({ - showLtps: true, - selectedNetworkElement: selectedNetworkElement, - showNetworkElementsTable: false, - showPanels: false, - selectedLtp: "-1" - }); - this.props.changeNode(selectedNetworkElement); - this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); -} + /** + * Function which handles network element changes. + */ + private handleNetworkElementSelect = (selectedNetworkElement: string) => { -private handleURLChange = (selectedNetworkElement: string) => { - if(selectedNetworkElement !== this.state.selectedNetworkElement) { this.setState({ showLtps: true, selectedNetworkElement: selectedNetworkElement, + showNetworkElementsTable: false, showPanels: false, selectedLtp: "-1" }); + this.props.changeNode(selectedNetworkElement); this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); } -} -/** - * Function which resets the ltps to "--select--" in the state if the passed parameter @ltpNotSelected is true. - * @param ltpNotSelected: true, if existing selected is not available in the given time period, else false - */ + private handleURLChange = (selectedNetworkElement: string) => { + if (selectedNetworkElement !== this.state.selectedNetworkElement) { + this.setState({ + showLtps: true, + selectedNetworkElement: selectedNetworkElement, + showPanels: false, + selectedLtp: "-1" + }); + this.props.getDistinctLtpsIds(selectedNetworkElement, this.state.selectedTimePeriod, "-1", this.selectFirstLtp); + } + } + + /** + * Function which resets the ltps to "--select--" in the state if the passed parameter @ltpNotSelected is true. + * @param ltpNotSelected: true, if existing selected is not available in the given time period, else false + */ private resetLtpDropdown = (ltpNotSelected: boolean) => { if (ltpNotSelected) { this.setState({ |