Browse Source

HUE-8247 [dashboard] Add a field quick lookup icon on the metrics form

Also avoid excessive blinking of dimensions forms
Enrico Berti 7 years ago
parent
commit
9cd72a41b8

File diff suppressed because it is too large
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


+ 1 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -878,6 +878,7 @@ var Collection = function (vm, collection) {
       }));
       }));
     }
     }
 
 
+    facet.isEditing = ko.observable(false);
     facet.isAdding = ko.observable(false);
     facet.isAdding = ko.observable(false);
 
 
     if (facet.properties.facets) { // Sub facet
     if (facet.properties.facets) { // Sub facet

+ 7 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -545,6 +545,9 @@
     .move-dimension {
     .move-dimension {
       cursor: move;
       cursor: move;
     }
     }
+    &.is-editing {
+      opacity: 1 !important;
+    }
     &:hover {
     &:hover {
       .action-icon {
       .action-icon {
         opacity: 1;
         opacity: 1;
@@ -588,6 +591,10 @@
       margin-top: 4px;
       margin-top: 4px;
       margin-right: 20px;
       margin-right: 20px;
     }
     }
+    .context-popover-icon {
+      margin-left: -20px;
+      margin-right: 20px;
+    }
   }
   }
 
 
   .html-form {
   .html-form {

+ 10 - 3
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -593,9 +593,9 @@ ${ dashboard.layout_skeleton(suffix='search') }
   <!-- /ko -->
   <!-- /ko -->
 
 
   <!-- ko if: !$parents[1].isLoading() || widgetType() == 'hit-widget' -->
   <!-- ko if: !$parents[1].isLoading() || widgetType() == 'hit-widget' -->
-  <div class="edit-dimensions">
+  <div class="edit-dimensions" data-bind="css: { 'is-editing': isEditing }">
     <div data-bind="sortable: { data: properties.facets, allowDrop: false, options: { axis: 'x', handle: '.move-dimension', tolerance: 'pointer'}}" class="inline-block">
     <div data-bind="sortable: { data: properties.facets, allowDrop: false, options: { axis: 'x', handle: '.move-dimension', tolerance: 'pointer'}}" class="inline-block">
-      <div class="badge dimensions-badge-container" data-bind="css: { 'is-editing': isEditing }, click: function(){ $parent.isAdding(false); $parent.properties.facets().forEach(function(f){ f.isEditing(false); }); isEditing(true); }" title="${ _('Edit') }">
+      <div class="badge dimensions-badge-container" data-bind="css: { 'is-editing': isEditing }, click: function(){ $parent.isEditing(true); $parent.isAdding(false); $parent.properties.facets().forEach(function(f){ f.isEditing(false); }); isEditing(true); }" title="${ _('Edit') }">
         <span data-bind="text: getPrettyMetric($data)"></span>
         <span data-bind="text: getPrettyMetric($data)"></span>
         <span class="badge badge-info dimensions-badge" data-bind="text: field, attr: { 'title': field }"></span>
         <span class="badge badge-info dimensions-badge" data-bind="text: field, attr: { 'title': field }"></span>
         <!-- ko if: aggregate.function() != 'field' && aggregate.metrics && $parent.widgetType() != 'hit-widget' -->
         <!-- ko if: aggregate.function() != 'field' && aggregate.metrics && $parent.widgetType() != 'hit-widget' -->
@@ -610,7 +610,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
       </div>
       </div>
     </div>
     </div>
     <div class="badge dimensions-badge-container dimensions-badge-container-add" data-bind="css: { 'is-adding': isAdding }, visible: properties.facets().length < 15 && widgetType() != 'hit-widget'">
     <div class="badge dimensions-badge-container dimensions-badge-container-add" data-bind="css: { 'is-adding': isAdding }, visible: properties.facets().length < 15 && widgetType() != 'hit-widget'">
-      <div class="action-icon" data-bind="click: function(){ isAdding(true); properties.facets().forEach(function(f){ f.isEditing(false); });  }"><i class="fa fa-plus"></i> ${ _('Add') }</div>
+      <div class="action-icon" data-bind="click: function(){ isEditing(true); isAdding(true); properties.facets().forEach(function(f){ f.isEditing(false); });  }"><i class="fa fa-plus"></i> ${ _('Add') }</div>
       <!-- ko if: isAdding -->
       <!-- ko if: isAdding -->
         <div class="metric-form" data-bind="template: { name: 'metric-form', data: properties.facets_form }"></div>
         <div class="metric-form" data-bind="template: { name: 'metric-form', data: properties.facets_form }"></div>
       <!-- /ko -->
       <!-- /ko -->
@@ -2181,6 +2181,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
 <script type="text/html" id="metric-form">
 <script type="text/html" id="metric-form">
     <!-- ko if: typeof isEditing !== 'undefined' && isEditing() -->
     <!-- ko if: typeof isEditing !== 'undefined' && isEditing() -->
     <div>
     <div>
+
       <!-- ko if: typeof $parents[0].isAdding === 'undefined' || !$parents[0].isAdding() -->
       <!-- ko if: typeof $parents[0].isAdding === 'undefined' || !$parents[0].isAdding() -->
       <a href="javascript:void(0)" data-bind="toggle: isEditing" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
       <a href="javascript:void(0)" data-bind="toggle: isEditing" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
       <!-- /ko -->
       <!-- /ko -->
@@ -2196,6 +2197,11 @@ ${ dashboard.layout_skeleton(suffix='search') }
 
 
       <!-- ko if: $data.function() != 'formula' -->
       <!-- ko if: $data.function() != 'formula' -->
       <select data-bind="selectize: facetFieldsNames, value: $parent.field, optionsValue: 'name', optionsText: 'name', optionsCaption: '${ _ko('Field...') }'" class="hit-options input-small" style="margin-bottom: 0"></select>
       <select data-bind="selectize: facetFieldsNames, value: $parent.field, optionsValue: 'name', optionsText: 'name', optionsCaption: '${ _ko('Field...') }'" class="hit-options input-small" style="margin-bottom: 0"></select>
+        <!-- ko if: $parent.field -->
+        <a class="inactive-action context-popover-icon" href="javascript:void(0);" data-bind="sqlContextPopover: { sourceType: 'solr', path: 'default.' + $root.collection.name() + '.' + $parent.field()  }">
+          <i class="fa fa-fw fa-info" title="${_('Show Details')}"/>
+        </a>
+        <!-- /ko -->
       <!-- /ko -->
       <!-- /ko -->
 
 
       <div class="clearfix"></div>
       <div class="clearfix"></div>
@@ -4667,6 +4673,7 @@ $(document).ready(function () {
     if (searchViewModel.isGridster() && (!event || (event && !$(event.target).parents('.edit-dimensions').length))) {
     if (searchViewModel.isGridster() && (!event || (event && !$(event.target).parents('.edit-dimensions').length))) {
       searchViewModel.collection.facets().forEach(function (facet) {
       searchViewModel.collection.facets().forEach(function (facet) {
         facet.isAdding(false);
         facet.isAdding(false);
+        facet.isEditing(false);
         if (facet.properties && facet.properties.facets && facet.properties.facets()) {
         if (facet.properties && facet.properties.facets && facet.properties.facets()) {
           facet.properties.facets().forEach(function (dimension) {
           facet.properties.facets().forEach(function (dimension) {
             dimension.isEditing(false);
             dimension.isEditing(false);

Some files were not shown because too many files changed in this diff