canape/frontend/js/components/modules/modules.js

import React, { useState } from "react";
import Loader from "../loader/loader";
import PropTypes from "prop-types";

import { upperCaseFirst } from "../../utils";

// TODO: udpate this
import { OverlayTrigger, Tooltip } from "react-bootstrap";

const Modules = ({ isLoading, modules, fetchModules }) => {
  const [show, setShow] = useState(false);
  if (isLoading) {
    return <Loader />;
  }

  const handleClick = () => {
    fetchModules();
    setShow(true);
  };

  if (!show) {
    return (
      <div className="row">
        <div className="col-12 col-md-8 offset-md-2 mb-3">
          <div className="btn btn-secondary w-100" onClick={handleClick}>
            Show modules status
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="row">
      {Object.keys(modules).map((type) => (
        <ModulesByVideoType key={type} type={type} modules={modules[type]} />
      ))}
    </div>
  );
};
Modules.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  modules: PropTypes.object.isRequired,
  fetchModules: PropTypes.func.isRequired,
};
export default Modules;

const ModulesByVideoType = ({ type, modules }) => (
  <div className="col-12 col-md-6">
    <div className="card mb-3">
      <div className="card-header">
        <h3>{`${upperCaseFirst(type)} modules`}</h3>
      </div>
      <div className="card-body">
        {Object.keys(modules).map((moduleType, i) => (
          <ModuleByType
            key={i}
            type={moduleType}
            modules={modules[moduleType]}
          />
        ))}
      </div>
    </div>
  </div>
);
ModulesByVideoType.propTypes = {
  type: PropTypes.string.isRequired,
  modules: PropTypes.object.isRequired,
};

const ModuleByType = ({ type, modules }) => (
  <div>
    <h4>{upperCaseFirst(type)}</h4>
    <table className="table">
      <tbody>
        {modules.map((module, type) => {
          return <Module key={type} type={type} module={module} />;
        })}
      </tbody>
    </table>
  </div>
);
ModuleByType.propTypes = {
  type: PropTypes.string.isRequired,
  modules: PropTypes.array.isRequired,
};

const Module = ({ module }) => {
  let iconClass, prettyStatus, badgeClass;

  switch (module.status) {
    case "ok":
      iconClass = "fa fa-check-circle";
      badgeClass = "badge badge-pill badge-success";
      prettyStatus = "OK";
      break;
    case "fail":
      iconClass = "fa fa-times-circle";
      badgeClass = "badge badge-pill badge-danger";
      prettyStatus = "Fail";
      break;
    case "not_implemented":
      iconClass = "fa fa-question-circle";
      badgeClass = "badge badge-pill badge-default";
      prettyStatus = "Not implemented";
      break;
    default:
      iconClass = "fa fa-question-circle";
      badgeClass = "badge badge-pill badge-warning";
      prettyStatus = "Unknown";
  }

  const tooltip = (
    <Tooltip id={`tooltip-status-${module.name}}`}>
      <p>
        <span className={badgeClass}>Status: {prettyStatus}</span>
      </p>
      {module.error !== "" && <p>Error: {module.error}</p>}
    </Tooltip>
  );

  return (
    <tr>
      <th>{module.name}</th>
      <td>
        <OverlayTrigger placement="right" overlay={tooltip}>
          <span className={badgeClass}>
            <i className={iconClass}></i> {prettyStatus}
          </span>
        </OverlayTrigger>
      </td>
    </tr>
  );
};
Module.propTypes = {
  module: PropTypes.object.isRequired,
};