foreman_snapshot_management 1.7.1 → 2.0.0

data/webpack/components/SnapshotManagement/components/SnapshotForm/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { submitForm } from 'foremanReact/redux/actions/common/forms';
+
+import SnapshotForm from './SnapshotForm';
+
+const WrappedSnapshotForm = props => {
+  const dispatch = useDispatch();
+
+  return (
+    <SnapshotForm
+      submitForm={(...args) => dispatch(submitForm(...args))}
+      {...props}
+    />
+  );
+};
+
+export default WrappedSnapshotForm;

data/webpack/components/SnapshotManagement/components/SnapshotForm/snapshotForm.scss

@@ -0,0 +1,3 @@
+textarea.form-control {
+  resize: vertical;
+}

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/SnapshotFormModal.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ForemanModal from 'foremanReact/components/ForemanModal';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+import SnapshotForm from '../SnapshotForm';
+
+import { SNAPSHOT_FORM_MODAL } from './SnapshotFormModalConstants';
+
+const SnapshotFormModal = ({ host, setModalClosed, ...props }) => (
+  <ForemanModal
+    id={SNAPSHOT_FORM_MODAL}
+    title={sprintf(__('Create Snapshot for %s'), host.name)}
+    enforceFocus
+  >
+    <ForemanModal.Header closeButton={false} />
+
+    <div>
+      <SnapshotForm
+        setModalClosed={setModalClosed}
+        hostId={host.id}
+        {...props}
+      />
+    </div>
+  </ForemanModal>
+);
+
+SnapshotFormModal.propTypes = {
+  host: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  setModalClosed: PropTypes.func.isRequired,
+};
+
+export default SnapshotFormModal;

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/SnapshotFormModalConstants.js

@@ -0,0 +1 @@
+export const SNAPSHOT_FORM_MODAL = 'foremanSnapshotMgmtSnapshotFormModal';

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/__tests__/SnapshotFormModal.test.js

