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';
import ClearIcon from 'material-ui/svg-icons/content/clear';

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">
            <ClearIcon style={{fill: '#fff', width: '14px', height: '14px',}} />
          </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,
      accountname,
    } = this.props;

    let displayName = name;
    let logo;
    let icon;
    let accountNameContent;

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

    if (accountname) {
      accountNameContent = (
        <table>
          <tbody>
          <tr>
            <td className="cluedIn_label">Account</td>
            <td className="cluedIn_value">{accountname}</td>
          </tr>
          </tbody>
        </table>
      );
    }

    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>
        {accountNameContent}
        {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);
    const accountDisplayName = crawlerStats.original ? crawlerStats.original.AccountDisplay : '';

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