aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps
diff options
context:
space:
mode:
authorHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-06-07 17:55:16 +0200
committerHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-06-07 17:58:18 +0200
commit47fc603b864b52a70157515f29ec741dd9192f3a (patch)
tree12e8cb752efc4b2c92e35325780ac4242b5d791d /sdnr/wt/odlux/apps
parentd93e6a996e60fb6abce9a870cef6b2d57bfa70fd (diff)
SDNR align ODLUX
Add missing chart view to UX Performance app Issue-ID: SDNC-790 Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com> Change-Id: I6f5af1e01d2246927b8d05f826f629c7dd5f59a5 Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps')
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/plugin.tsx8
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/package.json5
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/connectedNetworkElementsActions.ts39
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts62
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx502
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx132
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx128
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx131
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx129
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx131
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx129
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts4
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/connectedNetworkElementsActionHandler.ts16
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts6
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.ts (renamed from sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.tsx)0
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.ts (renamed from sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.tsx)0
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/index.html5
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts3
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts8
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts33
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/connectedNetworkElements.ts5
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts1
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts1
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts3
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts3
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts3
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts3
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts46
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.tsx93
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx51
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts5
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx61
32 files changed, 1177 insertions, 569 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
index c9c11820e..6ab4be156 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/plugin.tsx
@@ -31,7 +31,13 @@ export function register() {
menuEntry: "Connect"
});
- applicationApi.applicationStoreInitialized.then(applicationStore => { applicationStore.dispatch(loadAllMountedNetworkElementsAsync); });
+ const updateAllMountedNetworkElements = () => {
+ applicationApi.applicationStoreInitialized.then(applicationStore => { applicationStore.dispatch(loadAllMountedNetworkElementsAsync); })
+ };
+
+ applicationApi.loginEvent.addHandler(updateAllMountedNetworkElements);
+ updateAllMountedNetworkElements();
+
// subscribe to the websocket notifications
subscribe<ObjectNotification & IFormatedMessage>(["ObjectCreationNotification", "ObjectDeletionNotification", "AttributeValueChangedNotification"], (msg => {
const store = applicationApi.applicationStore;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
index 91e0bf3d3..74b4d9c68 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json
@@ -21,7 +21,10 @@
"author": "Sai Neetha Phulmali",
"license": "Apache License, Version 2.0",
"dependencies": {
- "@odlux/framework" : "*"
+ "@odlux/framework" : "*",
+ "@odlux/connect-app": "*",
+ "react-chartjs-2":"2.7.6",
+ "chart.js":"2.8.0"
},
"peerDependencies": {
"@types/react": "16.4.14",
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/connectedNetworkElementsActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/connectedNetworkElementsActions.ts
index 0906584b7..8f7e99c40 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/connectedNetworkElementsActions.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/connectedNetworkElementsActions.ts
@@ -1,8 +1,8 @@
import { Action } from '../../../../framework/src/flux/action';
import { Dispatch } from '../../../../framework/src/flux/store';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import { ConnectedNetworkElements } from '../models/connectedNetworkElements';
-import { PerformanceHistoryService } from '../services/performanceHistoryService';
+import { ConnectedNetworkElementIds } from '../models/connectedNetworkElements';
/**
* Represents the base action.
@@ -10,32 +10,41 @@ import { PerformanceHistoryService } from '../services/performanceHistoryService
export class BaseAction extends Action { }
/**
- * Represents an action causing the store to load all connected network elements.
+ * Represents an action causing the store to load all connected network element Ids.
*/
export class LoadAllConnectedNetworkElementsAction extends BaseAction { }
/**
- * Represents an action causing the store to update all connected network elements.
+ * Represents an action causing the store to update all connected network element Ids.
*/
-export class AllConnectedNetworkElementsLoadedAction extends BaseAction {
+export class AllConnectedNetworkElementsLoadedAction extends BaseAction {
/**
* Initialize this instance.
*
- * @param connectedNetworkElements The network elements which are returned from the restconf.
+ * @param connectedNetworkElements The connected network element Ids which are loaded from the state of connectApp.
*/
- constructor(public connectedNetworkElements: ConnectedNetworkElements[] | null, public error?: string) {
+ constructor(public connectedNetworkElementIds: ConnectedNetworkElementIds[] | null, public error?: string) {
super();
}
}
/**
- * Represents an asynchronous thunk action to load all connected network elements from the restconf.
+ * Represents an asynchronous thunk action to load all connected network element Ids.
*/
-export const loadAllConnectedNetworkElementsAsync = (dispatch: Dispatch) => {
- dispatch(new LoadAllConnectedNetworkElementsAction());
- PerformanceHistoryService.getConnectedNetworkElementsList().then(networkElements => {
- networkElements && dispatch(new AllConnectedNetworkElementsLoadedAction(networkElements));
- }).catch(error => {
- dispatch(new AllConnectedNetworkElementsLoadedAction(null, error));
- });
+export const loadAllConnectedNetworkElementsAsync = (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+ dispatch(new LoadAllConnectedNetworkElementsAction());
+ const connectedNetworkElementsIds = getState().connect.mountedNetworkElements;
+ let mountIdList: ConnectedNetworkElementIds[] = [];
+ connectedNetworkElementsIds.elements.forEach(element => {
+ const connectedNetworkElement = {
+ mountId: element.mountId
+ }
+ mountIdList.push(connectedNetworkElement);
+ });
+ mountIdList.sort((a, b) => {
+ if (a.mountId < b.mountId) return -1;
+ if (a.mountId > b.mountId) return 1;
+ return 0;
+ });
+ dispatch(new AllConnectedNetworkElementsLoadedAction(mountIdList));
}; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
index d8842ffbe..577066cee 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/ltpAction.ts
@@ -1,7 +1,7 @@
import { Action } from '../../../../framework/src/flux/action';
import { Dispatch } from '../../../../framework/src/flux/store';
-import { Ltp } from '../models/availableLtps';
+import { LtpIds } from '../models/availableLtps';
import { PerformanceHistoryService } from '../services/performanceHistoryService';
/**
@@ -22,7 +22,7 @@ export class AllAvailableLtpsLoadedAction extends BaseAction {
* Initialize this instance.
* @param availableLtps The available ltps which are returned from the database.
*/
- constructor(public availableLtps: Ltp[] | null, public error?: string) {
+ constructor(public availableLtps: LtpIds[] | null, public error?: string) {
super();
}
}
@@ -37,39 +37,25 @@ export class AllAvailableLtpsLoadedAction extends BaseAction {
* @param resetLtp The function to verify if the selected ltp is also available in the selected time period database else reset the Ltp dropdown to select.
*/
export const loadDistinctLtpsbyNetworkElementAsync = (networkElement: string, selectedTimePeriod: string, selectedLtp: string, selectFirstLtp?: Function, resetLtp?: Function) => (dispatch: Dispatch) => {
- if (selectedTimePeriod == "15min") {
- dispatch(new LoadAllAvailableLtpsAction());
- PerformanceHistoryService.getDistinctLtpsFrom15minDatabase(networkElement).then(distinctLtps => {
- if(distinctLtps) {
- let ltpNotSelected: boolean = true;
- selectFirstLtp && selectFirstLtp(distinctLtps[0].key);
- distinctLtps.forEach((value: Ltp) => {
- if(value.key === selectedLtp) {
- ltpNotSelected = false;
- }
- });
- resetLtp && resetLtp(ltpNotSelected);
- dispatch(new AllAvailableLtpsLoadedAction(distinctLtps))
- }
- }).catch(error => {
- dispatch(new AllAvailableLtpsLoadedAction(null, error));
- });
- } else {
- dispatch(new LoadAllAvailableLtpsAction());
- PerformanceHistoryService.getDistinctLtpsFrom24hoursDatabase(networkElement).then(distinctLtps => {
- if(distinctLtps) {
- let ltpNotSelected: boolean = true;
- selectFirstLtp && selectFirstLtp(distinctLtps[0].key);
- distinctLtps.forEach((value: Ltp) => {
- if(value.key === selectedLtp) {
- ltpNotSelected = false;
- }
- });
- resetLtp && resetLtp(ltpNotSelected);
- dispatch(new AllAvailableLtpsLoadedAction(distinctLtps))
- }
- }).catch(error => {
- dispatch(new AllAvailableLtpsLoadedAction(null, error));
- });
- }
-}; \ No newline at end of file
+ dispatch(new LoadAllAvailableLtpsAction());
+ PerformanceHistoryService.getDistinctLtpsFromDatabase(networkElement, selectedTimePeriod).then(distinctLtps => {
+ if (distinctLtps) {
+ const ltps = getDistinctLtps(distinctLtps, selectedLtp, selectFirstLtp, resetLtp);
+ dispatch(new AllAvailableLtpsLoadedAction(ltps));
+ }
+ }).catch(error => {
+ dispatch(new AllAvailableLtpsLoadedAction(null, error));
+ });
+};
+
+const getDistinctLtps = (distinctLtps: LtpIds[], selectedLtp: string, selectFirstLtp?: Function, resetLtp?: Function) => {
+ let ltpNotSelected: boolean = true;
+ selectFirstLtp && selectFirstLtp(distinctLtps[0].key);
+ distinctLtps.forEach((value: LtpIds) => {
+ if (value.key === selectedLtp) {
+ ltpNotSelected = false;
+ }
+ });
+ resetLtp && resetLtp(ltpNotSelected);
+ return distinctLtps;
+} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
index 024315c3a..281ee2f8d 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -2,23 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { AdaptiveModulationDataType } from '../models/adaptiveModulationDataType';
-import { createAdaptiveModulation15minProperties, createAdaptiveModulation15minActions, adaptiveModulation15minReloadAction } from '../handlers/adaptiveModulation15minHandler';
-import { createAdaptiveModulation24hoursProperties, createAdaptiveModulation24hoursActions, adaptiveModulation24hoursReloadAction } from '../handlers/adaptiveModulation24hoursHandler';
-
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { createAdaptiveModulation15minProperties, createAdaptiveModulation15minActions } from '../handlers/adaptiveModulation15minHandler';
+import { createAdaptiveModulation24hoursProperties, createAdaptiveModulation24hoursActions } from '../handlers/adaptiveModulation24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
adaptiveModulation15minProperties: createAdaptiveModulation15minProperties(state),
- adaptiveModulation24hoursProperties: createAdaptiveModulation24hoursProperties(state),
+ adaptiveModulation24hoursProperties: createAdaptiveModulation24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
adaptiveModulation15minActions: createAdaptiveModulation15minActions(dispatcher.dispatch),
- adaptiveModulation24hoursActions: createAdaptiveModulation24hoursActions(dispatcher.dispatch),
+ adaptiveModulation24hoursActions: createAdaptiveModulation24hoursActions(dispatcher.dispatch)
});
type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -32,109 +34,391 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM
*/
class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <AdaptiveModulationTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "time2-states-s", title: "QAM2S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2-states", title: "QAM2", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2-states-l", title: "QAM2L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states-s", title: "QAM4S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states", title: "QAM4", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states-l", title: "QAM4L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states-s", title: "QAM16S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states", title: "QAM16", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states-l", title: "QAM16L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states-s", title: "QAM32S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states", title: "QAM32", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states-l", title: "QAM32L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states-s", title: "QAM64S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states", title: "QAM64", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states-l", title: "QAM64L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states-s", title: "QAM128S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states", title: "QAM128", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states-l", title: "QAM128L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states-s", title: "QAM256S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states", title: "QAM256", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states-l", title: "QAM256L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states-s", title: "QAM512S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states", title: "QAM512", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states-l", title: "QAM512L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states-s", title: "QAM1024S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states", title: "QAM1024", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states-l", title: "QAM1024L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states-s", title: "QAM2048S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states", title: "QAM2048", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states-l", title: "QAM2048L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states-s", title: "QAM4096S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states", title: "QAM4096", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states-l", title: "QAM4096L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states-s", title: "QAM8192S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states", title: "QAM8192", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states-l", title: "QAM8192L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.adaptiveModulation15minProperties} {...this.props.adaptiveModulation15minActions} />
- );
- } else {
- return (
- <AdaptiveModulationTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "time2-states-s", title: "QAM2S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2-states", title: "QAM2", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2-states-l", title: "QAM2L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states-s", title: "QAM4S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states", title: "QAM4", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4-states-l", title: "QAM4L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states-s", title: "QAM16S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states", title: "QAM16", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time16-states-l", title: "QAM16L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states-s", title: "QAM32S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states", title: "QAM32", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time32-states-l", title: "QAM32L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states-s", title: "QAM64S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states", title: "QAM64", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time64-states-l", title: "QAM64L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states-s", title: "QAM128S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states", title: "QAM128", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time128-states-l", title: "QAM128L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states-s", title: "QAM256S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states", title: "QAM256", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time256-states-l", title: "QAM256L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states-s", title: "QAM512S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states", title: "QAM512", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time512-states-l", title: "QAM512L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states-s", title: "QAM1024S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states", title: "QAM1024", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time1024-states-l", title: "QAM1024L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states-s", title: "QAM2048S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states", title: "QAM2048", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time2048-states-l", title: "QAM2048L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states-s", title: "QAM4096S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states", title: "QAM4096", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time4096-states-l", title: "QAM4096L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states-s", title: "QAM8192S", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states", title: "QAM8192", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "time8192-states-l", title: "QAM8192L", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.adaptiveModulation24hoursProperties} {...this.props.adaptiveModulation24hoursActions} />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.adaptiveModulation15minProperties
+ : this.props.adaptiveModulation24hoursProperties;
+
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.adaptiveModulation15minActions
+ : this.props.adaptiveModulation24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+ const adaptiveModulationColumns: ColumnModel<AdaptiveModulationDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }];
+
+ chartPagedData.datasets.forEach(ds => {
+ adaptiveModulationColumns.push(addColumnLabels<AdaptiveModulationDataType>(ds.name, ds.columnLabel));
+ });
+
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+ </>
+ );
};
-}
-export const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent));
+ /**
+ * This function gets the performance values for Adaptive modulation according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+
+ private getChartDataValues = (rows: AdaptiveModulationDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "time2-states-s",
+ label: "QAM2S",
+ borderColor: '#62a309fc',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2S",
+ }, {
+ name: "time2-states",
+ label: "QAM2",
+ borderColor: '#62a309fc',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2",
+ }, {
+ name: "time2-states-l",
+ label: "QAM2L",
+ borderColor: '#62a309fc',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2L",
+ }, {
+ name: "time4-states-s",
+ label: "QAM4S",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4S",
+ }, {
+ name: "time4-states",
+ label: "QAM4",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4",
+ }, {
+ name: "time4-states-l",
+ label: "QAM4L",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4L",
+ }, {
+ name: "time16-states-s",
+ label: "QAM16S",
+ borderColor: '#9b15e2',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM16S",
+ }, {
+ name: "time16-states",
+ label: "QAM16",
+ borderColor: '#9b15e2',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM16",
+ }, {
+ name: "time16-states-l",
+ label: "QAM16L",
+ borderColor: '#9b15e2',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM16L",
+ }, {
+ name: "time32-states-s",
+ label: "QAM32S",
+ borderColor: '#2704f5f0',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM32S",
+ }, {
+ name: "time32-states",
+ label: "QAM32",
+ borderColor: '#2704f5f0',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM32",
+ }, {
+ name: "time32-states-l",
+ label: "QAM32L",
+ borderColor: '#2704f5f0',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM32L",
+ }, {
+ name: "time64-states-s",
+ label: "QAM64S",
+ borderColor: '#347692',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM64S",
+ }, {
+ name: "time64-states",
+ label: "QAM64",
+ borderColor: '#347692',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM64",
+ }, {
+ name: "time64-states-l",
+ label: "QAM64L",
+ borderColor: '#347692',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM64L",
+ }, {
+ name: "time128-states-s",
+ label: "QAM128S",
+ borderColor: '#885e22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM128S",
+ }, {
+ name: "time128-states",
+ label: "QAM128",
+ borderColor: '#885e22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM128",
+ }, {
+ name: "time128-states-l",
+ label: "QAM128L",
+ borderColor: '#885e22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM128L",
+ }, {
+ name: "time256-states-s",
+ label: "QAM256S",
+ borderColor: '#de07807a',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM256S",
+ }, {
+ name: "time256-states",
+ label: "QAM256",
+ borderColor: '#de07807a',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM256",
+ }, {
+ name: "time256-states-l",
+ label: "QAM256L",
+ borderColor: '#de07807a',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM256L",
+ }, {
+ name: "time512-states-s",
+ label: "QAM512S",
+ borderColor: '#8fdaacde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM512S",
+ }, {
+ name: "time512-states",
+ label: "QAM512",
+ borderColor: '#8fdaacde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM512",
+ }, {
+
+ name: "time512-states-l",
+ label: "QAM512L",
+ borderColor: '#8fdaacde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM512L",
+ }, {
+
+ name: "time1024-states-s",
+ label: "QAM1024S",
+ borderColor: '#435b22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM1024S",
+ }, {
+
+ name: "time1024-states",
+ label: "QAM1024",
+ borderColor: '#435b22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM1024",
+ }, {
+
+ name: "time1024-states-l",
+ label: "QAM1024L",
+ borderColor: '#435b22',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM1024L",
+ }, {
+ name: "time2048-states-s",
+ label: "QAM2048S",
+ borderColor: '#e87a5b',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2048S",
+ }, {
+ name: "time2048-states",
+ label: "QAM2048",
+ borderColor: '#e87a5b',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2048",
+ }, {
+ name: "time2048-states-l",
+ label: "QAM2048L",
+ borderColor: '#e87a5b',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM2048L",
+ }, {
+ name: "time4096-states-s",
+ label: "QAM4096S",
+ borderColor: '#5be878',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4096S",
+ }, {
+ name: "time4096-states",
+ label: "QAM4096",
+ borderColor: '#5be878',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4096",
+ }, {
+ name: "time4096-states-l",
+ label: "QAM4096L",
+ borderColor: '#5be878',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM4096L",
+ }, {
+ name: "time8192-states-s",
+ label: "QAM8192s",
+ borderColor: '#cb5be8',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM8192S",
+ }, {
+ name: "time8192-states",
+ label: "QAM8192",
+ borderColor: '#cb5be8',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM8192",
+ }, {
+ name: "time8192-states-l",
+ label: "QAM8192L",
+ borderColor: '#cb5be8',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "QAM8192L",
+ }
+ ];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof AdaptiveModulationDataType] as string
+ });
+ });
+ });
+
+ return {
+ datasets: datasets
+ };
+ }
+}
+const AdaptiveModulation = withRouter(connect(mapProps, mapDisp)(AdaptiveModulationComponent));
export default AdaptiveModulation;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index bbed8abfe..42e3f93a6 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -2,23 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, MaterialTableCtorType, ColumnModel } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { CrossPolarDiscriminationDataType } from '../models/crossPolarDiscriminationDataType';
-import { createCrossPolarDiscrimination15minProperties, createCrossPolarDiscrimination15minActions, crossPolarDiscrimination15minReloadAction } from '../handlers/crossPolarDiscrimination15minHandler';
-import { createCrossPolarDiscrimination24hoursProperties, createCrossPolarDiscrimination24hoursActions, crossPolarDiscrimination24hoursReloadAction } from '../handlers/crossPolarDiscrimination24hoursHandler';
-
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { createCrossPolarDiscrimination15minProperties, createCrossPolarDiscrimination15minActions } from '../handlers/crossPolarDiscrimination15minHandler';
+import { createCrossPolarDiscrimination24hoursProperties, createCrossPolarDiscrimination24hoursActions } from '../handlers/crossPolarDiscrimination24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
crossPolarDiscrimination15minProperties: createCrossPolarDiscrimination15minProperties(state),
- crossPolarDiscrimination24hoursProperties: createCrossPolarDiscrimination24hoursProperties(state),
+ crossPolarDiscrimination24hoursProperties: createCrossPolarDiscrimination24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
crossPolarDiscrimination15minActions: createCrossPolarDiscrimination15minActions(dispatcher.dispatch),
- crossPolarDiscrimination24hoursActions: createCrossPolarDiscrimination24hoursActions(dispatcher.dispatch),
+ crossPolarDiscrimination24hoursActions: createCrossPolarDiscrimination24hoursActions(dispatcher.dispatch)
});
type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -32,43 +34,87 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro
*/
class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <CrossPolarDiscriminationTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "xpd-min", title: "CPD (min)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "xpd-avg", title: "CPD (avg)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "xpd-max", title: "CPD (max)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.crossPolarDiscrimination15minProperties} {...this.props.crossPolarDiscrimination15minActions} />
- );
- } else {
- return (
- <CrossPolarDiscriminationTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "xpd-min", title: "CPD (min)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "xpd-avg", title: "CPD (avg)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "xpd-max", title: "CPD (max)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.crossPolarDiscrimination24hoursProperties} {...this.props.crossPolarDiscrimination24hoursActions} />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.crossPolarDiscrimination15minProperties
+ : this.props.crossPolarDiscrimination24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.crossPolarDiscrimination15minActions
+ : this.props.crossPolarDiscrimination24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+
+ const cpdColumns: ColumnModel<CrossPolarDiscriminationDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ cpdColumns.push(addColumnLabels<CrossPolarDiscriminationDataType>(ds.name, ds.columnLabel));
+ });
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
+ </>
+ );
};
-}
-export const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent));
+ /**
+ * This function gets the performance values for CPD according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+ private getChartDataValues = (rows: CrossPolarDiscriminationDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "xpd-min",
+ label: "xpd-min",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "CPD (min)[db]"
+ }, {
+ name: "xpd-avg",
+ label: "xpd-avg",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "CPD (avg)[db]"
+ }, {
+ name: "xpd-max",
+ label: "xpd-max",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "CPD (max)[db]"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof CrossPolarDiscriminationDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
+}
+const CrossPolarDiscrimination = withRouter(connect(mapProps, mapDisp)(CrossPolarDiscriminationComponent));
export default CrossPolarDiscrimination;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index e9a373b11..578022db7 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -2,22 +2,24 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
-
import { PerformanceDataType } from '../models/performanceDataType';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createPerformanceData15minProperties, createPerformanceData15minActions } from '../handlers/performanceData15minHandler';
import { createPerformanceData24hoursProperties, createPerformanceData24hoursActions } from '../handlers/performanceData24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
performanceData15minProperties: createPerformanceData15minProperties(state),
- performanceData24hoursProperties: createPerformanceData24hoursProperties(state),
+ performanceData24hoursProperties: createPerformanceData24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
performanceData15minActions: createPerformanceData15minActions(dispatcher.dispatch),
- performanceData24hoursActions: createPerformanceData24hoursActions(dispatcher.dispatch),
+ performanceData24hoursActions: createPerformanceData24hoursActions(dispatcher.dispatch)
});
type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -31,45 +33,87 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD
*/
class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <PerformanceDataTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "es", title: "ES", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "ses", title: "SES", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "unavailability", title: "UAS", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.performanceData15minProperties} {...this.props.performanceData15minActions}
- />
- );
- } else {
- return (
- <PerformanceDataTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "es", title: "ES", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "ses", title: "SES", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "unavailability", title: "UAS", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.performanceData24hoursProperties} {...this.props.performanceData24hoursActions}
- />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.performanceData15minProperties
+ : this.props.performanceData24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.performanceData15minActions
+ : this.props.performanceData24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+ const performanceColumns: ColumnModel<PerformanceDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ performanceColumns.push(addColumnLabels<PerformanceDataType>(ds.name, ds.columnLabel));
+ });
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
+ </>
+ );
};
+
+ /**
+ * This function gets the performance values for PerformanceData according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+ private getChartDataValues = (rows: PerformanceDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "es",
+ label: "es",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "ES"
+ }, {
+ name: "ses",
+ label: "ses",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "SES"
+ }, {
+ name: "unavailability",
+ label: "unavailability",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Unavailability"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof PerformanceDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
}
-export const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent));
+const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent));
export default PerformanceData;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
index 5f62e585a..b893ce149 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -2,23 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { ReceiveLevelDataType } from '../models/receiveLevelDataType';
-import { createReceiveLevel15minProperties, createReceiveLevel15minActions, receiveLevel15minReloadAction } from '../handlers/receiveLevel15minHandler';
-import { createReceiveLevel24hoursProperties, createReceiveLevel24hoursActions, receiveLevel24hoursReloadAction } from '../handlers/receiveLevel24hoursHandler';
-
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { createReceiveLevel15minProperties, createReceiveLevel15minActions } from '../handlers/receiveLevel15minHandler';
+import { createReceiveLevel24hoursProperties, createReceiveLevel24hoursActions } from '../handlers/receiveLevel24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
receiveLevel15minProperties: createReceiveLevel15minProperties(state),
- receiveLevel24hoursProperties: createReceiveLevel24hoursProperties(state),
+ receiveLevel24hoursProperties: createReceiveLevel24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
receiveLevel15minActions: createReceiveLevel15minActions(dispatcher.dispatch),
- receiveLevel24hoursActions: createReceiveLevel24hoursActions(dispatcher.dispatch),
+ receiveLevel24hoursActions: createReceiveLevel24hoursActions(dispatcher.dispatch)
});
type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -32,43 +34,88 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat
*/
class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <ReceiveLevelTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "rx-level-min", title: "Rx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rx-level-avg", title: "Rx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rx-level-max", title: "Rx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.receiveLevel15minProperties} {...this.props.receiveLevel15minActions} />
- );
- } else {
- return (
- <ReceiveLevelTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "rx-level-min", title: "Rx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rx-level-avg", title: "Rx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rx-level-max", title: "Rx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.receiveLevel24hoursProperties} {...this.props.receiveLevel24hoursActions} />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.receiveLevel15minProperties
+ : this.props.receiveLevel24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.receiveLevel15minActions
+ : this.props.receiveLevel24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+ const receiveLevelColumns: ColumnModel<ReceiveLevelDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ receiveLevelColumns.push(addColumnLabels<ReceiveLevelDataType>(ds.name, ds.columnLabel));
+ });
+
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} />
+ </>
+ );
};
+
+ /**
+ * This function gets the performance values for ReceiveLevel according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+ private getChartDataValues = (rows: ReceiveLevelDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "rx-level-min",
+ label: "rx-level-min",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rx min"
+ }, {
+ name: "rx-level-avg",
+ label: "rx-level-avg",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rx avg"
+ }, {
+ name: "rx-level-max",
+ label: "rx-level-max",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rx max"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof ReceiveLevelDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
}
-export const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent));
+const ReceiveLevel = withRouter(connect(mapProps, mapDisp)(ReceiveLevelComponent));
export default ReceiveLevel;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
index bd612822e..90ed1a9cb 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -2,22 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { SignalToInterferenceDataType } from '../models/signalToInteferenceDataType';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createSignalToInterference15minProperties, createSignalToInterference15minActions } from '../handlers/signalToInterference15minHandler';
import { createSignalToInterference24hoursProperties, createSignalToInterference24hoursActions } from '../handlers/signalToInterference24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
signalToInterference15minProperties: createSignalToInterference15minProperties(state),
- signalToInterference24hoursProperties: createSignalToInterference24hoursProperties(state),
+ signalToInterference24hoursProperties: createSignalToInterference24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
signalToInterference15minActions: createSignalToInterference15minActions(dispatcher.dispatch),
- signalToInterference24hoursActions: createSignalToInterference24hoursActions(dispatcher.dispatch),
+ signalToInterference24hoursActions: createSignalToInterference24hoursActions(dispatcher.dispatch)
});
type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -31,45 +34,91 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT
*/
class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <SignalToInterferenceTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "snir-min", title: "SINR (min)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "snir-avg", title: "SINR (avg)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "snir-max", title: "SINR (max)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.signalToInterference15minProperties} {...this.props.signalToInterference15minActions}
- />
- );
- } else {
- return (
- <SignalToInterferenceTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "snir-min", title: "SINR (min)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "snir-avg", title: "SINR (avg)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "snir-max", title: "SINR (max)[db]", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.signalToInterference24hoursProperties} {...this.props.signalToInterference24hoursActions}
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.signalToInterference15minProperties
+ : this.props.signalToInterference24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.signalToInterference15minActions
+ : this.props.signalToInterference24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+
+ const sinrColumns: ColumnModel<SignalToInterferenceDataType>[] = [
+
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ sinrColumns.push(addColumnLabels<SignalToInterferenceDataType>(ds.name, ds.columnLabel));
+ });
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
/>
- );
- }
+ </>
+ );
};
+
+ /**
+ * This function gets the performance values for SINR according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+
+ private getChartDataValues = (rows: SignalToInterferenceDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "snir-min",
+ label: "snir-min",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "SINR (min)[db]"
+ }, {
+ name: "snir-avg",
+ label: "snir-avg",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "SINR (avg)[db]"
+ }, {
+ name: "snir-max",
+ label: "snir-max",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "SINR (max)[db]"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof SignalToInterferenceDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
}
-export const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent));
+const SignalToInterference = withRouter(connect(mapProps, mapDisp)(SignalToInterferenceComponent));
export default SignalToInterference;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
index 1496396aa..f105bfd46 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -2,23 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { TemperatureDataType } from '../models/temperatureDataType';
-import { createTemperature15minProperties, createTemperature15minActions, temperature15minReloadAction } from '../handlers/temperature15minHandler';
-import { createTemperature24hoursProperties, createTemperature24hoursActions, temperature24hoursReloadAction } from '../handlers/temperature24hoursHandler';
-
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
+import { createTemperature15minProperties, createTemperature15minActions } from '../handlers/temperature15minHandler';
+import { createTemperature24hoursProperties, createTemperature24hoursActions } from '../handlers/temperature24hoursHandler';
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
temperature15minProperties: createTemperature15minProperties(state),
- temperature24hoursProperties: createTemperature24hoursProperties(state),
+ temperature24hoursProperties: createTemperature24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
temperature15minActions: createTemperature15minActions(dispatcher.dispatch),
- temperature24hoursActions: createTemperature24hoursActions(dispatcher.dispatch),
+ temperature24hoursActions: createTemperature24hoursActions(dispatcher.dispatch)
});
type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -32,43 +34,88 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT
*/
class TemperatureComponent extends React.Component<TemperatureComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <TemperatureTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "rf-temp-min", title: "Rx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rf-temp-avg", title: "Rx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rf-temp-max", title: "Rx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.temperature15minProperties} {...this.props.temperature15minActions} />
- );
- } else {
- return (
- <TemperatureTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "rf-temp-min", title: "Rx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rf-temp-avg", title: "Rx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "rf-temp-max", title: "Rx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.temperature24hoursProperties} {...this.props.temperature24hoursActions} />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.temperature15minProperties
+ : this.props.temperature24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.temperature15minActions
+ : this.props.temperature24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+ const temperatureColumns: ColumnModel<TemperatureDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ temperatureColumns.push(addColumnLabels<TemperatureDataType>(ds.name, ds.columnLabel));
+ });
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} />
+ </>
+ );
};
+
+ /**
+ * This function gets the performance values for Temperature according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+
+ private getChartDataValues = (rows: TemperatureDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "rf-temp-min",
+ label: "rf-temp-min",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rf Temp Min[deg C]"
+ }, {
+ name: "rf-temp-avg",
+ label: "rf-temp-avg",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rf Temp Avg[deg C]"
+ }, {
+ name: "rf-temp-max",
+ label: "rf-temp-max",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Rf Temp Max[deg C]"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof TemperatureDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
}
-export const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent));
+const Temperature = withRouter(connect(mapProps, mapDisp)(TemperatureComponent));
export default Temperature;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index 10c25874a..088a83eed 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -2,23 +2,25 @@ import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { MaterialTable, ColumnType, ColumnModel, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { TransmissionPowerDataType } from '../models/transmissionPowerDataType';
+import { IDataSet, IDataSetsObject } from '../models/chartTypes';
import { createTransmissionPower15minProperties, createTransmissionPower15minActions } from '../handlers/transmissionPower15minHandler';
import { createTransmissionPower24hoursProperties, createTransmissionPower24hoursActions } from '../handlers/transmissionPower24hoursHandler';
-
+import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils';
+import { addColumnLabels } from '../utils/tableUtils';
const mapProps = (state: IApplicationStoreState) => ({
transmissionPower15minProperties: createTransmissionPower15minProperties(state),
- transmissionPower24hoursProperties: createTransmissionPower24hoursProperties(state),
+ transmissionPower24hoursProperties: createTransmissionPower24hoursProperties(state)
});
const mapDisp = (dispatcher: IDispatcher) => ({
transmissionPower15minActions: createTransmissionPower15minActions(dispatcher.dispatch),
- transmissionPower24hoursActions: createTransmissionPower24hoursActions(dispatcher.dispatch),
+ transmissionPower24hoursActions: createTransmissionPower24hoursActions(dispatcher.dispatch)
});
type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
@@ -32,43 +34,90 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi
*/
class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{
render(): JSX.Element {
- if (this.props.selectedTimePeriod == "15min") {
- return (
- <TransmissionPowerTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "tx-level-min", title: "Tx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "tx-level-avg", title: "Tx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "tx-level-max", title: "Tx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.transmissionPower15minProperties} {...this.props.transmissionPower15minActions} />
- );
- } else {
- return (
- <TransmissionPowerTable idProperty={"_id"} columns={[
- { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
- { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
- { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
- {
- property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
- const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
- return <div >{suspectIntervalFlag} </div>
- }
- },
- { property: "tx-level-min", title: "Tx min", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "tx-level-avg", title: "Tx avg", type: ColumnType.text, disableFilter: true, disableSorting: true },
- { property: "tx-level-max", title: "Tx max", type: ColumnType.text, disableFilter: true, disableSorting: true },
- ]} {...this.props.transmissionPower24hoursProperties} {...this.props.transmissionPower24hoursActions} />
- );
- }
+ const properties = this.props.selectedTimePeriod === "15min"
+ ? this.props.transmissionPower15minProperties
+ : this.props.transmissionPower24hoursProperties;
+ const actions = this.props.selectedTimePeriod === "15min"
+ ? this.props.transmissionPower15minActions
+ : this.props.transmissionPower24hoursActions;
+
+ const chartPagedData = this.getChartDataValues(properties.rows);
+
+ const transmissionColumns: ColumnModel<TransmissionPowerDataType>[] = [
+ { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
+ { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
+ { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
+ {
+ property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
+ return <div >{suspectIntervalFlag} </div>
+ }
+ }
+ ];
+
+ chartPagedData.datasets.forEach(ds => {
+ transmissionColumns.push(addColumnLabels<TransmissionPowerDataType>(ds.name, ds.columnLabel));
+ });
+
+ return (
+ <>
+ {lineChart(chartPagedData)}
+ <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
+ </>
+ );
};
+
+ /**
+ * This function gets the performance values for TransmissionPower according on the chartjs dataset structure
+ * which is to be sent to the chart.
+ */
+
+ private getChartDataValues = (rows: TransmissionPowerDataType[]): IDataSetsObject => {
+ const _rows = [...rows];
+ sortDataByTimeStamp(_rows);
+
+ const datasets: IDataSet[] = [{
+ name: "tx-level-min",
+ label: "tx-level-min",
+ borderColor: '#0e17f3de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Tx min"
+ }, {
+ name: "tx-level-avg",
+ label: "tx-level-avg",
+ borderColor: '#08edb6de',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Tx avg"
+ }, {
+ name: "tx-level-max",
+ label: "tx-level-max",
+ borderColor: '#b308edde',
+ bezierCurve: false,
+ lineTension: 0,
+ fill: false,
+ data: [],
+ columnLabel: "Tx max"
+ }];
+
+ _rows.forEach(row => {
+ datasets.forEach(ds => {
+ ds.data.push({
+ x: row["time-stamp"],
+ y: row[ds.name as keyof TransmissionPowerDataType] as string
+ });
+ });
+ });
+ return {
+ datasets: datasets
+ };
+ }
}
-export const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent));
+const TransmissionPower = withRouter(connect(mapProps, mapDisp)(TransmissionPowerComponent));
export default TransmissionPower;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
index 2fd0ac8f1..415b073c9 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/availableLtpsActionHandler.ts
@@ -5,10 +5,10 @@ import {
LoadAllAvailableLtpsAction,
} from '../actions/ltpAction';
-import { Ltp } from '../models/availableLtps';
+import { LtpIds } from '../models/availableLtps';
export interface IAvailableLtpsState {
- distinctLtps: Ltp[];
+ distinctLtps: LtpIds[];
busy: boolean;
}
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/connectedNetworkElementsActionHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/connectedNetworkElementsActionHandler.ts
index 039ae5357..ad153f0ec 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/connectedNetworkElementsActionHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/connectedNetworkElementsActionHandler.ts
@@ -1,19 +1,15 @@
import { IActionHandler } from '../../../../framework/src/flux/action';
-import {
- AllConnectedNetworkElementsLoadedAction,
- LoadAllConnectedNetworkElementsAction,
-} from '../actions/connectedNetworkElementsActions';
-
-import { ConnectedNetworkElements } from '../models/connectedNetworkElements';
+import { AllConnectedNetworkElementsLoadedAction, LoadAllConnectedNetworkElementsAction } from '../actions/connectedNetworkElementsActions';
+import { ConnectedNetworkElementIds } from '../models/connectedNetworkElements';
export interface IConnectedNetworkElementsState {
- connectedNetworkElements: ConnectedNetworkElements[];
+ connectedNetworkElementIds: ConnectedNetworkElementIds[];
busy: boolean;
}
const connectedNetworkElementsStateInit: IConnectedNetworkElementsState = {
- connectedNetworkElements: [],
+ connectedNetworkElementIds: [],
busy: false
};
@@ -26,10 +22,10 @@ export const connectedNetworkElementsActionHandler: IActionHandler<IConnectedNet
};
} else if (action instanceof AllConnectedNetworkElementsLoadedAction) {
- if (!action.error && action.connectedNetworkElements) {
+ if (!action.error && action.connectedNetworkElementIds) {
state = {
...state,
- connectedNetworkElements: action.connectedNetworkElements,
+ connectedNetworkElementIds: action.connectedNetworkElementIds,
busy: false
};
} else {
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
index 1cf814b5a..43813e573 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/performanceHistoryRootHandler.ts
@@ -6,6 +6,7 @@ import { combineActionHandler } from '../../../../framework/src/flux/middleware'
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import { IActionHandler } from '../../../../framework/src/flux/action';
+import { IConnectAppStoreState } from '../../../connectApp/src/handlers/connectAppRootHandler';
import { IPerformanceData15minState, performanceData15minActionHandler } from './performanceData15minHandler';
import { IReceiveLevel15minState, receiveLevel15minActionHandler } from './receiveLevel15minHandler';
import { ITransmissionPower15minState, transmissionPower15minActionHandler } from './transmissionPower15minHandler';
@@ -55,6 +56,7 @@ const currentOpenPanelHandler: IActionHandler<string | null> = (state = null, ac
declare module '../../../../framework/src/store/applicationStore' {
interface IApplicationStoreState {
performanceHistory: IPerformanceHistoryStoreState;
+ connect: IConnectAppStoreState;
}
}
@@ -75,9 +77,9 @@ const actionHandlers = {
signalToInterference24hours: signalToInterference24hoursActionHandler,
crossPolarDiscrimination15min: crossPolarDiscrimination15minActionHandler,
crossPolarDiscrimination24hours: crossPolarDiscrimination24hoursActionHandler,
- currentOpenPanel: currentOpenPanelHandler,
+ currentOpenPanel: currentOpenPanelHandler
};
-export const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
+const performanceHistoryRootHandler = combineActionHandler<IPerformanceHistoryStoreState>(actionHandlers);
export default performanceHistoryRootHandler;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.ts
index 20fb57035..20fb57035 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/temperature15minHandler.ts
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.ts
index e6ba90f10..e6ba90f10 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/handlers/transmissionPower15minHandler.ts
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/index.html b/sdnr/wt/odlux/apps/performanceHistoryApp/src/index.html
index fce395d33..8cb775be2 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/index.html
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/index.html
@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="./vendor.css" >
+ <!-- <link rel="stylesheet" href="./vendor.css" > -->
<title>PM History Application</title>
</head>
@@ -15,7 +15,8 @@
<script type="text/javascript" src="./config.js"></script>
<script>
// run the application
- require(["app","performanceHistoryApp"], function (app, performanceHistoryApp) {
+ require(["app", "connectApp", "performanceHistoryApp"], function (app, connectApp, performanceHistoryApp) {
+ connectApp.register();
performanceHistoryApp.register();
app("./app.tsx").runApplication();
});
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts
index 686e3bc96..701d54a38 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/adaptiveModulationDataType.ts
@@ -47,7 +47,6 @@ export type AdaptiveModulationDataType = {
"time8192-states-l": string;
};
-
export type AdaptiveModulationResult = { "performance-data": AdaptiveModulationDataType };
-export type AdaptiveModulation = AdaptiveModulationDataType & { _id: string }; \ No newline at end of file
+export type AdaptiveModulation = AdaptiveModulationDataType & { _id: string };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts
index 15a27f147..d5a6c6888 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/availableLtps.ts
@@ -1,14 +1,14 @@
- export type Ltp = {
+ export type LtpIds = {
key: string
}
- export type Bucket={
- buckets: Ltp[]
+ export type Bucket<T>={
+ buckets: T[]
}
/**
* Represents distinct available ltps using elasticsearch aggregations structure.
*/
export type DistinctLtp = {
- "uuid-interface": Bucket
+ "uuid-interface": Bucket<LtpIds>
}
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts
new file mode 100644
index 000000000..8ea59e2ec
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/chartTypes.ts
@@ -0,0 +1,33 @@
+export interface IData {
+ x: string;
+ y: string;
+}
+
+/**
+ * Structure of chartjs dataset with the chart properties.
+ */
+ export interface IDataSet {
+ name: string,
+ label: string,
+ lineTension: 0,
+ bezierCurve: boolean;
+ fill: boolean,
+ borderColor: string,
+ data: IData[],
+ columnLabel:string
+ }
+
+/**
+ * Structure of chartjs dataset which is sent to the chart.
+ */
+ export interface IDataSetsObject {
+ datasets: IDataSet[]
+ }
+
+/**
+ * Interface used by chart for sorting on time-stamp
+ */
+ export interface ITimeStamp {
+ "time-stamp": string;
+ }
+ \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/connectedNetworkElements.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/connectedNetworkElements.ts
index f4afa645d..b7277f777 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/connectedNetworkElements.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/connectedNetworkElements.ts
@@ -1,6 +1,7 @@
/**
* Represents connected network elements.
*/
-export type ConnectedNetworkElements = {
- mountId: string,
+
+export type ConnectedNetworkElementIds = {
+ mountId: string;
}
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts
index 2dc183eda..43e74eb3e 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/crossPolarDiscriminationDataType.ts
@@ -14,7 +14,6 @@ export type CrossPolarDiscriminationDataType = {
"xpd-max": string;
};
-
export type CrossPolarDiscriminationResult = { "performance-data": CrossPolarDiscriminationDataType };
export type CrossPolarDiscrimination = CrossPolarDiscriminationDataType & { _id: string }; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts
index 6972998b6..3c9b5cb21 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/performanceDataType.ts
@@ -14,7 +14,6 @@ export type PerformanceDataType = {
"unavailability": string;
};
-
export type PerformanceResult = { "performance-data": PerformanceDataType };
export type Performance = PerformanceDataType & { _id: string }; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts
index 9f51c8fee..57ea48cce 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/receiveLevelDataType.ts
@@ -14,7 +14,6 @@ export type ReceiveLevelDataType = {
"rx-level-max": string;
};
-
export type ReceiveLevelResult = { "performance-data": ReceiveLevelDataType };
-export type ReceiveLevel = ReceiveLevelDataType & { _id: string }; \ No newline at end of file
+export type ReceiveLevel = ReceiveLevelDataType & { _id: string };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts
index 73934bd85..51d43b455 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/signalToInteferenceDataType.ts
@@ -14,7 +14,6 @@ export type SignalToInterferenceDataType = {
"snir-max": string;
};
-
export type SignalToInterferenceResult = { "performance-data": SignalToInterferenceDataType };
-export type SignalToInterference = SignalToInterferenceDataType & { _id: string }; \ No newline at end of file
+export type SignalToInterference = SignalToInterferenceDataType & { _id: string };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts
index e5be6e36c..3179d7b6a 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/temperatureDataType.ts
@@ -14,7 +14,6 @@ export type TemperatureDataType = {
"rf-temp-max": string;
};
-
export type TemperatureResult = { "performance-data": TemperatureDataType };
-export type Temperature = TemperatureDataType & { _id: string }; \ No newline at end of file
+export type Temperature = TemperatureDataType & { _id: string };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts
index 948baff12..af6f9892d 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/models/transmissionPowerDataType.ts
@@ -14,7 +14,6 @@ export type TransmissionPowerDataType = {
"tx-level-max": string;
};
-
export type TransmissionPowerResult = { "performance-data": TransmissionPowerDataType };
-export type TransmissionPower = TransmissionPowerDataType & { _id: string }; \ No newline at end of file
+export type TransmissionPower = TransmissionPowerDataType & { _id: string };
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts
new file mode 100644
index 000000000..d0b8346cd
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.ts
@@ -0,0 +1,46 @@
+import { requestRest } from '../../../../framework/src/services/restService';
+import { Result } from '../../../../framework/src/models/elasticSearch';
+
+import { DistinctLtp, LtpIds } from '../models/availableLtps';
+
+/**
+ * Represents a web api accessor service for Network elements actions.
+ */
+class PerformanceService {
+
+ /**
+ * Get distinct ltps based on the selected network element and time period from the historicalperformance15min database table.
+ */
+ public async getDistinctLtpsFromDatabase(networkElement: string, selectedTimePeriod: string): Promise<LtpIds[] | null> {
+ let path;
+ const query = {
+ "size": 0,
+ "query": {
+ "match": {
+ "node-name": networkElement
+ }
+ },
+ "aggs": {
+ "uuid-interface": {
+ "terms": {
+ "field": "uuid-interface"
+ }
+ }
+ }
+ };
+
+ if (selectedTimePeriod === "15min") {
+ path = 'database/sdnperformance/historicalperformance15min/_search';
+ } else {
+ path = 'database/sdnperformance/historicalperformance24h/_search';
+ }
+
+ const result = await requestRest<Result<DistinctLtp>>(path, { method: "POST", body: JSON.stringify(query) });
+ return result && result.aggregations && result.aggregations["uuid-interface"].buckets.map(ne => ({
+ key: ne.key
+ })) || null;
+ }
+}
+
+export const PerformanceHistoryService = new PerformanceService();
+export default PerformanceHistoryService;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.tsx
deleted file mode 100644
index a1cdcffcc..000000000
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/services/performanceHistoryService.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { requestRest } from '../../../../framework/src/services/restService';
-import { Result } from '../../../../framework/src/models/elasticSearch';
-
-import { ConnectedNetworkElements } from '../models/connectedNetworkElements';
-import { DistinctLtp, Ltp } from '../models/availableLtps';
-import { Topology, TopologyNode } from '../models/topologyNetConf';
-
-/**
- * Represents a web api accessor service for Network elements actions.
- */
-class PerformanceService {
-
- private static networkElementTopology = (mountPoint: TopologyNode) => {
- const mountId = mountPoint["node-id"];
- return {
- mountId: mountId,
- }
- }
-
- /**
- * Get all connected network elements from restconf.
- */
- public async getConnectedNetworkElementsList(): Promise<ConnectedNetworkElements[] | null> {
- const path = "restconf/operational/network-topology:network-topology/topology/topology-netconf";
- const topologyRequestPomise = requestRest<{ topology: Topology[] | null }>(path, { method: "GET" }, true);
- const [netconfResponse] = await Promise.all([topologyRequestPomise]);
- const topologyNetconf = netconfResponse && netconfResponse.topology && netconfResponse.topology.find(topology => topology["topology-id"] === "topology-netconf");
- let mountPoints = topologyNetconf && topologyNetconf.node && topologyNetconf.node.filter(
- mountPoint => mountPoint["netconf-node-topology:connection-status"] == "connected").map(mountedElement => {
- return PerformanceService.networkElementTopology(mountedElement);
- });
- return mountPoints || [];
- }
-
- /**
- * Get distinct ltps based on the selected network element and time period from the historicalperformance15min database table.
- */
- public async getDistinctLtpsFrom15minDatabase(networkElement: string): Promise<Ltp[] | null> {
- const path = 'database/sdnperformance/historicalperformance15min/_search';
- const query = {
- "size": 0,
- "query": {
- "match": {
- "node-name": networkElement
- }
- },
- "aggs": {
- "uuid-interface": {
- "terms": {
- "field": "uuid-interface"
- }
- }
- }
- };
- const result = await requestRest<Result<DistinctLtp>>(path, { method: "POST", body: JSON.stringify(query) });
- if(result && result.aggregations) {
- }
- return result && result.aggregations && result.aggregations["uuid-interface"].buckets.map(ne=>({
- key:ne.key
- }))|| null;
- }
-
- /**
- * Get distinct ltps based on the selected network element and time period from the historicalperformance24h database table.
- */
- public async getDistinctLtpsFrom24hoursDatabase(networkElement: string): Promise<Ltp[] | null> {
- const path = 'database/sdnperformance/historicalperformance24h/_search';
- const query = {
- "size": 0,
- "query": {
- "match": {
- "node-name": networkElement
- }
- },
- "aggs": {
- "uuid-interface": {
- "terms": {
- "field": "uuid-interface"
- }
- }
- }
- };
- const result = await requestRest<Result<DistinctLtp>>(path, { method: "POST", body: JSON.stringify(query) });
- if(result && result.aggregations) {
- }
- return result && result.aggregations && result.aggregations["uuid-interface"].buckets.map(ne=>({
- key:ne.key
- }))|| null;
- }
-}
-
-export const PerformanceHistoryService = new PerformanceService();
-export default PerformanceHistoryService;
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
new file mode 100644
index 000000000..5d583e855
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/chartUtils.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { IDataSetsObject } from '../models/chartTypes';
+import { Line } from 'react-chartjs-2';
+import * as moment from 'moment';
+import { ITimeStamp } from 'models/chartTypes';
+
+export const lineChart = (chartPagedData: IDataSetsObject) => {
+ return (
+ <Line ref="chart" data={chartPagedData} options={{
+ scales: {
+ xAxes: [{
+ type: 'time',
+ time: {
+ displayFormats: {
+ 'second': 'DD MMM YYYY HH:mm:ss',
+ 'minute': 'DD MMM YYYY HH:mm:ss',
+ 'hour': 'DD MMM YYYY HH:mm:ss',
+ 'year': 'DD MMM YYYY HH:mm:ss',
+ },
+ parser: function (date: string) {
+ let offsetValue = new Date().getTimezoneOffset();
+ var utcDate = moment(date, 'YYYY-MM-DDTHH:mm:ss').utcOffset(offsetValue).utc(false);
+ return utcDate;
+ }
+ },
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Timestamp'
+ }
+ }],
+ yAxes: [{
+ ticks: {
+ beginAtZero: true
+ },
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }} />
+ );
+}
+
+export const sortDataByTimeStamp = <T extends ITimeStamp>(_rows: T[]): T[] => {
+ return (_rows.sort((a, b) => {
+ const result = Date.parse(a["time-stamp"]) - Date.parse(b["time-stamp"]);
+ return isNaN(result) ? 0 : result;
+ }));
+} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts
new file mode 100644
index 000000000..ad50e5165
--- /dev/null
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/utils/tableUtils.ts
@@ -0,0 +1,5 @@
+import { ColumnType, ColumnModel } from '../../../../framework/src/components/material-table';
+
+export const addColumnLabels = <T>(name: string, title: string, disableFilter = true, disableSorting = true): ColumnModel<T> => {
+ return { property: name as keyof T, title: title, type: ColumnType.text, disableFilter: disableFilter, disableSorting: disableSorting };
+}
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index 12027e499..0cadfffe7 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -10,14 +10,15 @@ import { IApplicationStoreState } from '../../../../framework/src/store/applicat
import { Panel } from '../../../../framework/src/components/material-ui';
import { PanelId } from '../models/panelId';
-import { PerformanceData } from '../components/performanceData';
-import { ReceiveLevel } from '../components/receiveLevel';
-import { TransmissionPower } from '../components/transmissionPower';
-import { AdaptiveModulation } from '../components/adaptiveModulation';
-import { Temperature } from '../components/temperature';
-import { SignalToInterference } from '../components/signalToInterference';
-import { CrossPolarDiscrimination } from '../components/crossPolarDiscrimination';
+import PerformanceData from '../components/performanceData';
+import ReceiveLevel from '../components/receiveLevel';
+import TransmissionPower from '../components/transmissionPower';
+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 { loadAllMountedNetworkElementsAsync } from '../../../connectApp/src/actions/mountedNetworkElementsActions';
import { loadDistinctLtpsbyNetworkElementAsync } from '../actions/ltpAction';
import { SetPanelAction } from '../actions/panelChangeActions';
import { createPerformanceData15minPreActions, performanceData15minReloadAction } from '../handlers/performanceData15minHandler';
@@ -35,6 +36,7 @@ import { createSignalToInterference24hoursPreActions, signalToInterference24hour
import { createCrossPolarDiscrimination15minPreActions, crossPolarDiscrimination15minReloadAction } from '../handlers/crossPolarDiscrimination15minHandler';
import { createCrossPolarDiscrimination24hoursPreActions, crossPolarDiscrimination24hoursReloadAction } from '../handlers/crossPolarDiscrimination24hoursHandler';
+
const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
root: {
display: "flex",
@@ -61,7 +63,7 @@ const PerformanceHistoryComponentStyles = (theme: Theme) => createStyles({
const mapProps = (state: IApplicationStoreState) => ({
activePanel: state.performanceHistory.currentOpenPanel,
availableLtps: state.performanceHistory.ltps.distinctLtps,
- networkElements: state.performanceHistory.networkElements.connectedNetworkElements
+ networkElements: state.performanceHistory.networkElements.connectedNetworkElementIds
});
const mapDispatcher = (dispatcher: IDispatcher) => ({
@@ -93,8 +95,11 @@ const mapDispatcher = (dispatcher: IDispatcher) => ({
signalToInterference24hoursPreActions: createSignalToInterference24hoursPreActions(dispatcher.dispatch),
crossPolarDiscrimination15minPreActions: createCrossPolarDiscrimination15minPreActions(dispatcher.dispatch),
crossPolarDiscrimination24hoursPreActions: createCrossPolarDiscrimination24hoursPreActions(dispatcher.dispatch),
- getConnectedNetworkElements: () => dispatcher.dispatch(loadAllConnectedNetworkElementsAsync),
- getDistinctLtps: (selectedNetworkElement: string, selectedTimePeriod: string, selectedLtp: string, selectFirstLtp?: Function, resetLTP?: Function) => dispatcher.dispatch(loadDistinctLtpsbyNetworkElementAsync(selectedNetworkElement, selectedTimePeriod, selectedLtp, selectFirstLtp, resetLTP)),
+ getConnectedNetworkElementsIds: async() => {
+ await dispatcher.dispatch(loadAllMountedNetworkElementsAsync)
+ dispatcher.dispatch(loadAllConnectedNetworkElementsAsync);
+ },
+ 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))
});
@@ -135,58 +140,56 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
this.props.setCurrentPanel(nextActivePanel);
switch (nextActivePanel) {
case "PerformanceData":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadPerformanceData15min();
} else {
-
this.props.reloadPerformanceData24hours();
}
break;
case "ReceiveLevel":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadReceiveLevel15min();
} else {
this.props.reloadReceiveLevel24hours();
}
break;
case "TransmissionPower":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadTransmissionPower15min();
} else {
this.props.reloadTransmissionPower24hours();
}
break;
case "AdaptiveModulation":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadAdaptiveModulation15min();
} else {
this.props.reloadAdaptiveModulation24hours();
}
break;
case "Temperature":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadTemperature15min();
} else {
this.props.reloadTemperature24hours();
}
break;
case "SINR":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadSignalToInterference15min();
} else {
this.props.reloadSignalToInterference24hours();
}
break;
case "CPD":
- if (this.state.selectedTimePeriod == "15min") {
+ if (this.state.selectedTimePeriod === "15min") {
this.props.reloadCrossPolarDiscrimination15min();
} else {
this.props.reloadCrossPolarDiscrimination24hours();
}
break;
- case null:
- break;
default:
+ // do nothing if all panels are closed
break;
}
}
@@ -255,7 +258,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
};
public componentDidMount() {
- this.props.getConnectedNetworkElements();
+ this.props.getConnectedNetworkElementsIds();
}
/**
@@ -277,7 +280,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
"node-name": networkElement,
"uuid-interface": ltp
};
- if (timePeriod == "15min") {
+ if (timePeriod === "15min") {
this.props.performanceData15minPreActions.onPreFilterChanged(preFilter);
this.props.receiveLevel15minPreActions.onPreFilterChanged(preFilter);
this.props.transmissionPower15minPreActions.onPreFilterChanged(preFilter);
@@ -285,7 +288,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
this.props.temperature15minPreActions.onPreFilterChanged(preFilter);
this.props.signalToInterference15minPreActions.onPreFilterChanged(preFilter);
this.props.crossPolarDiscrimination15minPreActions.onPreFilterChanged(preFilter);
- } else if (timePeriod == "24hours") {
+ } else if (timePeriod === "24hours") {
this.props.performanceData24hoursPreActions.onPreFilterChanged(preFilter);
this.props.receiveLevel24hoursPreActions.onPreFilterChanged(preFilter);
this.props.transmissionPower24hoursPreActions.onPreFilterChanged(preFilter);
@@ -313,7 +316,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
selectedNetworkElement: event.target.value,
selectedLtp: "-1"
});
- this.props.getDistinctLtps(event.target.value, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
+ this.props.getDistinctLtpsIds(event.target.value, this.state.selectedTimePeriod, "-1", this.selectFirstLtp);
}
/**
@@ -335,10 +338,10 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
this.setState({
selectedTimePeriod: event.target.value,
});
- if (event.target.value == "15min") {
- this.props.getDistinctLtps(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
- } else if (event.target.value == "24hours") {
- this.props.getDistinctLtps(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
+ if (event.target.value === "15min") {
+ this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
+ } else if (event.target.value === "24hours") {
+ this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp, undefined, this.resetLtpDropdown);
}
this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value, this.state.selectedLtp);
}
@@ -359,5 +362,5 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
}
}
-export const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent));
+const PerformanceHistoryApplication = withStyles(PerformanceHistoryComponentStyles)(connect(mapProps, mapDispatcher)(PerformanceHistoryComponent));
export default PerformanceHistoryApplication;