katello 3.7.0.rc1 → 3.7.0.rc2

data/webpack/scenes/RedHatRepositories/components/Search.js

@@ -43,7 +43,7 @@ class RepositorySearch extends Component {
 
   getAutoCompleteParams(search) {
     const params = {
-      organization_id: orgId,
+      organization_id: orgId(),
       search,
     };
 

data/webpack/scenes/RedHatRepositories/components/SearchBar.js

@@ -17,7 +17,7 @@ const filterOptions = [
   { value: 'rpm', label: __('RPM') },
   { value: 'sourceRpm', label: __('Source RPM') },
   { value: 'debugRpm', label: __('Debug RPM') },
-  { value: 'kickstarter', label: __('Kickstarter') },
+  { value: 'kickstart', label: __('Kickstart') },
   { value: 'ostree', label: __('OSTree') },
   { value: 'beta', label: __('Beta') },
   { value: 'other', label: __('Other') },

data/webpack/scenes/RedHatRepositories/components/__tests__/RecommendedRepositorySetsToggler.test.js

@@ -0,0 +1,17 @@
+import { testComponentSnapshotsWithFixtures } from '../../../../move_to_pf/test-utils/testHelpers';
+
+import RecommendedRepositorySetsToggler from '../RecommendedRepositorySetsToggler';
+
+const fixtures = {
+  'renders recommended-repository-sets-toggler': {
+    enabled: true,
+    className: 'some-class-name',
+    children: 'some-children',
+    help: 'some-help',
+    onChange: () => null,
+  },
+};
+
+describe('RecommendedRepositorySetsToggler', () => {
+  describe('rendering', () => testComponentSnapshotsWithFixtures(RecommendedRepositorySetsToggler, fixtures));
+});

data/webpack/scenes/RedHatRepositories/components/__tests__/__snapshots__/RecommendedRepositorySetsToggler.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RecommendedRepositorySetsToggler rendering renders recommended-repository-sets-toggler 1`] = `
+<div
+  className="recommended-repositories-toggler-container some-class-name"
+>
+  <Switch
+    animate={true}
+    baseClass="bootstrap-switch"
+    bsSize="mini"
+    defaultValue={true}
+    disabled={false}
+    handleWidth="auto"
+    inverse={false}
+    labelText=" "
+    labelWidth="auto"
+    offColor="default"
+    offText="OFF"
+    onChange={[Function]}
+    onColor="primary"
+    onText="ON"
+    readonly={false}
+    tristate={false}
+    value={true}
+    wrapperClass="wrapper"
+  />
+  <Icon
+    name="star"
+    type="fa"
+  />
+  some-children
+  <FieldLevelHelp
+    close="true"
+    content="some-help"
+  />
+</div>
+`;

data/webpack/scenes/RedHatRepositories/helpers.js

@@ -22,7 +22,7 @@ export const getSetsComponent = (repoSetsState, onPaginationChange) => {
       sprintf(
         __('No Red Hat products currently exist, please import a manifest %(anchorBegin)s here %(anchorEnd)s to receive Red Hat content. No repository sets available.'),
         {
-          anchorBegin: '<a href="/subscriptions/manifest/import">',
+          anchorBegin: '<a href="/subscriptions/">',
           anchorEnd: '</a>',
         },
       );

data/webpack/scenes/RedHatRepositories/index.js

@@ -6,11 +6,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Grid, Row, Col } from 'react-bootstrap';
-import { Spinner } from 'patternfly-react';
+import { LoadingState } from '../../move_to_pf/LoadingState';
 
 import { createEnabledRepoParams, loadEnabledRepos } from '../../redux/actions/RedHatRepositories/enabled';
-import { loadRepositorySets } from '../../redux/actions/RedHatRepositories/sets';
+import { loadRepositorySets, updateRecommendedRepositorySets } from '../../redux/actions/RedHatRepositories/sets';
 import SearchBar from './components/SearchBar';
+import RecommendedRepositorySetsToggler from './components/RecommendedRepositorySetsToggler';
 import { getSetsComponent, getEnabledComponent } from './helpers';
 
 class RedHatRepositoriesPage extends Component {
@@ -39,8 +40,15 @@ class RedHatRepositoriesPage extends Component {
 
         <Row className="row-eq-height">
           <Col sm={6} className="available-repositories-container">
-            <h2>{__('Available Repositories')}</h2>
-            <Spinner loading={repositorySets.loading}>
+            <div className="available-repositories-header">
+              <h2>{__('Available Repositories')}</h2>
+              <RecommendedRepositorySetsToggler
+                enabled={repositorySets.recommended}
+                onChange={value => this.props.updateRecommendedRepositorySets(value)}
+                className="recommended-repositories-toggler"
+              />
+            </div>
+            <LoadingState loading={repositorySets.loading} loadingText={__('Loading')}>
               {getSetsComponent(
                 repositorySets,
                 (pagination) => {
@@ -50,12 +58,12 @@ class RedHatRepositoriesPage extends Component {
                   });
                 },
               )}
-            </Spinner>
+            </LoadingState>
           </Col>
 
           <Col sm={6} className="enabled-repositories-container">
             <h2>{__('Enabled Repositories')}</h2>
-            <Spinner loading={enabledRepositories.loading} className="small-spacer">
+            <LoadingState loading={enabledRepositories.loading} loadingText={__('Loading')}>
               {getEnabledComponent(
                 enabledRepositories,
                 (pagination) => {
@@ -65,7 +73,7 @@ class RedHatRepositoriesPage extends Component {
                   });
                 },
               )}
-            </Spinner>
+            </LoadingState>
           </Col>
         </Row>
       </Grid>
@@ -76,6 +84,7 @@ class RedHatRepositoriesPage extends Component {
 RedHatRepositoriesPage.propTypes = {
   loadEnabledRepos: PropTypes.func.isRequired,
   loadRepositorySets: PropTypes.func.isRequired,
+  updateRecommendedRepositorySets: PropTypes.func.isRequired,
   enabledRepositories: PropTypes.shape({}).isRequired,
   repositorySets: PropTypes.shape({}).isRequired,
 };
@@ -88,4 +97,5 @@ const mapStateToProps = ({ katello: { redHatRepositories: { enabled, sets } } })
 export default connect(mapStateToProps, {
   loadEnabledRepos,
   loadRepositorySets,
+  updateRecommendedRepositorySets,
 })(RedHatRepositoriesPage);

data/webpack/scenes/RedHatRepositories/index.scss

@@ -15,10 +15,6 @@
   color: $color-pf-red-200;
 }
 
-.small-spacer {
-  margin: 10px 0;
-}
-
 #redhatRepositoriesPage {
   .list-group-item-header .list-view-pf-description,
   .enabled-repositories-container .list-view-pf-description {
@@ -33,9 +29,25 @@
     background-color: inherit;
   }
 
+  .recommended-repository-set-icon {
+    color: $color-pf-gold-300;
+    font-size: 2em;
+  }
+
   .available-repositories-container {
     background-color: $color-pf-white;
     border-right: $color-pf-black-300 2px solid;
+
+    .available-repositories-header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding-top: 20px;
+
+      h2 {
+        margin: 0;
+      }
+    }
   }
 
   .content-view-pf-pagination {

data/webpack/scenes/Subscriptions/Details/SubscriptionAttributes.js

@@ -0,0 +1,17 @@
+export default {
+  name: __('Name'),
+  description: __('Description'),
+  virt_who: __('Requires Virt-Who'),
+  consumed: __('Consumed'),
+  start_date: __('Starts'),
+  end_date: __('Ends'),
+  product_id: __('Product ID'),
+  contract_number: __('Contract Number'),
+  account_number: __('Account Number'),
+  support_level: __('Support Level'),
+  support_type: __('Support Type'),
+  arch: __('Architecture(s)'),
+  type: __('Type'),
+  mutli_entitlement: __('Multi-entitlement'),
+  stacking_id: __('Stacking ID'),
+};

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailActions.js

@@ -0,0 +1,28 @@
+import api, { orgId } from '../../../services/api';
+import {
+  SUBSCRIPTION_DETAILS_REQUEST,
+  SUBSCRIPTION_DETAILS_SUCCESS,
+  SUBSCRIPTION_DETAILS_FAILURE,
+} from './SubscriptionDetailConstants';
+import { getResponseError } from '../../../move_to_foreman/common/helpers.js';
+
+export const loadSubscriptionDetails = subscriptionId => (dispatch) => {
+  dispatch({ type: SUBSCRIPTION_DETAILS_REQUEST });
+
+  return api
+    .get(`/organizations/${orgId()}/subscriptions/${subscriptionId}`)
+    .then(({ data }) => {
+      dispatch({
+        type: SUBSCRIPTION_DETAILS_SUCCESS,
+        response: data,
+      });
+    })
+    .catch((result) => {
+      dispatch({
+        type: SUBSCRIPTION_DETAILS_FAILURE,
+        error: getResponseError(result.response),
+      });
+    });
+};
+
+export default loadSubscriptionDetails;

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailAssociations.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+import helpers from '../../../move_to_foreman/common/helpers.js';
+
+const SubscriptionDetailAssociations = ({ subscriptionDetails }) => {
+  const searchQuery = 'subscription_id="%s"'.replace('%s', subscriptionDetails.id);
+
+  return (
+    <div>
+      <h2>{__('Associations')}</h2>
+      <Table striped bordered condensed hover>
+        <thead>
+          <tr>
+            <td><b>{__('Resource')}</b></td>
+            <td><b>{__('Quantity')}</b></td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{__('Content Hosts')}</td>
+            <td>
+              <a href={helpers.urlWithSearch('content_hosts', searchQuery)}>
+                {subscriptionDetails.host_count}
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td>{__('Activation Keys')}</td>
+            <td>
+              <a href={helpers.urlWithSearch('activation_keys', searchQuery)}>
+                {subscriptionDetails.activation_keys &&
+                  subscriptionDetails.activation_keys.length}
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
+SubscriptionDetailAssociations.propTypes = {
+  subscriptionDetails: PropTypes.shape({}).isRequired,
+};
+
+export default SubscriptionDetailAssociations;

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailConstants.js

@@ -0,0 +1,3 @@
+export const SUBSCRIPTION_DETAILS_REQUEST = 'SUBSCRIPTION_DETAILS_REQUEST';
+export const SUBSCRIPTION_DETAILS_SUCCESS = 'SUBSCRIPTION_DETAILS_SUCCESS';
+export const SUBSCRIPTION_DETAILS_FAILURE = 'SUBSCRIPTION_DETAILS_FAILURE';

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailInfo.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+import subscriptionAttributes from './SubscriptionAttributes';
+
+const SubscriptionDetailInfo = ({ subscriptionDetails }) => {
+  const subscriptionLimits = (subDetails) => {
+    const limits = [];
+    if (subDetails.sockets) {
+      limits.push(__('Sockets: %s').replace('%s', subDetails.sockets));
+    }
+    if (subDetails.cores) {
+      limits.push(__('Cores: %s').replace('%s', subDetails.cores));
+    }
+    if (subDetails.ram) {
+      limits.push(__('RAM: %s GB').replace('%s', subDetails.ram));
+    }
+    if (limits.length > 0) {
+      return limits.join(', ');
+    }
+    return '';
+  };
+
+  const subscriptionDetailValue = (subDetails, key) => (subDetails[key] == null ? '' : String(subDetails[key]));
+
+  const formatInstanceBased = (subDetails) => {
+    if (subDetails.instance_multiplier == null ||
+        subDetails.instance_multiplier === '' ||
+        subDetails.instance_multiplier === 0) {
+      return __('No');
+    }
+    return __('Yes');
+  };
+
+  return (
+    <div>
+      <h2>{__('Subscription Info')}</h2>
+      <Table>
+        <tbody>
+          {Object.keys(subscriptionAttributes).map(key => (
+            <tr key={key}>
+              <td><b>{__(subscriptionAttributes[key])}</b></td>
+              <td>{subscriptionDetailValue(subscriptionDetails, key)}</td>
+            </tr>
+            ))}
+          <tr>
+            <td><b>{__('Limits')}</b></td>
+            <td>{subscriptionLimits(subscriptionDetails)}</td>
+          </tr>
+          <tr>
+            <td><b>{__('Instance-based')}</b></td>
+            <td>{formatInstanceBased(subscriptionDetails)}</td>
+          </tr>
+        </tbody>
+      </Table>
+
+    </div>
+  );
+};
+
+SubscriptionDetailInfo.propTypes = {
+  subscriptionDetails: PropTypes.shape({}).isRequired,
+};
+
+export default SubscriptionDetailInfo;

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailProducts.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SubscriptionDetailProducts = ({ subscriptionDetails }) => (
+  <div>
+    <h2>{__('Provided Products')}</h2>
+    <ul>
+      {subscriptionDetails.provided_products &&
+        subscriptionDetails.provided_products.map(prod => (
+          <li key={prod.id}>{prod.name}</li>
+          ))}
+    </ul>
+  </div>
+);
+
+SubscriptionDetailProducts.propTypes = {
+  subscriptionDetails: PropTypes.shape({}).isRequired,
+};
+
+export default SubscriptionDetailProducts;

data/webpack/scenes/Subscriptions/Details/SubscriptionDetailReducer.js

@@ -0,0 +1,37 @@
+import Immutable from 'seamless-immutable';
+import {
+  SUBSCRIPTION_DETAILS_REQUEST,
+  SUBSCRIPTION_DETAILS_SUCCESS,
+  SUBSCRIPTION_DETAILS_FAILURE,
+} from './SubscriptionDetailConstants';
+
+const initialState = Immutable({
+  loading: false,
+});
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SUBSCRIPTION_DETAILS_REQUEST: {
+      return state.set('loading', true);
+    }
+
+    case SUBSCRIPTION_DETAILS_SUCCESS: {
+      const subscriptionDetails = action.response;
+
+      return state.merge({
+        ...subscriptionDetails,
+        loading: false,
+      });
+    }
+
+    case SUBSCRIPTION_DETAILS_FAILURE: {
+      return state.merge({
+        error: action.error,
+        loading: false,
+      });
+    }
+
+    default:
+      return state;
+  }
+};

data/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Row, Col } from 'patternfly-react';
+import SubscriptionDetailInfo from './SubscriptionDetailInfo';
+import SubscriptionDetailAssociations from './SubscriptionDetailAssociations';
+import SubscriptionDetailProducts from './SubscriptionDetailProducts';
+import { LoadingState } from '../../../move_to_pf/LoadingState';
+import { notify } from '../../../move_to_foreman/foreman_toast_notifications';
+
+class SubscriptionDetails extends Component {
+  componentDidMount() {
+    // eslint-disable-next-line react/prop-types
+    const routerParams = this.props.match.params;
+    this.props.loadSubscriptionDetails(parseInt(routerParams.id, 10));
+  }
+
+  render() {
+    const { subscriptionDetails } = this.props;
+
+    if (subscriptionDetails.error) { notify({ message: subscriptionDetails.error }); }
+
+    return (
+      <Grid bsClass="container-fluid">
+        <div>
+          <LoadingState loading={subscriptionDetails.loading} loadingText={__('Loading')}>
+            <Row>
+              <Col sm={12}>
+                <h1>{subscriptionDetails.name}</h1>
+              </Col>
+            </Row>
+            <Row>
+              <Col sm={6}>
+                <SubscriptionDetailInfo
+                  subscriptionDetails={subscriptionDetails}
+                />
+              </Col>
+              <Col sm={6}>
+                <SubscriptionDetailAssociations
+                  subscriptionDetails={subscriptionDetails}
+                />
+                <SubscriptionDetailProducts
+                  subscriptionDetails={subscriptionDetails}
+                />
+              </Col>
+            </Row>
+          </LoadingState>
+        </div>
+      </Grid>
+    );
+  }
+}
+
+SubscriptionDetails.propTypes = {
+  loadSubscriptionDetails: PropTypes.func.isRequired,
+  subscriptionDetails: PropTypes.shape({}).isRequired,
+};
+
+export default SubscriptionDetails;