1081664682

Committed 22 Nov 2023 02:11PM UTC coverage: 82.798% (-17.2%) from 99.964%

Build # 1081664682

Build Type

Pull #4214

gitlab-ci

Committed by

tranchitella

Commit Message

fix: Fixed the infinite page redirects when the back button is pressed

Remove the location and navigate from the useLocationParams.setValue callback
dependencies as they change the set function that is presented in other
useEffect dependencies. This happens when the back button is clicked, which
leads to the location changing infinitely.

Changelog: Title
Ticket: MEN-6847
Ticket: MEN-6796

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>
Signed-off-by: Fabio Tranchitella <fabio.tranchitella@northern.tech>

Pull Request Pull Request #4214: fix: Fixed the infinite page redirects when the back button is pressed

Run Details

4319 of 6292 branches covered (0.0%)

8332 of 10063 relevant lines covered (82.8%)

191.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

71.67

/src/js/components/deployments/scheduleddeployments.js

// Copyright 2020 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { useDispatch, useSelector } from 'react-redux';

import { CalendarToday as CalendarTodayIcon, List as ListIcon, Refresh as RefreshIcon } from '@mui/icons-material';
import { Button } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import moment from 'moment';

import { setSnackbar } from '../../actions/appActions';
import { getDeploymentsByStatus, setDeploymentsState } from '../../actions/deploymentActions';
import { DEPLOYMENT_STATES } from '../../constants/deploymentConstants';
import {
  getDeploymentsByStatus as getDeploymentsByStatusSelector,
  getDeploymentsSelectionState,
  getDevicesById,
  getIdAttribute,
  getMappedDeploymentSelection,
  getTenantCapabilities,
  getUserCapabilities
} from '../../selectors';
import { clearAllRetryTimers, clearRetryTimer, setRetryTimer } from '../../utils/retrytimer';
import { DefaultUpgradeNotification } from '../common/enterpriseNotification';
import { DeploymentDeviceCount, DeploymentEndTime, DeploymentPhases, DeploymentStartTime } from './deploymentitem';
import { defaultRefreshDeploymentsLength as refreshDeploymentsLength } from './deployments';
import DeploymentsList, { defaultHeaders } from './deploymentslist';

const useStyles = makeStyles()(theme => ({
  inactive: { color: theme.palette.text.disabled },
  refreshIcon: { fill: theme.palette.grey[400], width: 111, height: 111 },
  tabSelect: { textTransform: 'none' }
}));

const localizer = momentLocalizer(moment);

const headers = [
  ...defaultHeaders.slice(0, 2),
  { title: 'Start time', renderer: DeploymentStartTime, props: { direction: 'up' } },
  { title: `End time`, renderer: DeploymentEndTime },
  { title: '# devices', class: 'align-right column-defined', renderer: DeploymentDeviceCount },
  { title: 'Phases', renderer: DeploymentPhases }
];

const tabs = {
  list: {
    icon: <ListIcon />,
    index: 'list',
    title: 'List view'
  },
  calendar: {
    icon: <CalendarTodayIcon />,
    index: 'calendar',
    title: 'Calendar'
  }
};

const type = DEPLOYMENT_STATES.scheduled;

