Fixes #26434 - move system statuses from deface to react

app/overrides/add_about_page.rb

@@ -1,10 +1,3 @@
-# Add System Status to About page
-Deface::Override.new(:virtual_path => "about/index",
-                     :name => "add_system_status_to_about",
-                     :insert_bottom => '#about',
-                     :partial => 'overrides/about/system_status'
-                    )
-
 # Add Installed Packages to About page
 Deface::Override.new(:virtual_path => "about/index",
                      :name => "add_installed_packages_to_about",

lib/katello/plugin.rb

@@ -200,7 +200,8 @@
 
   allowed_template_helpers :subscription_manager_configuration_url, :repository_url
   extend_template_helpers Katello::KatelloUrlsHelper
-
+  register_global_js_file 'fills'
+
   search_path_override("Katello") do |resource|
     "/#{Katello::Util::Model.model_to_controller_path(resource)}/auto_complete_search"
   end

webpack/components/extensions/about/SystemStatuses.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { LoadingState } from '../../../move_to_pf/LoadingState';
+
+class SystemStatuses extends Component {
+  componentDidMount() {
+    this.props.getSystemStatuses('/katello/api/ping');
+  }
+
+  render() {
+    const { services, status } = this.props;
+    const isLoaidng = status === 'PENDING';
+
+    return (
+      <div className="col-md-7 stats-well">
+        <h4>{__('Backend System Status')}</h4>
+        <table className="table table-fixed table-striped table-border">
+          <tr>
+            <th>{__('Component')}</th>
+            <th>{__('Status')}</th>
+            <th>{__('Message')}</th>
+          </tr>
+          <LoadingState loading={isLoaidng} loadingText="">
+            <tbody>
+              {Object.entries(services).map(([key, value]) => (
+                <tr key={key}>
+                  <td> {key} </td>
+                  <td>{value.status.toUpperCase()}</td>
+                  <td> {value.message}</td>
+                </tr>
+            ))}
+            </tbody>
+          </LoadingState>
+        </table>
+      </div>
+    );
+  }
+}
+
+SystemStatuses.propTypes = {
+  getSystemStatuses: PropTypes.func.isRequired,
+  services: PropTypes.shape({}),
+  status: PropTypes.string,
+};
+
+SystemStatuses.defaultProps = {
+  services: {},
+  status: '',
+};
+
+export default SystemStatuses;

webpack/components/extensions/about/SystemStatusesActions.js

@@ -0,0 +1,15 @@
+import {
+    SYSTEM_STATUSES_FAILURE,
+    SYSTEM_STATUSES_SUCCESS,
+    SYSTEM_STATUSES_REQUEST,
+  } from './SystemStatusesConsts';
+import { ajaxRequestAction } from 'foremanReact/redux/actions/common';
+
+export const getSystemStatuses = url => dispatch =>
+  ajaxRequestAction({
+    dispatch,
+    requestAction: SYSTEM_STATUSES_REQUEST,
+    successAction: SYSTEM_STATUSES_SUCCESS,
+    failedAction: SYSTEM_STATUSES_FAILURE,
+    url,
+  });

webpack/components/extensions/about/SystemStatusesConsts.js

@@ -0,0 +1,3 @@
+export const SYSTEM_STATUSES_REQUEST = 'SYSTEM_STATUSES_REQUEST';
+export const SYSTEM_STATUSES_SUCCESS = 'SYSTEM_STATUSES_SUCCESS';
+export const SYSTEM_STATUSES_FAILURE = 'SYSTEM_STATUSES_FAILURE';

webpack/components/extensions/about/SystemStatusesReducer.js

@@ -0,0 +1,26 @@
+import Immutable from 'seamless-immutable';
+import {
+  SYSTEM_STATUSES_FAILURE,
+  SYSTEM_STATUSES_SUCCESS,
+  SYSTEM_STATUSES_REQUEST,
+} from './SystemStatusesConsts';
+
+const initialState = Immutable({
+  services: [],
+  loaderStatus: '',
+});
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SYSTEM_STATUSES_REQUEST:
+      return state.set('loaderStatus', 'PENDING');
+    case SYSTEM_STATUSES_SUCCESS:
+      return state
+        .set('services', action.payload.services)
+        .set('loaderStatus', 'RESOLVED');
+    case SYSTEM_STATUSES_FAILURE:
+      return state.set('loaderStatus', 'ERROR');
+    default:
+      return state;
+  }
+};

webpack/components/extensions/about/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import * as actions from './SystemStatusesActions';
+import reducer from './SystemStatusesReducer';
+
+import FactChart from './SystemStatuses';
+
+const mapStateToProps = state => ({
+  services: state.katelloExtends.systemServices.services || [],
+  status: state.katelloExtends.systemServices.loaderStatus,
+});
+
+// export reducers
+export const reducers = { systemServices: reducer };
+
+export default connect(
+  mapStateToProps,
+  actions,
+)(FactChart);

webpack/components/extensions/reducers.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { reducers as systemStatuses } from './about';
+
+export default combineReducers({
+  ...systemStatuses,
+});

webpack/fills_index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import SystemStatuses from './components/extensions/about';
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+
+import { registerReducer } from 'foremanReact/common/MountingService';
+import extendReducer from './components/extensions/reducers';
+
+registerReducer('katelloExtends', extendReducer);
+
+addGlobalFill('aboutFooterSlot', '[katello]AboutSystemStatuses', <SystemStatuses key="abc" />, 300);

webpack/redux/reducers/index.js

@@ -10,6 +10,7 @@ import { setOrganization } from '../../components/SelectOrg/SetOrganization';
 import { moduleStreams } from '../../scenes/ModuleStreams';
 import { reducers as organizationProductsReducers } from '../OrganizationProducts';
 import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
+import { reducers as systemStatuses } from '../../components/extensions/about';
 
 export default combineReducers({
   organization,
@@ -23,4 +24,5 @@ export default combineReducers({
   moduleStreams,
   moduleStreamDetails,
   ...organizationProductsReducers,
+  ...systemStatuses,
 });