foreman_inventory_upload 0.0.1.dev1 → 0.9.0

data/webpack/ForemanInventoryUpload/Components/TabBody/TabBody.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import Terminal from '../Terminal';
+import ScheduledRun from '../ScheduledRun';
+import './tabBody.scss';
+
+const TabBody = ({ exitCode, logs, error, scheduled }) => (
+  <Grid.Row className="tab_body">
+    <Terminal logs={logs} exitCode={exitCode} error={error} />
+    <ScheduledRun date={scheduled} />
+  </Grid.Row>
+);
+
+TabBody.propTypes = {
+  exitCode: PropTypes.string,
+  logs: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]),
+  error: PropTypes.string,
+  scheduled: PropTypes.string,
+};
+
+TabBody.defaultProps = {
+  exitCode: '',
+  logs: null,
+  error: null,
+  scheduled: null,
+};
+export default TabBody;

data/webpack/ForemanInventoryUpload/Components/TabBody/__tests__/TabBody.test.js

@@ -0,0 +1,13 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TabBody from '../TabBody';
+
+const fixtures = {
+  'render without Props': {},
+  /** fixtures, props for the component */
+};
+
+describe('TabBody', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TabBody, fixtures));
+});

data/webpack/ForemanInventoryUpload/Components/TabBody/__tests__/__snapshots__/TabBody.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabBody rendering render without Props 1`] = `
+<Row
+  bsClass="row"
+  className="tab_body"
+  componentClass="div"
+>
+  <Terminal
+    autoScroll={true}
+    error={null}
+    exitCode=""
+    logs={null}
+  />
+  <ScheduledRun
+    date={null}
+  />
+</Row>
+`;

data/webpack/ForemanInventoryUpload/Components/TabBody/index.js

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

data/webpack/ForemanInventoryUpload/Components/TabBody/tabBody.scss

@@ -0,0 +1,3 @@
+.tab_body {
+  margin-bottom: 0;
+}

data/webpack/ForemanInventoryUpload/Components/TabContainer/TabContainer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+import './tabContainer.scss';
+
+const TabContainer = ({ children, className }) => (
+  <div className={className}>
+    <Grid>
+      <Grid.Col>{children}</Grid.Col>
+    </Grid>
+  </div>
+);
+
+TabContainer.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+TabContainer.defaultProps = {
+  children: null,
+  className: '',
+};
+
+export default TabContainer;

data/webpack/ForemanInventoryUpload/Components/TabContainer/__tests__/TabContainer.test.js

@@ -0,0 +1,13 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TabContainer from '../TabContainer';
+
+const fixtures = {
+  'render without Props': {},
+  /** fixtures, props for the component */
+};
+
+describe('TabContainer', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TabContainer, fixtures));
+});

data/webpack/ForemanInventoryUpload/Components/TabContainer/__tests__/__snapshots__/TabContainer.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabContainer rendering render without Props 1`] = `
+<div
+  className=""
+>
+  <Grid
+    bsClass="container"
+    componentClass="div"
+    fluid={false}
+  >
+    <Col
+      bsClass="col"
+      componentClass="div"
+    />
+  </Grid>
+</div>
+`;

data/webpack/ForemanInventoryUpload/Components/TabContainer/index.js

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

data/webpack/ForemanInventoryUpload/Components/TabContainer/tabContainer.scss

@@ -0,0 +1,8 @@
+.tab-content {
+  padding: 20px;
+  min-height: 0;
+
+  .row {
+    margin-bottom: 20px;
+  }
+}

data/webpack/ForemanInventoryUpload/Components/TabFooter/TabFooter.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'patternfly-react';
+
+const TabFooter = ({ children }) => (
+  <Grid.Row>
+    <div className="tab-footer">{children}</div>
+  </Grid.Row>
+);
+
+TabFooter.propTypes = {
+  children: PropTypes.node,
+};
+
+TabFooter.defaultProps = {
+  children: null,
+};
+
+export default TabFooter;

