aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/connectApp
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/connectApp
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/connectApp')
-rw-r--r--sdnr/wt/odlux/apps/connectApp/package.json23
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts2
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx2
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/dashboardHome.tsx425
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx45
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx8
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx90
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx16
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx16
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx18
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx8
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml2
-rw-r--r--sdnr/wt/odlux/apps/connectApp/webpack.config.js4
13 files changed, 547 insertions, 112 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/package.json b/sdnr/wt/odlux/apps/connectApp/package.json
index a6b23df84..9ecdaf853 100644
--- a/sdnr/wt/odlux/apps/connectApp/package.json
+++ b/sdnr/wt/odlux/apps/connectApp/package.json
@@ -21,20 +21,25 @@
"author": "Matthias Fischer",
"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/framework": "*",
+ "react-chartjs-2": "2.7.6",
+ "chart.js": "2.8.0"
},
"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/connectApp/src/actions/networkElementsActions.ts b/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
index 1e569a196..041cff9da 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/actions/networkElementsActions.ts
@@ -37,7 +37,7 @@ export const addNewNetworkElementAsyncActionCreator = (element: NetworkElementCo
/** Represents an async thunk action creator to edit network element. */
export const editNetworkElementAsyncActionCreator = (element: UpdateNetworkElement) => async (dispatch: Dispatch) => {
- const connectionStatus: ConnectionStatus[] = await connectService.getNetworkElementConnectionStatus(element.id).then(ne => (ne)) || [];
+ const connectionStatus: ConnectionStatus[] = (await connectService.getNetworkElementConnectionStatus(element.id).then(ne => (ne))) || [];
const currentConnectionStatus = connectionStatus[0].status;
if (currentConnectionStatus === "Disconnected") {
const res = await connectService.deleteNetworkElement(element);
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 = () => {
diff --git a/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
index afca74664..83763485b 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/pluginConnect.tsx
@@ -32,18 +32,19 @@ import { createNetworkElementsActions, createNetworkElementsProperties, networkE
import connectAppRootHandler from './handlers/connectAppRootHandler';
import ConnectApplication from './views/connectView';
import { PanelId } from "./models/panelId";
-import { NetworkElementsList } from './components/networkElements'
+import { NetworkElementsList } from './components/networkElements';
+import DashboardHome from "./components/dashboardHome";
let currentStatus: string | undefined = undefined;
let refreshInterval: ReturnType<typeof window.setInterval> | null = null;
const mapProps = (state: IApplicationStoreState) => ({
- currentProblemsProperties: createNetworkElementsProperties(state),
+ networkElementDashboardProperties: createNetworkElementsProperties(state),
});
const mapDisp = (dispatcher: IDispatcher) => ({
- currentProblemsActions: createNetworkElementsActions(dispatcher.dispatch, true),
+ networkElementsDashboardActions: createNetworkElementsActions(dispatcher.dispatch, true),
setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
});
@@ -53,13 +54,13 @@ const ConnectApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteC
window.setTimeout(() => {
if (currentStatus) {
props.setCurrentPanel("NetworkElements");
- props.currentProblemsActions.onFilterChanged("status", currentStatus);
- if (!props.currentProblemsProperties.showFilter) {
- props.currentProblemsActions.onToggleFilter(false);
- props.currentProblemsActions.onRefresh();
+ props.networkElementsDashboardActions.onFilterChanged("status", currentStatus);
+ if (!props.networkElementDashboardProperties.showFilter) {
+ props.networkElementsDashboardActions.onToggleFilter(false);
+ props.networkElementsDashboardActions.onRefresh();
}
else
- props.currentProblemsActions.onRefresh();
+ props.networkElementsDashboardActions.onRefresh();
}
});
}
@@ -83,6 +84,7 @@ export function register() {
icon: faPlug,
rootComponent: App,
rootActionHandler: connectAppRootHandler,
+ dashbaordElement: DashboardHome,
menuEntry: "Connect"
});
diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index 34b1b94b6..e99b6af8e 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -28,7 +28,7 @@ import { ConnectionStatusLog } from '../components/connectionStatusLog';
import { setPanelAction, findWebUrisForGuiCutThroughAsyncAction, SetWeburiSearchBusy } from '../actions/commonNetworkElementsActions';
import { PanelId } from '../models/panelId';
import { NetworkElementConnection } from 'models/networkElementConnection';
-import { AppBar, Tabs, Tab } from '@material-ui/core';
+import { AppBar, Tabs, Tab } from '@mui/material';
const mapProps = (state: IApplicationStoreState) => ({
panelId: state.connect.currentOpenPanel,
@@ -96,7 +96,7 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
};
- private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+ private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
this.props.switchActivePanel(newValue);
}
@@ -105,8 +105,8 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
return (
<>
- <AppBar position="static">
- <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
+ <AppBar enableColorOnDark position="static">
+ <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
<Tab aria-label="network-elements-list-tab" label="Network Elements" value="NetworkElements" />
<Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
</Tabs>
diff --git a/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml b/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
index 685ea76ba..295e8f894 100644
--- a/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
+++ b/sdnr/wt/odlux/apps/connectApp/src2/main/resources/OSGI-INF/blueprint/blueprint.xml
@@ -25,6 +25,6 @@
<bean id="bundle" init-method="initialize" destroy-method="clean" class="org.onap.ccsdk.features.sdnr.wt.odlux.bundles.MyOdluxBundle">
<property name="loader" ref="loadersvc"/>
<property name="bundleName" value="connectApp"/>
- <property name="index" value="0"/>
+ <property name="index" value="1"/>
</bean>
</blueprint> \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/connectApp/webpack.config.js b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
index 70ddd4932..b283e426c 100644
--- a/sdnr/wt/odlux/apps/connectApp/webpack.config.js
+++ b/sdnr/wt/odlux/apps/connectApp/webpack.config.js
@@ -87,7 +87,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'",
@@ -105,7 +105,7 @@ module.exports = (env) => {
from: 'index.html',
to: distPath
}]),
- ]
+ ])
],
devServer: {