1350829378

Committed 27 Jun 2024 01:46PM UTC coverage: 83.494% (-16.5%) from 99.965%

Build # 1350829378

Build Type

Pull #4465

gitlab-ci

Committed by

mzedel

Commit Message

chore: test fixes

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #4465: MEN-7169 - feat: added multi sorting capabilities to devices view

Run Details

4506 of 6430 branches covered (70.08%)

81 of 100 new or added lines in 14 files covered. (81.0%)

1661 existing lines in 163 files now uncovered.

8574 of 10269 relevant lines covered (83.49%)

160.6 hits per line

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

86.96

/src/js/components/common/dialogs/deviceconnectiondialog.js

// Copyright 2019 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, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import docker from '../../../../assets/img/docker.png';
import raspberryPi4 from '../../../../assets/img/raspberrypi4.png';
import raspberryPi from '../../../../assets/img/raspberrypi.png';
import { setDeviceListState } from '../../../actions/deviceActions';
import { advanceOnboarding } from '../../../actions/onboardingActions';
import { saveUserSettings } from '../../../actions/userActions';
import { TIMEOUTS } from '../../../constants/appConstants';
import { DEVICE_STATES } from '../../../constants/deviceConstants';
import { onboardingSteps } from '../../../constants/onboardingConstants';
import { getDeviceCountsByStatus, getOnboardingState, getTenantCapabilities } from '../../../selectors';
import InfoText from '../../common/infotext';
import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
import DocsLink from '../docslink';
import Loader from '../loader.js';
import PhysicalDeviceOnboarding from './physicaldeviceonboarding';
import VirtualDeviceOnboarding from './virtualdeviceonboarding';

const useStyles = makeStyles()(theme => ({
  rpiQuickstart: {
    backgroundColor: theme.palette.background.lightgrey
  },
  virtualLogo: { height: 40, marginLeft: theme.spacing(2) }
}));

const DeviceConnectionExplainer = ({ hasMonitor, setOnDevice, setVirtualDevice }) => {
  const { classes } = useStyles();
  return (
    <>
      <p>
        You can connect almost any device and Linux OS with Mender, but to make things simple during evaluation we recommend you use a Raspberry Pi as a test
        device.
      </p>
      <div className={`padding-small padding-top-none rpi-quickstart ${classes.rpiQuickstart}`}>
        <h3>Raspberry Pi quick start</h3>
        <p>We&apos;ll walk you through the steps to connect a Raspberry Pi and deploy your first update with Mender.</p>
        <div className="flexbox column centered">
          <div className="flexbox centered os-list">
            {[raspberryPi, raspberryPi4].map((tile, index) => (
              <img key={`tile-${index}`} src={tile} />
            ))}
          </div>
          <Button variant="contained" color="secondary" onClick={() => setOnDevice(true)}>
            Get Started
          </Button>
        </div>
      </div>
      <div className="two-columns margin-top">
        <div className="padding-small padding-top-none">
          <div className="flexbox center-aligned">
            <h3>Use a virtual device</h3>
            <img src={docker} className={classes.virtualLogo} />
          </div>
          <p className="margin-top-none">Don&apos;t have a Raspberry Pi?</p>
          <p>You can use our Docker-run virtual device to go through the same tutorial.</p>
          {hasMonitor && (
            <InfoText className="slightly-smaller">
              If you want to evaluate our commercial components such as mender-monitor, please use a physical device instead as the virtual client does not
              support these components at this time.
            </InfoText>
          )}
          <a onClick={() => setVirtualDevice(true)}>Try a virtual device</a>
        </div>
        <div className="padding-small padding-top-none">
          <h3>Other devices</h3>
          <div>See the documentation to integrate the following with Mender:</div>
          <ul>
            {[
              { key: 'debian', target: 'operating-system-updates-debian-family', title: 'Debian family' },
              { key: 'yocto', target: 'operating-system-updates-yocto-project', title: 'Yocto OSes' }
            ].map(item => (
              <li key={item.key}>
                <DocsLink path={item.target} title={item.title} />
              </li>
            ))}
          </ul>
          Or visit {/* eslint-disable-next-line react/jsx-no-target-blank */}
          <a href="https://hub.mender.io/c/board-integrations" target="_blank" rel="noopener">
            Mender Hub
          </a>{' '}
          and search integrations for your device and OS.
        </div>
      </div>
      <MenderHelpTooltip id={HELPTOOLTIPS.deviceSupportTip.id} style={{ position: 'absolute', bottom: '2.5%', left: '88%' }} />
    </>
  );
};

