text: import React, { Component } from 'react';
  import { Modal } from 'react-bootstrap';
  import Dropdown from 'react-bootstrap/Dropdown';
  import DropdownButton from 'react-bootstrap/DropdownButton';
  import { Translation } from 'react-i18next';
  import { Link } from 'react-router-dom';
  import { Col, Container, FormGroup, Input, Row } from 'reactstrap';
  import * as Constant from '../../../Base/Constant';
  import AgGrid from '../../../Base/FormControl/AgGrid';
  import Button from '../../../Base/FormControl/Button';
  import ModificationHistory from '../../../Common/ModificationHistory/ModificationHistory';
  import SynchonizeStatus from '../../../Common/SynchonizeStatus/SynchonizeStatus';
  import EditLanLinkInterface from '../../../OrderService/EditLanLinkInterface/EditLanLinkInterface';
  
  
  class RadioCellRenderer extends React.Component {
    render() {    
      return <Input className="option-input checkbox" type="checkbox" name="id" />;
     }
  }
  
  export class SelectLanLinkDirectFiberInterface extends Component {
    constructor(props) {
      super(props); 
      this.state = {
          viewLanLinkDevice: {
          interfaceName: '',
          configuration:'',
          configurationDetails:'',
          routerId: 'UAE12233',
          name: '7705@uae.colt.net',
          vendorModel: 'UAE12233',
          managementAddress: '255.255.254.254',
          snmpro: 'Public',
          mePId: '1122',
          powerAlarm: 'AC',
          mediaSelection: 'No',
          macAddress: '255.255.254.254',
          serialNumber: '255.255.254.254',
          hexaSerialNumber: '255.255.254.254',
          linkLostForwarding: 'Yes',
          country: 'UAE (United Arab Emirates)',
          city: 'AE (United Arab Emirates)',
          site: 'CSR Name :njnh',
          premise: 'site12444',
        },
        configurationTypes:[
          { name: "Type A", code: "A" },
          { name: "Type B", code: "B" },
          { name: "Type C", code: "C" },
        ],
        city: [
          { name: "India", code: "IN" },
          { name: "United State", code: "US" },
          { name: "United Kingdom", code: "UK" },
          { name: "Luxembourg", code: "LU" },
          { name: "Netherlands", code: "NL" },
          { name: "Sweden", code: "SE" }
        ],
        vendorModel: [
          { name: "Model A", code: "A" },
          { name: "Model B", code: "B" },
          { name: "Model C", code: "C" },
        ],
        country: [
          { "name": "AT (Austria)", "code": "AT" },
          { "name": "BE (Belgium)", "code": "BE" },
          { "name": "CH (Switzerland)", "code": "CH" },
          { "name": "DE (Germany)", "code": "DE" },
          { "name": "DK (Denmark)", "code": "DK" },
          { "name": "ES (Spain)", "code": "ES" },
          { "name": "FR (France)", "code": "FR" },
          { "name": "IE (Ireland)", "code": "IE" },
          { "name": "INT (International)", "code": "INT" },
          { "name": "IS (Iceland)", "code": "IS" },
          { "name": "IT (Italy)", "code": "IT" },
          { "name": "LU (Luxembourg)", "code": "LU" },
          { "name": "NL (Netherlands)", "code": "NL" },
          { "name": "PT (Portugal)", "code": "PT" },
          { "name": "SE (Sweden)", "code": "SE" },
          { "name": "UK (United Kingdom)", "code": "UK" },
          { "name": "US (United States)", "code": "US" }
        ],
        type: [
          { "name": "Colt Telecom - internal", "code": "AT" },
          { "name": "End Corporate Customer", "code": "BE" },
          { "name": "Partner", "code": "CH" },
          { "name": "SME", "code": "DE" },
          { "name": "Supplier", "code": "DK" },
          { "name": "Wholesale Customer", "code": "ES" }
        ],
        deviceListGridHeader:[
          {
            headerName: "",
            field: '',
            width: 60,
            sortable: true,
            filter: true,
            cellRendererFramework: RadioCellRenderer,
            //checkboxSelection:true
          },
          {
            headerName: "Interface",
            field: 'interface',
            sortable: true,
            filter: true,
          },
          {
            headerName: "Link/Circuit Id",
            field: 'linkCircuitId',
            sortable: true,
            filter: true,
          },
          {
            headerName: "Interface Address Range",
            field: 'interfaceAddressRange',
            sortable: true,
            filter: true,
          },
          {
            headerName: "Bearer Type",
            field: 'bearerType',
            sortable: true,
            filter: true,
          },
          {
            headerName: "Bandwidth",
            field: 'bandwidth',
            sortable: true,
            filter: true,
          }
        ],
        deviceListGridData:[
          {
            interface: "In service Interface1",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "In service Interface2",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "In service Interface3",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "In service Interface4",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "In service Interface5",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          }
        ],
        addDeviceListGridData:[
          {
            interface: "Select Interface 1",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "Select Interface 2",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "Select Interface 3",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "Select Interface 4",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          },
          {
            interface: "Select Interface 5",
            linkCircuitId: "UK_SE7_UNIT_C",
            interfaceAddressRange: "255.255.254.1",
            interfaceAddressMask: "255.255.254.123",
            bearerType: "Type1",
            bandwidth: "50gbps",
            ivManagement: "no",
          }
        ],
        trunkGroupOrder: true,
        voipClassOfService: true,
        enableDedicatedPortal: [''],
        fetchDeviceInterfaceFlag: false,
        sycnhronizeStatusFlag:false,
        rowSelection: "multiple",
        editInterfaceFlag:false,
        deleteDeviceFlag:false
      }
      this.handleClearForm = this.handleClearForm.bind(this);
      this.handleCheckBox = this.handleCheckBox.bind(this);
      this.handleInput = this.handleInput.bind(this);
      this.deleteDevice = this.deleteDevice.bind(this);
      this.toggleDelete = this.toggleDelete.bind(this);
      this.fetchDeviceInterface = this.fetchDeviceInterface.bind(this);
      this.backToLinkSiteOrderView=this.backToLinkSiteOrderView.bind(this);
      this.openEditInterfaceModal=this.openEditInterfaceModal.bind(this);
      this.onAddRow=this.onAddRow.bind(this);
      this.onRemoveRow=this.onRemoveRow.bind(this);
    }
  
    componentWillMount(){
      if(undefined!==this.props.location.aboutProps && undefined!==this.props.location.aboutProps.intermediate){
          this.setState({ intermediateEquipmentFlag: this.props.location.aboutProps.intermediate});
      }
    } 
    openEditInterfaceModal(){
      this.setState({ editInterfaceFlag: !this.state.editInterfaceFlag}); 
    }
    toggleDelete(){
      this.setState({ deleteDeviceFlag: !this.state.deleteDeviceFlag}); 
    }
    deleteDevice() {
        window.location = "#"+Constant.DELETE_CUSTOMER_URL;
    }
    fetchDeviceInterface() {
      this.setState({ fetchDeviceInterfaceFlag: !this.state.fetchDeviceInterfaceFlag });
      this.setState({ sycnhronizeStatusFlag:false});
    }
    handleInput(e) {
      let value = e.target.value;
      let name = e.target.name;
      this.setState(prevState => ({
          viewLanLinkDevice:
        {
          ...prevState.viewLanLinkDevice, [name]: value
        }
      }), () => console.log(this.state.viewLanLinkDevice))
    }
  
    handleCheckBox(e) {
      const value = e.target.checked; 
      const name = e.target.name;
      this.setState({
        [name]: value
      });
    }
    backToLinkSiteOrderView(){
      window.location = "#"+Constant.LANLINK_DIRECT_FIBER_VIEW_SITE_ORDER_URL;
    } 
  
    handleClearForm(e) {
      e.preventDefault();
      this.setState({
        editVpnSiteDevice: {
          legalCustomerName: '',
          ocn: '',
          name: '',
          age: '',
          gender: '',
          skills: [],
          about: ''
        },
      })
    }
    onRemoveGridReady = params => {
      this.RemoveGridApi = params.api;
      this.RemoveGridColumnApi = params.columnApi;
  
      const httpRequest = new XMLHttpRequest();
      const updateData = data => {
        //this.setState({ rowData: data });
      };
      httpRequest.open(
        "GET",
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          updateData(JSON.parse(httpRequest.responseText));
        }
      };
    };
  
    onAddGridReady = params => {
      this.addGridApi = params.api;
      this.addGridColumnApi = params.columnApi;
  
      const httpRequest = new XMLHttpRequest();
      const updateData = data => {
        //this.setState({ rowData: data });
      };
      httpRequest.open(
        "GET",
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      );
      httpRequest.send();
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          updateData(JSON.parse(httpRequest.responseText));
        }
      };
    };
   
    onAddRow() {
      debugger
      let selectedData = this.addGridApi.getSelectedRows();
      this.addGridApi.updateRowData({ remove: selectedData });
      this.RemoveGridApi.updateRowData({ add: selectedData });
    }
  
    onRemoveRow() {
      debugger
      let selectedData = this.RemoveGridApi.getSelectedRows();
      this.RemoveGridApi.updateRowData({ remove: selectedData });
      this.addGridApi.updateRowData({ add: selectedData });
    }
  
  // createNewRowData() {
  //   debugger
  //   //let rowCount = this.addGridApi.getDisplayedRowCount();
  //   let selectedData = this.addGridApi.getSelectedRows();
  //   // rowCount = rowCount+1
  //   // let newData = {
  //   //     interface: "In Service Interface"+rowCount,
  //   //     linkCircuitId: "UK_SE7_UNIT_C",
  //   //     interfaceAddressRange: "255.255.254.1",
  //   //     interfaceAddressMask: "255.255.254.123",
  //   //     bearerType: "Type1",
  //   //     bandwidth: "50gbps",
  //   //     ivManagement: "no",
  //   // };
  
  //   return selectedData;
  // }
  
    render() {
      const fetchDeviceInterfaceShow = {
        display: this.state.fetchDeviceInterfaceFlag ? "inline" : "none"
      };
      const showSycnhronizeStatus = {
        display: this.state.sycnhronizeStatusFlag? "inline" : "none"
      };
      const showIntermediateEquipmentDetails = {
        display: this.state.intermediateEquipmentFlag==='true'? "inline" : "none"
      };
      const hideIntermediateEquipmentDetails = {
        display: this.state.intermediateEquipmentFlag!=='true'? "inline" : "none"
      };
      
      return (
        <>
        <div style={fetchDeviceInterfaceShow}>
            <Row className="div-margin">
              <Col className="alert alert-success alert-Style" xs="12" sm="12" md="12">
                Fetch Interfaces started successfully. Please check the sync status of this device &nbsp;
                      <Link target="_blank" className="customLink heading-green-1" to={{ pathname: 'manageNetwork', aboutProps: { name: 'VIEW' } }} exact="true"><Translation>{(t) => <>{t('common.clickHere')} </>}</Translation></Link>
              </Col>
            </Row>
            <br></br>
          </div>
        <Container className="div-border div-margin">
          <div style={showSycnhronizeStatus}>
              <Row className="div-margin">             
                  <Col className="alert alert-success alert-Style" xs="12" sm="12" md="12">
                      Synchronize Process started successfully.
                  </Col>
              </Row>   
          </div>
          <Row className="heading-green" >
            <Col  xs="12" sm="12" md="8">
              <Translation>{(t) => <>{t('order.lanLink.viewCpeDevice')}</>}</Translation>
                <ModificationHistory/>
            </Col>
            <Col xs="12" sm="12" md="4" align="right" style={showIntermediateEquipmentDetails}>
              <FormGroup>
                    <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{ marginTop: "-1px"}} >
                    {/* <Dropdown.Item><Link className="customLink" to={{ pathname:  Constant.LANLINK_DIRECT_FIBER_EDIT_SITE_DEVICE_URL, aboutProps: { name: 'Add Site Order',backToServiceUrl:Constant.LANLINK_DIRECT_FIBER_VIEW_SITE_ORDER_URL,intermediate:true} }} exact="true"><Translation>{(t) => <>{t('common.edit')} </>}</Translation></Link></Dropdown.Item> */}
                    <Dropdown.Item href="#/editLanLinkDirectFiberSiteDevice?intermediate=true"><Translation>{(t) => <>{t('common.edit')} </>}</Translation></Dropdown.Item>
                      <Dropdown.Item onClick={this.toggleDelete}><Translation>{(t) => <>{t('common.delete')} </>}</Translation></Dropdown.Item>
                      <Dropdown.Item onClick={this.fetchDeviceInterface}><Translation>{(t) => <>{t('common.fetchDeviceInterfaces')} </>}</Translation></Dropdown.Item>
                    </DropdownButton>
               </FormGroup>
            </Col>
            <Col xs="12" sm="12" md="4" align="right" style={hideIntermediateEquipmentDetails}>
              <FormGroup>
                      <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{marginTop:"-1px"}}>
                      <Dropdown.Item href="#/editLanLinkDirectFiberSiteDevice"><Translation>{(t) => <>{t('common.edit')} </>}</Translation></Dropdown.Item>
                      <Dropdown.Item onClick={this.toggleDelete}><Translation>{(t) => <>{t('common.delete')} </>}</Translation></Dropdown.Item>
                      <Dropdown.Item onClick={this.fetchDeviceInterface}><Translation>{(t) => <>{t('common.fetchDeviceInterfaces')} </>}</Translation></Dropdown.Item>
                    </DropdownButton>
               </FormGroup>
            </Col>
          </Row>
          <Row className="div-margin">
            <Col xs="12" sm="12" md="3">
              <FormGroup>
                <div>
                  <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.trunkGroup.routerId')}</>}</Translation></label>
                </div>
                <div className="customLabelValue form-label">
                  {this.state.viewLanLinkDevice.routerId}
                </div>
              </FormGroup>
            </Col>
            <Col xs="12" sm="12" md="3">
              <FormGroup>
                <div>
                  <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.trunkGroup.name')}</>}</Translation></label>
                </div>
                <div className="customLabelValue form-label">
                  {this.state.viewLanLinkDevice.name}
                </div>
              </FormGroup>
            </Col>
            <Col xs="12" sm="12" md="3">
                  <FormGroup>
                    <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.trunkGroup.vendorModel')}</>}</Translation></label>
                    </div>
                    <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.vendorModel}
                    </div>
                  </FormGroup>
                </Col>
            <SynchonizeStatus/>     
          </Row>
          <Row style={{marginTop:"-11%"}}>
              <Col xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('manageNetwork.snmpro')}</>}</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.snmpro}
                  </div>
                </FormGroup>
              </Col>
                <Col xs="12" sm="12" md="3">
                  <FormGroup>
                    <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.trunkGroup.managementAddress')}</>}</Translation></label>
                    </div>
                    <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.managementAddress}
                    </div>
                  </FormGroup>
                </Col>
                <Col xs="12" sm="12" md="3">
                  <FormGroup>
                      <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.serialNumber')}</>}</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.serialNumber}
                      </div>
                  </FormGroup>
              </Col>
          </Row>
          <Row>
              <Col xs="12" sm="12" md="3">
                  <FormGroup>
                      <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.hexaSerialNumber')}</>}</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.hexaSerialNumber}
                      </div>
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.macAddress')}</>}</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.macAddress}
                  </div>
                </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="3">
                  <FormGroup>
                      <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.mePId')}</>}</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.mePId}
                      </div>
                  </FormGroup>
              </Col>
          </Row>
          <Row>
              <Col xs="12" sm="12" md="3">
                  <FormGroup>
                      <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.powerAlarm')}</>}</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.powerAlarm}
                      </div>
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="3">
                  <FormGroup>
                      <div>
                      <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.mediaSelection')}</>}</Translation></label>
                      </div>
                      <div className="customLabelValue form-label">
                      {this.state.viewLanLinkDevice.mediaSelection}
                      </div>
                  </FormGroup>
              </Col>
              <Col xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{(t) => <>{t('order.lanLink.linkLostForwarding')}</>}</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.linkLostForwarding}
                  </div>
                </FormGroup>
              </Col>
          </Row>
          <div style={showIntermediateEquipmentDetails}>
            <Row>      
              <Col  xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('order.addEthernetPeDevice.country')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.country} 
                  </div>
                </FormGroup>
              </Col>
              <Col  xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('common.city')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.city} 
                  </div>
                </FormGroup>
              </Col>			
              <Col  xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('common.site')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.site} 
                  </div>
                </FormGroup>
              </Col>            
              <Col xs="12" sm="12" md="3">
                <FormGroup>
                  <div>
                    <label className="form-label" style={labelStyle} ><Translation>{ (t) => <>{t('common.premise')}</> }</Translation></label>
                  </div>
                  <div className="customLabelValue form-label">
                    {this.state.viewLanLinkDevice.premise} 
                  </div>
                </FormGroup>
              </Col>
            </Row>
          </div>
          <Row className="heading-green">
            <Col  xs="12" sm="12" md="8">
              <Translation>{(t) => <>{t('order.device.interfaceInService')}</>}</Translation>
            </Col>
            <Col xs="12" sm="12" md="4" align="right"> 
                <FormGroup>
                  <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{marginTop: "-1px"}}>
                    <Dropdown.Item onClick={this.onRemoveRow}><Translation>{(t) => <>{t('common.remove')} </>}</Translation></Dropdown.Item>
                  </DropdownButton>
              </FormGroup>
              </Col>
          </Row>
          <Row  style={{paddingRight:"17px",paddingTop:"3%"}}>
                <Col xs="12" sm="12" md="12"> 
                  <FormGroup>
                    <AgGrid 
                      enableSorting={true} 
                      pagination={true} 
                      paginationPageSize="5" 
                      style={{ width: '1066px' }}
                      columnDefs={this.state.deviceListGridHeader} 
                      rowData={this.state.deviceListGridData} 
                      rowSelection={this.state.rowSelection} 
                      onGridReady={this.onRemoveGridReady}
                      domLayout='autoHeight' 
                    />
                </FormGroup>
              </Col>
          </Row>
          <Row className="heading-green">
            <Col  xs="12" sm="12" md="8">
              <Translation>{(t) => <>{t('order.device.interfaceToSelect')}</>}</Translation>
            </Col>
            <Col xs="12" sm="12" md="4" align="right"> 
                <FormGroup>
                  <DropdownButton id="dropdown-basic-button" title="Action" variant="info" style={{marginTop: "-1px"}}>
                    <Dropdown.Item onClick={this.onAddRow}><Translation>{(t) => <>{t('common.add')} </>}</Translation></Dropdown.Item>
                  </DropdownButton>
              </FormGroup>
              </Col>
          </Row>
          <Row  style={{paddingRight:"17px",paddingTop:"3%"}}>
                <Col xs="12" sm="12" md="12"> 
                  <FormGroup>
                    <AgGrid 
                      enableSorting={true} 
                      pagination={true} 
                      paginationPageSize="5" 
                      style={{ width: '1066px' }}
                      columnDefs={this.state.deviceListGridHeader} 
                      rowData={this.state.addDeviceListGridData} 
                      rowSelection={this.state.rowSelection} 
                      onGridReady={this.onAddGridReady}
                      domLayout='autoHeight' 
                    />
                </FormGroup>
              </Col>
          </Row>
          <Row>
            <Col>
                <FormGroup>
                <Button click={this.backToLinkSiteOrderView} type={"secondary"} align={'right'} submit={true} title="common.back" />
                </FormGroup>
            </Col>
          </Row>
          <Modal size="sm"
            aria-labelledby="contained-modal-title-vcenter"
            centered show={this.state.deleteDeviceFlag} onHide={this.toggleDelete}>
            <Modal.Header closeButton>
                <Modal.Title> <Translation>{(t) => <>{t('common.deleteFirewall')}</>}</Translation></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                Are you sure that you want to delete this item?
            </Modal.Body>
            <Modal.Footer>
            <Button className="btn-danger" click={this.deleteDevice} type={"secondary"}  submit={false} title="common.delete" />
            </Modal.Footer>
          </Modal>
          <Modal animation="true" scrollable="true" size="lg"
            aria-labelledby="contained-modal-title-vcenter" centered
            show={this.state.editInterfaceFlag} 
            onHide={this.openEditInterfaceModal}>
            <Modal.Header closeButton>
              <Modal.Title><Translation>{(t) => <>{t('order.lanLink.editInterface')} </>}</Translation></Modal.Title>
            </Modal.Header>
            <Modal.Body> 
              <EditLanLinkInterface/>           
            </Modal.Body>
            <Modal.Footer>   
            </Modal.Footer>
          </Modal>
          </Container>
        </>
      );
    }
  }
  const labelStyle = {
    color: "gray",
    display: "inline-block",
    maxWidth: "100%",
    marginBottom: "5px",
    fontWeight: "500"
  };
  export default SelectLanLinkDirectFiberInterface
  