Pull in frontend

web/src/shared/components/status.js

@@ -0,0 +1,100 @@
+import React, { Component } from "react";
+import classnames from "classnames";
+import {
+	STATUS_BLOCKED,
+	STATUS_DECLINED,
+	STATUS_ERROR,
+	STATUS_FAILURE,
+	STATUS_KILLED,
+	STATUS_PENDING,
+	STATUS_RUNNING,
+	STATUS_SKIPPED,
+	STATUS_STARTED,
+	STATUS_SUCCESS,
+} from "shared/constants/status";
+import style from "./status.less";
+
+import {
+	CheckIcon,
+	CloseIcon,
+	ClockIcon,
+	RefreshIcon,
+	RemoveIcon,
+} from "./icons/index";
+
+const defaultIconSize = 15;
+
+const statusLabel = status => {
+	switch (status) {
+		case STATUS_BLOCKED:
+			return "Pending Approval";
+		case STATUS_DECLINED:
+			return "Declined";
+		case STATUS_ERROR:
+			return "Error";
+		case STATUS_FAILURE:
+			return "Failure";
+		case STATUS_KILLED:
+			return "Cancelled";
+		case STATUS_PENDING:
+			return "Pending";
+		case STATUS_RUNNING:
+			return "Running";
+		case STATUS_SKIPPED:
+			return "Skipped";
+		case STATUS_STARTED:
+			return "Running";
+		case STATUS_SUCCESS:
+			return "Successful";
+		default:
+			return "";
+	}
+};
+
+const renderIcon = (status, size) => {
+	switch (status) {
+		case STATUS_SKIPPED:
+			return <RemoveIcon size={size} />;
+		case STATUS_PENDING:
+			return <ClockIcon size={size} />;
+		case STATUS_RUNNING:
+		case STATUS_STARTED:
+			return <RefreshIcon size={size} />;
+		case STATUS_SUCCESS:
+			return <CheckIcon size={size} />;
+		default:
+			return <CloseIcon size={size} />;
+	}
+};
+
+export default class Status extends Component {
+	shouldComponentUpdate(nextProps, nextState) {
+		return this.props.status !== nextProps.status;
+	}
+
+	render() {
+		const { status } = this.props;
+		const icon = renderIcon(status, defaultIconSize);
+		const classes = classnames(style.root, style[status]);
+		return <div className={classes}>{icon}</div>;
+	}
+}
+
+export const StatusLabel = ({ status }) => {
+	return (
+		<div className={classnames(style.label, style[status])}>
+			<div>{statusLabel(status)}</div>
+		</div>
+	);
+};
+
+export const StatusText = ({ status, text }) => {
+	return (
+		<div
+			className={classnames(style.label, style[status])}
+			style="text-transform: capitalize;padding: 5px 10px;"
+		>
+			<div>{text}</div>
+		</div>
+	);
+};