import React, { Component } from "react";
import styled from "styled-components";
function _getIconInfo(status) {
switch (status) {
case "running":
return {
title: "Playbook is in progress.",
icon: "fa-pause",
color: "blue"
};
case "completed":
return {
title: "Playbook has completed successfully.",
icon: "fa-check",
color: "green"
};
case "failed":
return {
title: "Playbook has failed with one or more errors.",
icon: "fa-warning",
color: "red"
};
default:
return {
title: "Playbook's status is unknown.",
icon: "fa-warning",
color: "red"
};
}
}
const IconWrapper = styled.i`
color: ${props => props.color};
`;
class StatusIcon extends Component {
render() {
const { status } = this.props;
const iconInfo = _getIconInfo(status);
return (
);
}
}
const PlaybookWrapper = styled.div`
cursor: pointer;
&:hover {
.pf-c-card {
background: rgba(0, 0, 0, 0)
linear-gradient(
to right,
rgb(57, 165, 220) 0px,
rgb(57, 165, 220) 5px,
rgb(255, 255, 255) 5px,
rgb(255, 255, 255) 100%
)
no-repeat scroll 0% 0%;
}
}
`;
const StatusAndName = styled.div`
display: flex;
align-items: center;
width: 100%;
margin-bottom: 1em;
@media (min-width: 587px) {
width: 25%;
margin-bottom: 0;
}
`;
const PlaybookInfo = styled.div`
display: flex;
align-items: center;
width: 100%;
margin-bottom: 1em;
@media (min-width: 587px) {
width: 50%;
margin-bottom: 0;
}
`;
const Duration = styled.div`
display: flex;
align-items: center;
width: 100%;
@media (min-width: 587px) {
width: 25%;
justify-content: flex-end;
}
`;
export default class Playbook extends Component {
render() {
const { playbook, history } = this.props;
return (
history.push(`/playbooks/${playbook.id}`)}
>
{playbook.path.split("/").slice(-1)[0]}
{Object.keys(playbook.arguments).length} arguments
{playbook.hosts.length} Hosts
{playbook.files.length} Files
{Object.keys(playbook.tasks).length} tasks
{Object.keys(playbook.plays).length} plays
{Object.keys(playbook.records).length} records
{Math.round(playbook.duration)} sec
);
}
}