1113439055

Committed 19 Dec 2023 09:01PM UTC coverage: 82.752% (-17.2%) from 99.964%

Build # 1113439055

Build Type

Pull #4258

gitlab-ci

Committed by

mender-test-bot

Commit Message

chore: Types update

Signed-off-by: Mender Test Bot <mender@northern.tech>

Pull Request Pull Request #4258: chore: Types update

Run Details

4326 of 6319 branches covered (0.0%)

8348 of 10088 relevant lines covered (82.75%)

189.39 hits per line

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

82.54

/src/js/components/devices/device-details/connection.js

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

import { InfoOutlined as InfoIcon, Launch as LaunchIcon } from '@mui/icons-material';
import { Button, Typography } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { setSnackbar } from '../../../actions/appActions';
import { getDeviceFileDownloadLink } from '../../../actions/deviceActions';
import { BEGINNING_OF_TIME, BENEFITS, TIMEOUTS } from '../../../constants/appConstants';
import { ALL_DEVICES, DEVICE_CONNECT_STATES } from '../../../constants/deviceConstants';
import { AUDIT_LOGS_TYPES } from '../../../constants/organizationConstants';
import { checkPermissionsObject, uiPermissionsById } from '../../../constants/userConstants';
import { createDownload } from '../../../helpers';
import { getCurrentSession, getTenantCapabilities, getUserCapabilities } from '../../../selectors';
import { formatAuditlogs } from '../../../utils/locationutils';
import DocsLink from '../../common/docslink';
import EnterpriseNotification from '../../common/enterpriseNotification';
import Loader from '../../common/loader';
import MenderTooltip from '../../common/mendertooltip';
import Time from '../../common/time';
import FileTransfer from '../troubleshoot/filetransfer';
import TroubleshootContent from '../troubleshoot/terminal-wrapper';
import DeviceDataCollapse from './devicedatacollapse';

const useStyles = makeStyles()(theme => ({
  buttonStyle: { textTransform: 'none', textAlign: 'left' },
  connectionIcon: { marginRight: theme.spacing() },
  content: { maxWidth: 1280 },
  title: { marginRight: theme.spacing(0.5) },
  troubleshootButton: { marginRight: theme.spacing(2) }
}));

export const PortForwardLink = () => (
  <MenderTooltip
    arrow
    title={
      <div style={{ whiteSpace: 'normal' }}>
        <h3>Port forwarding</h3>
        <p>Port forwarding allows you to troubleshoot or use services on or via the device, without opening any ports on the device itself.</p>
        <p>
          To enable port forwarding you will need to install and configure the necessary software on the device and your workstation. Follow the link to learn
          more.
        </p>
      </div>
    }
  >
    <DocsLink className="flexbox centered margin-left" path="add-ons/port-forward">
      Enable port forwarding
      <LaunchIcon className="margin-left-small" fontSize="small" />
    </DocsLink>
  </MenderTooltip>
);

export const DeviceConnectionNote = ({ children }) => {
  const { classes } = useStyles();
  return (
    <div className="flexbox muted">
      <InfoIcon className={classes.connectionIcon} fontSize="small" />
      <Typography className={classes.buttonStyle} variant="body1">
        {children}
      </Typography>
    </div>
  );
};

export const DeviceConnectionMissingNote = () => (
  <DeviceConnectionNote>
    The troubleshoot add-on does not seem to be enabled on this device.
    <br />
    Please <DocsLink path="add-ons/remote-terminal" title="see the documentation" /> for a description on how it works and how to enable it.
  </DeviceConnectionNote>
);

export const DeviceDisconnectedNote = ({ lastConnectionTs }) => (
  <DeviceConnectionNote>
    The troubleshoot add-on is not currently connected on this device, it was last connected on <Time value={lastConnectionTs} />.
    <br />
    Please <DocsLink path="add-ons/remote-terminal" title="see the documentation" /> for more information.
  </DeviceConnectionNote>
);

