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

93.55

/src/js/components/settings/webhooks/activity.js

// Copyright 2022 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, { useEffect, useMemo, useState } from 'react';

// material ui
import { ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Circle as CircleIcon } from '@mui/icons-material';
import { Accordion, AccordionDetails, AccordionSummary, accordionClasses } from '@mui/material';
import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
import { makeStyles } from 'tss-react/mui';

import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';
import { toggle } from '../../../helpers';
import Pagination from '../../common/pagination';
import Time from '../../common/time';

const useStyles = makeStyles()(theme => ({
  activityList: {
    display: 'flexbox',
    flexDirection: 'column',
    ['.header']: {
      padding: `0px ${theme.spacing(2)}`,
      marginBottom: theme.spacing()
    },
    [`.header, .${accordionSummaryClasses.content}`]: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr 1fr 50px'
    },
    [`.${accordionSummaryClasses.content}`]: {
      cursor: 'pointer',
      [`&>time, &>.trigger-type`]: {
        color: theme.palette.secondary.main
      },
      [`&>:last-child`]: {
        paddingRight: 'initial'
      }
    },
    [`.${accordionClasses.root}`]: {
      backgroundColor: theme.palette.background.default
    }
  },
  divider: { marginTop: theme.spacing(), marginBottom: theme.spacing() }
}));

const triggerMap = {
  'device-decommissioned': 'Device decommissioned',
  'device-provisioned': 'Device provisioned',
  'device-status-changed': 'Device status updated'
};

const iconStyles = {
  status: { fontSize: 12, marginRight: 8 },
  dropDown: { justifySelf: 'right', marginRight: 8 }
};

const DeliveryStatus = ({ entry, webhook = {} }) => {
  const { delivery_statuses = [] } = entry;

  const status = useMemo(() => {
    const status = delivery_statuses.find(status => status.integration_id === webhook.id) ?? delivery_statuses[0];
    if (status) {
      return { code: status.status_code, signal: status.success ? 'green' : 'red' };
    }
    return { code: 418, signal: 'disabled' };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(delivery_statuses), webhook.id]);

  return (
    <div className="flexbox center-aligned">
      <CircleIcon className={status.signal} style={iconStyles.status} />
      <div className={status.code >= 400 ? 'muted' : ''}>{status.code}</div>
    </div>
  );
};

const columns = [
  { key: 'created_ts', title: 'Time', render: ({ entry }) => <Time value={entry.time} /> },
  { key: 'trigger', title: 'Event trigger', render: ({ entry }) => <div className="trigger-type">{triggerMap[entry.type] ?? entry.type}</div> },
  { key: 'status', title: 'Status', render: ({ entry, webhook }) => <DeliveryStatus entry={entry} webhook={webhook} /> },
  {
    key: 'details',
    title: 'Details',
    render: ({ isExpanded }) => (isExpanded ? <ArrowDropUpIcon style={iconStyles.dropDown} /> : <ArrowDropDownIcon style={iconStyles.dropDown} />)
  }
];

const ListItem = ({ entry = {}, webhook }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const { data = {} } = entry;

  return (
    <Accordion square expanded={isExpanded}>
      <AccordionSummary onClick={() => setIsExpanded(toggle)}>
        {columns.map(({ key, render: Column }) => (
          <Column key={key} entry={entry} isExpanded={isExpanded} webhook={webhook} />
        ))}
      </AccordionSummary>
      <AccordionDetails>
        <code>{JSON.stringify(data)}</code>
      </AccordionDetails>
    </Accordion>
  );
};

const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;
const WebhookActivity = ({ events = [], getWebhookEvents, eventTotal, webhook }) => {
  const { classes } = useStyles();
  const [page, setPage] = useState(defaultPage);

  useEffect(() => {
    getWebhookEvents({ page, perPage: defaultPerPage });
  }, [getWebhookEvents, page]);

  return (
    <div className={classes.activityList}>
      {events.length ? (
        <>
          <div className="header">
            {columns.map(({ key, title }) => (
              <div key={key}>{title}</div>
            ))}
          </div>
          <div className="body">
            {events.map(entry => (
              <ListItem key={entry.id} entry={entry} webhook={webhook} />
            ))}
            {eventTotal > defaultPerPage && (
              <Pagination
                className="margin-top-none"
                count={eventTotal ? eventTotal : defaultPerPage}
                showCountInfo={false}
                rowsPerPageOptions={[defaultPerPage]}
                page={page}
                rowsPerPage={defaultPerPage}
                onChangePage={setPage}
              />
            )}
          </div>
        </>
      ) : (
        <div className="margin-top-large flexbox centered disabled">No webhook activity yet.</div>
      )}
    </div>
  );
};

export default WebhookActivity;

