Fixes #13424 - c3 patternfly react implementation

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015"]
+  "presets": ["react", "es2015"],
+  "plugins": ["transform-object-rest-spread", "transform-object-assign"]
 }

.eslintrc

@@ -1,8 +1,5 @@
 {
-  "ecmaFeatures": {
-    "globalReturn": true,
-    "modules": true
-  },
+  "plugins": ["react"],
 
   "env": {
     "browser": true,
@@ -19,11 +16,21 @@
     "unescape": false,
     "window": false,
     "$": true,
-    "_": true
+    "_": true,
+    "__": true
   },
 
   "parser": "babel-eslint",
 
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "globalReturn": true,
+      "jsx": true
+    }
+  },
+
   "rules": {
     "block-scoped-var": "error",
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
@@ -66,6 +73,7 @@
     "no-array-constructor": "error",
     "no-bitwise": "off",
     "no-caller": "error",
+    "no-case-declarations": "error",
     "no-catch-shadow": "off",
     "no-cond-assign": "error",
     "no-console": "warn",
@@ -159,6 +167,8 @@
     "quote-props": "off",
     "quotes": ["error", "single", {"avoidEscape": true}],
     "radix": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
     "semi": ["error", "always"],
     "semi-spacing": "off",
     "sort-vars": "off",

__mocks__/c3.js

@@ -0,0 +1,7 @@
+const c3 = {};
+
+c3.generate = () => {
+  return undefined;
+};
+
+export default c3;

app/assets/javascripts/application.js

@@ -5,6 +5,7 @@
 //= require jquery.ui.spinner
 //= require scoped_search
 //= require bootstrap
+//= require patternfly
 //= require charts
 //= require topbar
 //= require two-pane

app/controllers/statistics_controller.rb

@@ -2,11 +2,15 @@ class StatisticsController < ApplicationController
   before_action :find_stat, :only => [:show]
 
   def index
-    @stats = charts
+    @metadata = charts.map(&:metadata)
   end
 
   def show
-    render :show, :layout => false
+    respond_to do |format|
+      format.json do
+        render :json => {:id => @stat.id, :data => @stat.calculate.map(&:values)}
+      end
+    end
   end
 
   private

app/helpers/reactjs_helper.rb

@@ -0,0 +1,7 @@
+module ReactjsHelper
+  def mount_react_component(name, selector, data)
+    javascript_tag defer: 'defer' do
+      "$(tfm.reactMounter.mount('#{name}', '#{selector}', #{data}));".html_safe
+    end
+  end
+end

app/services/statistics/base.rb

@@ -1,6 +1,6 @@
 module Statistics
   class Base
-    attr_reader :search, :title, :count_by
+    attr_reader :title, :count_by
 
     def initialize(options = {})
       @id       = options[:id]
@@ -22,6 +22,10 @@ def url
       @url || "statistics/#{id}"
     end
 
+    def search
+      "/hosts?search=#{@search}"
+    end
+
     def metadata
       {:id => id, :title => title, :url => url, :search => search}
     end

app/services/statistics/count_numerical_fact_pair.rb

@@ -21,7 +21,7 @@ def calculate
         },
         {
           :label => _('used memory'),
-          :data => mem_size - mem_free
+          :data => (mem_size - mem_free).round(2)
         }
       ]
     end

app/views/config_reports/show.html.erb

@@ -1,4 +1,4 @@
-<%= javascript 'reports' %>
+<%= javascript 'reports', 'charts' %>
 <% title "#{@config_report.host}"%>
 
 <p class='ra'> <%= _("Reported at %s ") % @config_report.reported_at %> </p>

app/views/dashboard/index.html.erb

@@ -1,4 +1,4 @@
-<%= javascript 'dashboard' %>
+<%= javascript 'dashboard', 'charts' %>
 <% title _('Overview') %>
 <%= title_actions dashboard_actions %>
 

app/views/fact_values/index.html.erb

@@ -1,3 +1,4 @@
+<%= javascript 'charts' %>
 <%
 if params[:host_id].present?
   title(_("Fact Values | %{host_name}") % {:host_name => params[:host_id]})

app/views/facts/show.html.erb

@@ -1,3 +1,4 @@
+<%= javascript 'charts' %>
 <% title @fact.name %>
 
 <%= pie_chart @fact.name,  _("%s Distribution") % @fact.name.camelize, FactValue.count_each(@fact.name) %>

app/views/smart_proxies/index.html.erb

@@ -1,5 +1,5 @@
 <% title _("Smart Proxies") %>
-<%= javascript 'proxy_status' %>
+<%= javascript 'proxy_status', 'charts' %>
 <% title_actions new_link(_("New Smart Proxy")),
                  documentation_button('4.3SmartProxies') %>
 

app/views/smart_proxies/plugins/_puppet.html.erb

