From 10c9555d1e39a82022b23ad63cf6a05aaae84e2c Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Wed, 28 Dec 2016 17:56:18 +0100
Subject: [PATCH] #53 Improve the observable details page

---
 .../controllers/case/CaseObservablesCtrl.js   | 10 ++--
 ui/app/scripts/directives/report.js           | 10 ++--
 ui/app/styles/main.css                        |  6 ++-
 .../partials/case/case.observables.item.html  |  6 +--
 .../details/artifact-details-analysers.html   | 49 ++++++++++++-------
 ui/app/views/reports/long.html                | 10 +++-
 6 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/ui/app/scripts/controllers/case/CaseObservablesCtrl.js b/ui/app/scripts/controllers/case/CaseObservablesCtrl.js
index fc46071fdd..526ceb2e21 100644
--- a/ui/app/scripts/controllers/case/CaseObservablesCtrl.js
+++ b/ui/app/scripts/controllers/case/CaseObservablesCtrl.js
@@ -530,15 +530,15 @@
                                     cortexId: serverId,
                                     artifactId: item.artifact.id,
                                     analyzerId: item.analyzerId
-                                });                                
+                                });
                             })
-                        );                                                
+                        );
                     })
                     .then(function() {
-                        AlertSrv.log('Analyzers has been successfully started for observable: ' + artifactName, 'success');
+                        AlertSrv.log('Analyzers have been successfully started for ' + $scope.selection.artifacts.length + ' observables', 'success');
                     }, function() {
-                        
-                    })
+
+                    });
 
                 $scope.initAnalyzersList();
                 $scope.initSelection($scope.selection);