export const Scheduled = ({ abort, createClick, openReport, ...remainder }) => {
  const [calendarEvents, setCalendarEvents] = useState([]);
  const [tabIndex, setTabIndex] = useState(tabs.list.index);
  const timer = useRef();
  const { canConfigure, canDeploy } = useSelector(getUserCapabilities);
  const {
    scheduled: { total: count }
  } = useSelector(getDeploymentsByStatusSelector);
  const { attribute: idAttribute } = useSelector(getIdAttribute);
  const devices = useSelector(getDevicesById);
  // TODO: isEnterprise is misleading here, but is passed down to the DeploymentListItem, this should be renamed
  const { canDelta: isEnterprise } = useSelector(getTenantCapabilities);
  const { scheduled: scheduledState } = useSelector(getDeploymentsSelectionState);
  const items = useSelector(state => getMappedDeploymentSelection(state, type));
  const dispatch = useDispatch();
  const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);
  const { classes } = useStyles();

  const { page, perPage } = scheduledState;

  const refreshDeployments = useCallback(() => {
    return dispatch(getDeploymentsByStatus(DEPLOYMENT_STATES.scheduled, page, perPage))
      .then(deploymentsAction => {
        clearRetryTimer(type, dispatchedSetSnackbar);
        const { total, deploymentIds } = deploymentsAction[deploymentsAction.length - 1];
        if (total && !deploymentIds.length) {
          return refreshDeployments();
        }
      })
      .catch(err => setRetryTimer(err, 'deployments', `Couldn't load deployments.`, refreshDeploymentsLength, dispatchedSetSnackbar));
  }, [dispatch, dispatchedSetSnackbar, page, perPage]);

  useEffect(() => {
    if (!isEnterprise) {
      return;
    }
    refreshDeployments();
    return () => {
      clearAllRetryTimers(dispatchedSetSnackbar);
    };
  }, [dispatchedSetSnackbar, isEnterprise, refreshDeployments]);

  useEffect(() => {
    if (!isEnterprise) {
      return;
    }
    clearInterval(timer.current);
    timer.current = setInterval(refreshDeployments, refreshDeploymentsLength);
    return () => {
      clearInterval(timer.current);
    };
  }, [isEnterprise, page, perPage, refreshDeployments]);

  useEffect(() => {
    if (tabIndex !== tabs.calendar.index) {
      return;
    }
    const calendarEvents = items.map(deployment => {
      const start = new Date(deployment.start_ts || deployment.phases ? deployment.phases[0].start_ts : deployment.created);
      let endDate = start;
      if (deployment.phases && deployment.phases.length && deployment.phases[deployment.phases.length - 1].end_ts) {
        endDate = new Date(deployment.phases[deployment.phases.length - 1].end_ts);
      } else if (deployment.filter_id || deployment.filter) {
        // calendar doesn't support never ending events so we arbitrarly set one year
        endDate = moment(start).add(1, 'year');
      }
      return {
        allDay: !(deployment.filter_id || deployment.filter),
        id: deployment.id,
        title: `${deployment.name} ${deployment.artifact_name}`,
        start,
        end: endDate
      };
    });
    setCalendarEvents(calendarEvents);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(items), tabIndex]);

  const abortDeployment = id => abort(id).then(refreshDeployments);

  const props = {
    ...remainder,
    canDeploy,
    canConfigure,
    count,
    devices,
    idAttribute,
    isEnterprise,
    items,
    openReport,
    page
  };
  return (
    <div className="fadeIn margin-left">
      {items.length ? (
        <>
          <div className="margin-large margin-left-small">
            {Object.entries(tabs).map(([currentIndex, tab]) => (
              <Button
                className={`${classes.tabSelect} ${currentIndex !== tabIndex ? classes.inactive : ''}`}
                color="primary"
                key={currentIndex}
                startIcon={tab.icon}
                onClick={() => setTabIndex(currentIndex)}
              >
                {tab.title}
              </Button>
            ))}
          </div>
          {tabIndex === tabs.list.index && (
            <DeploymentsList
              {...props}
              abort={abortDeployment}
              headers={headers}
              type={type}
              onChangeRowsPerPage={perPage => dispatch(setDeploymentsState({ [DEPLOYMENT_STATES.scheduled]: { page: 1, perPage } }))}
              onChangePage={page => dispatch(setDeploymentsState({ [DEPLOYMENT_STATES.scheduled]: { page } }))}
            />
          )}
          {tabIndex === tabs.calendar.index && (
            <Calendar
              localizer={localizer}
              className="margin-left margin-bottom"
              events={calendarEvents}
              startAccessor="start"
              endAccessor="end"
              style={{ height: 700 }}
              onSelectEvent={calendarEvent => openReport(type, calendarEvent.id)}
            />
          )}
        </>
      ) : (
        <div className="dashboard-placeholder margin-top">
          {isEnterprise ? (
            <>
              <p>Scheduled deployments will appear here. </p>
              {canDeploy && (
                <p>
                  <a onClick={createClick}>Create a deployment</a> to get started
                </p>
              )}
            </>
          ) : (
            <div className="flexbox centered">
              <DefaultUpgradeNotification />
            </div>
          )}
          <RefreshIcon className={`flip-horizontal ${classes.refreshIcon}`} />
        </div>
      )}
    </div>
  );
};

export default Scheduled;

