Add Create, Edit, Delete for LifeCycle Policies

package.json

@@ -31,6 +31,7 @@
     "react-hotkeys-hook": "^5.0.1",
     "react-i18next": "^15.5.1",
     "react-icons": "^5.5.0",
+    "react-js-cron": "^5.0.1",
     "react-redux": "^9.2.0",
     "react-router": "^7.6.0",
     "react-select": "^5.10.1",

src/App.tsx

@@ -15,6 +15,7 @@ import Acls from "./components/users/Acls";
 import About from "./components/About";
 import { useAppDispatch } from "./store";
 import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice";
+import LifeCyclePolicies from "./components/events/LifeCyclePolicies";
 import { subscribeToAuthEvents } from "./utils/broadcastSync";
 
 function App() {
@@ -45,6 +46,8 @@ function App() {
 
 				<Route path={"/events/series"} element={<Series />} />
 
+				<Route path={"/events/lifeCyclePolicies"} element={<LifeCyclePolicies />} />
+
 				<Route path={"/recordings/recordings"} element={<Recordings />} />
 
 				<Route path={"/systems/jobs"} element={<Jobs />} />

src/components/events/LifeCyclePolicies.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import TableFilters from "../shared/TableFilters";
+import Table from "../shared/Table";
+import Notifications from "../shared/Notifications";
+import { loadLifeCyclePoliciesIntoTable } from "../../thunks/tableThunks";
+import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
+import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
+import Footer from "../Footer";
+import { useAppDispatch, useAppSelector } from "../../store";
+import { AsyncThunk } from "@reduxjs/toolkit";
+import { getTotalLifeCyclePolicies } from "../../selectors/lifeCycleSelectors";
+import { fetchLifeCyclePolicies } from "../../slices/lifeCycleSlice";
+import { lifeCyclePoliciesTemplateMap } from "../../configs/tableConfigs/lifeCyclePoliciesTableMap";
+import { fetchLifeCyclePolicyActions, fetchLifeCyclePolicyTargetTypes, fetchLifeCyclePolicyTimings } from "../../slices/lifeCycleDetailsSlice";
+import { ModalHandle } from "../shared/modals/Modal";
+import { availableHotkeys } from "../../configs/hotkeysConfig";
+import { eventsLinks } from "./partials/EventsNavigation";
+import { resetTableProperties } from "../../slices/tableSlice";
+
+/**
+ * This component renders the table view of policies
+ */
+const LifeCyclePolicies = () => {
+	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+	const [displayNavigation, setNavigation] = useState(false);
+	const newPolicyModalRef = useRef<ModalHandle>(null);
+
+	const policiesTotal = useAppSelector(state => getTotalLifeCyclePolicies(state));
+
+	useEffect(() => {
+		// State variable for interrupting the load function
+		let allowLoadIntoTable = true;
+
+		// Clear table of previous data
+		dispatch(resetTableProperties());
+
+		dispatch(fetchFilters("lifeCyclePolicies"));
+
+		// Reset text filter
+		dispatch(editTextFilter(""));
+
+		// Load policies on mount
+		const loadLifeCyclePolicies = async () => {
+			// Fetching policies from server
+			await dispatch(fetchLifeCyclePolicies());
+
+			// Load policies into table
+			if (allowLoadIntoTable) {
+				dispatch(loadLifeCyclePoliciesIntoTable());
+			}
+		};
+		loadLifeCyclePolicies();
+
+		// Fetch policies repeatedly
+		let fetchInterval = setInterval(loadLifeCyclePolicies, 5000);
+
+		return () => {
+			allowLoadIntoTable = false;
+			clearInterval(fetchInterval);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const showNewPolicyModal = async () => {
+		await dispatch(fetchLifeCyclePolicyActions());
+		await dispatch(fetchLifeCyclePolicyTargetTypes());
+		await dispatch(fetchLifeCyclePolicyTimings());
+
+		newPolicyModalRef.current?.open()
+	};
+
+	return (
+		<>
+			<Header />
+			<NavBar
+				displayNavigation={displayNavigation}
+				setNavigation={setNavigation}
+				navAriaLabel={"EVENTS.EVENTS.NAVIGATION.LABEL"}
+				links={
+					eventsLinks
+				}
+				create={{
+					accessRole: "ROLE_UI_EVENTS_CREATE",
+					onShowModal: showNewPolicyModal,
+					text: "LIFECYCLE.POLICIES.TABLE.ADD_POLICY",
+					resource: "lifecyclepolicy",
+				}}
+			>
+			</NavBar>
+
+			<MainView open={displayNavigation}>
+				{/* Include notifications component */}
+				<Notifications context={"other"}/>
+
+				<div className="controls-container">
+					{/* Include filters component */}
+					{/* LifeCycle policies are not indexed, can't search or filter them */}
+					{/* But if we don't include this component, the policies won't load on page load, because the first
+							fetch request we send to the backend contains invalid params >.> */}
+					<TableFilters
+						loadResource={fetchLifeCyclePolicies as AsyncThunk<any, void, any>}
+						loadResourceIntoTable={loadLifeCyclePoliciesIntoTable}
+						resource={"lifeCyclePolicies"}
+					/>
+
+					<h1>{t("LIFECYCLE.POLICIES.TABLE.CAPTION")}</h1>
+					<h4>{t("TABLE_SUMMARY", { numberOfRows: policiesTotal })}</h4>
+				</div>
+				{/* Include table component */}
+				<Table templateMap={lifeCyclePoliciesTemplateMap} />
+			</MainView>
+			<Footer />
+		</>
+	);
+};
+
+export default LifeCyclePolicies;

src/components/events/partials/EventsNavigation.tsx

@@ -17,5 +17,10 @@ export const eventsLinks: {
 		path: "/events/series",
 		accessRole: "ROLE_UI_SERIES_VIEW",
 		text: "EVENTS.EVENTS.NAVIGATION.SERIES"
+	},
+	{
+		path: "/events/lifeCyclePolicies",
+		accessRole: "ROLE_UI_LIFECYCLEPOLICIES_VIEW",
+		text: "LIFECYCLE.NAVIGATION.POLICIES"
 	}
 ];

src/components/events/partials/LifeCyclePolicyActionCell.tsx

@@ -0,0 +1,97 @@
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "../../../store";
+import { Tooltip } from "../../shared/Tooltip";
+import { deleteLifeCyclePolicy, LifeCyclePolicy } from "../../../slices/lifeCycleSlice";
+import DetailsModal from "../../shared/modals/DetailsModal";
+import LifeCyclePolicyDetails from "./modals/LifeCyclePolicyDetails";
+import { hasAccess } from "../../../utils/utils";
+import { getUserInformation } from "../../../selectors/userInfoSelectors";
+import { fetchLifeCyclePolicyDetails } from "../../../slices/lifeCycleDetailsSlice";
+import ConfirmModal from "../../shared/ConfirmModal";
+import { ModalHandle } from "../../shared/modals/Modal";
+
+/**
+ * This component renders the title cells of series in the table view
+ */
+const LifeCyclePolicyActionCell = ({
+	row,
+}: {
+	row: LifeCyclePolicy
+}) => {
+	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+
+	const [displayLifeCyclePolicyDetails, setLifeCyclePolicyDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+
+	const user = useAppSelector(state => getUserInformation(state));
+
+	const showLifeCyclePolicyDetails = async () => {
+		await dispatch(fetchLifeCyclePolicyDetails(row.id));
+
+		setLifeCyclePolicyDetails(true);
+	};
+
+	const hideLifeCyclePolicyDetails = () => {
+		setLifeCyclePolicyDetails(false);
+	};
+
+	const hideDeleteConfirmation = () => {
+		deleteConfirmationModalRef.current?.close?.()
+	};
+
+	const showDeleteConfirmation = async () => {
+		deleteConfirmationModalRef.current?.open()
+	};
+
+	const deletingPolicy = (id: string) => {
+		dispatch(deleteLifeCyclePolicy(id));
+	};
+
+	return (
+		<>
+			{/* view details location/recording */}
+			{hasAccess("ROLE_UI_LIFECYCLEPOLICY_DETAILS_VIEW", user) && (
+				<Tooltip title={t("LIFECYCLE.POLICIES.TABLE.TOOLTIP.DETAILS")}>
+					<button
+						className="button-like-anchor more"
+						onClick={() => showLifeCyclePolicyDetails()}
+					/>
+				</Tooltip>
+			)}
+
+			{displayLifeCyclePolicyDetails && (
+				<DetailsModal
+					handleClose={hideLifeCyclePolicyDetails}
+					title={row.title}
+					prefix={"LIFECYCLE.POLICIES.DETAILS.HEADER"}
+				>
+					<LifeCyclePolicyDetails />
+				</DetailsModal>
+			)}
+
+			{/* delete policy */}
+			{hasAccess("ROLE_UI_LIFECYCLEPOLICY_DELETE", user) && (
+				<Tooltip title={t("LIFECYCLE.POLICIES.TABLE.TOOLTIP.DELETE")}>
+					<button
+						onClick={() => showDeleteConfirmation()}
+						className="button-like-anchor remove"
+
+					/>
+				</Tooltip>
+			)}
+
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.title}
+				resourceType="LIFECYCLE_POLICY"
+				resourceId={row.id}
+				deleteMethod={deletingPolicy}
+				modalRef={deleteConfirmationModalRef}
+			/>
+		</>
+	);
+};
+
+export default LifeCyclePolicyActionCell;

src/components/events/partials/LifeCyclePolicyIsActiveCell.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { LifeCyclePolicy } from "../../../slices/lifeCycleSlice";
+
+/**
+ * This component renders the maintenance cells of servers in the table view
+ */
+const LifeCyclePolicyIsActiveCell = ({
+	row,
+}: {
+	row: LifeCyclePolicy
+}) => {
+
+	return (
+		<input
+			type="checkbox"
+			checked={row.isActive}
+			disabled={true}
+		/>
+	);
+};
+
+export default LifeCyclePolicyIsActiveCell;

src/components/events/partials/ModalTabsAndPages/LifeCyclePolicyAccessTab.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ResourceDetailsAccessPolicyTab from "../../../shared/modals/ResourceDetailsAccessPolicyTab";
+import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { getLifeCyclePolicyDetailsAcl } from "../../../../selectors/lifeCycleDetailsSelectors";
+import { fetchLifeCyclePolicyDetailsAcls, updateLifeCyclePolicyAccess } from "../../../../slices/lifeCycleDetailsSlice";
+import { ParseKeys } from "i18next";
+
+/**
+ * This component manages the access policy tab of the series details modal
+ */
+const LifeCyclePolicyDetailsAccessTab = ({
+	seriesId,
+	header,
+	policyChanged,
+	setPolicyChanged,
+}: {
+	seriesId: string,
+	header: ParseKeys,
+	policyChanged: boolean,
+	setPolicyChanged: (value: boolean) => void,
+}) => {
+	const { t } = useTranslation();
+	const dispatch = useAppDispatch();
+
+	const acl = useAppSelector(state => getLifeCyclePolicyDetailsAcl(state));
+
+	useEffect(() => {
+		dispatch(removeNotificationWizardForm());
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<ResourceDetailsAccessPolicyTab
+			resourceId={seriesId}
+			header={header}
+			buttonText={"LIFECYCLE.POLICIES.DETAILS.ACCESS.LABEL"}
+			saveButtonText={"SAVE"}
+			descriptionText={t("LIFECYCLE.POLICIES.DETAILS.ACCESS.DESCRIPTION")}
+			policies={acl}
+			fetchAccessPolicies={fetchLifeCyclePolicyDetailsAcls}
+			// @ts-expect-error: TODO: Figure out why typescript is being funky here
+			saveNewAccessPolicies={updateLifeCyclePolicyAccess}
+			editAccessRole={"ROLE_UI_LIFECYCLEPOLICY_DETAILS_ACL_EDIT"}
+			policyChanged={policyChanged}
+			setPolicyChanged={setPolicyChanged}
+		/>
+	);
+};
+
+export default LifeCyclePolicyDetailsAccessTab;