foreman_rh_cloud 0.9.4

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

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

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

@@ -0,0 +1,47 @@
+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">
+        {onRestart ? (
+          <Button bsStyle="primary" onClick={onRestart}>
+            {__('Restart')}
+          </Button>
+        ) : null}
+        {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: null,
+  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,43 @@
+// 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="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;
+  }
+}