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 MiniLoading from '../../core/components/generics/MiniLoading.jsx'
import CluedInButton from '../../core/components/generics/cluedinbutton.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 providerHelper from '../../core/helpers/provider.js'
import config from '../../core/config';

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

const OPENINTEGRATIONPANEL = "OpenIntegrationPanel";

class IntegrationReportsWrapper extends Component {
    render() {
        return (<div className="cluedIn_integrationReports_wrapper">
            <div className="cluedIn_integrationReports">
                <h2 className="cluedIn_integrationReports_title">
                    <FormattedMessage id="IntegrationReport.Title"></FormattedMessage>
                </h2>

                <div className="cluedIn_integrationReports_content">
                    {this.props.children}
                </div>
            </div>
        </div>);
    }
}
class IntegrationStatusWrapper extends Component {
    render() {
        const { provider, isCrawling } = this.props;

        let icon;

        if ( isCrawling ) {
            icon = <MiniLoading></MiniLoading>;
        } else {
            icon = <i className="fa fa-check-circle"></i>;
        }
        return (<div className="cluedIn_integrationReports_list_row">
            <div className="cluedIn_integrationReports_list_title">
                <img className="cluedIn_integrationReports_list_logo" src={provider.icon}/>
                <span className="cluedIn_integrationReports_list_name">{provider.name}</span>
                            <span className="cluedIn_integrationReports_list_indicator">
                                {icon}
                            </span>
            </div>
            {this.props.children}
        </div>);
    }
}

class IntegrationStatusTableStats extends Component {
    render() {
        let { stats } = this.props;
        let currentStatContent;

        if ( stats.current ) {
            currentStatContent = (<tr>
                <td className="cluedIn_label">
                    <FormattedMessage id="IntegrationStatus.TimeTaken"></FormattedMessage>
                </td>
                <td className="cluedIn_value">
                    {stats.current.TasksCompletedPerMinute}
                    <span className="cluedIn_m-l-xs"><FormattedMessage
                        id="IntegrationStatus.minutes"></FormattedMessage></span>
                </td>
            </tr>);
        }

        return (<table>
            <tbody>
            <tr>
                <td className="cluedIn_label">
                    <FormattedMessage id="IntegrationStatus.Crawling"></FormattedMessage>
                </td>
                <td className="cluedIn_value">
                    <FormattedMessage id="IntegrationStatus.Finished"></FormattedMessage>
                </td>
            </tr>
            <tr>
                <td className="cluedIn_label">
                    <FormattedMessage id="IntegrationStatus.FoundItems"></FormattedMessage>
                </td>
                <td className="cluedIn_value">{stats.Summary.FoundItems}</td>
            </tr>
            {currentStatContent}
            </tbody>
        </table>);
    }
}

class IntegrationStatus extends Component {
    render() {
        const { crawlerStats, provider } = this.props;

        var providerConfig = providerHelper.getProviderConfig( provider.Name );
        let stats;

        switch( crawlerStats.crawlerInfo.State ) {
            case 0: //idles
                stats = { current: crawlerStats.crawlerInfo[ 'Idle' ], Summary: crawlerStats.crawlerInfo.Summary };
                return (
                    <IntegrationStatusWrapper provider={providerConfig}>
                        <IntegrationStatusTableStats stats={stats}></IntegrationStatusTableStats>
                    </IntegrationStatusWrapper>
                );
                break;
            case 1: //queued
                stats = { current: crawlerStats.crawlerInfo[ 'Queued' ], Summary: crawlerStats.crawlerInfo.Summary };
                return (
                    <IntegrationStatusWrapper provider={providerConfig}>
                        <IntegrationStatusTableStats stats={stats}></IntegrationStatusTableStats>
                    </IntegrationStatusWrapper>
                );
                break;
            case 2: //crawling
                let isCrawling = true;

                return (
                    <IntegrationStatusWrapper isCrawling={isCrawling} provider={providerConfig}>
                        <table>
                            <tbody>
                            <tr>
                                <td className="cluedIn_label">
                                    <FormattedMessage id="IntegrationStatus.Crawling"></FormattedMessage>
                                </td>
                                <td className="cluedIn_value">
                                    <FormattedMessage id="IntegrationStatus.InProgress"></FormattedMessage>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </IntegrationStatusWrapper>
                );
                break;
            case 3: //processing
                stats = {
                    current: crawlerStats.crawlerInfo[ 'Processing' ],
                    Summary: crawlerStats.crawlerInfo.Summary
                };
                return (
                    <IntegrationStatusWrapper provider={providerConfig}>
                        <IntegrationStatusTableStats stats={stats}></IntegrationStatusTableStats>
                    </IntegrationStatusWrapper>
                );
                break;
            case 4: //Finished
                stats = { current: crawlerStats[ 'Finished' ], Summary: crawlerStats.Summary };

                return (
                    <IntegrationStatusWrapper provider={providerConfig}>
                        <IntegrationStatusTableStats stats={stats}></IntegrationStatusTableStats>
                    </IntegrationStatusWrapper>
                );
                break;
            default:
                return (<div>Invalid State, contact CluedIn</div>);
        }
    }
}

class IntegrationReports extends Component {

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

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