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

73.44

/src/js/components/dashboard/software-distribution.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, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { BarChart as BarChartIcon } from '@mui/icons-material';

import {
  defaultReportType,
  defaultReports,
  deriveReportsData,
  getDeviceAttributes,
  getDevicesInBounds,
  getGroupDevices,
  getReportingLimits,
  getReportsData
} from '../../actions/deviceActions';
import { saveUserSettings } from '../../actions/userActions';
import { rootfsImageVersion, softwareTitleMap } from '../../constants/releaseConstants';
import { isEmpty } from '../../helpers';
import {
  getAcceptedDevices,
  getAttributesList,
  getDeviceReports,
  getDeviceReportsForUser,
  getDevicesById,
  getFeatures,
  getGroupNames,
  getGroupsByIdWithoutUngrouped,
  getIsEnterprise
} from '../../selectors';
import { extractSoftwareInformation } from '../devices/device-details/installedsoftware';
import ChartAdditionWidget from './widgets/chart-addition';
import DistributionReport from './widgets/distribution';
import MapWrapper from './widgets/mapwidget';

const reportTypes = {
  distribution: DistributionReport
};

const getLayerKey = ({ title, key }, parent) => `${parent.length ? `${parent}.` : parent}${key.length <= title.length ? key : title}`;

const generateLayer = (softwareLayer, parentKey = '', nestingLevel = 0) => {
  const { children, key, title } = softwareLayer;
  const suffix = title === key ? '.version' : '';
  const layerKey = getLayerKey(softwareLayer, parentKey);
  const layerTitle = `${layerKey}${suffix}`;
  let headerItems = [{ title, nestingLevel, value: layerKey }];
  if (softwareTitleMap[layerTitle]) {
    headerItems = [
      { subheader: title, nestingLevel, value: `${layerTitle}-subheader` },
      { title: softwareTitleMap[layerTitle].title, nestingLevel: nestingLevel + 1, value: layerTitle }
    ];
  } else if (!isEmpty(children)) {
    headerItems = [{ subheader: title, nestingLevel, value: `${layerTitle}-subheader` }];
  }
  return Object.values(softwareLayer.children).reduce((accu, childLayer) => {
    const layerData = generateLayer(childLayer, getLayerKey(softwareLayer, parentKey), nestingLevel + 1);
    accu.push(...layerData);
    return accu;
  }, headerItems);
};

const listSoftware = attributes => {
  const enhancedAttributes = attributes.reduce((accu, attribute) => ({ ...accu, [attribute]: attribute }), {});
  const softwareTree = extractSoftwareInformation(enhancedAttributes, false);
  const { rootFs, remainder } = Object.values(softwareTree).reduce(
    (accu, layer) => {
      if (layer.key.startsWith('rootfs-image')) {
        return { ...accu, rootFs: layer };
      }
      accu.remainder.push(layer);
      return accu;
    },
    { rootFs: undefined, remainder: [] }
  );

  return (rootFs ? [rootFs, ...remainder] : remainder).flatMap(softwareLayer => generateLayer(softwareLayer));
};

