foreman_inventory_upload 1.0.0.beta1 → 1.0.0.beta2

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/Components/Tree/Tree.fixtures.js

@@ -0,0 +1,3 @@
+export const props = {
+  files: ['file1', 'file2', 'file3'],
+};

data/webpack/ForemanInventoryUpload/Components/Tree/Tree.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { default as RATTree } from 'react-animated-tree';
+import { Grid } from 'patternfly-react';
+
+const Tree = ({ files }) => {
+  const filesAmount = files.length;
+  const fileTrees = files.map((file, index) => (
+    <RATTree key={index} content={file} />
+  ));
+  return (
+    <Grid.Col sm={9}>
+      <p>There are currently {filesAmount} report files ready</p>
+      <RATTree content="Reports" open canHide visible>
+        {fileTrees}
+      </RATTree>
+    </Grid.Col>
+  );
+};
+
+Tree.propTypes = {
+  files: PropTypes.arrayOf(PropTypes.string),
+};
+
+Tree.defaultProps = {
+  files: [],
+};
+
+export default Tree;

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

@@ -0,0 +1,14 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import Tree from '../Tree';
+import { props } from '../Tree.fixtures';
+
+const fixtures = {
+  'render without Props': {},
+  'render with props': props,
+};
+
+describe('Tree', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(Tree, fixtures));
+});

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

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tree rendering render with props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  sm={9}
+>
+  <p>
+    There are currently 
+    3
+     report files ready
+  </p>
+  <Tree
+    canHide={true}
+    content="Reports"
+    open={true}
+    visible={true}
+  >
+    <Tree
+      canHide={false}
+      content="file1"
+      key="0"
+      open={false}
+      visible={true}
+    />
+    <Tree
+      canHide={false}
+      content="file2"
+      key="1"
+      open={false}
+      visible={true}
+    />
+    <Tree
+      canHide={false}
+      content="file3"
+      key="2"
+      open={false}
+      visible={true}
+    />
+  </Tree>
+</Col>
+`;
+
+exports[`Tree rendering render without Props 1`] = `
+<Col
+  bsClass="col"
+  componentClass="div"
+  sm={9}
+>
+  <p>
+    There are currently 
+    0
+     report files ready
+  </p>
+  <Tree
+    canHide={true}
+    content="Reports"
+    open={true}
+    visible={true}
+  />
+</Col>
+`;

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

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

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;

data/webpack/ForemanInventoryUpload/ForemanInventoryUpload.test.js

@@ -0,0 +1,10 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import ForemanInventoryUpload from './ForemanInventoryUpload';
+
+const fixtures = {
+  'render without Props': {},
+};
+
+describe('ForemanInventoryUpload', () =>
+  testComponentSnapshotsWithFixtures(ForemanInventoryUpload, fixtures));

data/webpack/ForemanInventoryUpload/ForemanInventoryUploadReducers.js

@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux';
+import { reducers as accountListReducers } from './Components/AccountList';
+import { reducers as dashboardReducers } from './Components/Dashboard';
+
+const reducers = {
+  ForemanInventoryUpload: combineReducers({
+    ...accountListReducers,
+    ...dashboardReducers,
+  }),
+};
+
+export default reducers;

data/webpack/ForemanInventoryUpload/ForemanInventoryUploadSelectors.js

@@ -0,0 +1,4 @@
+// export const selectForemanInventoryUpload = state => state.ForemanInventoryUpload || {};
+// Added 'state' to use redux in storybook only, should be removed.
+export const selectForemanInventoryUpload = state =>
+  state.ForemanInventoryUpload || state || {};

data/webpack/ForemanInventoryUpload/__snapshots__/ForemanInventoryUpload.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ForemanInventoryUpload render without Props 1`] = `
+<IntlProvider
+  locale="en-US"
+>
+  <div
+    className="inventory-upload"
+  >
+    <h1>
+      Red Hat Inventory Uploads
+    </h1>
+    <Connect(AccountList) />
+  </div>
+</IntlProvider>
+`;

data/webpack/ForemanInventoryUpload/index.js

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

data/webpack/__mocks__/foremanReact/API.js

@@ -0,0 +1,7 @@
+export default {
+  get: jest.fn(),
+  put: jest.fn(),
+  post: jest.fn(),
+  delete: jest.fn(),
+  patch: jest.fn(),
+};

data/webpack/__mocks__/foremanReact/common/I18n.js

@@ -0,0 +1,5 @@
+export { sprintf } from 'jed';
+
+export const translate = s => s;
+
+export const ngettext = s => s;

data/webpack/__mocks__/foremanReact/common/helpers.js

@@ -0,0 +1,3 @@
+export const getURIQuery = jest.fn(() => ({}));
+
+export const noop = Function.prototype;

data/webpack/index.js

@@ -0,0 +1,18 @@
+/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/extensions */
+import componentRegistry from 'foremanReact/components/componentRegistry';
+import { registerReducer } from 'foremanReact/common/MountingService';
+import reducers from './ForemanInventoryUpload/ForemanInventoryUploadReducers';
+import ForemanInventoryUpload from './ForemanInventoryUpload';
+
+// register reducers
+Object.entries(reducers).forEach(([key, reducer]) =>
+  registerReducer(key, reducer)
+);
+
+// register components
+componentRegistry.register({
+  name: 'ForemanInventoryUpload',
+  type: ForemanInventoryUpload,
+});

data/webpack/stories/ForemanInventoryUploadReducers.js

@@ -0,0 +1,3 @@
+import reducers from '../ForemanInventoryUpload/ForemanInventoryUploadReducers';
+
+export default reducers.ForemanInventoryUpload;