export const TroubleshootButton = ({ disabled, item, onClick }) => {
  const { classes } = useStyles();
  return (
    <Button className={classes.troubleshootButton} onClick={() => onClick(item.key)} disabled={disabled} startIcon={item.icon}>
      <Typography className={classes.buttonStyle} variant="subtitle2">
        {item.title}
      </Typography>
    </Button>
  );
};

const deviceAuditlogType = AUDIT_LOGS_TYPES.find(type => type.value === 'device');

const tabs = {
  terminal: {
    title: 'Remote terminal',
    value: 'terminal',
    canShow: ({ canTroubleshoot, canWriteDevices, groupsPermissions }, { group }) =>
      (canTroubleshoot && canWriteDevices) || checkPermissionsObject(groupsPermissions, uiPermissionsById.connect.value, group, ALL_DEVICES),
    Component: TroubleshootContent
  },
  transfer: { title: 'File transfer', value: 'transfer', canShow: ({ canTroubleshoot }) => canTroubleshoot, Component: FileTransfer }
};

export const DeviceConnection = ({ className = '', device }) => {
  const [socketClosed, setSocketClosed] = useState();
  const [availableTabs, setAvailableTabs] = useState(Object.values(tabs));
  const [downloadPath, setDownloadPath] = useState('');
  const [file, setFile] = useState();
  const [socketInitialized, setSocketInitialized] = useState(undefined);
  const [uploadPath, setUploadPath] = useState('');
  const closeTimer = useRef();
  const initTimer = useRef();

  const userCapabilities = useSelector(getUserCapabilities);
  const { canAuditlog, canTroubleshoot } = userCapabilities;
  const { hasAuditlogs } = useSelector(getTenantCapabilities);
  const { token } = useSelector(getCurrentSession);
  const { classes } = useStyles();
  const { connect_status, connect_updated_ts, isOffline } = device;
  const [connectionStatus, setConnectionStatus] = useState(connect_status);

  const dispatch = useDispatch();
  const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);

  useEffect(() => {
    if (!socketClosed) {
      return;
    }
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setSocketClosed(false), TIMEOUTS.fiveSeconds);
  }, [socketClosed]);

  useEffect(() => {
    setConnectionStatus(connect_status);
    clearTimeout(initTimer.current);
    if (connectionStatus) {
      return;
    }
    initTimer.current = setTimeout(() => {
      setConnectionStatus(!connect_status || isOffline ? DEVICE_CONNECT_STATES.unknown : connect_status);
    }, TIMEOUTS.fiveSeconds);
    return () => clearTimeout(initTimer.current);
  }, [connect_status, connectionStatus, device.id, isOffline]);

  useEffect(() => {
    const allowedTabs = Object.values(tabs).reduce((accu, tab) => {
      if (tab.canShow(userCapabilities, device) && connectionStatus === DEVICE_CONNECT_STATES.connected) {
        accu.push(tab);
      }
      return accu;
    }, []);
    setAvailableTabs(allowedTabs);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [connectionStatus, JSON.stringify(device), JSON.stringify(userCapabilities)]);

  const onDownloadClick = useCallback(
    path => {
      setDownloadPath(path);
      dispatch(setSnackbar('Downloading file'));
      dispatch(getDeviceFileDownloadLink(device.id, path)).then(address => {
        const filename = path.substring(path.lastIndexOf('/') + 1) || 'file';
        createDownload(address, filename, token);
      });
    },
    [dispatch, device.id, token]
  );

  return (
    <DeviceDataCollapse
      isAddOn
      title={
        <div className="flexbox center-aligned">
          <h4>Troubleshooting</h4>
          <div className={`flexbox ${className}`}>
            {connectionStatus !== DEVICE_CONNECT_STATES.unknown && canTroubleshoot && <PortForwardLink />}
            {canAuditlog && hasAuditlogs && (
              <Link
                className="flexbox center-aligned margin-left"
                to={`/auditlog?${formatAuditlogs({ pageState: { type: deviceAuditlogType, detail: device.id, startDate: BEGINNING_OF_TIME } }, {})}`}
              >
                List all log entries for this device
              </Link>
            )}
          </div>
          <EnterpriseNotification className="margin-left-small" id={BENEFITS.deviceTroubleshoot.id} />
        </div>
      }
    >
      <div className={`flexbox column ${classes.content}`}>
        {!connectionStatus && (
          <div className="flexbox centered">
            <Loader show />
          </div>
        )}
        {connectionStatus === DEVICE_CONNECT_STATES.unknown && <DeviceConnectionMissingNote />}
        {connectionStatus === DEVICE_CONNECT_STATES.disconnected && <DeviceDisconnectedNote lastConnectionTs={connect_updated_ts} />}
        {availableTabs.map(({ Component, title, value }) => (
          <div key={value}>
            <h4 className="margin-top-large">{title}</h4>
            <Component
              device={device}
              downloadPath={downloadPath}
              file={file}
              onDownload={onDownloadClick}
              setDownloadPath={setDownloadPath}
              setFile={setFile}
              setSnackbar={dispatchedSetSnackbar}
              setSocketClosed={setSocketClosed}
              setSocketInitialized={setSocketInitialized}
              setUploadPath={setUploadPath}
              socketInitialized={socketInitialized}
              uploadPath={uploadPath}
              userCapabilities={userCapabilities}
            />
          </div>
        ))}
      </div>
    </DeviceDataCollapse>
  );
};