export const SoftwareDistribution = () => {
  const dispatch = useDispatch();

  const reports = useSelector(getDeviceReportsForUser);
  const groups = useSelector(getGroupsByIdWithoutUngrouped);
  const { hasReporting } = useSelector(getFeatures);
  const attributes = useSelector(getAttributesList);
  const { total } = useSelector(getAcceptedDevices);
  const hasDevices = !!total;
  const isEnterprise = useSelector(getIsEnterprise);
  const reportsData = useSelector(getDeviceReports);
  const groupNames = useSelector(getGroupNames);
  const devicesById = useSelector(getDevicesById);

  useEffect(() => {
    dispatch(getDeviceAttributes());
    if (hasReporting) {
      dispatch(getReportingLimits());
    }
  }, [dispatch, hasReporting]);

  useEffect(() => {
    if (hasReporting) {
      dispatch(getReportsData());
      return;
    }
    dispatch(deriveReportsData());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, hasReporting, JSON.stringify(reports)]);

  const addCurrentSelection = selection => {
    const newReports = [...reports, { ...defaultReports[0], ...selection }];
    dispatch(saveUserSettings({ reports: newReports }));
  };

  const onSaveChangedReport = (change, index) => {
    let newReports = [...reports];
    newReports.splice(index, 1, change);
    dispatch(saveUserSettings({ reports: newReports }));
  };

  const removeReport = removedReport => dispatch(saveUserSettings({ reports: reports.filter(report => report !== removedReport) }));

  const onGetGroupDevices = useCallback((...args) => dispatch(getGroupDevices(...args)), [dispatch]);
  const onGetDevicesInBounds = useCallback((...args) => dispatch(getDevicesInBounds(...args)), [dispatch]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const software = useMemo(() => listSoftware(hasReporting ? attributes : [rootfsImageVersion]), [JSON.stringify(attributes), hasReporting]);

  if (!isEnterprise) {
    return (
      <div className="dashboard margin-bottom-large">
        <ChartAdditionWidget groups={groups} onAdditionClick={addCurrentSelection} software={software} />
      </div>
    );
  }

  return hasDevices ? (
    <div className="dashboard margin-bottom-large">
      {hasReporting && (
        <MapWrapper
          groups={groups}
          groupNames={groupNames}
          devicesById={devicesById}
          getGroupDevices={onGetGroupDevices}
          getDevicesInBounds={onGetDevicesInBounds}
        />
      )}
      {reports.map((report, index) => {
        const Component = reportTypes[report.type || defaultReportType];
        return (
          <Component
            key={`report-${report.group}-${index}`}
            data={reportsData[index]}
            getGroupDevices={onGetGroupDevices}
            groups={groups}
            onClick={() => removeReport(report)}
            onSave={change => onSaveChangedReport(change, index)}
            selection={report}
            software={software}
          />
        );
      })}
      <ChartAdditionWidget groups={groups} onAdditionClick={addCurrentSelection} software={software} />
    </div>
  ) : (
    <div className="dashboard-placeholder margin-top-large">
      <BarChartIcon style={{ transform: 'scale(5)' }} />
      <p className="margin-top-large">Software distribution charts will appear here once you connected a device. </p>
    </div>
  );
};

export default SoftwareDistribution;

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, useMemo } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	import { BarChart as BarChartIcon } from '@mui/icons-material';
18
19	import {
20	defaultReportType,
21	defaultReports,
22	deriveReportsData,
23	getDeviceAttributes,
24	getDevicesInBounds,
25	getGroupDevices,
26	getReportingLimits,
27	getReportsData
28	} from '../../actions/deviceActions';
29	import { saveUserSettings } from '../../actions/userActions';
30	import { rootfsImageVersion, softwareTitleMap } from '../../constants/releaseConstants';
31	import { isEmpty } from '../../helpers';
32	import {
33	getAcceptedDevices,
34	getAttributesList,
35	getDeviceReports,
36	getDeviceReportsForUser,
37	getDevicesById,
38	getFeatures,
39	getGroupNames,
40	getGroupsByIdWithoutUngrouped,
41	getIsEnterprise
42	} from '../../selectors';
43	import { extractSoftwareInformation } from '../devices/device-details/installedsoftware';
44	import ChartAdditionWidget from './widgets/chart-addition';
45	import DistributionReport from './widgets/distribution';
46	import MapWrapper from './widgets/mapwidget';
47
48	const reportTypes = {	4✔
49	distribution: DistributionReport
50	};
51
52	const getLayerKey = ({ title, key }, parent) => `${parent.length ? `${parent}.` : parent}${key.length <= title.length ? key : title}`;	16!
53
54	const generateLayer = (softwareLayer, parentKey = '', nestingLevel = 0) => {	4✔
55	const { children, key, title } = softwareLayer;	16✔
56	const suffix = title === key ? '.version' : '';	16!
57	const layerKey = getLayerKey(softwareLayer, parentKey);	16✔
58	const layerTitle = `${layerKey}${suffix}`;	16✔
59	let headerItems = [{ title, nestingLevel, value: layerKey }];	16✔
60	if (softwareTitleMap[layerTitle]) {	16!
61	headerItems = [	16✔
62	{ subheader: title, nestingLevel, value: `${layerTitle}-subheader` },
63	{ title: softwareTitleMap[layerTitle].title, nestingLevel: nestingLevel + 1, value: layerTitle }
64	];
65	} else if (!isEmpty(children)) {	×
66	headerItems = [{ subheader: title, nestingLevel, value: `${layerTitle}-subheader` }];	×
67	}
68	return Object.values(softwareLayer.children).reduce((accu, childLayer) => {	16✔
69	const layerData = generateLayer(childLayer, getLayerKey(softwareLayer, parentKey), nestingLevel + 1);	×
70	accu.push(...layerData);	×
71	return accu;	×
72	}, headerItems);
73	};
74
75	const listSoftware = attributes => {	4✔
76	const enhancedAttributes = attributes.reduce((accu, attribute) => ({ ...accu, [attribute]: attribute }), {});	16✔
77	const softwareTree = extractSoftwareInformation(enhancedAttributes, false);	16✔
78	const { rootFs, remainder } = Object.values(softwareTree).reduce(	16✔
79	(accu, layer) => {
80	if (layer.key.startsWith('rootfs-image')) {	16!
81	return { ...accu, rootFs: layer };	16✔
82	}
83	accu.remainder.push(layer);	×
84	return accu;	×
85	},
86	{ rootFs: undefined, remainder: [] }
87	);
88
89	return (rootFs ? [rootFs, ...remainder] : remainder).flatMap(softwareLayer => generateLayer(softwareLayer));	16!
90	};
91
92	export const SoftwareDistribution = () => {	4✔
93	const dispatch = useDispatch();	1,053✔
94
95	const reports = useSelector(getDeviceReportsForUser);	1,053✔
96	const groups = useSelector(getGroupsByIdWithoutUngrouped);	1,053✔
97	const { hasReporting } = useSelector(getFeatures);	1,053✔
98	const attributes = useSelector(getAttributesList);	1,053✔
99	const { total } = useSelector(getAcceptedDevices);	1,053✔
100	const hasDevices = !!total;	1,053✔
101	const isEnterprise = useSelector(getIsEnterprise);	1,053✔
102	const reportsData = useSelector(getDeviceReports);	1,053✔
103	const groupNames = useSelector(getGroupNames);	1,053✔
104	const devicesById = useSelector(getDevicesById);	1,053✔
105
106	useEffect(() => {	1,053✔
107	dispatch(getDeviceAttributes());	8✔
108	if (hasReporting) {	8!
109	dispatch(getReportingLimits());	×
110	}
111	}, [dispatch, hasReporting]);
112
113	useEffect(() => {	1,053✔
114	if (hasReporting) {	8!
115	dispatch(getReportsData());	×
116	return;	×
117	}
118	dispatch(deriveReportsData());	8✔
119	// eslint-disable-next-line react-hooks/exhaustive-deps
120	}, [dispatch, hasReporting, JSON.stringify(reports)]);
121
122	const addCurrentSelection = selection => {	1,053✔
123	const newReports = [...reports, { ...defaultReports[0], ...selection }];	×
124	dispatch(saveUserSettings({ reports: newReports }));	×
125	};
126
127	const onSaveChangedReport = (change, index) => {	1,053✔
128	let newReports = [...reports];	×
129	newReports.splice(index, 1, change);	×
130	dispatch(saveUserSettings({ reports: newReports }));	×
131	};
132
133	const removeReport = removedReport => dispatch(saveUserSettings({ reports: reports.filter(report => report !== removedReport) }));	1,053✔
134
135	const onGetGroupDevices = useCallback((...args) => dispatch(getGroupDevices(...args)), [dispatch]);	1,053✔
136	const onGetDevicesInBounds = useCallback((...args) => dispatch(getDevicesInBounds(...args)), [dispatch]);	1,053✔
137
138	// eslint-disable-next-line react-hooks/exhaustive-deps
139	const software = useMemo(() => listSoftware(hasReporting ? attributes : [rootfsImageVersion]), [JSON.stringify(attributes), hasReporting]);	1,053!
140
141	if (!isEnterprise) {	1,053✔
142	return (	1,042✔
143	<div className="dashboard margin-bottom-large">
144	<ChartAdditionWidget groups={groups} onAdditionClick={addCurrentSelection} software={software} />
145	</div>
146	);
147	}
148
149	return hasDevices ? (	11!
150	<div className="dashboard margin-bottom-large">
151	{hasReporting && (	11!
152	<MapWrapper
153	groups={groups}
154	groupNames={groupNames}
155	devicesById={devicesById}
156	getGroupDevices={onGetGroupDevices}
157	getDevicesInBounds={onGetDevicesInBounds}
158	/>
159	)}
160	{reports.map((report, index) => {
161	const Component = reportTypes[report.type \|\| defaultReportType];	11!
162	return (	11✔
163	<Component
164	key={`report-${report.group}-${index}`}
165	data={reportsData[index]}
166	getGroupDevices={onGetGroupDevices}
167	groups={groups}
168	onClick={() => removeReport(report)}	×
169	onSave={change => onSaveChangedReport(change, index)}	×
170	selection={report}
171	software={software}
172	/>
173	);
174	})}
175	<ChartAdditionWidget groups={groups} onAdditionClick={addCurrentSelection} software={software} />
176	</div>
177	) : (
178	<div className="dashboard-placeholder margin-top-large">
179	<BarChartIcon style={{ transform: 'scale(5)' }} />
180	<p className="margin-top-large">Software distribution charts will appear here once you connected a device. </p>
181	</div>
182	);
183	};
184
185	export default SoftwareDistribution;

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