Add reduction history page to display runs (#36)

* Update route names * Update reduction history page * Remove commented out code * Remove redundant comments * Allow a more dynamic selection of the IR-API IP using an env file, this way staging and prod can be different and we can also just change it for whatever we need during development. * Alter fetch request logic Add accessibility changes to table * Update reduction history button url * Correct route for SciGateway sidebar * Alter homepage browse reductions url * Add missing new line * Use different port Avoids issues when running the app through SciGateway * Add missing table headings Some headings currently have placeholder values until the API functionality is added * Fix url * Make even rows background color use theme * Delete History.tsx * Sort by desc initially so recent reductions at the top * Correct wrong run date being rendered * Increase prettier line length * Refactor to accommodate api changes * Adding missing sorting functionality * Change any type * Prettier formatting changes * Remove debugging logs * Add reduction status formatting * Add missing sorting functionality --------- Co-authored-by: Samuel Jones <[email protected]>
fiaisis · Feb 29, 2024 · a1865b3 · a1865b3
1 parent 6becd55
commit a1865b3
Show file tree

Hide file tree

Showing 18 changed files with 3,305 additions and 2,847 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,3 @@
+# This needs to include the http:// or https:// part of the URL
+
+REACT_APP_IR_REST_API_URL=http://localhost:8080
diff --git a/.github/workflows/yarn_build.yml b/.github/workflows/yarn_build.yml
@@ -4,14 +4,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: 14
-    - name: Install dependencies
-      run: yarn install
-    - name: Build
-      run: yarn build
-    - name: Test
-      run: yarn test --passWithNoTests
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Test
+        run: yarn test --passWithNoTests
diff --git a/.prettierrc b/.prettierrc
@@ -2,7 +2,7 @@
   "singleQuote": true,
   "semi": true,
   "trailingComma": "es5",
-  "printWidth": 80,
+  "printWidth": 120,
   "tabWidth": 2,
   "endOfLine": "auto"
 }
diff --git a/public/index.html b/public/index.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -26,14 +23,8 @@
   </head>
 
   <body>
-    <script
-      crossorigin
-      src="https://unpkg.com/react@17/umd/react.production.min.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
-    ></script>
+    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="demo_plugin"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import Instrument from './Instrument';
-import History from './History';
 import LiveReduction from './LiveReduction';
 import ReductionHistory from './ReductionHistory';
 import HomePage from './HomePage';
