aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/connectApp
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-02-28 15:15:26 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-02-28 15:15:26 +0100
commit889c7fbc0f78eadc302e8849ea7e6cad795e0d6e (patch)
treeda4cb3a08d06520497f1ed584fbdf70afcc22edb /sdnr/wt/odlux/apps/connectApp
parent4eed58ba1a434261510c996316d2d201a40eb760 (diff)
update odlux stage 3
PerformanceApp: Add filter to chart view add scrolling header to tables, add basic validation to editNetworkElementDialog bugfixes Issue-ID: SDNC-1087 Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com> Change-Id: I585bd6cfeb11b867cd630e96e6479170d2f92fe8
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp')
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx79
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx4
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts9
3 files changed, 74 insertions, 18 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index ce7f48cc9..e3b640120 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -24,7 +24,7 @@ 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 } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Typography } from '@material-ui/core';
import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
@@ -35,7 +35,7 @@ import {
} from '../actions/networkElementsActions';
import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions';
-import { NetworkElementConnection, UpdateNetworkElement } from '../models/networkElementConnection';
+import { NetworkElementConnection, UpdateNetworkElement, propertyOf } from '../models/networkElementConnection';
import { removeWebUriAction } from '../actions/commonNetworkElementsActions';
export enum EditNetworkElementDialogMode {
@@ -47,6 +47,8 @@ export enum EditNetworkElementDialogMode {
UnmountNetworkElement = "unmountNetworkElement",
}
+
+
const mapDispatch = (dispatcher: IDispatcher) => ({
addNewNetworkElement: async (element: NetworkElementConnection) => {
await dispatcher.dispatch(addNewNetworkElementAsyncActionCreator(element));
@@ -57,8 +59,21 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
dispatcher.dispatch(unmountNetworkElementAsyncActionCreator(element && element.nodeId));
},
editNetworkElement: async (element: UpdateNetworkElement, mountElement: NetworkElementConnection) => {
- await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
- await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement));
+
+ const values = Object.keys(element);
+
+ //make sure properties are there in case they get renamed
+ const idProperty = propertyOf<UpdateNetworkElement>("id");
+ const isRequiredProperty = propertyOf<UpdateNetworkElement>("isRequired");
+
+ if (values.length === 2 && values.includes(idProperty as string) && values.includes(isRequiredProperty as string)) {
+ // do not mount network element, if only isRequired is changed
+ await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
+
+ } else {
+ await dispatcher.dispatch(editNetworkElementAsyncActionCreator(element));
+ await dispatcher.dispatch(mountNetworkElementAsyncActionCreator(mountElement));
+ }
},
removeNetworkElement: async (element: UpdateNetworkElement) => {
await dispatcher.dispatch(removeNetworkElementAsyncActionCreator(element));
@@ -140,7 +155,7 @@ type EditNetworkElementDialogComponentProps = Connect<undefined, typeof mapDispa
onClose: () => void;
};
-type EditNetworkElementDialogComponentState = NetworkElementConnection;
+type EditNetworkElementDialogComponentState = NetworkElementConnection & { isNameValid: boolean, isHostSet: boolean };
class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> {
constructor(props: EditNetworkElementDialogComponentProps) {
@@ -151,6 +166,8 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
isRequired: false,
host: this.props.initialNetworkElement.host,
port: this.props.initialNetworkElement.port,
+ isNameValid: true,
+ isHostSet: true
};
}
@@ -164,7 +181,9 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
{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 }); }} />
+ {!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 }); }} />
+ {!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}
{setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="password" label="Password" aria-label="password" type="password" fullWidth value={this.state.password} onChange={(event) => { this.setState({ password: event.target.value }); }} /> || null}
@@ -180,15 +199,18 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
</DialogContent>
<DialogActions>
<Button aria-label="dialog-confirm-button" onClick={(event) => {
- this.onApply({
- isRequired: this.state.isRequired,
- id: this.state.nodeId,
- nodeId: this.state.nodeId,
- host: this.state.host,
- port: this.state.port,
- username: this.state.username,
- password: this.state.password,
- });
+
+ if (this.areRequieredFieldsValid()) {
+ this.onApply({
+ isRequired: this.state.isRequired,
+ id: this.state.nodeId,
+ nodeId: this.state.nodeId,
+ host: this.state.host,
+ port: this.state.port,
+ username: this.state.username,
+ password: this.state.password,
+ });
+ }
event.preventDefault();
event.stopPropagation();
}} > {setting.applyButtonText} </Button>
@@ -230,10 +252,39 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
element && this.props.removeNetworkElement(updateElement);
break;
}
+
+ this.setState({ password: '', username: '' });
+ this.resetRequieredFields();
};
private onCancel = () => {
this.props.onClose && this.props.onClose();
+ this.setState({ password: '', username: '' });
+ this.resetRequieredFields();
+ }
+
+ private resetRequieredFields() {
+ this.setState({ isNameValid: true, isHostSet: true });
+ }
+
+ private areRequieredFieldsValid() {
+ let areFieldsValid = true;
+
+ if (this.state.nodeId == undefined || this.state.nodeId.trim().length === 0) {
+ this.setState({ isNameValid: false });
+ areFieldsValid = false;
+ } else {
+ this.setState({ isNameValid: true });
+ }
+
+ if (this.state.host == undefined || this.state.host.trim().length === 0) {
+ this.setState({ isHostSet: false });
+ areFieldsValid = false;
+ } else {
+ this.setState({ isHostSet: true });
+ }
+
+ return areFieldsValid;
}
static getDerivedStateFromProps(props: EditNetworkElementDialogComponentProps, state: EditNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection }): EditNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection } {
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
index 45003e741..d50a81ed5 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx
@@ -110,9 +110,7 @@ export class NetworkElementsListComponent extends React.Component<NetworkElement
<Divider />,
<MenuItem aria-label={"info-button"} onClick={event => this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected"} ><Info /><Typography>Info</Typography></MenuItem>,
<MenuItem aria-label={"edit-button"} onClick={event => this.onOpenEditNetworkElementDialog(event, rowData)}><EditIcon /><Typography>Edit</Typography></MenuItem>,
- !rowData.isRequired
- ? <MenuItem aria-label={"add-button"} onClick={event => this.onOpenAddNetworkElementDialog(event, rowData)} ><AddIcon /><Typography>Add</Typography></MenuItem>
- : <MenuItem aria-label={"remove-button"} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
+ <MenuItem aria-label={"remove-button"} onClick={event => this.onOpenRemoveNetworkElementDialog(event, rowData)} ><RemoveIcon /><Typography>Remove</Typography></MenuItem>,
<Divider />,
<MenuItem aria-label={"inventory-button"} onClick={event => this.props.navigateToApplication("inventory", rowData.nodeId)}><Typography>Inventory</Typography></MenuItem>,
<Divider />,
diff --git a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
index f58dc58ab..b3586d693 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
+++ b/sdnr/wt/odlux/apps/connectApp/src/models/networkElementConnection.ts
@@ -51,4 +51,11 @@ export type UpdateNetworkElement = {
export type ConnectionStatus = {
status: string
-} \ No newline at end of file
+}
+
+/**
+ * Checks if a object has a given propertyname, if yes, the name is returned as string.
+ * @throws at compile time if property is not available
+ * @param name propertyname
+ */
+export const propertyOf = <TObj>(name: keyof TObj) => name; \ No newline at end of file