katello 3.6.0.1.rc2 → 3.7.0.rc1

data/webpack/scenes/Subscriptions/SubscriptionValidations.js

@@ -0,0 +1,25 @@
+import { filterRHSubscriptions } from './SubscriptionHelpers.js';
+
+export const validateQuantity = (quantity, availableQuantity) => {
+  let state;
+  let message;
+
+  const numberValue = Number(quantity);
+  if (Number.isNaN(numberValue)) {
+    state = 'error';
+    message = __('Not a number');
+  } else if (numberValue < 0) {
+    state = 'error';
+    message = __('Has to be > 0');
+  } else if (availableQuantity && availableQuantity >= 0 && numberValue > availableQuantity) {
+    state = 'error';
+    message = __('Exceeds available quantity');
+  }
+  return {
+    state,
+    message,
+  };
+};
+
+export const recordsValid = rows =>
+  filterRHSubscriptions(rows).every(row => validateQuantity(row.quantity, row.availableQuantity).state !== 'error');

data/webpack/scenes/Subscriptions/Subscriptions.scss

@@ -0,0 +1,14 @@
+@import '~patternfly/dist/sass/patternfly/variables';
+@import '~patternfly-react/dist/sass/inline-edit';
+
+.editable {
+  &.changed {
+    font-weight: bold;
+  }
+}
+
+.pf-table-inline-edit {
+  .form-group {
+    margin-bottom: 0;
+  }
+}

