Reduction history refactor (#276)

* Refactor reduction history

* Add in symbols

* Tidy imports

* Fix linting warnings

* Delete ReductionHistory.tsx

* Prettier formatting

* Fix column spacing

* Rename to job from reduction

* Add sticky headers

* Fix rendering for extra column

* Disable prop-types warning

* Add run type logic

* Add underline

* Add reductions page navigation

* Remove import

* Remove file icons

.eslintrc.js

@@ -25,12 +25,14 @@ module.exports = {
         endOfLine: 'auto',
       },
     ],
-    // disable for all files - this means we can have plain JS files not causing errors
+    // Disable prop-types globally
+    'react/prop-types': 'off',
+    // Disable explicit-function-return-type for all files - this means we can have plain JS files not causing errors
     '@typescript-eslint/explicit-function-return-type': 'off',
   },
   overrides: [
     {
-      // and enable again specifically for TS files
+      // Whitelist explicit-function-return-type for TS files
       files: ['*.ts', '*.tsx'],
       rules: {
         '@typescript-eslint/explicit-function-return-type': [

cypress.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   component: {
     devServer: {
-      framework: "create-react-app",
-      bundler: "webpack",
+      framework: 'create-react-app',
+      bundler: 'webpack',
     },
   },
 

cypress/support/component.ts

@@ -17,12 +17,12 @@
 import 'cypress-real-events/support';
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react'
+import { mount } from 'cypress/react';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -31,12 +31,12 @@ import { mount } from 'cypress/react'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mount', mount);
 
 // Example use:
 // cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

src/App.tsx

@@ -5,7 +5,8 @@ import ReactGA from 'react-ga4';
 
 // Local data
 import Instruments from './Instruments';
-import ReductionHistory from './ReductionHistory';
+import JobsAll from './Jobs/JobsAll';
+import JobsGeneral from './Jobs/JobsGeneral';
 import HomePage from './HomePage';
 import ValueEditor from './ValueEditor';
 import GlobalStyles from './GlobalStyles';
@@ -46,10 +47,13 @@ const App: FC = () => {
           <Route path="/instruments">
             <Instruments />
           </Route>
+          <Route path="/reduction-history/ALL">
+            <JobsAll />
+          </Route>
           <Route path="/reduction-history/:instrumentName">
-            <ReductionHistory />
+            <JobsGeneral />
           </Route>
-          <Route path="/value-editor/:reductionId">
+          <Route path="/value-editor/:jobId">
             <ValueEditor />
           </Route>
         </Switch>

src/HomePage.tsx

@@ -291,7 +291,7 @@ const HomePage = (): React.ReactElement => {
                     color="primary"
                     variant="contained"
                     component={Link}
-                    to={t('reduction-history/MARI')}
+                    to={t('reduction-history/ALL')}
                     data-testid="browse-button"
                   >
                     {t('Browse reductions')}

src/Jobs/JobsAll.tsx

@@ -0,0 +1,117 @@
+// React components
+import React, { useCallback, useEffect, useState } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+
+// Material UI components
+import { useTheme } from '@mui/material/styles';
+import { TableCell } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material';
+
+// Local data
+import JobsBase, { Job, headerStyles } from './JobsBase';
+
+const JobsAll: React.FC = () => {
+  const fiaApiUrl = process.env.REACT_APP_FIA_REST_API_URL;
+  const theme = useTheme();
+  const history = useHistory();
+
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [totalRows, setTotalRows] = useState(0);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [orderDirection, setOrderDirection] = useState<'asc' | 'desc'>('desc');
+  const [orderBy, setOrderBy] = useState<string>('run_start');
+  const [selectedInstrument, setSelectedInstrument] = useState<string>('ALL');
+
+  const fetchTotalCount = useCallback(async (): Promise<void> => {
+    try {
+      const response = await fetch(`${fiaApiUrl}/jobs/count`);
+      const data = await response.json();
+      setTotalRows(data.count);
+    } catch (error) {
+      console.error('Error fetching run count:', error);
+    }
+  }, [fiaApiUrl]);
+
+  const fetchJobs = useCallback(async (): Promise<void> => {
+    try {
+      const token = localStorage.getItem('scigateway:token');
+      const offset = currentPage * rowsPerPage;
+      const query = `limit=${rowsPerPage}&offset=${offset}&order_direction=${orderDirection}&include_run=true`;
+      const response = await fetch(`${fiaApiUrl}/jobs?${query}`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+      });
+      const data = await response.json();
+
+      setJobs(data);
+    } catch (error) {
+      console.error('Error fetching reductions:', error);
+    }
+  }, [currentPage, rowsPerPage, orderDirection, fiaApiUrl]);
+
+  useEffect(() => {
+    fetchTotalCount();
+    fetchJobs();
+  }, [fetchTotalCount, fetchJobs]);
+
+  const handleInstrumentChange = (event: SelectChangeEvent<string>): void => {
+    const newInstrument = event.target.value;
+    setSelectedInstrument(newInstrument);
+    setCurrentPage(0);
+    history.push(`/reduction-history/${newInstrument}`);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number): void => {
+    setCurrentPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setCurrentPage(0);
+  };
+
+  const handleSort = (property: string): void => {
+    const isAsc = orderBy === property && orderDirection === 'asc';
+    setOrderDirection(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    setCurrentPage(0);
+  };
+
+  return (
+    <JobsBase
+      selectedInstrument={selectedInstrument}
+      handleInstrumentChange={handleInstrumentChange}
+      jobs={jobs}
+      totalRows={totalRows}
+      currentPage={currentPage}
+      rowsPerPage={rowsPerPage}
+      handleChangePage={handleChangePage}
+      handleChangeRowsPerPage={handleChangeRowsPerPage}
+      handleSort={handleSort}
+      orderBy={orderBy}
+      orderDirection={orderDirection}
+      customHeaders={<TableCell sx={{ width: '10%', ...headerStyles(theme) }}>Instrument</TableCell>}
+      customRowCells={(job: Job) => (
+        <TableCell sx={{ width: '10%' }}>
+          {job.run?.instrument_name ? (
+            <Link
+              to={`/reduction-history/${job.run.instrument_name}`}
+              style={{
+                color: theme.palette.mode === 'dark' ? '#86b4ff' : theme.palette.primary.main,
+                textDecoration: 'none',
+              }}
+            >
+              {job.run.instrument_name}
+            </Link>
+          ) : (
+            'Unknown'
+          )}
+        </TableCell>
+      )}
+      maxHeight={650}
+    />
+  );
+};
+
+export default JobsAll;