@@ -18,13 +17,13 @@ const App: FC = () => (
         <Route path="/instruments">
           <Instrument />
         </Route>
-        <Route path="/history">
-          <History />
+        <Route path="/reduction-history/ALF">
+          <ReductionHistory />
         </Route>
-        <Route path="/:instrumentName/live_reduction">
+        <Route path="/live-reduction/:instrumentName">
           <LiveReduction />
         </Route>
-        <Route path="/:instrumentName/reduction_history">
+        <Route path="/reduction-history/:instrumentName">
           <ReductionHistory />
         </Route>
       </Switch>

diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx
@@ -1,19 +1,11 @@
 import React from 'react';
-import {
-  ThemeProvider,
-  StyledEngineProvider,
-  Theme,
-  createTheme,
-} from '@mui/material/styles';
+import { ThemeProvider, StyledEngineProvider, Theme, createTheme } from '@mui/material/styles';
 
 interface State {
   theme: Theme;
 }
 
-class GlobalStyles extends React.Component<
-  { children: React.ReactNode },
-  State
-> {
+class GlobalStyles extends React.Component<{ children: React.ReactNode }, State> {
   public constructor(props: { children: React.ReactNode }) {
     super(props);
     this.state = {
@@ -33,27 +25,18 @@ class GlobalStyles extends React.Component<
     console.log('Received a scigateway event:', e);
     console.log('Action structure:', (e as CustomEvent).detail);
     const action = (e as CustomEvent).detail;
-    if (
-      action.type === 'scigateway:api:send_themeoptions' &&
-      action.payload &&
-      action.payload.theme
-    ) {
+    if (action.type === 'scigateway:api:send_themeoptions' && action.payload && action.payload.theme) {
       this.setState({ theme: action.payload.theme });
 
       console.log('Received theme:', action.payload.theme);
-      console.log(
-        'Current theme mode after setting:',
-        this.state.theme.palette.mode
-      );
+      console.log('Current theme mode after setting:', this.state.theme.palette.mode);
     }
   };
 
   public render(): React.ReactElement {
     return (
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={this.state.theme}>
-          {this.props.children}
-        </ThemeProvider>
+        <ThemeProvider theme={this.state.theme}>{this.props.children}</ThemeProvider>
       </StyledEngineProvider>
     );
   }

diff --git a/src/History.tsx b/src/History.tsx
diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -1,15 +1,6 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
-import {
-  Grid,
-  Box,
-  Paper,
-  Button,
-  Avatar,
-  alpha,
-  styled,
-  useMediaQuery,
-} from '@mui/material';
+import { Grid, Box, Paper, Button, Avatar, alpha, styled, useMediaQuery } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { Trans, useTranslation } from 'react-i18next';
 import BackgroundImage from './images/background.jpg';
@@ -114,25 +105,20 @@ interface BrowseDecalProps {
 }
 
 const BrowseDecal = styled('div', {
-  shouldForwardProp: (prop) =>
-    prop !== 'decal2Image' &&
-    prop !== 'decal2DarkImage' &&
-    prop !== 'decal2DarkHCImage',
-})<BrowseDecalProps>(
-  ({ theme, decal2Image, decal2DarkImage, decal2DarkHCImage }) => ({
-    backgroundImage:
-      theme.palette.mode === 'light'
-        ? `url(${decal2Image})`
-        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (theme as any).colours?.type === 'default'
-        ? `url(${decal2DarkImage})`
-        : `url(${decal2DarkHCImage})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'top left',
-    backgroundSize: 'auto 100%',
-    height: '100%',
-  })
-);
+  shouldForwardProp: (prop) => prop !== 'decal2Image' && prop !== 'decal2DarkImage' && prop !== 'decal2DarkHCImage',
+})<BrowseDecalProps>(({ theme, decal2Image, decal2DarkImage, decal2DarkHCImage }) => ({
+  backgroundImage:
+    theme.palette.mode === 'light'
+      ? `url(${decal2Image})`
+      : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (theme as any).colours?.type === 'default'
+      ? `url(${decal2DarkImage})`
+      : `url(${decal2DarkHCImage})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'top left',
+  backgroundSize: 'auto 100%',
+  height: '100%',
+}));
 
 const LightBlueButton = styled(Button)(({ theme }) => ({
   color: '#FFFFFF',
@@ -179,26 +165,12 @@ const HomePage = (): React.ReactElement => {
               transform: 'translate(-50%)',
             }}
           >
-            <Typography
-              variant="h2"
-              sx={
-                isViewportMdOrLager
-                  ? backgroundTitleStyles
-                  : backgroundTitleStylesMobile
-              }
-            >
+            <Typography variant="h2" sx={isViewportMdOrLager ? backgroundTitleStyles : backgroundTitleStylesMobile}>
               <Trans i18nKey="home-page.title_line1">
                 <strong>Data reduction</strong> and <strong>processing</strong>
               </Trans>
             </Typography>
-            <Typography
-              variant="h2"
-              sx={
-                isViewportMdOrLager
-                  ? backgroundTitleStyles
-                  : backgroundTitleStylesMobile
-              }
-            >
+            <Typography variant="h2" sx={isViewportMdOrLager ? backgroundTitleStyles : backgroundTitleStylesMobile}>
               <Trans i18nKey="home-page.title_line2">
                 for <strong>large-scale</strong> science facilities
               </Trans>
@@ -227,9 +199,7 @@ const HomePage = (): React.ReactElement => {
                     marginBottom: theme.spacing(2),
                   })}
                 >
-                  {t(
-                    'Reduce and perform basic analysis remotely from a clean web interface'
-                  )}
+                  {t('Reduce and perform basic analysis remotely from a clean web interface')}
                 </Typography>
                 <PaperDescription variant="body1">
                   {t(
@@ -238,9 +208,8 @@ const HomePage = (): React.ReactElement => {
                 </PaperDescription>
                 <PaperDescription variant="body1">
                   <Trans i18nKey="home-page.browse.description2">
-                    <strong>Interactive Reduction</strong> focuses on providing
-                    scientists an interface to perform automatic reductions for
-                    beamline instruments from the web.
+                    <strong>Interactive Reduction</strong> focuses on providing scientists an interface to perform
+                    automatic reductions for beamline instruments from the web.
                   </Trans>
                 </PaperDescription>
                 <Box marginTop="16px">
@@ -312,20 +281,16 @@ const HomePage = (): React.ReactElement => {
                 <Avatar sx={avatarStyles}>
                   <SearchIcon sx={avatarIconStyles} />
                 </Avatar>
-                <PaperHeading variant="h4">
-                  {t('Historical reductions')}
-                </PaperHeading>
+                <PaperHeading variant="h4">{t('Historical reductions')}</PaperHeading>
                 <PaperDescription variant="body1">
-                  {t(
-                    'Browse and search a list of all reduction performed on the platform.'
-                  )}
+                  {t('Browse and search a list of all reduction performed on the platform.')}
                 </PaperDescription>
                 <Box marginTop="auto">
                   <Button
                     color="primary"
                     variant="contained"
                     component={Link}
-                    to={t('history')}
+                    to={t('reduction-history/ALF')}
                     data-testid="browse-button"
                   >
                     {t('Browse reductions')}
@@ -335,10 +300,7 @@ const HomePage = (): React.ReactElement => {
             </Paper>
           </Grid>
           <Grid item xs={12} md={4}>
-            <Paper
-              sx={{ ...paperStyles, backgroundColor: '#003088' }}
-              elevation={1}
-            >
+            <Paper sx={{ ...paperStyles, backgroundColor: '#003088' }} elevation={1}>
               <div
                 style={{
                   backgroundImage: `url(${GreenSwirl2Image})`,
@@ -349,9 +311,7 @@ const HomePage = (): React.ReactElement => {
                 }}
               >
                 <Box sx={paperContentStyles}>
-                  <BluePaperHeading variant="h4">
-                    {t('ISIS Neutron and Muon Source')}
-                  </BluePaperHeading>
+                  <BluePaperHeading variant="h4">{t('ISIS Neutron and Muon Source')}</BluePaperHeading>
                   <BluePaperDescription variant="body1">
                     {t(
                       'World-leading centre for research giving unique insights into the properties of materials on the atomic scale.'

diff --git a/src/Instrument.styles.tsx b/src/Instrument.styles.tsx
@@ -2,13 +2,11 @@ import { CSSProperties } from 'react';
 import { Card } from '@mui/material';
 import { styled } from '@mui/system';
 
-export const ExpandableCard = styled(Card)<{ expanded: boolean }>(
-  ({ expanded }) => ({
-    backgroundColor: expanded ? '#12285c' : '#23428d',
-    color: 'white',
-    margin: '8px',
-  })
-);
+export const ExpandableCard = styled(Card)<{ expanded: boolean }>(({ expanded }) => ({
+  backgroundColor: expanded ? '#12285c' : '#23428d',
+  color: 'white',
+  margin: '8px',
+}));
 
 export const styles: Record<string, CSSProperties> = {
   tableSortLabel: {