Jenkins-alerts.html

## Jenkins-alerts.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tweets</title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <style>
        #jenkins, #jenkins .background {
            z-index: 9999;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            font-family: serif;
        }

        #jenkins {
            display: none;
            background: rgba(249, 144, 144, 0.73);
        }

        #jenkins .background {
            z-index: 10000;
            animation: blinker 1s cubic-bezier(0, -0.36, 1, 1.39) infinite alternate;
            background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 255) 400%);
        }

        @keyframes blinker {
            to {
                opacity: 0;
            }
        }

        #jenkins .center-block {
            z-index: 10001;
            width: 75%;
            margin-top: 10%;
            position: relative;
            top: 0;
            left: 0;
        }

        #jenkins .pull-left {
            height: 358px;
            width: 307px;
        }

        #jenkins h1 {
            font-size: 50px;
            font-weight: 700;
            font-family: fantasy;
        }

        #jenkins-error {
            font-size: 30px;
            padding: 60px 0 0 350px;
        }


    </style>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/gadelkareem">Tweets by gadelkareem</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="jenkins">
    <div class="background"></div>
    <div class="center-block">
        <img id="photo" src="http://gadelkareem.com/images/oops-jenkins.png" class="pull-left">
        <div>
            <h1>Oops!! <span class="author"></span> just put us on Fire!</h1>
            <ul id="jenkins-error"></ul>
        </div>
    </div>
</div>
<script>
    function jenkins() {
        var baseUrl = "http://jenkins.company.example";

        $.ajax({
            url: baseUrl + "/api/json",
            data: "depth=1&tree=jobs[displayName,lastBuild[result,timestamp,changeSet[items[msg,author[fullName]]]]]&jsonp=callBack",
            jsonpCallback: "callBack",
            dataType: 'jsonp',
            success: function (json) {
                var allJobs = json["jobs"],
                        currentTimestamp = moment().unix(),
                        nonSuccessfulJobs = allJobs.filter(function (job) {
                            return job["lastBuild"] != null && job["lastBuild"]["result"] == "FAILURE" && (currentTimestamp - (job["lastBuild"]["timestamp"] / 1000)) < 180 /* display for 3 min */;
                        });

                if (nonSuccessfulJobs.length) {
                    console.log(nonSuccessfulJobs);
                    jenkinsError.empty();

                    $.each(nonSuccessfulJobs, function (index, value) {
                        var changeSet = value['lastBuild']['changeSet']['items'],
                                item = changeSet[changeSet.length - 1],
                                author = item && 'author' in item && 'fullName' in item['author'] ? item['author']['fullName'] : 'Someone';
                        $('.author').text(author);
                        jenkinsError.append(
                                "<li><strong>" + author + "</strong> just broke <strong>" + value["displayName"] + "</strong> while trying to <em>" + ( item && 'msg' in item ? item['msg'] : 'hmm.. not sure!') + '</em></li>');
                    });
                    jenkinsDiv.fadeIn();
                }
                else {
                    jenkinsDiv.fadeOut();
                }
                setTimeout(jenkins, 15000);
            },
            error: function (error) {
                console.log(error);

            }
        });
    }
    var jenkinsDiv = $("#jenkins"), jenkinsError = $('#jenkins-error');
    jenkinsDiv.on('click', function () {
        $(this).hide();
    });
    jenkins();


</script>
</body>
</html>