cluedin-widget/core/components/providerRelated/integrationStatus.jsx

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

import React, { Component } from 'react'
import providerHelper from '../../helpers/provider.js'
import MiniLoading from '../generics/MiniLoading.jsx'
import { FormattedMessage } from 'react-intl'

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

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

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