export const DeviceConnectionDialog = ({ onCancel }) => {
  const [onDevice, setOnDevice] = useState(false);
  const [progress, setProgress] = useState(1);
  const [virtualDevice, setVirtualDevice] = useState(false);
  const { pending: pendingCount } = useSelector(getDeviceCountsByStatus);
  const [pendingDevicesCount] = useState(pendingCount);
  const [hasMoreDevices, setHasMoreDevices] = useState(false);
  const { hasMonitor } = useSelector(getTenantCapabilities);
  const { complete: onboardingComplete, deviceType: onboardingDeviceType } = useSelector(getOnboardingState);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  useEffect(() => {
    setHasMoreDevices(pendingCount > pendingDevicesCount);
  }, [pendingDevicesCount, pendingCount]);

  useEffect(() => {
    if ((virtualDevice || progress >= 2) && hasMoreDevices && !window.location.hash.includes('pending')) {
      dispatch(advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START));
      dispatch(setDeviceListState({ state: DEVICE_STATES.pending }));
      navigate('/devices/pending');
    }
    if (virtualDevice || progress >= 2) {
      dispatch(saveUserSettings({ onboarding: { deviceConnection: new Date().toISOString() } }));
    }
  }, [dispatch, hasMoreDevices, navigate, progress, virtualDevice]);

  const onBackClick = () => {
    let updatedProgress = progress - 1;
    if (!updatedProgress) {
      updatedProgress = 1;
      setOnDevice(false);
      setVirtualDevice(false);
    }
    setProgress(updatedProgress);
  };

  const onAdvance = () => {
    dispatch(advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START));
    setProgress(progress + 1);
  };

  let content = <DeviceConnectionExplainer hasMonitor={hasMonitor} setOnDevice={setOnDevice} setVirtualDevice={setVirtualDevice} />;
  if (onDevice) {
    content = <PhysicalDeviceOnboarding progress={progress} />;
  } else if (virtualDevice) {
    content = <VirtualDeviceOnboarding />;
  }

  if (hasMoreDevices && !onboardingComplete) {
    setTimeout(onCancel, TIMEOUTS.twoSeconds);
  }

  return (
    <Dialog open={true} PaperProps={{ sx: { maxWidth: '720px' } }}>
      <DialogTitle>Connecting a device</DialogTitle>
      <DialogContent className="onboard-dialog" style={{ margin: '0 30px' }}>
        {content}
      </DialogContent>
      <DialogActions>
        <Button onClick={onCancel}>Cancel</Button>
        <div style={{ flexGrow: 1 }} />
        {(onDevice || virtualDevice) && (
          <div>
            <Button onClick={onBackClick}>Back</Button>
            {progress < 2 && (!virtualDevice || progress < 1) ? (
              <Button variant="contained" disabled={!(virtualDevice || (onDevice && onboardingDeviceType))} onClick={onAdvance}>
                Next
              </Button>
            ) : (
              <Button
                variant="contained"
                disabled={!onboardingComplete}
                onClick={onCancel}
                endIcon={!onboardingComplete && <Loader show small table style={{ top: -24 }} />}
              >
                {onboardingComplete ? 'Close' : 'Waiting for device'}
              </Button>
            )}
          </div>
        )}
      </DialogActions>
    </Dialog>
  );
};

export default DeviceConnectionDialog;

