Add the possibility to change offenders' layout

front/src/css/rule.css

@@ -82,3 +82,17 @@
   font-size: 3em;
   margin-bottom: 1em;
 }
+.offendersHtml {
+  display: inline-block;
+}
+.offendersHtml .domTree div {
+  text-align: left;
+  margin-left: 1em;
+}
+.offendersHtml .domTree div span:only-child {
+  font-weight: bold;
+}
+.offendersHtml .domTree div span:only-child span {
+  font-style: italic;
+  font-weight: normal;
+}

front/src/js/controllers/ruleCtrl.js

@@ -22,7 +22,10 @@ ruleCtrl.controller('RuleCtrl', ['$scope', '$rootScope', '$routeParams', '$locat
 
     function init() {
         $scope.rule = $scope.result.rules[$scope.policyName];
-        $scope.message = $sce.trustAsHtml($scope.rule.policy.message);
+
+        if (angular.isString($scope.rule.offenders)) {
+            $scope.htmlOffenders = $scope.rule.offenders;
+        }
     }
 
     $scope.backToDashboard = function() {

front/src/less/rule.less

@@ -88,4 +88,21 @@
         font-size: 3em;
         margin-bottom: 1em;
     }
+}
+
+.offendersHtml {
+    display: inline-block;
+
+    .domTree div {
+        text-align: left;
+        margin-left: 1em;
+
+        span:only-child {
+            font-weight: bold;
+            span {
+                font-style: italic;
+                font-weight: normal;
+            }
+        }
+    }
 }

front/src/views/rule.html

@@ -10,24 +10,31 @@
         </div>
         <div class="right">
             <h3>Value: {{rule.value}}</h3>
-            <div ng-bind-html="message" class="message"></div>
+            <div ng-bind-html="rule.policy.message" class="message"></div>
         </div>
     </div>
     <div ng-if="rule.abnormal" class="warning">
         <h3>Warning</h3>
         <p>This rule reached the abnormality threshold, which means there is a real problem you should care about.</p>
     </div>
-    <div class="offenders">
+    <div class="offenders" ng-if="!htmlOffenders">
         <h3>
             <ng-pluralize count="rule.offenders.length || 0" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}">
             </ng-pluralize>
         </h3>
         <div class="offendersTable">
             <div ng-repeat="offender in rule.offenders track by $index">
-                <div>{{offender}}</div>
+                <div ng-bind-html="offender"></div>
             </div>
         </div>
     </div>
+    <div class="offenders" ng-if="htmlOffenders">
+        <h3>
+            <ng-pluralize count="rule.offendersCount || 0" when="{'0': 'No offenders', 'one': '1 offender', 'other': '{} offenders'}">
+            </ng-pluralize>
+        </h3>
+        <div class="offendersHtml" ng-bind-html="htmlOffenders"></div>
+    </div>
     <div ng-if="!rule && rule !== null" class="notFound">
         <h2>404</h2>
         Rule "{{policyName}}"" not found