From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- .../odlux/apps/performanceHistoryApp/package.json | 25 ++++++++-------- .../src/actions/deviceListActions.ts | 4 +-- .../src/components/chartFilter.tsx | 14 +++++---- .../src/components/ltpSelection.tsx | 19 ++++++++----- .../src/components/toggleContainer.tsx | 22 +++++++-------- .../src/views/performanceHistoryApplication.tsx | 33 ++++++++++++---------- .../apps/performanceHistoryApp/webpack.config.js | 4 +-- 7 files changed, 67 insertions(+), 54 deletions(-) (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp') diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json index af38fb116..9a08612b8 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/package.json +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/package.json @@ -21,23 +21,26 @@ "author": "Sai Neetha Phulmali", "license": "Apache-2.0", "dependencies": { - "@odlux/framework": "*", + "@emotion/react": "^11.7.0", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.2.0", + "@mui/material": "^5.2.2", + "@mui/styles": "^5.2.2", "@odlux/connect-app": "*", - "react-chartjs-2": "2.7.6", - "chart.js": "2.8.0" + "@odlux/framework": "*", + "chart.js": "2.8.0", + "react-chartjs-2": "2.7.6" }, "peerDependencies": { - "@types/react": "17.0.3", - "@types/react-dom": "17.0.2", - "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.4", - "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", + "@types/react": "17.0.37", + "@types/react-dom": "17.0.11", + "@types/react-router-dom": "5.1.7", "jquery": "3.3.1", - "react": "17.0.1", - "react-dom": "17.0.1", + "react": "17.0.2", + "react-dom": "17.0.2", "react-router-dom": "5.2.0" } -} \ No newline at end of file +} diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts index 9637fec81..2b8e6e286 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/actions/deviceListActions.ts @@ -51,8 +51,8 @@ export class AllDeviceListLoadedAction extends BaseAction { */ export const loadAllDeviceListAsync = async (dispatch: Dispatch) => { dispatch(new LoadAllDeviceListAction()); - const deviceListFromPerfHistory: DeviceListType[] = await PerformanceHistoryService.getDeviceListfromPerf15minHistory().then(ne => (ne)) || []; - const deviceListFromPerf24History: DeviceListType[] = await PerformanceHistoryService.getDeviceListfromPerf24hHistory().then(ne => (ne)) || []; + const deviceListFromPerfHistory: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf15minHistory().then(ne => (ne))) || []; + const deviceListFromPerf24History: DeviceListType[] = (await PerformanceHistoryService.getDeviceListfromPerf24hHistory().then(ne => (ne))) || []; deviceListFromPerf24History.forEach(deviceList24h => { if (deviceListFromPerfHistory.findIndex(deviceList15min => deviceList15min.nodeId === deviceList24h.nodeId) < 0) { deviceListFromPerfHistory.push(deviceList24h); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx index e7583de12..e66e6c1e6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -18,7 +18,9 @@ import * as React from 'react'; -import { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'; +import { TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@mui/material'; + +import makeStyles from '@mui/styles/makeStyles'; const styles = makeStyles({ filterInput: { @@ -44,19 +46,19 @@ const ChartFilter: React.FunctionComponent = (props) => { { props.isVisible &&
- props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ + props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ shrink: true, }} /> - props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ + props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ shrink: true, }} /> - props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ + props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ shrink: true, }} /> - + Suspect Interval - props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> None true false diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx index b6c14a9ce..ef6cfc712 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -17,13 +17,14 @@ */ import * as React from 'react'; -import { MenuItem, Select, FormControl, Typography } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { MenuItem, Select, FormControl, Typography, SelectChangeEvent } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { LtpIds } from 'models/availableLtps'; import { Loader } from '../../../../framework/src/components/material-ui'; +import { Theme } from '@mui/material/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme: Theme) => ({ display: { display: "inline-block" }, @@ -47,24 +48,28 @@ const useStyles = makeStyles(theme => ({ } })); -type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent): void }; +type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, + availableLtps: LtpIds[], + onChangeLtp(event: SelectChangeEvent ): void, + selectedTimePeriod: string, + onChangeTimePeriod(event: SelectChangeEvent ): void }; export const LtpSelection = (props: LtpSelectionProps) => { const classes = useStyles(); return ( <>

