Source: components/userComponents/monitoredArea/Annotation/MonitoredAreaAnnotation.js

import React from 'react';
import ZonesConfiguration from './zones/ZonesConfiguration';
import 'react-table/react-table.css';
import {
    fetchMonitoredArea,
} from '../../../restmodules/MonitoredAreaRestModule';
import {Redirect} from 'react-router-dom';
import { withNamespaces } from 'react-i18next';

/**
 * Section for annotating monitored areas
 * @extends Component
 * @hideconstructor
 */
class MonitoredAreaAnnotation extends React.Component {

  /**
   * @constructs
   * @param props
   */
    constructor(props, context) {
        super(props, context);
        this.handleSelect = this.handleSelect.bind(this);
        this.state = {
            key: 1,
            monitoredArea: null,
            toConfig: false
        };
    }

  /**
   *
   * @param key
   */
    handleSelect(key) {
        this.setState({key});
    }

  /**
   *
   */
    componentDidMount() {
        fetchMonitoredArea(this.props.match.params.id)
            .then(data => this.setState({monitoredArea: data}))
            .catch(error => this.setState({monitoredArea: [{name: error.toString()}]}));
    }

  /**
   *
   */
    closeScreen = () => {
        this.setState({
            toConfig: true
        })
    };

  /**
   *
   * @returns {*}
   */
    render() {
      const { t } = this.props;
        if (this.state.toConfig === true) {
            return <Redirect to={'/config'}/>
        }
        return (
            <section className="content-header">

              <h1>
                {t('annotate.annotationOfMonitoredArea')}
                <small> {t('annotate.editCreateSetupZonesForMonitoredArea')}</small>
              </h1>

              <ol className="breadcrumb">
                <li><a href="/config"><i className="fa fa-gear"></i>{t('sidebar.adminConfiguration')}</a></li>
                <li><a href={"/config/annotation/" + this.props.match.params.id}>{t('annotate.annotationOfMonitoredArea')}</a></li>
              </ol>

              <br/>

              <div className="row">

                <div className="col-lg-12">
                    <div className=" box">
                        <div className="box-header with-border">
                            <h3 className="box-title">{t('annotate.annotating')} {this.state.monitoredArea ? this.state.monitoredArea.name : "..."}</h3>
                        </div>
                        <div className="box-body">
                            <ZonesConfiguration monitoredAreaID={this.props.match.params.id}/>
                        </div>

                        <div className="box-footer no-border">
                            <button className="btn btn-outline-primary pull-right"
                                    onClick={this.closeScreen}
                            >{t('forms.cancel')}
                            </button>

                        </div>
                    </div>
                </div>
              </div>
            </section>
        );
    }
}

export default withNamespaces()(MonitoredAreaAnnotation);