Merge pull request #49 from istresearch/P4-1528

P4-1528 - Rule Matcher - Popover Functionality

index.js

@@ -5,8 +5,8 @@ export default function(kibana) {
     uiExports: {
       hacks: [
         'plugins/kibana_object_format/hacks/field_mapper_hack',
-        'plugins/kibana_object_format/hacks/custom_filter_bootstrap_hack',
-        'plugins/kibana_object_format/hacks/object_filter_hack',
+        'plugins/kibana_object_format/hacks/custom_filter_bootstrap',
+        'plugins/kibana_object_format/hacks/object_filter',
       ],
       fieldFormats: ['plugins/kibana_object_format/field_formats/object/register'],
       uiSettingDefaults: {

package.json

@@ -19,6 +19,9 @@
     "test:browser": "plugin-helpers test:browser",
     "build": "plugin-helpers build"
   },
+  "dependencies": {
+    "tippy.js": "~6.2.2"
+  },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "link:../../packages/eslint-config-kibana",
     "@elastic/eslint-import-resolver-kibana": "link:../../packages/kbn-eslint-import-resolver-kibana",

public/common/jquery-plugins/observer.js

@@ -1,3 +1,5 @@
+// https://github.com/rkusa/jquery-observe - A simple mutation observer for jQuery.
+// aaxelrod - added disconnect functionality to jquery $.fn 
 !function($) {
     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
     var Observer = function(target, selector, onAdded, onRemoved) {
@@ -64,4 +66,15 @@
       this.data('contracts', contracts)
       return this
     }
+
+    // aaxelrod - Added custom disconnect. 
+    $.fn.disconnect = function() {
+      var contracts = this.data('contracts');
+      if (contracts && contracts.length) {
+        contracts.forEach(function(contract) {
+          contract.observer.disconnect();
+        });
+      }
+      return this;
+    }
   }(window.Zepto || window.jQuery)

public/field_formats/object/cleanFieldTemplate.js

@@ -0,0 +1,69 @@
+import _ from 'lodash';
+import '../../common/jquery-plugins/observer';
+
+const cleanTemplate = showPopover => {
+  const clean = showPopover => {
+    $(`.collection-table`)
+      .closest(`td`)
+      .children(`.euiToolTipAnchor`)
+      .remove();
+
+    $(`.collection-table`)
+      .closest(`.kbnDocTableCell__dataField`)
+      .addClass('white-space-normal');
+
+    $(`.collection-table`)
+      .closest(`.kbnDocViewer__value`)
+      .addClass('white-space-normal');
+
+    $(`.collection-table-no-filter`)
+      .closest('.kbnDocTableCell__dataField')
+      .children('.kbnDocTableCell__filter')
+      .empty();
+
+    $(`.collection-table-no-filter`)
+      .closest(`tr[data-test-subj]`)
+      .children('.kbnDocViewer__buttons')
+      .children('span')
+      .children(`button:not([data-test-subj='toggleColumnButton'])`)
+      .attr('disabled', true);
+
+    if (showPopover) {
+      $(`.enable-filter-popover`)
+        .closest('.kbnDocTableCell__dataField')
+        .children('.kbnDocTableCell__filter')
+        .children(`.kbnDocTableRowFilterButton`)
+        .addClass('tippy-filter-button');
+
+      $(`.enable-filter-popover`)
+        .closest(`tr[data-test-subj]`)
+        .children('.kbnDocViewer__buttons')
+        .children('span')
+        .children(`button:not([data-test-subj='toggleColumnButton'])`)
+        .closest(`.euiToolTipAnchor`)
+        .addClass('tippy-filter-button');
+    }
+  };
+
+  $('#kibana-app').observe(
+    '.kbnDocTableCell__dataField',
+    _.throttle(() => {
+      clean(showPopover);
+    }, 1000)
+  );
+
+  $('#kibana-app').observe(
+    '.kbnDocViewerTable tr',
+    _.throttle(() => {
+      clean(showPopover);
+    }, 1000)
+  );
+};
+
+export default (showPopover = false) => {
+  setTimeout(() => {
+    if ($('.application.tab-discover').length) {
+      cleanTemplate(showPopover);
+    }
+  }, 0);
+};

public/field_formats/object/constants.js

@@ -10,6 +10,7 @@ export const DEFAULT_VALUES = {
     path: null, // Dot notated location of the value within the object, relative to basePath
     type: 'text',
     filtered: true, // To enable the filtering on cell click
+    dHashField: null,
     filterField: null, // If the data is analyzed, and there is a keyword subfield we can use for the filter
     height: null, // Image dimension in px
     width: null, // Image dimension in px

public/field_formats/object/editor.js

@@ -4,6 +4,7 @@ import {
   EuiButton,
   EuiSpacer,
   EuiFieldText,
+  EuiTextArea,
   EuiFormRow,
   EuiFieldNumber,
   EuiSelect,
@@ -126,6 +127,25 @@ export class ObjectFormatEditor extends DefaultFormatEditor {
           );
         },
       },
+      {
+        field: 'dHashField',
+        name: 'Hash Field',
+        render: (value, item) => {
+          return (
+            <EuiFieldText
+              value={value}
+              onChange={e => {
+                this.onFieldChange(
+                  {
+                    dHashField: e.target.value,
+                  },
+                  item.index
+                );
+              }}
+            />
+          );
+        },
+      },
       {
         field: 'filterField',
         name: 'Filter Field',
@@ -268,6 +288,16 @@ export class ObjectFormatEditor extends DefaultFormatEditor {
           Add Field
         </EuiButton>
         <EuiSpacer size="l" />
+        <EuiFormRow label="Image Similarity Script (Painless)" helpText="(optional)">
+          <EuiTextArea
+            fullWidth
+            value={formatParams.similarityScript}
+            onChange={e => {
+              this.onChange({ similarityScript: e.target.value });
+            }}
+          />
+        </EuiFormRow>
+        <EuiSpacer size="l" />
       </Fragment>
     );
   }

public/field_formats/object/object.js

@@ -3,8 +3,8 @@ import { FieldFormat } from '../../../../../src/plugins/data/public';
 import { getHighlightHtml } from '../../common/highlight';
 import { lodashOopMixin } from '../../common/lodash-mixins/oop';
 import { lodashGetPluckMixin } from '../../common/lodash-mixins/get_pluck';
-import cleanTemplate from '../../common/clean-template';
 import { DEFAULT_VALUES, ID, TITLE, FIELD_TYPE } from './constants';
+import cleanFieldTemplate from './cleanFieldTemplate';
 import format_html from './templates/object_format.html';
 import image_html from './templates/object_image.html';
 import link_html from './templates/object_link.html';
@@ -14,7 +14,7 @@ import './object.less';
 
 lodashOopMixin(_);
 lodashGetPluckMixin(_);
-cleanTemplate(false);
+cleanFieldTemplate(true);
 
 const vis_template = _.template(format_html);
 const image_template = _.template(image_html);
@@ -37,6 +37,7 @@ export class ObjectFormat extends FieldFormat {
       fieldType: null, // populated by editor, see controller
       basePath: null, // If multiple fields should be grouped, this is the common parent
       limit: null, // // If basePath is an array, this is the max we will show
+      similarityScript: null,
       fields: [{ ...DEFAULT_VALUES }],
     };
   }

public/field_formats/object/object.less

@@ -24,4 +24,13 @@
     float: left;
     overflow: hidden;
     margin: 5px;
-}
+}
+
+.truncate-by-height {
+    overflow: auto !important;
+    scrollbar-width: none;
+}
+
+.collection-table {
+    max-width: 350px;
+}

public/field_formats/object/templates/object_format.html

@@ -1,7 +1,7 @@
 <% if (!filtered) { %>
-<table class="collection-table collection-table-no-filter collection-object-table <%= uid %>">
+<table class="collection-table collection-table-no-filter collection-object-table enable-filter-popover <%= uid %>">
 <% } else { %>
-<table class="collection-table  collection-object-table <%= uid %>">
+<table class="collection-table  collection-object-table  enable-filter-popover <%= uid %>">
 <% } %>
     <tbody>
 <%