cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
153 lines (141 loc) • 6.12 kB
JSX
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>);
}
}
}