data/webpack/ForemanInventoryUpload/Components/TabFooter/__tests__/TabFooter.test.js

@@ -0,0 +1,13 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TabFooter from '../TabFooter';
+
+const fixtures = {
+  'render without Props': {},
+  /** fixtures, props for the component */
+};
+
+describe('TabFooter', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TabFooter, fixtures));
+});

data/webpack/ForemanInventoryUpload/Components/TabFooter/__tests__/__snapshots__/TabFooter.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabFooter rendering render without Props 1`] = `
+<Row
+  bsClass="row"
+  componentClass="div"
+>
+  <div
+    className="tab-footer"
+  />
+</Row>
+`;

data/webpack/ForemanInventoryUpload/Components/TabFooter/index.js

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

data/webpack/ForemanInventoryUpload/Components/TabHeader/TabHeader.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { noop, Grid, Button, Icon } from 'patternfly-react';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import './tabHeader.scss';
+
+const TabHeader = ({ exitCode, onRestart, onDownload, toggleFullScreen }) => (
+  <Grid.Row className="tab-header">
+    <Grid.Col sm={6}>
+      <p>{sprintf(__('Exit Code: %s'), exitCode)}</p>
+    </Grid.Col>
+    <Grid.Col sm={6}>
+      <div className="tab-action-buttons">
+        <Button bsStyle="primary" onClick={onRestart}>
+          {__('Restart')}
+        </Button>
+        {onDownload ? (
+          <Button onClick={onDownload}>
+            {__('Download Report')} <Icon name="download" />
+          </Button>
+        ) : null}
+        <Button onClick={toggleFullScreen}>
+          {__('Full Screen')}
+          <Icon name="arrows-alt" />
+        </Button>
+      </div>
+    </Grid.Col>
+  </Grid.Row>
+);
+
+TabHeader.propTypes = {
+  onRestart: PropTypes.func,
+  onDownload: PropTypes.func,
+  exitCode: PropTypes.string,
+  toggleFullScreen: PropTypes.func,
+};
+
+TabHeader.defaultProps = {
+  onRestart: noop,
+  exitCode: '',
+  onDownload: null,
+  toggleFullScreen: noop,
+};
+
+export default TabHeader;

data/webpack/ForemanInventoryUpload/Components/TabHeader/__tests__/TabHeader.test.js

@@ -0,0 +1,13 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import TabHeader from '../TabHeader';
+
+const fixtures = {
+  'render without Props': {},
+  /** fixtures, props for the component */
+};
+
+describe('TabHeader', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TabHeader, fixtures));
+});

data/webpack/ForemanInventoryUpload/Components/TabHeader/__tests__/__snapshots__/TabHeader.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabHeader rendering render without Props 1`] = `
+<Row
+  bsClass="row"
+  className="tab-header"
+  componentClass="div"
+>
+  <Col
+    bsClass="col"
+    componentClass="div"
+    sm={6}
+  >
+    <p>
+      Exit Code: 
+    </p>
+  </Col>
+  <Col
+    bsClass="col"
+    componentClass="div"
+    sm={6}
+  >
+    <div
+      className="tab-action-buttons"
+    >
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="primary"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Restart
+      </Button>
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Full Screen
+        <Icon
+          name="arrows-alt"
+          type="fa"
+        />
+      </Button>
+    </div>
+  </Col>
+</Row>
+`;

data/webpack/ForemanInventoryUpload/Components/TabHeader/index.js

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

data/webpack/ForemanInventoryUpload/Components/TabHeader/tabHeader.scss

@@ -0,0 +1,21 @@
+.tab-header {
+  h1 {
+    margin-top: 0;
+  }
+
+  p {
+    font-size: 16px;
+  }
+
+  .tab-action-buttons {
+    float: right;
+
+    button {
+      margin-left: 5px;
+
+      span {
+        margin-left: 5px;
+      }
+    }
+  }
+}

data/webpack/ForemanInventoryUpload/Components/Terminal/Terminal.fixtures.js

