DRAFT Convert CompareRunsView

frontend/src/components/view.js

@@ -10,7 +10,7 @@ import {
 
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
-import { AccessibilityDashboardView, CompareRunsView, JenkinsJobView, JenkinsJobAnalysisView } from '../views';
+import { AccessibilityDashboardView, JenkinsJobView, JenkinsJobAnalysisView } from '../views';
 import AccessibilityAnalysisView from '../views/accessibilityanalysis';
 
 const VIEW_MAP = {

frontend/src/views/compareruns.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -29,44 +29,37 @@ import {
 import { IbutsuContext } from '../services/context';
 import ResultView from '../components/result';
 
-export class CompareRunsView extends React.Component {
-  static contextType = IbutsuContext;
-  static propTypes = {
-    location: PropTypes.object,
-    view: PropTypes.object
-  };
+COLUMNS = [{title: 'Test', cellFormatters: [expandable]}, 'Run 1', 'Run 2'];
 
-  constructor (props) {
-    super(props);
-    this.state = {
-      columns: [{title: 'Test', cellFormatters: [expandable]}, 'Run 1', 'Run 2'],
-      rows: [getSpinnerRow(3)],
-      results: [],
-      selectedResults: [],
-      cursor: null,
-      pageSize: 0,
-      page: 1,
-      totalItems: 0,
-      totalPages: 0,
-      isEmpty: false,
-      isError: false,
-      includeSkipped: false,
-      isLoading: false,
-      filters: [Object.assign({
-        'result': {op: 'in', val: 'failed;error;passed'},
-        'id': 0
-      }),
-      Object.assign({
-        'result': {op: 'in', val: 'failed;error;passed'},
-        'id': 1
-      })],
-      loadingProps: {}
-    };
-    this.refreshResults = this.refreshResults.bind(this);
-    this.onCollapse = this.onCollapse.bind(this);
-  }
+const CompareRunsView = (props) => {
+  const {view} = props;
+
+  const context = useContext(IbutsuContext);
+
+  const [results, setResults] = useState([]);
+  const [selectedResults, setSelectedResults] = useState([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [totalItems, setTotalItems] = useState(0); 
 
-  onSkipCheck = (checked) => {
+  const [isError, setIsError] = useState(false);
+  const [includeSkipped, setIncludeSkipped] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingProps, setLoadingProps] = useState({});
+
+  const [filters] = useState([
+    // these are odd, same but different ID?
+    {
+      'result': {op: 'in', val: 'failed;error;passed'},
+      'id': 0
+    },
+    {
+      'result': {op: 'in', val: 'failed;error;passed'},
+      'id': 1
+    }
+  ]);
+
+  const onSkipCheck = (checked) => {
     let filters = this.state.filters;
     filters.forEach(filter => {
       filter['result']['val'] = ('failed;error;passed') + ((checked) ? ';skipped;xfailed' : '');
@@ -78,13 +71,13 @@ export class CompareRunsView extends React.Component {
     );
   };
 
-  setFilter = (filterId, field, value) => {
+  const setFilter = (filterId, field, value) => {
     // maybe process values array to string format here instead of expecting caller to do it?
     let operator = (value.includes(';')) ? 'in' : 'eq';
     this.updateFilters(filterId, field, operator, value);
   };
 
-  updateFilters (filterId, name, operator, value) {
+  const updateFilters = (filterId, name, operator, value) => {
     let newFilters = this.state.filters.map((filter) => {
       if (filter.id === filterId) {
         if ((value === null) || (value.length === 0)) {
@@ -99,13 +92,13 @@ export class CompareRunsView extends React.Component {
     this.setState({filters: newFilters, page: 1});
   }
 
-  removeFilter = (filterId, id) => {
+  const removeFilter = (filterId, id) => {
     if ((id !== 'result') && (id !== 'run_id')) {   // Don't allow removal of error/failure filter
       this.updateFilters(filterId, id, null, null);
     }
   };
 
-  getResultsForTable () {
+  const getResultsForTable () {
     const filter = this.state.filters;
 
     // Check to see if filters have been set besides id and result
@@ -171,7 +164,7 @@ export class CompareRunsView extends React.Component {
     }
   }
 
-  onCollapse (event, rowIndex, isOpen) {
+  const onCollapse (event, rowIndex, isOpen) {
     const { rows } = this.state;
 
     // lazy-load the result view so we don't have to make a bunch of artifact requests
@@ -192,19 +185,19 @@ export class CompareRunsView extends React.Component {
     this.setState({rows});
   }
 
-  setPage = (_event, pageNumber) => {
+  const setPage = (_event, pageNumber) => {
     this.setState({page: pageNumber}, () => {
       this.getResultsForTable();
     });
   };
 
-  refreshResults = () => {
+  const refreshResults = () => {
     this.setState({selectedResults: []});
     this.getResultsForTable();
   };
 
   // Remove all active filters and clear table
-  clearFilters = () => {
+  const clearFilters = () => {
     this.setState({
       filters: [Object.assign({
         'result': {op: 'in', val: 'failed;error;passed'},
@@ -315,4 +308,10 @@ export class CompareRunsView extends React.Component {
       </Card>
     );
   }
-}
+};
+
+CompareRunsView.propTypes = {
+  view: PropTypes.object
+};
+
+export default CompareRunsView;

frontend/src/views/index.js

@@ -1,4 +1,3 @@
 export { JenkinsJobView } from './jenkinsjob';
 export { JenkinsJobAnalysisView } from './jenkinsjobanalysis';
-export { CompareRunsView } from './compareruns';
 export { AccessibilityDashboardView } from './accessibilitydashboard.js';