From 18468eb8208969562195dd86b1fd9df43b2c1a49 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 8 Jan 2024 15:59:47 +0100 Subject: [PATCH 1/4] Modernize redux: serverSlice Switching to redux toolkit for getting servers for the server table. --- app/src/actions/serverActions.ts | 35 ------ app/src/components/shared/MainNav.tsx | 7 +- app/src/components/systems/Jobs.tsx | 9 +- app/src/components/systems/Servers.tsx | 18 ++- app/src/components/systems/Services.tsx | 8 +- .../partials/ServersMaintenanceCell.tsx | 18 +-- .../tableConfigs/serversTableConfig.ts | 13 --- .../configs/tableConfigs/serversTableMap.ts | 12 ++ app/src/reducers/serverReducer.ts | 71 ------------ app/src/selectors/serverSelectors.ts | 7 +- app/src/slices/serverSlice.ts | 108 ++++++++++++++++++ app/src/store.ts | 2 +- app/src/thunks/serverThunks.ts | 49 -------- app/src/thunks/tableThunks.ts | 3 +- 14 files changed, 153 insertions(+), 207 deletions(-) delete mode 100644 app/src/actions/serverActions.ts create mode 100644 app/src/configs/tableConfigs/serversTableMap.ts delete mode 100644 app/src/reducers/serverReducer.ts create mode 100644 app/src/slices/serverSlice.ts delete mode 100644 app/src/thunks/serverThunks.ts diff --git a/app/src/actions/serverActions.ts b/app/src/actions/serverActions.ts deleted file mode 100644 index 4381f4bde8..0000000000 --- a/app/src/actions/serverActions.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * This file contains all redux actions that can be executed on servers - */ - -// Constants of action types for fetching servers from server -export const LOAD_SERVERS_IN_PROGRESS = "LOAD_SERVERS_IN_PROGRESS"; -export const LOAD_SERVERS_SUCCESS = "LOAD_SERVERS_SUCCESS"; -export const LOAD_SERVERS_FAILURE = "LOAD_SERVERS_FAILURE"; - -// Constants of action types affecting UI -export const SET_SERVER_COLUMNS = "SET_SERVER_COLUMNS"; - -// Actions affecting fetching servers from server - -export const loadServersInProgress = () => ({ - type: LOAD_SERVERS_IN_PROGRESS, -}); - -// @ts-expect-error TS(7006): Parameter 'servers' implicitly has an 'any' type. -export const loadServersSuccess = (servers) => ({ - type: LOAD_SERVERS_SUCCESS, - payload: { servers }, -}); - -export const loadServersFailure = () => ({ - type: LOAD_SERVERS_FAILURE, -}); - -// Actions affecting UI - -// @ts-expect-error TS(7006): Parameter 'updatedColumns' implicitly has an 'any'... Remove this comment to see the full error message -export const setServerColumns = (updatedColumns) => ({ - type: SET_SERVER_COLUMNS, - payload: { updatedColumns }, -}); diff --git a/app/src/components/shared/MainNav.tsx b/app/src/components/shared/MainNav.tsx index e75a72381b..16565a0eca 100644 --- a/app/src/components/shared/MainNav.tsx +++ b/app/src/components/shared/MainNav.tsx @@ -24,13 +24,13 @@ import { setOffset } from "../../actions/tableActions"; import { getUserInformation } from "../../selectors/userInfoSelectors"; import { hasAccess } from "../../utils/utils"; import { fetchSeries } from "../../thunks/seriesThunks"; -import { fetchServers } from "../../thunks/serverThunks"; import { fetchServices } from "../../thunks/serviceThunks"; import { fetchGroups } from "../../thunks/groupThunks"; import { GlobalHotKeys } from "react-hotkeys"; import { availableHotkeys } from "../../configs/hotkeysConfig"; import { fetchAcls } from "../../slices/aclSlice"; import { useAppDispatch } from "../../store"; +import { fetchServers } from "../../slices/serverSlice"; /** * This component renders the main navigation that opens when the burger button is clicked @@ -58,8 +58,6 @@ const MainNav = ({ loadingJobs, // @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 'loadingServers' implicitly has an... Remove this comment to see the full error message - 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 @@ -153,7 +151,7 @@ const MainNav = ({ resetOffset(); // Fetching servers from server - loadingServers(); + dispatch(fetchServers()); // Load servers into table loadingServersIntoTable(); @@ -353,7 +351,6 @@ const mapDispatchToProps = (dispatch) => ({ loadingRecordingsIntoTable: () => dispatch(loadRecordingsIntoTable()), loadingJobs: () => dispatch(fetchJobs()), loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()), - loadingServers: () => dispatch(fetchServers()), loadingServersIntoTable: () => dispatch(loadServersIntoTable()), loadingServices: () => dispatch(fetchServices()), loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()), diff --git a/app/src/components/systems/Jobs.tsx b/app/src/components/systems/Jobs.tsx index d6635ee521..8ff9c1bc95 100644 --- a/app/src/components/systems/Jobs.tsx +++ b/app/src/components/systems/Jobs.tsx @@ -16,7 +16,6 @@ import { loadServersIntoTable, loadServicesIntoTable, } from "../../thunks/tableThunks"; -import { fetchServers } from "../../thunks/serverThunks"; import { fetchServices } from "../../thunks/serviceThunks"; import { editTextFilter } from "../../actions/tableFilterActions"; import { setOffset } from "../../actions/tableActions"; @@ -26,6 +25,8 @@ import Footer from "../Footer"; import { getUserInformation } from "../../selectors/userInfoSelectors"; import { hasAccess } from "../../utils/utils"; import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors"; +import { useAppDispatch } from "../../store"; +import { fetchServers } from "../../slices/serverSlice"; /** * This component renders the table view of jobs @@ -39,8 +40,6 @@ const Jobs = ({ jobs, // @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 'loadingServers' implicitly has an... Remove this comment to see the full error message - 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 @@ -57,6 +56,7 @@ const Jobs = ({ currentFilterType, }) => { const { t } = useTranslation(); + const dispatch = useAppDispatch(); const [displayNavigation, setNavigation] = useState(false); const loadJobs = async () => { @@ -72,7 +72,7 @@ const Jobs = ({ resetOffset(); // Fetching servers from server - loadingServers(); + dispatch(fetchServers()); // Load servers into table loadingServersIntoTable(); @@ -188,7 +188,6 @@ const mapDispatchToProps = (dispatch) => ({ loadingFilters: (resource) => dispatch(fetchFilters(resource)), loadingJobs: () => dispatch(fetchJobs()), loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()), - loadingServers: () => dispatch(fetchServers()), loadingServersIntoTable: () => dispatch(loadServersIntoTable()), loadingServices: () => dispatch(fetchServices()), loadingServicesIntoTable: () => dispatch(loadServicesIntoTable()), diff --git a/app/src/components/systems/Servers.tsx b/app/src/components/systems/Servers.tsx index 13e6453046..c5b89c3c1e 100644 --- a/app/src/components/systems/Servers.tsx +++ b/app/src/components/systems/Servers.tsx @@ -7,10 +7,9 @@ import TableFilters from "../shared/TableFilters"; import Table from "../shared/Table"; import { connect } from "react-redux"; import Notifications from "../shared/Notifications"; -import { serversTemplateMap } from "../../configs/tableConfigs/serversTableConfig"; +import { serversTemplateMap } from "../../configs/tableConfigs/serversTableMap"; import { getTotalServers } from "../../selectors/serverSelectors"; import { fetchFilters } from "../../thunks/tableFilterThunks"; -import { fetchServers } from "../../thunks/serverThunks"; import { loadJobsIntoTable, loadServersIntoTable, @@ -26,17 +25,15 @@ 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 { fetchServers } from "../../slices/serverSlice"; /** * This component renders the table view of servers */ const Servers = ({ -// @ts-expect-error TS(7031): Binding element 'loadingServers' implicitly has an... Remove this comment to see the full error message - 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 'servers' implicitly has an 'any' ... Remove this comment to see the full error message - servers, // @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 'loadingJobs' implicitly has an 'a... Remove this comment to see the full error message @@ -57,11 +54,14 @@ const Servers = ({ currentFilterType, }) => { const { t } = useTranslation(); + const dispatch = useAppDispatch(); const [displayNavigation, setNavigation] = useState(false); + const servers = useAppSelector(state => getTotalServers(state)); + const loadServers = async () => { // Fetching servers from server - await loadingServers(); + await dispatch(fetchServers()); // Load servers into table loadingServersIntoTable(); @@ -158,7 +158,7 @@ const Servers = ({
{/* Include filters component */} @@ -176,7 +176,6 @@ const Servers = ({ // Getting state data out of redux store // @ts-expect-error TS(7006): Parameter 'state' implicitly has an 'any' type. const mapStateToProps = (state) => ({ - servers: getTotalServers(state), user: getUserInformation(state), currentFilterType: getCurrentFilterResource(state), }); @@ -186,7 +185,6 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = (dispatch) => ({ // @ts-expect-error TS(7006): Parameter 'resource' implicitly has an 'any' type. loadingFilters: (resource) => dispatch(fetchFilters(resource)), - loadingServers: () => dispatch(fetchServers()), loadingServersIntoTable: () => dispatch(loadServersIntoTable()), loadingJobs: () => dispatch(fetchJobs()), loadingJobsIntoTable: () => dispatch(loadJobsIntoTable()), diff --git a/app/src/components/systems/Services.tsx b/app/src/components/systems/Services.tsx index a4172bd829..97dffb0439 100644 --- a/app/src/components/systems/Services.tsx +++ b/app/src/components/systems/Services.tsx @@ -16,7 +16,6 @@ import { loadServicesIntoTable, } from "../../thunks/tableThunks"; import { fetchServices } from "../../thunks/serviceThunks"; -import { fetchServers } from "../../thunks/serverThunks"; import { getTotalServices } from "../../selectors/serviceSelector"; import { editTextFilter } from "../../actions/tableFilterActions"; import { setOffset } from "../../actions/tableActions"; @@ -26,6 +25,8 @@ import Footer from "../Footer"; import { getUserInformation } from "../../selectors/userInfoSelectors"; import { hasAccess } from "../../utils/utils"; import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors"; +import { useAppDispatch } from "../../store"; +import { fetchServers } from "../../slices/serverSlice"; /** * This component renders the table view of services @@ -43,8 +44,6 @@ const Services = ({ loadingJobs, // @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 'loadingServers' implicitly has an... Remove this comment to see the full error message - 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 'resetTextFilter' implicitly has a... Remove this comment to see the full error message @@ -57,6 +56,7 @@ const Services = ({ currentFilterType, }) => { const { t } = useTranslation(); + const dispatch = useAppDispatch(); const [displayNavigation, setNavigation] = useState(false); const loadServices = async () => { @@ -83,7 +83,7 @@ const Services = ({ resetOffset(); // Fetching servers from server - loadingServers(); + dispatch(fetchServers()); // Load servers into table loadingServersIntoTable(); diff --git a/app/src/components/systems/partials/ServersMaintenanceCell.tsx b/app/src/components/systems/partials/ServersMaintenanceCell.tsx index 154a0529f2..f0c0f22c94 100644 --- a/app/src/components/systems/partials/ServersMaintenanceCell.tsx +++ b/app/src/components/systems/partials/ServersMaintenanceCell.tsx @@ -1,12 +1,13 @@ import React from "react"; import { connect } from "react-redux"; -import { - fetchServers, - setServerMaintenance, -} from "../../../thunks/serverThunks"; import { loadServersIntoTable } from "../../../thunks/tableThunks"; import { getUserInformation } from "../../../selectors/userInfoSelectors"; import { hasAccess } from "../../../utils/utils"; +import { useAppDispatch } from "../../../store"; +import { + fetchServers, + setServerMaintenance, +} from "../../../slices/serverSlice"; /** * This component renders the maintenance cells of servers in the table view @@ -14,17 +15,17 @@ import { hasAccess } from "../../../utils/utils"; const ServersMaintenanceCell = ({ // @ts-expect-error TS(7031): Binding element 'row' implicitly has an 'any' type... Remove this comment to see the full error message row, -// @ts-expect-error TS(7031): Binding element 'loadServers' implicitly has an 'a... Remove this comment to see the full error message - loadServers, // @ts-expect-error TS(7031): Binding element 'loadServersIntoTable' implicitly ... Remove this comment to see the full error message loadServersIntoTable, // @ts-expect-error TS(7031): Binding element 'user' implicitly has an 'any' typ... Remove this comment to see the full error message user, }) => { + const dispatch = useAppDispatch(); + // @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type. const onClickCheckbox = async (e) => { - await setServerMaintenance(row.hostname, e.target.checked); - await loadServers(); + await dispatch(setServerMaintenance({host: row.hostname, maintenance: e.target.checked})); + await dispatch(fetchServers()); loadServersIntoTable(); }; @@ -51,7 +52,6 @@ const mapStateToProps = (state) => ({ // mapping actions to dispatch // @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. const mapDispatchToProps = (dispatch) => ({ - loadServers: () => dispatch(fetchServers()), loadServersIntoTable: () => dispatch(loadServersIntoTable()), }); diff --git a/app/src/configs/tableConfigs/serversTableConfig.ts b/app/src/configs/tableConfigs/serversTableConfig.ts index fcb35da73c..1b1644c4cf 100644 --- a/app/src/configs/tableConfigs/serversTableConfig.ts +++ b/app/src/configs/tableConfigs/serversTableConfig.ts @@ -1,6 +1,3 @@ -import ServersStatusCell from "../../components/systems/partials/ServersStatusCell"; -import ServersMaintenanceCell from "../../components/systems/partials/ServersMaintenanceCell"; - /** * Config that contains the columns and further information regarding servers. These are the information that never or hardly changes. * That's why it is hard coded here and not fetched from server. @@ -61,13 +58,3 @@ export const serversTableConfig = { 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 serversTemplateMap = { - ServersStatusCell: ServersStatusCell, - ServersMaintenanceCell: ServersMaintenanceCell, -}; diff --git a/app/src/configs/tableConfigs/serversTableMap.ts b/app/src/configs/tableConfigs/serversTableMap.ts new file mode 100644 index 0000000000..410064bc13 --- /dev/null +++ b/app/src/configs/tableConfigs/serversTableMap.ts @@ -0,0 +1,12 @@ +import ServersStatusCell from "../../components/systems/partials/ServersStatusCell"; +import ServersMaintenanceCell from "../../components/systems/partials/ServersMaintenanceCell"; + +/** + * 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 serversTemplateMap = { + ServersStatusCell: ServersStatusCell, + ServersMaintenanceCell: ServersMaintenanceCell, +}; diff --git a/app/src/reducers/serverReducer.ts b/app/src/reducers/serverReducer.ts deleted file mode 100644 index e8ecc81954..0000000000 --- a/app/src/reducers/serverReducer.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { serversTableConfig } from "../configs/tableConfigs/serversTableConfig"; -import { - LOAD_SERVERS_FAILURE, - LOAD_SERVERS_IN_PROGRESS, - LOAD_SERVERS_SUCCESS, - SET_SERVER_COLUMNS, -} from "../actions/serverActions"; - -/** - * This file contains redux reducer for actions affecting the state of servers - */ - -// Fill columns initially with columns defined in serversTableConfig -const initialColumns = serversTableConfig.columns.map((column) => ({ - ...column, - deactivated: false, -})); - -// Initial state of servers in redux store -const initialState = { - isLoading: false, - results: [], - columns: initialColumns, - total: 0, - count: 0, - offset: 0, - limit: 0, -}; - -// Reducer for servers -// @ts-expect-error TS(7006): Parameter 'action' implicitly has an 'any' type. -const servers = (state = initialState, action) => { - const { type, payload } = action; - switch (type) { - case LOAD_SERVERS_IN_PROGRESS: { - return { - ...state, - isLoading: true, - }; - } - case LOAD_SERVERS_SUCCESS: { - const { servers } = payload; - return { - ...state, - isLoading: false, - total: servers.total, - count: servers.count, - limit: servers.limit, - offset: servers.offset, - results: servers.results, - }; - } - case LOAD_SERVERS_FAILURE: { - return { - ...state, - isLoading: false, - }; - } - case SET_SERVER_COLUMNS: { - const { updatedColumns } = payload; - return { - ...state, - columns: updatedColumns, - }; - } - default: - return state; - } -}; - -export default servers; diff --git a/app/src/selectors/serverSelectors.ts b/app/src/selectors/serverSelectors.ts index c4e557f989..808d552e9c 100644 --- a/app/src/selectors/serverSelectors.ts +++ b/app/src/selectors/serverSelectors.ts @@ -1,6 +1,7 @@ +import { RootState } from "../store"; + /** * This file contains selectors regarding servers */ - -export const getServers = (state: any) => state.servers.results; -export const getTotalServers = (state: any) => state.servers.total; +export const getServers = (state: RootState) => state.servers.results; +export const getTotalServers = (state: RootState) => state.servers.total; diff --git a/app/src/slices/serverSlice.ts b/app/src/slices/serverSlice.ts new file mode 100644 index 0000000000..f64c98692e --- /dev/null +++ b/app/src/slices/serverSlice.ts @@ -0,0 +1,108 @@ +import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit' +import { serversTableConfig } from "../configs/tableConfigs/serversTableConfig"; +import axios from 'axios'; +import { getURLParams } from '../utils/resourceUtils'; + +/** + * This file contains redux reducer for actions affecting the state of servers + */ +type ServerState = { + status: 'uninitialized' | 'loading' | 'succeeded' | 'failed', + error: SerializedError | null, + results: any[], // TODO: proper typing + columns: any, // TODO: proper typing, derive from `initialColumns` + total: number, + count: number, + offset: number, + limit: number, +} + +// Fill columns initially with columns defined in serversTableConfig +const initialColumns = serversTableConfig.columns.map((column) => ({ + ...column, + deactivated: false, +})); + +// Initial state of servers in redux store +const initialState: ServerState = { + status: 'uninitialized', + error: null, + results: [], + columns: initialColumns, + total: 0, + count: 0, + offset: 0, + limit: 0, +}; + +// fetch servers from server +export const fetchServers = createAsyncThunk('servers/fetchServers', async (_, { getState }) => { + const state = getState(); + let params = getURLParams(state); + // Just make the async request here, and return the response. + // This will automatically dispatch a `pending` action first, + // and then `fulfilled` or `rejected` actions based on the promise. + // /servers.json?limit=0&offset=0&filter={filter}&sort={sort} + const res = await axios.get("/admin-ng/server/servers.json", { params: params }); + return res.data; +}); + +// change maintenance status of a server/host +export const setServerMaintenance = createAsyncThunk('servers/setServerMaintenance', async (params: {host: any, maintenance: any}) => { + const { host, maintenance } = params; + let data = new URLSearchParams(); + data.append("host", host); + data.append("maintenance", maintenance); + + axios + .post("/services/maintenance", data) + .then((response) => { + console.info(response); + }) + .catch((response) => { + console.error(response); + }); +}); + +const serverSlice = createSlice({ + name: 'servers', + initialState, + reducers: { + setServerColumns(state, action: PayloadAction<{ + updatedColumns: ServerState["columns"], + }>) { + state.columns = action.payload.updatedColumns; + }, + }, + // These are used for thunks + extraReducers: builder => { + builder + .addCase(fetchServers.pending, (state) => { + state.status = 'loading'; + }) + .addCase(fetchServers.fulfilled, (state, action: PayloadAction<{ + total: ServerState["total"], + count: ServerState["count"], + limit: ServerState["limit"], + offset: ServerState["offset"], + results: ServerState["results"], + }>) => { + state.status = 'succeeded'; + const servers = action.payload; + state.total = servers.total; + state.count = servers.count; + state.limit = servers.limit; + state.offset = servers.offset; + state.results = servers.results; + }) + .addCase(fetchServers.rejected, (state, action) => { + state.status = 'failed'; + state.error = action.error; + }); + } +}); + +export const { setServerColumns } = serverSlice.actions; + +// Export the slice reducer as the default export +export default serverSlice.reducer; diff --git a/app/src/store.ts b/app/src/store.ts index 790807712c..b3cc9e00de 100644 --- a/app/src/store.ts +++ b/app/src/store.ts @@ -10,7 +10,7 @@ import table from "./reducers/tableReducers"; import series from "./reducers/seriesReducer"; import recordings from "./reducers/recordingReducer"; import jobs from "./reducers/jobReducer"; -import servers from "./reducers/serverReducer"; +import servers from "./slices/serverSlice"; import services from "./reducers/serviceReducer"; import users from "./reducers/userReducers"; import groups from "./reducers/groupReducers"; diff --git a/app/src/thunks/serverThunks.ts b/app/src/thunks/serverThunks.ts deleted file mode 100644 index 4716accf05..0000000000 --- a/app/src/thunks/serverThunks.ts +++ /dev/null @@ -1,49 +0,0 @@ -import axios from "axios"; -import { - loadServersFailure, - loadServersInProgress, - loadServersSuccess, -} from "../actions/serverActions"; -import { getURLParams } from "../utils/resourceUtils"; - -// fetch servers from server -// @ts-expect-error TS(7006): Parameter 'dispatch' implicitly has an 'any' type. -export const fetchServers = () => async (dispatch, getState) => { - try { - dispatch(loadServersInProgress()); - - const state = getState(); - let params = getURLParams(state); - - // /servers.json?limit=0&offset=0&filter={filter}&sort={sort} - let data = await axios.get("/admin-ng/server/servers.json", { - params: params, - }); - - const servers = await data.data; - - console.info(servers); - - dispatch(loadServersSuccess(servers)); - } catch (e) { - console.error(e); - dispatch(loadServersFailure()); - } -}; - -// change maintenance status of a server/host -// @ts-expect-error TS(7006): Parameter 'host' implicitly has an 'any' type. -export const setServerMaintenance = async (host, maintenance) => { - let data = new URLSearchParams(); - data.append("host", host); - data.append("maintenance", maintenance); - - axios - .post("/services/maintenance", data) - .then((response) => { - console.info(response); - }) - .catch((response) => { - console.error(response); - }); -}; diff --git a/app/src/thunks/tableThunks.ts b/app/src/thunks/tableThunks.ts index 3220b05dde..67201a7306 100644 --- a/app/src/thunks/tableThunks.ts +++ b/app/src/thunks/tableThunks.ts @@ -36,14 +36,13 @@ import { fetchEvents } from "./eventThunks"; import { fetchSeries } from "./seriesThunks"; import { fetchRecordings } from "./recordingThunks"; import { fetchJobs } from "./jobThunks"; -import { fetchServers } from "./serverThunks"; +import { fetchServers, setServerColumns } from "../slices/serverSlice"; import { fetchServices } from "./serviceThunks"; import { fetchUsers } from "./userThunks"; import { fetchGroups } from "./groupThunks"; import { fetchThemes } from "./themeThunks"; import { setRecordingsColumns } from "../actions/recordingActions"; import { setJobColumns } from "../actions/jobActions"; -import { setServerColumns } from "../actions/serverActions"; import { setUserColumns } from "../actions/userActions"; import { setGroupColumns } from "../actions/groupActions"; import { fetchAcls, setAclColumns } from "../slices/aclSlice"; From 02c1b4e5933c2f70c90612ae5f9965a633ca6ff1 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 13 Feb 2024 09:19:29 +0100 Subject: [PATCH 2/4] Add typing for server result Adds typing on what we expect the backend to return for servers. --- app/src/slices/serverSlice.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/src/slices/serverSlice.ts b/app/src/slices/serverSlice.ts index f64c98692e..7b331e2ea9 100644 --- a/app/src/slices/serverSlice.ts +++ b/app/src/slices/serverSlice.ts @@ -6,10 +6,20 @@ import { getURLParams } from '../utils/resourceUtils'; /** * This file contains redux reducer for actions affecting the state of servers */ +type Server = { + cores: number, + hostname: string, + maintenance: boolean, + nodeName: string, + online: boolean, + queued: number, + running: number +} + type ServerState = { status: 'uninitialized' | 'loading' | 'succeeded' | 'failed', error: SerializedError | null, - results: any[], // TODO: proper typing + results: Server[], columns: any, // TODO: proper typing, derive from `initialColumns` total: number, count: number, From 7343341b95c07a82d07961478488c755a5c42173 Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 14 Feb 2024 16:51:25 +0100 Subject: [PATCH 3/4] Fix server table crashing when changing columns --- app/src/slices/serverSlice.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/slices/serverSlice.ts b/app/src/slices/serverSlice.ts index 7b331e2ea9..fa66c16ca1 100644 --- a/app/src/slices/serverSlice.ts +++ b/app/src/slices/serverSlice.ts @@ -78,9 +78,9 @@ const serverSlice = createSlice({ name: 'servers', initialState, reducers: { - setServerColumns(state, action: PayloadAction<{ - updatedColumns: ServerState["columns"], - }>) { + setServerColumns(state, action: PayloadAction< + ServerState["columns"] + >) { state.columns = action.payload.updatedColumns; }, }, From 86c6b3bed9a1f7226161086f32c2e54ce1dcf3bc Mon Sep 17 00:00:00 2001 From: Arnei Date: Wed, 14 Feb 2024 16:52:20 +0100 Subject: [PATCH 4/4] Fix table filters in server table --- app/src/components/systems/Servers.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/src/components/systems/Servers.tsx b/app/src/components/systems/Servers.tsx index c5b89c3c1e..399e17e3ed 100644 --- a/app/src/components/systems/Servers.tsx +++ b/app/src/components/systems/Servers.tsx @@ -59,6 +59,11 @@ const Servers = ({ const servers = useAppSelector(state => getTotalServers(state)); + // TODO: Get rid of the wrappers when modernizing redux is done + const fetchServersWrapper = () => { + dispatch(fetchServers()) + } + const loadServers = async () => { // Fetching servers from server await dispatch(fetchServers()); @@ -158,7 +163,7 @@ const Servers = ({
{/* Include filters component */}