@@ -0,0 +1,10 @@
+export const logs = [
+  'Generating...',
+  'Hosts: 1000',
+  'writing host 1/1000',
+  'writing host 2/1000',
+];
+
+export const exitCode = 'Running pid 1111111';
+
+export const props = { logs, exitCode };

data/webpack/ForemanInventoryUpload/Components/Terminal/Terminal.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Spinner } from 'patternfly-react';
+import isEqual from 'lodash/isEqual';
+import './terminal.scss';
+import { isTerminalScrolledDown } from './TerminalHelper';
+
+class Terminal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.terminal = React.createRef();
+    this.state = {
+      didUserScroll: false,
+    };
+  }
+
+  componentDidMount() {
+    this.scrollBottom();
+  }
+
+  componentDidUpdate({ logs: prevLogs }) {
+    const { logs: currentLogs, autoScroll } = this.props;
+    const { didUserScroll } = this.state;
+    if (autoScroll && !didUserScroll && !isEqual(prevLogs, currentLogs)) {
+      this.scrollBottom();
+    }
+  }
+
+  handleScroll = e => {
+    const { scrollTop, scrollHeight, offsetHeight } = e.target;
+    const didUserScroll = isTerminalScrolledDown(
+      scrollHeight,
+      scrollTop,
+      offsetHeight,
+      100
+    );
+    this.setState({
+      didUserScroll,
+    });
+  };
+
+  scrollBottom = () => {
+    const element = this.terminal.current;
+    if (!element) {
+      return;
+    }
+    const setHeightToBottom = () => {
+      element.scrollTop = element.scrollHeight;
+    };
+    /** happens on tab switching when the terminal wasn't visible yet
+     * and there was nothing to scroll, 250ms is enough to wait for the terminal to appear.
+     */
+    if (element.scrollHeight === 0) {
+      setTimeout(setHeightToBottom, 250);
+    } else {
+      setHeightToBottom();
+    }
+  };
+
+  render() {
+    const { logs, error, exitCode } = this.props;
+    let modifiedLogs = null;
+    if (error !== null) {
+      modifiedLogs = <p className="terminal_error">{error}</p>;
+    } else if (Array.isArray(logs)) {
+      modifiedLogs = logs.map((log, index) => <p key={index}>{log}</p>);
+    } else {
+      modifiedLogs = <p>{logs}</p>;
+    }
+    const exitCodeLowerCase = exitCode.toLowerCase();
+    const loading =
+      exitCodeLowerCase.indexOf('running') !== -1 ||
+      exitCodeLowerCase.indexOf('restarting') !== -1;
+    return (
+      <Grid.Col sm={12}>
+        <div
+          className="terminal"
+          ref={this.terminal}
+          onScroll={this.handleScroll}
+        >
+          <Grid fluid>
+            <Grid.Row>
+              <Grid.Col sm={12}>
+                {modifiedLogs}
+                <Spinner loading={loading} inverse inline size="xs" />
+              </Grid.Col>
+            </Grid.Row>
+          </Grid>
+        </div>
+      </Grid.Col>
+    );
+  }
+}
+
+Terminal.propTypes = {
+  logs: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.string,
+  ]),
+  error: PropTypes.string,
+  exitCode: PropTypes.string,
+  autoScroll: PropTypes.bool,
+};
+
+Terminal.defaultProps = {
+  logs: null,
+  error: null,
+  exitCode: '',
+  autoScroll: true,
+};
+
+export default Terminal;

data/webpack/ForemanInventoryUpload/Components/Terminal/TerminalHelper.js

@@ -0,0 +1,6 @@
+export const isTerminalScrolledDown = (
+  scrollHeight,
+  scrollTop,
+  terminalHeight,
+  tolerance
+) => scrollTop <= scrollHeight - terminalHeight - tolerance;

