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

86.21

/src/js/components/dashboard/widgets/deployments.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 } from 'react';
import { useDispatch } from 'react-redux';

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

import isUUID from 'validator/lib/isUUID';

import { getDeviceById } from '../../../actions/deviceActions';
import { DEPLOYMENT_STATES } from '../../../constants/deploymentConstants';
import Time from '../../common/time';
import { DeploymentDeviceGroup, DeploymentProgress } from '../../deployments/deploymentitem';
import DeploymentStats from '../../deployments/deploymentstatus';
import { DeploymentStatusNotification } from '../../deployments/progressChart';

const maxWidth = 500;

const useStyles = makeStyles()(theme => ({
  base: {
    alignItems: 'center',
    backgroundColor: theme.palette.grey[400],
    borderRadius: theme.spacing(),
    columnGap: theme.spacing(2),
    display: 'grid',
    gridTemplateColumns: '200px 1fr',
    maxWidth,
    padding: theme.spacing(),
    '> div:last-child': {
      width: '100%'
    }
  },
  [DEPLOYMENT_STATES.finished]: { background: theme.palette.background.paper, borderRadius: theme.spacing(0.5), padding: theme.spacing(0.5) },
  wrapper: { display: 'flex', flexDirection: 'column', maxWidth, '> time': { alignSelf: 'flex-end', marginRight: 6 } }
}));

const KeyInfo = ({ deployment, devicesById, idAttribute }) => (
  <div>
    <div>{deployment.artifact_name}</div>
    <DeploymentDeviceGroup deployment={deployment} devicesById={devicesById} idAttribute={idAttribute} wrappingClass="" />
  </div>
);

const deploymentStateComponentMap = {
  [DEPLOYMENT_STATES.pending]: () => <DeploymentStatusNotification status="queued" />,
  [DEPLOYMENT_STATES.inprogress]: ({ deployment }) => <DeploymentProgress deployment={deployment} minimal />,
  [DEPLOYMENT_STATES.finished]: ({ classes, deployment }) => (
    <div className={classes.finished}>
      <DeploymentStats deployment={deployment} />
    </div>
  )
};

const BaseDeploymentWidget = ({ deployment, devicesById, idAttribute, onClick, state }) => {
  const { classes } = useStyles();
  const dispatch = useDispatch();

  useEffect(() => {
    if (isUUID(deployment.name) && !devicesById[deployment.name]) {
      dispatch(getDeviceById(deployment.name));
    }
  }, [deployment.name]);

  const Component = deploymentStateComponentMap[state];
  const onWidgetClick = () => onClick({ route: 'deployments', id: deployment.id, tab: state === DEPLOYMENT_STATES.finished ? state : undefined, open: true });

  return (
    <div className={`clickable ${classes.base}`} onClick={onWidgetClick}>
      <KeyInfo deployment={deployment} devicesById={devicesById} idAttribute={idAttribute} />
      <Component classes={classes} deployment={deployment} />
    </div>
  );
};

export const BaseDeploymentsWidget = ({ deployments, ...props }) =>
  deployments.map(deployment => <BaseDeploymentWidget deployment={deployment} key={deployment.id} {...props} />);

export const CompletedDeployments = ({ deployments, ...props }) => {
  const { classes } = useStyles();
  return deployments.map(deployment => (
    <div className={classes.wrapper} key={deployment.id}>
      <Time className="muted slightly-smaller" value={deployment.finished} />
      <BaseDeploymentWidget deployment={deployment} {...props} />
    </div>
  ));
};

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 } from 'react';
15	import { useDispatch } from 'react-redux';
16
17	import { makeStyles } from 'tss-react/mui';
18
19	import isUUID from 'validator/lib/isUUID';
20
21	import { getDeviceById } from '../../../actions/deviceActions';
22	import { DEPLOYMENT_STATES } from '../../../constants/deploymentConstants';
23	import Time from '../../common/time';
24	import { DeploymentDeviceGroup, DeploymentProgress } from '../../deployments/deploymentitem';
25	import DeploymentStats from '../../deployments/deploymentstatus';
26	import { DeploymentStatusNotification } from '../../deployments/progressChart';
27
28	const maxWidth = 500;	6✔
29
30	const useStyles = makeStyles()(theme => ({	341✔
31	base: {
32	alignItems: 'center',
33	backgroundColor: theme.palette.grey[400],
34	borderRadius: theme.spacing(),
35	columnGap: theme.spacing(2),
36	display: 'grid',
37	gridTemplateColumns: '200px 1fr',
38	maxWidth,
39	padding: theme.spacing(),
40	'> div:last-child': {
41	width: '100%'
42	}
43	},
44	[DEPLOYMENT_STATES.finished]: { background: theme.palette.background.paper, borderRadius: theme.spacing(0.5), padding: theme.spacing(0.5) },
45	wrapper: { display: 'flex', flexDirection: 'column', maxWidth, '> time': { alignSelf: 'flex-end', marginRight: 6 } }
46	}));
47
48	const KeyInfo = ({ deployment, devicesById, idAttribute }) => (	6✔
49	<div>	2,271✔
50	<div>{deployment.artifact_name}</div>
51	<DeploymentDeviceGroup deployment={deployment} devicesById={devicesById} idAttribute={idAttribute} wrappingClass="" />
52	</div>
53	);
54
55	const deploymentStateComponentMap = {	6✔
56	[DEPLOYMENT_STATES.pending]: () => <DeploymentStatusNotification status="queued" />,	763✔
57	[DEPLOYMENT_STATES.inprogress]: ({ deployment }) => <DeploymentProgress deployment={deployment} minimal />,	757✔
58	[DEPLOYMENT_STATES.finished]: ({ classes, deployment }) => (
59	<div className={classes.finished}>	751✔
60	<DeploymentStats deployment={deployment} />
61	</div>
62	)
63	};
64
65	const BaseDeploymentWidget = ({ deployment, devicesById, idAttribute, onClick, state }) => {	6✔
66	const { classes } = useStyles();	2,271✔
67	const dispatch = useDispatch();	2,271✔
68
69	useEffect(() => {	2,271✔
70	if (isUUID(deployment.name) && !devicesById[deployment.name]) {	33!
UNCOV 71	dispatch(getDeviceById(deployment.name));	×
72	}
73	}, [deployment.name]);
74
75	const Component = deploymentStateComponentMap[state];	2,271✔
76	const onWidgetClick = () => onClick({ route: 'deployments', id: deployment.id, tab: state === DEPLOYMENT_STATES.finished ? state : undefined, open: true });	2,271!
77
78	return (	2,271✔
79	<div className={`clickable ${classes.base}`} onClick={onWidgetClick}>
80	<KeyInfo deployment={deployment} devicesById={devicesById} idAttribute={idAttribute} />
81	<Component classes={classes} deployment={deployment} />
82	</div>
83	);
84	};
85
86	export const BaseDeploymentsWidget = ({ deployments, ...props }) =>	6✔
87	deployments.map(deployment => <BaseDeploymentWidget deployment={deployment} key={deployment.id} {...props} />);	1,520✔
88
89	export const CompletedDeployments = ({ deployments, ...props }) => {	6✔
90	const { classes } = useStyles();	386✔
91	return deployments.map(deployment => (	386✔
92	<div className={classes.wrapper} key={deployment.id}>	751✔
93	<Time className="muted slightly-smaller" value={deployment.finished} />
94	<BaseDeploymentWidget deployment={deployment} {...props} />
95	</div>
96	));
97	};

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