Merge 6f8db3e into 94a354c

client/src/components/app.test.js

@@ -1,11 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './app';
+import { BrowserRouter as Router } from 'react-router-dom';
+import store from '../redux/store';
+import { Provider } from 'react-redux';
 
 describe('Application', function() {
   it('renders without crashing', () => {
     const div = document.createElement('div');
 
-    ReactDOM.render(<App />, div);
+    ReactDOM.render(
+      <Provider store={store}>
+        <Router>
+          <App />
+        </Router>
+      </Provider>,
+      div
+    );
   });
 });

client/src/components/scans/scanListItem.js

@@ -9,7 +9,7 @@ import {
   MenuItem
 } from 'patternfly-react';
 
-export const ScanListItem = ({ item }) => {
+export const ScanListItem = ({ item, onItemSelectChange }) => {
   let sourcesCount = item.sources ? item.sources.length : 0;
 
   let statusName = '';
@@ -25,7 +25,7 @@ export const ScanListItem = ({ item }) => {
       actionButtonLabel = 'Restart';
       break;
     case 'canceled':
-      statusName = 'error-circle-o';
+      statusName = 'warning-triangle-o';
       actionButtonLabel = 'Restart Scan';
       break;
     case 'created':
@@ -104,7 +104,13 @@ export const ScanListItem = ({ item }) => {
   return (
     <ListView.Item
       key={item.id}
-      checkboxInput={<Checkbox value={item.selected} bsClass="" />}
+      checkboxInput={
+        <Checkbox
+          checked={item.selected}
+          bsClass=""
+          onClick={e => onItemSelectChange(item)}
+        />
+      }
       actions={
         <span>
           <Button
@@ -140,5 +146,6 @@ export const ScanListItem = ({ item }) => {
 };
 
 ScanListItem.propTypes = {
-  item: PropTypes.object
+  item: PropTypes.object,
+  onItemSelectChange: PropTypes.func
 };

client/src/components/scans/scans.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 
 import {
   Alert,
@@ -12,17 +11,59 @@ import {
   Modal
 } from 'patternfly-react';
 
+import { bindMethods } from '../../common/helpers';
+import Store from '../../redux/store';
+import { toastNotificationTypes } from '../../redux/constants';
 import { getScans } from '../../redux/actions/scansActions';
 
 import ScansToolbar from './scansToolbar';
-import ScansEmptyState from './scansEmptyState';
+import SourcesEmptyState from '../sources/sourcesEmptyState';
 import { ScanListItem } from './scanListItem';
 
 class Scans extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, [
+      'runScans',
+      'repeatScans',
+      'downloadScans',
+      'itemSelectChange',
+      'addSource',
+      'importSources'
+    ]);
+    this.state = {
+      filteredItems: [],
+      selectedItems: []
+    };
+  }
+
   componentDidMount() {
     this.props.getScans();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.scans !== this.props.scans) {
+      // Reset selection state though we may want to keep selections over refreshes...
+      nextProps.scans.forEach(scan => {
+        scan.selected = false;
+      });
+
+      let filteredItems = this.filterScans(
+        nextProps.scans,
+        nextProps.activeFilters
+      );
+
+      this.setState({ filteredItems: filteredItems, selectedItems: [] });
+    } else if (nextProps.activeFilters !== this.props.activeFilters) {
+      let filteredItems = this.filterScans(
+        nextProps.scans,
+        nextProps.activeFilters
+      );
+      this.setState({ filteredItems: filteredItems });
+    }
+  }
+
   matchesFilter(item, filter) {
     let re = new RegExp(filter.value, 'i');
 
@@ -50,11 +91,9 @@ class Scans extends React.Component {
     return matches;
   }
 
-  filterScans() {
-    const { scans, activeFilters } = this.props;
-
+  filterScans(scans, filters) {
     return scans.filter(item => {
-      return this.matchesFilters(item, activeFilters);
+      return this.matchesFilters(item, filters);
     });
   }
 
@@ -102,18 +141,81 @@ class Scans extends React.Component {
     });
   }
 
+  runScans() {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: 'NYI',
+      message: 'Running scans is not yet implemented'
+    });
+  }
+
+  repeatScans() {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: 'NYI',
+      message: 'Repeating scans is not yet implemented'
+    });
+  }
+
+  downloadScans() {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: 'NYI',
+      message: 'Downloading scans is not yet implemented'
+    });
+  }
+
+  itemSelectChange(item) {
+    const { filteredItems } = this.state;
+
+    item.selected = !item.selected;
+    let selectedItems = filteredItems.filter(item => {
+      return item.selected === true;
+    });
+
+    this.setState({ selectedItems: selectedItems });
+  }
+
+  addSource() {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: 'NYI',
+      message: 'Importing sources is not yet implemented'
+    });
+  }
+
+  importSources() {
+    Store.dispatch({
+      type: toastNotificationTypes.TOAST_ADD,
+      alertType: 'error',
+      header: 'NYI',
+      message: 'Adding sources is not yet implemented'
+    });
+  }
+
   renderList(items) {
     return (
       <Row>
         <ListView className="quipicords-list-view">
-          {items.map((item, index) => <ScanListItem item={item} key={index} />)}
+          {items.map((item, index) => (
+            <ScanListItem
+              item={item}
+              key={index}
+              onItemSelectChange={this.itemSelectChange}
+            />
+          ))}
         </ListView>
       </Row>
     );
   }
 
   render() {
     const { loading, loadError, errorMessage, scans } = this.props;
+    const { filteredItems, selectedItems } = this.state;
 
     if (loading) {
       return (
@@ -135,21 +237,26 @@ class Scans extends React.Component {
       );
     }
     if (scans && scans.length) {
-      let filteredScans = this.filterScans(scans);
-      this.sortScans(filteredScans);
+      this.sortScans(filteredItems);
 
       return [
         <ScansToolbar
           totalCount={scans.length}
-          filteredCount={filteredScans.length}
+          filteredCount={filteredItems.length}
           key={1}
+          runScansAvailable={selectedItems && selectedItems.length > 0}
+          onRunScans={this.runScans}
+          repeatScansAvailable={selectedItems && selectedItems.length > 0}
+          onRepeatScans={this.repeatScans}
+          downloadScansAvailable={selectedItems && selectedItems.length > 0}
+          onDownloadScans={this.downloadScans}
         />,
         <Grid fluid key={2}>
-          {this.renderList(filteredScans)}
+          {this.renderList(filteredItems)}
         </Grid>
       ];
     }
-    return <ScansEmptyState />;
+    return <SourcesEmptyState />;
   }
 }
 
