adding logviewer without chart, data hardcoded from resources

ui/css/logviewer.css

@@ -0,0 +1,78 @@
+.lv-header{
+    font-weight: bold;
+}
+
+body{
+    margin: 15px;
+    font: 0.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+pre{
+    font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.lv-accordion-holder{
+    margin-top: 25px;
+    width: 50%;
+    float: left;
+}
+
+#lv_logview_holder{
+    margin-top: 25px;
+    max-height: 500px;
+    overflow: auto;
+    overflow-x: hidden;
+    padding-left: 15px;
+}
+
+.lv-accordion{
+    background-color: rgba(51,204,51, 0.5);
+    border: 1.5px solid #33CC33;
+    margin-bottom: 5px;
+    cursor: default;
+}
+
+.lv-accordion:hover{
+    background-color: white;
+}
+
+.lv-error-display{
+    max-height: 500px;
+    overflow: auto;
+    margin-top: 2px;
+    background-color: white;
+    border-top: 1.5px solid #FF8040;
+}
+
+.lv-step-name{
+    display: inline;
+}
+
+.lv-orange-error{
+    border: 1.5px solid #FF8040;
+    background-color: rgba(255, 128, 64, 0.5);
+}
+
+.lv-align-right{
+    float: right;
+}
+
+.lv-header, .lv-align-left{
+    float: left;
+}
+
+.lv-clear{
+    clear: both;
+}
+
+.lv-highlight {
+    background-color: #E6E6E6;
+}
+
+.lv-logview-error{
+    font-weight:bold;
+}
+
+.lv-purple-font{
+    color: DarkViolet;
+}

ui/js/logviewer.js

@@ -0,0 +1,85 @@
+var myApp = angular.module('app', []);
+
+function Logviewer($scope, $http, $timeout) {
+    $scope.jsonObj = {};
+    $scope.displayedStep;
+
+    $scope.scrollTo = function(step, linenumber) {
+        if($scope.displayedStep === step) {
+            var pos = document.getElementsByClassName("lv-line-"+linenumber)[0].offsetTop - 
+                         document.getElementById("lv_logview_holder").offsetTop;
+            document.getElementById("lv_logview_holder").scrollTop = pos;
+        }
+    };
+
+    $scope.formatTime = function(sec) {
+        var h = Math.floor(sec/3600);
+        var m = Math.floor(sec%3600/60);
+        var s = Math.floor(sec%3600 % 60);
+        var secStng = sec.toString();
+        var ms = secStng.substr(secStng.indexOf(".")+1, 2);
+        return ((h > 0 ? h + "h " : "") + (m > 0 ? m + "m " : "")
+          + (s > 0 ? s + "s " : "") + (ms > 0 ? ms + "ms " : "00ms"));
+    };
+
+    $scope.displayTime = function(started, finished) {
+        var start = started.substr(started.indexOf(" ")+1, 8);
+        var end = finished.substr(finished.indexOf(" ")+1, 8);
+        return start + "-" + end;
+    };
+
+    $scope.displayLog = function(step) {
+        $scope.displayedStep = step;
+        var start = step.started_linenumber;
+        var end = step.finished_linenumber+1;
+        var errors = step.errors;
+        $http.get('resources/logs/mozilla-inbound_ubuntu64_vm-debug_test-mochitest-other-bm53-tests1-linux-build122.txt').success(function(data) {
+            data = data.split("\n");
+            insertText(data.slice(start, end), start, end, errors);
+        });
+    };
+
+    $scope.init = function() {
+        $http.get('resources/logs/mozilla-inbound_ubuntu64_vm-debug_test-mochitest-other-bm53-tests1-linux-build122.logview.json').success(function(data) {
+            $timeout(function() {
+                $scope.jsonObj = data;
+            });
+        });
+    }
+}
+
+function insertText(data, start, end, errors) {
+    var logviewer = document.getElementById("lv_logview");
+    logviewer.innerText = '';
+    var offset = start;
+    var startText = data.splice(0, 1);
+    var startDiv = document.createElement("div");
+    startDiv.className = "lv-purple-font";
+    startDiv.appendChild(document.createTextNode(startText[0]));
+    logviewer.appendChild(startDiv);
+    var endText = data.splice(-1, 1);
+    var endDiv = document.createElement("div");
+    endDiv.className = "lv-purple-font";
+    endDiv.appendChild(document.createTextNode(endText[0]));
+
+    if(errors.length > 0) {
+        errors.forEach(function(err) {
+            var tempData = data.splice(0, err.linenumber-offset-1);
+            var tempText = tempData.join("\n");
+            logviewer.appendChild(document.createTextNode(tempText));
+            var errData = data.splice(0, 1);
+            var errDiv = document.createElement("div");
+            errDiv.className = "lv-logview-error lv-line-"+err.linenumber;
+            errDiv.appendChild(document.createTextNode(errData[0]));
+            logviewer.appendChild(errDiv);
+            offset = err.linenumber;
+        });
+        var lastDiv = document.createTextNode(data.join("\n"));
+        logviewer.appendChild(lastDiv);
+    }
+    else {
+        logviewer.appendChild(document.createTextNode(data.join("\n")));
+    }
+    logviewer.appendChild(endDiv);
+    document.getElementById("lv_logview_holder").scrollTop = 0;
+}

ui/logviewer.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html ng-app="app">
+    <head>
+        <title> Log Viewer </title>
+        <link href="css/logviewer.css" rel="stylesheet" type="text/css">
+    </head>
+    <body>
+        <div ng-controller="Logviewer" ng-init="init()">
+            <div class="lv-header">
+                <div ng-repeat="(label, value) in jsonObj.header">{{label}}: {{value}}</div>
+            </div>
+            <div class="lv-clear"></div>
+            <div class="lv-accordion-holder">
+                <div ng-repeat="step in jsonObj.step_data.steps"
+                     ng-class="{'lv-orange-error': (step.error_count > 0)}"
+                     ng-click="displayLog(step)"
+                     class="lv-accordion">
+                    <div class="lv-step-name">{{step.order+1}}. {{step.name}}</div>
+                    <div ng-init="time=formatTime(step.duration)"
+                         ng-mouseover="time=displayTime(step.started, step.finished)"
+                         ng-mouseleave="time=formatTime(step.duration)"
+                        class="lv-align-right">{{time}}</div>
+                    <div class="lv-clear"></div>
+                    <div ng-switch on="(step.error_count > 0)">
+                        <div ng-switch-when="true" class="lv-error-display">
+                            <div ng-repeat="error in step.errors"
+                                 ng-mouseover="check=(step==displayedStep)"
+                                 ng-mouseleave="check=false"
+                                 ng-class="{'lv-highlight': check}"
+                                 ng-click="scrollTo(step, error.linenumber);
+                                          $event.stopPropagation()"
+                                class="lv-error-line">
+                                {{error.linenumber}}: {{error.line}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="lv_logview_holder">
+                <pre id="lv_logview"></pre>
+            </div>
+        </div>
+    <script src="vendor/angular/angular.js"></script>
+    <script src="js/logviewer.js"></script>
+    </body>
+</html>