data/webpack/ForemanInventoryUpload/Components/Terminal/__tests__/Terminal.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { mount } from 'enzyme';
+import Terminal from '../Terminal';
+import { props, logs } from '../Terminal.fixtures';
+
+const fixtures = {
+  'render without Props': {},
+  'render with props': props,
+};
+
+describe('Terminal', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(Terminal, fixtures));
+
+  it('handles terminal scroll on componentDidUpdate', () => {
+    const wrapper = mount(<Terminal {...props} />);
+    jest.spyOn(wrapper.instance(), 'scrollBottom');
+    wrapper.setProps({ logs: [...logs, 'new-log'] });
+    expect(wrapper.instance().scrollBottom).toBeCalled();
+  });
+
+  it('error should be displayed in terminal', () => {
+    const modifiedProps = { ...props, error: 'some-error' };
+    const wrapper = mount(<Terminal {...modifiedProps} />);
+    expect(wrapper.find('p.terminal_error').exists()).toBeTruthy();
+  });
+
+  it('logs as a string instead of an array should be displayed', () => {
+    const text = 'some-string-log';
+    const modifiedProps = { ...props, logs: text };
+    const wrapper = mount(<Terminal {...modifiedProps} />);
+    expect(wrapper.find('.terminal p').text()).toEqual(text);
+  });
+});

data/webpack/ForemanInventoryUpload/Components/Terminal/__tests__/__snapshots__/Terminal.test.js.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Terminal rendering render with props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  sm={12}
+>
+  <div
+    className="terminal"
+    onScroll={[Function]}
+  >
+    <Grid
+      bsClass="container"
+      componentClass="div"
+      fluid={true}
+    >
+      <Row
+        bsClass="row"
+        componentClass="div"
+      >
+        <Col
+          bsClass="col"
+          componentClass="div"
+          sm={12}
+        >
+          <p
+            key="0"
+          >
+            Generating...
+          </p>
+          <p
+            key="1"
+          >
+            Hosts: 1000
+          </p>
+          <p
+            key="2"
+          >
+            writing host 1/1000
+          </p>
+          <p
+            key="3"
+          >
+            writing host 2/1000
+          </p>
+          <Spinner
+            className=""
+            inline={true}
+            inverse={true}
+            loading={true}
+            size="xs"
+          />
+        </Col>
+      </Row>
+    </Grid>
+  </div>
+</Col>
+`;
+
+exports[`Terminal rendering render without Props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  sm={12}
+>
+  <div
+    className="terminal"
+    onScroll={[Function]}
+  >
+    <Grid
+      bsClass="container"
+      componentClass="div"
+      fluid={true}
+    >
+      <Row
+        bsClass="row"
+        componentClass="div"
+      >
+        <Col
+          bsClass="col"
+          componentClass="div"
+          sm={12}
+        >
+          <p />
+          <Spinner
+            className=""
+            inline={true}
+            inverse={true}
+            loading={false}
+            size="xs"
+          />
+        </Col>
+      </Row>
+    </Grid>
+  </div>
+</Col>
+`;

data/webpack/ForemanInventoryUpload/Components/Terminal/index.js

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

data/webpack/ForemanInventoryUpload/Components/Terminal/terminal.scss

@@ -0,0 +1,31 @@
+.terminal {
+  height: 200px;
+  background-color: #222;
+  padding: 10px 0;
+  margin-bottom: 20px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  p {
+    font-family: monospace;
+    font-size: 16px;
+    color: #22da26;
+
+    &.terminal_error {
+      color: #f00;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background: #aaa;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #222;
+    border-radius: 6px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+}

data/webpack/ForemanInventoryUpload/ForemanInventoryUpload.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { translate as __ } from 'foremanReact/common/I18n';
+import AccountList from './Components/AccountList';
+
+const ForemanInventoryUpload = () => (
+  <IntlProvider locale={navigator.language}>
+    <div className="inventory-upload">
+      <h1>{__('Red Hat Inventory Uploads')}</h1>
+      <AccountList />
+    </div>
+  </IntlProvider>
+);
+
+export default ForemanInventoryUpload;