@@ -1,3 +1,4 @@
+<% javascript 'charts' %>
 <ul id="proxy-puppet-tab" class="nav nav-tabs nav-tabs-pf">
   <li class="active"><a href="#puppet_dashboard" data-toggle="tab"><%= _("General")%></a></li>
   <li><a href="#puppet_envs" data-toggle="tab"><%= _('Environments') %></a></li>

app/views/smart_proxies/show.html.erb

@@ -1,5 +1,5 @@
 <% title(_('Smart Proxy: %s') % @smart_proxy.to_label) %>
-<%= javascript 'proxy_status' %>
+<%= javascript 'proxy_status', 'charts' %>
 <%= smart_proxy_title_actions(@smart_proxy, authorizer) %>
 <% service_features = services_tab_features(@smart_proxy) %>
 <% tab_features = tabbed_features(@smart_proxy) %>

app/views/statistics/index.html.erb

@@ -1,9 +1,5 @@
 <% title _("Statistics"), _('Statistics') %>
-<div id="statistics">
-  <% @stats.each do |stat| %>
-    <div data-ajax-url=<%= stat.url %> class='stats-well' data-on-complete='refreshCharts'>
-      <h4 class='ca pie-title'><%= stat.title %></h4>
-      <div class='statistics-pie-placeholder small'><span class='spinner spinner-lg spinner-inline'></span></div>
-    </div>
-  <% end %>
-</div>
+
+<div id="statistics"></div>
+
+<%= mount_react_component('StatisticsChartsList', '#statistics', @metadata.to_json)%>

app/views/trends/index.html.erb

@@ -1,3 +1,4 @@
+<%= javascript 'charts' %>
 <% title _("Trends") %>
 <% title_actions new_link(_("Add Trend Counter")),
                  documentation_button('4.1.3Trends') %>

app/views/trends/show.html.erb

@@ -1,3 +1,4 @@
+<%= javascript 'charts' %>
 <% title(_("Trends for %s") % trend_title(@trend)) %>
 <% content_for(:search_bar) { trend_days_filter } %>
 <div class="row">

bundler.d/assets.rb

@@ -1,7 +1,7 @@
 gem 'jquery-turbolinks', '~> 2.1'
 gem 'jquery-ui-rails', '< 5.0.0'
 gem 'autoprefixer-rails', '~> 5.2'
-gem 'patternfly-sass', '~> 2.7'
+gem 'patternfly-sass', '~> 3.9'
 gem 'gridster-rails', '~> 0.5'
 gem 'gettext_i18n_rails_js', '~> 1.0'
 gem 'execjs', '>= 1.4.0', '< 3.0'

config/initializers/assets.rb

@@ -54,7 +54,7 @@
 
   stylesheets = %w( unimported/email.css )
 
-  images = %w(editable/clear.png)
+  images = %w(editable/clear.png patternfly/bg-modal-about-pf.png )
 
   # Add the fonts path
   config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')

config/webpack.config.js

@@ -50,7 +50,7 @@ var config = {
         test: /(\.png|\.gif)$/,
         loader: "url-loader?limit=32767"
       }
-    ],
+    ]
   },
 
   plugins: [

package.json

@@ -5,30 +5,43 @@
   "description": "Foreman isn't really a node module, these are just dependencies needed to build the webpack bundle. 'dependencies' are the asset libraries in use and 'devDependencies' are used for the build process.",
   "private": true,
   "devDependencies": {
+    "babel-cli": "^6.10.1",
     "babel-core": "~6.7.2",
     "babel-eslint": "^6.1.2",
     "babel-jest": "^15.0.0",
     "babel-loader": "~6.2.4",
+    "babel-plugin-transform-object-assign": "^6.8.0",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "~6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.9.0",
     "css-loader": "^0.23.1",
     "dotenv": "^2.0.0",
+    "enzyme": "^2.4.1",
     "es6-promise": "^3.2.1",
     "eslint": "^3.3.1",
+    "eslint-plugin-react": "^6.1.2",
     "expose-loader": "~0.6.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest-cli": "^15.1.1",
+    "jsdom": "^9.5.0",
+    "react-addons-test-utils": "^15.3.1",
     "stats-webpack-plugin": "^0.2.1",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   },
   "dependencies": {
+    "c3": "^0.4.11",
     "datatables.net": "~1.10.12",
     "datatables.net-bs": "~1.10.12",
     "diff": "~3.0.0",
+    "events": "^1.1.1",
+    "flux": "^2.1.1",
     "ipaddr.js": "~1.2.0",
     "jquery": "~1.11.0",
     "jquery-flot": "~0.8.3",
@@ -37,16 +50,24 @@
     "jstz": "~1.0.7",
     "lodash": "~4.15.0",
     "multiselect": "~0.9.12",
+    "react": "^15.1.0",
+    "react-bootstrap": "^0.30.0",
+    "react-dom": "^15.1.0",
     "select2": "~3.5.2-browserify"
   },
   "scripts": {
     "lint": "./node_modules/.bin/eslint -c .eslintrc webpack/assets/**/*.js || exit 0",
-    "test": "jest"
+    "test": "node --harmony_proxies node_modules/.bin/jest"
   },
   "jest": {
     "automock": true,
     "unmockedModulePathPatterns": [
-      "jquery"
-    ]
+      "react",
+      "node_modules/"
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(png|gif)$": "identity-obj-proxy",
+      "^.+\\.(css)$": "identity-obj-proxy"
+    }
   }
 }

