#53 Update report template management section and observable reports …

…display
TheHive-Project · Dec 9, 2016 · 00c2c6a · 00c2c6a
1 parent 52b5ae3
commit 00c2c6a
Show file tree

Hide file tree

Showing 16 changed files with 75 additions and 115 deletions.
diff --git a/analyzers/VirusTotal/report/success_short.html b/analyzers/VirusTotal/report/success_short.html
@@ -1,11 +1,11 @@
 <span ng-switch="content.response_code">
 	<span ng-switch-when="1" class="label" ng-class="{'true':'label-info', 'false':'label-danger'}[content.positives < 5 ]">
 		VT:
-		<span ng-if="content.positives">{{content.positives}}/{{content.total}} ({{content.scan_date}})&nbsp;</span>
-		<span ng-if="content.scans && content.scans.length > 0">Scans({{content.scans.length}})&nbsp;</span>
-		<span ng-if="content.resolutions && content.resolutions.length > 0">Resolutions({{content.resolutions.length}})&nbsp;</span>
-		<span ng-if="content.detected_urls && content.detected_urls.length > 0">Url detections({{content.detected_urls.length}})&nbsp;</span>
-		<span ng-if="content.detected_downloaded_samples && content.detected_downloaded_samples.length > 0">files({{content.detected_downloaded_samples.length}})&nbsp;</span>
+		<span ng-if="content.positives">{{content.positives}}/{{content.total}} ({{content.scan_date}})</span>
+		<span ng-if="content.scans && content.scans.length > 0">Scans({{content.scans.length}})</span>
+		<span ng-if="content.resolutions && content.resolutions.length > 0">Resolutions({{content.resolutions.length}})</span>
+		<span ng-if="content.detected_urls && content.detected_urls.length > 0">Url detections({{content.detected_urls.length}})</span>
+		<span ng-if="content.detected_downloaded_samples && content.detected_downloaded_samples.length > 0">files({{content.detected_downloaded_samples.length}})</span>
 
 	</span>
 	<span ng-switch-default class="label label-warning">

diff --git a/ui/app/index.html b/ui/app/index.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="bower_components/css-spaces/dist/spaces.css" />
     <link rel="stylesheet" href="bower_components/bootstrap-markdown/css/bootstrap-markdown.min.css" />
     <link rel="stylesheet" href="bower_components/angular-markdown-editor-ghiscoding/styles/angular-markdown-editor.css" />
+    <link rel="stylesheet" href="bower_components/angular-page-loader/dist/angular-page-loader.css" />
     <!-- endbower -->
     <link rel="stylesheet" href="bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
     <link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.bootstrap.min.css"/>
@@ -39,7 +40,8 @@
     <link rel="stylesheet" href="styles/directives/page-sizer.css"/>
     <!-- endbuild -->
   </head>
-  <body>
+  <body ng-cloak>
+    <page-loader></page-loader>
     <div ui-view></div>
 
     <!-- build:js(.) scripts/vendor.js -->
@@ -84,6 +86,7 @@
     <script src="bower_components/angular-marked/dist/angular-marked.js"></script>
     <script src="bower_components/bootstrap-markdown/js/bootstrap-markdown.js"></script>
     <script src="bower_components/angular-markdown-editor-ghiscoding/src/angular-markdown-editor.js"></script>
+    <script src="bower_components/angular-page-loader/dist/angular-page-loader.js"></script>
     <!-- endbower -->
 
     <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>    

diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -7,7 +7,7 @@ angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router
         'theHiveControllers', 'theHiveServices', 'theHiveFilters',
         'theHiveDirectives', 'yaru22.jsonHuman', 'timer', 'angularMoment', 'ngCsv', 'ngTagsInput', 'btford.markdown',
         'ngResource', 'ui.codemirror', 'ui-notification', 'angularjs-dropdown-multiselect', 'base64', 'angular-clipboard',
