cluedin-widget/widget/integrationReports/index.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react'
import registry from '../../core/registry'
import OverlayPanel from '../../core/components/generics/overlayPanel.jsx'

import AllProviderList from '../../core/components/providerRelated/allProviderList.jsx'
import CurrentProviderList from '../../core/components/providerRelated/currentProviderList.jsx'
import Loading from '../../core/components/generics/loading.jsx'
import Alert from '../../core/components/generics/alert.jsx'
import iso from '../../iso'
import config from '../../core/config';
import {
    IntegrationStatus,
    IntegrationReportsWrapper
} from '../../core/components/providerRelated/integrationStatus.jsx'

import { connect } from 'react-redux'
import { fetchActiveProvidersIfNeeded, fetchAllProvidersIfNeeded, reAuthProvider } from '../../core/action/provider'
import { goToLocation } from '../../core/action/core'
import { FormattedMessage } from 'react-intl'

const OPENINTEGRATIONPANEL = "OpenIntegrationPanel";

class IntegrationReports extends Component {

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

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

    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 providers = allProviders.filter( iso.provider.filterByMostWellKnownProvider );

        return (<IntegrationReportsWrapper>
            <Alert type="info">You have currently no integration added.</Alert>

            <h3>Here are some examples:</h3>

            <AllProviderList onProviderClick={this.goToAddProviderWithId.bind(this)}
                             providers={providers}></AllProviderList>

            <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>)
    }

    getIntegrationStatusPerItem() {
        const { crawlerStats, allProviders } = this.props;
        let result = [];

        for( var crawlerKey in crawlerStats ) {
            let crawlerStat     = crawlerStats[ crawlerKey ];
            let relatedProvider = allProviders.find( ( p ) => {
                return p.Id === crawlerStat.typeId;
            } );

            result.push( <IntegrationStatus provider={relatedProvider}
                                            crawlerStats={crawlerStat}></IntegrationStatus> );
        }

        return result;
    }

    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}>View All Connected Integrations</a>
                </td>
            </tr>
            </tbody>
        </table>);
    }

    getIntegrationStatus() {
        return (
            <IntegrationReportsWrapper>
                <div className="cluedIn_integrationReports_list">
                    <h3>Connected Integrations</h3>
                    {this.getCurrentStatus()}
                    <h3><FormattedMessage id="IntegrationReport.Status"></FormattedMessage></h3>
                    {this.getIntegrationStatusPerItem()}
                </div>
            </IntegrationReportsWrapper>
        );
    }

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

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

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

        return (<div>
            <h3>Integrations requiring attention</h3>
            <CurrentProviderList providers={unAuthProviders}
                                 onAuthHandler={this.reAuth.bind(this)}></CurrentProviderList>
        </div>);
    }

    openPanel() {
        this.setState( { isOpen: true } );
    }

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

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

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

    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.getIntegrationStatus();
            }

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

        return (<OverlayPanel show={isOpen}
                              onClose={this.closePanel.bind(this)}>{content}{unauthorizedProviderContent}</OverlayPanel>);
    }
}

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

registry.register( 'IntegrationReports', connect( select )( IntegrationReports ) );