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