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="IntegrationReports.ConnectedIntegrationTitle"></FormattedMessage></h3>
                    {this.getCurrentStatus()}
                    <h3><FormattedMessage id="IntegrationReport.Status"></FormattedMessage></h3>
                    {content}
                </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 );