Harden whitespace in log messages to show newlines, tabs, and spaces.

Due to the additional and inconsistent height of log messages, the other columns are vertically aligned to the top rather than the middle.

frontend/css/sections/logs.css.less

@@ -1,103 +1,105 b''
 table.log-list {
-    tr.odd, tr.even {
+    tbody > tr > td {
+        vertical-align: top;
     }
 
     .http_status {
         width: 52px;
     }
 
     .when {
         width: 150px;
     }
 
     .tick {
         width: 20px !important;
     }
 
     .c1 {
         width: 130px;
 
         .app_name {
             font-weight: bold;
         }
         .server {
             color: #777777;
         }
     }
 
     .c2 {
         .namespace {
             color: @color_orange;
             font-weight: bold;
         }
         word-break: break-all;
         word-wrap: break-word;
     }
 
     .odd .c3, .even .c3 {
         width: 90px;
         font-size: 85%
     }
 
     .tag {
         display: inline-block;
         margin: 0 5px 0 0px;
         padding: 2px 5px 1px;
         font-size: 75%;
         .border-radius(2px);
         .inset-box-shadow(0, 0, 1px, rgba(0, 0, 0, 0.15));
         border: 0px solid @color_light_grey;
         background-color: lighten(@color_light_grey, 10%);
         letter-spacing: 0.5px;
         color: darken(@color_light_grey, 33%);
         .name {
             text-transform: uppercase;
 
         }
     }
     .tag:hover {
         .transition-duration;
         -moz-transform: scale(1.20);
         -webkit-transform: scale(1.20);
         -o-transform: scale(1.20);
         -ms-transform: scale(1.20);
         transform: scale(1.20);
     }
 
     .unknown {
         color: @color_grey !important;
     }
 
     .debug {
         background-color: @color_green !important;
         color: #ffffff !important;
     }
 
     .info {
         background-color: lighten(@color_med_blue, 65%) !important;
         color: @color_med_blue !important;
         border-color: lighten(@color_med_blue, 33%);
     }
 
     .warning {
         background-color: lighten(@color_orange, 55%) !important;
         color: @color_orange !important;
         border-color: lighten(@color_orange, 33%);
     }
 
     .error {
         background-color: lighten(@color_red, 60%) !important;
         color: @color_red !important;
         border-color: lighten(@color_red, 50%);
     }
     .critical {
         background-color: #000000 !important;
         color: #ffffff !important;
         background-color: #000000;
     }
     .log {
         font-size: 85%;
         margin-top: 5px;
+        white-space: pre-wrap;
     }
 
 }

frontend/src/templates/logs.html

@@ -1,98 +1,96 b''
 <ng-include src="'templates/loader.html'" ng-if="logs.isLoading.logs"></ng-include>
 
 <div ng-if="logs.isLoading.logs === false">
 
     <p class="search-params">
         <strong>Search params:</strong>
         <span ng-repeat="tag in logs.searchParams.tags" class="tag">
             <strong>{{tag.type}}</strong>
             {{ tag.type == 'resource' ? logs.applications[tag.value].resource_name : tag.value }}
 
             <a ng-click="logs.removeSearchTag(tag)"><span class="fa fa-times"></span></a>
         </span>
     </p>
 
     <p>
 
         <script type="text/ng-template" id="SearchTypeAheadUrl.html">
 
         </script>
 
     <form class="form">
         <div class="typeahead-tags">
             <input type="text" id="typeAhead" ng-model="logs.filterTypeAhead" placeholder="Start typing to filter logs for events, filter by servers, namespaces, levels."
                    ng-keydown="logs.typeAheadTag($event)"
                    uib-typeahead="tag as tag.text for tag in logs.filterTypeAheadOptions | filter:$viewValue:logs.aheadFilter"
                    typeahead-min-length="1" class="form-control"
                    typeahead-template-url="templates/directives/search_type_ahead.html">
         </div>
     </form>
 
     <div class="well animate-show position-absolute increse-zindex" ng-if="logs.showDatePicker" ng-model="logs.pickerDate" ng-change="logs.pickerDateChanged()">
         <uib-datepicker></uib-datepicker>
     </div>
 
     </p>
 
     <div class="panel">
 
         <div class="panel-body">
             <c3chart data-domid="log_events_chart" data-data="logs.logEventsChartData" data-config="logs.logEventsChartConfig">
             </c3chart>
         </div>
     </div>
 
 
     <div class="text-center">
         <uib-pagination total-items="logs.itemCount" items-per-page="logs.itemsPerPage" ng-model="logs.searchParams.page" max-size="10"
                         ng-change="logs.paginationChange()"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"></uib-pagination>
     </div>
 
     <div class="panel panel-default">
 
         <table class="table table-striped log-list">
             <caption>Logs</caption>
             <thead>
             <tr>
                 <th class="c1 resource">Application</th>
                 <th class="c2 message">Message</th>
                 <th class="c3 when">When</th>
             </tr>
             </thead>
             <tbody>
             <tr ng-repeat="log in logs.logsPage track by log.log_id" class="{{$odd ? 'odd' : 'even'}}">
                 <td class="c1">
                     <a class="tag application" ng-click="logs.addSearchTag({type:'resource', value:log.resource_id})">
                         <span class="name">{{log.resource_name}}</span></a>
                 </td>
                 <td class="c2">
                     <a class="tag {{log.log_level|lowercase}}" ng-click="logs.addSearchTag({type:'level', value:log.log_level})">
                         <span class="name">level:</span> {{log.log_level}}</a>
                     <a class="tag" ng-click="logs.addSearchTag({type:'namespace', value:log.namespace})">
                         <span class="name">namespace:</span> {{log.namespace}}</a>
                     <a ng-repeat="(tag, value) in log.tags" class="tag" ng-click="logs.addSearchTag({type:tag, value:value})">
                         <span class="name">{{tag}}:</span> {{value}}</a>
-                    <div class="log">
-                        {{log.message}}
-                    </div>
+                    <div class="log">{{log.message}}</div>
                 </td>
                 <td class="c3 when">
                     <a ng-click="logs.filterId(log)" data-uib-tooltip="{{log.timestamp}}">
                         <iso-to-relative-time time="{{log.timestamp}}"/>
                     </a>
                 </td>
             </tr>
 
             </tbody>
         </table>
 
     </div>
 
     <div class="text-center">
         <uib-pagination total-items="logs.itemCount" items-per-page="logs.itemsPerPage" ng-model="logs.searchParams.page" max-size="10"
                         ng-change="logs.paginationChange()"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"></uib-pagination>
     </div>
 
 </div>