foreman_rh_cloud 1.0.9 → 1.0.13.1

data/webpack/InsightsCloudSync/InsightsCloudSync.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Button, Icon } from 'patternfly-react';
 import { INSIGHTS_SYNC_PAGE_TITLE } from './InsightsCloudSyncConstants';
+import InsightsSettings from './Components/InsightsSettings';
 
 const InsightsCloudSync = ({ data: { settingsUrl }, syncInsights }) => {
   document.title = INSIGHTS_SYNC_PAGE_TITLE;
@@ -11,34 +12,37 @@ const InsightsCloudSync = ({ data: { settingsUrl }, syncInsights }) => {
     <IntlProvider locale={navigator.language}>
       <div className="insights-cloud-sync">
         <h1>{__('Red Hat Insights Sync')}</h1>
-        <p>
-          {__(`Insights synchronization process is used to provide Insights
-           recommendations output for hosts managed here`)}
-        </p>
-        <p>
-          {__(`1. Obtain an RHSM API token: `)}
-          <a
-            href="https://access.redhat.com/management/api"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            access.redhat.com <Icon name="external-link" size="xs" />
-          </a>
-          <br />
-          {__("2. Copy the token to 'Red Hat Cloud token' setting: ")}
-          <a href={settingsUrl} target="_blank" rel="noopener noreferrer">
-            {__('Red Hat Cloud token ')}
-            <Icon name="external-link" size="xs" />
-          </a>
-          <br />
-          {__(
-            '3. Now you can syncronize recommendations manually using the "Sync now" button.'
-          )}
-        </p>
-        <div>
-          <Button bsStyle="primary" onClick={syncInsights}>
-            {__('Sync now')}
-          </Button>
+        <div className="insights-cloud-sync-body">
+          <InsightsSettings />
+          <p>
+            {__(`Insights synchronization process is used to provide Insights
+             recommendations output for hosts managed here`)}
+          </p>
+          <p>
+            {__(`1. Obtain an RHSM API token: `)}
+            <a
+              href="https://access.redhat.com/management/api"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              access.redhat.com <Icon name="external-link" size="xs" />
+            </a>
+            <br />
+            {__("2. Copy the token to 'Red Hat Cloud token' setting: ")}
+            <a href={settingsUrl} target="_blank" rel="noopener noreferrer">
+              {__('Red Hat Cloud token ')}
+              <Icon name="external-link" size="xs" />
+            </a>
+            <br />
+            {__(
+              '3. Now you can synchronize recommendations manually using the "Sync now" button.'
+            )}
+          </p>
+          <div>
+            <Button bsStyle="primary" onClick={syncInsights}>
+              {__('Sync now')}
+            </Button>
+          </div>
         </div>
       </div>
     </IntlProvider>

data/webpack/InsightsCloudSync/InsightsCloudSyncActions.js

@@ -1,9 +1,7 @@
 import API from 'foremanReact/API';
+import { addToast } from 'foremanReact/redux/actions/toasts';
 import { insightsCloudUrl } from './InsightsCloudSyncHelpers';
-import {
-  INSIGHTS_CLOUD_SYNC_SUCCESS,
-  INSIGHTS_CLOUD_SYNC_FAILURE,
-} from './InsightsCloudSyncConstants';
+import { INSIGHTS_CLOUD_SYNC_SUCCESS } from './InsightsCloudSyncConstants';
 
 export const syncInsights = () => async dispatch => {
   try {
@@ -12,12 +10,13 @@ export const syncInsights = () => async dispatch => {
       type: INSIGHTS_CLOUD_SYNC_SUCCESS,
       payload: {},
     });
-  } catch (error) {
-    dispatch({
-      type: INSIGHTS_CLOUD_SYNC_FAILURE,
-      payload: {
-        error: error.message,
-      },
-    });
+  } catch ({ message }) {
+    dispatch(
+      addToast({
+        sticky: true,
+        type: 'error',
+        message,
+      })
+    );
   }
 };

data/webpack/InsightsCloudSync/InsightsCloudSyncConstants.js

@@ -1,6 +1,4 @@
 import { translate as __ } from 'foremanReact/common/I18n';
 
 export const INSIGHTS_CLOUD_SYNC_SUCCESS = 'INSIGHTS_CLOUD_SYNC_SUCCESS';
-export const INSIGHTS_CLOUD_SYNC_FAILURE = 'INSIGHTS_CLOUD_SYNC_FAILURE';
-
 export const INSIGHTS_SYNC_PAGE_TITLE = __('Red Hat Insights cloud sync');

data/webpack/InsightsCloudSync/InsightsCloudSyncReducers.js

@@ -1,3 +1,8 @@
-const reducers = {};
+import { combineReducers } from 'redux';
+import { reducers as settingsReducers } from './Components/InsightsSettings';
 
-export default reducers;
+export default {
+  InsightsCloudSync: combineReducers({
+    ...settingsReducers,
+  }),
+};

data/webpack/InsightsCloudSync/__snapshots__/InsightsCloudSync.test.js.snap

@@ -10,52 +10,57 @@ exports[`InsightsCloudSync render 1`] = `
     <h1>
       Red Hat Insights Sync
     </h1>
-    <p>
-      Insights synchronization process is used to provide Insights
-           recommendations output for hosts managed here
-    </p>
-    <p>
-      1. Obtain an RHSM API token: 
-      <a
-        href="https://access.redhat.com/management/api"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        access.redhat.com 
-        <Icon
-          name="external-link"
-          size="xs"
-          type="fa"
-        />
-      </a>
-      <br />
-      2. Copy the token to 'Red Hat Cloud token' setting: 
-      <a
-        href="www.example.com/settings"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Red Hat Cloud token 
-        <Icon
-          name="external-link"
-          size="xs"
-          type="fa"
-        />
-      </a>
-      <br />
-      3. Now you can syncronize recommendations manually using the "Sync now" button.
-    </p>
-    <div>
-      <Button
-        active={false}
-        block={false}
-        bsClass="btn"
-        bsStyle="primary"
-        disabled={false}
-        onClick={[Function]}
-      >
-        Sync now
-      </Button>
+    <div
+      className="insights-cloud-sync-body"
+    >
+      <Connect(InsightsSettings) />
+      <p>
+        Insights synchronization process is used to provide Insights
+             recommendations output for hosts managed here
+      </p>
+      <p>
+        1. Obtain an RHSM API token: 
+        <a
+          href="https://access.redhat.com/management/api"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          access.redhat.com 
+          <Icon
+            name="external-link"
+            size="xs"
+            type="fa"
+          />
+        </a>
+        <br />
+        2. Copy the token to 'Red Hat Cloud token' setting: 
+        <a
+          href="www.example.com/settings"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Red Hat Cloud token 
+          <Icon
+            name="external-link"
+            size="xs"
+            type="fa"
+          />
+        </a>
+        <br />
+        3. Now you can synchronize recommendations manually using the "Sync now" button.
+      </p>
+      <div>
+        <Button
+          active={false}
+          block={false}
+          bsClass="btn"
+          bsStyle="primary"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Sync now
+        </Button>
+      </div>
     </div>
   </div>
 </IntlProvider>

data/webpack/InsightsCloudSync/index.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import * as actions from './InsightsCloudSyncActions';
 import InsightsCloudSync from './InsightsCloudSync';
+import insightsCloudSyncReducers from './InsightsCloudSyncReducers';
 
 // map state to props
 const mapStateToProps = state => ({});
@@ -11,7 +12,7 @@ const mapStateToProps = state => ({});
 const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
 
 // export reducers
-export const reducers = {};
+export const reducers = insightsCloudSyncReducers;
 
 // export connected component
 export default connect(mapStateToProps, mapDispatchToProps)(InsightsCloudSync);

data/webpack/InsightsHostDetailsTab/InsightsTab.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { orderBy } from 'lodash';
+import { Grid, ListView, noop } from 'patternfly-react';
+import ListItem from './components/ListItem';
+import './InsightsTab.scss';
+
+class InsightsHostDetailsTab extends React.Component {
+  componentDidMount() {
+    const { fetchHits, hostID } = this.props;
+    fetchHits(hostID);
+  }
+
+  render() {
+    const { hits } = this.props;
+
+    if (!hits.length) {
+      return <h2>No recommendations were found for this host!</h2>;
+    }
+    const hitsSorted = orderBy(hits, ['insights_hit.total_risk'], ['desc']);
+    const items = hitsSorted.map(
+      (
+        {
+          insights_hit: {
+            title,
+            total_risk: totalRisk,
+            results_url: resultsUrl,
+            solution_url: solutionUrl,
+          },
+        },
+        index
+      ) => (
+        <ListItem
+          key={index}
+          title={title}
+          totalRisk={totalRisk}
+          resultsUrl={resultsUrl}
+          solutionUrl={solutionUrl}
+        />
+      )
+    );
+    return (
+      <Grid.Row>
+        <Grid.Col xs={12}>
+          <h2>Recommendations</h2>
+          <ListView id="hits_list">{items}</ListView>
+        </Grid.Col>
+      </Grid.Row>
+    );
+  }
+}
+
+InsightsHostDetailsTab.propTypes = {
+  hostID: PropTypes.number.isRequired,
+  fetchHits: PropTypes.func,
+  hits: PropTypes.array,
+};
+
+InsightsHostDetailsTab.defaultProps = {
+  fetchHits: noop,
+  hits: [],
+};
+
+export default InsightsHostDetailsTab;

data/webpack/InsightsHostDetailsTab/InsightsTab.scss

@@ -0,0 +1,86 @@
+#host_details_insights_react_container {
+  #btn_toolbar {
+    float: right;
+  }
+
+  #btn_fullscreen {
+    margin-left: 5px;
+
+    .fa-arrows-alt {
+      margin-left: 5px;
+    }
+  }
+
+  h2 {
+    margin-top: 5px;
+  }
+
+  #hits_list {
+    max-height: 650px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    margin-top: 15px;
+
+    .list-view-pf-expand {
+      padding: 0;
+    }
+
+    .list-group-item-header {
+      .list-view-pf-expand .fa-angle-right {
+        margin-top: 6px;
+      }
+
+      .list-view-pf-main-info .list-view-pf-description {
+        width: 83%;
+
+        .list-group-item-heading {
+          width: 375px;
+        }
+
+        p {
+          margin: 0;
+          font-size: 14px;
+        }
+      }
+
+      .list-view-pf-additional-info {
+        .risk-label {
+          padding: 5px 8px;
+          border-radius: 12px;
+
+          &.Low {
+            background-color: #e7f1fa;
+          }
+
+          &.Moderate {
+            background-color: #fdf7e7;
+          }
+
+          &.Important {
+            background-color: #f9dddd;
+          }
+
+          &.Critical {
+            background-color: #ffecec;
+          }
+
+          p {
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #222;
+      border-radius: 6px;
+      border: 3px solid transparent;
+      background-clip: content-box;
+    }
+  }
+}

data/webpack/InsightsHostDetailsTab/InsightsTabActions.js

@@ -0,0 +1,31 @@
+import API from 'foremanReact/API';
+import { addToast } from 'foremanReact/redux/actions/toasts';
+import { insightsCloudUrl } from '../InsightsCloudSync/InsightsCloudSyncHelpers';
+import {
+  INSIGHTS_HITS_REQUEST,
+  INSIGHTS_HITS_SUCCESS,
+} from './InsightsTabConstants';
+
+export const fetchHits = hostID => async dispatch => {
+  try {
+    dispatch({
+      type: INSIGHTS_HITS_REQUEST,
+      payload: {},
+    });
+    const {
+      data: { hits },
+    } = await API.get(insightsCloudUrl(`hits/${hostID}`));
+    dispatch({
+      type: INSIGHTS_HITS_SUCCESS,
+      payload: { hits },
+    });
+  } catch ({ message }) {
+    dispatch(
+      addToast({
+        sticky: true,
+        type: 'error',
+        message,
+      })
+    );
+  }
+};

data/webpack/InsightsHostDetailsTab/InsightsTabConstants.js

@@ -0,0 +1,2 @@
+export const INSIGHTS_HITS_REQUEST = 'INSIGHTS_HITS_REQUEST';
+export const INSIGHTS_HITS_SUCCESS = 'INSIGHTS_HITS_SUCCESS';

data/webpack/InsightsHostDetailsTab/InsightsTabReducer.js

@@ -0,0 +1,19 @@
+import Immutable from 'seamless-immutable';
+import { INSIGHTS_HITS_SUCCESS } from './InsightsTabConstants';
+
+const initialState = Immutable({
+  hits: [],
+});
+
+export default (state = initialState, action) => {
+  const { payload: { hits } = {} } = action;
+
+  switch (action.type) {
+    case INSIGHTS_HITS_SUCCESS:
+      return state.merge({
+        hits,
+      });
+    default:
+      return state;
+  }
+};