summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/mediatorApp
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2022-02-01 13:18:42 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2022-02-01 13:18:42 +0100
commit1a868116614dd9996c78e69941b537e9da19460b (patch)
tree352e8e4226f6ce798610d75ceef08ad9056df6d9 /sdnr/wt/odlux/apps/mediatorApp
parent9912e1626d93afeb4f7148dd5d826ae1caa1ef8a (diff)
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 <aijana.schumann@highstreet-technologies.com> Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c
Diffstat (limited to 'sdnr/wt/odlux/apps/mediatorApp')
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/package.json19
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx92
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx22
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx16
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx18
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx47
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx70
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/webpack.config.js4
8 files changed, 160 insertions, 128 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/package.json b/sdnr/wt/odlux/apps/mediatorApp/package.json
index 74fdd33ac..867a8790d 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/package.json
+++ b/sdnr/wt/odlux/apps/mediatorApp/package.json
@@ -21,21 +21,24 @@
"author": "Matthias Fischer",
"license": "Apache-2.0",
"dependencies": {
+ "@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/framework": "*"
},
"peerDependencies": {
"@fortawesome/free-solid-svg-icons": "5.6.3",
- "@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/mediatorApp/src/components/editMediatorConfigDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
index bcbccccd7..34ffc5e20 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
@@ -16,30 +16,34 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { Theme, createStyles, WithStyles, withStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Theme, Typography, FormControlLabel, Checkbox } from '@mui/material';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Select from '@material-ui/core/Select';
-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 { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Select from '@mui/material/Select';
+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 Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
-import IconButton from '@material-ui/core/IconButton';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+import Fab from '@mui/material/Fab';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
import { addMediatorConfigAsyncActionCreator, updateMediatorConfigAsyncActionCreator, removeMediatorConfigAsyncActionCreator } from '../actions/mediatorConfigActions';
import { MediatorConfig, ODLConfig } from '../models/mediatorServer';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
import { Panel } from '../../../../framework/src/components/material-ui/panel';
@@ -202,10 +206,10 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
<Tab label="ODL AutoConnect" />
</Tabs>
{this.state.activeTab === 0 ? <TabContainer >
- <TextField disabled={setting.readonly || setting.readonlyName} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.Name} onChange={(event) => { this.setState({ Name: event.target.value }); }} />
- <FormControl fullWidth disabled={setting.readonly}>
+ <TextField variant="standard" disabled={setting.readonly || setting.readonlyName} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.Name} onChange={(event) => { this.setState({ Name: event.target.value }); }} />
+ <FormControl variant="standard" fullWidth disabled={setting.readonly}>
<InputLabel htmlFor="deviceType">Device</InputLabel>
- <Select value={this.state.DeviceType} onChange={(event, value) => {
+ <Select variant="standard" value={this.state.DeviceType} onChange={(event, value) => {
const device = this.props.supportedDevices.find(device => device.id === event.target.value);
if (device) {
this.setState({
@@ -223,46 +227,48 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
{this.props.supportedDevices.map(device => (<MenuItem key={device.id} value={device.id} >{`${device.vendor} - ${device.device} (${device.version || '0.0.0'}) `}</MenuItem>))}
</Select>
</FormControl>
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ipAddress" label="Device IP" type="text" fullWidth value={this.state.DeviceIp} onChange={(event) => { this.setState({ DeviceIp: event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="devicePort" label="Device SNMP Port" type="number" fullWidth value={this.state.DevicePort || ""} onChange={(event) => { this.setState({ DevicePort: +event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="trapsPort" label="TrapsPort" type="number" fullWidth value={this.state.TrapPort || ""} onChange={(event) => { this.setState({ TrapPort: +event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncUser" label="Netconf User" type="text" fullWidth value={this.state.NcUsername} onChange={(event) => { this.setState({ NcUsername: event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPassword" label="Netconf Password" type="password" fullWidth value={this.state.NcPassword} onChange={(event) => { this.setState({ NcPassword: event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPort" label="Netconf Port" type="number" fullWidth value={this.state.NcPort || ""} onChange={(event) => { this.setState({ NcPort: +event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ipAddress" label="Device IP" type="text" fullWidth value={this.state.DeviceIp} onChange={(event) => { this.setState({ DeviceIp: event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="devicePort" label="Device SNMP Port" type="number" fullWidth value={this.state.DevicePort || ""} onChange={(event) => { this.setState({ DevicePort: +event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="trapsPort" label="TrapsPort" type="number" fullWidth value={this.state.TrapPort || ""} onChange={(event) => { this.setState({ TrapPort: +event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncUser" label="Netconf User" type="text" fullWidth value={this.state.NcUsername} onChange={(event) => { this.setState({ NcUsername: event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPassword" label="Netconf Password" type="password" fullWidth value={this.state.NcPassword} onChange={(event) => { this.setState({ NcPassword: event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} autoFocus margin="dense" id="ncPort" label="Netconf Port" type="number" fullWidth value={this.state.NcPort || ""} onChange={(event) => { this.setState({ NcPort: +event.target.value }); }} />
</TabContainer> : null}
{this.state.activeTab === 1 ? <TabContainer >
{this.state.ODLConfig && this.state.ODLConfig.length > 0
? this.state.ODLConfig.map((cfg, ind) => {
const panelId = `panel-${ind}`;
- const deleteButton = (<IconButton onClick={() => {
- this.setState({
- ODLConfig: [
- ...this.state.ODLConfig.slice(0, ind),
- ...this.state.ODLConfig.slice(ind + 1)
- ]
- });
- }} ><DeleteIcon /></IconButton>)
+ const deleteButton = (<IconButton
+ onClick={() => {
+ this.setState({
+ ODLConfig: [
+ ...this.state.ODLConfig.slice(0, ind),
+ ...this.state.ODLConfig.slice(ind + 1)
+ ]
+ });
+ }}
+ size="large"><DeleteIcon /></IconButton>)
return (
<Panel title={cfg.Server && `${cfg.User ? `${cfg.User}@` : ''}${cfg.Protocol}://${cfg.Server}:${cfg.Port}` || "new odl config"} key={panelId} panelId={panelId} activePanel={this.state.activeOdlConfig} customActionButtons={[deleteButton]}
onToggle={(id) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); console.log("activeOdlConfig " + id); this.hideHostnameErrormessage(id) }} >
<div className={classes.alignInOneLine}>
- <FormControl className={classes.left} margin={"dense"} >
+ <FormControl variant="standard" className={classes.left} margin={"dense"} >
<InputLabel htmlFor={`protocol-${ind}`}>Protocoll</InputLabel>
- <Select value={cfg.Protocol} onChange={(e, v) => this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => v)} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
+ <Select variant="standard" value={cfg.Protocol} onChange={(e, v) => this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => v)} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
<MenuItem value={"http"}>http</MenuItem>
<MenuItem value={"https"}>https</MenuItem>
</Select>
</FormControl>
- <TextField className={classes.left} spellCheck={false} margin="dense" id="hostname" label="Hostname" type="text" value={cfg.Server} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Server", e => e.target.value)} />
- <TextField className={classes.right} style={{ maxWidth: "65px" }} spellCheck={false} margin="dense" id="port" label="Port" type="number" value={cfg.Port || ""} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Port", e => +e.target.value)} />
+ <TextField variant="standard" className={classes.left} spellCheck={false} margin="dense" id="hostname" label="Hostname" type="text" value={cfg.Server} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Server", e => e.target.value)} />
+ <TextField variant="standard" className={classes.right} style={{ maxWidth: "65px" }} spellCheck={false} margin="dense" id="port" label="Port" type="number" value={cfg.Port || ""} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Port", e => +e.target.value)} />
</div>
{
this.state.isOdlConfigHostnameEmpty &&
<Typography component={"div"} className={classes.left} color="error" gutterBottom>Please add a hostname.</Typography>
}
<div className={classes.alignInOneLine}>
- <TextField className={classes.left} spellCheck={false} margin="dense" id="username" label="Username" type="text" value={cfg.User} onChange={this.odlConfigValueChangeHandlerCreator(ind, "User", e => e.target.value)} />
- <TextField className={classes.right} spellCheck={false} margin="dense" id="password" label="Password" type="password" value={cfg.Password} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Password", e => e.target.value)} />
+ <TextField variant="standard" className={classes.left} spellCheck={false} margin="dense" id="username" label="Username" type="text" value={cfg.User} onChange={this.odlConfigValueChangeHandlerCreator(ind, "User", e => e.target.value)} />
+ <TextField variant="standard" className={classes.right} spellCheck={false} margin="dense" id="password" label="Password" type="password" value={cfg.Password} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Password", e => e.target.value)} />
</div>
<div className={classes.alignInOneLine}>
<FormControlLabel className={classes.right} control={<Checkbox checked={cfg.Trustall} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Trustall", e => e.target.checked)} />} label="Trustall" />
@@ -288,7 +294,7 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
</DialogContent>
<DialogActions>
- <Button onClick={(event) => { this.addConfig(event) }} > {setting.applyButtonText} </Button>
+ <Button color="inherit" onClick={(event) => { this.addConfig(event) }} > {setting.applyButtonText} </Button>
<Button onClick={(event) => {
this.onCancel();
event.preventDefault();
@@ -297,7 +303,7 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
}} color="secondary"> {setting.cancelButtonText} </Button>
</DialogActions>
</Dialog>
- )
+ );
}
private addConfig = (event: any) => {
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
index d520db466..c8b158749 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
@@ -17,19 +17,19 @@
*/
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 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 { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
import { addAvaliableMediatorServerAsyncActionCreator, removeAvaliableMediatorServerAsyncActionCreator, updateAvaliableMediatorServerAsyncActionCreator } from '../actions/avaliableMediatorServersActions';
import { MediatorServer } from '../models/mediatorServer';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
export enum EditMediatorServerDialogMode {
None = "none",
@@ -151,8 +151,8 @@ class EditMediatorServerDialogComponent extends React.Component<EditMediatorServ
{setting.dialogDescription}
</DialogContentText>
{/* <TextField disabled spellCheck={false} autoFocus margin="dense" id="id" label="Id" type="text" fullWidth value={ this.state._id } onChange={(event)=>{ this.setState({_id: event.target.value}); } } /> */}
- <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.name} onChange={(event) => { this.setState({ name: event.target.value }); }} />
- <TextField disabled={setting.readonly} spellCheck={false} margin="dense" id="url" label="Url" type="text" fullWidth value={this.state.url} onChange={(event) => { this.setState({ url: event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.name} onChange={(event) => { this.setState({ name: event.target.value }); }} />
+ <TextField variant="standard" disabled={setting.readonly} spellCheck={false} margin="dense" id="url" label="Url" type="text" fullWidth value={this.state.url} onChange={(event) => { this.setState({ url: event.target.value }); }} />
<Typography id="errorMessage" component={"div"} color="error">{this.state.errorMessage.map((error, index) => <div key={index}>{error}</div>)}</Typography>
@@ -174,7 +174,7 @@ class EditMediatorServerDialogComponent extends React.Component<EditMediatorServ
event.preventDefault();
event.stopPropagation();
- }} > {setting.applyButtonText} </Button>
+ }} color="inherit" > {setting.applyButtonText} </Button>
<Button onClick={(event) => {
this.onCancel();
this.setState({ errorMessage: [] });
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx
index af94f5a32..db1ef8771 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/refreshMediatorDialog.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 { avaliableMediatorServersReloadAction } from '../handlers/avaliableMediatorServersHandler';
import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
@@ -94,13 +94,13 @@ class RefreshMediatorDialogComponent extends React.Component<RefreshMediatorDial
<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/mediatorApp/src/components/showMeditaorInfoDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
index fd8a2496a..2b91079b5 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx
@@ -17,7 +17,7 @@
*/
import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, DialogContentText, Checkbox, Button, FormControlLabel, FormGroup } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, DialogContentText, Checkbox, Button, FormControlLabel, FormGroup } from '@mui/material';
import { IApplicationState } from '../../../../framework/src/handlers/applicationStateHandler';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect } from '../../../../framework/src/flux/connect';
@@ -73,11 +73,11 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
<Dialog open={this.props.mode !== MediatorInfoDialogMode.None} onBackdropClick={this.props.onClose} >
<DialogTitle>{this.props.config.Name}</DialogTitle>
<DialogContent>
- <TextField disabled margin="dense" id="deviceIp" label="Device IP" fullWidth defaultValue={this.props.config.DeviceIp} />
- <TextField disabled margin="dense" id="deviceport" label="Device Port" fullWidth defaultValue={this.props.config.DevicePort} />
- <TextField disabled margin="dense" id="status" label="Status" fullWidth defaultValue={this.state.status} />
- <TextField disabled margin="dense" id="deviceType" label="Device Type" fullWidth defaultValue={this.state.devicetype} />
- <TextField disabled margin="dense" id="ncPort" label="Netconf Port" fullWidth defaultValue={this.props.config.NcPort} />
+ <TextField variant="standard" disabled margin="dense" id="deviceIp" label="Device IP" fullWidth defaultValue={this.props.config.DeviceIp} />
+ <TextField variant="standard" disabled margin="dense" id="deviceport" label="Device Port" fullWidth defaultValue={this.props.config.DevicePort} />
+ <TextField variant="standard" disabled margin="dense" id="status" label="Status" fullWidth defaultValue={this.state.status} />
+ <TextField variant="standard" disabled margin="dense" id="deviceType" label="Device Type" fullWidth defaultValue={this.state.devicetype} />
+ <TextField variant="standard" disabled margin="dense" id="ncPort" label="Netconf Port" fullWidth defaultValue={this.props.config.NcPort} />
<FormGroup>
<FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNCConnected}></Checkbox>} label="Netconf Connection" />
<FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNeConnected}></Checkbox>} label="Network Element Connection" />
@@ -86,8 +86,8 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
{
this.props.config.ODLConfig.map((element, index) =>
<Panel title={"ODL config " + (this.props.config.ODLConfig.length > 1 ? index + 1 : '')} key={index} panelId={'panel-' + index} activePanel={this.state.activeOdlConfig} onToggle={(id: string) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); }}>
- <TextField disabled margin="dense" defaultValue={element.Protocol + '://' + element.Server} label="Server" />
- <TextField disabled margin="dense" defaultValue={element.Port} label="Port" />
+ <TextField variant="standard" disabled margin="dense" defaultValue={element.Protocol + '://' + element.Server} label="Server" />
+ <TextField variant="standard" disabled margin="dense" defaultValue={element.Port} label="Port" />
<FormControlLabel control={<Checkbox disabled checked={element.Trustall} />} label="Trustall" />
</Panel>
)
@@ -95,7 +95,7 @@ class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDi
</DialogContent>
<DialogActions>
- <Button onClick={this.onClose}>Close</Button>
+ <Button onClick={this.onClose} color="inherit">Close</Button>
</DialogActions>
</Dialog>
)
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
index fbf6d5774..da0ffa048 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
@@ -16,17 +16,21 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import InfoIcon from '@material-ui/icons/Info';
-import StartIcon from '@material-ui/icons/PlayArrow';
-import StopIcon from '@material-ui/icons/Stop';
+import { WithStyles } from '@mui/styles';
+import createStyles from '@mui/styles/createStyles';
+import withStyles from '@mui/styles/withStyles';
-import CircularProgress from '@material-ui/core/CircularProgress'
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import InfoIcon from '@mui/icons-material/Info';
+import StartIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+
+import CircularProgress from '@mui/material/CircularProgress'
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
@@ -130,23 +134,34 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo
const renderActions = (rowData: MediatorConfigResponse) => (
<>
<div className={classes.spacer}>
- <Tooltip title={"Start"} >
- <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+ <Tooltip disableInteractive title={"Start"} >
+ <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
<StartIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.startMediator(rowData.Name); }} />
</IconButton>
</Tooltip>
- <Tooltip title={"Stop"} >
- <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+ <Tooltip disableInteractive title={"Stop"} >
+ <IconButton disabled={rowData[BusySymbol]} className={classes.button} size="large">
<StopIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.stopMediator(rowData.Name); }} />
</IconButton>
</Tooltip>
</div>
<div className={classes.spacer}>
- <Tooltip title={"Info"} ><IconButton className={classes.button} onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}><InfoIcon /></IconButton></Tooltip>
+ <Tooltip disableInteractive title={"Info"} ><IconButton
+ className={classes.button}
+ onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}
+ size="large"><InfoIcon /></IconButton></Tooltip>
</div>
<div className={classes.spacer}>
- {process.env.NODE_ENV === "development" ? <Tooltip title={"Edit"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}><EditIcon /></IconButton></Tooltip> : null}
- <Tooltip title={"Remove"} ><IconButton disabled={rowData[BusySymbol]} className={classes.button} onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}><DeleteIcon /></IconButton></Tooltip>
+ {process.env.NODE_ENV === "development" ? <Tooltip disableInteractive title={"Edit"} ><IconButton
+ disabled={rowData[BusySymbol]}
+ className={classes.button}
+ onClick={event => this.onOpenEditConfigurationDialog(event, rowData)}
+ size="large"><EditIcon /></IconButton></Tooltip> : null}
+ <Tooltip disableInteractive title={"Remove"} ><IconButton
+ disabled={rowData[BusySymbol]}
+ className={classes.button}
+ onClick={event => this.onOpenRemoveConfigutationDialog(event, rowData)}
+ size="large"><DeleteIcon /></IconButton></Tooltip>
</div>
</>
);
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
index be1ecc718..c44e2ccc1 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
@@ -16,13 +16,17 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
+import { Theme, Tooltip } from '@mui/material';
-import AddIcon from '@material-ui/icons/Add';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-import Refresh from '@material-ui/icons/Refresh';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Refresh from '@mui/icons-material/Refresh';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
@@ -105,31 +109,35 @@ class MediatorServerSelectionComponent extends React.Component<MediatorServerSel
});
}
};
- return (
- <>
- <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
- {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
- { property: "name", title: "Name", type: ColumnType.text },
- { property: "url", title: "Url", type: ColumnType.text },
- {
- property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
- <div className={classes.spacer}>
- <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={event => { this.onEditMediatorServer(event, rowData); }}><EditIcon /></IconButton></Tooltip>
- <Tooltip title={"Remove"} ><IconButton className={classes.button} onClick={event => { this.onRemoveMediatorServer(event, rowData); }}><DeleteIcon /></IconButton></Tooltip>
- </div>
- )
- }
- ]} onHandleClick={this.onSelectMediatorServer} />
- <EditMediatorServerDialog
- mediatorServer={this.state.mediatorServerToEdit}
- mode={this.state.mediatorServerEditorMode}
- onClose={this.onCloseEditMediatorServerDialog} />
- <RefreshMediatorDialog
- mode={this.state.refreshMediatorEditorMode}
- onClose={this.onCloseRefreshMediatorDialog}
- />
- </>
- );
+ return <>
+ <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[refreshMediatorAction, addMediatorServerActionButton]} idProperty={"id"}
+ {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
+ { property: "name", title: "Name", type: ColumnType.text },
+ { property: "url", title: "Url", type: ColumnType.text },
+ {
+ property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
+ <div className={classes.spacer}>
+ <Tooltip disableInteractive title={"Edit"} ><IconButton
+ className={classes.button}
+ onClick={event => { this.onEditMediatorServer(event, rowData); }}
+ size="large"><EditIcon /></IconButton></Tooltip>
+ <Tooltip disableInteractive title={"Remove"} ><IconButton
+ className={classes.button}
+ onClick={event => { this.onRemoveMediatorServer(event, rowData); }}
+ size="large"><DeleteIcon /></IconButton></Tooltip>
+ </div>
+ )
+ }
+ ]} onHandleClick={this.onSelectMediatorServer} />
+ <EditMediatorServerDialog
+ mediatorServer={this.state.mediatorServerToEdit}
+ mode={this.state.mediatorServerEditorMode}
+ onClose={this.onCloseEditMediatorServerDialog} />
+ <RefreshMediatorDialog
+ mode={this.state.refreshMediatorEditorMode}
+ onClose={this.onCloseRefreshMediatorDialog}
+ />
+ </>;
}
public componentDidMount() {
diff --git a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
index 94943ecd5..f626632e2 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/mediatorApp/webpack.config.js
@@ -86,7 +86,7 @@ module.exports = (env) => {
manifest: require(path.resolve(frameworkPath, "app-manifest.json")),
sourceType: "umd2"
}),
- ...(env === "release") ? [
+ ...(env === "release" ? [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: "'production'",
@@ -104,7 +104,7 @@ module.exports = (env) => {
from: 'index.html',
to: distPath
}]),
- ]
+ ])
],
devServer: {