126 lines
3.1 KiB
JavaScript
126 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import Loader from "../loader/loader";
|
|
import PropTypes from "prop-types";
|
|
import { Map, List } from "immutable";
|
|
|
|
// TODO: udpate this
|
|
import { OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
|
|
const Modules = props => {
|
|
if (props.isLoading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
return (
|
|
<div className="row">
|
|
{props.modules &&
|
|
props.modules
|
|
.keySeq()
|
|
.map((value, key) => (
|
|
<ModulesByVideoType
|
|
key={key}
|
|
videoType={value}
|
|
data={props.modules.get(value)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
Modules.propTypes = {
|
|
isLoading: PropTypes.bool.isRequired,
|
|
modules: PropTypes.instanceOf(Map)
|
|
};
|
|
export default Modules;
|
|
|
|
const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
|
|
|
|
const ModulesByVideoType = props => (
|
|
<div className="col-12 col-md-6">
|
|
<div className="card mb-3">
|
|
<div className="card-header">
|
|
<h3>{`${capitalize(props.videoType)} modules`}</h3>
|
|
</div>
|
|
<div className="card-body">
|
|
{props.data.keySeq().map((value, key) => (
|
|
<ModuleByType key={key} type={value} data={props.data.get(value)} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
ModulesByVideoType.propTypes = {
|
|
videoType: PropTypes.string.isRequired,
|
|
data: PropTypes.instanceOf(Map)
|
|
};
|
|
|
|
const ModuleByType = props => (
|
|
<div>
|
|
<h4>{capitalize(props.type)}</h4>
|
|
<table className="table">
|
|
<tbody>
|
|
{props.data.map(function(value, key) {
|
|
return <Module key={key} type={key} data={value} />;
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
ModuleByType.propTypes = {
|
|
type: PropTypes.string.isRequired,
|
|
data: PropTypes.instanceOf(List)
|
|
};
|
|
|
|
const Module = props => {
|
|
let iconClass, prettyStatus, badgeClass;
|
|
const name = props.data.get("name");
|
|
|
|
switch (props.data.get("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-${name}`}>
|
|
<p>
|
|
<span className={badgeClass}>Status: {prettyStatus}</span>
|
|
</p>
|
|
{props.data.get("error") !== "" && (
|
|
<p>Error: {props.data.get("error")}</p>
|
|
)}
|
|
</Tooltip>
|
|
);
|
|
|
|
return (
|
|
<tr>
|
|
<th>{name}</th>
|
|
<td>
|
|
<OverlayTrigger placement="right" overlay={tooltip}>
|
|
<span className={badgeClass}>
|
|
<i className={iconClass}></i> {prettyStatus}
|
|
</span>
|
|
</OverlayTrigger>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
Module.propTypes = {
|
|
data: PropTypes.instanceOf(Map)
|
|
};
|