#1246 Display the custom fields using a column layout in case details…

… page ans alert preview pane
TheHive-Project · May 5, 2020 · 31de3fe · 31de3fe
1 parent d4872a3
commit 31de3fe
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 114 deletions.
diff --git a/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js b/frontend/app/scripts/components/organisation/OrgCaseTemplateListCmp.js
@@ -40,9 +40,7 @@
                                 type: type
                             };
                         }),
-                        function(item) {
-                            return item.order;
-                        }
+                        'order'
                     );
 
                     return result;

diff --git a/frontend/app/scripts/controllers/alert/AlertEventCtrl.js b/frontend/app/scripts/controllers/alert/AlertEventCtrl.js
@@ -37,9 +37,7 @@
                         name: name,
                         order: definition.order
                     };
-                }), function(item){
-                    return item.order;
-                }), 'name');
+                }), 'order'), 'name');
 
                 return result;
             };

diff --git a/frontend/app/scripts/controllers/case/CaseCloseModalCtrl.js b/frontend/app/scripts/controllers/case/CaseCloseModalCtrl.js
@@ -37,10 +37,8 @@
                     return {
                         name: name,
                         order: definition.order
-                    }
-                }), function(item){
-                    return item.order;
-                }), 'name');
+                    };
+                }), 'order'), 'name');
 
                 return result;
             };

diff --git a/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js b/frontend/app/scripts/controllers/case/CaseDetailsCtrl.js
@@ -90,9 +90,7 @@
                     name: name,
                     order: definition.order
                 };
-            }), function(item){
-                return item.order;
-            }), 'name');
+            }), 'order'), 'name');
 
             return result;
         };

diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
@@ -315,6 +315,16 @@ ul.observable-reports-summary li {
     width: 200px !important;
 }
 
