2017-05-16 13:34:00 +02:00
|
|
|
/**
|
|
|
|
|
* Show BGP attributes as a modal dialog
|
|
|
|
|
*
|
|
|
|
|
* @author Matthias Hannig <mha@ecix.net>
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import React from 'react'
|
|
|
|
|
import {connect} from 'react-redux'
|
|
|
|
|
|
|
|
|
|
import Modal, {Header, Body, Footer} from 'components/modals/modal'
|
|
|
|
|
|
2018-10-03 16:19:46 +02:00
|
|
|
import BgpCommunitiyLabel
|
2018-10-03 19:27:12 +02:00
|
|
|
from 'components/routeservers/communities/label'
|
2018-08-09 23:24:58 +02:00
|
|
|
|
2017-05-16 13:34:00 +02:00
|
|
|
import {hideBgpAttributesModal}
|
|
|
|
|
from './bgp-attributes-modal-actions'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class BgpAttributesModal extends React.Component {
|
|
|
|
|
closeModal() {
|
|
|
|
|
this.props.dispatch(
|
|
|
|
|
hideBgpAttributesModal()
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let attrs = this.props.bgpAttributes;
|
|
|
|
|
if (!attrs.bgp) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2018-09-07 11:40:03 +02:00
|
|
|
const communities = attrs.bgp.communities;
|
2018-10-08 14:53:51 +02:00
|
|
|
const extCommunities = attrs.bgp.ext_communities;
|
|
|
|
|
const largeCommunities = attrs.bgp.large_communities;
|
2017-05-16 13:34:00 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Modal className="bgp-attributes-modal"
|
|
|
|
|
show={this.props.show}
|
|
|
|
|
onClickBackdrop={() => this.closeModal()}>
|
|
|
|
|
|
|
|
|
|
<Header onClickClose={() => this.closeModal()}>
|
|
|
|
|
<p>BGP Attributes for Network:</p>
|
|
|
|
|
<h4>{attrs.network}</h4>
|
|
|
|
|
</Header>
|
|
|
|
|
|
|
|
|
|
<Body>
|
|
|
|
|
<table className="table table-nolines">
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Origin:</th><td>{attrs.bgp.origin}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Local Pref:</th><td>{attrs.bgp.local_pref}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Next Hop:</th><td>{attrs.bgp.next_hop}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
2017-05-22 17:07:41 +02:00
|
|
|
<th>MED</th>
|
|
|
|
|
<td>{attrs.bgp.med}</td>
|
|
|
|
|
</tr>
|
2017-05-16 13:34:00 +02:00
|
|
|
{attrs.bgp && attrs.bgp.as_path &&
|
2017-05-22 17:07:41 +02:00
|
|
|
<tr>
|
|
|
|
|
<th>AS Path:</th><td>{attrs.bgp.as_path.join(' ')}</td>
|
|
|
|
|
</tr>}
|
2018-08-13 11:10:25 +02:00
|
|
|
{communities.length > 0 &&
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Communities:</th>
|
|
|
|
|
<td>
|
|
|
|
|
{communities.map((c) => <BgpCommunitiyLabel community={c} key={c} />)}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>}
|
2018-10-08 14:53:51 +02:00
|
|
|
{extCommunities.length > 0 &&
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Ext. Communities:</th>
|
|
|
|
|
<td>
|
|
|
|
|
{extCommunities.map((c) => <BgpCommunitiyLabel community={c} key={c} />)}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>}
|
|
|
|
|
{largeCommunities.length > 0 &&
|
2017-05-22 17:07:41 +02:00
|
|
|
<tr>
|
|
|
|
|
<th>Large Communities:</th>
|
2018-08-09 23:26:09 +02:00
|
|
|
<td>
|
2018-10-08 14:53:51 +02:00
|
|
|
{largeCommunities.map((c) => <BgpCommunitiyLabel community={c} key={c} />)}
|
2018-08-09 23:26:09 +02:00
|
|
|
</td>
|
2017-05-22 17:07:41 +02:00
|
|
|
</tr>}
|
2017-05-16 13:34:00 +02:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</Body>
|
|
|
|
|
|
|
|
|
|
<Footer>
|
|
|
|
|
<button className="btn btn-default"
|
|
|
|
|
onClick={() => this.closeModal()}>Close</button>
|
|
|
|
|
</Footer>
|
|
|
|
|
|
|
|
|
|
</Modal>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default connect(
|
|
|
|
|
(state) => {
|
|
|
|
|
return {
|
|
|
|
|
show: state.modals.bgpAttributes.show,
|
|
|
|
|
bgpAttributes: state.modals.bgpAttributes.bgpAttributes
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)(BgpAttributesModal);
|
|
|
|
|
|