Selected Network Element: {props.selectedNE}

- + Select LTP - --Select-- {props.availableLtps.map(ltp => ({ltp.key}))} Time-Period - 15min 24hours diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx index 88dc9fd11..8696fe4d6 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -17,14 +17,14 @@ */ import * as React from 'react'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import BarChartIcon from '@material-ui/icons/BarChart'; -import TableChartIcon from '@material-ui/icons/TableChart'; -import { makeStyles } from '@material-ui/core'; -import Tooltip from '@material-ui/core/Tooltip'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import BarChartIcon from '@mui/icons-material/BarChart'; +import TableChartIcon from '@mui/icons-material/TableChart'; +import makeStyles from '@mui/styles/makeStyles'; +import Tooltip from '@mui/material/Tooltip'; import ChartFilter from './chartFilter' -import FilterListIcon from '@material-ui/icons/FilterList'; +import FilterListIcon from '@mui/icons-material/FilterList'; const styles = makeStyles({ toggleButtonContainer: { @@ -67,20 +67,20 @@ const ToggleContainer: React.FunctionComponent = (props) => {
- + - + - - + + diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index b0fd54c42..b33b442d3 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -17,10 +17,13 @@ */ import * as React from 'react'; -import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; -import FormControl from '@material-ui/core/FormControl'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import FormControl from '@mui/material/FormControl'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; @@ -50,7 +53,7 @@ import { createSignalToInterferencePreActions, signalToInterferenceReloadAction, import { createCrossPolarDiscriminationPreActions, crossPolarDiscriminationReloadAction, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler'; import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; -import { AppBar, Tabs, Tab } from '@material-ui/core'; +import { AppBar, Tabs, Tab, SelectChangeEvent } from '@mui/material'; import LtpSelection from '../components/ltpSelection'; import { ResetAllSubViewsAction } from '../actions/toggleActions'; import { ReloadAction } from '../actions/reloadAction'; @@ -152,7 +155,7 @@ class PerformanceHistoryComponent extends React.Component, newValue: PanelId) => { + onChangeTabs = (event: React.SyntheticEvent, newValue: PanelId) => { const nextActivePanel = newValue; this.changeTabs(nextActivePanel); } @@ -244,8 +247,8 @@ class PerformanceHistoryComponent extends React.Component - - + + @@ -411,25 +414,25 @@ class PerformanceHistoryComponent extends React.Component) => { + private handleTimePeriodChange = (event: SelectChangeEvent) => { const selectedTimeInterval = event.target.value === "15min" ? PmDataInterval.pmInterval15Min : PmDataInterval.pmInterval24Hours; this.setState({ - selectedTimePeriod: event.target.value, + selectedTimePeriod: event.target.value as string, }); this.props.timeIntervalChange(selectedTimeInterval); - 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); + this.props.getDistinctLtpsIds(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp, undefined, this.resetLtpDropdown); + this.preFilterChangeAndReload(this.state.selectedNetworkElement, event.target.value as string, this.state.selectedLtp); } /** * Function which handles the ltp changes. */ - private handleLtpChange = (event: React.ChangeEvent) => { + private handleLtpChange = (event:SelectChangeEvent ) => { if (event.target.value === "-1") { this.setState({ @@ -440,9 +443,9 @@ class PerformanceHistoryComponent extends React.Component { manifest: require(path.resolve(frameworkPath, "app-manifest.json")), sourceType: "umd2" }), - ...(env === "release") ? [ + ...(env === "release" ? [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: "'production'", @@ -103,7 +103,7 @@ module.exports = (env) => { from: 'index.html', to: distPath }]), - ] + ]) ], devServer: { -- cgit 1.2.3-korg