1	// Copyright 2020 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useCallback, useEffect, useRef, useState } from 'react';
15	import { Calendar, momentLocalizer } from 'react-big-calendar';
16	import 'react-big-calendar/lib/css/react-big-calendar.css';
17	import { useDispatch, useSelector } from 'react-redux';
18
19	import { CalendarToday as CalendarTodayIcon, List as ListIcon, Refresh as RefreshIcon } from '@mui/icons-material';
20	import { Button } from '@mui/material';
21	import { makeStyles } from 'tss-react/mui';
22
23	import moment from 'moment';
24
25	import { setSnackbar } from '../../actions/appActions';
26	import { getDeploymentsByStatus, setDeploymentsState } from '../../actions/deploymentActions';
27	import { DEPLOYMENT_STATES } from '../../constants/deploymentConstants';
28	import {
29	getDeploymentsByStatus as getDeploymentsByStatusSelector,
30	getDeploymentsSelectionState,
31	getDevicesById,
32	getIdAttribute,
33	getMappedDeploymentSelection,
34	getTenantCapabilities,
35	getUserCapabilities
36	} from '../../selectors';
37	import { clearAllRetryTimers, clearRetryTimer, setRetryTimer } from '../../utils/retrytimer';
38	import { DefaultUpgradeNotification } from '../common/enterpriseNotification';
39	import { DeploymentDeviceCount, DeploymentEndTime, DeploymentPhases, DeploymentStartTime } from './deploymentitem';
40	import { defaultRefreshDeploymentsLength as refreshDeploymentsLength } from './deployments';
41	import DeploymentsList, { defaultHeaders } from './deploymentslist';
42
43	const useStyles = makeStyles()(theme => ({	6✔
44	inactive: { color: theme.palette.text.disabled },
45	refreshIcon: { fill: theme.palette.grey[400], width: 111, height: 111 },
46	tabSelect: { textTransform: 'none' }
47	}));
48
49	const localizer = momentLocalizer(moment);	6✔
50
51	const headers = [	6✔
52	...defaultHeaders.slice(0, 2),
53	{ title: 'Start time', renderer: DeploymentStartTime, props: { direction: 'up' } },
54	{ title: `End time`, renderer: DeploymentEndTime },
55	{ title: '# devices', class: 'align-right column-defined', renderer: DeploymentDeviceCount },
56	{ title: 'Phases', renderer: DeploymentPhases }
57	];
58
59	const tabs = {	6✔
60	list: {
61	icon: <ListIcon />,
62	index: 'list',
63	title: 'List view'
64	},
65	calendar: {
66	icon: <CalendarTodayIcon />,
67	index: 'calendar',
68	title: 'Calendar'
69	}
70	};
71
72	const type = DEPLOYMENT_STATES.scheduled;	6✔
73
74	export const Scheduled = ({ abort, createClick, openReport, ...remainder }) => {	6✔
75	const [calendarEvents, setCalendarEvents] = useState([]);	3✔
76	const [tabIndex, setTabIndex] = useState(tabs.list.index);	3✔
77	const timer = useRef();	3✔
78	const { canConfigure, canDeploy } = useSelector(getUserCapabilities);	3✔
79	const {
80	scheduled: { total: count }
81	} = useSelector(getDeploymentsByStatusSelector);	3✔
82	const { attribute: idAttribute } = useSelector(getIdAttribute);	3✔
83	const devices = useSelector(getDevicesById);	3✔
84	// TODO: isEnterprise is misleading here, but is passed down to the DeploymentListItem, this should be renamed
85	const { canDelta: isEnterprise } = useSelector(getTenantCapabilities);	3✔
86	const { scheduled: scheduledState } = useSelector(getDeploymentsSelectionState);	3✔
87	const items = useSelector(state => getMappedDeploymentSelection(state, type));	8✔
88	const dispatch = useDispatch();	3✔
89	const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);	3✔
90	const { classes } = useStyles();	3✔
91
92	const { page, perPage } = scheduledState;	3✔
93
94	const refreshDeployments = useCallback(() => {	3✔
95	return dispatch(getDeploymentsByStatus(DEPLOYMENT_STATES.scheduled, page, perPage))	2✔
96	.then(deploymentsAction => {
97	clearRetryTimer(type, dispatchedSetSnackbar);	1✔
98	const { total, deploymentIds } = deploymentsAction[deploymentsAction.length - 1];	1✔
99	if (total && !deploymentIds.length) {	1!
100	return refreshDeployments();	×
101	}
102	})
103	.catch(err => setRetryTimer(err, 'deployments', `Couldn't load deployments.`, refreshDeploymentsLength, dispatchedSetSnackbar));	×
104	}, [dispatch, dispatchedSetSnackbar, page, perPage]);
105
106	useEffect(() => {	3✔
107	if (!isEnterprise) {	2!
108	return;	×
109	}
110	refreshDeployments();	2✔
111	return () => {	2✔
112	clearAllRetryTimers(dispatchedSetSnackbar);	2✔
113	};
114	}, [dispatchedSetSnackbar, isEnterprise, refreshDeployments]);
115
116	useEffect(() => {	3✔
117	if (!isEnterprise) {	2!
118	return;	×
119	}
120	clearInterval(timer.current);	2✔
121	timer.current = setInterval(refreshDeployments, refreshDeploymentsLength);	2✔
122	return () => {	2✔
123	clearInterval(timer.current);	2✔
124	};
125	}, [isEnterprise, page, perPage, refreshDeployments]);
126
127	useEffect(() => {	3✔
128	if (tabIndex !== tabs.calendar.index) {	2!
129	return;	2✔
130	}
131	const calendarEvents = items.map(deployment => {	×
132	const start = new Date(deployment.start_ts \|\| deployment.phases ? deployment.phases[0].start_ts : deployment.created);	×
133	let endDate = start;	×
134	if (deployment.phases && deployment.phases.length && deployment.phases[deployment.phases.length - 1].end_ts) {	×
135	endDate = new Date(deployment.phases[deployment.phases.length - 1].end_ts);	×
136	} else if (deployment.filter_id \|\| deployment.filter) {	×
137	// calendar doesn't support never ending events so we arbitrarly set one year
138	endDate = moment(start).add(1, 'year');	×
139	}
140	return {	×
141	allDay: !(deployment.filter_id \|\| deployment.filter),	×
142	id: deployment.id,
143	title: `${deployment.name} ${deployment.artifact_name}`,
144	start,
145	end: endDate
146	};
147	});
148	setCalendarEvents(calendarEvents);	×
149	// eslint-disable-next-line react-hooks/exhaustive-deps
150	}, [JSON.stringify(items), tabIndex]);
151
152	const abortDeployment = id => abort(id).then(refreshDeployments);	3✔
153
154	const props = {	3✔
155	...remainder,
156	canDeploy,
157	canConfigure,
158	count,
159	devices,
160	idAttribute,
161	isEnterprise,
162	items,
163	openReport,
164	page
165	};
166	return (	3✔
167	<div className="fadeIn margin-left">
168	{items.length ? (	3✔
169	<>
170	<div className="margin-large margin-left-small">
171	{Object.entries(tabs).map(([currentIndex, tab]) => (
172	<Button	4✔
173	className={`${classes.tabSelect} ${currentIndex !== tabIndex ? classes.inactive : ''}`}	4✔
174	color="primary"
175	key={currentIndex}
176	startIcon={tab.icon}
177	onClick={() => setTabIndex(currentIndex)}	×
178	>
179	{tab.title}
180	</Button>
181	))}
182	</div>
183	{tabIndex === tabs.list.index && (	4✔
184	<DeploymentsList
185	{...props}
186	abort={abortDeployment}
187	headers={headers}
188	type={type}
189	onChangeRowsPerPage={perPage => dispatch(setDeploymentsState({ [DEPLOYMENT_STATES.scheduled]: { page: 1, perPage } }))}	×
190	onChangePage={page => dispatch(setDeploymentsState({ [DEPLOYMENT_STATES.scheduled]: { page } }))}	×
191	/>
192	)}
193	{tabIndex === tabs.calendar.index && (	2!
194	<Calendar
195	localizer={localizer}
196	className="margin-left margin-bottom"
197	events={calendarEvents}
198	startAccessor="start"
199	endAccessor="end"
200	style={{ height: 700 }}
201	onSelectEvent={calendarEvent => openReport(type, calendarEvent.id)}	×
202	/>
203	)}
204	</>
205	) : (
206	<div className="dashboard-placeholder margin-top">
207	{isEnterprise ? (	1!
208	<>
209	<p>Scheduled deployments will appear here. </p>
210	{canDeploy && (	2✔
211	<p>
212	<a onClick={createClick}>Create a deployment</a> to get started
213	</p>
214	)}
215	</>
216	) : (
217	<div className="flexbox centered">
218	<DefaultUpgradeNotification />
219	</div>
220	)}
221	<RefreshIcon className={`flip-horizontal ${classes.refreshIcon}`} />
222	</div>
223	)}
224	</div>
225	);
226	};
227
228	export default Scheduled;

mendersoftware / gui / 1081664682

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous