observe-front-ui/app/scripts/components/plugins.js

import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';

import Tooltip from './tooltip';


const Plugin = ({
  id, label, description, status
}) => {
  const error = status !== 'ok';
  const className = classNames({ error });
  const tip = (
    <span>
Description:
      {description}
      <br />
Status:
      {' '}
      {status}
    </span>
  );

  // Inner span to hold styling so we don't effect the "before:content"
  return (
    <span className="plugins-plugin" key={id}>
      <Tooltip tip={tip}>
        <span className={className}>
          {error && <i className="plugins-plugin-icon fa fa-exclamation-circle" />}
          {label || id}
        </span>
      </Tooltip>
    </span>
  );
};

class Plugins extends React.Component {
  render() {
    const hasPlugins = this.props.plugins && this.props.plugins.size > 0;
    return (
      <div className="plugins">
        <span className="plugins-label">
          Plugins:
        </span>
        {hasPlugins && this.props.plugins.toIndexedSeq().map(plugin => Plugin(plugin.toJS()))}
        {!hasPlugins && <span className="plugins-empty">n/a</span>}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    plugins: state.get('plugins')
  };
}

export default connect(mapStateToProps)(Plugins);