-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Display LifeCyclePolicies in UI (read-only)
Adds a new tab to recordings called "LifeCycle Policies". Much like other tabs this tab displays information on its subject in a table format. Unlike i.e. the events tab, the LifeCycle Policies cannot be changed in any way, just be viewed. Editing is supposed to be added at a later date. Depends on PR opencast/opencast#6139 being merged to make any sense. Similarly, if you would like to test this, your admin interface should point to an Opencast with the PR installed.
- Loading branch information
Showing
21 changed files
with
975 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import MainNav from "../shared/MainNav"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { Link } from "react-router-dom"; | ||
| import cn from "classnames"; | ||
| import TableFilters from "../shared/TableFilters"; | ||
| import Table from "../shared/Table"; | ||
| import Notifications from "../shared/Notifications"; | ||
| import { loadEventsIntoTable, loadLifeCyclePoliciesIntoTable, loadSeriesIntoTable } from "../../thunks/tableThunks"; | ||
| import { fetchFilters, editTextFilter, fetchStats } from "../../slices/tableFilterSlice"; | ||
| import Header from "../Header"; | ||
| import NavBar from "../NavBar"; | ||
| import MainView from "../MainView"; | ||
| import Footer from "../Footer"; | ||
| import { getUserInformation } from "../../selectors/userInfoSelectors"; | ||
| import { hasAccess } from "../../utils/utils"; | ||
| import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors"; | ||
| import { useAppDispatch, useAppSelector } from "../../store"; | ||
| import { AsyncThunk } from "@reduxjs/toolkit"; | ||
| import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk"; | ||
| import { getTotalLifeCyclePolicies } from "../../selectors/lifeCycleSelectors"; | ||
| import { fetchLifeCyclePolicies } from "../../slices/lifeCycleSlice"; | ||
| import { lifeCyclePoliciesTemplateMap } from "../../configs/tableConfigs/lifeCyclePoliciesTableMap"; | ||
| import { fetchEvents } from "../../slices/eventSlice"; | ||
| import { setOffset } from "../../slices/tableSlice"; | ||
| import { fetchSeries } from "../../slices/seriesSlice"; | ||
|
|
||
| /** | ||
| * This component renders the table view of policies | ||
| */ | ||
| const LifeCyclePolicies = () => { | ||
| const { t } = useTranslation(); | ||
| const dispatch = useAppDispatch(); | ||
| const [displayNavigation, setNavigation] = useState(false); | ||
|
|
||
| const user = useAppSelector(state => getUserInformation(state)); | ||
| const policiesTotal = useAppSelector(state => getTotalLifeCyclePolicies(state)); | ||
| const currentFilterType = useAppSelector(state => getCurrentFilterResource(state)); | ||
|
|
||
| const loadEvents = async () => { | ||
| // Fetching stats from server | ||
| dispatch(fetchStats()); | ||
|
|
||
| // Fetching events from server | ||
| await dispatch(fetchEvents()); | ||
|
|
||
| // Load events into table | ||
| dispatch(loadEventsIntoTable()); | ||
| }; | ||
|
|
||
| const loadSeries = () => { | ||
| // Reset the current page to first page | ||
| dispatch(setOffset(0)); | ||
|
|
||
| //fetching series from server | ||
| dispatch(fetchSeries()); | ||
|
|
||
| //load series into table | ||
| dispatch(loadSeriesIntoTable()); | ||
| }; | ||
|
|
||
| const loadLifeCyclePolicies = async () => { | ||
| // Fetching policies from server | ||
| await dispatch(fetchLifeCyclePolicies()); | ||
|
|
||
| // Load policies into table | ||
| dispatch(loadLifeCyclePoliciesIntoTable()); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if ("lifeCyclePolicies" !== currentFilterType) { | ||
| dispatch(fetchFilters("lifeCyclePolicies")); | ||
| } | ||
|
|
||
| // Reset text filter | ||
| dispatch(editTextFilter("")); | ||
|
|
||
| // Load policies on mount | ||
| loadLifeCyclePolicies().then((r) => console.info(r)); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| const toggleNavigation = () => { | ||
| setNavigation(!displayNavigation); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Header /> | ||
| <NavBar> | ||
| {/* Include Burger-button menu*/} | ||
| <MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} /> | ||
|
|
||
| <nav> | ||
| {hasAccess("ROLE_UI_EVENTS_VIEW", user) && ( | ||
| <Link | ||
| to="/events/events" | ||
| className={cn({ active: false })} | ||
| onClick={() => loadEvents()} | ||
| > | ||
| {t("EVENTS.EVENTS.NAVIGATION.EVENTS")} | ||
| </Link> | ||
| )} | ||
| {hasAccess("ROLE_UI_SERIES_VIEW", user) && ( | ||
| <Link | ||
| to="/events/series" | ||
| className={cn({ active: false })} | ||
| onClick={() => loadSeries()} | ||
| > | ||
| {t("EVENTS.EVENTS.NAVIGATION.SERIES")} | ||
| </Link> | ||
| )} | ||
| {hasAccess("ROLE_UI_LIFECYCLEPOLICIES_VIEW", user) && ( | ||
| <Link | ||
| to="/events/lifeCyclePolicies" | ||
| className={cn({ active: true })} | ||
| onClick={() => loadLifeCyclePolicies()} | ||
| > | ||
| {t("LIFECYCLE.NAVIGATION.POLICIES")} | ||
| </Link> | ||
| )} | ||
| </nav> | ||
| </NavBar> | ||
|
|
||
| <MainView open={displayNavigation}> | ||
| {/* Include notifications component */} | ||
| <Notifications /> | ||
|
|
||
| <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, AsyncThunkConfig>} | ||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
src/components/events/partials/LifeCyclePolicyActionCell.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React, { useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useAppDispatch, useAppSelector } from "../../../store"; | ||
| import { Tooltip } from "../../shared/Tooltip"; | ||
| import { 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"; | ||
|
|
||
| /** | ||
| * 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 user = useAppSelector(state => getUserInformation(state)); | ||
|
|
||
| const showLifeCyclePolicyDetails = async () => { | ||
| await dispatch(fetchLifeCyclePolicyDetails(row.id)); | ||
|
|
||
| setLifeCyclePolicyDetails(true); | ||
| }; | ||
|
|
||
| const hideLifeCyclePolicyDetails = () => { | ||
| setLifeCyclePolicyDetails(false); | ||
| }; | ||
|
|
||
| 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> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default LifeCyclePolicyActionCell; |
22 changes: 22 additions & 0 deletions
22
src/components/events/partials/LifeCyclePolicyIsActiveCell.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.