export default DeviceConnection;

1	// Copyright 2021 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 { useDispatch, useSelector } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import { InfoOutlined as InfoIcon, Launch as LaunchIcon } from '@mui/icons-material';
19	import { Button, Typography } from '@mui/material';
20	import { makeStyles } from 'tss-react/mui';
21
22	import { setSnackbar } from '../../../actions/appActions';
23	import { getDeviceFileDownloadLink } from '../../../actions/deviceActions';
24	import { BEGINNING_OF_TIME, BENEFITS, TIMEOUTS } from '../../../constants/appConstants';
25	import { ALL_DEVICES, DEVICE_CONNECT_STATES } from '../../../constants/deviceConstants';
26	import { AUDIT_LOGS_TYPES } from '../../../constants/organizationConstants';
27	import { checkPermissionsObject, uiPermissionsById } from '../../../constants/userConstants';
28	import { createDownload } from '../../../helpers';
29	import { getCurrentSession, getTenantCapabilities, getUserCapabilities } from '../../../selectors';
30	import { formatAuditlogs } from '../../../utils/locationutils';
31	import DocsLink from '../../common/docslink';
32	import EnterpriseNotification from '../../common/enterpriseNotification';
33	import Loader from '../../common/loader';
34	import MenderTooltip from '../../common/mendertooltip';
35	import Time from '../../common/time';
36	import FileTransfer from '../troubleshoot/filetransfer';
37	import TroubleshootContent from '../troubleshoot/terminal-wrapper';
38	import DeviceDataCollapse from './devicedatacollapse';
39
40	const useStyles = makeStyles()(theme => ({	10✔
41	buttonStyle: { textTransform: 'none', textAlign: 'left' },
42	connectionIcon: { marginRight: theme.spacing() },
43	content: { maxWidth: 1280 },
44	title: { marginRight: theme.spacing(0.5) },
45	troubleshootButton: { marginRight: theme.spacing(2) }
46	}));
47
48	export const PortForwardLink = () => (	10✔
49	<MenderTooltip	7✔
50	arrow
51	title={
52	<div style={{ whiteSpace: 'normal' }}>
53	<h3>Port forwarding</h3>
54	<p>Port forwarding allows you to troubleshoot or use services on or via the device, without opening any ports on the device itself.</p>
55	<p>
56	To enable port forwarding you will need to install and configure the necessary software on the device and your workstation. Follow the link to learn
57	more.
58	</p>
59	</div>
60	}
61	>
62	<DocsLink className="flexbox centered margin-left" path="add-ons/port-forward">
63	Enable port forwarding
64	<LaunchIcon className="margin-left-small" fontSize="small" />
65	</DocsLink>
66	</MenderTooltip>
67	);
68
69	export const DeviceConnectionNote = ({ children }) => {	10✔
70	const { classes } = useStyles();	5✔
71	return (	5✔
72	<div className="flexbox muted">
73	<InfoIcon className={classes.connectionIcon} fontSize="small" />
74	<Typography className={classes.buttonStyle} variant="body1">
75	{children}
76	</Typography>
77	</div>
78	);
79	};
80
81	export const DeviceConnectionMissingNote = () => (	10✔
82	<DeviceConnectionNote>	1✔
83	The troubleshoot add-on does not seem to be enabled on this device.
84	<br />
85	Please <DocsLink path="add-ons/remote-terminal" title="see the documentation" /> for a description on how it works and how to enable it.
86	</DeviceConnectionNote>
87	);
88
89	export const DeviceDisconnectedNote = ({ lastConnectionTs }) => (	10✔
90	<DeviceConnectionNote>	3✔
91	The troubleshoot add-on is not currently connected on this device, it was last connected on <Time value={lastConnectionTs} />.
92	<br />
93	Please <DocsLink path="add-ons/remote-terminal" title="see the documentation" /> for more information.
94	</DeviceConnectionNote>
95	);
96
97	export const TroubleshootButton = ({ disabled, item, onClick }) => {	10✔
98	const { classes } = useStyles();	×
99	return (	×
100	<Button className={classes.troubleshootButton} onClick={() => onClick(item.key)} disabled={disabled} startIcon={item.icon}>	×
101	<Typography className={classes.buttonStyle} variant="subtitle2">
102	{item.title}
103	</Typography>
104	</Button>
105	);
106	};
107
108	const deviceAuditlogType = AUDIT_LOGS_TYPES.find(type => type.value === 'device');	30✔
109
110	const tabs = {	10✔
111	terminal: {
112	title: 'Remote terminal',
113	value: 'terminal',
114	canShow: ({ canTroubleshoot, canWriteDevices, groupsPermissions }, { group }) =>
115	(canTroubleshoot && canWriteDevices) \|\| checkPermissionsObject(groupsPermissions, uiPermissionsById.connect.value, group, ALL_DEVICES),	3!
116	Component: TroubleshootContent
117	},
118	transfer: { title: 'File transfer', value: 'transfer', canShow: ({ canTroubleshoot }) => canTroubleshoot, Component: FileTransfer }	3✔
119	};
120
121	export const DeviceConnection = ({ className = '', device }) => {	10✔
122	const [socketClosed, setSocketClosed] = useState();	6✔
123	const [availableTabs, setAvailableTabs] = useState(Object.values(tabs));	6✔
124	const [downloadPath, setDownloadPath] = useState('');	6✔
125	const [file, setFile] = useState();	6✔
126	const [socketInitialized, setSocketInitialized] = useState(undefined);	6✔
127	const [uploadPath, setUploadPath] = useState('');	6✔
128	const closeTimer = useRef();	6✔
129	const initTimer = useRef();	6✔
130
131	const userCapabilities = useSelector(getUserCapabilities);	6✔
132	const { canAuditlog, canTroubleshoot } = userCapabilities;	6✔
133	const { hasAuditlogs } = useSelector(getTenantCapabilities);	6✔
134	const { token } = useSelector(getCurrentSession);	6✔
135	const { classes } = useStyles();	6✔
136	const { connect_status, connect_updated_ts, isOffline } = device;	6✔
137	const [connectionStatus, setConnectionStatus] = useState(connect_status);	6✔
138
139	const dispatch = useDispatch();	6✔
140	const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);	6✔
141
142	useEffect(() => {	6✔
143	if (!socketClosed) {	3!
144	return;	3✔
145	}
146	clearTimeout(closeTimer.current);	×
147	closeTimer.current = setTimeout(() => setSocketClosed(false), TIMEOUTS.fiveSeconds);	×
148	}, [socketClosed]);
149
150	useEffect(() => {	6✔
151	setConnectionStatus(connect_status);	3✔
152	clearTimeout(initTimer.current);	3✔
153	if (connectionStatus) {	3✔
154	return;	2✔
155	}
156	initTimer.current = setTimeout(() => {	1✔
157	setConnectionStatus(!connect_status \|\| isOffline ? DEVICE_CONNECT_STATES.unknown : connect_status);	×
158	}, TIMEOUTS.fiveSeconds);
159	return () => clearTimeout(initTimer.current);	1✔
160	}, [connect_status, connectionStatus, device.id, isOffline]);
161
162	useEffect(() => {	6✔
163	const allowedTabs = Object.values(tabs).reduce((accu, tab) => {	3✔
164	if (tab.canShow(userCapabilities, device) && connectionStatus === DEVICE_CONNECT_STATES.connected) {	6✔
165	accu.push(tab);	2✔
166	}
167	return accu;	6✔
168	}, []);
169	setAvailableTabs(allowedTabs);	3✔
170	// eslint-disable-next-line react-hooks/exhaustive-deps
171	}, [connectionStatus, JSON.stringify(device), JSON.stringify(userCapabilities)]);
172
173	const onDownloadClick = useCallback(	6✔
174	path => {
175	setDownloadPath(path);	×
176	dispatch(setSnackbar('Downloading file'));	×
177	dispatch(getDeviceFileDownloadLink(device.id, path)).then(address => {	×
178	const filename = path.substring(path.lastIndexOf('/') + 1) \|\| 'file';	×
179	createDownload(address, filename, token);	×
180	});
181	},
182	[dispatch, device.id, token]
183	);
184
185	return (	6✔
186	<DeviceDataCollapse
187	isAddOn
188	title={
189	<div className="flexbox center-aligned">
190	<h4>Troubleshooting</h4>
191	<div className={`flexbox ${className}`}>
192	{connectionStatus !== DEVICE_CONNECT_STATES.unknown && canTroubleshoot && <PortForwardLink />}	18✔
193	{canAuditlog && hasAuditlogs && (	12!
194	<Link
195	className="flexbox center-aligned margin-left"
196	to={`/auditlog?${formatAuditlogs({ pageState: { type: deviceAuditlogType, detail: device.id, startDate: BEGINNING_OF_TIME } }, {})}`}
197	>
198	List all log entries for this device
199	</Link>
200	)}
201	</div>
202	<EnterpriseNotification className="margin-left-small" id={BENEFITS.deviceTroubleshoot.id} />
203	</div>
204	}
205	>
206	<div className={`flexbox column ${classes.content}`}>
207	{!connectionStatus && (	8✔
208	<div className="flexbox centered">
209	<Loader show />
210	</div>
211	)}
212	{connectionStatus === DEVICE_CONNECT_STATES.unknown && <DeviceConnectionMissingNote />}	6!
213	{connectionStatus === DEVICE_CONNECT_STATES.disconnected && <DeviceDisconnectedNote lastConnectionTs={connect_updated_ts} />}	8✔
214	{availableTabs.map(({ Component, title, value }) => (
215	<div key={value}>	8✔
216	<h4 className="margin-top-large">{title}</h4>
217	<Component
218	device={device}
219	downloadPath={downloadPath}
220	file={file}
221	onDownload={onDownloadClick}
222	setDownloadPath={setDownloadPath}
223	setFile={setFile}
224	setSnackbar={dispatchedSetSnackbar}
225	setSocketClosed={setSocketClosed}
226	setSocketInitialized={setSocketInitialized}
227	setUploadPath={setUploadPath}
228	socketInitialized={socketInitialized}
229	uploadPath={uploadPath}
230	userCapabilities={userCapabilities}
231	/>
232	</div>
233	))}
234	</div>
235	</DeviceDataCollapse>
236	);
237	};
238
239	export default DeviceConnection;

mendersoftware / gui / 1113439055

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