cluedin-widget/core/components/integrationReports/index.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import AllProviderList from '../providerRelated/allProviderList.jsx';
import CurrentProviderList from '../providerRelated/currentProviderList.jsx';
import Loading from '../generics/loading.jsx';
import Alert from '../generics/alert.jsx';
import iso from '../../../iso';
import config from '../../config';
import { IntegrationStatus, IntegrationReportsWrapper } from '../providerRelated/integrationStatus.jsx';
import { connect } from 'react-redux';
import {
  fetchActiveProvidersIfNeeded,
  fetchAllProvidersIfNeeded,
  reAuthProvider,
  fetchActiveProvidersForUpdate
} from '../../action/provider';
import { goToLocation } from '../../action/core';
import { FormattedMessage } from 'react-intl';
import Drawer from 'material-ui/Drawer';
const OPENINTEGRATIONPANEL = "OpenIntegrationPanel";

const rightNavStyle = {
  top: '48px'
};

class IntegrationReports extends Component {

  constructor(props) {
    super(props);
    this.state = { isOpen: false };
  }

  componentWillMount() {
    this.props.dispatch(fetchActiveProvidersIfNeeded());
    this.props.dispatch(fetchAllProvidersIfNeeded());
    this.startPoll();
  }

  goToAddProvider() {
    this.props.dispatch(goToLocation('addProvider'));
  }

  goToAddProviderWithId(name, id) {
    this.props.dispatch(goToLocation('addProviderById', [name, id]));
  }

  reAuth(provider) {
    this.props.dispatch(reAuthProvider(provider));
  }

  noProviderContent() {
    const { allProviders } = this.props;
    let allProviderContent;
    let providers;

    if (allProviders && allProviders.length > 0) {
      providers = allProviders.filter(iso.provider.filterByMostWellKnownProvider);
      allProviderContent = (<div>
        <h3><FormattedMessage id="IntegrationReports.Title"></FormattedMessage></h3>
        <AllProviderList onProviderClick={this.goToAddProviderWithId.bind(this)}
                         providers={providers}></AllProviderList>
      </div>);
    }

    return (<IntegrationReportsWrapper onClose={this.closePanel.bind(this)}>
      <div style={{  marginBottom: '20px' }}>
        <Alert type="info"><FormattedMessage id="IntegrationReports.NoIntegration"></FormattedMessage></Alert>
      </div>

      {allProviderContent}
      <div className="cluedIn_m-t cluedIn_textCenter">
        <a onClick={this.goToAddProvider.bind(this)} className="cluedIn_btn-primary cluedIn_btn">
          <span className="cluedIn_addon"><i className="fa fa-plug"></i></span>
                    <span>
                        <FormattedMessage id="IntegrationReport.ViewAllIntegrations"></FormattedMessage>
                    </span>
        </a>
      </div>
    </IntegrationReportsWrapper>)
  }

  getCurrentStatus() {
    const { providers } = this.props;
    let url = config.location.goToConnectedProvider();

    return (<table>
      <tbody>
      <tr>
        <td className="cluedIn_label">Total</td>
        <td className="cluedIn_value">{providers.length}</td>
      </tr>
      <tr>
        <td className="cluedIn_viewAll" colSpan="2">
          <a href={url}><FormattedMessage
            id="IntegrationReports.ViewAllConnectedIntegration"></FormattedMessage></a>
        </td>
      </tr>
      </tbody>
    </table>);
  }

  getIntegrationStatusFromInitialCall() {
    const { allProviderStats, allProviders } = this.props;
    let content;
    if (!allProviderStats || allProviderStats.length === 0) {
      content = <p><FormattedMessage id="IntegrationReports.NoIntegrationMessage"></FormattedMessage></p>;
    } else {
      content = allProviderStats.map((stat, index)=> {
        let relatedProvider = allProviders.find((p) => {
          return p.Id === stat.ProviderId;
        });

        return (<IntegrationStatus key={index} provider={relatedProvider}
                                   crawlerStats={stat}></IntegrationStatus>);
      });
    }

    return (
      <IntegrationReportsWrapper onClose={this.closePanel.bind(this)}>
        <div className="cluedIn_integrationReports_list">
          <h3><FormattedMessage id="IntegrationReport.Status"></FormattedMessage></h3>
          {content}
          <h3><FormattedMessage id="IntegrationReports.ConnectedIntegrationTitle"></FormattedMessage></h3>
          {this.getCurrentStatus()}
        </div>
      </IntegrationReportsWrapper>
    );
  }

  getUnauthorizedProvider() {
    const { providers } = this.props;

    let unAuthProviders = providers.filter(iso.provider.filterByAuthProblem);

    if (unAuthProviders.length === 0) {
      return (<div></div>);
    }

    return (<div className="cluedIn_integrationReports_list">
      <h3><FormattedMessage id="IntegrationReports.RequiringAttentionTitle"></FormattedMessage></h3>
      <CurrentProviderList providers={unAuthProviders}
                           onAuthHandler={this.reAuth.bind(this)}></CurrentProviderList>
    </div>);
  }

  openPanel() {
    this.setState({ isOpen: !this.state.isOpen });
  }

  componentDidMount() {
    this.handlerForOpenPanel = this.openPanel.bind(this);
    window.addEventListener(OPENINTEGRATIONPANEL, this.handlerForOpenPanel);
  }

  componentWillUnmount() {
    window.removeEventListener(OPENINTEGRATIONPANEL, this.handlerForOpenPanel);
  }

  closePanel() {
    this.setState({ isOpen: false });
  }

  componentWillUnmount() {
    clearInterval(this.timeout);
  }

  startPoll() {
    this.timeout = setInterval(() => {
      this.props.dispatch(fetchActiveProvidersForUpdate());
    }, 15000);
  }

  render() {
    const { providers, isFetching, isFetchingAll, currentUser } = this.props;
    const { isOpen } = this.state;

    let content;
    let unauthorizedProviderContent;

    if (isFetching || isFetchingAll || !providers) {
      content = (<Loading></Loading>);
    } else {

      if (providers.length === 0) {
        content = this.noProviderContent();
      } else {
        content = this.getIntegrationStatusFromInitialCall();
      }

      if (currentUser && currentUser.client.IsAdmin) {
        unauthorizedProviderContent = this.getUnauthorizedProvider();
      }
    }

    return (
      <Drawer containerStyle={rightNavStyle} width={300} openSecondary={true} open={isOpen}>
        <div className="cluedIn_integrationReports"
             style={{ padding: '10px'}}>{content}{unauthorizedProviderContent}</div>
      </Drawer>
    );

  }
}

function select(state) {
  return {
    providers: state.provider.providers,
    isFetching: state.provider.isFetching,
    allProviders: state.provider.allProviders,
    isFetchingAll: state.provider.isFetchingAll,
    currentUser: state.user.currentUser,
    allProviderStats: state.provider.allProviderStats,
  };
}

export default connect(select)(IntegrationReports);