chore(frontend): code cleanup (#291)

shini4i · May 5, 2024 · 2664eaa · 2664eaa
1 parent 24e03b2
commit 2664eaa
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 126 deletions.
diff --git a/web/src/App.js b/web/src/App.js
@@ -1,9 +1,10 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Box, CircularProgress, createTheme, lighten, ThemeProvider } from '@mui/material';
+
 import RecentTasks from './Components/RecentTasks';
 import HistoryTasks from './Components/HistoryTasks';
 import Layout from './Layout';
 import Page404 from './Page404';
-import { Box, CircularProgress, createTheme, lighten, ThemeProvider } from '@mui/material';
 import { ErrorProvider } from './ErrorContext';
 import TaskView from './Components/TaskView';
 import { AuthContext, useAuth } from './auth';

diff --git a/web/src/Components/ApplicationsFilter.js b/web/src/Components/ApplicationsFilter.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
+
 import { fetchApplications } from '../Services/Data';
 
 function ApplicationsFilter({ value, onChange, setError, setSuccess }) {

diff --git a/web/src/Components/HistoryTasks.js b/web/src/Components/HistoryTasks.js
@@ -8,11 +8,12 @@ import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import ApplicationsFilter from './ApplicationsFilter';
-import TasksTable, { useTasks } from './TasksTable';
-import { endOfDay, startOfDay } from 'date-fns';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import { endOfDay, startOfDay } from 'date-fns';
+
+import ApplicationsFilter from './ApplicationsFilter';
+import TasksTable, { useTasks } from './TasksTable';
 import { useErrorContext } from '../ErrorContext';
 
 const DateRangePickerCustomInput = forwardRef(({ value, onClick }, ref) => (

diff --git a/web/src/Components/Navbar.js b/web/src/Components/Navbar.js
@@ -1,18 +1,21 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
-import Stack from '@mui/material/Stack';
-import Tooltip from '@mui/material/Tooltip';
+import {
+  AppBar,
+  Box,
+  Toolbar,
+  Typography,
+  Link,
+  Stack,
+  Tooltip
+} from '@mui/material';
+import GitHubIcon from '@mui/icons-material/GitHub';
 import RestoreIcon from '@mui/icons-material/Restore';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import QuizRoundedIcon from '@mui/icons-material/QuizRounded';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
+
 import { fetchVersion } from '../Services/Data';
 import { useErrorContext } from '../ErrorContext';
 import Sidebar from './Sidebar';

diff --git a/web/src/Components/RecentTasks.js b/web/src/Components/RecentTasks.js
@@ -1,15 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
+import {
+  Box,
+  Container,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  Typography
+} from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
+
 import ApplicationsFilter from './ApplicationsFilter';
 import TasksTable, { useTasks } from './TasksTable';
 import { useErrorContext } from '../ErrorContext';

diff --git a/web/src/Components/Sidebar.js b/web/src/Components/Sidebar.js
@@ -15,6 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import Switch from '@mui/material/Switch';
+
 import { fetchConfig } from '../config';
 import { releaseDeployLock, setDeployLock, useDeployLock } from '../deployLockHandler';
 import { AuthContext } from '../auth';

diff --git a/web/src/Components/TaskView.js b/web/src/Components/TaskView.js
@@ -1,12 +1,9 @@
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
 import React, { useContext, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { fetchTask } from '../Services/Data';
-import { useErrorContext } from '../ErrorContext';
 import {
+  Box,
+  Button,
+  Container,
   Dialog,
   DialogActions,
   DialogContent,
@@ -15,16 +12,20 @@ import {
   Divider,
   Grid,
   Paper,
+  Typography,
+  CircularProgress,
+  Tooltip
 } from '@mui/material';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+
+import { fetchTask } from '../Services/Data';
+import { useErrorContext } from '../ErrorContext';
 import { formatDateTime, ProjectDisplay, StatusReasonDisplay } from './TasksTable';
 import { AuthContext } from '../auth';
 import { fetchConfig } from '../config';
 import { useDeployLock } from '../deployLockHandler';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
-import CircularProgress from '@mui/material/CircularProgress';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import Tooltip from '@mui/material/Tooltip';
 
 export default function TaskView() {
   const { id } = useParams();
@@ -57,9 +58,9 @@ export default function TaskView() {
   }, []);
 
   const getArgoCDUrl = () => {
-    if (configData && configData.argo_cd_url_alias) {
+    if (configData?.argo_cd_url_alias) {
       return `${configData.argo_cd_url_alias}/applications/${task.app}`;
-    } else if (configData && configData.argo_cd_url) {
+    } else if (configData?.argo_cd_url) {
       return `${configData.argo_cd_url.Scheme}://${configData.argo_cd_url.Host}${configData.argo_cd_url.Path}/applications/${task.app}`;
     }
     return '';
@@ -235,7 +236,7 @@ export default function TaskView() {
               <Divider />
             </Grid>
             {task.images.map((item, index) => (
-              <Grid item xs={12} sm={6} key={index}>
+              <Grid item xs={12} sm={6} key={`${item.image}:${item.tag}`}>
                 <Typography variant="body2" color="textSecondary">
                   Image {index + 1}
                 </Typography>

diff --git a/web/src/Components/TasksTable.js b/web/src/Components/TasksTable.js
@@ -1,6 +1,7 @@
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import LaunchIcon from '@mui/icons-material/Launch';
+import React, { useEffect, useState } from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+import { addMinutes, format } from 'date-fns';
+import PropTypes from 'prop-types';
 import { Link, MenuItem, TextField } from '@mui/material';
 import Box from '@mui/material/Box';
 import Pagination from '@mui/material/Pagination';
@@ -12,16 +13,17 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import { addMinutes, format } from 'date-fns';
-import React, { useEffect, useState } from 'react';
-import { Link as ReactLink } from 'react-router-dom';
-import { fetchTasks } from '../Services/Data';
-import { useDeployLock } from '../deployLockHandler';
-import { relativeHumanDuration, relativeTime, relativeTimestamp } from '../Utils';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 import CircularProgress from '@mui/material/CircularProgress';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import LaunchIcon from '@mui/icons-material/Launch';
+
+import { fetchTasks } from '../Services/Data';
+import { useDeployLock } from '../deployLockHandler';
+import { relativeHumanDuration, relativeTime, relativeTimestamp } from '../Utils';
 
 export function ProjectDisplay({ project }) {
   if (project.indexOf('http') === 0) {
@@ -34,6 +36,10 @@ export function ProjectDisplay({ project }) {
   return <Typography variant={'body2'}>{project}</Typography>;
 }
 
+ProjectDisplay.propTypes = {
+  project: PropTypes.string.isRequired,
+};
+
 export function StatusReasonDisplay({ reason }) {
   return (
     <Typography

diff --git a/web/src/ErrorContext.js b/web/src/ErrorContext.js
@@ -1,4 +1,5 @@
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 
 const context = createContext(null);
 
@@ -10,71 +11,61 @@ export const ErrorProvider = ({ children }) => {
     return () => timeouts.current.forEach(timeout => clearTimeout(timeout));
   }, []);
 
+  const removeStackItem = (id) => {
+    setStack(stack => {
+      delete stack[id];
+      return { ...stack };
+    });
+  };
+
+  const setSuccessTimeout = (id) => {
+    timeouts.current.push(
+      setTimeout(() => removeStackItem(id), 5000)
+    );
+  };
+
+  const value = useMemo(() => ({
+    stack,
+    messages: Object.keys(stack).reduce((result, key) => {
+      let item = stack[key];
+      let found = false;
+      for (let searchItem of result) {
+        if (
+          searchItem.message === item.message &&
+          searchItem.status === item.status
+        ) {
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        result.push(item);
+      }
+      return result;
+    }, []),
+    setError: (id, message) => {
+      if (!message) {
+        message = 'Unknown error';
+      }
+      setStack(stack => {
+        stack[id] = { status: 'error', message };
+        return { ...stack };
+      });
+    },
+    setSuccess: (id, message) => {
+      setStack(stack => {
+        if (!stack[id]) {
+          return stack;
+        }
+        stack[id] = { status: 'success', message };
+        setSuccessTimeout(id);
+        return { ...stack };
+      });
+    },
+  }), [stack]);
+
   return (
-    <context.Provider
-      value={{
-        stack,
-        messages: Object.keys(stack).reduce((result, key) => {
-          let item = stack[key];
-          let found = false;
-          for (let searchItem of result) {
-            if (
-              searchItem.message === item.message &&
-              searchItem.status === item.status
-            ) {
-              found = true;
-              break;
-            }
-          }
-          if (!found) {
-            result.push(item);
-          }
-          return result;
-        }, []),
-        setError: (id, message) => {
-          if (!message) {
-            message = 'Unknown error';
-          }
-          setStack(stack => {
-            stack[id] = { status: 'error', message };
-            return { ...stack };
-          });
-        },
-        setSuccess: (id, message) => {
-          setStack(stack => {
-            if (!stack[id]) {
-              // don't show success message when there wasn't any error
-              return stack;
-            }
-            // add success message
-            stack[id] = { status: 'success', message };
-            // set timer to remove
-            timeouts.current.push(
-              setTimeout(() => {
-                setStack(stack => {
-                  delete stack[id];
-                  return { ...stack };
-                });
-              }, 5000),
-            );
-            // return new stack
-            return { ...stack };
-          });
-        },
-        clearMessage: (status, message) => {
-          setStack(stack => {
-            return Object.keys(stack).reduce((result, key) => {
-              let item = stack[key];
-              if (item.status === status && item.message === message) {
-                return result;
-              }
-              result[key] = item;
-              return result;
-            }, {});
-          });
-        },
-      }}
-    >
+    <context.Provider value={value}>
       {children}
     </context.Provider>
   );
@@ -83,3 +74,7 @@ export const ErrorProvider = ({ children }) => {
 export const useErrorContext = () => {
   return useContext(context);
 };
+
+ErrorProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/web/src/Layout.js b/web/src/Layout.js
@@ -1,10 +1,11 @@
-import Navbar from './Components/Navbar';
-import { Outlet } from 'react-router-dom';
 import React from 'react';
-import { useErrorContext } from './ErrorContext';
+import { Outlet } from 'react-router-dom';
 import MuiAlert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 
+import Navbar from './Components/Navbar';
+import { useErrorContext } from './ErrorContext';
+
 const Alert = React.forwardRef(function Alert(props, ref) {
   return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });

diff --git a/web/src/Page404.js b/web/src/Page404.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+
 import './Page404.css';
 
 function Page404() {