data/webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -0,0 +1,275 @@
+import React, { Component } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import PropTypes from 'prop-types';
+import { LinkContainer } from 'react-router-bootstrap';
+import { Grid, Row, Col, Form, FormGroup } from 'react-bootstrap';
+import { Button } from 'patternfly-react';
+import TooltipButton from 'react-bootstrap-tooltip-button';
+import { notify } from '../../move_to_foreman/foreman_toast_notifications';
+import helpers from '../../move_to_foreman/common/helpers';
+import ModalProgressBar from '../../move_to_foreman/components/common/ModalProgressBar';
+import ManageManifestModal from './Manifest/';
+import SubscriptionsTable from './SubscriptionsTable';
+import Search from '../../components/Search/index';
+import api, { orgId } from '../../services/api';
+import { createSubscriptionParams } from './SubscriptionActions.js';
+import {
+  BLOCKING_FOREMAN_TASK_TYPES,
+  MANIFEST_TASKS_BULK_SEARCH_ID,
+  BULK_TASK_SEARCH_INTERVAL,
+} from './SubscriptionConstants';
+
+
+class SubscriptionsPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      manifestModalOpen: false,
+      subscriptionDeleteModalOpen: false,
+      disableDeleteButton: true,
+      polledTask: null,
+      showTaskModal: false,
+      searchQuery: '',
+    };
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  getDisabledReason(deleteButton) {
+    const { tasks, subscriptions } = this.props;
+    const { disconnected } = subscriptions;
+    let disabledReason = null;
+
+    if (disconnected) {
+      disabledReason = __('This is disabled because disconnected mode is enabled.');
+    } else if (tasks.length > 0) {
+      disabledReason = __('This is disabled because a manifest related task is in progress.');
+    } else if (deleteButton && !disabledReason) {
+      disabledReason = __('This is disabled because no subscriptions are selected');
+    }
+
+    return disabledReason;
+  }
+
+  showTaskModal(show) {
+    if (this.state.showTaskModal !== show) {
+      this.setState({ showTaskModal: show });
+
+      if (show && this.state.manifestModalOpen) {
+        this.setState({ manifestModalOpen: false });
+      }
+    }
+  }
+
+  loadData() {
+    this.props.pollBulkSearch({
+      search_id: MANIFEST_TASKS_BULK_SEARCH_ID,
+      type: 'all',
+      active_only: true,
+      action_types: BLOCKING_FOREMAN_TASK_TYPES,
+    }, BULK_TASK_SEARCH_INTERVAL);
+
+    this.props.loadSetting('content_disconnected');
+    this.props.loadSubscriptions();
+  }
+
+  handleDoneTask(taskToPoll) {
+    const POLL_TASK_INTERVAL = 5000;
+
+    if (!this.state.polledTask) {
+      this.setState({ polledTask: taskToPoll });
+      this.props.pollTaskUntilDone(taskToPoll.id, {}, POLL_TASK_INTERVAL).then((task) => {
+        function getErrors() {
+          return (
+            <ul>
+              {
+                task.humanized.errors.map(error => <li key={error}> {error} </li>)
+              }
+            </ul>
+          );
+        }
+
+        const message = (
+          <span>
+            <span>{__(`Task ${task.humanized.action} completed with a result of ${task.result}`)} </span>
+            {task.errors ? getErrors() : ''}
+            <a href={helpers.urlBuilder('foreman_tasks/tasks', '', task.id)}>
+              {__('Click here to go to the tasks page for the task.')}
+            </a>
+          </span>
+        );
+
+        notify({ message: ReactDOMServer.renderToStaticMarkup(message), type: task.result });
+
+        this.props.loadSubscriptions();
+      });
+    }
+  }
+
+  render() {
+    const { tasks, subscriptions } = this.props;
+    const { disconnected } = subscriptions;
+    const taskInProgress = tasks.length > 0;
+    const disableManifestActions = taskInProgress || disconnected;
+
+    let task = null;
+
+    if (taskInProgress) {
+      [task] = tasks;
+      this.handleDoneTask(task);
+    }
+
+    if (task) {
+      this.showTaskModal(true);
+    } else {
+      this.showTaskModal(false);
+    }
+
+    const onSearch = (search) => {
+      this.props.loadSubscriptions({ search });
+    };
+
+    const getAutoCompleteParams = search => ({
+      endpoint: '/subscriptions/auto_complete_search',
+      params: {
+        organization_id: orgId,
+        search,
+      },
+    });
+
+    const updateSearchQuery = (searchQuery) => {
+      this.setState({ searchQuery });
+    };
+
+    const showManageManifestModal = () => {
+      this.setState({ manifestModalOpen: true });
+    };
+
+    const onManageManifestModalClose = () => {
+      this.setState({ manifestModalOpen: false });
+    };
+
+    const showSubscriptionDeleteModal = () => {
+      this.setState({ subscriptionDeleteModalOpen: true });
+    };
+
+    const onSubscriptionDeleteModalClose = () => {
+      this.setState({ subscriptionDeleteModalOpen: false });
+    };
+
+    const onDeleteSubscriptions = (selectedRows) => {
+      this.props.deleteSubscriptions(selectedRows);
+      onSubscriptionDeleteModalClose();
+    };
+
+    const toggleDeleteButton = (rowsSelected) => {
+      this.setState({ disableDeleteButton: !rowsSelected });
+    };
+
+    const csvParams = createSubscriptionParams({ search: this.state.searchQuery });
+
+    return (
+      <Grid bsClass="container-fluid">
+        <Row>
+          <Col sm={12}>
+            <h1>{__('Red Hat Subscriptions')}</h1>
+
+            <Row className="toolbar-pf table-view-pf-toolbar-external">
+              <Col sm={12}>
+                <Form className="toolbar-pf-actions">
+                  <FormGroup className="toolbar-pf-filter">
+                    <Search
+                      onSearch={onSearch}
+                      getAutoCompleteParams={getAutoCompleteParams}
+                      updateSearchQuery={updateSearchQuery}
+                    />
+                  </FormGroup>
+
+                  <div className="toolbar-pf-action-right">
+                    <FormGroup>
+                      <LinkContainer to="subscriptions/add" disabled={disableManifestActions}>
+                        <TooltipButton
+                          tooltipId="add-subscriptions-button-tooltip"
+                          tooltipText={this.getDisabledReason()}
+                          tooltipPlacement="top"
+                          title={__('Add Subscriptions')}
+                          disabled={disableManifestActions}
+                          bsStyle="primary"
+                        />
+                      </LinkContainer>
+
+                      <Button onClick={showManageManifestModal}>
+                        {__('Manage Manifest')}
+                      </Button>
+
+                      <Button
+                        onClick={() => { api.open('/subscriptions.csv', csvParams); }}
+                      >
+                        {__('Export CSV')}
+                      </Button>
+
+                      <TooltipButton
+                        bsStyle="danger"
+                        onClick={showSubscriptionDeleteModal}
+                        tooltipId="delete-subscriptions-button-tooltip"
+                        tooltipText={this.getDisabledReason(true)}
+                        tooltipPlacement="top"
+                        title={__('Delete')}
+                        disabled={disableManifestActions || this.state.disableDeleteButton}
+                      />
+
+                    </FormGroup>
+                  </div>
+                </Form>
+              </Col>
+            </Row>
+
+            <ManageManifestModal
+              showModal={this.state.manifestModalOpen}
+              taskInProgress={taskInProgress}
+              disableManifestActions={disableManifestActions}
+              disabledReason={this.getDisabledReason()}
+              onClose={onManageManifestModalClose}
+            />
+
+            <div id="subscriptions-table" className="modal-container">
+              <SubscriptionsTable
+                loadSubscriptions={this.props.loadSubscriptions}
+                updateQuantity={this.props.updateQuantity}
+                subscriptions={this.props.subscriptions}
+                subscriptionDeleteModalOpen={this.state.subscriptionDeleteModalOpen}
+                onSubscriptionDeleteModalClose={onSubscriptionDeleteModalClose}
+                onDeleteSubscriptions={onDeleteSubscriptions}
+                toggleDeleteButton={toggleDeleteButton}
+              />
+              <ModalProgressBar
+                show={this.state.showTaskModal}
+                container={document.getElementById('subscriptions-table')}
+                task={task}
+              />
+            </div>
+          </Col>
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+SubscriptionsPage.propTypes = {
+  loadSubscriptions: PropTypes.func.isRequired,
+  updateQuantity: PropTypes.func.isRequired,
+  subscriptions: PropTypes.shape().isRequired,
+  pollBulkSearch: PropTypes.func.isRequired,
+  pollTaskUntilDone: PropTypes.func.isRequired,
+  loadSetting: PropTypes.func.isRequired,
+  tasks: PropTypes.arrayOf(PropTypes.shape({})),
+  deleteSubscriptions: PropTypes.func.isRequired,
+};
+
+SubscriptionsPage.defaultProps = {
+  tasks: [],
+};
+
+export default SubscriptionsPage;

data/webpack/scenes/Subscriptions/SubscriptionsTable.js

@@ -0,0 +1,336 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { sprintf } from 'jed';
+import { cloneDeep, findIndex } from 'lodash';
+import { Spinner, Table, Alert } from 'patternfly-react';
+import { Table as ForemanTable, TableBody as ForemanTableBody } from '../../move_to_foreman/components/common/table';
+import ConfirmDialog from '../../move_to_foreman/components/common/ConfirmDialog';
+import Dialog from '../../move_to_foreman/components/common/Dialog';
+import { columns } from './SubscriptionsTableSchema';
+import { recordsValid } from './SubscriptionValidations';
+
+const emptyStateData = {
+  header: __('There are no Subscriptions to display'),
+  description: __('Add Subscriptions to this Allocation to manage your Entitlements.'),
+  documentation: {
+    title: __('Learn more about adding Subscriptions to Allocations'),
+    url: 'http://redhat.com',
+  },
+  action: {
+    title: __('Add Subscriptions'),
+    url: 'subscriptions/add',
+  },
+};
+
+const ErrorAlerts = ({ errors }) => {
+  const alerts = errors.filter(Boolean).map(e => (
+    <Alert type={Alert.ALERT_TYPE_ERROR} key={e}>
+      <span>{e}</span>
+    </Alert>
+  ));
+
+  return (
+    <div>
+      {alerts}
+    </div>
+  );
+};
+ErrorAlerts.propTypes = {
+  errors: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const buildTableRows = (subscriptions, updatedQuantity) =>
+  subscriptions.results.map((subs) => {
+    if (updatedQuantity[subs.id]) {
+      return {
+        ...subs,
+        entitlementsChanged: true,
+        quantity: updatedQuantity[subs.id],
+        availableQuantity: subscriptions.availableQuantities[subs.id],
+      };
+    }
+    return {
+      ...subs,
+      availableQuantity: subscriptions.availableQuantities[subs.id],
+    };
+  });
+
+const buildPools = updatedQuantity =>
+  Object.entries(updatedQuantity)
+    .map(([id, quantity]) => ({
+      id,
+      quantity,
+    }));
+
+class SubscriptionsTable extends Component {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.subscriptions !== undefined) {
+      return {
+        rows: buildTableRows(
+          nextProps.subscriptions,
+          prevState.updatedQuantity,
+        ),
+      };
+    }
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      updatedQuantity: {},
+      editing: false,
+      rows: props.subscriptions.results,
+      showUpdateConfirmDialog: false,
+      showCancelConfirmDialog: false,
+      showErrorDialog: false,
+      selectedRows: [],
+    };
+  }
+
+  enableEditing(editingState) {
+    this.setState({
+      updatedQuantity: {},
+      editing: editingState,
+    });
+  }
+
+  updateRows(updatedQuantity) {
+    const rows = buildTableRows(
+      this.props.subscriptions,
+      updatedQuantity,
+    );
+    this.setState({ rows, updatedQuantity });
+  }
+
+  showUpdateConfirm(show) {
+    this.setState({
+      showUpdateConfirmDialog: show,
+    });
+  }
+
+  showCancelConfirm(show) {
+    this.setState({
+      showCancelConfirmDialog: show,
+    });
+  }
+
+  showErrorDialog(show) {
+    this.setState({
+      showErrorDialog: show,
+    });
+  }
+
+  confirmEdit() {
+    this.showUpdateConfirm(false);
+    if (Object.keys(this.state.updatedQuantity).length > 0) {
+      this.props.updateQuantity(buildPools(this.state.updatedQuantity));
+    }
+    this.enableEditing(false);
+  }
+
+  cancelEdit() {
+    this.showCancelConfirm(false);
+    this.enableEditing(false);
+    this.updateRows({});
+  }
+
+  hasQuantityChanged(rowData, editedValue) {
+    if (editedValue !== undefined) {
+      const originalRows = this.props.subscriptions.results;
+      const index = findIndex(originalRows, row => (row.id === rowData.id));
+      const currentValue = originalRows[index].quantity;
+
+      return (`${editedValue}` !== `${currentValue}`);
+    }
+    return false;
+  }
+
+  render() {
+    const { subscriptions } = this.props;
+
+    const inlineEditController = {
+      isEditing: ({ rowData }) => (this.state.editing && rowData.available >= 0),
+      hasChanged: ({ rowData }) => {
+        const editedValue = this.state.updatedQuantity[rowData.id];
+        return this.hasQuantityChanged(rowData, editedValue);
+      },
+      onActivate: () => {
+        this.enableEditing(true);
+      },
+      onConfirm: () => {
+        if (recordsValid(this.state.rows)) {
+          this.showUpdateConfirm(true);
+        } else {
+          this.showErrorDialog(true);
+        }
+      },
+      onCancel: () => {
+        this.showCancelConfirm(true);
+      },
+      onChange: (value, { rowData }) => {
+        const updatedQuantity = cloneDeep(this.state.updatedQuantity);
+
+        if (this.hasQuantityChanged(rowData, value)) {
+          updatedQuantity[rowData.id] = value;
+        } else {
+          delete updatedQuantity[rowData.id];
+        }
+
+        this.updateRows(updatedQuantity);
+      },
+    };
+
+    const checkAllRowsSelected = () => this.state.rows.length === this.state.selectedRows.length;
+
+    const updateDeleteButton = () => {
+      this.props.toggleDeleteButton(this.state.selectedRows.length > 0);
+    };
+
+    const selectionController = {
+      allRowsSelected: () => checkAllRowsSelected(),
+      selectAllRows: () => {
+        if (checkAllRowsSelected()) {
+          this.setState(
+            { selectedRows: [] },
+            updateDeleteButton,
+          );
+        } else {
+          this.setState(
+            { selectedRows: this.state.rows.map(row => row.id) },
+            updateDeleteButton,
+          );
+        }
+      },
+      selectRow: ({ rowData }) => {
+        let { selectedRows } = this.state;
+        if (selectedRows.includes(rowData.id)) {
+          selectedRows = selectedRows.filter(e => e !== rowData.id);
+        } else {
+          selectedRows.push(rowData.id);
+        }
+
+        this.setState(
+          { selectedRows },
+          updateDeleteButton,
+        );
+      },
+      isSelected: ({ rowData }) => this.state.selectedRows.includes(rowData.id),
+    };
+
+    const onPaginationChange = (pagination) => {
+      this.props.loadSubscriptions({
+        ...pagination,
+      });
+    };
+
+    let bodyMessage;
+    if (subscriptions.results.length === 0 && subscriptions.searchIsActive) {
+      bodyMessage = __('No subscriptions match your search criteria.');
+    }
+
+    const columnsDefinition = columns(inlineEditController, selectionController);
+
+    return (
+      <Spinner loading={subscriptions.loading} className="small-spacer">
+        <ErrorAlerts
+          errors={[
+            subscriptions.error,
+            subscriptions.quantitiesError,
+          ]}
+        />
+        <ForemanTable
+          columns={columnsDefinition}
+          emptyState={emptyStateData}
+          bodyMessage={bodyMessage}
+          rows={this.state.rows}
+          components={{
+            header: {
+              row: Table.TableInlineEditHeaderRow,
+            },
+          }}
+          itemCount={subscriptions.itemCount}
+          pagination={subscriptions.pagination}
+          onPaginationChange={onPaginationChange}
+          inlineEdit
+        >
+          <Table.Header
+            onRow={() => ({
+              role: 'row',
+              isEditing: () => this.state.editing,
+              onCancel: () => inlineEditController.onCancel(),
+              onConfirm: () => inlineEditController.onConfirm(),
+            })}
+          />
+          <ForemanTableBody
+            columns={columnsDefinition}
+            rows={this.state.rows}
+            rowKey="id"
+            message={bodyMessage}
+          />
+        </ForemanTable>
+        <ConfirmDialog
+          show={this.state.showUpdateConfirmDialog}
+          title={__('Editing Entitlements')}
+          dangerouslySetInnerHTML={{
+            __html: sprintf(
+              __("You're making changes to %(entitlementCount)s entitlement(s)"),
+              {
+                entitlementCount: `<b>${Object.keys(this.state.updatedQuantity).length}</b>`,
+              },
+            ),
+          }}
+          onConfirm={() => this.confirmEdit()}
+          onCancel={() => this.showUpdateConfirm(false)}
+        />
+        <ConfirmDialog
+          show={this.state.showCancelConfirmDialog}
+          title={__('Editing Entitlements')}
+          message={__('You have unsaved changes. Do you want to exit without saving your changes?')}
+          confirmLabel={__('Exit')}
+          onConfirm={() => this.cancelEdit()}
+          onCancel={() => this.showCancelConfirm(false)}
+        />
+        <Dialog
+          show={this.state.showErrorDialog}
+          title={__('Editing Entitlements')}
+          message={__('Some of your inputs contain errors. Please update them and save your changes again.')}
+          onCancel={() => this.showErrorDialog(false)}
+        />
+        <ConfirmDialog
+          show={this.props.subscriptionDeleteModalOpen}
+          title={__('Confirm Deletion')}
+          dangerouslySetInnerHTML={{
+            __html: sprintf(
+              __(`Are you sure you want to delete %(entitlementCount)s
+                  subscription(s)? This action will remove the subscription(s) and
+                  refresh your manifest. All systems using these subscription(s) will
+                  lose them and also may lose access to updates and Errata.`),
+              {
+                entitlementCount: `<b>${this.state.selectedRows.length}</b>`,
+              },
+            ),
+          }}
+
+          confirmLabel={__('Delete')}
+          onConfirm={() => this.props.onDeleteSubscriptions(this.state.selectedRows)}
+          onCancel={this.props.onSubscriptionDeleteModalClose}
+        />
+      </Spinner>
+    );
+  }
+}
+
+SubscriptionsTable.propTypes = {
+  loadSubscriptions: PropTypes.func.isRequired,
+  updateQuantity: PropTypes.func.isRequired,
+  subscriptions: PropTypes.shape({
+    results: PropTypes.array,
+  }).isRequired,
+  subscriptionDeleteModalOpen: PropTypes.bool.isRequired,
+  onDeleteSubscriptions: PropTypes.func.isRequired,
+  onSubscriptionDeleteModalClose: PropTypes.func.isRequired,
+  toggleDeleteButton: PropTypes.func.isRequired,
+};
+
+export default SubscriptionsTable;