test/controllers/statistics_controller_test.rb

@@ -8,10 +8,10 @@ class StatisticsControllerTest < ActionController::TestCase
     assert_response :success
   end
 
-  test 'user with viewer rights should succeed in viewing statistics partial' do
+  test 'user with viewer rights should succeed in requesting statistics data via ajax' do
     @request.session[:user] = users(:one).id
     users(:one).roles = [Role.default, Role.find_by_name('Viewer')]
-    get :show, {:id => 'operatingsystem'}, set_session_user
+    get :show, {:id => 'operatingsystem', :format=>'json'}, set_session_user
     assert_response :success
   end
 end

test/integration/statistic_test.rb

@@ -1,15 +1,15 @@
 require 'integration_test_helper'
 
-class StatisticIntegrationTest < ActionDispatch::IntegrationTest
+class StatisticIntegrationTest < IntegrationTestWithJavascript
   test "statistics page" do
     visit statistics_path
-    assert page.has_selector?('h4', :text => "OS Distribution")
-    assert page.has_selector?('h4', :text => "Architecture Distribution")
-    assert page.has_selector?('h4', :text => "Environment Distribution")
-    assert page.has_selector?('h4', :text => "Number of CPUs")
-    assert page.has_selector?('h4', :text => "Hardware")
-    assert page.has_selector?('h4', :text => "Class Distribution")
-    assert page.has_selector?('h4', :text => "Average memory usage")
-    assert page.has_selector?('h4', :text => "Average swap usage")
+    assert page.has_selector?('h3', :text => "OS Distribution")
+    assert page.has_selector?('h3', :text => "Architecture Distribution")
+    assert page.has_selector?('h3', :text => "Environment Distribution")
+    assert page.has_selector?('h3', :text => "Number of CPUs")
+    assert page.has_selector?('h3', :text => "Hardware")
+    assert page.has_selector?('h3', :text => "Class Distribution")
+    assert page.has_selector?('h3', :text => "Average memory usage")
+    assert page.has_selector?('h3', :text => "Average swap usage")
   end
 end

test/integration/top_bar_test.rb

@@ -59,7 +59,7 @@ def setup
     within("div.navbar-inner") do
       click_link("Statistics")
     end
-    assert page.has_selector?('h4', :text => "OS Distribution")
+    assert page.has_selector?('h1', :text => "Statistics")
   end
 
   test "Trends link" do

test/unit/statistics_test.rb

@@ -12,7 +12,7 @@ def setup
   test 'it should include an Operating System stat' do
     os = Statistics.charts.detect {|s| s.id == 'operatingsystem'}
     assert_equal "operatingsystem", os.id
-    data = { :id=>"operatingsystem", :title=>"OS Distribution", :url=>"statistics/operatingsystem", :search=>"os_title=~VAL~" }
+    data = { :id=>"operatingsystem", :title=>"OS Distribution", :url=>"statistics/operatingsystem", :search=>"/hosts?search=os_title=~VAL~" }
     assert_equal data, os.metadata
   end
 

webpack/assets/javascripts/bundle.js

@@ -9,7 +9,12 @@ require('./bundle_flot');
 require('./bundle_multiselect');
 require('./bundle_select2');
 require('./bundle_datatables');
-window.tfm = {
-  tools: require('./foreman_tools'),
-  numFields: require('./jquery.ui.custom_spinners')
-};
+
+window.tfm = Object.assign(
+  window.tfm || {},
+  {
+    tools: require('./foreman_tools'),
+    numFields: require('./jquery.ui.custom_spinners'),
+    reactMounter: require('./react_app/common/MountingService')
+  }
+);

webpack/assets/javascripts/__tests__/foreman_tools.test.js → webpack/assets/javascripts/foreman_tools.test.js

@@ -1,5 +1,5 @@
-jest.unmock('../foreman_tools');
-const tools = require('../foreman_tools');
+jest.unmock('./foreman_tools');
+const tools = require('./foreman_tools');
 
 describe('iconText', () => {
   it('creates a label with the right icon class', () => {

webpack/assets/javascripts/react_app/API.js

@@ -0,0 +1,17 @@
+import ServerActions from './actions/ServerActions';
+
+export default {
+  getStatisticsData(url) {
+    $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
+      jqXHR.originalRequestOptions = originalOptions;
+    });
+    $.getJSON(url)
+      .success(
+        (rawStatistics, textStatus, jqXHR) => {
+          ServerActions.receivedStatistics(rawStatistics, textStatus, jqXHR);
+        })
+      .error((jqXHR, textStatus, errorThrown) => {
+        ServerActions.statisticsRequestError(jqXHR, textStatus, errorThrown);
+      });
+  }
+};