-        'LocalStorageModule', 'angular-markdown-editor', 'hc.marked', 'hljs', 'ui.ace'
+        'LocalStorageModule', 'angular-markdown-editor', 'hc.marked', 'hljs', 'ui.ace', 'angular-page-loader'
     ])
     .config(function($resourceProvider) {
         'use strict';

diff --git a/ui/app/scripts/controllers/admin/AdminReportTemplatesCtrl.js b/ui/app/scripts/controllers/admin/AdminReportTemplatesCtrl.js
@@ -24,9 +24,7 @@
                 return $q.resolve(self.analyzers);
             }).then(function (analyzersMap) {
                 _.each(self.templates, function (tpl) {
-                    _.each(tpl.analyzers, function (analyzerId) {
-                        analyzersMap[analyzerId][tpl.flavor + 'Report'] = tpl;
-                    });
+                    analyzersMap[tpl.analyzers][tpl.flavor + 'Report'] = tpl;
                 });
 
                 console.log(self.analyzers);
@@ -70,7 +68,7 @@
         };    
 
         this.formData = _.pick(reportTemplate, 'id', 'flavor', 'content');
-        this.formData.analyzers = [this.analyzer.id];
+        this.formData.analyzers = this.analyzer.id;
 
         this.cancel = function () {
             $modalInstance.dismiss();

diff --git a/ui/app/scripts/controllers/case/CaseObservablesItemCtrl.js b/ui/app/scripts/controllers/case/CaseObservablesItemCtrl.js
@@ -6,7 +6,7 @@
                 observableName = 'observable-' + observableId;
 
             $scope.caseId = $stateParams.caseId;
-            $scope.report = {};
+            $scope.report = null;
             $scope.analyzers = {};
             $scope.analyzerJobs = {};
             $scope.jobs = {};
@@ -60,12 +60,10 @@
 
                 // Get analyzers available for the observable's datatype
                 AnalyzerSrv.forDataType(artifact.dataType)
-                    .then(function (analyzers) {                        
+                    .then(function (analyzers) {
                         return $scope.analyzers = analyzers;
                     })
                     .then(function (analyzers) {
-                        console.log(analyzers);
-
                         $scope.jobs = CortexSrv.list($scope.caseId, observableId, $scope.onJobsChange);
                     });
 
@@ -85,19 +83,24 @@
                         $scope.analyzerJobs[job.analyzerId] = [job];
 
                         AnalyzerSrv.get(job.analyzerId)
-                            .then(function (data) {
-                                $scope.analyzers[data.analyzerId] = {
-                                    active: false,
-                                    showRows: false
-                                };
-                            },
-                            function (response) {
-                                AlertSrv.error('artifactDetails', response.data, response.status);
-                            });
+                            .finally(function (data) {
+                                    $scope.analyzers[data.analyzerId] = {
+                                        active: false,
+                                        showRows: false
+                                    };
+                                });
                     }
                 });
             };
 
+            $scope.showReport = function (job) {
+                $scope.report = {
+                    template: job.analyzerId,
+                    content: job.report,
+                    status: job.status
+                }                
+            }
+
             $scope.similarArtifacts = CaseArtifactSrv.api().similar({
                 'artifactId': observableId
             });

