diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src/components')
7 files changed, 515 insertions, 87 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx index 5a5ebcc45..a7d96d072 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx @@ -19,7 +19,7 @@ import * as React from 'react'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; -import Refresh from '@material-ui/icons/Refresh'; +import Refresh from '@mui/icons-material/Refresh'; import { createConnectionStatusLogActions, createConnectionStatusLogProperties } from '../handlers/connectionStatusLogHandler'; import { NetworkElementConnectionLog } from '../models/networkElementConnectionLog'; diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx new file mode 100644 index 000000000..683c59623 --- /dev/null +++ b/sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx @@ -0,0 +1,425 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import * as React from 'react'; + +import { withRouter, RouteComponentProps } from 'react-router-dom'; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';; +import { Theme } from '@mui/material'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; +import { Doughnut } from 'react-chartjs-2'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; + +const styles = (theme: Theme) => createStyles({ + pageWidthSettings: { + width: '50%', + float: 'left' + }, +}) + +const scrollbar = { overflow: "auto", paddingRight: "20px" } + +let connectionStatusinitialLoad = true; +let connectionStatusinitialStateChanged = false; +let connectionStatusDataLoad: number[] = [0, 0, 0, 0]; +let connectionTotalCount = 0; + +let alarmStatusinitialLoad = true; +let alarmStatusinitialStateChanged = false; +let alarmStatusDataLoad: number[] = [0, 0, 0, 0]; +let alarmTotalCount = 0; + +const mapProps = (state: IApplicationStoreState) => ({ + connectionStatusCount: state.connect.connectionStatusCount, + alarmStatus: state.fault.faultStatus +}); + +const mapDispatch = (dispatcher: IDispatcher) => ({ + navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), +}); + +type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>; + +class DashboardHome extends React.Component<HomeComponentProps> { + constructor(props: HomeComponentProps) { + super(props); + this.state = { + } + } + + render(): JSX.Element { + const { classes } = this.props; + + if (!this.props.connectionStatusCount.isLoadingConnectionStatusChart) { + connectionStatusDataLoad = [ + this.props.connectionStatusCount.Connected, + this.props.connectionStatusCount.Connecting, + this.props.connectionStatusCount.Disconnected, + this.props.connectionStatusCount.UnableToConnect + ]; + connectionTotalCount = this.props.connectionStatusCount.Connected + this.props.connectionStatusCount.Connecting + + this.props.connectionStatusCount.Disconnected + this.props.connectionStatusCount.UnableToConnect; + + } + + if (!this.props.alarmStatus.isLoadingAlarmStatusChart) { + alarmStatusDataLoad = [ + this.props.alarmStatus.critical, + this.props.alarmStatus.major, + this.props.alarmStatus.minor, + this.props.alarmStatus.warning + ]; + alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major + + this.props.alarmStatus.minor + this.props.alarmStatus.warning; + } + + /** Available Network Connection Status chart data */ + const connectionStatusData = { + labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'], + datasets: [{ + data: connectionStatusDataLoad, + backgroundColor: [ + 'rgb(0, 153, 51)', + 'rgb(255, 102, 0)', + 'rgb(191, 191, 191)', + 'rgb(191, 191, 191)' + ] + }] + }; + + + /** No Devices available */ + const connectionStatusUnavailableData = { + labels: ['No Devices available'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(255, 255, 255)' + ] + }] + }; + + /** Loading Connection Status chart */ + const connectionStatusisLoading = { + labels: ['Loading chart...'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(255, 255, 255)' + ] + }] + }; + + /** Loading Alarm Status chart */ + const alarmStatusisLoading = { + labels: ['Loading chart...'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(255, 255, 255)' + ] + }] + }; + + /** Connection status options */ + let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect']; + const connectionStatusOptions = { + responsive: true, + maintainAspectRatio: false, + animation: { + duration: 0 + }, + plugins: { + legend: { + display: true, + position: 'top' + } + }, + onClick: (event: MouseEvent, item: any) => { + if (item[0]) { + let connectionStatus = labels[item[0]._index] + ''; + this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus); + } + } + } + + /** Connection status unavailable options */ + const connectionStatusUnavailableOptions = { + responsive: true, + maintainAspectRatio: false, + animation: { + duration: 0 + }, + plugins: { + legend: { + display: true, + position: 'top' + }, + tooltip: { + enabled: false + } + } + } + + /** Add text inside the doughnut chart for Connection Status */ + const connectionStatusPlugins = [{ + beforeDraw: function (chart: any) { + var width = chart.width, + height = chart.height, + ctx = chart.ctx; + ctx.restore(); + var fontSize = (height / 480).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.textBaseline = "top"; + var text = "Network Connection Status", + textX = Math.round((width - ctx.measureText(text).width) / 2), + textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); + } + }] + + /** Alarm status Data */ + const alarmStatusData = { + labels: [ + 'Critical', + 'Major', + 'Minor', + 'Warning' + ], + datasets: [{ + data: alarmStatusDataLoad, + backgroundColor: [ + 'rgb(240, 25, 10)', + 'rgb(240, 133, 10)', + 'rgb(240, 240, 10)', + 'rgb(46, 115, 176)' + ], + }] + } + + /** No Alarm status available */ + const alarmStatusUnavailableData = { + labels: ['No Alarms available'], + datasets: [{ + data: [1], + backgroundColor: [ + 'rgb(0, 153, 51)' + ] + }] + }; + + /** Alarm status Options */ + let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning']; + const alarmStatusOptions = { + responsive: true, + maintainAspectRatio: false, + animation: { + duration: 0 + }, + plugins: { + legend: { + display: true, + position: 'top' + } + }, + onClick: (event: MouseEvent, item: any) => { + if (item[0]) { + let severity = alarmLabels[item[0].index] + ''; + this.props.navigateToApplication("fault", '/alarmStatus/' + severity); + } + }, + }; + + /** Alarm status unavailable options */ + const alarmStatusUnavailableOptions = { + responsive: true, + maintainAspectRatio: false, + animation: { + duration: 0 + }, + plugins: { + legend: { + display: true, + position: 'top' + }, + tooltip: { + enabled: false + } + } + } + /** Add text inside the doughnut chart for Alarm Status */ + const alarmStatusPlugins = [{ + beforeDraw: function (chart: any) { + var width = chart.width, + height = chart.height, + ctx = chart.ctx; + ctx.restore(); + var fontSize = (height / 480).toFixed(2); + ctx.font = fontSize + "em sans-serif"; + ctx.textBaseline = "top"; + var text = "Network Alarm Status", + textX = Math.round((width - ctx.measureText(text).width) / 2), + textY = height / 2; + ctx.fillText(text, textX, textY); + ctx.save(); + } + }] + + return ( + <> + <div style={scrollbar} > + <h1>Welcome to ODLUX</h1> + <div style={{ width: '50%', float: 'left' }}> + {this.checkElementsAreLoaded() ? + this.checkConnectionStatus() && connectionTotalCount != 0 ? + <Doughnut + data={connectionStatusData} + type={Doughnut} + width={500} + height={500} + options={connectionStatusOptions} + plugins={connectionStatusPlugins} + /> + : <Doughnut + data={connectionStatusUnavailableData} + type={Doughnut} + width={500} + height={500} + options={connectionStatusUnavailableOptions} + plugins={connectionStatusPlugins} /> + : <Doughnut + data={connectionStatusisLoading} + type={Doughnut} + width={500} + height={500} + options={connectionStatusUnavailableOptions} + plugins={connectionStatusPlugins} + /> + } + </div> + <div style={{ width: '50%', float: 'left' }}> + {this.checkAlarmsAreLoaded() ? + this.checkAlarmStatus() && alarmTotalCount != 0 ? + <Doughnut + data={alarmStatusData} + type={Doughnut} + width={500} + height={500} + options={alarmStatusOptions} + plugins={alarmStatusPlugins} + /> + : <Doughnut + data={alarmStatusUnavailableData} + type={Doughnut} + width={500} + height={500} + options={alarmStatusUnavailableOptions} + plugins={alarmStatusPlugins} + /> + : <Doughnut + data={alarmStatusisLoading} + type={Doughnut} + width={500} + height={500} + options={alarmStatusUnavailableOptions} + plugins={alarmStatusPlugins} + /> + } + </div> + </div> + </> + ) + } + + /** Check if connection status data available */ + public checkConnectionStatus = () => { + let statusCount = this.props.connectionStatusCount; + if (statusCount.isLoadingConnectionStatusChart) { + return true; + } + if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0 + && statusCount.UnableToConnect == 0) { + return false; + } else { + return true; + } + } + + /** Check if connection status chart data is loaded */ + public checkElementsAreLoaded = () => { + let isLoadingCheck = this.props.connectionStatusCount; + if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) { + if (this.checkConnectionStatus()) { + connectionStatusinitialLoad = false; + return true; + } + return false; + } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) { + connectionStatusinitialLoad = false; + connectionStatusinitialStateChanged = true; + return !isLoadingCheck.isLoadingConnectionStatusChart; + } else if (connectionStatusinitialStateChanged) { + if (!isLoadingCheck.isLoadingConnectionStatusChart) { + connectionStatusinitialStateChanged = false; + } + return !isLoadingCheck.isLoadingConnectionStatusChart; + } + return true; + } + + /** Check if alarms data available */ + public checkAlarmStatus = () => { + let alarmCount = this.props.alarmStatus; + if (alarmCount.isLoadingAlarmStatusChart) { + return true; + } + if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) { + return false; + } + else { + return true; + } + } + + /** Check if alarm status chart data is loaded */ + public checkAlarmsAreLoaded = () => { + let isLoadingCheck = this.props.alarmStatus; + if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) { + if (this.checkAlarmStatus()) { + alarmStatusinitialLoad = false; + return true; + } + return false; + } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) { + alarmStatusinitialLoad = false; + alarmStatusinitialStateChanged = true; + return !isLoadingCheck.isLoadingAlarmStatusChart; + } else if (alarmStatusinitialStateChanged) { + if (!isLoadingCheck.isLoadingAlarmStatusChart) { + alarmStatusinitialStateChanged = false; + } + return !isLoadingCheck.isLoadingAlarmStatusChart; + } + return true; + } +} + +export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx index 061303976..7324ffab8 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -17,14 +17,14 @@ */ import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import TextField from '@mui/material/TextField'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@mui/material'; import { loadAllTlsKeyListAsync } from '../actions/tlsKeyActions'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; @@ -222,32 +222,32 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme <DialogContentText> {setting.dialogDescription} </DialogContentText> - <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" aria-label="name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} /> + <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} autoFocus margin="dense" id="name" label="Name" aria-label="name" type="text" fullWidth value={this.state.nodeId} onChange={(event) => { this.setState({ nodeId: event.target.value }); }} /> {!this.state.isNameValid && <Typography variant="body1" color="error">Name cannot be empty.</Typography>} - <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} /> + <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="ipaddress" label="IP address" aria-label="ip adress" type="text" fullWidth value={this.state.host} onChange={(event) => { this.setState({ host: event.target.value }); }} /> {!this.state.isHostSet && <Typography variant="body1" color="error">IP Adress cannot be empty.</Typography>} - <TextField disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} /> - {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null} + <TextField variant="standard" disabled={!setting.enableMountIdEditor} spellCheck={false} margin="dense" id="netconfport" label="NetConf port" aria-label="netconf port" type="number" fullWidth value={this.state.port.toString()} onChange={(event) => { this.setState({ port: +event.target.value }); }} /> + {setting.enableUsernameEditor && <TextField variant="standard" disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="username" label="Username" aria-label="username" type="text" fullWidth value={this.state.username} onChange={(event) => { this.setState({ username: event.target.value }); }} /> || null} {setting.enableUsernameEditor && <RadioGroup row aria-label="password-tls-key" name="password-tls-key" value={radioSelected} onChange={this.handleRadioChange} > - <FormControlLabel aria-label="passwordSelection" value='password' control={<Radio />} label="Password" onChange={this.onRadioSelect} /> - <FormControlLabel aria-label="tlsKeySelection" value='tlsKey' control={<Radio />} label="TlsKey" onChange={this.onRadioSelect} /> + <FormControlLabel aria-label="passwordSelection" value='password' control={<Radio color="secondary" />} label="Password" onChange={this.onRadioSelect} /> + <FormControlLabel aria-label="tlsKeySelection" value='tlsKey' control={<Radio color="secondary" />} label="TlsKey" onChange={this.onRadioSelect} /> </RadioGroup> || null} {setting.enableUsernameEditor && showPasswordTextField && - <TextField disabled={!setting.enableUsernameEditor || !showPasswordTextField} spellCheck={false} margin="dense" + <TextField variant="standard" disabled={!setting.enableUsernameEditor || !showPasswordTextField} spellCheck={false} margin="dense" id="password" aria-label="password" type="password" fullWidth value={this.state.password} onChange={(event) => { this.setState({ password: event.target.value }); }} /> || null} - <FormControl fullWidth disabled={!setting.enableUsernameEditor}> + <FormControl variant="standard" fullWidth disabled={!setting.enableUsernameEditor}> {setting.enableUsernameEditor && showTlsDropdown && <div> <InputLabel htmlFor="pass">--Select tls-key--</InputLabel> - <Select disabled={!setting.enableUsernameEditor || !showTlsDropdown} + <Select variant="standard" disabled={!setting.enableUsernameEditor || !showTlsDropdown} id="tlsKey" aria-label="tlsKey" value={this.state.tlsKey} fullWidth // displayEmpty onChange={(event) => { this.setState({ tlsKey: event.target.value as any }); }} inputProps={{ name: 'tlsKey', id: 'tlsKey' }} > @@ -259,9 +259,9 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme } </FormControl> - <FormControl fullWidth disabled={!setting.enableUsernameEditor}> + <FormControl variant="standard" fullWidth disabled={!setting.enableUsernameEditor}> <InputLabel htmlFor="active">Required</InputLabel> - <Select aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => { + <Select variant="standard" aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => { this.setState({ isRequired: event.target.value as any as boolean }); }} inputProps={{ name: 'required', id: 'required' }} fullWidth > <MenuItem value={true as any as string} aria-label="true">True</MenuItem> @@ -286,7 +286,7 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme } event.preventDefault(); event.stopPropagation(); - }} > {setting.applyButtonText} </Button> + }} color="inherit" > {setting.applyButtonText} </Button> <Button aria-label="dialog-cancel-button" onClick={(event) => { this.onCancel(); event.preventDefault(); @@ -294,7 +294,7 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme }} color="secondary"> {setting.cancelButtonText} </Button> </DialogActions> </Dialog> - ) + ); } public renderTlsKeys = () => { @@ -333,7 +333,8 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme case EditNetworkElementDialogMode.AddNewNetworkElement: element && this.props.addNewNetworkElement(element); this.setState({ - radioSelected: '' + radioSelected: '', + isPasswordSelected: true, }); break; case EditNetworkElementDialogMode.MountNetworkElement: diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx index aeaaa91e7..5514fa5f8 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx @@ -17,10 +17,10 @@ */ import * as React from 'react'; - import Button from '@material-ui/core/Button'; - import Dialog from '@material-ui/core/Dialog'; - import DialogActions from '@material-ui/core/DialogActions'; - import DialogTitle from '@material-ui/core/DialogTitle'; + import Button from '@mui/material/Button'; + import Dialog from '@mui/material/Dialog'; + import DialogActions from '@mui/material/DialogActions'; + import DialogTitle from '@mui/material/DialogTitle'; import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx index 4a7a0d269..a17a247d2 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx @@ -16,17 +16,21 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { Theme, createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; - -import AddIcon from '@material-ui/icons/Add'; -import Refresh from '@material-ui/icons/Refresh'; -import LinkIcon from '@material-ui/icons/Link'; -import LinkOffIcon from '@material-ui/icons/LinkOff'; -import RemoveIcon from '@material-ui/icons/RemoveCircleOutline'; -import EditIcon from '@material-ui/icons/Edit'; -import Info from '@material-ui/icons/Info'; -import ComputerIcon from '@material-ui/icons/Computer'; -import { MenuItem, Divider, Typography } from '@material-ui/core'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; + +import AddIcon from '@mui/icons-material/Add'; +import Refresh from '@mui/icons-material/Refresh'; +import LinkIcon from '@mui/icons-material/Link'; +import LinkOffIcon from '@mui/icons-material/LinkOff'; +import RemoveIcon from '@mui/icons-material/RemoveCircleOutline'; +import EditIcon from '@mui/icons-material/Edit'; +import Info from '@mui/icons-material/Info'; +import ComputerIcon from '@mui/icons-material/Computer'; +import { MenuItem, Divider, Typography } from '@mui/material'; import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; @@ -189,39 +193,37 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement } }; - return ( - <> - <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...canAdd ? [addRequireNetworkElementAction] : []]} columns={[ - { property: "nodeId", title: "Node Name", type: ColumnType.text }, - { property: "isRequired", title: "Required", type: ColumnType.boolean }, - { property: "status", title: "Connection Status", type: ColumnType.text, width:'15%' }, - { property: "host", title: "Host", type: ColumnType.text }, - { property: "port", title: "Port", type: ColumnType.numeric }, - { property: "coreModelCapability", title: "Core Model", type: ColumnType.text }, - { property: "deviceType", title: "Device Type", type: ColumnType.text }, - { property: "deviceFunction", title: "Device Function", type: ColumnType.text, width: '15%' } - ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => { - - return this.getContextMenu(rowData); - }} > - </NetworkElementTable> - <EditNetworkElementDialog - initialNetworkElement={networkElementToEdit} - mode={this.state.networkElementEditorMode} - onClose={this.onCloseEditNetworkElementDialog} - radioChecked={savedRadio} - /> - <RefreshNetworkElementsDialog - mode={this.state.refreshNetworkElementsEditorMode} - onClose={this.onCloseRefreshNetworkElementsDialog} - /> - <InfoNetworkElementDialog - initialNetworkElement={networkElementToEdit} - mode={this.state.infoNetworkElementEditorMode} - onClose={this.onCloseInfoNetworkElementDialog} - /> - </> - ); + return <> + <NetworkElementTable stickyHeader tableId="network-element-table" customActionButtons={[refreshNetworkElementsAction, ...(canAdd ? [addRequireNetworkElementAction] : [])]} columns={[ + { property: "nodeId", title: "Node Name", type: ColumnType.text }, + { property: "isRequired", title: "Required", type: ColumnType.boolean }, + { property: "status", title: "Connection Status", type: ColumnType.text, width:'15%' }, + { property: "host", title: "Host", type: ColumnType.text }, + { property: "port", title: "Port", type: ColumnType.numeric }, + { property: "coreModelCapability", title: "Core Model", type: ColumnType.text }, + { property: "deviceType", title: "Device Type", type: ColumnType.text }, + { property: "deviceFunction", title: "Device Function", type: ColumnType.text, width: '15%' } + ]} idProperty="id" {...this.props.networkElementsActions} {...this.props.networkElementsProperties} asynchronus createContextMenu={rowData => { + + return this.getContextMenu(rowData); + }} > + </NetworkElementTable> + <EditNetworkElementDialog + initialNetworkElement={networkElementToEdit} + mode={this.state.networkElementEditorMode} + onClose={this.onCloseEditNetworkElementDialog} + radioChecked={savedRadio} + /> + <RefreshNetworkElementsDialog + mode={this.state.refreshNetworkElementsEditorMode} + onClose={this.onCloseRefreshNetworkElementsDialog} + /> + <InfoNetworkElementDialog + initialNetworkElement={networkElementToEdit} + mode={this.state.infoNetworkElementEditorMode} + onClose={this.onCloseInfoNetworkElementDialog} + /> + </>; }; public componentDidMount() { diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx index 41229eae6..c09f59b40 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx @@ -17,12 +17,12 @@ */ import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; import { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler'; import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; @@ -94,13 +94,13 @@ class RefreshConnectionStatusLogDialogComponent extends React.Component<RefreshC <DialogActions> <Button aria-label="dialog-confirm-button" onClick={(event) => { this.onRefresh(); - }} > {setting.applyButtonText} </Button> + }} color="inherit" > {setting.applyButtonText} </Button> <Button aria-label="dialog-cancel-button" onClick={(event) => { this.onCancel(); }} color="secondary"> {setting.cancelButtonText} </Button> </DialogActions> </Dialog> - ) + ); } private onRefresh = () => { diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx index a349977ab..27288faa6 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx @@ -17,12 +17,12 @@ */ import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; import { networkElementsReloadAction } from '../handlers/networkElementsHandler'; import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; @@ -94,13 +94,13 @@ class RefreshNetworkElementsDialogComponent extends React.Component<RefreshNetwo <DialogActions> <Button aria-label="dialog-confirm-button" onClick={(event) => { this.onRefresh(); - }} > {setting.applyButtonText} </Button> + }} color="inherit" > {setting.applyButtonText} </Button> <Button aria-label="dialog-cancel-button" onClick={(event) => { this.onCancel(); }} color="secondary"> {setting.cancelButtonText} </Button> </DialogActions> </Dialog> - ) + ); } private onRefresh = () => { |