diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx | 78 |
1 files changed, 58 insertions, 20 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx index fcb3fe46f..945e13507 100644 --- a/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx +++ b/sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorApplication.tsx @@ -36,6 +36,7 @@ import { MediatorConfig, BusySymbol, MediatorConfigResponse } from '../models/me import EditMediatorConfigDialog, { EditMediatorConfigDialogMode } from '../components/editMediatorConfigDialog'; import { startMediatorByNameAsyncActionCreator, stopMediatorByNameAsyncActionCreator } from '../actions/mediatorConfigActions'; import mediatorService from '../services/mediatorService'; +import { ShowMediatorInfoDialog, MediatorInfoDialogMode } from '../components/showMeditaorInfoDialog' const styles = (theme: Theme) => createStyles({ root: { @@ -44,7 +45,7 @@ const styles = (theme: Theme) => createStyles({ flex: '1', }, formControl: { - margin: theme.spacing.unit, + margin: theme.spacing(1), minWidth: 300, }, button: { @@ -53,8 +54,8 @@ const styles = (theme: Theme) => createStyles({ minWidth: 'unset' }, spacer: { - marginLeft: theme.spacing.unit, - marginRight: theme.spacing.unit, + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), display: "inline" }, progress: { @@ -75,6 +76,7 @@ const mapProps = (state: IApplicationStoreState) => ({ configurations: state.mediator.mediatorServerState.configurations, supportedDevices: state.mediator.mediatorServerState.supportedDevices, busy: state.mediator.mediatorServerState.busy, + isReachable: state.mediator.mediatorServerState.isReachable }); const mapDispatch = (dispatcher: IDispatcher) => ({ @@ -96,13 +98,16 @@ const emptyMediatorConfig: MediatorConfig = { }; const MediatorServerConfigurationsTable = MaterialTable as MaterialTableCtorType<MediatorConfigResponse>; +const MediatorServerUnreachableTable = MaterialTable as MaterialTableCtorType<{ Name: string, status: string, ipAdress: string, device: string, actions: string }> type MediatorApplicationComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>; type MediatorServerSelectionComponentState = { busy: boolean, mediatorConfigToEdit: MediatorConfig, - mediatorConfigEditorMode: EditMediatorConfigDialogMode + mediatorConfigEditorMode: EditMediatorConfigDialogMode, + mediatorShowInfoMode: MediatorInfoDialogMode, + mediatorConfigToDisplay: MediatorConfigResponse | null } class MediatorApplicationComponent extends React.Component<MediatorApplicationComponentProps, MediatorServerSelectionComponentState> { @@ -114,6 +119,8 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo busy: false, mediatorConfigToEdit: emptyMediatorConfig, mediatorConfigEditorMode: EditMediatorConfigDialogMode.None, + mediatorShowInfoMode: MediatorInfoDialogMode.None, + mediatorConfigToDisplay: null } } @@ -135,7 +142,7 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo </Tooltip> </div> <div className={classes.spacer}> - <Tooltip title={"Info"} ><IconButton className={classes.button}><InfoIcon /></IconButton></Tooltip> + <Tooltip title={"Info"} ><IconButton className={classes.button} onClick={(event) => { this.onOpenInfoDialog(event, rowData) }}><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} @@ -145,24 +152,38 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo ); 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) }, - ]} /> + : + + this.props.isReachable ? + + <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) }, + ]} /> + : + <MediatorServerUnreachableTable title={this.props.serverName || ''} idProperty={"Name"} disableFilter={true} disableSorting={true} enableSelection={false} rows={[{ Name: '', status: "Mediator server not found.", ipAdress: '', device: '', actions: '' }]} columns={[ + { property: "Name", title: "Mediator", type: ColumnType.text }, + { property: "status", title: "Status", type: ColumnType.text }, + { property: "ipAdress", title: "IP Adress", type: ColumnType.text }, + { property: "device", title: "Device", type: ColumnType.text }, + { property: "actions", title: "Actions", type: ColumnType.text }, + + ]} /> } <EditMediatorConfigDialog @@ -170,17 +191,34 @@ class MediatorApplicationComponent extends React.Component<MediatorApplicationCo mode={this.state.mediatorConfigEditorMode} onClose={this.onCloseEditMediatorConfigDialog} /> + { + + this.state.mediatorShowInfoMode != MediatorInfoDialogMode.None && + <ShowMediatorInfoDialog + config={this.state.mediatorConfigToDisplay as MediatorConfigResponse} + mode={this.state.mediatorShowInfoMode} + onClose={this.onCloseInfoDialog} /> + } </div> ); } + private onOpenInfoDialog = (event: React.MouseEvent<HTMLElement>, configEntry: MediatorConfigResponse) => { + event.stopPropagation(); + event.preventDefault(); + this.setState({ mediatorShowInfoMode: MediatorInfoDialogMode.ShowDetails, mediatorConfigToDisplay: configEntry }) + } + + private onCloseInfoDialog = () => { + this.setState({ mediatorShowInfoMode: MediatorInfoDialogMode.None, mediatorConfigToDisplay: null }) + } + 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, }); |