@@ -184,4 +291,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Scans));
+export default connect(mapStateToProps, mapDispatchToProps)(Scans);

client/src/components/scans/scansToolbar.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 
 import { Button, Filter, Sort, Toolbar } from 'patternfly-react';
 
@@ -196,11 +195,24 @@ class ScansToolbar extends React.Component {
   renderActions() {
     return (
       <div className="form-group">
-        <Button className="unavailable" bsStyle="primary">
+        <Button
+          disabled={this.props.runScansAvailable === false}
+          onClick={this.props.onRunScans}
+        >
           Scan Now
         </Button>
-        <Button className="unavailable">Repeat Scan</Button>
-        <Button className="unavailable">Download</Button>
+        <Button
+          disabled={this.props.repeatScansAvailable === false}
+          onClick={this.props.onRepeatScans}
+        >
+          Repeat Scan
+        </Button>
+        <Button
+          disabled={this.props.downloadScansAvailable === false}
+          onClick={this.props.onDownloadScans}
+        >
+          Download
+        </Button>
       </div>
     );
   }
@@ -270,7 +282,13 @@ ScansToolbar.propTypes = {
   filterValue: PropTypes.any,
   activeFilters: PropTypes.array,
   sortType: PropTypes.object,
-  sortAscending: PropTypes.bool
+  sortAscending: PropTypes.bool,
+  runScansAvailable: PropTypes.bool,
+  onRunScans: PropTypes.func,
+  repeatScansAvailable: PropTypes.bool,
+  onRepeatScans: PropTypes.func,
+  downloadScansAvailable: PropTypes.bool,
+  onDownloadScans: PropTypes.func
 };
 
 function mapStateToProps(state, ownProps) {
@@ -279,4 +297,4 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
-export default withRouter(connect(mapStateToProps)(ScansToolbar));
+export default connect(mapStateToProps)(ScansToolbar);