foreman_rh_cloud 0.9.8 → 0.9.13

data/webpack/InsightsCloudSync/Components/InsightsSettings/__tests__/__snapshots__/InsightsSettingsReducer.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InsightsSettings reducer should handle INSIGHTS_SYNC_SETTING_SET 1`] = `
+Object {
+  "insightsSyncEnabled": true,
+}
+`;
+
+exports[`InsightsSettings reducer should handle INSIGHTS_SYNC_SETTINGS_GET_SUCCESS 1`] = `
+Object {
+  "insightsSyncEnabled": true,
+}
+`;
+
+exports[`InsightsSettings reducer should return the initial state 1`] = `
+Object {
+  "insightsSyncEnabled": false,
+}
+`;

data/webpack/InsightsCloudSync/Components/InsightsSettings/__tests__/__snapshots__/InsightsSettingsSelectors.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InsightsSettings selectors should return insights sync settings 1`] = `
+Object {
+  "insightsSyncEnabled": true,
+}
+`;
+
+exports[`InsightsSettings selectors should return insightsSyncEnabled setting 1`] = `true`;

data/webpack/InsightsCloudSync/Components/InsightsSettings/index.js

@@ -0,0 +1,21 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import InsightsSettings from './InsightsSettings';
+import { selectInsightsSyncEnabled } from './InsightsSettingsSelectors';
+import * as actions from './InsightsSettingsActions';
+import reducer from './InsightsSettingsReducer';
+
+// map state to props
+const mapStateToProps = state => ({
+  insightsSyncEnabled: selectInsightsSyncEnabled(state),
+});
+
+// map action dispatchers to props
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
+
+// export connected component
+export default connect(mapStateToProps, mapDispatchToProps)(InsightsSettings);
+
+// export reducers
+export const reducers = { settings: reducer };

data/webpack/InsightsCloudSync/Components/InsightsSettings/insightsSettings.scss

@@ -0,0 +1,16 @@
+.insights_settings {
+  border: 1px solid #ededed;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 15px;
+  float: right;
+
+  h3 {
+    margin-top: 0;
+    font-weight: 600;
+  }
+
+  .bootstrap-switch {
+    float: right;
+  }
+}

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/InsightsSyncSwitcher.fixtures.js

@@ -0,0 +1 @@
+export const handleToggleResponse = { data: { insightsSyncEnabled: true } };

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/InsightsSyncSwitcher.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Switch, FieldLevelHelp } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import './insightsSyncSwitcher.scss';
+
+class InsightsSyncSwitcher extends Component {
+  handleToggle = () => {
+    const { insightsSyncEnabled, setInsightsSyncEnabled } = this.props;
+
+    const toggledInsightsSyncEnabled = !insightsSyncEnabled;
+    setInsightsSyncEnabled(toggledInsightsSyncEnabled);
+  };
+
+  render() {
+    const { insightsSyncEnabled } = this.props;
+
+    return (
+      <div className="insights_sync_switcher">
+        <span>Synchronize Automatically</span>
+        <FieldLevelHelp
+          content={__(
+            'Enable automatic synchronization of Insights recommendations from the Red Hat cloud'
+          )}
+        />
+        <Switch
+          size="mini"
+          value={insightsSyncEnabled}
+          onChange={this.handleToggle}
+        />
+      </div>
+    );
+  }
+}
+
+InsightsSyncSwitcher.propTypes = {
+  insightsSyncEnabled: PropTypes.bool,
+  setInsightsSyncEnabled: PropTypes.func.isRequired,
+};
+
+InsightsSyncSwitcher.defaultProps = {
+  insightsSyncEnabled: true,
+};
+
+export default InsightsSyncSwitcher;

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/__tests__/InsightsSyncSwitcher.test.js

@@ -0,0 +1,17 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { noop } from 'patternfly-react';
+
+import InsightsSyncSwitcher from '../InsightsSyncSwitcher';
+
+const fixtures = {
+  'render with props': {
+    insightsSyncEnabled: true,
+    setInsightsSyncEnabled: noop,
+  },
+  /** fixtures, props for the component */
+};
+
+describe('InsightsSyncSwitcher', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(InsightsSyncSwitcher, fixtures));
+});

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/__tests__/__snapshots__/InsightsSyncSwitcher.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InsightsSyncSwitcher rendering render with props 1`] = `
+<div
+  className="insights_sync_switcher"
+>
+  <span>
+    Synchronize Automatically
+  </span>
+  <FieldLevelHelp
+    buttonClass=""
+    content="Enable automatic synchronization of Insights recommendations from the Red Hat cloud"
+    placement="top"
+    rootClose={true}
+  />
+  <Switch
+    animate={true}
+    baseClass="bootstrap-switch"
+    bsSize={null}
+    defaultValue={true}
+    disabled={false}
+    handleWidth="auto"
+    inverse={false}
+    labelText=" "
+    labelWidth="auto"
+    offColor="default"
+    offText="OFF"
+    onChange={[Function]}
+    onColor="primary"
+    onText="ON"
+    readonly={false}
+    size="mini"
+    tristate={false}
+    value={true}
+    wrapperClass="wrapper"
+  />
+</div>
+`;

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/index.js

@@ -0,0 +1 @@
+export { default } from './InsightsSyncSwitcher';

data/webpack/InsightsCloudSync/Components/InsightsSyncSwitcher/insightsSyncSwitcher.scss

@@ -0,0 +1,3 @@
+.insights_sync_switcher {
+  margin-bottom: 5px;
+}

data/webpack/InsightsCloudSync/InsightsCloudSync.js

@@ -2,18 +2,48 @@ import React from 'react';
 import { IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Button } from 'patternfly-react';
+import { Button, Icon } from 'patternfly-react';
 import { INSIGHTS_SYNC_PAGE_TITLE } from './InsightsCloudSyncConstants';
+import InsightsSettings from './Components/InsightsSettings';
 
-const InsightsCloudSync = ({ syncInsights }) => {
+const InsightsCloudSync = ({ data: { settingsUrl }, syncInsights }) => {
   document.title = INSIGHTS_SYNC_PAGE_TITLE;
   return (
     <IntlProvider locale={navigator.language}>
       <div className="insights-cloud-sync">
         <h1>{__('Red Hat Insights Sync')}</h1>
-        <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" />
+            </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" />
+            </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>
   );
@@ -21,6 +51,9 @@ const InsightsCloudSync = ({ syncInsights }) => {
 
 InsightsCloudSync.propTypes = {
   syncInsights: PropTypes.func.isRequired,
+  data: PropTypes.shape({
+    settingsUrl: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default InsightsCloudSync;

data/webpack/InsightsCloudSync/InsightsCloudSync.test.js

@@ -6,6 +6,9 @@ import InsightsCloudSync from './InsightsCloudSync';
 const fixtures = {
   render: {
     syncInsights: noop,
+    data: {
+      settingsUrl: 'www.example.com/settings',
+    },
   },
 };
 

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,16 +10,56 @@ exports[`InsightsCloudSync render 1`] = `
     <h1>
       Red Hat Insights Sync
     </h1>
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="primary"
-      disabled={false}
-      onClick={[Function]}
+    <div
+      className="insights-cloud-sync-body"
     >
-      Sync now
-    </Button>
+      <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"
+            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"
+            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;