+.case-custom-fields dt {
+    background-color: #f9f9f9;
+    padding-left: 5px;
+    border-left: 2px solid #337ab7;
+}
+
+.case-custom-fields dd {
+    margin-left: 205px;
+}
+
 .scrollable {
     height: 100%;
     overflow: auto;

diff --git a/frontend/app/views/directives/updatable-date.html b/frontend/app/views/directives/updatable-date.html
@@ -1,5 +1,5 @@
 <span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-    <span ng-if="value!==null && value !==''" style="vertical-align:top" class="updatable-value" >{{value | showDate}}</span>
+    <span ng-if="value!==null && value !==''" style="vertical-align:top" class="updatable-value" >{{value | shortDate}}</span>
     <span ng-if="value===null || value ===''" style="vertical-align: top; white-space: pre-wrap" class="updatable-value text-warning"><em>Not Specified</em></span>
     <small ng-show="active">
         <a style="cursor: pointer;" target="_self" tooltip-popup-delay='500' uib-tooltip="edit">

diff --git a/frontend/app/views/partials/alert/custom.fields.html b/frontend/app/views/partials/alert/custom.fields.html
@@ -1,63 +1,69 @@
-<div>
+<div class="case-custom-fields">
     <div ng-if="!dialog.orderedFields || dialog.orderedFields.length === 0">
         <em>No aditional information have been specified</em>
     </div>
 
     <div ng-if="dialog.canEdit">
-        <dl class="dl-horizontal clear"
-            ng-repeat="k in dialog.orderedFields"
-            ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
-            <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-            <dd ng-if="fieldDef.options.length > 0">
-                <updatable-select
-                    options="fieldDef.options"
-                    on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
-            </dd>
+        <div ng-repeat="k in dialog.orderedFields track by $index" ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
+            <div class="clearfix" ng-if="$index % 2 == 0"></div>
+            <div class="col-xs-6">
+                <dl class="dl-horizontal clear">
+                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
+                    <dd ng-if="fieldDef.options.length > 0">
+                        <updatable-select
+                            options="fieldDef.options"
+                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
+                    </dd>
 
-            <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
-                <updatable-simple-text ng-switch-when="string"
-                    input-type="text"
-                    on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                    <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
+                        <updatable-simple-text ng-switch-when="string"
+                            input-type="text"
+                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
 
-                <updatable-date ng-switch-when="date"
-                    on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
+                        <updatable-date ng-switch-when="date"
+                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
 
-                <updatable-simple-text ng-switch-when="integer"
-                    input-type="integer"
-                    on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                        <updatable-simple-text ng-switch-when="integer"
+                            input-type="integer"
+                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
 
-                <updatable-simple-text ng-switch-when="float"
-                   input-type="float"
-                   on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                   value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                        <updatable-simple-text ng-switch-when="float"
+                           input-type="float"
+                           on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                           value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
 
-                <updatable-boolean ng-switch-when="boolean"
-                    input-type="number"
-                    on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
-                    value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
+                        <updatable-boolean ng-switch-when="boolean"
+                            input-type="number"
+                            on-update="dialog.updateField(dialog.getCustomFieldName(fieldDef), newValue)"
+                            value="dialog.event.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
 
-                <span ng-switch-default>Not Editable</span>
-            </dd>
-        </dl>
+                        <span ng-switch-default>Not Editable</span>
+                    </dd>
+                </dl>
+            </div>
+        </div>
     </div>
 
-    <div ng-if="!dialog.canEdit">        
-        <dl class="dl-horizontal clear"
-            ng-repeat="k in dialog.orderedFields"
-            ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
-            <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-            <dd ng-switch="fieldDef.type">
-                <span ng-switch-when="date">{{dialog.event.customFields[fieldDef.reference][fieldDef.type] | showDate}}</span>
-                <span ng-switch-default>
-                    {{dialog.event.customFields[fieldDef.reference][fieldDef.type]}}
-                    <em class="text-warning" ng-if="!dialog.event.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
-                </span>
-            </dd>
-        </dl>
+    <div ng-if="!dialog.canEdit">
+        <div ng-repeat="k in dialog.orderedFields track by $index" ng-init="fieldDef = dialog.customFieldsCache.getCache(k);">
+            <div class="clearfix" ng-if="$index % 2 == 0"></div>
+            <div class="col-xs-6">
+                <dl class="dl-horizontal clear">
+                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
+                    <dd ng-switch="fieldDef.type">
+                        <span ng-switch-when="date">{{dialog.event.customFields[fieldDef.reference][fieldDef.type] | shortDate}}</span>
+                        <span ng-switch-default>
+                            {{dialog.event.customFields[fieldDef.reference][fieldDef.type]}}
+                            <em class="text-warning" ng-if="!dialog.event.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
+                        </span>
+                    </dd>
+                </dl>
+            </div>
+        </div>
     </div>
 
 

diff --git a/frontend/app/views/partials/case/case.details.html b/frontend/app/views/partials/case/case.details.html
@@ -93,7 +93,7 @@ <h4 class="vpad10 text-primary">Summary</h4>
     </div>
 </div>
 <div class="row">
-    <div class="col-sm-8">
+    <div class="col-xs-12">
         <ng-include src="'views/partials/case/details/custom.fields.html'"></ng-include>
     </div>
 </div>

diff --git a/frontend/app/views/partials/case/details/custom.fields.html b/frontend/app/views/partials/case/details/custom.fields.html
@@ -17,61 +17,62 @@ <h4 class="vpad10 text-primary">
         <em>No additional information have been specified</em>
     </div>
 
-    <div ng-if="canEdit">
-        <dl class="dl-horizontal clear"
-            ng-repeat="k in orderedFields"
-            ng-init="fieldDef = customFieldsCache[k];">
-            <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-            <dd ng-if="fieldDef.options.length > 0">
-                <updatable-select
-                    options="fieldDef.options"
-                    on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                    value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
-            </dd>
-
-            <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
-                <updatable-simple-text ng-switch-when="string"
-                    input-type="text"
-                    on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                    value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                <updatable-date ng-switch-when="date"
-                    on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                    value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
-
-                <updatable-simple-text ng-switch-when="integer"
-                    input-type="integer"
-                    on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                    value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                <updatable-simple-text ng-switch-when="float"
-                   input-type="float"
-                   on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                   value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
-
-                <updatable-boolean ng-switch-when="boolean"
-                    input-type="number"
-                    on-update="updateField(getCustomFieldName(fieldDef), newValue)"
-                    value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
-
-                <span ng-switch-default>Not Editable</span>
-            </dd>
-        </dl>
+    <div ng-if="canEdit" class="row">
+        <div ng-repeat="k in orderedFields track by $index" ng-init="fieldDef = customFieldsCache[k];">
+            <div class="clearfix" ng-if="$index % 3 == 0"></div>
+            <div class="col-xs-4">
+                <dl class="dl-horizontal">
+                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
+                    <dd ng-if="fieldDef.options.length > 0">
+                        <updatable-select
+                            options="fieldDef.options"
+                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-select>
+                    </dd>
+                    <dd ng-if="fieldDef.options.length === 0" ng-switch="fieldDef.type">
+                        <updatable-simple-text ng-switch-when="string"
+                            input-type="text"
+                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                        <updatable-date ng-switch-when="date"
+                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-date>
+                        <updatable-simple-text ng-switch-when="integer"
+                            input-type="integer"
+                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                        <updatable-simple-text ng-switch-when="float"
+                           input-type="float"
+                           on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                           value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-simple-text>
+                        <updatable-boolean ng-switch-when="boolean"
+                            input-type="number"
+                            on-update="updateField(getCustomFieldName(fieldDef), newValue)"
+                            value="caze.customFields[fieldDef.reference][fieldDef.type]"></updatable-boolean>
+                        <span ng-switch-default>Not Editable</span>
+                    </dd>
+                </dl>
+            </div>
+        </div>
     </div>
 
     <div ng-if="!canEdit">
-        <dl class="dl-horizontal clear"
-            ng-repeat="k in orderedFields"
-            ng-init="fieldDef = customFieldsCache[k];">
-            <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
-            <dd ng-switch="fieldDef.type">
-                <span ng-switch-when="date">{{caze.customFields[fieldDef.reference][fieldDef.type] | showDate}}</span>
-                <span ng-switch-default>
-                    {{caze.customFields[fieldDef.reference][fieldDef.type]}}
-                    <em class="text-warning" ng-if="!caze.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
-                </span>
-            </dd>
-        </dl>
+        <div ng-repeat="k in orderedFields track by $index" ng-init="fieldDef = customFieldsCache[k];">
+            <div class="clearfix" ng-if="$index % 3 == 0"></div>
+            <div class="col-xs-4">
+                <dl class="dl-horizontal clear">
+                    <dt class="pull-left" uib-tooltip="{{fieldDef.description}}">{{fieldDef.name}}</dt>
+                    <dd ng-switch="fieldDef.type">
+                        <span ng-switch-when="date">{{caze.customFields[fieldDef.reference][fieldDef.type] | shortDate}}</span>
+                        <span ng-switch-default>
+                            {{caze.customFields[fieldDef.reference][fieldDef.type]}}
+                            <em class="text-warning" ng-if="!caze.customFields[fieldDef.reference][fieldDef.type]">Not Specified</em>
+                        </span>
+                    </dd>
+                </dl>
+            </div>
+        </div>
+
     </div>
 
 </div>