Merge pull request #263 from Arnei/to-redux-toolkit-service

Modernize redux: serviceSlice
opencast · Feb 28, 2024 · 4a95048 · 4a95048
2 parents 1a5203f + b5012df
commit 4a95048
Show file tree

Hide file tree

Showing 15 changed files with 164 additions and 204 deletions.
diff --git a/app/src/actions/serviceActions.ts b/app/src/actions/serviceActions.ts
diff --git a/app/src/components/shared/MainNav.tsx b/app/src/components/shared/MainNav.tsx
@@ -23,7 +23,7 @@ import { setOffset } from "../../actions/tableActions";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { fetchServers } from "../../thunks/serverThunks";
-import { fetchServices } from "../../thunks/serviceThunks";
+import { fetchServices } from "../../slices/serviceSlice";
 import { fetchGroups } from "../../slices/groupSlice";
 import { GlobalHotKeys } from "react-hotkeys";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
@@ -56,8 +56,6 @@ const MainNav = ({
 	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingServices' implicitly has a... Remove this comment to see the full error message
-	loadingServices,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
 // @ts-expect-error TS(7031): Binding element 'loadingUsers' implicitly has an '... Remove this comment to see the full error message
@@ -156,7 +154,7 @@ const MainNav = ({
 		resetOffset();
 
 		// Fetching services from server
-		loadingServices();
+		dispatch(fetchServices());
 
 		// Load services into table
 		loadingServicesIntoTable();
@@ -342,7 +340,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
-	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	loadingUsers: () => dispatch(fetchUsers()),
 	loadingUsersIntoTable: () => dispatch(loadUsersIntoTable()),

diff --git a/app/src/components/systems/Jobs.tsx b/app/src/components/systems/Jobs.tsx
@@ -16,7 +16,6 @@ import {
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
 import { fetchServers } from "../../thunks/serverThunks";
-import { fetchServices } from "../../thunks/serviceThunks";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
@@ -27,6 +26,7 @@ import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchJobs } from "../../slices/jobSlice";
+import { fetchServices } from "../../slices/serviceSlice";
 
 /**
  * This component renders the table view of jobs
@@ -40,8 +40,6 @@ const Jobs = ({
 	loadingServers,
 // @ts-expect-error TS(7031): Binding element 'loadingServersIntoTable' implicit... Remove this comment to see the full error message
 	loadingServersIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingServices' implicitly has a... Remove this comment to see the full error message
-	loadingServices,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
 // @ts-expect-error TS(7031): Binding element 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
@@ -88,7 +86,7 @@ const Jobs = ({
 		resetOffset();
 
 		// Fetching services from server
-		loadingServices();
+		dispatch(fetchServices());
 
 		// Load services into table
 		loadingServicesIntoTable();
@@ -193,7 +191,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
-	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),

diff --git a/app/src/components/systems/Servers.tsx b/app/src/components/systems/Servers.tsx
@@ -16,7 +16,6 @@ import {
 	loadServersIntoTable,
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchServices } from "../../thunks/serviceThunks";
 import { editTextFilter } from "../../actions/tableFilterActions";
 import { setOffset } from "../../actions/tableActions";
 import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
@@ -26,6 +25,7 @@ import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch } from "../../store";
+import { fetchServices } from "../../slices/serviceSlice";
 import { fetchJobs } from "../../slices/jobSlice";
 
 /**
@@ -42,8 +42,6 @@ const Servers = ({
 	loadingFilters,
 // @ts-expect-error TS(7031): Binding element 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message
 	loadingJobsIntoTable,
-// @ts-expect-error TS(7031): Binding element 'loadingServices' implicitly has a... Remove this comment to see the full error message
-	loadingServices,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
 // @ts-expect-error TS(7031): Binding element 'resetTextFilter' implicitly has a... Remove this comment to see the full error message
@@ -83,7 +81,7 @@ const Servers = ({
 		resetOffset();
 
 		// Fetching services from server
-		loadingServices();
+		dispatch(fetchServices());
 
 		// Load services into table
 		loadingServicesIntoTable();
@@ -189,7 +187,6 @@ const mapDispatchToProps = (dispatch) => ({
 	loadingServers: () => dispatch(fetchServers()),
 	loadingServersIntoTable: () => dispatch(loadServersIntoTable()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
-	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	resetTextFilter: () => dispatch(editTextFilter("")),
 	resetOffset: () => dispatch(setOffset(0)),

diff --git a/app/src/components/systems/Services.tsx b/app/src/components/systems/Services.tsx
@@ -7,14 +7,13 @@ import TableFilters from "../shared/TableFilters";
 import Table from "../shared/Table";
 import MainNav from "../shared/MainNav";
 import Notifications from "../shared/Notifications";
-import { servicesTemplateMap } from "../../configs/tableConfigs/servicesTableConfig";
+import { servicesTemplateMap } from "../../configs/tableConfigs/servicesTableMap";
 import { fetchFilters } from "../../thunks/tableFilterThunks";
 import {
 	loadJobsIntoTable,
 	loadServersIntoTable,
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
-import { fetchServices } from "../../thunks/serviceThunks";
 import { fetchServers } from "../../thunks/serverThunks";
 import { getTotalServices } from "../../selectors/serviceSelector";
 import { editTextFilter } from "../../actions/tableFilterActions";
@@ -25,19 +24,16 @@ import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
-import { useAppDispatch } from "../../store";
+import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchJobs } from "../../slices/jobSlice";
+import { fetchServices } from "../../slices/serviceSlice";
 
 /**
  * This component renders the table view of services
  */
 const Services = ({
-// @ts-expect-error TS(7031): Binding element 'loadingServices' implicitly has a... Remove this comment to see the full error message
-	loadingServices,
 // @ts-expect-error TS(7031): Binding element 'loadingServicesIntoTable' implici... Remove this comment to see the full error message
 	loadingServicesIntoTable,
-// @ts-expect-error TS(7031): Binding element 'services' implicitly has an 'any'... Remove this comment to see the full error message
-	services,
 // @ts-expect-error TS(7031): Binding element 'loadingFilters' implicitly has an... Remove this comment to see the full error message
 	loadingFilters,
 // @ts-expect-error TS(7031): Binding element 'loadingJobsIntoTable' implicitly ... Remove this comment to see the full error message
@@ -59,9 +55,16 @@ const Services = ({
 	const dispatch = useAppDispatch();
 	const [displayNavigation, setNavigation] = useState(false);
 
+	const services = useAppSelector(state => getTotalServices(state));
+
+	// TODO: Get rid of the wrappers when modernizing redux is done
+	const fetchServicesWrapper = () => {
+		dispatch(fetchServices())
+	}
+
 	const loadServices = async () => {
 		// Fetching services from server
-		await loadingServices();
+		await dispatch(fetchServices());
 
 		// Load services into table
 		loadingServicesIntoTable();
@@ -158,7 +161,7 @@ const Services = ({
 				<div className="controls-container">
 					{/* Include filters component */}
 					<TableFilters
-						loadResource={loadingServices}
+						loadResource={fetchServicesWrapper}
 						loadResourceIntoTable={loadingServicesIntoTable}
 						resource={"services"}
 					/>
@@ -176,7 +179,6 @@ const Services = ({
 // Getting state data out of redux store
 // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type.
 const mapStateToProps = (state) => ({
-	services: getTotalServices(state),
 	user: getUserInformation(state),
 	currentFilterType: getCurrentFilterResource(state),
 });
@@ -186,7 +188,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
 // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type.
 	loadingFilters: (resource) => dispatch(fetchFilters(resource)),
-	loadingServices: () => dispatch(fetchServices()),
 	loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 	loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()),
 	loadingServers: () => dispatch(fetchServers()),

diff --git a/app/src/components/systems/partials/ServicesActionsCell.tsx b/app/src/components/systems/partials/ServicesActionsCell.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { fetchServices, restartService } from "../../../thunks/serviceThunks";
 import { loadServicesIntoTable } from "../../../thunks/tableThunks";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
+import { useAppDispatch } from "../../../store";
+import { fetchServices, restartService } from "../../../slices/serviceSlice";
 
 /**
  * This component renders the action cells of services in the table view
@@ -20,10 +21,11 @@ const ServicesActionCell = ({
 	user,
 }) => {
 	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
 
 	const onClickRestart = async () => {
-		await restartService(row.hostname, row.name);
-		await loadServices();
+		await dispatch(restartService({host: row.hostname, serviceType: row.name}));
+		await dispatch(fetchServices());
 		loadServicesIntoTable();
 	};
 
@@ -49,7 +51,6 @@ const mapStateToProps = (state) => ({
 // mapping actions to dispatch
 // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type.
 const mapDispatchToProps = (dispatch) => ({
-	loadServices: () => dispatch(fetchServices()),
 	loadServicesIntoTable: () => dispatch(loadServicesIntoTable()),
 });
 

diff --git a/app/src/configs/tableConfigs/servicesTableConfig.ts b/app/src/configs/tableConfigs/servicesTableConfig.ts
@@ -1,7 +1,3 @@
-import MeanRunTimeCell from "../../components/systems/partials/MeanRunTimeCell";
-import MeanQueueTimeCell from "../../components/systems/partials/MeanQueueTimeCell";
-import ServicesActionCell from "../../components/systems/partials/ServicesActionsCell";
-
 /**
  * Config that contains the columns and further information regarding services. These are the information that never or hardly changes.
  * That's why it is hard coded here and not fetched from server.
@@ -73,14 +69,3 @@ export const servicesTableConfig = {
 	category: "systems",
 	multiSelect: false,
 };
-
-/**
- * This map contains the mapping between the template strings above and the corresponding react component.
- * This helps to render different templates of cells more dynamically. Even empty needed, because Table component
- * uses template map.
- */
-export const servicesTemplateMap = {
-	MeanRunTimeCell: MeanRunTimeCell,
-	MeanQueueTimeCell: MeanQueueTimeCell,
-	ServicesActionsCell: ServicesActionCell,
-};
diff --git a/app/src/configs/tableConfigs/servicesTableMap.ts b/app/src/configs/tableConfigs/servicesTableMap.ts
@@ -0,0 +1,14 @@
+import MeanRunTimeCell from "../../components/systems/partials/MeanRunTimeCell";
+import MeanQueueTimeCell from "../../components/systems/partials/MeanQueueTimeCell";
+import ServicesActionCell from "../../components/systems/partials/ServicesActionsCell";
+
+/**
+ * This map contains the mapping between the template strings above and the corresponding react component.
+ * This helps to render different templates of cells more dynamically. Even empty needed, because Table component
+ * uses template map.
+ */
+export const servicesTemplateMap = {
+	MeanRunTimeCell: MeanRunTimeCell,
+	MeanQueueTimeCell: MeanQueueTimeCell,
+	ServicesActionsCell: ServicesActionCell,
+};
diff --git a/app/src/reducers/serviceReducer.ts b/app/src/reducers/serviceReducer.ts
diff --git a/app/src/selectors/serviceSelector.ts b/app/src/selectors/serviceSelector.ts
@@ -1,6 +1,7 @@
+import { RootState } from "../store";
+
 /**
  * This file contains selectors regarding services
  */
-
-export const getServices = (state: any) => state.services.results;
-export const getTotalServices = (state: any) => state.services.total;
+export const getServices = (state: RootState) => state.services.results;
+export const getTotalServices = (state: RootState) => state.services.total;