diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 9ae79f11bb3..6a0414c103b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -62,7 +62,6 @@
//= require slickgrid/plugins/slick.autotooltips
//= require slickgrid/plugins/slick.rowselectionmodel
//= require slickgrid/plugins/slick.checkboxselectcolumn
-//= require miq_slickgrid
//= require codemirror
//= require codemirror/modes/yaml
//= require spin.js/spin
diff --git a/app/assets/javascripts/miq_application.js b/app/assets/javascripts/miq_application.js
index a19c42fc0b5..ce99377827d 100644
--- a/app/assets/javascripts/miq_application.js
+++ b/app/assets/javascripts/miq_application.js
@@ -16,12 +16,6 @@ function miqOnLoad() {
ManageIQ.mouse.y = e.pageY;
});
- // Need to do this here for IE, rather then right after the grid is initialized
- if ($('#compare_grid').length) {
- $('#compare_grid')[0].enableAutoHeight(true);
- $('#compare_grid')[0].enableAutoWidth(true);
- }
-
miqBuildCalendar();
miqLoadCharts();
diff --git a/app/assets/javascripts/miq_slickgrid.js b/app/assets/javascripts/miq_slickgrid.js
deleted file mode 100644
index 67cf51d6a7a..00000000000
--- a/app/assets/javascripts/miq_slickgrid.js
+++ /dev/null
@@ -1,119 +0,0 @@
-// Initialize a single grid (is called directly after an AJAX trans)
-function miqInitSlickGrid(grid_name, dataJson, columnsJson, options) {
- for (var i in columnsJson) {
- columnsJson[i].asyncPostRender = applyCSS;
- columnsJson[i].formatter = HtmlFormatter;
- }
- if (columnsJson.length) {
- columnsJson[0].formatter = TreeFormatter;
- }
-
- ManageIQ.slick.slickRows = dataJson;
- ManageIQ.slick.slickColumns = columnsJson;
-
- // initialize the model
- ManageIQ.slick.slickDataView = new Slick.Data.DataView();
- ManageIQ.slick.slickGrid = new Slick.Grid(grid_name, ManageIQ.slick.slickDataView, ManageIQ.slick.slickColumns, options);
- var plugin = new Slick.AutoTooltips();
- ManageIQ.slick.slickGrid.registerPlugin(plugin);
-
- ManageIQ.slick.slickGrid.onClick.subscribe(function (e, args) {
- if ($(e.target).hasClass("toggle")) {
- var state = 0;
- var item = ManageIQ.slick.slickDataView.getItem(args.row);
-
- if (item) {
- if (!item._collapsed) {
- item._collapsed = true;
- state = -1;
- } else {
- item._collapsed = false;
- state = 1;
- }
- ManageIQ.slick.slickDataView.updateItem(item.id, item);
- }
- e.stopImmediatePropagation();
-
- miqJqueryRequest('/' + ManageIQ.controller + '/compare_set_state?rowId=' + item.exp_id + '&state=' + state);
- }
-});
-
- // wire up model events to drive the grid
- ManageIQ.slick.slickDataView.onRowCountChanged.subscribe(function (e, args) {
- ManageIQ.slick.slickGrid.updateRowCount();
- ManageIQ.slick.slickGrid.render();
- });
-
- ManageIQ.slick.slickDataView.onRowsChanged.subscribe(function (e, args) {
- ManageIQ.slick.slickGrid.invalidateRows(args.rows);
- ManageIQ.slick.slickGrid.render();
- });
-
- ManageIQ.slick.slickDataView.beginUpdate();
- ManageIQ.slick.slickDataView.setItems(ManageIQ.slick.slickRows);
- ManageIQ.slick.slickDataView.setFilterArgs(ManageIQ.slick.slickRows);
- ManageIQ.slick.slickDataView.setFilter(myFilter);
- ManageIQ.slick.slickDataView.endUpdate();
-}
-
-function HtmlFormatter(row, cell, value, columnDef, dataContext) {
- return value;
-}
-
-function TreeFormatter(row, cell, value, columnDef, dataContext) {
- if (dataContext.indent === undefined) {
- return value;
- }
-
- value = value.replace(/&/g, "&").replace(//g, ">");
- var spacer = "";
- spacer += "";
- var idx = ManageIQ.slick.slickDataView.getIdxById(dataContext.id);
- var toggle_attribute = "";
-
- if (ManageIQ.slick.slickRows[idx + 1] && ManageIQ.slick.slickRows[idx + 1].indent > ManageIQ.slick.slickRows[idx].indent) {
- if (dataContext._collapsed) {
- toggle_attribute = "expand";
- } else {
- toggle_attribute = "collapse";
- }
- return spacer + " " + value;
- } else {
- return spacer + " " + value;
- }
-}
-
-function myFilter(item, rows) {
- if (item.parent != null) { // null or undefined
- var parent = rows[item.parent];
-
- while (parent) {
- if (parent._collapsed) {
- return false;
- }
- parent = rows[parent.parent];
- }
- }
- return true;
-}
-
-function applyCSS(cellNode, row, dataContext, colDef) {
- var value = "";
- for (var prop in dataContext) {
- if (dataContext.hasOwnProperty(prop)) {
- if (prop === colDef.field) {
- value = dataContext[prop];
- break;
- }
- }
- }
- if (dataContext.section && colDef.field == 'col0') {
- $(cellNode).addClass('cell-bkg-plain');
- }
-
- if (value.search('cell-stripe') > -1) {
- $(cellNode).addClass('cell-bkg');
- } else if (value.search('cell-plain') > -1) {
- $(cellNode).addClass('cell-bkg-plain');
- }
-}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d382a9f49ca..9097977f019 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -17,7 +17,6 @@
*= require miq_dynatree
*= require codemirror
*= require jqplot
- *= require product_slickgrid
*= require kubernetes-topology-graph/topology-graph
*= require jquery-ui-miq-theme/jquery-ui-1.9.2.custom
*= require container_providers_dashboard
diff --git a/app/assets/stylesheets/patternfly_overrides.scss b/app/assets/stylesheets/patternfly_overrides.scss
index de513a57226..cdac8e188f1 100644
--- a/app/assets/stylesheets/patternfly_overrides.scss
+++ b/app/assets/stylesheets/patternfly_overrides.scss
@@ -415,6 +415,55 @@ iframe, .iframe {
right: 0;
bottom: 0;
}
+/* compare styling */
+
+#compare-grid {
+ table.table-expanded, .table-compressed {
+ table-layout: fixed !important;
+ word-wrap: break-word !important;
+ width: auto !important;
+ max-width: auto !important;
+ }
+
+ table.table-compressed thead tr th {
+ height: 150px !important;
+ width: 26px !important;
+ text-align: center;
+ white-space: nowrap;
+ }
+
+ table.table-compressed thead tr th div.rotated-text {
+ transform:
+ translate(0px, 110px)
+ rotate(270deg);
+ width: 26px;
+ }
+
+ table.table-expanded thead tr th div.quadicon_grid {
+ padding-left: 40px
+ }
+
+ table.table-compressed thead th,
+ table.table-compressed tr td {
+ width: 26px !important;
+ text-align: center;
+ }
+
+ table.table-expanded thead th,
+ table.table-expanded tr td {
+ width: 175px !important;
+ min-width: 175px !important;
+ text-align: center;
+ }
+
+ // sets styling of first column
+ table.table-expanded tbody tr th.treegrid-node,
+ table.table-compressed tbody th.treegrid-node {
+ width: 270px !important;
+ text-align: left;
+ white-space: nowrap !important;
+ }
+}
/* Used at Chargeback edit view */
diff --git a/app/assets/stylesheets/product_slickgrid.scss b/app/assets/stylesheets/product_slickgrid.scss
deleted file mode 100644
index 263e7f06908..00000000000
--- a/app/assets/stylesheets/product_slickgrid.scss
+++ /dev/null
@@ -1,177 +0,0 @@
-/*Override Bootstrap box-sizing*/
-.slick-header-column.ui-state-default
- {
- -webkit-box-sizing: content-box;
- -moz-box-sizing: content-box;
- box-sizing: content-box;
-}
-
-.slick-header-column.ui-state-default {
- height: 19px;
- line-height: 19px;
- padding-left:10px;
- border: 1px solid #d1d1d1;
- border-left: 1px solid #f5f5f5;
- background-image: -webkit-linear-gradient(top, #fafafa, #ededed); /* For Chrome and Safari */
- background-image: -moz-linear-gradient(top, #fafafa, #ededed); /* For old Fx (3.6 to 15) */
- background-image: -ms-linear-gradient(top, #fafafa, #ededed); /* For pre-releases of IE 10*/
- background-image: -o-linear-gradient(top, #fafafa, #ededed); /* For old Opera (11.1 to 12.0) */
- background-image: linear-gradient(top, #fafafa, #ededed); /* Standard syntax; must be last */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
- font: normal 11px OpenSansSemibold,Arial,Helvetica,sans-serif;
- color: #4d5258;
-}
-
-.slick-header-column.ui-state-default:first-child {
- border-left: 1px solid #d1d1d1;
-}
-
-.slick-cell, .slick-headerrow-column {
- border-right: 1px solid #d1d1d1;
- border-bottom-color: #e7e7e7;
- padding: 2px 2px 2px 10px;
- color: #4d5258;
- height: 34px !important;
-}
-
-.slick-cell:first-child {
- border-left: 1px solid #d1d1d1;
-}
-
-.slick-group {
-}
-
-.cell-title {
- font-weight: bold;
-}
-
-.cell-bkg {
- background-color: #f2f2f2;
- color:#403990;
- font-weight: bold;
-}
-
-.cell-bkg-plain {
- background-image: -webkit-linear-gradient(top, #fafafa, #ededed); /* For Chrome and Safari */
- background-image: -moz-linear-gradient(top, #fafafa, #ededed); /* For old Fx (3.6 to 15) */
- background-image: -ms-linear-gradient(top, #fafafa, #ededed); /* For pre-releases of IE 10*/
- background-image: -o-linear-gradient(top, #fafafa, #ededed); /* For old Opera (11.1 to 12.0) */
- background-image: linear-gradient(top, #fafafa, #ededed); /* Standard syntax; must be last */
-
-}
-
-.cell-bkg-plain-no-shade {
- color:#403990;
- font-weight: bold;
-}
-
-.cell-bkg-plain-mark-txt-no-shade {
- color:#21a0ec;
- font-weight: bold;
-}
-
-.cell-bkg-plain-mark-txt-no-shade-no-bold {
- color:#21a0ec;
-}
-
-.cell-bkg-plain-mark-txt-black {
- color:#000;
-}
-
-.slick-header-column {
- text-align: center;
- /*white-space:normal;*/
-
-}
-
-.slick-column-name {
- /*position: absolute; bottom: 0; left: 0;*/
- width: 100%;
- /*text-align: center;*/
- position: absolute;
- bottom: 0;
- left: 0;
-}
-
-.cell-text-wrap {
- white-space:normal;
-}
-
-.cell-effort-driven {
- text-align: center;
-}
-
-/*.slick-cell {*/
- /*overflow: visible;*/
- /*white-space: pre-wrap;*/
-/*}*/
-
-.slick-header-column.ui-state-default {
- height: 160px;
- background-image: -webkit-linear-gradient(top, #fafafa, #ededed); /* For Chrome and Safari */
- background-image: -moz-linear-gradient(top, #fafafa, #ededed); /* For old Fx (3.6 to 15) */
- background-image: -ms-linear-gradient(top, #fafafa, #ededed); /* For pre-releases of IE 10*/
- background-image: -o-linear-gradient(top, #fafafa, #ededed); /* For old Opera (11.1 to 12.0) */
- background-image: linear-gradient(top, #fafafa, #ededed); /* Standard syntax; must be last */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
-}
-
-.rotated-text {
- /*position: absolute; bottom: 0; left: 0;*/
- /*display: inline-block;*/
- /*margin-bottom: 10px;*/
- /*white-space: nowrap;*/
- /*text-align: left;*/
- width: 100%;
- display: inline-block;
- /*text-align: center;*/
- /*position: absolute;*/
- bottom: 0;
- left: 0;
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- padding-bottom: 30px;
- margin-left: 17px !important;
-}
-
-.toggle {
- height: 9px;
- width: 9px;
- display: inline-block;
-}
-
-.toggle.expand {
- background: image-url('layout/plus.gif') no-repeat center center;
-}
-
-.toggle.collapse {
- background: image-url('layout/minus.gif') no-repeat center center;
-}
-
-.quadicon_grid { position:relative;float:left;padding: 0 1px 1px 0;width: 72px; height: 80px;color: #e3e4e4;text-transform: none;
- padding-left: 33%
-}
-.quadicon_grid:hover{
- padding: 1px 0 0 34%;
-}
-
-abbr[title] {
- border-bottom-width: 0;
-}
-
-#import-grid .slick-header-column.ui-state-default {
- height: 24px !important;
-}
-
-#import-grid .slick-column-name {
- padding-bottom: 10px;
-}
-
-#import-grid .odd {
- background-color: #f5f5f5;
-}
-
-#import-grid .slick-cell {
- border-bottom-color: transparent;
-}
diff --git a/app/controllers/application_controller/compare.rb b/app/controllers/application_controller/compare.rb
index c3c4d0d9d33..f1771c7d096 100644
--- a/app/controllers/application_controller/compare.rb
+++ b/app/controllers/application_controller/compare.rb
@@ -557,9 +557,10 @@ def drift
drop_breadcrumb(:name => _("'%{name}' Drift Analysis") % {:name => @drift_obj.name},
:url => "/#{@sb[:compare_db].downcase}/drift")
@sb[:miq_vm_name] = @drift_obj.name
- if params[:ppsetting] # Came in from per page setting
- render :update do |page| # Use RJS to update the display
- page.replace_html("main_div", :partial => "layouts/drift", :id => @drift_obj.id) # Replace the main div area contents
+ if params[:ppsetting] # Came in from per page setting
+ render :update do |page| # Use RJS to update the display
+ # Replace the main div area contents
+ page.replace_html("main_div", :partial => "layouts/compare", :id => @drift_obj.id)
page << "miqSparkle(false);"
end
else
@@ -612,7 +613,7 @@ def drift_all_same_dff
page << "ManageIQ.toolbars.enableItem('#center_tb', 'drift_same');"
page << "ManageIQ.toolbars.unmarkItem('#center_tb', 'drift_same');"
end
- page.replace_html("main_div", :partial => "layouts/drift") # Replace the main div area contents
+ page.replace_html("main_div", :partial => "layouts/compare") # Replace the main div area contents
page << "miqSparkle(false);"
end
end
@@ -684,7 +685,7 @@ def drift_mode
page << "ManageIQ.toolbars.enableItem('#center_tb', 'driftmode_exists');"
page << "ManageIQ.toolbars.unmarkItem('#center_tb', 'driftmode_exists');"
end
- page.replace_html("main_div", :partial => "layouts/drift") # Replace the main div area contents
+ page.replace_html("main_div", :partial => "layouts/compare") # Replace the main div area contents
page << "miqSparkle(false);"
end
end
@@ -707,7 +708,7 @@ def drift_compress
page << "ManageIQ.toolbars.enableItem('#view_tb', 'drift_compressed');"
page << "ManageIQ.toolbars.unmarkItem('#view_tb', 'drift_compressed');"
end
- page.replace_html("main_div", :partial => "layouts/drift") # Replace the main div area contents
+ page.replace_html("main_div", :partial => "layouts/compare") # Replace the main div area contents
page << "miqSparkle(false);"
end
end
@@ -964,8 +965,8 @@ def section_checked(mode)
end
end
send("#{mode}_to_json", @compare)
- render :update do |page| # Use RJS to update the display
- page.replace_html("main_div", :partial => "layouts/#{mode}") # Replace the main div area contents
+ render :update do |page| # Use RJS to update the display
+ page.replace_html("main_div", :partial => "layouts/compare") # Replace the main div area contents
page << "miqSparkle(false);"
end
end
@@ -1046,7 +1047,7 @@ def drift_add_header(view)
:field => "col#{i + 1}",
:width => @compressed ? 40 : 150,
:cssClass => "cell-effort-driven",
- :name => @compressed ? "#{txt}" : txt
+ :name => @compressed ? "#{txt}" : txt
}
row.push(rowtemp)
end
diff --git a/app/controllers/vm_common.rb b/app/controllers/vm_common.rb
index ef54043beb0..31c4acdbb09 100644
--- a/app/controllers/vm_common.rb
+++ b/app/controllers/vm_common.rb
@@ -1817,7 +1817,7 @@ def set_right_cell_vars
table = request.parameters["controller"]
case @sb[:action]
when "compare", "drift"
- partial = "layouts/#{@sb[:action]}"
+ partial = "layouts/compare"
if @sb[:action] == "compare"
header = _("Compare %{model}") % {:model => ui_lookup(:model => @sb[:compare_db])}
else
diff --git a/app/views/layouts/_compare.html.haml b/app/views/layouts/_compare.html.haml
index 214caf169ed..386da3d9b3c 100644
--- a/app/views/layouts/_compare.html.haml
+++ b/app/views/layouts/_compare.html.haml
@@ -2,10 +2,29 @@
- if @compare.nil?
= render :partial => 'layouts/info_msg', :locals => {:message => _("No Records Found.")}
- else
- #compare_grid_div{:style => "width: #{@winW - 250}; height: #{center_div_height + 150}px; cursor: hand; overflow-x: auto; overflow-y: auto;"}
- = render :partial => 'layouts/slickgrid',
- :locals => {:grid_id => "compare_grid_div",
- :grid_name => "compare_grid",
- :grid_rows_json => @grid_rows_json,
- :grid_cols_json => @grid_cols_json,
- :autoheight => false}
+ #compare-grid
+ %table.table.table-bordered.table-treegrid{:class => @compressed ? 'table-compressed' : 'table-expanded'}
+ %thead
+ %tr
+ - @cols.each do |col|
+ %th
+ %a
+ = col[:name].html_safe
+ %tbody
+ - @rows.each do |row|
+ %tr{'data-parent' => row[:parent], :class => row[:_collapsed] ? 'collapsed' : nil, 'data-exp-id' => row[:exp_id]}
+ %th.treegrid-node
+ = row[:col0].html_safe
+ - (@cols.length - 1).times do |i|
+ %td
+ = row["col#{i + 1}".to_sym].to_s.html_safe
+
+ :javascript
+ $('.table-treegrid').treegrid({
+ callback: function (e) {
+ var item = $(e.target).parent().parent();
+ var exp_id = item.data('exp-id');
+ var state = item.hasClass('collapsed') ? '1' : '-1';
+ miqJqueryRequest('/' + ManageIQ.controller + '/compare_set_state?rowId=' + exp_id + '&state=' + state);
+ }
+ });
diff --git a/app/views/layouts/_drift.html.haml b/app/views/layouts/_drift.html.haml
deleted file mode 100644
index a8b7196d96f..00000000000
--- a/app/views/layouts/_drift.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- w = @winW - 250
-
-= render :partial => "layouts/flash_msg"
-- if @compare.nil?
- = render :partial => 'layouts/info_msg', :locals => {:message => _("No Records Found.")}
-- else
- #drift_grid_div{:style => "width: #{w}; height: #{center_div_height + 150}px; cursor: hand; overflow-x: auto; overflow-y: auto;"}
- = render :partial => 'layouts/slickgrid',
- :locals => {:grid_id => "drift_grid_div",
- :grid_name => "drift_grid",
- :grid_rows_json => @grid_rows_json,
- :grid_cols_json => @grid_cols_json,
- :autoheight => false}
diff --git a/app/views/layouts/_slickgrid.html.haml b/app/views/layouts/_slickgrid.html.haml
deleted file mode 100644
index a0560fd0f37..00000000000
--- a/app/views/layouts/_slickgrid.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-:javascript
- var columns = #{grid_cols_json};
- var data = #{grid_rows_json};
- var autoheight = #{autoheight}
-
- var options = {
- enableCellNavigation: true,
- enableColumnReorder: false,
- autoHeight: autoheight,
- fullWidthRows: false,
- rowHeight: 34,
- enableAsyncPostRender: true,
- asyncPostRenderDelay: 0
- };
-
- miqInitSlickGrid(#{grid_id}, data, columns, options);
diff --git a/app/views/shared/_compare_header_expanded.html.haml b/app/views/shared/_compare_header_expanded.html.haml
index 7cc0e5948ef..48f308bf4e9 100644
--- a/app/views/shared/_compare_header_expanded.html.haml
+++ b/app/views/shared/_compare_header_expanded.html.haml
@@ -1,12 +1,11 @@
-.cell-text-wrap
- - if base
- %b{:title => "#{h[:name]} is the base"}
- = h[:name]
- (base)
- - else
- - url = "/#{controller_name}/compare_choose_base/#{h["id"]}"
- %a{:title => "Make #{h[:name]} the base", :onclick => "miqJqueryRequest('#{url}', {beforeSend: true, complete: true});", :href => '#'}
- = h[:name]
+- if base
+ %b{:title => "#{h[:name]} is the base"}
+ = h[:name]
+ (base)
+- else
+ - url = "/#{controller_name}/compare_choose_base/#{h["id"]}"
+ %a{:title => "Make #{h[:name]} the base", :onclick => "miqJqueryRequest('#{url}', {beforeSend: true, complete: true});", :href => '#'}
+ = h[:name]
%br
%br
.quadicon_grid