فهرست منبع

HUE-7501 [dashboard] MVP of the gridster integration under a feature flag

Enrico Berti 8 سال پیش
والد
کامیت
7ae3e29

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 7 - 4
desktop/core/src/desktop/static/desktop/js/ko.charts.plotly.js

@@ -39,12 +39,15 @@
   }
 
   function resizeHandlers(element) {
-    var resizeSubscription = huePubSub.subscribe('resize.plotly.chart', function () {
-      Plotly.Plots.resize(element);
-    });
     var resizeEvent = function () {
-      Plotly.Plots.resize(element);
+      try {
+        if ($(element).is(':visible')){
+          Plotly.Plots.resize(element);
+        }
+      }
+      catch (e) {}
     };
+    var resizeSubscription = huePubSub.subscribe('resize.plotly.chart', resizeEvent);
 
     $(window).on('resize', resizeEvent);
     ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

+ 36 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-gridster.less

@@ -0,0 +1,36 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.gridster {
+  & > ul {
+    margin: 0;
+    list-style-type: none;
+    & > li {
+      border: 1px solid @cui-gray-200;
+    }
+  }
+  .card-widget {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+  .preview-holder {
+    border: none !important;
+    border-radius: 0 !important;
+    background: @cui-gray-200 !important;
+  }
+}

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -28,6 +28,7 @@
 @import "components/hue-selectize.less";
 @import "components/hue-demi-modal.less";
 @import "components/hue-spinner.less";
+@import "components/hue-gridster.less";
 @import "components/hue-scrollbar.less";
 @import "components/hue-query-builder.less";
 @import "components/hue-qq-upload.less";

+ 21 - 1
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -24,7 +24,7 @@
 <%!
   from django.utils.translation import ugettext as _
 
-  from dashboard.conf import HAS_QUERY_BUILDER_ENABLED, HAS_REPORT_ENABLED
+  from dashboard.conf import HAS_QUERY_BUILDER_ENABLED, HAS_REPORT_ENABLED, USE_GRIDSTER
 %>
 
 <%def name="import_layout(with_deferred=False)">
@@ -167,6 +167,15 @@
 
 <div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
   <div class="container-fluid">
+  %if USE_GRIDSTER.get():
+
+    <div class="gridster">
+      <!-- ko if: typeof gridItems !== 'undefined' -->
+      <ul class="unstyled" data-bind="gridster: { items: gridItems, template: 'widget-template-gridster${ suffix }' }"></ul>
+      <!-- /ko -->
+    </div>
+
+  %else:
     <!-- ko if: $root.selectedQDefinition() != null -->
     <div class="row-fluid">
       <div class="card card-additional card-home span12" style="background-color: #F5F5F5">
@@ -183,9 +192,20 @@
     <div class="row-fluid" data-bind="template: { name: 'column-template${ suffix }', foreach: columns}">
     </div>
     <div class="clearfix"></div>
+  %endif
   </div>
 </div>
 
+<script id="widget-template-gridster${ suffix }" type="text/html">
+  <li>
+    <!-- ko with: widget -->
+    <span data-bind="template: 'widget-template${ suffix }'"></span>
+    <div class="clearfix"></div>
+    <!-- /ko -->
+  </li>
+</script>
+
+
 <script type="text/html" id="column-template${ suffix }">
   <div data-bind="css: klass">
     <div class="pull-right margin-right-10" data-bind="visible: $root.isEditing()">

+ 27 - 5
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -51,18 +51,35 @@ function loadSearchLayout(viewModel, json_layout) {
 
 function layoutToGridster(vm) {
   var numCols = 12;
-  var defaultWidgetHeight = 2;
-  var layout = []
+  var defaultWidgetHeight = 5;
+  var layout = [];
 
+  // flat layout
+  var rowCnt = 0;
   $.each(vm.columns(), function (indexY, column) {
     $.each(column.rows(), function (indexY, row) {
-      var rowColSize = numCols / row.widgets().length; // Full length of row if 1 widget
       $.each(row.widgets(), function (indexX, widget) {
-        layout.push({col: 1 + indexY * defaultWidgetHeight, row: 1 + indexX * rowColSize, size_x: rowColSize, size_y: defaultWidgetHeight, id: widget.id()});
+        layout.push({col: 1, row: 1 + rowCnt*defaultWidgetHeight, sizex: numCols, sizey: defaultWidgetHeight, widget: vm.getWidgetById(widget.id())});
+        rowCnt++;
       });
     });
   });
 
+  // $.each(vm.columns(), function (indexY, column) {
+  //   $.each(column.rows(), function (indexY, row) {
+  //     var rowColSize = numCols / row.widgets().length; // Full length of row if 1 widget
+  //     $.each(row.widgets(), function (indexX, widget) {
+  //       layout.push({
+  //         col: 1 + indexY * defaultWidgetHeight,
+  //         row: 1 + indexX * rowColSize,
+  //         sizex: rowColSize,
+  //         sizey: defaultWidgetHeight,
+  //         widget: vm.getWidgetById(widget.id())
+  //       });
+  //     });
+  //   });
+  // });
+
   return layout;
 }
 
@@ -2373,6 +2390,9 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
         $(document).trigger("error", xhr.responseText);
       });
     };
+
+    self.gridItems = ko.mapping.fromJS(layoutToGridster(self));
+
   };
 
   self.reset = function() {
@@ -2510,7 +2530,9 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
     if (window.location.search.indexOf("collection") > -1) {
       hueUtils.changeURL((IS_HUE_4 ? '/hue' : '') + '/dashboard/new_search');
     }
-  }
+  };
+
+
 
   self.build();
 };

+ 17 - 0
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3607,6 +3607,23 @@ $(document).ready(function () {
     }, 200);
   });
 
+  $(".gridster>ul").gridster({
+    widget_margins: [5, 5],
+    widget_base_dimensions: ['auto', 100],
+    avoid_overlapped_widgets: true,
+    max_cols: 12,
+    max_row: 20,
+##     draggable: {
+##       handle: '.move-gridster-widget'
+##     },
+    resize: {
+      enabled: true,
+      stop: function (event, ui, $widget) {
+        huePubSub.publish('resize.plotly.chart');
+      },
+    }
+  });
+
   $(document).on("click", ".widget-settings-pill", function(){
     $(this).parents(".card-body").find(".widget-section").hide();
     selectAllCollectionFields(); // Make sure all the collection fields appear

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است