From aa14e541e2125d3e38e889948ec4d6af45f0cbd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Maro=C5=A1i?= Date: Thu, 12 Jul 2018 09:09:58 +0200 Subject: [PATCH 1/2] Addes simple router component --- app/javascript/components/router-test.jsx | 19 +++++++++++++++++ .../packs/component-definitions-common.js | 2 ++ app/views/dashboard/show.html.haml | 21 +------------------ package.json | 1 + 4 files changed, 23 insertions(+), 20 deletions(-) create mode 100644 app/javascript/components/router-test.jsx diff --git a/app/javascript/components/router-test.jsx b/app/javascript/components/router-test.jsx new file mode 100644 index 00000000000..6e33fb28127 --- /dev/null +++ b/app/javascript/components/router-test.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { HashRouter, Switch, Route } from 'react-router-dom'; + +const someRoute = () =>
Route 1
; +const route2 = () =>
Route 2
; + +const App = () => { + console.log('re render'); + return ( + + + + + + + ); +}; + +export default App; diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js index c1a787032f8..1e91536d34e 100644 --- a/app/javascript/packs/component-definitions-common.js +++ b/app/javascript/packs/component-definitions-common.js @@ -5,6 +5,7 @@ import TableListViewWrapper from '../react/table_list_view_wrapper'; import GenericGroupWrapper from '../react/generic_group_wrapper'; import { addReact } from '../miq-component/helpers'; import VmSnapshotFormComponent from '../components/vm-snapshot-form-component'; +import RouterTest from '../components/router-test'; /** * Add component definitions to this file. @@ -19,3 +20,4 @@ addReact('GenericGroup', GenericGroup); addReact('GenericGroupWrapper', GenericGroupWrapper); addReact('TextualSummaryWrapper', TextualSummaryWrapper); addReact('VmSnapshotFormComponent', VmSnapshotFormComponent); +addReact('RouterTest', RouterTest); diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml index a0758131697..c568625f22a 100644 --- a/app/views/dashboard/show.html.haml +++ b/app/views/dashboard/show.html.haml @@ -1,21 +1,2 @@ = render :partial => "layouts/flash_msg" -- if @layout == "dashboard" && (controller.action_name == "show" || controller.action_name == "change_tab") - .row#modules - .col-md-6.col-lg-4#col1{:style => "position: relative; min-height: 50px;"} - - @sb[:dashboards][@sb[:active_db]][:col1].each do |w| - - widget = MiqWidget.find_by_id(w) - - if widget && widget.enabled && @available_widgets.include?(widget.id) - = WidgetPresenter.new(self, controller, widget).render_partial - .col-md-6.col-lg-4#col2{:style => "position: relative; min-height: 50px;"} - - @sb[:dashboards][@sb[:active_db]][:col2].each do |w| - - widget = MiqWidget.find_by_id(w) - - if widget && widget.enabled && @available_widgets.include?(widget.id) - = WidgetPresenter.new(self, controller, widget).render_partial - .col-md-6.col-lg-4#col3{:style => "position: relative; min-height: 50px;"} - - @sb[:dashboards][@sb[:active_db]][:col3].each do |w| - - widget = MiqWidget.find_by_id(w) - - if widget && widget.enabled && @available_widgets.include?(widget.id) - = WidgetPresenter.new(self, controller, widget).render_partial -- if WidgetPresenter.chart_data.present? - :javascript - ManageIQ.charts.chartData = #{{"widgetchart" => WidgetPresenter.chart_data}.to_json.html_safe}; += react 'RouterTest', {} diff --git a/package.json b/package.json index 8f2b7bab7cd..642a53b67a7 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react": "^16.3.1", "react-dom": "^16.3.1", "react-redux": "^5.0.7", + "react-router-dom": "^4.3.1", "react-select": "~1.2.1", "redux": "~3.7.2", "redux-devtools-extension": "~2.13.5", From 08e3ee9916d4538a6e51c108f7c9a9885fb2ddf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Maro=C5=A1i?= Date: Thu, 12 Jul 2018 12:49:31 +0200 Subject: [PATCH 2/2] Configured to work with HashRouter. --- .../angular_modules/module_report_data.js | 6 ------ .../angular_modules/module_toolbar.js | 8 +------ .../javascripts/miq_angular_application.js | 8 +++++++ app/javascript/components/router-test.jsx | 19 ----------------- .../packs/component-definitions-common.js | 2 -- app/views/dashboard/show.html.haml | 21 ++++++++++++++++++- package.json | 1 - 7 files changed, 29 insertions(+), 36 deletions(-) delete mode 100644 app/javascript/components/router-test.jsx diff --git a/app/assets/javascripts/angular_modules/module_report_data.js b/app/assets/javascripts/angular_modules/module_report_data.js index 02b3bc18f9d..be91ce9c43c 100644 --- a/app/assets/javascripts/angular_modules/module_report_data.js +++ b/app/assets/javascripts/angular_modules/module_report_data.js @@ -2,10 +2,4 @@ miqHttpInject( angular.module('ManageIQ.report_data', [ 'miqStaticAssets', 'ui.bootstrap', 'patternfly.views', ]) - .config(['$locationProvider', function($locationProvider) { - $locationProvider.html5Mode({ - enabled: true, - requireBase: false, - }); - }]) ); diff --git a/app/assets/javascripts/angular_modules/module_toolbar.js b/app/assets/javascripts/angular_modules/module_toolbar.js index fe2424122ac..aa2fbcd89e7 100644 --- a/app/assets/javascripts/angular_modules/module_toolbar.js +++ b/app/assets/javascripts/angular_modules/module_toolbar.js @@ -1,11 +1,5 @@ miqHttpInject( angular.module('ManageIQ.toolbar', [ - 'miqStaticAssets', 'ui.bootstrap' + 'miqStaticAssets', 'ui.bootstrap', ]) - .config(['$locationProvider', function ($locationProvider) { - $locationProvider.html5Mode({ - enabled: false, - requireBase: false, - }); - }]) ); diff --git a/app/assets/javascripts/miq_angular_application.js b/app/assets/javascripts/miq_angular_application.js index e2d1e2a3cbf..7daa781ed3a 100644 --- a/app/assets/javascripts/miq_angular_application.js +++ b/app/assets/javascripts/miq_angular_application.js @@ -29,6 +29,14 @@ ManageIQ.constants = { }; function miqHttpInject(angular_app) { + angular_app.config(['$locationProvider', function($locationProvider) { + /** + * hashPrefix must be empty othervise it will conflict with HashRouter and create infinite loop + * React HashRouter can be configured to have hashbang prefix, + * but both $locationProvider and ReactRouter must have the same prefix! + */ + $locationProvider.hashPrefix(''); + }]); angular_app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common['X-Angular-Request'] = true; $httpProvider.defaults.headers.common['X-CSRF-Token'] = function() { diff --git a/app/javascript/components/router-test.jsx b/app/javascript/components/router-test.jsx deleted file mode 100644 index 6e33fb28127..00000000000 --- a/app/javascript/components/router-test.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { HashRouter, Switch, Route } from 'react-router-dom'; - -const someRoute = () =>
Route 1
; -const route2 = () =>
Route 2
; - -const App = () => { - console.log('re render'); - return ( - - - - - - - ); -}; - -export default App; diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js index 1e91536d34e..c1a787032f8 100644 --- a/app/javascript/packs/component-definitions-common.js +++ b/app/javascript/packs/component-definitions-common.js @@ -5,7 +5,6 @@ import TableListViewWrapper from '../react/table_list_view_wrapper'; import GenericGroupWrapper from '../react/generic_group_wrapper'; import { addReact } from '../miq-component/helpers'; import VmSnapshotFormComponent from '../components/vm-snapshot-form-component'; -import RouterTest from '../components/router-test'; /** * Add component definitions to this file. @@ -20,4 +19,3 @@ addReact('GenericGroup', GenericGroup); addReact('GenericGroupWrapper', GenericGroupWrapper); addReact('TextualSummaryWrapper', TextualSummaryWrapper); addReact('VmSnapshotFormComponent', VmSnapshotFormComponent); -addReact('RouterTest', RouterTest); diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml index c568625f22a..a0758131697 100644 --- a/app/views/dashboard/show.html.haml +++ b/app/views/dashboard/show.html.haml @@ -1,2 +1,21 @@ = render :partial => "layouts/flash_msg" -= react 'RouterTest', {} +- if @layout == "dashboard" && (controller.action_name == "show" || controller.action_name == "change_tab") + .row#modules + .col-md-6.col-lg-4#col1{:style => "position: relative; min-height: 50px;"} + - @sb[:dashboards][@sb[:active_db]][:col1].each do |w| + - widget = MiqWidget.find_by_id(w) + - if widget && widget.enabled && @available_widgets.include?(widget.id) + = WidgetPresenter.new(self, controller, widget).render_partial + .col-md-6.col-lg-4#col2{:style => "position: relative; min-height: 50px;"} + - @sb[:dashboards][@sb[:active_db]][:col2].each do |w| + - widget = MiqWidget.find_by_id(w) + - if widget && widget.enabled && @available_widgets.include?(widget.id) + = WidgetPresenter.new(self, controller, widget).render_partial + .col-md-6.col-lg-4#col3{:style => "position: relative; min-height: 50px;"} + - @sb[:dashboards][@sb[:active_db]][:col3].each do |w| + - widget = MiqWidget.find_by_id(w) + - if widget && widget.enabled && @available_widgets.include?(widget.id) + = WidgetPresenter.new(self, controller, widget).render_partial +- if WidgetPresenter.chart_data.present? + :javascript + ManageIQ.charts.chartData = #{{"widgetchart" => WidgetPresenter.chart_data}.to_json.html_safe}; diff --git a/package.json b/package.json index 642a53b67a7..8f2b7bab7cd 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "react": "^16.3.1", "react-dom": "^16.3.1", "react-redux": "^5.0.7", - "react-router-dom": "^4.3.1", "react-select": "~1.2.1", "redux": "~3.7.2", "redux-devtools-extension": "~2.13.5",