diff --git a/ui/app/scripts/directives/report.js b/ui/app/scripts/directives/report.js
index 9824b42ce1..5bd95d4482 100644
--- a/ui/app/scripts/directives/report.js
+++ b/ui/app/scripts/directives/report.js
@@ -14,22 +14,22 @@
                 $templateRequest(reportUrl, true)
                     .then(function (tmpl) {
                         scope.element.html($compile(tmpl)(scope));
-                    }, function (response) {
+                    }, function (/*response*/) {
                         $templateRequest('/views/reports/' + scope.flavor + '.html', true)
                             .then(function (tmpl) {
                                 scope.element.html($compile(tmpl)(scope));
                             });
-                    })
+                    });
             }
             return {
-                restrict: 'E',
-                replace: true,                
+                restrict: 'E',                
                 scope: {
                     'name': '=',
                     'artifact': '=',
                     'flavor': '@',
                     'status': '=',
-                    'content': '='
+                    'content': '=',
+                    'success': '='
                 },
                 link: function (scope, element) {
                     scope.element = element;
diff --git a/ui/app/styles/main.css b/ui/app/styles/main.css
index d28d079b77..edbf8b2720 100644
--- a/ui/app/styles/main.css
+++ b/ui/app/styles/main.css
@@ -48,7 +48,9 @@ body {
     margin: 0 !important;
 }
 
-
+.short-report {
+    margin-right: 5px;
+}
 .empty-message {
     background-color: #f5f5f5;
     color: #AAA;
@@ -361,7 +363,7 @@ td.vmiddle {
     padding: 9.5px;
     margin: 0 0 10px;
     font-size: 13px;
-    line-height: 1.42857143;    
+    line-height: 1.42857143;
     word-break: break-all;
     word-wrap: break-word;
     background-color: #f5f5f5;
diff --git a/ui/app/views/partials/case/case.observables.item.html b/ui/app/views/partials/case/case.observables.item.html
index f77e45ab0d..7feee28128 100644
--- a/ui/app/views/partials/case/case.observables.item.html
+++ b/ui/app/views/partials/case/case.observables.item.html
@@ -25,11 +25,7 @@ <h4>
     </div>
     <!-- Observable analysers short reports -->
     <div class="col-md-11 col-md-offset-1">
-        <ul class="list-inline observable-reports-summary">
-            <li ng-if="jobs[0]" ng-repeat="(analyzerId, jobs) in analyzerJobs">
-                <report artifact="artifact" content="jobs[0].report.full" flavor="short" name="analyzerId" status="jobs[0].status"></report>
-            </li>
-        </ul>
+        <report class="short-report" ng-if="jobs[0]" ng-repeat="(analyzerId, jobs) in analyzerJobs" artifact="artifact" content="jobs[0].report.summary" flavor="short" name="analyzerId" status="jobs[0].status" success="jobs[0].success"></report>
     </div>
 </div>
 
diff --git a/ui/app/views/partials/observables/details/artifact-details-analysers.html b/ui/app/views/partials/observables/details/artifact-details-analysers.html
index 64a2125e59..98b95f4328 100644
--- a/ui/app/views/partials/observables/details/artifact-details-analysers.html
+++ b/ui/app/views/partials/observables/details/artifact-details-analysers.html
@@ -1,43 +1,43 @@
 <h3 class="pad10 text-primary">
     Observable Analyzers
     <span class="pull-right" ng-if="analysisEnabled">
-        <small><a href class="text-primary" ng-click="runAll()">Run all</a></small>    
+        <small><a href class="text-primary" ng-click="runAll()">Run all</a></small>
     </span>
 </h3>
 <table class="table table-hover">
     <thead>
         <th>Analyzer</th>
-        <th width="300">Last analysis</th>        
+        <th width="300">Last analysis</th>
         <th width="60" ng-if="analysisEnabled">Action</th>
     </thead>
     <tbody>
         <tr ng-repeat="(analyzerId, jobs) in analyzerJobs" ng-init="analyzers[analyzerId].showRows=false;">
             <td>
                 <a ng-if="jobs.length > 1" class="noline mr-xxs" href ng-click="analyzers[analyzerId].showRows = !analyzers[analyzerId].showRows">
-                    <i class="fa" ng-class="{ true:'fa-minus-square-o', false:'fa-plus-square-o' }[analyzers[analyzerId].showRows]"></i>                        
+                    <i class="fa" ng-class="{ true:'fa-minus-square-o', false:'fa-plus-square-o' }[analyzers[analyzerId].showRows]"></i>
                 </a>
-                {{::analyzerId}}<br> 
+                {{::analyzerId}}<br>
                 <small class="text-muted">{{::analyzers[analyzerId] | getField: 'description'}}</small>
             </td>
-            <td>                
+            <td>
                 <ul class="list-unstyled">
-                    <li ng-repeat="job in jobs" ng-show="analyzers[analyzerId].showRows || $first">                        
+                    <li ng-repeat="job in jobs" ng-show="analyzers[analyzerId].showRows || $first">
                         <span class="mr-s">
                             <i class="glyphicon" ng-class="{ Failure:'glyphicon-warning-sign text-warning', Success:'glyphicon-ok text-success', InProgress:'fa fa-cog fa-spin'}[job.status]"></i>
                         </span>
 
                         <a href ng-click="showReport(job)" tooltip="View report">{{(job.endDate || job.startDate) | showDate}}</a>
                     </li>
-                </ul>                
+                </ul>
             </td>
-            <td ng-if="analysisEnabled">                
+            <td ng-if="analysisEnabled">
                 <span class="btn btn-xs" ng-class="{true: 'btn-warning', false: 'btn-danger'}[jobs.length > 0]"
                     ng-click="runAnalyzer(analyzerId)"
                     ng-if="analyzers[analyzerId].active">
                     <i class="glyphicon" ng-class="{true: 'glyphicon-repeat', false: 'glyphicon-fire'}[jobs.length > 0]"></i>
-                </span>                
-            </td>    
-        </tr>        
+                </span>
+            </td>
+        </tr>
     </tbody>
 </table>
 
@@ -51,12 +51,27 @@ <h3 class="pad10 text-primary">
     <div class="col-md-12">
         <h3 class="pad10 text-primary">
             Report <small>for {{report.template}} analysis of {{(report.endDate || report.startDate) | showDate}}</small>
+            <span class="pull-right">
+                <small><a href class="text-primary" ng-click="showRaw = !showRaw">{{showRaw ? 'Hide': 'Show'}} Raw Report</a></small>
+            </span>
         </h3>
-        <report artifact="artifact" 
-            content="report.content.full || report.content" 
-            default="jsonhuman" 
-            flavor="long" 
-            name="report.template" 
-            status="report.status"></report>
+        <div ng-if="showRaw">
+            <div class="panel" ng-class="{'panel-info': report.content.success, 'panel-danger': !report.content.success}">
+                <div class="panel-heading">
+                    <strong>Raw report</strong>
+                </div>
+                <div class="panel-body">
+                    <pre>{{(report.content.full || report.content) | json}}</pre>
+                </div>
+            </div>
+        </div>
+        <report ng-if="!showRaw" artifact="artifact"
+            content="report.content.full || report.content"
+            default="jsonhuman"
+            flavor="long"
+            name="report.template"
+            status="report.status"
+            success="report.content.success"
+            ></report>
     </div>
 </div>
diff --git a/ui/app/views/reports/long.html b/ui/app/views/reports/long.html
index ddabac7d41..030ed00fb6 100644
--- a/ui/app/views/reports/long.html
+++ b/ui/app/views/reports/long.html
@@ -1 +1,9 @@
-<pre>{{content | json}}</pre>
\ No newline at end of file
+<div class="panel" ng-class="{'panel-info': success, 'panel-danger': !success}">
+    <div class="panel-heading">
+        <strong>{{(artifact.data || artifact.attachment.name) | fang}}</strong>
+    </div>
+    <div class="panel-body">
+        <div ng-if="!success">{{content.errorMessage}}</div>
+        <pre ng-if="success">{{content | json}}</pre>
+    </div>
+</div>