sdnr/wt/odlux/apps/mediatorApp/src/views/mediatorServerSelection.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 import * as React from 'react';
  19 import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
  20
  21 import AddIcon from '@material-ui/icons/Add';
  22 import IconButton from '@material-ui/core/IconButton';
  23 import EditIcon from '@material-ui/icons/Edit';
  24 import DeleteIcon from '@material-ui/icons/Delete';
  25
  26 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
  27 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
  28 import MaterialTable, { MaterialTableCtorType, ColumnType } from '../../../../framework/src/components/material-table';
  29
  30 import { createAvaliableMediatorServersProperties, createAvaliableMediatorServersActions } from '../handlers/avaliableMediatorServersHandler';
  31
  32 import { MediatorServer } from '../models/mediatorServer';
  33 import EditMediatorServerDialog, { EditMediatorServerDialogMode } from '../components/editMediatorServerDialog';
  34 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
  35
  36 const MediatorServersTable = MaterialTable as MaterialTableCtorType<MediatorServer>;
  37
  38 const styles = (theme: Theme) => createStyles({
  39   button: {
  40     margin: 0,
  41     padding: "6px 6px",
  42     minWidth: 'unset',
  43   },
  44   spacer: {
  45     marginLeft: theme.spacing(1),
  46     marginRight: theme.spacing(1),
  47     display: "inline",
  48   },
  49 });
  50
  51 const mapProps = (state: IApplicationStoreState) => ({
  52   mediatorServersProperties: createAvaliableMediatorServersProperties(state),
  53 });
  54
  55 const mapDispatch = (dispatcher: IDispatcher) => ({
  56   mediatorServersActions: createAvaliableMediatorServersActions(dispatcher.dispatch),
  57   selectMediatorServer: (mediatorServerId: string) => mediatorServerId && dispatcher.dispatch(new NavigateToApplication("mediator", mediatorServerId)),
  58 });
  59
  60 const emptyMediatorServer: MediatorServer = {
  61   id: "",
  62   name: "",
  63   url: ""
  64 };
  65
  66 type MediatorServerSelectionComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
  67
  68 type MediatorServerSelectionComponentState = {
  69   mediatorServerToEdit: MediatorServer,
  70   mediatorServerEditorMode: EditMediatorServerDialogMode
  71 }
  72
  73 class MediatorServerSelectionComponent extends React.Component<MediatorServerSelectionComponentProps, MediatorServerSelectionComponentState> {
  74
  75   constructor(props: MediatorServerSelectionComponentProps) {
  76     super(props);
  77
  78     this.state = {
  79       mediatorServerEditorMode: EditMediatorServerDialogMode.None,
  80       mediatorServerToEdit: emptyMediatorServer,
  81     }
  82   }
  83
  84   render() {
  85     const { classes } = this.props;
  86
  87     const addMediatorServerActionButton = {
  88       icon: AddIcon, tooltip: 'Add', onClick: () => {
  89         this.setState({
  90           mediatorServerEditorMode: EditMediatorServerDialogMode.AddMediatorServer,
  91           mediatorServerToEdit: emptyMediatorServer,
  92         });
  93       }
  94     };
  95     return (
  96       <>
  97         <MediatorServersTable stickyHeader title={"Mediator"} customActionButtons={[addMediatorServerActionButton]} idProperty={"id"}
  98           {...this.props.mediatorServersActions} {...this.props.mediatorServersProperties} columns={[
  99             { property: "name", title: "Name", type: ColumnType.text },
 100             { property: "url", title: "Url", type: ColumnType.text },
 101             {
 102               property: "actions", title: "Actions", type: ColumnType.custom, customControl: ({ rowData }) => (
 103                 <div className={classes.spacer}>
 104                   <Tooltip title={"Edit"} ><IconButton className={classes.button} onClick={event => { this.onEditMediatorServer(event, rowData); }}><EditIcon /></IconButton></Tooltip>
 105                   <Tooltip title={"Remove"} ><IconButton className={classes.button} onClick={event => { this.onRemoveMediatorServer(event, rowData); }}><DeleteIcon /></IconButton></Tooltip>
 106                 </div>
 107               )
 108             }
 109           ]} onHandleClick={this.onSelectMediatorServer} />
 110         <EditMediatorServerDialog
 111           mediatorServer={this.state.mediatorServerToEdit}
 112           mode={this.state.mediatorServerEditorMode}
 113           onClose={this.onCloseEditMediatorServerDialog} />
 114       </>
 115     );
 116   }
 117
 118   public componentDidMount() {
 119     this.props.mediatorServersActions.onToggleFilter();
 120   }
 121
 122   private onSelectMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
 123     event.preventDefault();
 124     event.stopPropagation();
 125     this.props.selectMediatorServer(server && server.id);
 126
 127   }
 128
 129   private onEditMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
 130     event.preventDefault();
 131     event.stopPropagation();
 132     this.setState({
 133       mediatorServerEditorMode: EditMediatorServerDialogMode.EditMediatorServer,
 134       mediatorServerToEdit: server,
 135     });
 136   }
 137
 138   private onRemoveMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
 139     event.preventDefault();
 140     event.stopPropagation();
 141     this.setState({
 142       mediatorServerEditorMode: EditMediatorServerDialogMode.RemoveMediatorServer,
 143       mediatorServerToEdit: server,
 144     });
 145   }
 146
 147   private onCloseEditMediatorServerDialog = () => {
 148     this.setState({
 149       mediatorServerEditorMode: EditMediatorServerDialogMode.None,
 150       mediatorServerToEdit: emptyMediatorServer,
 151     });
 152   }
 153 }
 154
 155
 156 export const MediatorServerSelection = withStyles(styles)(connect(mapProps, mapDispatch)(MediatorServerSelectionComponent));
 157 export default MediatorServerSelection;