901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

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

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

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

5.56

/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 { SORTING_OPTIONS } from '../../../constants/appConstants';
import { DEVICE_LIST_DEFAULTS } from '../../../constants/deviceConstants';
import { getDemoDeviceAddress, toggle } from '../../../helpers';
import { getDevicesById, getDocsVersion, getIdAttribute, getIsPreview, getOrganization, getTenantCapabilities } from '../../../selectors';
import { TwoColumnData } from '../../common/configurationobject';
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, docsVersion, 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 hasFullFiltering = useSelector(getTenantCapabilities);

  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('-'));
  }, [columnSelection, idAttribute.attribute]);

  useEffect(() => {
    if (device.attributes) {
      dispatch(getSystemDevices(device.id, { page, perPage, sortOptions }));
    }
  }, [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="Mender Gateway">
        <TwoColumnData config={{ 'Server IP': deviceIp }} compact setSnackbar={message => dispatch(setSnackbar(message))} />
      </DeviceDataCollapse>
      <DeviceDataCollapse className={classes.container} title="System for this gateway">
        <EnterpriseNotification isEnterprise={hasFullFiltering} benefit="see devices connected to your gateway device for easy access" />
        {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{' '}
              <a href={`https://docs.mender.io/${docsVersion}get-started/mender-gateway`} target="_blank" rel="noopener noreferrer">
                full Mender Gateway documentation
              </a>{' '}
              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 docsVersion = useSelector(getDocsVersion);
  const isPreRelease = useSelector(getIsPreview);
  const { tenant_token: tenantToken } = useSelector(getOrganization);

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

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

mendersoftware / gui / 901187442

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