1	// Copyright 2019 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, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16	import { useNavigate } from 'react-router-dom';
17
18	import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
19	import { makeStyles } from 'tss-react/mui';
20
21	import docker from '../../../../assets/img/docker.png';
22	import raspberryPi4 from '../../../../assets/img/raspberrypi4.png';
23	import raspberryPi from '../../../../assets/img/raspberrypi.png';
24	import { setDeviceListState } from '../../../actions/deviceActions';
25	import { advanceOnboarding } from '../../../actions/onboardingActions';
26	import { saveUserSettings } from '../../../actions/userActions';
27	import { TIMEOUTS } from '../../../constants/appConstants';
28	import { DEVICE_STATES } from '../../../constants/deviceConstants';
29	import { onboardingSteps } from '../../../constants/onboardingConstants';
30	import { getDeviceCountsByStatus, getOnboardingState, getTenantCapabilities } from '../../../selectors';
31	import InfoText from '../../common/infotext';
32	import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
33	import DocsLink from '../docslink';
34	import Loader from '../loader.js';
35	import PhysicalDeviceOnboarding from './physicaldeviceonboarding';
36	import VirtualDeviceOnboarding from './virtualdeviceonboarding';
37
38	const useStyles = makeStyles()(theme => ({	3✔
39	rpiQuickstart: {
40	backgroundColor: theme.palette.background.lightgrey
41	},
42	virtualLogo: { height: 40, marginLeft: theme.spacing(2) }
43	}));
44
45	const DeviceConnectionExplainer = ({ hasMonitor, setOnDevice, setVirtualDevice }) => {	2✔
46	const { classes } = useStyles();	3✔
47	return (	3✔
48	<>
49	<p>
50	You can connect almost any device and Linux OS with Mender, but to make things simple during evaluation we recommend you use a Raspberry Pi as a test
51	device.
52	</p>
53	<div className={`padding-small padding-top-none rpi-quickstart ${classes.rpiQuickstart}`}>
54	<h3>Raspberry Pi quick start</h3>
55	<p>We'll walk you through the steps to connect a Raspberry Pi and deploy your first update with Mender.</p>
56	<div className="flexbox column centered">
57	<div className="flexbox centered os-list">
58	{[raspberryPi, raspberryPi4].map((tile, index) => (
59	<img key={`tile-${index}`} src={tile} />	6✔
60	))}
61	</div>
62	<Button variant="contained" color="secondary" onClick={() => setOnDevice(true)}>	1✔
63	Get Started
64	</Button>
65	</div>
66	</div>
67	<div className="two-columns margin-top">
68	<div className="padding-small padding-top-none">
69	<div className="flexbox center-aligned">
70	<h3>Use a virtual device</h3>
71	<img src={docker} className={classes.virtualLogo} />
72	</div>
73	<p className="margin-top-none">Don't have a Raspberry Pi?</p>
74	<p>You can use our Docker-run virtual device to go through the same tutorial.</p>
75	{hasMonitor && (	3!
76	<InfoText className="slightly-smaller">
77	If you want to evaluate our commercial components such as mender-monitor, please use a physical device instead as the virtual client does not
78	support these components at this time.
79	</InfoText>
80	)}
81	<a onClick={() => setVirtualDevice(true)}>Try a virtual device</a>	1✔
82	</div>
83	<div className="padding-small padding-top-none">
84	<h3>Other devices</h3>
85	<div>See the documentation to integrate the following with Mender:</div>
86	<ul>
87	{[
88	{ key: 'debian', target: 'operating-system-updates-debian-family', title: 'Debian family' },
89	{ key: 'yocto', target: 'operating-system-updates-yocto-project', title: 'Yocto OSes' }
90	].map(item => (
91	<li key={item.key}>	6✔
92	<DocsLink path={item.target} title={item.title} />
93	</li>
94	))}
95	</ul>
96	Or visit {/* eslint-disable-next-line react/jsx-no-target-blank */}
97	<a href="https://hub.mender.io/c/board-integrations" target="_blank" rel="noopener">
98	Mender Hub
99	</a>{' '}
100	and search integrations for your device and OS.
101	</div>
102	</div>
103	<MenderHelpTooltip id={HELPTOOLTIPS.deviceSupportTip.id} style={{ position: 'absolute', bottom: '2.5%', left: '88%' }} />
104	</>
105	);
106	};
107
108	export const DeviceConnectionDialog = ({ onCancel }) => {	2✔
109	const [onDevice, setOnDevice] = useState(false);	9✔
110	const [progress, setProgress] = useState(1);	9✔
111	const [virtualDevice, setVirtualDevice] = useState(false);	9✔
112	const { pending: pendingCount } = useSelector(getDeviceCountsByStatus);	9✔
113	const [pendingDevicesCount] = useState(pendingCount);	9✔
114	const [hasMoreDevices, setHasMoreDevices] = useState(false);	9✔
115	const { hasMonitor } = useSelector(getTenantCapabilities);	9✔
116	const { complete: onboardingComplete, deviceType: onboardingDeviceType } = useSelector(getOnboardingState);	9✔
117	const dispatch = useDispatch();	9✔
118	const navigate = useNavigate();	9✔
119
120	useEffect(() => {	9✔
121	setHasMoreDevices(pendingCount > pendingDevicesCount);	2✔
122	}, [pendingDevicesCount, pendingCount]);
123
124	useEffect(() => {	9✔
125	if ((virtualDevice \|\| progress >= 2) && hasMoreDevices && !window.location.hash.includes('pending')) {	3!
UNCOV 126	dispatch(advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START));	×
UNCOV 127	dispatch(setDeviceListState({ state: DEVICE_STATES.pending }));	×
UNCOV 128	navigate('/devices/pending');	×
129	}
130	if (virtualDevice \|\| progress >= 2) {	3✔
131	dispatch(saveUserSettings({ onboarding: { deviceConnection: new Date().toISOString() } }));	1✔
132	}
133	}, [dispatch, hasMoreDevices, navigate, progress, virtualDevice]);
134
135	const onBackClick = () => {	9✔
136	let updatedProgress = progress - 1;	1✔
137	if (!updatedProgress) {	1!
138	updatedProgress = 1;	1✔
139	setOnDevice(false);	1✔
140	setVirtualDevice(false);	1✔
141	}
142	setProgress(updatedProgress);	1✔
143	};
144
145	const onAdvance = () => {	9✔
UNCOV 146	dispatch(advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START));	×
UNCOV 147	setProgress(progress + 1);	×
148	};
149
150	let content = <DeviceConnectionExplainer hasMonitor={hasMonitor} setOnDevice={setOnDevice} setVirtualDevice={setVirtualDevice} />;	9✔
151	if (onDevice) {	9✔
152	content = <PhysicalDeviceOnboarding progress={progress} />;	3✔
153	} else if (virtualDevice) {	6✔
154	content = <VirtualDeviceOnboarding />;	3✔
155	}
156
157	if (hasMoreDevices && !onboardingComplete) {	9!
UNCOV 158	setTimeout(onCancel, TIMEOUTS.twoSeconds);	×
159	}
160
161	return (	9✔
162	<Dialog open={true} PaperProps={{ sx: { maxWidth: '720px' } }}>
163	<DialogTitle>Connecting a device</DialogTitle>
164	<DialogContent className="onboard-dialog" style={{ margin: '0 30px' }}>
165	{content}
166	</DialogContent>
167	<DialogActions>
168	<Button onClick={onCancel}>Cancel</Button>
169	<div style={{ flexGrow: 1 }} />
170	{(onDevice \|\| virtualDevice) && (	21✔
171	<div>
172	<Button onClick={onBackClick}>Back</Button>
173	{progress < 2 && (!virtualDevice \|\| progress < 1) ? (	21✔
174	<Button variant="contained" disabled={!(virtualDevice \|\| (onDevice && onboardingDeviceType))} onClick={onAdvance}>	9✔
175	Next
176	</Button>
177	) : (
178	<Button
179	variant="contained"
180	disabled={!onboardingComplete}
181	onClick={onCancel}
182	endIcon={!onboardingComplete && <Loader show small table style={{ top: -24 }} />}	6✔
183	>
184	{onboardingComplete ? 'Close' : 'Waiting for device'}	3!
185	</Button>
186	)}
187	</div>
188	)}
189	</DialogActions>
190	</Dialog>
191	);
192	};
193
194	export default DeviceConnectionDialog;

mendersoftware / gui / 1350829378

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