aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/mediatorApp/src
diff options
context:
space:
mode:
authorHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-02-11 14:54:12 +0100
committerHerbert Eiselt <herbert.eiselt@highstreet-technologies.com>2019-02-11 14:54:53 +0100
commit3d202a04b99f0e61b6ccf8b7a5610e1a15ca58e7 (patch)
treeab756cfa8de5eced886d3947423d198be8c0ce62 /sdnr/wt/odlux/apps/mediatorApp/src
parent12a8c669f52c0e84d580c078cee849b25133b585 (diff)
Add sdnr wt odlux
Add complete sdnr wireless transport app odlux core and apps Change-Id: I5dcbfb8f3b790e3bda7c8df67bd69d81958f65e5 Issue-ID: SDNC-576 Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/mediatorApp/src')
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/actions/avaliableMediatorServersActions.ts41
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorConfigActions.ts137
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorServerActions.ts84
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx315
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx156
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/handlers/avaliableMediatorServersHandler.ts19
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorAppRootHandler.ts26
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorServerHandler.ts96
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/index.html29
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/models/mediatorServer.ts60
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/plugin.tsx66
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/services/mediatorService.ts149
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx220
-rw-r--r--sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx136
14 files changed, 1534 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/actions/avaliableMediatorServersActions.ts b/sdnr/wt/odlux/apps/mediatorApp/src/actions/avaliableMediatorServersActions.ts
new file mode 100644
index 000000000..4cbad42dd
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/actions/avaliableMediatorServersActions.ts
@@ -0,0 +1,41 @@
+import { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+import { AddSnackbarNotification } from '../../../../framework/src/actions/snackbarActions';
+
+import { MediatorServer } from '../models/mediatorServer';
+import { avaliableMediatorServersReloadAction } from '../handlers/avaliableMediatorServersHandler';
+import mediatorService from '../services/mediatorService';
+
+/** Represents the base action. */
+export class BaseAction extends Action { }
+
+/** Represents an async thunk action that will add a server to the avaliable mediator servers. */
+export const addAvaliableMediatorServerAsyncActionCreator = (server: MediatorServer) => (dispatch: Dispatch) => {
+ mediatorService.insertMediatorServer(server).then(_ => {
+ window.setTimeout(() => {
+ dispatch(avaliableMediatorServersReloadAction);
+ dispatch(new AddSnackbarNotification({ message: `Successfully added [${ server.name }]`, options: { variant: 'success' } }));
+ }, 900);
+ });
+ };
+
+ /** Represents an async thunk action that will add a server to the avaliable mediator servers. */
+export const updateAvaliableMediatorServerAsyncActionCreator = (server: MediatorServer) => (dispatch: Dispatch) => {
+ mediatorService.updateMediatorServer(server).then(_ => {
+ window.setTimeout(() => {
+ dispatch(avaliableMediatorServersReloadAction);
+ dispatch(new AddSnackbarNotification({ message: `Successfully updated [${ server.name }]`, options: { variant: 'success' } }));
+ }, 900);
+ });
+};
+
+ /** Represents an async thunk action that will delete a server from the avaliable mediator servers. */
+ export const removeAvaliableMediatorServerAsyncActionCreator = (server: MediatorServer) => (dispatch: Dispatch) => {
+ mediatorService.deleteMediatorServer(server).then(_ => {
+ window.setTimeout(() => {
+ dispatch(avaliableMediatorServersReloadAction);
+ dispatch(new AddSnackbarNotification({ message: `Successfully removed [${ server.name }]`, options: { variant: 'success' } }));
+ }, 900);
+ });
+ };
+ \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorConfigActions.ts b/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorConfigActions.ts
new file mode 100644
index 000000000..fcfc63e22
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorConfigActions.ts
@@ -0,0 +1,137 @@
+
+import { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+
+import { AddSnackbarNotification } from '../../../../framework/src/actions/snackbarActions';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import mediatorService from '../services/mediatorService';
+import { MediatorConfig, MediatorConfigResponse } from '../models/mediatorServer';
+
+/** Represents the base action. */
+export class BaseAction extends Action { }
+
+export class SetMediatorBusyByName extends BaseAction {
+ constructor (public name: string, public isBusy: boolean) {
+ super();
+ }
+}
+
+export class AddMediatorConfig extends BaseAction {
+ constructor (public mediatorConfig: MediatorConfigResponse) {
+ super();
+ }
+}
+
+export class UpdateMediatorConfig extends BaseAction {
+ constructor (public name: string, public mediatorConfig: MediatorConfigResponse) {
+ super();
+ }
+}
+
+export class RemoveMediatorConfig extends BaseAction {
+ constructor (public name: string) {
+ super();
+ }
+}
+
+
+export const startMediatorByNameAsyncActionCreator = (name: string) => (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+ dispatch(new SetMediatorBusyByName(name, true));
+ const { mediatorApp: { mediatorServerState: { url } } } = getState();
+ if (url) {
+ mediatorService.startMediatorByName(url, name).then(msg => {
+ dispatch(new AddSnackbarNotification({ message: msg + ' ' + name, options: { variant: 'info' } }));
+ // since there is no notification, a timeout will be need here
+ window.setTimeout(() => {
+ mediatorService.getMediatorServerConfigByName(url, name).then(config => {
+ if (config) {
+ dispatch(new UpdateMediatorConfig(name, config));
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: reading mediator config for ${name}.`, options: { variant: 'error' } }));
+ }
+ dispatch(new SetMediatorBusyByName(name, false));
+ });
+ }, 2100);
+ });
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: currently no mediator server selected.`, options: { variant: 'error' } }));
+ dispatch(new SetMediatorBusyByName(name, false));
+ }
+};
+
+export const stopMediatorByNameAsyncActionCreator = (name: string) => (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+ dispatch(new SetMediatorBusyByName(name, true));
+ const { mediatorApp: { mediatorServerState: { url } } } = getState();
+ if (url) {
+ mediatorService.stopMediatorByName(url, name).then(msg => {
+ dispatch(new AddSnackbarNotification({ message: msg + ' ' + name, options: { variant: 'info' } }));
+ // since there is no notification, a timeout will be need here
+ window.setTimeout(() => {
+ mediatorService.getMediatorServerConfigByName(url, name).then(config => {
+ if (config) {
+ dispatch(new UpdateMediatorConfig(name, config));
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: reading mediator config for ${name}.`, options: { variant: 'error' } }));
+ }
+ dispatch(new SetMediatorBusyByName(name, false));
+ });
+ }, 2100);
+ });
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: currently no mediator server selected.`, options: { variant: 'error' } }));
+ dispatch(new SetMediatorBusyByName(name, false));
+ }
+};
+
+export const addMediatorConfigAsyncActionCreator = (config: MediatorConfig) => (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+ const { Name: name } = config;
+ const { mediatorApp: { mediatorServerState: { url } } } = getState();
+ if (url) {
+ mediatorService.createMediatorConfig(url, config).then(msg => {
+ dispatch(new AddSnackbarNotification({ message: msg + ' ' + name, options: { variant: 'info' } }));
+ // since there is no notification, a timeout will be need here
+ window.setTimeout(() => {
+ mediatorService.getMediatorServerConfigByName(url, name).then(config => {
+ if (config) {
+ dispatch(new AddMediatorConfig(config));
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: reading mediator config for ${name}.`, options: { variant: 'error' } }));
+ }
+ });
+ }, 2100);
+ });
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: currently no mediator server selected.`, options: { variant: 'error' } }));
+ }
+};
+
+export const updateMediatorConfigAsyncActionCreator = (config: MediatorConfig) => (dispatch: Dispatch) => {
+ // currently not supported be backend
+};
+
+export const removeMediatorConfigAsyncActionCreator = (config: MediatorConfig) => (dispatch: Dispatch, getState: () => IApplicationStoreState) => {
+ const { Name: name } = config;
+ const { mediatorApp: { mediatorServerState: { url } } } = getState();
+ if (url) {
+ mediatorService.deleteMediatorConfigByName(url, name).then(msg => {
+ dispatch(new AddSnackbarNotification({ message: msg + ' ' + name, options: { variant: 'info' } }));
+ // since there is no notification, a timeout will be need here
+ window.setTimeout(() => {
+ mediatorService.getMediatorServerConfigByName(url, config.Name).then(config => {
+ if (!config) {
+ dispatch(new RemoveMediatorConfig(name));
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: deleting mediator config for ${name}.`, options: { variant: 'error' } }));
+ }
+ });
+ }, 2100);
+ });
+ } else {
+ dispatch(new AddSnackbarNotification({ message: `Error: currently no mediator server selected.`, options: { variant: 'error' } }));
+ dispatch(new SetMediatorBusyByName(name, false));
+ }
+};
+
+
+
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorServerActions.ts b/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorServerActions.ts
new file mode 100644
index 000000000..b8e8c7e94
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/actions/mediatorServerActions.ts
@@ -0,0 +1,84 @@
+import { Action } from '../../../../framework/src/flux/action';
+import { Dispatch } from '../../../../framework/src/flux/store';
+
+import { MediatorServerVersionInfo, MediatorConfig, MediatorConfigResponse, MediatorServerDevice } from '../models/mediatorServer';
+import mediatorService from '../services/mediatorService';
+import { AddSnackbarNotification } from '../../../../framework/src/actions/snackbarActions';
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+/** Represents the base action. */
+export class BaseAction extends Action { }
+
+export class SetMediatorServerBusy extends BaseAction {
+ constructor (public isBusy: boolean) {
+ super();
+ }
+}
+
+export class SetMediatorServerInfo extends BaseAction {
+ /**
+ * Initializes a new instance of this class.
+ */
+ constructor (public name: string | null, public url: string | null) {
+ super();
+
+ }
+}
+
+export class SetMediatorServerVersion extends BaseAction {
+ /**
+ * Initializes a new instance of this class.
+ */
+ constructor (public versionInfo: MediatorServerVersionInfo | null) {
+ super();
+
+ }
+}
+
+export class SetAllMediatorServerConfigurations extends BaseAction {
+ /**
+ * Initializes a new instance of this class.
+ */
+ constructor (public allConfigurations: MediatorConfigResponse[] | null) {
+ super();
+
+ }
+}
+
+export class SetMediatorServerSupportedDevices extends BaseAction {
+ /**
+ * Initializes a new instance of this class.
+ */
+ constructor (public devices: MediatorServerDevice[] | null) {
+ super();
+
+ }
+}
+
+export const initializeMediatorServerAsyncActionCreator = (serverId: string) => (dispatch: Dispatch) => {
+ dispatch(new SetMediatorServerBusy(true));
+ mediatorService.getMediatorServerById(serverId).then(mediatorServer => {
+ if (!mediatorServer) {
+ dispatch(new SetMediatorServerBusy(false));
+ dispatch(new AddSnackbarNotification({ message: `Error loading mediator server [${serverId}]`, options: { variant: 'error' } }));
+ dispatch(new NavigateToApplication("mediatorApp"));
+ return;
+ }
+ dispatch(new SetMediatorServerInfo(mediatorServer.name, mediatorServer.url));
+
+ mediatorService.getMediatorServerVersion(mediatorServer.url).then(versionInfo => {
+ dispatch(new SetMediatorServerVersion(versionInfo));
+ });
+
+ Promise.all([
+ mediatorService.getMediatorServerAllConfigs(mediatorServer.url),
+ mediatorService.getMediatorServerSupportedDevices(mediatorServer.url)
+ ]).then(([configurations,supportedDevices]) => {
+ dispatch(new SetAllMediatorServerConfigurations(configurations));
+ dispatch(new SetMediatorServerSupportedDevices(supportedDevices));
+ dispatch(new SetMediatorServerBusy(false));
+ });
+ });
+};
+
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
new file mode 100644
index 000000000..889b05eb5
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
@@ -0,0 +1,315 @@
+import * as React from 'react';
+import { Theme, createStyles, WithStyles, withStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
+
+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 Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+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 { 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 { Panel } from '../../../../framework/src/components/material-ui/panel';
+
+import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+
+const styles = (theme: Theme) => createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ flex: '1',
+ },
+ fab: {
+ position: 'absolute',
+ bottom: theme.spacing.unit,
+ right: theme.spacing.unit,
+ },
+ title: {
+ fontSize: 14,
+ },
+ center: {
+ flex: "1",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ alignInOneLine: {
+ display: 'flex',
+ flexDirection: 'row'
+ },
+ left: {
+ marginRight: theme.spacing.unit,
+ },
+ right: {
+ marginLeft: 0,
+ }
+});
+
+const TabContainer: React.SFC = ({ children }) => {
+ return (
+ <div style={{ width: "430px", height: "530px", position: "relative", display: 'flex', flexDirection: 'column' }}>
+ {children}
+ </div>
+ );
+}
+
+export enum EditMediatorConfigDialogMode {
+ None = "none",
+ AddMediatorConfig = "addMediatorConfig",
+ EditMediatorConfig = "editMediatorConfig",
+ RemoveMediatorConfig = "removeMediatorConfig",
+}
+
+const mapProps = (state: IApplicationStoreState) => ({
+ supportedDevices: state.mediatorApp.mediatorServerState.supportedDevices
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+ addMediatorConfig: (config: MediatorConfig) => {
+ dispatcher.dispatch(addMediatorConfigAsyncActionCreator(config));
+ },
+ updateMediatorConfig: (config: MediatorConfig) => {
+ dispatcher.dispatch(updateMediatorConfigAsyncActionCreator(config));
+ },
+ removeMediatorConfig: (config: MediatorConfig) => {
+ dispatcher.dispatch(removeMediatorConfigAsyncActionCreator(config));
+ },
+});
+
+type DialogSettings = {
+ dialogTitle: string;
+ dialogDescription: string;
+ applyButtonText: string;
+ cancelButtonText: string;
+ readonly: boolean;
+ readonlyName: boolean;
+};
+
+const settings: { [key: string]: DialogSettings } = {
+ [EditMediatorConfigDialogMode.None]: {
+ dialogTitle: "",
+ dialogDescription: "",
+ applyButtonText: "",
+ cancelButtonText: "",
+ readonly: true,
+ readonlyName: true,
+ },
+ [EditMediatorConfigDialogMode.AddMediatorConfig]: {
+ dialogTitle: "Add Medator Configuration",
+ dialogDescription: "",
+ applyButtonText: "Add",
+ cancelButtonText: "Cancel",
+ readonly: false,
+ readonlyName: false,
+ },
+ [EditMediatorConfigDialogMode.EditMediatorConfig]: {
+ dialogTitle: "Edit Medator Configuration",
+ dialogDescription: "",
+ applyButtonText: "Update",
+ cancelButtonText: "Cancel",
+ readonly: false,
+ readonlyName: true,
+ },
+ [EditMediatorConfigDialogMode.RemoveMediatorConfig]: {
+ dialogTitle: "Remove Mediator Configuration",
+ dialogDescription: "",
+ applyButtonText: "Remove",
+ cancelButtonText: "Cancel",
+ readonly: true,
+ readonlyName: true,
+ },
+};
+
+type EditMediatorConfigDialogComponentProps = WithStyles<typeof styles> & Connect<typeof mapProps, typeof mapDispatch> & {
+ mode: EditMediatorConfigDialogMode;
+ mediatorConfig: MediatorConfig;
+ onClose: () => void;
+};
+
+type EditMediatorConfigDialogComponentState = MediatorConfig & { activeTab: number; activeOdlConfig: string };
+
+class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConfigDialogComponentProps, EditMediatorConfigDialogComponentState> {
+ constructor (props: EditMediatorConfigDialogComponentProps) {
+ super(props);
+
+ this.state = {
+ ...this.props.mediatorConfig,
+ activeTab: 0,
+ activeOdlConfig: ""
+ };
+ }
+
+ private odlConfigValueChangeHandlerCreator = <THtmlElement extends HTMLElement, TKey extends keyof ODLConfig>(index: number, property: TKey, mapValue: (event: React.ChangeEvent<THtmlElement>) => any) => (event: React.ChangeEvent<THtmlElement>) => {
+ event.stopPropagation();
+ event.preventDefault();
+ this.setState({
+ ODLConfig: [
+ ...this.state.ODLConfig.slice(0, index),
+ { ...this.state.ODLConfig[index], [property]: mapValue(event) },
+ ...this.state.ODLConfig.slice(index + 1)
+ ]
+ });
+ }
+
+ render(): JSX.Element {
+ const setting = settings[this.props.mode];
+ const { classes } = this.props;
+ return (
+ <Dialog open={this.props.mode !== EditMediatorConfigDialogMode.None}>
+ <DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ {setting.dialogDescription}
+ </DialogContentText>
+ <Tabs value={this.state.activeTab} indicatorColor="primary" textColor="primary" onChange={(event, value) => this.setState({ activeTab: value })} >
+ <Tab label="Config" />
+ <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}>
+ <InputLabel htmlFor="deviceType">Device</InputLabel>
+ <Select value={this.state.DeviceType} onChange={(event) => {
+ const device = this.props.supportedDevices.find(device => device.id === +event.target.value);
+ if (device) {
+ this.setState({
+ DeviceType: device.id,
+ NeXMLFile: device.xml
+ });
+ } else {
+ this.setState({
+ DeviceType: -1,
+ NeXMLFile: ""
+ });
+ }
+ }} inputProps={{ name: 'deviceType', id: 'deviceType' }} fullWidth >
+ <MenuItem value={-1}><em>None</em></MenuItem>
+ {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="IP Address" 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="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 }); }} />
+ </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>)
+ 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 || "") })} >
+ <div className={classes.alignInOneLine}>
+ <FormControl className={classes.left} margin={"dense"} >
+ <InputLabel htmlFor={`protocol-${ind}`}>Protocoll</InputLabel>
+ <Select value={cfg.Protocol} onChange={ this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => (e.target.value)) } 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)} />
+ </div>
+ <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)} />
+ </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" />
+ </div>
+ </Panel>
+ );
+ })
+ : <div className={classes.center} >
+ <Typography component={"div"} className={classes.title} color="textSecondary" gutterBottom>Please add an ODL auto connect configuration.</Typography>
+ </div>
+ }
+ <Fab className={classes.fab} color="primary" aria-label="Add" onClick={() => this.setState({
+ ODLConfig: [...this.state.ODLConfig, { Server: '', Port: 8181, Protocol: 'https', User: 'admin', Password: 'admin', Trustall: false }]
+ })} > <AddIcon /> </Fab>
+
+ </TabContainer> : null}
+
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={(event) => {
+ this.onApply(Object.keys(this.state).reduce<MediatorConfig & { [kex: string]: any }>((acc, key) => {
+ // do not copy activeTab and activeOdlConfig
+ if (key !== "activeTab" && key !== "activeOdlConfig" && key !== "_initialMediatorConfig") acc[key] = (this.state as any)[key];
+ return acc;
+ }, {} as MediatorConfig));
+ event.preventDefault();
+ event.stopPropagation();
+ }} > {setting.applyButtonText} </Button>
+ <Button onClick={(event) => {
+ this.onCancel();
+ event.preventDefault();
+ event.stopPropagation();
+ }} color="secondary"> {setting.cancelButtonText} </Button>
+ </DialogActions>
+ </Dialog>
+ )
+ }
+
+ private onApply = (config: MediatorConfig) => {
+ this.props.onClose && this.props.onClose();
+ switch (this.props.mode) {
+ case EditMediatorConfigDialogMode.AddMediatorConfig:
+ config && this.props.addMediatorConfig(config);
+ break;
+ case EditMediatorConfigDialogMode.EditMediatorConfig:
+ config && this.props.updateMediatorConfig(config);
+ break;
+ case EditMediatorConfigDialogMode.RemoveMediatorConfig:
+ config && this.props.removeMediatorConfig(config);
+ break;
+ }
+ };
+
+ private onCancel = () => {
+ this.props.onClose && this.props.onClose();
+ }
+
+ static getDerivedStateFromProps(props: EditMediatorConfigDialogComponentProps, state: EditMediatorConfigDialogComponentState & { _initialMediatorConfig: MediatorConfig }): EditMediatorConfigDialogComponentState & { _initialMediatorConfig: MediatorConfig } {
+ if (props.mediatorConfig !== state._initialMediatorConfig) {
+ state = {
+ ...state,
+ ...props.mediatorConfig,
+ _initialMediatorConfig: props.mediatorConfig,
+ };
+ }
+ return state;
+ }
+}
+
+export const EditMediatorConfigDialog = withStyles(styles)(connect(mapProps, mapDispatch)(EditMediatorConfigDialogComponent));
+export default EditMediatorConfigDialog;
+
+
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
new file mode 100644
index 000000000..3937e9731
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorServerDialog.tsx
@@ -0,0 +1,156 @@
+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 { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
+
+import { addAvaliableMediatorServerAsyncActionCreator, removeAvaliableMediatorServerAsyncActionCreator, updateAvaliableMediatorServerAsyncActionCreator } from '../actions/avaliableMediatorServersActions';
+import { MediatorServer } from '../models/mediatorServer';
+
+export enum EditMediatorServerDialogMode {
+ None = "none",
+ AddMediatorServer = "addMediatorServer",
+ EditMediatorServer = "editMediatorServer",
+ RemoveMediatorServer = "removeMediatorServer",
+}
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+ addMediatorServer: (element: MediatorServer) => {
+ dispatcher.dispatch(addAvaliableMediatorServerAsyncActionCreator(element));
+ },
+ updateMediatorServer: (element: MediatorServer) => {
+ dispatcher.dispatch(updateAvaliableMediatorServerAsyncActionCreator(element));
+ },
+ removeMediatorServer: (element: MediatorServer) => {
+ dispatcher.dispatch(removeAvaliableMediatorServerAsyncActionCreator(element));
+ },
+});
+
+type DialogSettings = {
+ dialogTitle: string;
+ dialogDescription: string;
+ applyButtonText: string;
+ cancelButtonText: string;
+ readonly: boolean;
+};
+
+const settings: { [key: string]: DialogSettings } = {
+ [EditMediatorServerDialogMode.None]: {
+ dialogTitle: "",
+ dialogDescription: "",
+ applyButtonText: "",
+ cancelButtonText: "",
+ readonly: true,
+ },
+ [EditMediatorServerDialogMode.AddMediatorServer]: {
+ dialogTitle: "Add Medator Server",
+ dialogDescription: "",
+ applyButtonText: "Add",
+ cancelButtonText: "Cancel",
+ readonly: false,
+ },
+ [EditMediatorServerDialogMode.EditMediatorServer]: {
+ dialogTitle: "Edit Medator Server",
+ dialogDescription: "",
+ applyButtonText: "Update",
+ cancelButtonText: "Cancel",
+ readonly: false,
+ },
+ [EditMediatorServerDialogMode.RemoveMediatorServer]: {
+ dialogTitle: "Remove Mediator Server",
+ dialogDescription: "",
+ applyButtonText: "Remove",
+ cancelButtonText: "Cancel",
+ readonly: true,
+ },
+};
+
+type EditMediatorServerDialogComponentProps = Connect<undefined,typeof mapDispatch> & {
+ mode: EditMediatorServerDialogMode;
+ mediatorServer: MediatorServer;
+ onClose: () => void;
+};
+
+type EditMediatorServerDialogComponentState = MediatorServer ;
+
+class EditMediatorServerDialogComponent extends React.Component<EditMediatorServerDialogComponentProps, EditMediatorServerDialogComponentState> {
+ constructor(props: EditMediatorServerDialogComponentProps) {
+ super(props);
+
+ this.state = {
+ ...this.props.mediatorServer
+ };
+ }
+
+ render(): JSX.Element {
+ const setting = settings[this.props.mode];
+ return (
+ <Dialog open={ this.props.mode !== EditMediatorServerDialogMode.None }>
+ <DialogTitle id="form-dialog-title">{ setting.dialogTitle }</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ { 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}); } }/>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={ (event) => {
+ this.onApply({
+ _id: this.state._id,
+ name: this.state.name,
+ url: this.state.url,
+ });
+ event.preventDefault();
+ event.stopPropagation();
+ } } > { setting.applyButtonText } </Button>
+ <Button onClick={ (event) => {
+ this.onCancel();
+ event.preventDefault();
+ event.stopPropagation();
+ } } color="secondary"> { setting.cancelButtonText } </Button>
+ </DialogActions>
+ </Dialog>
+ )
+ }
+
+ private onApply = (element: MediatorServer) => {
+ this.props.onClose && this.props.onClose();
+ switch (this.props.mode) {
+ case EditMediatorServerDialogMode.AddMediatorServer:
+ element && this.props.addMediatorServer(element);
+ break;
+ case EditMediatorServerDialogMode.EditMediatorServer:
+ element && this.props.updateMediatorServer(element);
+ break;
+ case EditMediatorServerDialogMode.RemoveMediatorServer:
+ element && this.props.removeMediatorServer(element);
+ break;
+ }
+ };
+
+ private onCancel = () => {
+ this.props.onClose && this.props.onClose();
+ }
+
+ static getDerivedStateFromProps(props: EditMediatorServerDialogComponentProps, state: EditMediatorServerDialogComponentState & { _initialMediatorServer: MediatorServer }): EditMediatorServerDialogComponentState & { _initialMediatorServer: MediatorServer } {
+ if (props.mediatorServer !== state._initialMediatorServer) {
+ state = {
+ ...state,
+ ...props.mediatorServer,
+ _initialMediatorServer: props.mediatorServer,
+ };
+ }
+ return state;
+ }
+}
+
+export const EditMediatorServerDialog = connect(undefined, mapDispatch)(EditMediatorServerDialogComponent);
+export default EditMediatorServerDialog; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/handlers/avaliableMediatorServersHandler.ts b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/avaliableMediatorServersHandler.ts
new file mode 100644
index 000000000..447e5e5bd
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/avaliableMediatorServersHandler.ts
@@ -0,0 +1,19 @@
+import { createExternal,IExternalTableState } from '../../../../framework/src/components/material-table/utilities';
+import { createSearchDataHandler } from '../../../../framework/src/utilities/elasticSearch';
+
+import { MediatorServer } from '../models/mediatorServer';
+import { mediatorServerResourcePath } from '../services/mediatorService';
+
+export interface IAvaliableMediatorServersState extends IExternalTableState<MediatorServer> { }
+
+// create eleactic search material data fetch handler
+const avaliableMediatorServersSearchHandler = createSearchDataHandler<MediatorServer>(mediatorServerResourcePath);
+
+export const {
+ actionHandler: avaliableMediatorServersActionHandler,
+ createActions: createAvaliableMediatorServersActions,
+ createProperties: createAvaliableMediatorServersProperties,
+ reloadAction: avaliableMediatorServersReloadAction,
+
+ // set value action, to change a value
+} = createExternal<MediatorServer>(avaliableMediatorServersSearchHandler, appState => appState.mediatorApp.avaliableMediatorServers); \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorAppRootHandler.ts b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorAppRootHandler.ts
new file mode 100644
index 000000000..bfebbdf5d
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorAppRootHandler.ts
@@ -0,0 +1,26 @@
+// main state handler
+
+import { combineActionHandler } from '../../../../framework/src/flux/middleware';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { IAvaliableMediatorServersState, avaliableMediatorServersActionHandler } from './avaliableMediatorServersHandler' ;
+import { MediatorServerState, mediatorServerHandler } from './mediatorServerHandler';
+
+export interface IMediatorAppStoreState {
+ avaliableMediatorServers: IAvaliableMediatorServersState,
+ mediatorServerState: MediatorServerState,
+}
+
+declare module '../../../../framework/src/store/applicationStore' {
+ interface IApplicationStoreState {
+ mediatorApp: IMediatorAppStoreState
+ }
+}
+
+const actionHandlers = {
+ avaliableMediatorServers: avaliableMediatorServersActionHandler,
+ mediatorServerState: mediatorServerHandler,
+};
+
+export const mediatorAppRootHandler = combineActionHandler<IMediatorAppStoreState>(actionHandlers);
+export default mediatorAppRootHandler;
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorServerHandler.ts b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorServerHandler.ts
new file mode 100644
index 000000000..2d3f71c82
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/handlers/mediatorServerHandler.ts
@@ -0,0 +1,96 @@
+import { XmlFileInfo, MediatorConfig, BusySymbol, MediatorConfigResponse, MediatorServerDevice } from "../models/mediatorServer";
+import { IActionHandler } from "../../../../framework/src/flux/action";
+import { SetMediatorServerVersion, SetMediatorServerInfo, SetAllMediatorServerConfigurations, SetMediatorServerBusy, SetMediatorServerSupportedDevices } from "../actions/mediatorServerActions";
+import { SetMediatorBusyByName, UpdateMediatorConfig, AddMediatorConfig, RemoveMediatorConfig } from "../actions/mediatorConfigActions";
+
+export type MediatorServerState = {
+ busy: boolean;
+ name: string| null ;
+ url: string | null;
+ serverVersion: string| null;
+ mediatorVersion: string| null;
+ nexmls: XmlFileInfo[];
+ configurations: MediatorConfigResponse[];
+ supportedDevices: MediatorServerDevice[];
+}
+
+const mediatorServerInit: MediatorServerState = {
+ busy: false,
+ name: null,
+ url: null,
+ serverVersion : null,
+ mediatorVersion: null,
+ nexmls: [],
+ configurations: [],
+ supportedDevices: []
+}
+
+export const mediatorServerHandler: IActionHandler<MediatorServerState> = (state = mediatorServerInit, action) => {
+ if (action instanceof SetMediatorServerBusy) {
+ state = {
+ ...state,
+ busy: action.isBusy
+ };
+ } else if (action instanceof SetMediatorServerInfo) {
+ state = {
+ ...state,
+ name: action.name,
+ url: action.url,
+ };
+ } else if (action instanceof SetMediatorServerVersion) {
+ state = {
+ ...state,
+ serverVersion: action.versionInfo && action.versionInfo.server ,
+ mediatorVersion: action.versionInfo && action.versionInfo.mediator ,
+ nexmls: action.versionInfo && [...action.versionInfo.nexmls] || [],
+ };
+ } else if (action instanceof SetAllMediatorServerConfigurations) {
+ state = {
+ ...state,
+ configurations: action.allConfigurations && action.allConfigurations.map(config => ({...config, busy: false}) ) || [],
+ };
+ } else if (action instanceof SetMediatorServerSupportedDevices) {
+ state = {
+ ...state,
+ supportedDevices: action.devices || [],
+ };
+ } else if (action instanceof SetMediatorBusyByName) {
+ const index = state.configurations.findIndex(config => config.Name === action.name);
+ if (index > -1) state = {
+ ...state,
+ configurations:[
+ ...state.configurations.slice(0, index),
+ { ...state.configurations[index], [BusySymbol]: action.isBusy },
+ ...state.configurations.slice(index + 1)
+ ]
+ };
+ } else if (action instanceof AddMediatorConfig) {
+ state = {
+ ...state,
+ configurations: [
+ ...state.configurations,
+ action.mediatorConfig
+ ]
+ };
+ } else if (action instanceof UpdateMediatorConfig) {
+ const index = state.configurations.findIndex(config => config.Name === action.name);
+ if (index > -1) state = {
+ ...state,
+ configurations:[
+ ...state.configurations.slice(0, index),
+ { ...action.mediatorConfig, [BusySymbol]: state.configurations[index][BusySymbol] },
+ ...state.configurations.slice(index + 1)
+ ]
+ };
+ } else if (action instanceof RemoveMediatorConfig) {
+ const index = state.configurations.findIndex(config => config.Name === action.name);
+ if (index > -1) state = {
+ ...state,
+ configurations:[
+ ...state.configurations.slice(0, index),
+ ...state.configurations.slice(index + 1)
+ ]
+ };
+ }
+ return state;
+} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/index.html b/sdnr/wt/odlux/apps/mediatorApp/src/index.html
new file mode 100644
index 000000000..95bf9ec6b
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <!-- <link rel="stylesheet" href="./vendor.css"> -->
+ <title>Mediator App</title>
+</head>
+
+<body>
+ <div id="app"></div>
+ <script type="text/javascript" src="./require.js"></script>
+ <script type="text/javascript" src="./config.js"></script>
+ <script>
+ // run the application
+ require(["app", "mediatorApp" ,"connectApp","inventoryApp","faultApp","helpApp"], function (app, mediatorApp, connectApp,inventoryApp,faultApp,helpApp) {
+ mediatorApp.register();
+ connectApp.register();
+ inventoryApp.register();
+ faultApp.register();
+ helpApp.register();
+ app("./app.tsx").runApplication();
+ });
+ </script>
+</body>
+
+</html> \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/models/mediatorServer.ts b/sdnr/wt/odlux/apps/mediatorApp/src/models/mediatorServer.ts
new file mode 100644
index 000000000..ff084b0c1
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/models/mediatorServer.ts
@@ -0,0 +1,60 @@
+export type MediatorServer = {
+ _id: string;
+ name: string;
+ url: string;
+}
+
+export type XmlFileInfo = {
+ filename: string;
+ version: string;
+}
+
+export type MediatorServerVersionInfo = {
+ mediator: string;
+ server: string;
+ nexmls: XmlFileInfo[];
+}
+
+export type ODLConfig = {
+ User: string;
+ Password: string;
+ Port: number;
+ Protocol: "http" | "https";
+ Server: string;
+ Trustall: boolean;
+};
+
+export const BusySymbol = Symbol("Busy");
+
+export type MediatorConfig = {
+ Name: string;
+ DeviceIp: string;
+ DevicePort: number;
+ DeviceType: number;
+ TrapPort: number;
+ NcUsername: string;
+ NcPassword: string;
+ NcPort: number;
+ NeXMLFile: string;
+ ODLConfig: ODLConfig[];
+}
+
+export type MediatorConfigResponse = MediatorConfig & {
+ IsNCConnected: boolean;
+ IsNeConnected: boolean;
+ autorun: boolean;
+ fwactive: boolean;
+ islocked: boolean;
+ ncconnections:{}[];
+ pid: number;
+ // extended properties
+ [BusySymbol]: boolean;
+}
+
+export type MediatorServerDevice = {
+ id: number; // DeviceType
+ device: string;
+ vendor: string;
+ version: string;
+ xml: string; // NeXMLFile
+} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/plugin.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/plugin.tsx
new file mode 100644
index 000000000..0878fee65
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/plugin.tsx
@@ -0,0 +1,66 @@
+// app configuration and main entry point for the app
+
+import * as React from "react";
+import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom';
+
+import { faGlobe } from '@fortawesome/free-solid-svg-icons'; // select app icon
+
+import applicationManager from '../../../framework/src/services/applicationManager';
+import { IApplicationStoreState } from "../../../framework/src/store/applicationStore";
+import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect';
+
+import { mediatorAppRootHandler } from './handlers/mediatorAppRootHandler';
+import { avaliableMediatorServersReloadAction } from "./handlers/avaliableMediatorServersHandler";
+
+import { MediatorApplication } from "./views/mediatorApplication";
+import { MediatorServerSelection } from "./views/mediatorServerSelection";
+import { initializeMediatorServerAsyncActionCreator } from "./actions/mediatorServerActions";
+
+let currentMediatorServerId: string | undefined = undefined;
+
+const mapDisp = (dispatcher: IDispatcher) => ({
+ loadMediatorServer : (mediatorServerId: string) => dispatcher.dispatch(initializeMediatorServerAsyncActionCreator(mediatorServerId)),
+});
+
+const MediatorServerRouteAdapter = connect(undefined, mapDisp)((props: RouteComponentProps<{ mediatorServerId: string }> & Connect<undefined, typeof mapDisp>) => {
+ if (currentMediatorServerId !== props.match.params.mediatorServerId) {
+ // route parameter has changed
+ currentMediatorServerId = props.match.params.mediatorServerId || undefined;
+ // Hint: This timeout is need, since it is not recommended to change the state while rendering is in progress !
+ window.setTimeout(() => {
+ if (currentMediatorServerId) {
+ props.loadMediatorServer(currentMediatorServerId);
+ }
+ });
+ }
+ return (
+ <MediatorApplication />
+ )
+});
+
+type AppProps = RouteComponentProps & Connect;
+
+const App = (props: AppProps) => (
+ <Switch>
+ <Route exact path={ `${ props.match.path }` } component={ MediatorServerSelection } />
+ <Route path={ `${ props.match.path }/:mediatorServerId` } component={ MediatorServerRouteAdapter } />
+ <Redirect to={ `${ props.match.path }` } />
+ </Switch>
+);
+
+const FinalApp = withRouter(connect()(App));
+
+export function register() {
+ const applicationApi = applicationManager.registerApplication({
+ name: "mediatorApp",
+ icon: faGlobe,
+ rootComponent: FinalApp,
+ rootActionHandler: mediatorAppRootHandler,
+ menuEntry: "Mediator App"
+ });
+
+ // prefetch all avaliable mediator servers
+ applicationApi.applicationStoreInitialized.then(applicationStore => {
+ applicationStore.dispatch(avaliableMediatorServersReloadAction)
+ });
+};
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/services/mediatorService.ts b/sdnr/wt/odlux/apps/mediatorApp/src/services/mediatorService.ts
new file mode 100644
index 000000000..50fd869b1
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/services/mediatorService.ts
@@ -0,0 +1,149 @@
+import * as $ from 'jquery';
+
+import { requestRest } from '../../../../framework/src/services/restService';
+import { MediatorServer, MediatorServerVersionInfo, MediatorConfig, MediatorServerDevice, MediatorConfigResponse } from '../models/mediatorServer';
+import { HitEntry } from '../../../../framework/src/models';
+
+export const mediatorServerResourcePath = "mwtn/mediator-server";
+
+type MediatorServerResponse<TData> = { code: number, data: TData };
+type IndexableMediatorServer = MediatorServer & { [key: string]: any; } ;
+
+/**
+ * Represents a web api accessor service for all mediator server actions.
+ */
+class MediatorService {
+ /**
+ * Inserts data into the mediator servers table.
+ */
+ public async insertMediatorServer(server: IndexableMediatorServer): Promise<MediatorServer | null> {
+ const path = `database/${mediatorServerResourcePath}`;
+ const data = Object.keys(server).reduce((acc, cur) => {
+ if (cur !== "_id") acc[cur] = server[cur];
+ return acc;
+ }, {} as IndexableMediatorServer);
+ const result = await requestRest<MediatorServer>(path, { method: "POST", body: JSON.stringify(data) });
+ return result || null;
+ }
+
+ /**
+ * Updates data into the mediator servers table.
+ */
+ public async updateMediatorServer(server: IndexableMediatorServer): Promise<MediatorServer | null> {
+ const path = `database/${mediatorServerResourcePath}/${server._id}`;
+ const data = Object.keys(server).reduce((acc, cur) => {
+ if (cur !== "_id") { acc[cur] = server[cur] } else { acc["id"] = 0 };
+ return acc;
+ }, {} as IndexableMediatorServer);
+ const result = await requestRest<MediatorServer>(path, { method: "PUT", body: JSON.stringify(data) });
+ return result || null;
+ }
+
+ /**
+ * Deletes data from the mediator servers table.
+ */
+ public async deleteMediatorServer(server: MediatorServer): Promise<MediatorServer | null> {
+ const path = `database/${mediatorServerResourcePath}/${server._id}`;
+ const result = await requestRest<MediatorServer>(path, { method: "DELETE" });
+ return result || null;
+ }
+
+ public async getMediatorServerById(serverId: string): Promise<MediatorServer | null> {
+ const path = `database/${mediatorServerResourcePath}/${serverId}`;
+ const result = await requestRest<HitEntry<MediatorServer> & { found: boolean }>(path, { method: "GET" });
+ return result && result.found && result._source && {
+ _id: result._id,
+ name: result._source.name,
+ url: result._source.url,
+ } || null;
+ }
+
+ // https://cloud-highstreet-technologies.com/wiki/doku.php?id=att:ms:api
+
+ private accassMediatorServer<TData ={}>(mediatorServerUrl: string, task: string, data?: {}): Promise<MediatorServerResponse<TData> | null> {
+ const url = `${mediatorServerUrl}/api/?task=${task}`;
+ // return (await requestRest<{ code: number, data: TData}>(path, { method: "POST" })) || null ;
+ return new Promise<{ code: number, data: TData }>((resolve, reject) => {
+ $.post({
+ url,
+ data: data,
+ //contentType: 'application/json'
+ }).then((result: any) => {
+ if (typeof result === "string") {
+ resolve(JSON.parse(result));
+ } else {
+ resolve(result);
+ };
+ });
+ });
+ }
+
+ public async getMediatorServerVersion(mediatorServerUrl: string): Promise<MediatorServerVersionInfo | null> {
+ const result = await this.accassMediatorServer<MediatorServerVersionInfo>(mediatorServerUrl, 'version');
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async getMediatorServerAllConfigs(mediatorServerUrl: string): Promise<MediatorConfigResponse[] | null> {
+ const result = await this.accassMediatorServer<MediatorConfigResponse[]>(mediatorServerUrl, 'getconfig');
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async getMediatorServerConfigByName(mediatorServerUrl: string, name: string): Promise<MediatorConfigResponse | null> {
+ const result = await this.accassMediatorServer<MediatorConfigResponse[]>(mediatorServerUrl, 'getconfig', { name } );
+ if (result && result.code === 1 && result.data && result.data.length === 1) return result.data[0];
+ return null;
+ }
+
+ public async getMediatorServerSupportedDevices(mediatorServerUrl: string): Promise<MediatorServerDevice[] | null> {
+ const result = await this.accassMediatorServer<MediatorServerDevice[]>(mediatorServerUrl, 'getdevices' );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async startMediatorByName(mediatorServerUrl: string, name: string): Promise<string | null> {
+ const result = await this.accassMediatorServer<string>(mediatorServerUrl, 'start', { name } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async stopMediatorByName(mediatorServerUrl: string, name: string): Promise<string | null> {
+ const result = await this.accassMediatorServer<string>(mediatorServerUrl, 'stop', { name } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async createMediatorConfig(mediatorServerUrl: string, config: MediatorConfig): Promise<string | null> {
+ const result = await this.accassMediatorServer<string>(mediatorServerUrl, 'create', { config: JSON.stringify(config) } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async updateMediatorConfigByName(mediatorServerUrl: string, config: MediatorConfig): Promise<string | null> {
+ const result = await this.accassMediatorServer<string>(mediatorServerUrl, 'update', { config: JSON.stringify(config) } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async deleteMediatorConfigByName(mediatorServerUrl: string, name: string): Promise<string | null> {
+ const result = await this.accassMediatorServer<string>(mediatorServerUrl, 'delete', { name } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async getMediatorServerFreeNcPorts(mediatorServerUrl: string, limit?: number): Promise<number[] | null> {
+ const result = await this.accassMediatorServer<number[]>(mediatorServerUrl, 'getncports', { limit } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+
+ public async getMediatorServerFreeSnmpPorts(mediatorServerUrl: string, limit?: number): Promise<number[] | null> {
+ const result = await this.accassMediatorServer<number[]>(mediatorServerUrl, 'getsnmpports', { limit } );
+ if (result && result.code === 1) return result.data;
+ return null;
+ }
+}
+
+export const mediatorService = new MediatorService;
+export default mediatorService; \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
new file mode 100644
index 000000000..11feb46ae
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { Theme, createStyles, WithStyles, withStyles, Tooltip } from '@material-ui/core';
+
+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 CircularProgress from '@material-ui/core/CircularProgress'
+
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
+
+import { MediatorConfig, BusySymbol, MediatorConfigResponse } from '../models/mediatorServer';
+import EditMediatorConfigDialog, { EditMediatorConfigDialogMode } from '../components/editMediatorConfigDialog';
+import { startMediatorByNameAsyncActionCreator, stopMediatorByNameAsyncActionCreator } from '../actions/mediatorConfigActions';
+import mediatorService from '../services/mediatorService';
+
+const styles = (theme: Theme) => createStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ flex: '1',
+ },
+ formControl: {
+ margin: theme.spacing.unit,
+ minWidth: 300,
+ },
+ button: {
+ margin: 0,
+ padding: "6px 6px",
+ minWidth: 'unset'
+ },
+ spacer: {
+ marginLeft: theme.spacing.unit,
+ marginRight: theme.spacing.unit,
+ display: "inline"
+ },
+ progress: {
+ flex: '1 1 100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ pointerEvents: 'none'
+ }
+});
+
+const mapProps = (state: IApplicationStoreState) => ({
+ serverName: state.mediatorApp.mediatorServerState.name,
+ serverUrl: state.mediatorApp.mediatorServerState.url,
+ serverVersion: state.mediatorApp.mediatorServerState.serverVersion,
+ mediatorVersion: state.mediatorApp.mediatorServerState.mediatorVersion,
+ configurations: state.mediatorApp.mediatorServerState.configurations,
+ supportedDevices: state.mediatorApp.mediatorServerState.supportedDevices,
+ busy: state.mediatorApp.mediatorServerState.busy,
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+ startMediator: (name: string) => dispatcher.dispatch(startMediatorByNameAsyncActionCreator(name)),
+ stopMediator: (name: string) => dispatcher.dispatch(stopMediatorByNameAsyncActionCreator(name)),
+});
+
+const emptyMediatorConfig: MediatorConfig = {
+ Name: "",
+ DeviceIp: "127.0.0.1",
+ DevicePort: 161,
+ NcUsername: "admin",
+ NcPassword: "admin",
+ DeviceType: -1,
+ NcPort: 4020,
+ TrapPort: 10020,
+ NeXMLFile: "",
+ ODLConfig: []
+};
+
+const MediatorServerConfigurationsTable = MaterialTable as MaterialTableCtorType<MediatorConfigResponse>;
+
+type MediatorApplicationComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
+
+type MediatorServerSelectionComponentState = {
+ busy: boolean,
+ mediatorConfigToEdit: MediatorConfig,
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode
+}
+
+class MediatorApplicationComponent extends React.Component<MediatorApplicationComponentProps, MediatorServerSelectionComponentState> {
+
+ constructor (props: MediatorApplicationComponentProps) {
+ super(props);
+
+ this.state = {
+ busy: false,
+ mediatorConfigToEdit: emptyMediatorConfig,
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.None,
+ }
+ }
+
+ render() {
+ const { classes } = this.props;
+
+ const renderActions = (rowData: MediatorConfigResponse) => (
+ <>
+ <div className={classes.spacer}>
+ <Tooltip title={"Start"} >
+ <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+ <StartIcon onClick={(event) => { event.preventDefault(); event.stopPropagation(); this.props.startMediator(rowData.Name); }} />
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={"Stop"} >
+ <IconButton disabled={rowData[BusySymbol]} className={classes.button}>
+ <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}><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>
+ </div>
+ </>
+ );
+
+ const addMediatorConfigAction = { icon: AddIcon, tooltip: 'Add', onClick: this.onOpenAddConfigurationDialog };
+ return (
+ <div className={classes.root}>
+ {this.props.busy || this.state.busy
+ ? <div className={classes.progress}> <CircularProgress color={"secondary"} size={48} /> </div>
+ : <MediatorServerConfigurationsTable title={this.props.serverName || ''} customActionButtons={[addMediatorConfigAction]} idProperty={"Name"} rows={this.props.configurations} asynchronus columns={[
+ { property: "Name", title: "Mediator", type: ColumnType.text },
+ { property: "Status", title: "Status", type: ColumnType.custom, customControl: ({ rowData }) => rowData.pid ? (<span>Running</span>) : (<span>Stopped</span>) },
+ { property: "DeviceIp", title: "IP Adress", type: ColumnType.text },
+ {
+ property: "Device", title: "Device", type: ColumnType.custom, customControl: ({ rowData }) => {
+ const dev = this.props.supportedDevices && this.props.supportedDevices.find(dev => dev.id === rowData.DeviceType);
+ return (
+ <span> {dev && `${dev.vendor} - ${dev.device} (${dev.version || '0.0.0'})`} </span>
+ )
+ }
+ },
+ { property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => renderActions(rowData) },
+ ]} />
+ }
+
+ <EditMediatorConfigDialog
+ mediatorConfig={this.state.mediatorConfigToEdit}
+ mode={this.state.mediatorConfigEditorMode}
+ onClose={this.onCloseEditMediatorConfigDialog} />
+
+ </div>
+ );
+ }
+
+ private onOpenAddConfigurationDialog = () => {
+ // Tries to determine a free port for netconf listener and snpm listener
+ // it it could not determine free ports the dialog will open any way
+ // those ports should not be configured from the fontend, furthermore
+ // the backend should auto configure them and tell the user the result
+ // after the creation process.
+
+ this.setState({
+ busy: true,
+ });
+ this.props.serverUrl && Promise.all([
+ mediatorService.getMediatorServerFreeNcPorts(this.props.serverUrl, 1),
+ mediatorService.getMediatorServerFreeSnmpPorts(this.props.serverUrl, 1),
+ ]).then(([freeNcPorts, freeSnmpPorts]) => {
+ if (freeNcPorts && freeSnmpPorts && freeNcPorts.length > 0 && freeSnmpPorts.length > 0) {
+ this.setState({
+ busy: false,
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.AddMediatorConfig,
+ mediatorConfigToEdit: {
+ ...emptyMediatorConfig,
+ NcPort: freeNcPorts[0],
+ TrapPort: freeSnmpPorts[0],
+ },
+ });
+ } else {
+ this.setState({
+ busy: false,
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.AddMediatorConfig,
+ mediatorConfigToEdit: { ...emptyMediatorConfig },
+ });
+ }
+ })
+
+ }
+
+ private onOpenEditConfigurationDialog = (event: React.MouseEvent<HTMLElement>, configEntry: MediatorConfig) => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.setState({
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.EditMediatorConfig,
+ mediatorConfigToEdit: configEntry,
+ });
+ }
+
+ private onOpenRemoveConfigutationDialog = (event: React.MouseEvent<HTMLElement>, configEntry: MediatorConfig) => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.setState({
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.RemoveMediatorConfig,
+ mediatorConfigToEdit: configEntry,
+ });
+ }
+
+ private onCloseEditMediatorConfigDialog = () => {
+ this.setState({
+ mediatorConfigEditorMode: EditMediatorConfigDialogMode.None,
+ mediatorConfigToEdit: emptyMediatorConfig,
+ });
+ }
+}
+
+export const MediatorApplication = withStyles(styles)(connect(mapProps, mapDispatch)(MediatorApplicationComponent));
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
new file mode 100644
index 000000000..38bbdecb4
--- /dev/null
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
+
+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 { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
+import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
+
+import { createAvaliableMediatorServersProperties, createAvaliableMediatorServersActions } from '../handlers/avaliableMediatorServersHandler';
+
+import { MediatorServer } from '../models/mediatorServer';
+import EditMediatorServerDialog, { EditMediatorServerDialogMode } from '../components/editMediatorServerDialog';
+import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+
+const MediatorServersTable = MaterialTable as MaterialTableCtorType<MediatorServer>;
+
+const styles = (theme: Theme) => createStyles({
+ button: {
+ margin: 0,
+ padding: "6px 6px",
+ minWidth: 'unset',
+ },
+ spacer: {
+ marginLeft: theme.spacing.unit,
+ marginRight: theme.spacing.unit,
+ display: "inline",
+ },
+});
+
+const mapProps = (state: IApplicationStoreState) => ({
+ mediatorServersProperties: createAvaliableMediatorServersProperties(state),
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+ mediatorServersActions: createAvaliableMediatorServersActions(dispatcher.dispatch),
+ selectMediatorServer: (mediatorServerId: string) => mediatorServerId && dispatcher.dispatch(new NavigateToApplication("mediatorApp", mediatorServerId)),
+});
+
+const emptyMediatorServer: MediatorServer = {
+ _id: "",
+ name: "",
+ url: ""
+};
+
+type MediatorServerSelectionComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
+
+type MediatorServerSelectionComponentState = {
+ mediatorServerToEdit: MediatorServer,
+ mediatorServerEditorMode: EditMediatorServerDialogMode
+}
+
+class MediatorServerSelectionComponent extends React.Component<MediatorServerSelectionComponentProps, MediatorServerSelectionComponentState> {
+
+ constructor (props: MediatorServerSelectionComponentProps) {
+ super(props);
+
+ this.state = {
+ mediatorServerEditorMode: EditMediatorServerDialogMode.None,
+ mediatorServerToEdit: emptyMediatorServer,
+ }
+ }
+
+ render() {
+ const { classes } = this.props;
+
+ const addMediatorServerActionButton = {
+ icon: AddIcon, tooltip: 'Add', onClick: () => {
+ this.setState({
+ mediatorServerEditorMode: EditMediatorServerDialogMode.AddMediatorServer,
+ mediatorServerToEdit: emptyMediatorServer,
+ });
+ }
+ };
+ return (
+ <>
+ <MediatorServersTable customActionButtons={[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 } />
+ </>
+ );
+ }
+
+ private onSelectMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) =>{
+ event.preventDefault();
+ event.stopPropagation();
+ this.props.selectMediatorServer(server && server._id);
+
+ }
+
+ private onEditMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.setState({
+ mediatorServerEditorMode: EditMediatorServerDialogMode.EditMediatorServer,
+ mediatorServerToEdit: server,
+ });
+ }
+
+ private onRemoveMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.setState({
+ mediatorServerEditorMode: EditMediatorServerDialogMode.RemoveMediatorServer,
+ mediatorServerToEdit: server,
+ });
+ }
+
+ private onCloseEditMediatorServerDialog = () => {
+ this.setState({
+ mediatorServerEditorMode: EditMediatorServerDialogMode.None,
+ mediatorServerToEdit: emptyMediatorServer,
+ });
+ }
+}
+
+
+export const MediatorServerSelection = withStyles(styles)(connect(mapProps, mapDispatch)(MediatorServerSelectionComponent));
+export default MediatorServerSelection; \ No newline at end of file