#375 Refine the case templates section to allow setting default value…

…s to custom fields
TheHive-Project · Nov 17, 2017 · d5a762f · d5a762f
1 parent 2ddeaf9
commit d5a762f
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 72 deletions.
diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -169,6 +169,9 @@ angular.module('thehive', ['ngAnimate', 'ngMessages', 'ngSanitize', 'ui.bootstra
                 resolve: {
                     templates: function(CaseTemplateSrv) {
                         return CaseTemplateSrv.list();
+                    },
+                    fields: function(CustomFieldsCacheSrv){
+                        return CustomFieldsCacheSrv.all()
                     }
                 }
             })

diff --git a/ui/app/scripts/controllers/admin/AdminCaseTemplatesCtrl.js b/ui/app/scripts/controllers/admin/AdminCaseTemplatesCtrl.js
@@ -2,14 +2,14 @@
     'use strict';
 
     angular.module('theHiveControllers').controller('AdminCaseTemplatesCtrl',
-        function($scope, $uibModal, CaseTemplateSrv, NotificationSrv, UtilsSrv, ListSrv, MetricsCacheSrv, CustomFieldsCacheSrv, UserSrv, UserInfoSrv, ModalUtilsSrv, templates) {
+        function($scope, $uibModal, CaseTemplateSrv, NotificationSrv, UtilsSrv, ListSrv, MetricsCacheSrv, CustomFieldsCacheSrv, UserSrv, UserInfoSrv, ModalUtilsSrv, templates, fields) {
             var self = this;
 
             self.templates = templates;
             self.task = '';
             self.tags = [];
             self.metrics = [];
-            self.fields = [];
+            self.fields = fields || [];
             self.templateCustomFields = [];
             self.templateMetrics = [];
             self.templateIndex = -1;
@@ -22,14 +22,15 @@
             var getTemplateCustomFields = function(customFields) {
                 var result = [];
 
-                result = _.pluck(_.sortBy(_.map(customFields, function(definition, name){
+                result = _.sortBy(_.map(customFields, function(definition, name){
                     return {
                         name: name,
-                        order: definition.order
+                        order: definition.order,
+                        value: definition[self.fields[name].type]
                     }
                 }), function(item){
                     return item.order;
-                }), 'name');
+                });
 
                 return result;
             }
@@ -47,6 +48,12 @@
                 return result;
             }
 
+            self.dateOptions = {
+                'closeOnDateSelection': true,
+                formatYear: 'yyyy',
+                startingDay: 1
+            };
+
             self.sortableOptions = {
                 handle: '.drag-handle',
                 stop: function(/*e, ui*/) {
@@ -71,10 +78,6 @@
                 MetricsCacheSrv.all().then(function(metrics){
                     self.metrics = metrics;
                 });
-
-                CustomFieldsCacheSrv.all().then(function(fields){
-                    self.fields = fields;
-                });
             };
             self.loadCache();
 
@@ -208,16 +211,20 @@
                 //delete self.template.metrics[metricName];
             };
 
-            self.addCustomField = function(field) {
-                if(self.templateCustomFields.indexOf(field.reference) === -1) {
-                    self.templateCustomFields.push(field.reference);
-                } else {
-                    NotificationSrv.log('The custom field [' + field.name + '] has already been added to the template', 'warning');
-                }
+            self.addCustomFieldRow = function() {
+                self.templateCustomFields.push({
+                    name: null,
+                    order: self.templateCustomFields.length + 1,
+                    value: null
+                });
             };
 
-            self.removeCustomField = function(fieldName) {
-                self.templateCustomFields = _.without(self.templateCustomFields, fieldName);
+            self.removeCustomField = function(field) {
+                self.templateCustomFields = _.without(self.templateCustomFields, field);
+            };
+
+            self.updateCustomField = function(field, value) {
+                field.value = value;
             };
 
             self.deleteTemplate = function() {
@@ -239,12 +246,13 @@
 
                 // Set custom fields
                 self.template.customFields = {};
-                _.each(self.templateCustomFields, function(value, index) {
-                    var fieldDef = self.fields[value];
+                _.each(self.templateCustomFields, function(cf, index) {
+                    var fieldDef = self.fields[cf.name];
+                    var value = (fieldDef.type === 'date' && cf.value) ? moment(cf.value).valueOf() : (cf.value || null)
 
-                    self.template.customFields[value] = {};
-                    self.template.customFields[value][fieldDef.type] = null;
-                    self.template.customFields[value].order = index + 1;
+                    self.template.customFields[cf.name] = {};
+                    self.template.customFields[cf.name][fieldDef.type] = value;
+                    self.template.customFields[cf.name].order = index + 1;
                 });
 
                 self.template.metrics = {};

diff --git a/ui/app/scripts/directives/dt-picker.js b/ui/app/scripts/directives/dt-picker.js
@@ -9,7 +9,8 @@
             },
             templateUrl: 'views/directives/dt-picker.html',
             compile: function(element) {
-                $(element).find('.input-datetime').datetimepicker({
+                var dtEl = $(element).find('.input-datetime');
+                dtEl.datetimepicker({
                     format: 'dd-mm-yyyy',
                     weekStart: 1,
                     startView: 2,

diff --git a/ui/app/styles/case-template.css b/ui/app/styles/case-template.css
@@ -1,4 +1,5 @@
-.metric-item {
+.metric-item,
+.customfield-item {
     background-color: #f9f9f9;
     padding: 10px;
     margin-bottom: 5px;

diff --git a/ui/app/views/directives/dt-picker.html b/ui/app/views/directives/dt-picker.html
@@ -1,5 +1,5 @@
 <div class="input-group">
-    <input class="input-datetime form-control" ng-model="dateValue" type="datetime" placeholder="{{placeholder}}"/>
+    <input class="input-datetime form-control" ng-model="dateValue" type="text" placeholder="{{placeholder}}"/>
     <span class="input-group-btn">
         <button class="btn btn-default" type="button" ng-click="clear()"><i class="text-danger fa fa-times"></i></button>
     </span>

diff --git a/ui/app/views/partials/admin/case-template/custom-fields.html b/ui/app/views/partials/admin/case-template/custom-fields.html
@@ -1,42 +1,46 @@
-<h4 class="vpad10 text-primary">
-    Custom fields ({{$vm.keys($vm.template.customFields).length}})
-    <span uib-dropdown class="pull-right">
-        <a href class="dropdown-toggle" uib-dropdown-toggle>
-            <i class="fa fa-plus"></i>
-            Add custom field
-            <span class="caret"></span>
-        </a>
-        <ul class="dropdown-menu" uib-dropdown-menu>
-            <li ng-repeat="(key, value) in $vm.fields">
-                <a ng-click="$vm.addCustomField(value)">{{value.name}}</a>
-            </li>
-        </ul>
-    </span>
-</h4>
+<div class="case-template-section">
+    <h4 class="vpad10 text-primary">
+        Custom fields ({{$vm.keys($vm.template.customFields).length}})
+    </h4>
 
-<div ng-if="$vm.templateCustomFields.length !== 0" ng-init="isCollapsed=true" ui-sortable="$vm.sortableFields" ng-model="$vm.templateCustomFields">
-    <div class="panel panel-default" ng-repeat="m in $vm.templateCustomFields" ng-init="description=fields[m].description">
-        <div class="panel-heading">
-            <span class="drag-handle text-primary clickable mr-xxs">
-                <i class="fa fa-bars"></i>
-            </span>
-            <a href ng-click="isCollapsed=!isCollapsed">
-                <i class="fa" ng-class="{'fa-caret-down': isCollapsed, 'fa-caret-up': !isCollapsed}"></i>
-            </a>
-            <span class="hpad5">{{$vm.fields[m].name}}</span>
-            <span class="pull-right">
-                <a class="text-danger" href ng-click="$vm.removeCustomField(m)">
-                    <i class="fa fa-times"></i>&nbsp;Delete</a>
-            </span>
+    <div class="empty-message" ng-if="$vm.templateCustomFields.length === 0">
+        No custom fields have been added. <a href class="mr-xxxs" ng-click="$vm.addCustomFieldRow()">Add a custom field</a>
+    </div>
+
+    <div ng-if="$vm.templateCustomFields.length !== 0" ui-sortable="$vm.sortableFields" ng-model="$vm.templateCustomFields">
+        <div class="customfield-item" ng-repeat="cf in $vm.templateCustomFields">
+            <div class="row">
+                <div class="col-sm-12">
+                    <span class="drag-handle text-primary clickable mr-xxs">
+                        <i class="fa fa-bars"></i>
+                    </span>
+                    <a href ng-click="$vm.removeCustomField(cf)"><span class="pull-right text-danger"><i class="fa fa-trash"></i> Delete</span></a>
+                </div>
+                <div class="col-sm-6">
+                    <select class="form-control" ng-model="cf.name" ng-options="item.reference as item.name for (key, item) in $vm.fields" required></select>
+                </div>
+                <div class="col-sm-6" ng-if="$vm.fields[cf.name].options.length > 0">
+                    <select class="form-control" ng-model="cf.value" ng-options="v for v in $vm.fields[cf.name].options">
+                        <option value=""></option>
+                    </select>
+                </div>
+                <div class="col-sm-6" ng-if="$vm.fields[cf.name].options.length === 0" ng-switch="$vm.fields[cf.name].type">
+                    <input ng-switch-when="string" type="text" class="form-control" ng-model="cf.value">
+                    <input ng-switch-when="number" type="number" class="form-control" ng-model="cf.value">
+                    <select ng-switch-when="boolean" class="form-control" ng-model="cf.value" ng-options="v for v in [true, false]">
+                        <option value=""></option>
+                    </select>
+                    <dt-picker ng-switch-when="date" date="cf.value"></dt-picker>
+                </div>
+                <div class="col-sm-12">
+                    <i class="pl-xxss fa fa-question-circle" aria-hidden="true"></i> <small>{{$vm.fields[cf.name].description || 'No description'}}</small>
+                </div>
+            </div>
         </div>
-        <div class="panel-body" ng-hide="isCollapsed">
-            <p ng-show="description != ''">{{description}}</p>
-            <p class="text-warning" ng-show="!description || description===''">
-                <em>No description specified</em>
-            </p>
+        <div ng-if="$vm.templateCustomFields.length > 0" class="mv-xs">
+            <a href ng-click="$vm.addCustomFieldRow()">
+                <i class="fa fa-plus"></i> Add a custom field
+            </a>
         </div>
     </div>
 </div>
-<div class="empty-message" ng-if="$vm.templateCustomFields.length === 0">
-    No custom fields have been added
-</div>
diff --git a/ui/app/views/partials/admin/case-template/metrics.html b/ui/app/views/partials/admin/case-template/metrics.html
@@ -7,28 +7,25 @@ <h4 class="vpad10 text-primary">
         No metrics have been added. <a href class="mr-xxxs" ng-click="$vm.addMetricRow()">Add a metric</a>
     </div>
 
+
     <div ng-if="$vm.templateMetrics.length !== 0">
         <div class="metric-item" ng-repeat="m in $vm.templateMetrics">
             <div class="row">
+                <div class="col-sm-12">
+                    <a href ng-click="$vm.removeMetric(m)"><span class="pull-right text-danger"><i class="fa fa-trash"></i> Delete</span></a>
+                </div>
                 <div class="col-sm-6">
                     <select class="form-control" ng-model="m.metric" ng-options="item.name as item.name for (m, item) in $vm.metrics" required></select>
                 </div>
                 <div class="col-sm-6">
-                    <div class="input-group">
-                        <input type="number" class="form-control" ng-model="m.value">
-                        <span class="input-group-btn">
-                            <button class="btn btn-default" type="button" ng-click="$vm.removeMetric(m)">
-                                <i class="fa fa-times text-danger"></i>
-                            </button>
-                        </span>
-                    </div>
+                    <input type="number" class="form-control" ng-model="m.value">
                 </div>
                 <div class="col-sm-12">
                     <i class="pl-xxss fa fa-question-circle" aria-hidden="true"></i> <small>{{$vm.metrics[m.metric].description || 'No description'}}</small>
                 </div>
             </div>
         </div>
-        <div ng-if="$vm.keys($vm.template.metrics).length > 0" class="mv-xs">
+        <div ng-if="$vm.templateMetrics.length > 0" class="mv-xs">
             <a href ng-click="$vm.addMetricRow()">
                 <i class="fa fa-plus"></i> Add a metric
             </a>

diff --git a/ui/bower.json b/ui/bower.json
@@ -25,7 +25,7 @@
     "ng-csv": "~0.3.6",
     "ng-tags-input": "~3.1.1",
     "roboto-fontface": "~0.5.0",
-    "smalot-bootstrap-datetimepicker": "2.3.10",
+    "smalot-bootstrap-datetimepicker": "2.4.4",
     "underscore": "~1.8.3",
     "cryptojslib": "~3.1.2",
     "angular-ui-notification": "0.3.6",