added logs to ui

Author: ehazlett

controller/static/app/app.js

@@ -10,7 +10,8 @@ angular.module('shipyard', [
         'shipyard.directives',
         'angular-flash.service',
         'angular-flash.flash-alert-directive',
-        'angles'
+        'angles',
+        'ansiToHtml'
     ])
     .config(['$routeProvider', '$httpProvider', '$provide', 'flashProvider',
         function ($routeProvider, $httpProvider, $provide, flashProvider) {
@@ -38,6 +39,10 @@ angular.module('shipyard', [
                 templateUrl: 'templates/container_details.html',
                 controller: 'ContainerDetailsController'
             });
+            $routeProvider.when('/containers/:id/logs', {
+                templateUrl: 'templates/container_logs.html',
+                controller: 'ContainerLogsController'
+            });
             $routeProvider.when('/engines', {
                 templateUrl: 'templates/engines.html',
                 controller: 'EnginesController'

controller/static/app/controllers.js

@@ -284,6 +284,16 @@ angular.module('shipyard.controllers', ['ngCookies'])
                 };
             });
         })
+        .controller('ContainerLogsController', function($scope, $location, $routeParams, $http, flash, Container, ansi2html) {
+            $scope.template = 'templates/container_logs.html';
+
+            $http.get('/api/containers/' + $routeParams.id + "/logs").success(function(data){
+                $scope.logs = ansi2html.toHtml(data.replace(/\n/g, '<br/>'));
+            });
+            Container.query({id: $routeParams.id}, function(data){
+                $scope.container = data;
+            });
+        })
         .controller('EnginesController', function($scope, Engines) {
             $scope.template = 'templates/engines.html';
             Engines.query(function(data){

controller/static/app/filters.js

@@ -37,6 +37,11 @@ angular.module('shipyard.filters', [])
             return s + " MB";
         };
     })
+    .filter('unsafe', function ($sce) {
+        return function(val) {
+            return $sce.trustAsHtml(val);  
+        };
+    })
     .filter('formatEvent', function () {
         return function (e) {
             var evt = "";

controller/static/bower.json

@@ -29,6 +29,7 @@
     "angular-loader": "~1.2.23",
     "angular-cookies": "~1.2.23",
     "angular-flash": "~0.1.13",
-    "angles": "*"
+    "angles": "*",
+    "ansi-to-html": "jorgeecardona/ansi-to-html"
   }
 }

controller/static/index.html

@@ -29,6 +29,7 @@
         <script src="bower_components/angular-flash/dist/angular-flash.min.js"></script>
         <script src="bower_components/chartjs/Chart.min.js"></script>
         <script src="bower_components/angles/angles.js"></script>
+        <script src="bower_components/ansi-to-html/ansi2html.js"></script>
         <script src="app/app.js"></script>
         <script src="app/services.js"></script>
         <script src="app/controllers.js"></script>

controller/static/templates/container_details.html

@@ -1,3 +1,9 @@
+<div class="ui breadcrumb">
+    <a href="/#/containers" class="section">containers</a>
+    <div class="divider"> / </div>
+    <div class="active section">{{container.id | limitTo:12}}</div>
+</div>
+
 <div class="ui basic small modal removeContainer">
     <div class="header">
         Destroy Container
@@ -62,6 +68,8 @@
     </div>
 </div>
 
+<div></div>
+
 <div class="ui icon buttons toolbar">
     <a ng-click="showRestartContainerDialog()" class="ui button mini green">
         <i class="refresh icon"></i>
@@ -86,6 +94,12 @@
         Scale
     </a>
 </div>
+<div class="ui icon buttons toolbar">
+    <a href="/#/containers/{{container.id}}/logs" class="ui button mini black">
+        <i class="text file outline icon"></i>
+        Logs
+    </a>
+</div>
 
 <div class="ui small message red" flash-alert="error" ng-show="flash.message" duration="0">
     <i class="close icon"></i>

controller/static/templates/container_logs.html

@@ -0,0 +1,14 @@
+<div class="ui breadcrumb">
+    <a href="/#/containers" class="section">containers</a>
+    <div class="divider"> / </div>
+    <a href="/#/containers/{{container.id}}" class="section">{{container.id | limitTo:12}}</a>
+    <div class="divider"> / </div>
+    <div class="active section">logs</div>
+</div>
+<div class="ui small message red" flash-alert="error" ng-show="flash.message" duration="0">
+    <i class="close icon"></i>
+    {{flash.message}}
+</div>
+<div class="ui segment">
+    <div ng-bind-html="logs|unsafe"></div>
+</div>