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

7.89

/src/js/components/devices/device-details/devicesystem.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, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';

import { Button } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { setSnackbar } from '../../../actions/appActions';
import { getSystemDevices } from '../../../actions/deviceActions';
import { BENEFITS, SORTING_OPTIONS } from '../../../constants/appConstants';
import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';
import { getDemoDeviceAddress, toggle } from '../../../helpers';
import { getCurrentSession, getDevicesById, getIdAttribute, getIsPreview, getOrganization } from '../../../selectors';
import { TwoColumnData } from '../../common/configurationobject';
import DocsLink from '../../common/docslink';
import EnterpriseNotification from '../../common/enterpriseNotification';
import { getHeaders } from '../authorized-devices';
import { routes } from '../base-devices';
import Devicelist from '../devicelist';
import ConnectToGatewayDialog from '../dialogs/connecttogatewaydialog';
import DeviceDataCollapse from './devicedatacollapse';

const useStyles = makeStyles()(theme => ({ container: { maxWidth: 600, marginTop: theme.spacing(), marginBottom: theme.spacing() } }));

export const DeviceSystem = ({ columnSelection, device, onConnectToGatewayClick, openSettingsDialog }) => {
  const [columnHeaders, setColumnHeaders] = useState([]);
  const [headerKeys, setHeaderKeys] = useState([]);
  const [page, setPage] = useState(DEVICE_LIST_DEFAULTS.page);
  const [perPage, setPerPage] = useState(DEVICE_LIST_DEFAULTS.perPage);
  const { classes } = useStyles();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const devicesById = useSelector(getDevicesById);
  const idAttribute = useSelector(getIdAttribute);

  const { systemDeviceIds = [], systemDeviceTotal = 0 } = device;
  const deviceIp = getDemoDeviceAddress([device]);

  const [sortOptions, setSortOptions] = useState([]);

  const onSortChange = attribute => {
    let changedOrder = SORTING_OPTIONS.asc;
    if (sortOptions.length && sortOptions[0].attribute == attribute.name) {
      changedOrder = sortOptions[0].order === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;
    }
    setSortOptions([{ attribute: attribute.name, scope: attribute.scope, order: changedOrder }]);
  };

  useEffect(() => {
    const columnHeaders = getHeaders(columnSelection, routes.allDevices.defaultHeaders, idAttribute, openSettingsDialog);
    setColumnHeaders(columnHeaders);
    setHeaderKeys(columnHeaders.map(({ attribute: { name, scope } }) => `${name}-${scope}`).join('-'));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [columnSelection, idAttribute.attribute, openSettingsDialog]);

  useEffect(() => {
    if (device.attributes) {
      dispatch(getSystemDevices(device.id, { page, perPage, sortOptions }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, device.id, device.attributes?.mender_is_gateway, page, perPage, sortOptions]);

  const onDeviceClick = (device = {}) => navigate(`/devices/${device.status}?id=${device.id}&open=true&tab=identity`);

  return (
    <>
      <DeviceDataCollapse
        title={
          <div className="flexbox center-aligned">
            <h4>Mender Gateway</h4>
            <EnterpriseNotification className="margin-left-small" id={BENEFITS.gateway.id} />
          </div>
        }
      >
        <TwoColumnData config={{ 'Server IP': deviceIp }} compact setSnackbar={message => dispatch(setSnackbar(message))} />
      </DeviceDataCollapse>
      <DeviceDataCollapse className={classes.container} title="System for this gateway">
        {systemDeviceTotal ? (
          <Devicelist
            customColumnSizes={[]}
            columnHeaders={columnHeaders}
            devices={systemDeviceIds.map(id => devicesById[id])}
            deviceListState={{ page, perPage }}
            headerKeys={headerKeys}
            idAttribute={idAttribute}
            onChangeRowsPerPage={setPerPage}
            onExpandClick={onDeviceClick}
            onResizeColumns={false}
            onPageChange={setPage}
            onSelect={false}
            onSort={onSortChange}
            pageLoading={false}
            pageTotal={systemDeviceTotal}
          />
        ) : (
          <div className="dashboard-placeholder">
            <p>No devices have been connected to this gateway device yet.</p>
            <div>
              Visit the <DocsLink path="get-started/mender-gateway" title="full Mender Gateway documentation" /> to learn how to make the most of the gateway
              functionality.
            </div>
          </div>
        )}
      </DeviceDataCollapse>
      <div className="flexbox">
        <Button color="secondary" component={Link} to={`/deployments?deviceId=${device.id}&open=true`}>
          Create deployment for this system
        </Button>
        <Button onClick={onConnectToGatewayClick}>Connect devices</Button>
      </div>
    </>
  );
};

const DeviceSystemTab = ({ device, ...remainder }) => {
  const [open, setOpen] = useState(false);
  const isPreRelease = useSelector(getIsPreview);
  const { tenant_token: tenantToken } = useSelector(getOrganization);
  const { token } = useSelector(getCurrentSession);

  const gatewayIp = getDemoDeviceAddress([device]);
  const toggleDialog = () => setOpen(toggle);
  return (
    <>
      <DeviceSystem onConnectToGatewayClick={toggleDialog} {...{ device, ...remainder }} />
      {open && <ConnectToGatewayDialog gatewayIp={gatewayIp} isPreRelease={isPreRelease} onCancel={toggleDialog} tenantToken={tenantToken} token={token} />}
    </>
  );
};

export default DeviceSystemTab;

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, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16	import { Link, useNavigate } from 'react-router-dom';
17
18	import { Button } from '@mui/material';
19	import { makeStyles } from 'tss-react/mui';
20
21	import { setSnackbar } from '../../../actions/appActions';
22	import { getSystemDevices } from '../../../actions/deviceActions';
23	import { BENEFITS, SORTING_OPTIONS } from '../../../constants/appConstants';
24	import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';
25	import { getDemoDeviceAddress, toggle } from '../../../helpers';
26	import { getCurrentSession, getDevicesById, getIdAttribute, getIsPreview, getOrganization } from '../../../selectors';
27	import { TwoColumnData } from '../../common/configurationobject';
28	import DocsLink from '../../common/docslink';
29	import EnterpriseNotification from '../../common/enterpriseNotification';
30	import { getHeaders } from '../authorized-devices';
31	import { routes } from '../base-devices';
32	import Devicelist from '../devicelist';
33	import ConnectToGatewayDialog from '../dialogs/connecttogatewaydialog';
34	import DeviceDataCollapse from './devicedatacollapse';
35
36	const useStyles = makeStyles()(theme => ({ container: { maxWidth: 600, marginTop: theme.spacing(), marginBottom: theme.spacing() } }));	8✔
37
38	export const DeviceSystem = ({ columnSelection, device, onConnectToGatewayClick, openSettingsDialog }) => {	8✔
39	const [columnHeaders, setColumnHeaders] = useState([]);	×
40	const [headerKeys, setHeaderKeys] = useState([]);	×
41	const [page, setPage] = useState(DEVICE_LIST_DEFAULTS.page);	×
42	const [perPage, setPerPage] = useState(DEVICE_LIST_DEFAULTS.perPage);	×
43	const { classes } = useStyles();	×
44	const navigate = useNavigate();	×
45	const dispatch = useDispatch();	×
46	const devicesById = useSelector(getDevicesById);	×
47	const idAttribute = useSelector(getIdAttribute);	×
48
49	const { systemDeviceIds = [], systemDeviceTotal = 0 } = device;	×
50	const deviceIp = getDemoDeviceAddress([device]);	×
51
52	const [sortOptions, setSortOptions] = useState([]);	×
53
54	const onSortChange = attribute => {	×
55	let changedOrder = SORTING_OPTIONS.asc;	×
56	if (sortOptions.length && sortOptions[0].attribute == attribute.name) {	×
57	changedOrder = sortOptions[0].order === SORTING_OPTIONS.desc ? SORTING_OPTIONS.asc : SORTING_OPTIONS.desc;	×
58	}
59	setSortOptions([{ attribute: attribute.name, scope: attribute.scope, order: changedOrder }]);	×
60	};
61
62	useEffect(() => {	×
63	const columnHeaders = getHeaders(columnSelection, routes.allDevices.defaultHeaders, idAttribute, openSettingsDialog);	×
64	setColumnHeaders(columnHeaders);	×
65	setHeaderKeys(columnHeaders.map(({ attribute: { name, scope } }) => `${name}-${scope}`).join('-'));	×
66	// eslint-disable-next-line react-hooks/exhaustive-deps
67	}, [columnSelection, idAttribute.attribute, openSettingsDialog]);
68
69	useEffect(() => {	×
70	if (device.attributes) {	×
71	dispatch(getSystemDevices(device.id, { page, perPage, sortOptions }));	×
72	}
73	// eslint-disable-next-line react-hooks/exhaustive-deps
74	}, [dispatch, device.id, device.attributes?.mender_is_gateway, page, perPage, sortOptions]);
75
76	const onDeviceClick = (device = {}) => navigate(`/devices/${device.status}?id=${device.id}&open=true&tab=identity`);	×
77
78	return (	×
79	<>
80	<DeviceDataCollapse
81	title={
82	<div className="flexbox center-aligned">
83	<h4>Mender Gateway</h4>
84	<EnterpriseNotification className="margin-left-small" id={BENEFITS.gateway.id} />
85	</div>
86	}
87	>
88	<TwoColumnData config={{ 'Server IP': deviceIp }} compact setSnackbar={message => dispatch(setSnackbar(message))} />	×
89	</DeviceDataCollapse>
90	<DeviceDataCollapse className={classes.container} title="System for this gateway">
91	{systemDeviceTotal ? (	×
92	<Devicelist
93	customColumnSizes={[]}
94	columnHeaders={columnHeaders}
95	devices={systemDeviceIds.map(id => devicesById[id])}	×
96	deviceListState={{ page, perPage }}
97	headerKeys={headerKeys}
98	idAttribute={idAttribute}
99	onChangeRowsPerPage={setPerPage}
100	onExpandClick={onDeviceClick}
101	onResizeColumns={false}
102	onPageChange={setPage}
103	onSelect={false}
104	onSort={onSortChange}
105	pageLoading={false}
106	pageTotal={systemDeviceTotal}
107	/>
108	) : (
109	<div className="dashboard-placeholder">
110	<p>No devices have been connected to this gateway device yet.</p>
111	<div>
112	Visit the <DocsLink path="get-started/mender-gateway" title="full Mender Gateway documentation" /> to learn how to make the most of the gateway
113	functionality.
114	</div>
115	</div>
116	)}
117	</DeviceDataCollapse>
118	<div className="flexbox">
119	<Button color="secondary" component={Link} to={`/deployments?deviceId=${device.id}&open=true`}>
120	Create deployment for this system
121	</Button>
122	<Button onClick={onConnectToGatewayClick}>Connect devices</Button>
123	</div>
124	</>
125	);
126	};
127
128	const DeviceSystemTab = ({ device, ...remainder }) => {	8✔
129	const [open, setOpen] = useState(false);	×
130	const isPreRelease = useSelector(getIsPreview);	×
131	const { tenant_token: tenantToken } = useSelector(getOrganization);	×
132	const { token } = useSelector(getCurrentSession);	×
133
134	const gatewayIp = getDemoDeviceAddress([device]);	×
135	const toggleDialog = () => setOpen(toggle);	×
136	return (	×
137	<>
138	<DeviceSystem onConnectToGatewayClick={toggleDialog} {...{ device, ...remainder }} />
139	{open && <ConnectToGatewayDialog gatewayIp={gatewayIp} isPreRelease={isPreRelease} onCancel={toggleDialog} tenantToken={tenantToken} token={token} />}	×
140	</>
141	);
142	};
143
144	export default DeviceSystemTab;

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