1	// Copyright 2022 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, { useEffect, useMemo, useState } from 'react';
15
16	// material ui
17	import { ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Circle as CircleIcon } from '@mui/icons-material';
18	import { Accordion, AccordionDetails, AccordionSummary, accordionClasses } from '@mui/material';
19	import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
20	import { makeStyles } from 'tss-react/mui';
21
22	import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';
23	import { toggle } from '../../../helpers';
24	import Pagination from '../../common/pagination';
25	import Time from '../../common/time';
26
27	const useStyles = makeStyles()(theme => ({	5✔
28	activityList: {
29	display: 'flexbox',
30	flexDirection: 'column',
31	['.header']: {
32	padding: `0px ${theme.spacing(2)}`,
33	marginBottom: theme.spacing()
34	},
35	[`.header, .${accordionSummaryClasses.content}`]: {
36	display: 'grid',
37	gridTemplateColumns: '1fr 2fr 1fr 50px'
38	},
39	[`.${accordionSummaryClasses.content}`]: {
40	cursor: 'pointer',
41	[`&>time, &>.trigger-type`]: {
42	color: theme.palette.secondary.main
43	},
44	[`&>:last-child`]: {
45	paddingRight: 'initial'
46	}
47	},
48	[`.${accordionClasses.root}`]: {
49	backgroundColor: theme.palette.background.default
50	}
51	},
52	divider: { marginTop: theme.spacing(), marginBottom: theme.spacing() }
53	}));
54
55	const triggerMap = {	5✔
56	'device-decommissioned': 'Device decommissioned',
57	'device-provisioned': 'Device provisioned',
58	'device-status-changed': 'Device status updated'
59	};
60
61	const iconStyles = {	5✔
62	status: { fontSize: 12, marginRight: 8 },
63	dropDown: { justifySelf: 'right', marginRight: 8 }
64	};
65
66	const DeliveryStatus = ({ entry, webhook = {} }) => {	5✔
67	const { delivery_statuses = [] } = entry;	2!
68
69	const status = useMemo(() => {	2✔
70	const status = delivery_statuses.find(status => status.integration_id === webhook.id) ?? delivery_statuses[0];	2✔
71	if (status) {	2!
72	return { code: status.status_code, signal: status.success ? 'green' : 'red' };	2!
73	}
74	return { code: 418, signal: 'disabled' };	×
75	// eslint-disable-next-line react-hooks/exhaustive-deps
76	}, [JSON.stringify(delivery_statuses), webhook.id]);
77
78	return (	2✔
79	<div className="flexbox center-aligned">
80	<CircleIcon className={status.signal} style={iconStyles.status} />
81	<div className={status.code >= 400 ? 'muted' : ''}>{status.code}</div>	2!
82	</div>
83	);
84	};
85
86	const columns = [	5✔
87	{ key: 'created_ts', title: 'Time', render: ({ entry }) => <Time value={entry.time} /> },	2✔
88	{ key: 'trigger', title: 'Event trigger', render: ({ entry }) => <div className="trigger-type">{triggerMap[entry.type] ?? entry.type}</div> },	2!
89	{ key: 'status', title: 'Status', render: ({ entry, webhook }) => <DeliveryStatus entry={entry} webhook={webhook} /> },	2✔
90	{
91	key: 'details',
92	title: 'Details',
93	render: ({ isExpanded }) => (isExpanded ? <ArrowDropUpIcon style={iconStyles.dropDown} /> : <ArrowDropDownIcon style={iconStyles.dropDown} />)	2!
94	}
95	];
96
97	const ListItem = ({ entry = {}, webhook }) => {	5!
98	const [isExpanded, setIsExpanded] = useState(false);	2✔
99	const { data = {} } = entry;	2!
100
101	return (	2✔
102	<Accordion square expanded={isExpanded}>
103	<AccordionSummary onClick={() => setIsExpanded(toggle)}>	×
104	{columns.map(({ key, render: Column }) => (
105	<Column key={key} entry={entry} isExpanded={isExpanded} webhook={webhook} />	8✔
106	))}
107	</AccordionSummary>
108	<AccordionDetails>
109	<code>{JSON.stringify(data)}</code>
110	</AccordionDetails>
111	</Accordion>
112	);
113	};
114
115	const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;	5✔
116	const WebhookActivity = ({ events = [], getWebhookEvents, eventTotal, webhook }) => {	5!
117	const { classes } = useStyles();	1✔
118	const [page, setPage] = useState(defaultPage);	1✔
119
120	useEffect(() => {	1✔
121	getWebhookEvents({ page, perPage: defaultPerPage });	1✔
122	}, [getWebhookEvents, page]);
123
124	return (	1✔
125	<div className={classes.activityList}>
126	{events.length ? (	1!
127	<>
128	<div className="header">
129	{columns.map(({ key, title }) => (
130	<div key={key}>{title}</div>	4✔
131	))}
132	</div>
133	<div className="body">
134	{events.map(entry => (
135	<ListItem key={entry.id} entry={entry} webhook={webhook} />	2✔
136	))}
137	{eventTotal > defaultPerPage && (	1!
138	<Pagination
139	className="margin-top-none"
140	count={eventTotal ? eventTotal : defaultPerPage}	×
141	showCountInfo={false}
142	rowsPerPageOptions={[defaultPerPage]}
143	page={page}
144	rowsPerPage={defaultPerPage}
145	onChangePage={setPage}
146	/>
147	)}
148	</div>
149	</>
150	) : (
151	<div className="margin-top-large flexbox centered disabled">No webhook activity yet.</div>
152	)}
153	</div>
154	);
155	};
156
157	export default WebhookActivity;

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