Loading

distribworks · Dec 10, 2023 · 0426fc6 · 0426fc6
1 parent 4936bad
commit 0426fc6
Show file tree

Hide file tree

Showing 16 changed files with 138 additions and 63 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",
+    "@mui/styles": "^5.14.20",
     "ra-data-json-server": "^4.16.2",
     "ra-data-simple-rest": "^4.16.0",
     "react": "^18.2.0",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -6,13 +6,7 @@ import jobs from './jobs';
 import { BusyList } from './executions/BusyList';
 import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
 import { Layout } from './layout';
-import customRoutes from './routes';
-import themeReducer from './themeReducer';
-import createAdminStore from './createAdminStore'
-import { Provider } from "react-redux";
 import { createHashHistory } from "history";
-import { persistStore } from 'redux-persist';
-import { PersistGate } from "redux-persist/integration/react";
 
 declare global {
     interface Window {
@@ -27,17 +21,13 @@ declare global {
 
 const authProvider = () => Promise.resolve();
 const history = createHashHistory();
-const store = createAdminStore({authProvider, dataProvider, history});
-const persistor = persistStore(store);
 
 export const App = () => <Admin
     dashboard={Dashboard}
     authProvider={authProvider}
     dataProvider={dataProvider}
     history={history}
     layout={Layout}
-    customRoutes={customRoutes}
-    customReducers={{ theme: themeReducer }}
 >
     <Resource name="jobs" {...jobs} />
     <Resource name="busy" options={{ label: 'Busy' }} list={BusyList} icon={PlayCircleOutlineIcon} />

diff --git a/ui/src/configuration/Configuration.tsx b/ui/src/configuration/Configuration.tsx
@@ -4,7 +4,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import { Title } from 'react-admin';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { changeTheme } from './actions';
 import { AppState } from '../types';
 

diff --git a/ui/src/configuration/dashboard/CardWithIcon.tsx b/ui/src/configuration/dashboard/CardWithIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC, createElement } from 'react';
 import { Card, Box, Typography, Divider } from '@mui/material';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { Link } from 'react-router-dom';
 
 import cartouche from './cartouche.png';

diff --git a/ui/src/configuration/jobs/JobList.tsx b/ui/src/configuration/jobs/JobList.tsx
@@ -18,7 +18,7 @@ import BulkRunButton from "./BulkRunButton"
 import BulkToggleButton from "./BulkToggleButton"
 import StatusField from "./StatusField"
 import EnabledField from "./EnabledField"
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 
 const JobFilter = (props: any) => (
     <Filter {...props}>

diff --git a/ui/src/configuration/layout/AppBar.tsx b/ui/src/configuration/layout/AppBar.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { AppBar, UserMenu, MenuItemLink } from 'react-admin';
 import Typography from '@mui/material/Typography';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import Clock from './Clock';
 
 import logo from '../images/dkron-logo.png';

diff --git a/ui/src/dashboard/CardWithIcon.tsx b/ui/src/dashboard/CardWithIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC, createElement } from 'react';
 import { Card, Box, Typography, Divider } from '@mui/material';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { Link } from 'react-router-dom';
 
 import cartouche from './cartouche.png';

diff --git a/ui/src/jobs/BulkRunButton.tsx b/ui/src/jobs/BulkRunButton.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import {
     useNotify,
-    fetchStart,
-    fetchEnd,
     Button,
     useUnselectAll,
     useRefresh,
@@ -13,26 +10,23 @@ import { apiUrl } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const BulkRunButton = ({selectedIds}: any) => {
-    const dispatch = useDispatch();
     const notify = useNotify();
     const refresh = useRefresh();
-    const unselectAll = useUnselectAll();
+    const unselectAll = useUnselectAll;
     const [loading, setLoading] = useState(false);
     const runMany = () => {
         for(let id of selectedIds) {
             setLoading(true);
-            dispatch(fetchStart()); // start the global loading indicator
             fetch(`${apiUrl}/jobs/${id}`, { method: 'POST' })
                 .then(() => {
                     notify('Success running job');
                 })
                 .catch((e) => {
-                    notify('Error on running job', 'warning')
+                    notify('Error on running job', { type: 'warning' })
                 })
                 .finally(() => {
                     setLoading(false);
                     refresh();
-                    dispatch(fetchEnd()); // stop the global loading indicator
                 });
         }
         unselectAll('jobs');

diff --git a/ui/src/jobs/BulkToggleButton.tsx b/ui/src/jobs/BulkToggleButton.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import {
     useNotify,
-    fetchStart,
-    fetchEnd,
     Button,
     useUnselectAll,
     useRefresh,
@@ -13,26 +10,23 @@ import { apiUrl } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const BulkToggleButton = ({selectedIds}: any) => {
-    const dispatch = useDispatch();
     const notify = useNotify();
     const refresh = useRefresh();
-    const unselectAll = useUnselectAll();
+    const unselectAll = useUnselectAll;
     const [loading, setLoading] = useState(false);
     const toggleMany = () => {
         for(let id of selectedIds) {
             setLoading(true);
-            dispatch(fetchStart()); // start the global loading indicator
             fetch(`${apiUrl}/jobs/${id}/toggle`, { method: 'POST' })
                 .then(() => {
                     notify('Job toggled');
                 })
                 .catch((e) => {
-                    notify('Error on job toggle', 'warning')
+                    notify('Error on job toggle', { type: 'warning' })
                 })
                 .finally(() => {
                     setLoading(false);
                     refresh();
-                    dispatch(fetchEnd()); // stop the global loading indicator
                 });
         }
         unselectAll('jobs');

diff --git a/ui/src/jobs/JobList.tsx b/ui/src/jobs/JobList.tsx
@@ -18,7 +18,7 @@ import BulkRunButton from "./BulkRunButton"
 import BulkToggleButton from "./BulkToggleButton"
 import StatusField from "./StatusField"
 import EnabledField from "./EnabledField"
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 
 const JobFilter = (props: any) => (
     <Filter {...props}>

diff --git a/ui/src/jobs/JobShow.tsx b/ui/src/jobs/JobShow.tsx
@@ -11,7 +11,7 @@ import {
     TabbedShowLayout,
     Tab,
     ReferenceManyField,
-    useNotify, fetchStart, fetchEnd, Button,
+    useNotify, Button,
 } from 'react-admin';
 import ToggleButton from "./ToggleButton"
 import RunButton from "./RunButton"
@@ -21,14 +21,14 @@ import JobIcon from '@mui/icons-material/Update';
 import FullIcon from '@mui/icons-material/BatteryFull';
 import { Tooltip } from '@mui/material';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { apiUrl } from '../dataProvider';
 
+// basePath={basePath}
 const JobShowActions = ({ basePath, data, resource }: any) => (
     <TopToolbar>
         <RunButton record={data} />
         <ToggleButton record={data} />
-        <EditButton basePath={basePath} record={data} />
+        <EditButton record={data} />
     </TopToolbar>
 );
 
@@ -37,12 +37,10 @@ const SuccessField = (props: any) => {
 };
 
 const FullButton = ({record}: any) => {
-    const dispatch = useDispatch();
     const notify = useNotify();
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        dispatch(fetchStart()); // start the global loading indicator 
         fetch(`${apiUrl}/jobs/${record.job_name}/executions/${record.id}`)
             .then((response) => {
                 if (response.ok) {
@@ -56,11 +54,10 @@ const FullButton = ({record}: any) => {
                 record.output = data.output
             })
             .catch((e) => {
-                notify('Error on loading full output', 'warning')
+                notify('Error on loading full output', { type: 'warning' })
             })
             .finally(() => {
                 setLoading(false);
-                dispatch(fetchEnd()); // stop the global loading indicator
             });
     };
     return (

diff --git a/ui/src/jobs/RunButton.tsx b/ui/src/jobs/RunButton.tsx
@@ -1,29 +1,25 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { useNotify, useRefresh, fetchStart, fetchEnd, Button } from 'react-admin';
+import { useNotify, useRefresh, Button } from 'react-admin';
 import { apiUrl } from '../dataProvider';
 import RunIcon from '@mui/icons-material/PlayArrow';
 
 const RunButton = ({record}: any) => {
-    const dispatch = useDispatch();
     const refresh = useRefresh();
     const notify = useNotify();
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        dispatch(fetchStart()); // start the global loading indicator 
         fetch(`${apiUrl}/jobs/${record.id}`, { method: 'POST' })
             .then(() => {
                 notify('Success running job');
                 refresh();
             })
             .catch((e) => {
-                notify('Error on running job', 'warning')
+                notify('Error on running job', { type: 'warning' })
             })
             .finally(() => {
                 setLoading(false);
-                dispatch(fetchEnd()); // stop the global loading indicator
             });
     };
     return (

diff --git a/ui/src/jobs/ToggleButton.tsx b/ui/src/jobs/ToggleButton.tsx
@@ -1,29 +1,25 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { useNotify, useRefresh, fetchStart, fetchEnd, Button } from 'react-admin';
+import { useNotify, useRefresh, Button } from 'react-admin';
 import { apiUrl } from '../dataProvider';
 import ToggleIcon from '@mui/icons-material/Pause';
 
 const ToggleButton = ({record}: any) => {
-    const dispatch = useDispatch();
     const refresh = useRefresh();
     const notify = useNotify();
     const [loading, setLoading] = useState(false);
     const handleClick = () => {
         setLoading(true);
-        dispatch(fetchStart()); // start the global loading indicator 
         fetch(`${apiUrl}/jobs/${record.id}/toggle`, { method: 'POST' })
             .then(() => {
                 notify('Job toggled');
                 refresh();
             })
             .catch((e) => {
-                notify('Error on toggle job', 'warning')
+                notify('Error on toggle job', { type: 'warning' })
             })
             .finally(() => {
                 setLoading(false);
-                dispatch(fetchEnd()); // stop the global loading indicator
             });
     };
     return (

diff --git a/ui/src/layout/AppBar.tsx b/ui/src/layout/AppBar.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { AppBar, UserMenu, MenuItemLink } from 'react-admin';
 import Typography from '@mui/material/Typography';
 import SettingsIcon from '@mui/icons-material/Settings';
-import { makeStyles } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import Clock from './Clock';
 
 import logo from '../images/dkron-logo.png';
@@ -31,7 +31,6 @@ const ConfigurationMenu = forwardRef<any, any>((props, ref) => {
             primaryText='Configuration'
             leftIcon={<SettingsIcon />}
             onClick={props.onClick}
-            sidebarIsOpen
         />
     );
 });

diff --git a/ui/src/layout/ThemedLayout.tsx b/ui/src/layout/ThemedLayout.tsx
@@ -1,22 +1,14 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { Layout, LayoutProps, Sidebar } from 'react-admin';
 import AppBar from './AppBar';
-import { darkTheme, lightTheme } from './themes';
-import { AppState } from '../types';
 
 const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
 
 const ThemedLayout = (props: LayoutProps) => {
-    const theme = useSelector((state: AppState) =>
-        state.theme === 'dark' ? darkTheme : lightTheme
-    );
     return (
         <Layout
             {...props}
             appBar={AppBar}
             sidebar={CustomSidebar}
-            theme={theme}
         />
     );
 };