cluedin-widget/core/components/providerRelated/integrationStatus.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 providerHelper from '../../helpers/provider.js';
import MiniLoading from '../generics/MiniLoading.jsx';
import { FormattedMessage } from 'react-intl';

export class IntegrationReportsWrapper extends Component {
  render() {
    const {onClose} = this.props;
    return (<div className="cluedIn_integrationReports_wrapper">
      <div className="cluedIn_integrationReports">
        <div className="cluedIn_integrationReports_title">
          <a onClick={onClose} className="cluedIn_integrationReports_wrapper_close">
            <i className="fa fa-times"></i>
          </a>
          <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, state, name} = this.props;
    let displayName = name;
    let logo;
    let icon;

    if (state === 'Finished' || state === 'Idle') {
      icon = <i className="fa fa-check-circle"></i>;
    } else {
      icon = <MiniLoading></MiniLoading>;
    }

    if (provider) {
      logo = <img className="cluedIn_integrationReports_list_logo" src={provider.icon}/>;
      displayName = provider.name;
    }

    return (
      <div className="cluedIn_integrationReports_list_row">
        <div className="cluedIn_integrationReports_list_title">
          {logo}
          <span className="cluedIn_integrationReports_list_name">{displayName}</span>
          <span className="cluedIn_integrationReports_list_indicator">
            {icon}
          </span>
        </div>
        {this.props.children}
      </div>
    );
  }
}

class IntegrationStatusTable extends Component {
  render() {
    return (<table>
      <tbody>
      <tr>
        <td className="cluedIn_label">
          <FormattedMessage id="IntegrationStatus.Status"></FormattedMessage>
        </td>
        <td className="cluedIn_value">
          {this.props.children}
        </td>
      </tr>
      </tbody>
    </table>);
  }
}

class IntegrationStatusFinishedStats extends Component {
  render() {
    return (
      <IntegrationStatusTable>
        <FormattedMessage id="IntegrationStatus.Finished"/>
      </IntegrationStatusTable>
    );
  }
}

class IntegrationStatusQueued extends Component {
  render() {
    return (
      <IntegrationStatusTable>
        <FormattedMessage id="IntegrationStatus.Queued"/>
      </IntegrationStatusTable>);
  }
}

class IntegrationStatusIdle extends Component {
  render() {
    return (
      <IntegrationStatusTable>
        <FormattedMessage id="IntegrationStatus.Idle"/>
      </IntegrationStatusTable>
    );
  }
}

class IntegrationStatusProcessing extends Component {
  render() {
    return (
      <IntegrationStatusTable>
        <FormattedMessage id="IntegrationStatus.Processing"/>
      </IntegrationStatusTable>
    );
  }
}

class IntegrationStatusCrawling extends Component {
  render() {
    return (
      <IntegrationStatusTable>
        <FormattedMessage id="IntegrationStatus.Crawling"/>
      </IntegrationStatusTable>
    );
  }
}

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

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

    switch (crawlerStats.ProviderStatus.State) {
      case 'Idle':
        return (
          <IntegrationStatusWrapper state="Idle" name={provider.Name} provider={providerConfig}>
            <IntegrationStatusIdle></IntegrationStatusIdle>
          </IntegrationStatusWrapper>
        );
        break;
      case 'Queued':
        return (
          <IntegrationStatusWrapper state="Queued" name={provider.Name} provider={providerConfig}>
            <IntegrationStatusQueued></IntegrationStatusQueued>
          </IntegrationStatusWrapper>
        );
        break;
      case 'Crawling':
        return (
          <IntegrationStatusWrapper state="Crawling" name={provider.Name} provider={providerConfig}>
            <IntegrationStatusCrawling></IntegrationStatusCrawling>
          </IntegrationStatusWrapper>
        );
        break;
      case 'Processing':
        return (
          <IntegrationStatusWrapper state="Processing" name={provider.Name} provider={providerConfig}>
            <IntegrationStatusProcessing></IntegrationStatusProcessing>
          </IntegrationStatusWrapper>
        );
        break;
      case 'Finished':
        return (
          <IntegrationStatusWrapper state="Finished" name={provider.Name} provider={providerConfig}>
            <IntegrationStatusFinishedStats></IntegrationStatusFinishedStats>
          </IntegrationStatusWrapper>
        );
        break;
      default:
        return (<div>Invalid State, contact CluedIn</div>);
    }
  }
}