sdnr/wt/odlux/apps/mediatorApp/src/components/showMeditaorInfoDialog.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19 import * as React from 'react'
  20 import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, DialogContentText, Checkbox, Button, FormControlLabel, FormGroup } from '@material-ui/core';
  21 import { IApplicationState } from '../../../../framework/src/handlers/applicationStateHandler';
  22 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  23 import connect, { Connect } from '../../../../framework/src/flux/connect';
  24 import { MediatorConfigResponse } from 'models/mediatorServer';
  25 import { Panel } from '../../../../framework/src/components/material-ui/panel';
  26
  27 export enum MediatorInfoDialogMode {
  28     None = "none",
  29     ShowDetails = "showDetails"
  30 }
  31
  32 const mapProps = (state: IApplicationStoreState) => ({ supportedDevices: state.mediator.mediatorServerState.supportedDevices })
  33
  34 type ShowMediatorInfoDialogComponentProps = Connect<typeof mapProps, undefined> &
  35 {
  36     config: MediatorConfigResponse,
  37     mode: MediatorInfoDialogMode,
  38     onClose: () => void
  39 }
  40
  41 type ShowMediatorInfoDialogComponentState = {
  42     status: string,
  43     devicetype: string,
  44     activeOdlConfig: string
  45 }
  46
  47 /*
  48 Displays all values of a mediator server
  49 */
  50 class ShowMediatorInfoDialogComponent extends React.Component<ShowMediatorInfoDialogComponentProps, ShowMediatorInfoDialogComponentState> {
  51
  52     constructor(props: ShowMediatorInfoDialogComponentProps) {
  53         super(props);
  54         if (this.props.config) {
  55             let deviceType = props.supportedDevices.find(element => element.id === this.props.config.DeviceType)
  56
  57             this.state = {
  58                 status: props.config.pid > 0 ? "Running" : "Stopped",
  59                 devicetype: deviceType != undefined ? deviceType.device : 'none',
  60                 activeOdlConfig: ''
  61             }
  62         }
  63     }
  64
  65     onClose = (event: React.MouseEvent) => {
  66         event.preventDefault();
  67         event.stopPropagation();
  68         this.props.onClose();
  69     }
  70
  71     render() {
  72         return (
  73             <Dialog open={this.props.mode !== MediatorInfoDialogMode.None} onBackdropClick={this.props.onClose} >
  74                 <DialogTitle>{this.props.config.Name}</DialogTitle>
  75                 <DialogContent>
  76                     <TextField disabled margin="dense" id="deviceIp" label="Device IP" fullWidth defaultValue={this.props.config.DeviceIp} />
  77                     <TextField disabled margin="dense" id="deviceport" label="Device Port" fullWidth defaultValue={this.props.config.DevicePort} />
  78                     <TextField disabled margin="dense" id="status" label="Status" fullWidth defaultValue={this.state.status} />
  79                     <TextField disabled margin="dense" id="deviceType" label="Device Type" fullWidth defaultValue={this.state.devicetype} />
  80                     <TextField disabled margin="dense" id="ncPort" label="Netconf Port" fullWidth defaultValue={this.props.config.NcPort} />
  81                     <FormGroup>
  82                         <FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNCConnected}></Checkbox>} label="Netconf Connection" />
  83                         <FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.IsNeConnected}></Checkbox>} label="Network Element Connection" />
  84                         <FormControlLabel control={<Checkbox disabled defaultChecked={this.props.config.fwactive}></Checkbox>} label="Firewall active" />
  85                     </FormGroup>
  86                     {
  87                         this.props.config.ODLConfig.map((element, index) =>
  88                             <Panel title={"ODL config " + (this.props.config.ODLConfig.length > 1 ? index + 1 : '')} key={index} panelId={'panel-' + index} activePanel={this.state.activeOdlConfig} onToggle={(id: string) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); }}>
  89                                 <TextField disabled margin="dense" defaultValue={element.Protocol + '://' + element.Server} label="Server" />
  90                                 <TextField disabled margin="dense" defaultValue={element.Port} label="Port" />
  91                                 <FormControlLabel control={<Checkbox disabled checked={element.Trustall} />} label="Trustall" />
  92                             </Panel>
  93                         )
  94                     }
  95
  96                 </DialogContent>
  97                 <DialogActions>
  98                     <Button onClick={this.onClose}>Close</Button>
  99                 </DialogActions>
 100             </Dialog>
 101         )
 102     }
 103
 104 }
 105
 106 export const ShowMediatorInfoDialog = connect(mapProps)(ShowMediatorInfoDialogComponent)
 107 export default ShowMediatorInfoDialog;