<commit_before>/*
This file is part of the Juju GUI, which lets users view and manage Juju
environments within a graphical interface (https://launchpad.net/juju-gui).
Copyright (C) 2016 Canonical Ltd.

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License version 3, as published by
the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
General Public License for more details.

You should have received a copy of the GNU Affero General Public License along
with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

'use strict';

const InspectorRelateTo = React.createClass({

  propTypes: {
    application: React.PropTypes.object.isRequired,
    changeState: React.PropTypes.func.isRequired,
    relatableApplications: React.PropTypes.array.isRequired
  },

  /**
    The callable to be passed to the relate to items for navigating to the
    relation type list.

    @method _relateToItemAction
    @param {Object} e The click event.
  */
  _relateToItemAction: function(e) {
    this.props.changeState({
      gui: {
        inspector: {
          // Application from Id
          id: this.props.application.get('id'),
          // Application to Id
          'relate-to': e.currentTarget.getAttribute('data-id'),
          activeComponent: 'relate-to'
        }
      }
    });
  },

  /**
    Generate the list items from a set of services

    @method generateItemList
    @returns {Function} A React component for the endpoints available.
  */
  generateItemList: function() {
    var applications = this.props.relatableApplications;
    if (applications.length === 0) {
      return (
        <div className="unit-list__message">
          No relatable endpoints available.
        </div>);
    }
    return applications.map((application, index) => {
      var data = application.getAttrs();
      return (
        <li className="inspector-view__list-item"
          data-id={data.id}
          key={data.id + index}
          onClick={this._relateToItemAction} tabIndex="0" role="button">
          <img src={data.icon} className="inspector-view__item-icon" />
          {data.name}
        </li>);
    });
  },

  render: function() {
    return (
      <div className="inspector-relate-to">
        <ul className="inspector-view__list">
          {this.generateItemList()}
        </ul>
      </div>
    );
  }
});<commit_msg>Update InspectorRelateTo to use es6 class.<commit_after>/*
This file is part of the Juju GUI, which lets users view and manage Juju
environments within a graphical interface (https://launchpad.net/juju-gui).
Copyright (C) 2016 Canonical Ltd.

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License version 3, as published by
the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
General Public License for more details.

You should have received a copy of the GNU Affero General Public License along
with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

'use strict';

class InspectorRelateTo extends React.Component {
  /**
    The callable to be passed to the relate to items for navigating to the
    relation type list.

    @method _relateToItemAction
    @param {Object} e The click event.
  */
  _relateToItemAction(e) {
    this.props.changeState({
      gui: {
        inspector: {
          // Application from Id
          id: this.props.application.get('id'),
          // Application to Id
          'relate-to': e.currentTarget.getAttribute('data-id'),
          activeComponent: 'relate-to'
        }
      }
    });
  }

  /**
    Generate the list items from a set of services

    @method generateItemList
    @returns {Function} A React component for the endpoints available.
  */
  generateItemList() {
    var applications = this.props.relatableApplications;
    if (applications.length === 0) {
      return (
        <div className="unit-list__message">
          No relatable endpoints available.
        </div>);
    }
    return applications.map((application, index) => {
      var data = application.getAttrs();
      return (
        <li className="inspector-view__list-item"
          data-id={data.id}
          key={data.id + index}
          onClick={this._relateToItemAction.bind(this)}
          tabIndex="0"
          role="button">
          <img src={data.icon} className="inspector-view__item-icon" />
          {data.name}
        </li>);
    });
  }

  render() {
    return (
      <div className="inspector-relate-to">
        <ul className="inspector-view__list">
          {this.generateItemList()}
        </ul>
      </div>
    );
  }
};

InspectorRelateTo.propTypes = {
  application: React.PropTypes.object.isRequired,
  changeState: React.PropTypes.func.isRequired,
  relatableApplications: React.PropTypes.array.isRequired
};
{'fraction_non_alphanumeric': 0.09998109998109998, 'fraction_numerical': 0.002835002835002835, 'mean_word_length': 2.777301927194861, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 25, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4442638', 'n_tokens_mistral': 1519, 'n_tokens_neox': 1461, 'n_words': 483}