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
10 * http://www.apache.org/licenses/LICENSE-2.0
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
16 * ============LICENSE_END==========================================================================
18 import * as React from 'react';
19 import { WithStyles, withStyles, createStyles, Theme, Tooltip } from '@material-ui/core';
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';
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';
31 import { createAvaliableMediatorServersProperties, createAvaliableMediatorServersActions } from '../handlers/avaliableMediatorServersHandler';
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';
38 const MediatorServersTable = MaterialTable as MaterialTableCtorType<MediatorServer>;
40 const styles = (theme: Theme) => createStyles({
47 marginLeft: theme.spacing(1),
48 marginRight: theme.spacing(1),
53 const mapProps = (state: IApplicationStoreState) => ({
54 mediatorServersProperties: createAvaliableMediatorServersProperties(state),
57 const mapDispatch = (dispatcher: IDispatcher) => ({
58 mediatorServersActions: createAvaliableMediatorServersActions(dispatcher.dispatch),
59 selectMediatorServer: (mediatorServerId: string) => mediatorServerId && dispatcher.dispatch(new NavigateToApplication("mediator", mediatorServerId)),
62 const emptyMediatorServer: MediatorServer = {
68 type MediatorServerSelectionComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
70 type MediatorServerSelectionComponentState = {
71 mediatorServerToEdit: MediatorServer,
72 mediatorServerEditorMode: EditMediatorServerDialogMode,
73 refreshMediatorEditorMode: RefreshMediatorDialogMode
76 let initialSorted = false;
78 class MediatorServerSelectionComponent extends React.Component<MediatorServerSelectionComponentProps, MediatorServerSelectionComponentState> {
80 constructor(props: MediatorServerSelectionComponentProps) {
84 mediatorServerEditorMode: EditMediatorServerDialogMode.None,
85 mediatorServerToEdit: emptyMediatorServer,
86 refreshMediatorEditorMode: RefreshMediatorDialogMode.None
91 const { classes } = this.props;
92 const refreshMediatorAction = {
93 icon: Refresh, tooltip: 'Refresh Mediator Server Table', onClick: () => {
95 refreshMediatorEditorMode: RefreshMediatorDialogMode.RefreshMediatorTable
100 const addMediatorServerActionButton = {
101 icon: AddIcon, tooltip: 'Add', onClick: () => {
103 mediatorServerEditorMode: EditMediatorServerDialogMode.AddMediatorServer,
104 mediatorServerToEdit: emptyMediatorServer,
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 },
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>
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}
135 public componentDidMount() {
137 if (!initialSorted) {
138 initialSorted = true;
139 this.props.mediatorServersActions.onHandleRequestSort("name");
141 this.props.mediatorServersActions.onRefresh();
145 private onSelectMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
146 event.preventDefault();
147 event.stopPropagation();
148 this.props.selectMediatorServer(server && server.id);
152 private onEditMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
153 event.preventDefault();
154 event.stopPropagation();
156 mediatorServerEditorMode: EditMediatorServerDialogMode.EditMediatorServer,
157 mediatorServerToEdit: server,
161 private onRemoveMediatorServer = (event: React.MouseEvent<HTMLElement>, server: MediatorServer) => {
162 event.preventDefault();
163 event.stopPropagation();
165 mediatorServerEditorMode: EditMediatorServerDialogMode.RemoveMediatorServer,
166 mediatorServerToEdit: server,
170 private onCloseEditMediatorServerDialog = () => {
172 mediatorServerEditorMode: EditMediatorServerDialogMode.None,
173 mediatorServerToEdit: emptyMediatorServer,
176 private onCloseRefreshMediatorDialog = () => {
178 refreshMediatorEditorMode: RefreshMediatorDialogMode.None
184 export const MediatorServerSelection = withStyles(styles)(connect(mapProps, mapDispatch)(MediatorServerSelectionComponent));
185 export default MediatorServerSelection;