diff --git a/ui/app/scripts/directives/report.js b/ui/app/scripts/directives/report.js
@@ -1,39 +1,32 @@
-(function() {
+(function () {
     'use strict';
     angular.module('theHiveDirectives')
-        .directive('report', function($templateRequest, $compile) {
+        .directive('report', function ($templateRequest, $q, $compile) {
             function updateReport(a, b, scope) {
-                console.log('update report ' + scope.name);
-
                 if (!angular.isDefined(scope.content) || !angular.isDefined(scope.name)) {
-                    console.log('no data, don\'t show anything');
                     scope.element.html('');
                     return;
                 }
 
                 // find report template
-                //$templateRequest('/api/analyzer/' + scope.name + '/report/' + scope.status.toLowerCase() + '_' + scope.flavor, true)
                 $templateRequest('/api/connector/cortex/report/template/content/' + scope.name + '/' + scope.flavor, true)
-                    .then(function(tmpl) {
-                        scope.element.html($compile(tmpl)(scope));
-                    }, function(response) {
-                        if(response.status === 404) {
-                            console.log('Use default template');
-                            return $templateRequest('/views/reports/' + scope.flavor + '.html', true)                            
-                        } else {
-                            scope.element.html('Analyzer not found !');     
-                        }                        
-                    }).then(null, function(tmpl) {
+                    .then(function (tmpl) {
                         scope.element.html($compile(tmpl)(scope));
-                    });
+                    }, function (response) {
+                        $templateRequest('/views/reports/' + scope.flavor + '.html', true)
+                            .then(function (tmpl) {
+                                scope.element.html($compile(tmpl)(scope));
+                            });
+                    })
             }
             return {
-                'restrict': 'E',
-                'link': function(scope, element) {
+                restrict: 'E',
+                replace: true,
+                link: function (scope, element) {
                     scope.element = element;
                     scope.$watchGroup(['name', 'content', 'status'], updateReport);
                 },
-                'scope': {
+                scope: {
                     'name': '=',
                     'artifact': '=',
                     'flavor': '@',

diff --git a/ui/app/scripts/services/CortexSrv.js b/ui/app/scripts/services/CortexSrv.js
@@ -12,7 +12,7 @@
                         loadAll: false,
                         pageSize: 200,
                         onUpdate: callback || angular.noop,
-                        streamObjectType: 'job',
+                        streamObjectType: 'case_artifact_job',
                         filter: {
                             _parent: {
                                 _type: 'case_artifact',

diff --git a/ui/app/styles/main.css b/ui/app/styles/main.css
@@ -356,6 +356,21 @@ td.vmiddle {
     vertical-align: middle !important;
 }
 
+.observable-report pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;    
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #333;
+    color: #fff;
+}
+
 @-moz-keyframes spin {
     from {
         -moz-transform: rotate(0deg);

diff --git a/ui/app/views/app.html b/ui/app/views/app.html
@@ -177,7 +177,7 @@
             </div>
         </div>
     </nav>
-    <div class="container-fluid container-main">
+    <div class="container-fluid container-main">        
         <div ng-if="currentUser.id" ui-view></div>
     </div>
 </div>
diff --git a/ui/app/views/partials/admin/report-template-dialog.html b/ui/app/views/partials/admin/report-template-dialog.html
@@ -17,7 +17,7 @@ <h3 class="modal-title">{{vm.reportTemplate.id ? 'Update' : 'Add'}} report templ
         <div class="form-group">
             <label class="col-sm-2 control-label">Analyzer</label>
             <div class="col-sm-10">
-                <p class="form-control-static">{{vm.formData.analyzers[0]}}</p>                                
+                <p class="form-control-static">{{vm.formData.analyzers}}</p>                                
             </div>
         </div>
         <div class="form-group">

diff --git a/ui/app/views/partials/case/case.observables.item.html b/ui/app/views/partials/case/case.observables.item.html
@@ -27,7 +27,7 @@ <h4>
     <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" flavor="short" name="analyzerId" status="jobs[0].status"></report>
+                <report artifact="artifact" content="jobs[0].report.full" flavor="short" name="analyzerId" status="jobs[0].status"></report>
             </li>
         </ul>
     </div>

diff --git a/ui/app/views/partials/observables/details/artifact-details-analysers-report-template.html b/ui/app/views/partials/observables/details/artifact-details-analysers-report-template.html
@@ -1,6 +1,5 @@
 <div class="row">
 	<div class="col-md-10 col-md-offset-1">
-		<report content="report.content" name="report.template" status="report.status" flavor="long"
-			default="jsonhuman"></report>
+		<report content="report.content" name="report.template" status="report.status" flavor="long" default="jsonhuman"></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
@@ -1,31 +1,26 @@
 <table class="table table-hover">
     <thead>
         <th>Analyzer</th>
-        <th width="400">Last analysis</th>        
-        <th width="100">Action</th>
+        <th width="300">Last analysis</th>        
+        <th width="60">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>                        
+                </a>
                 {{::analyzerId}}<br> 
                 <small class="text-muted">{{::analyzers[analyzerId] | getField: 'description'}}</small>
             </td>
-            <td>
-                <div ng-if="jobs.length > 0" class="mb-s">                    
-                    <a 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>
-                        <span ng-show="!analyzers[analyzerId].showRows">Show more ({{jobs.length}} analysis)</span>
-                        <span ng-show="analyzers[analyzerId].showRows">Show less</span>
-                    </a>
-                </div>
-
+            <td>                
                 <ul class="list-unstyled">
                     <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="report.template=job.analyzerId; report.content=job.report; report.status=job.status" tooltip="View report">{{job.endDate | showDate}}</a>
+                        <a href ng-click="showReport(job)" tooltip="View report">{{(job.endDate || job.startDate) | showDate}}</a>
                     </li>
                 </ul>                
             </td>
@@ -40,55 +35,6 @@
     </tbody>
 </table>
 
-<!-- 
-<div class="row">
-    <div class="col-md-12" ng-init="analyzers[analyzerId].showRows=false;" ng-mouseenter="AnalyzerStyle={'background-color':'#F8F8FF'}" ng-mouseleave="AnalyzerStyle={'background-color':''}" ng-repeat="(analyzerId, jobs) in analyzerJobs" ng-style="AnalyzerStyle" style="font-size:0.90em">
-        <br>
-        <div class="row" ng-repeat="job in jobs" ng-show="analyzers[analyzerId].showRows || $first">
-
-            <div class="col-md-5 text-left">
-                <p>
-                    <a href ng-click="analyzers[analyzerId].showRows = !analyzers[analyzerId].showRows" ng-if="$first && !$last">
-                        <i class="fa" ng-class="{ true:'fa-minus-square-o', false:'fa-plus-square-o' }[analyzers[analyzerId].showRows]"></i>
-                    </a>
-                    <span ng-if="$first">
-                        {{analyzerId}}
-                        :
-                        {{getAnalyzerInfo(analyzerId) | getField: 'description'}}
-                    </span>
-                </p>
-            </div>
-
-            <div class="col-md-3 text-left">
-                <a href="" ng-click="report.template=job.analyzerId; report.content=job.report; report.status=job.status" tooltip="View report">{{job.endDate | showDate}}</a>
-            </div>
-
-            <div class="col-md-3 text-center">
-                <i class="glyphicon" ng-class="{ Failure:'glyphicon-warning-sign text-warning', Success:'glyphicon-ok text-success', InProgress:'fa fa-cog fa-spin'}[job.status]" style="font-size:16px"></i>
-            </div>
-
-            <div class="col-md-1 text-left">
-                <span class="btn btn-xs btn-warning" ng-click="runAnalyzer(analyzerId)" ng-if="$first" style="vertical-align:middle">
-                    <i class="glyphicon glyphicon-repeat"></i>
-                </span>
-            </div>
-        </div>
-
-        <div class="row" ng-if="jobs.length == 0" style="margin-bottom: 10px;">
-            <div class="col-md-5">
-                <span ng-bind="getAnalyzerInfo(analyzerId) | getField: 'description'"></span>
-            </div>
-            <div class="col-md-1 col-md-offset-6 text-left">
-                <span class="btn btn-xs btn-danger" ng-click="runAnalyzer(analyzerId)">
-                    <i class="glyphicon glyphicon-fire"></i>
-                </span>
-            </div>
-        </div>
-
-    </div>
-</div>
--->
-
 <div class="row vpad20">
     <div class="col-md-6 col-md-offset-3">
         <hr>
@@ -103,8 +49,9 @@
     </div>
 </div>
 
-<div class="row vpad10">
+<pre>{{report}}</pre>
+<div class="row observable-report vpad10" ng-if="report">
     <div class="col-md-12">
-        <report artifact="artifact" content="report.content" default="jsonhuman" flavor="long" name="report.template" status="report.status"></report>
+        <report artifact="artifact" content="report.content.full || report.content" default="jsonhuman" flavor="long" name="report.template" status="report.status"></report>
     </div>
 </div>
diff --git a/ui/app/views/reports/long.html b/ui/app/views/reports/long.html
@@ -1 +1 @@
-Default Long Tpl
+<pre>{{content | json}}</pre>
diff --git a/ui/bower.json b/ui/bower.json
@@ -44,7 +44,8 @@
     "angular-markdown-editor-ghiscoding": "^1.0.9",
     "angular-highlightjs": "^0.6.2",
     "highlight.js.origin": "^9.7.0",
-    "angular-ui-ace": "bower"
+    "angular-ui-ace": "bower",
+    "angular-page-loader": "*"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.8"

diff --git a/ui/test/karma.conf.js b/ui/test/karma.conf.js
@@ -65,6 +65,7 @@ module.exports = function(config) {
       'bower_components/bootstrap-markdown/js/bootstrap-markdown.js',
       'bower_components/angular-markdown-editor-ghiscoding/src/angular-markdown-editor.js',
       'bower_components/angular-ui-ace/ui-ace.js',
+      'bower_components/angular-page-loader/dist/angular-page-loader.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       "bower_components/cryptojslib/components/core-min.js",