@@ -0,0 +1,19 @@
+import {
+  testComponentSnapshotsWithFixtures,
+  // shallowRenderComponentWithFixtures,
+} from 'react-redux-test-utils';
+// import configureStore from 'redux-mock-store';
+
+import SnapshotFormModal from '../SnapshotFormModal';
+
+// const mockStore = configureStore([]);
+
+const setModalClosed = () => null;
+const fixtures = {
+  normal: { host: { id: 42, name: 'deep.thought' }, setModalClosed },
+};
+
+describe('SnapshotFormModal', () => {
+  describe('renders', () =>
+    testComponentSnapshotsWithFixtures(SnapshotFormModal, fixtures));
+});

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/__tests__/__snapshots__/SnapshotFormModal.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SnapshotFormModal renders normal 1`] = `
+<ConnectedForemanModal
+  enforceFocus={true}
+  id="foremanSnapshotMgmtSnapshotFormModal"
+  title="Create Snapshot for deep.thought"
+>
+  <ForemanModalHeader
+    closeButton={false}
+  />
+  <div>
+    <WrappedSnapshotForm
+      hostId={42}
+      setModalClosed={[Function]}
+    />
+  </div>
+</ConnectedForemanModal>
+`;

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import useSnapshotFormModal from './useSnapshotFormModal';
+import SnapshotFormModal from './SnapshotFormModal';
+
+const WrappedSnapshotFormModal = props => {
+  const { setModalClosed } = useSnapshotFormModal();
+
+  return <SnapshotFormModal setModalClosed={setModalClosed} {...props} />;
+};
+
+export default WrappedSnapshotFormModal;

data/webpack/components/SnapshotManagement/components/SnapshotFormModal/useSnapshotFormModal.js

@@ -0,0 +1,7 @@
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+
+import { SNAPSHOT_FORM_MODAL } from './SnapshotFormModalConstants';
+
+const useSnapshotFormModal = () => useForemanModal({ id: SNAPSHOT_FORM_MODAL });
+
+export default useSnapshotFormModal;

data/webpack/components/SnapshotManagement/components/SnapshotList/SnapshotList.js

@@ -0,0 +1,314 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Alert,
+  // Button,
+  Table as PfTable,
+  FormControl,
+  inlineEditFormatterFactory,
+} from 'patternfly-react';
+import { cloneDeep, findIndex } from 'lodash';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Table,
+  TableBody,
+  column,
+  headerFormatterWithProps,
+  cellFormatterWithProps,
+} from 'foremanReact/components/common/table';
+import ShortDateTime from 'foremanReact/components/common/dates/ShortDateTime';
+import AlertBody from 'foremanReact/components/common/Alert/AlertBody';
+import Loading from 'foremanReact/components/Loading/Loading';
+import 'foremanReact/redux/API';
+
+import { renderListEntryButtons } from './SnapshotListHelper';
+import './snapshotList.scss';
+
+class SnapshotList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns: this.defineColumns(),
+      editMode: false,
+      rows: cloneDeep(props.snapshots),
+    };
+  }
+
+  defineColumns() {
+    const {
+      canDelete,
+      canRevert,
+      canUpdate,
+      host,
+      deleteAction,
+      updateAction,
+      rollbackAction,
+    } = this.props;
+
+    const inlineEditController = {
+      isEditing: ({ rowData }) => rowData.backup !== undefined,
+      onActivate: ({ rowData }) => {
+        const rows = cloneDeep(this.state.rows);
+        const index = findIndex(rows, { id: rowData.id });
+
+        rows[index].backup = cloneDeep(rows[index]);
+
+        this.setState({ rows, editMode: true });
+      },
+      onConfirm: ({ rowData }) => {
+        const rows = cloneDeep(this.state.rows);
+        const index = findIndex(rows, { id: rowData.id });
+
+        delete rows[index].backup;
+
+        this.setState({ rows, editMode: false });
+        updateAction(host, rowData);
+      },
+      onCancel: ({ rowData }) => {
+        const rows = cloneDeep(this.state.rows);
+        const index = findIndex(rows, { id: rowData.id });
+
+        rows[index] = cloneDeep(rows[index].backup);
+        delete rows[index].backup;
+
+        this.setState({ rows, editMode: false });
+      },
+      onChange: (value, { rowData, property }) => {
+        const rows = cloneDeep(this.state.rows);
+        const index = findIndex(rows, { id: rowData.id });
+
+        rows[index][property] = value;
+
+        this.setState({ rows });
+      },
+    };
+    this.inlineEditController = inlineEditController;
+
+    const renderButtons = renderListEntryButtons(
+      canDelete,
+      canRevert,
+      canUpdate,
+      host,
+      rollbackAction,
+      deleteAction,
+      inlineEditController
+    );
+    const inlineEditButtonCellFormatter = inlineEditFormatterFactory({
+      isEditing: additionalData => this.state.editMode,
+      renderValue: renderButtons(false),
+      renderEdit: renderButtons(true),
+    });
+
+    const inlineEditFormatter = inlineEditFormatterFactory({
+      isEditing: additionalData => {
+        if (
+          additionalData.property === 'name' &&
+          !this.props.capabilities.editableSnapshotName
+        )
+          return false;
+        return inlineEditController.isEditing(additionalData);
+      },
+      renderValue: (value, additionalData) => {
+        let date = '';
+        if (
+          additionalData.property === 'name' &&
+          additionalData.rowData.formatted_created_at
+        )
+          date = (
+            <span className="snapshot-date">
+              <ShortDateTime
+                date={new Date(additionalData.rowData.formatted_created_at)}
+                defaultValue={__('N/A')}
+                showRelativeTimeTooltip
+              />
+            </span>
+          );
+        return (
+          <span className="static description">
+            {value}
+            <br />
+            {date}
+          </span>
+        );
+      },
+      renderEdit: (value, additionalData) => {
+        let type = 'input';
+        if (additionalData.property === 'description') type = 'textarea';
+        return (
+          <FormControl
+            type="text"
+            defaultValue={value}
+            onBlur={e =>
+              inlineEditController.onChange(e.target.value, additionalData)
+            }
+            componentClass={type}
+          />
+        );
+      },
+    });
+    const editCellFormatters = [cellFormatterWithProps];
+    if (canUpdate) editCellFormatters.unshift(inlineEditFormatter);
+
+    const columns = [
+      column(
+        'name',
+        __('Snapshot'),
+        [headerFormatterWithProps],
+        editCellFormatters
+      ),
+      column(
+        'description',
+        __('Description'),
+        [headerFormatterWithProps],
+        editCellFormatters
+      ),
+    ];
+    if (canDelete || canUpdate || canRevert)
+      columns.push(
+        column(
+          '',
+          __('Action'),
+          [headerFormatterWithProps],
+          [inlineEditButtonCellFormatter],
+          { className: 'action-buttons' }
+        )
+      );
+    return columns;
+  }
+
+  componentDidMount() {
+    this.props.loadSnapshots(this.props.host.id);
+  }
+
+  // FIXME: Remove soon, as this is deprecated!
+  componentWillReceiveProps(newProps) {
+    if (newProps.snapshots !== this.props.snapshots) {
+      this.setState({ rows: newProps.snapshots });
+    }
+    if (newProps.needsReload) {
+      newProps.loadSnapshots(newProps.host.id);
+    }
+  }
+
+  getBodyMessage() {
+    if (this.props.isLoading || this.props.isWorking)
+      return <Loading textSize="sm" />;
+
+    if (this.props.hasError)
+      return (
+        <Alert
+          variant="danger"
+          isInline
+          title={__('Failed to load snapshot list')}
+        >
+          <AlertBody title={__('Failed to load snapshot list')}>
+            {/* IMHO the line-break should be done by AlertBody :-( */}
+            <br />
+            {this.props.error.message}
+          </AlertBody>
+        </Alert>
+      );
+
+    return undefined;
+  }
+
+  render() {
+    const { columns } = this.state;
+    const bodyMessage = this.getBodyMessage();
+
+    return (
+      <div>
+        {/*
+        <Button
+          disabled={this.props.isLoading}
+          onClick={() => this.props.loadSnapshots(this.props.host.id)}
+        >
+          ReloadData
+        </Button>
+        */}
+        <Table
+          caption="Snapshot List"
+          columns={columns}
+          rows={this.state.rows}
+          bodyMessage={bodyMessage}
+          inlineEdit
+          components={{
+            body: {
+              row: PfTable.InlineEditRow,
+              cell: cellProps => cellProps.children,
+            },
+          }}
+        >
+          <PfTable.Header key="header" />
+          <TableBody
+            key="body"
+            columns={columns}
+            rows={this.state.rows}
+            message={bodyMessage}
+            rowKey="id"
+            onRow={(rowData, { rowIndex }) => ({
+              role: 'row',
+              isEditing: () => this.inlineEditController.isEditing({ rowData }),
+              onCancel: () =>
+                this.inlineEditController.onCancel({ rowData, rowIndex }),
+              onConfirm: () =>
+                this.inlineEditController.onConfirm({ rowData, rowIndex }),
+              last: rowIndex === this.state.rows.length - 1,
+            })}
+          />
+        </Table>
+      </div>
+    );
+  }
+}
+
+SnapshotList.propTypes = {
+  /*
+  children: PropTypes.node,
+  className: PropTypes.string,
+  */
+  host: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  loadSnapshots: PropTypes.func.isRequired,
+  deleteAction: PropTypes.func.isRequired,
+  updateAction: PropTypes.func.isRequired,
+  rollbackAction: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool,
+  isWorking: PropTypes.bool,
+  hasError: PropTypes.bool,
+  error: PropTypes.shape({ message: PropTypes.string }),
+  snapshots: PropTypes.array,
+
+  // permissions:
+  canDelete: PropTypes.bool,
+  canRevert: PropTypes.bool,
+  canUpdate: PropTypes.bool,
+
+  // capabilities
+  capabilities: PropTypes.shape({
+    editableSnapshotName: PropTypes.bool,
+  }),
+};
+
+SnapshotList.defaultProps = {
+  /*
+  className: '',
+  children: null,
+  */
+  isLoading: true,
+  isWorking: false,
+  hasError: false,
+  error: undefined,
+  snapshots: [],
+  canDelete: false,
+  canRevert: false,
+  canUpdate: false,
+  capabilities: {
+    editableSnapshotName: true,
+  },
+};
+
+export default SnapshotList;

data/webpack/components/SnapshotManagement/components/SnapshotList/SnapshotListHelper.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button, Icon } from 'patternfly-react';
+
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+import './snapshotList.scss';
+
+export const renderListEntryButtons = (
+  canDelete,
+  canRevert,
+  canUpdate,
+  host,
+  snapshotRollbackAction,
+  snapshotDeleteAction,
+  inlineEditController
+) => disabled => (value, additionalData) => {
+  const buttons = [];
+
+  // Edit Button
+  if (canUpdate) {
+    buttons.push(
+      <Button
+        key="edit-button"
+        bsStyle="default"
+        disabled={disabled}
+        onClick={() => inlineEditController.onActivate(additionalData)}
+      >
+        <Icon type="pf" name="edit" title={__('edit entry')} />
+      </Button>
+    );
+  }
+
+  // Rollback button
+  if (canRevert) {
+    buttons.push(
+      <Button
+        key="rollback-button"
+        bsStyle="default"
+        disabled={disabled}
+        onClick={() =>
+          window.confirm(
+            sprintf(__('Rollback to "%s"?'), additionalData.rowData.name)
+          ) && snapshotRollbackAction(host, additionalData.rowData)
+        }
+      >
+        <Icon type="pf" name="history" title={__('Rollback')} />
+      </Button>
+    );
+  }
+
+  // Delete Button
+  if (canDelete) {
+    buttons.push(
+      <Button
+        key="delete-button"
+        bsStyle="default"
+        disabled={disabled}
+        onClick={() =>
+          window.confirm(
+            sprintf(__('Delete Snapshot "%s"?'), additionalData.rowData.name)
+          ) && snapshotDeleteAction(host, additionalData.rowData)
+        }
+      >
+        <Icon type="pf" name="delete" title={__('Delete')} />
+      </Button>
+    );
+  }
+
+  return <td className="action-buttons">{buttons}</td>;
+};