1478528859

Committed 02 Oct 2024 10:38AM UTC coverage: 78.053%. First build

Build # 1478528859

Build Type

Pull #62

gitlab-ci

Committed by

mineralsfree

Commit Message

feat: added device limit component

Ticket: MEN-7565
Changelog: None

Signed-off-by: Mikita Pilinka <mikita.pilinka@northern.tech>

Pull Request Pull Request #62: MEN-7565 - feat: added device limit component

Run Details

4399 of 6337 branches covered (69.42%)

Branch coverage included in aggregate %.

0 of 7 new or added lines in 1 file covered. (0.0%)

8536 of 10235 relevant lines covered (83.4%)

153.8 hits per line

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

0.0

/frontend/src/js/components/header/devicecount.tsx

import { DeveloperBoard as DeveloperBoardIcon, Warning as WarningIcon } from '@mui/icons-material';
import { LinearProgress } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

interface DeviceCountProps {
  current: number;
  max: number;
  variant: 'common' | 'detailed';
}

const LIMIT_THRESHOLD = 0.8;
const useStyles = makeStyles()(theme => ({
  devLimitProgress: {
    width: '375px'
  },
  devLimitDetailed: {
    paddingBottom: '11px',
    borderBottom: `1px solid ${theme.palette.grey['600']}`
  },
  devIcon: {
    color: theme.palette.primary.main,
    margin: '0 7px 0 10px',
    fontSize: '20px'
  },
  devLimitText: {
    margin: '8px 0',
    color: theme.palette.grey['900']
  },
  devText: {
    margin: '11px 11px 11px 0'
  },
  devLeft: {
    background: theme.palette.grey['300'],
    color: theme.palette.grey['900'],
    borderRadius: '2px',
    padding: '4px 6px'
  }
}));
export const DeviceCount = (props: DeviceCountProps) => {
  const { classes } = useStyles();
  const { current, max, variant } = props;
  return (
    <div className={`${classes.devLimitProgress} ${variant === 'detailed' ? classes.devLimitDetailed : ''}`}>
      {variant === 'common' && (
        <div className="flexbox centered">
          <DeveloperBoardIcon className={classes.devIcon} />
          <p className={classes.devLimitText}>
            {current} of {max} devices
          </p>
        </div>
      )}
      {variant === 'detailed' && (
        <div className="flexbox centered space-between">
          <div className="flexbox centered">
            <p className={classes.devText}>
              Devices: {current}/{max}
            </p>
            {current / max >= LIMIT_THRESHOLD && <WarningIcon />}
          </div>
          <div className={classes.devLeft}>{Math.max(0, max - current)} devices left</div>
        </div>
      )}
      <LinearProgress sx={{ backgroundColor: theme => theme.palette.grey['500'] }} variant="determinate" value={Math.round((current / max) * 100)} />
    </div>
  );
};

1	import { DeveloperBoard as DeveloperBoardIcon, Warning as WarningIcon } from '@mui/icons-material';
2	import { LinearProgress } from '@mui/material';
3	import { makeStyles } from 'tss-react/mui';
4
5	interface DeviceCountProps {
6	current: number;
7	max: number;
8	variant: 'common' \| 'detailed';
9	}
10
NEW 11	const LIMIT_THRESHOLD = 0.8;	×
NEW 12	const useStyles = makeStyles()(theme => ({	×
13	devLimitProgress: {
14	width: '375px'
15	},
16	devLimitDetailed: {
17	paddingBottom: '11px',
18	borderBottom: `1px solid ${theme.palette.grey['600']}`
19	},
20	devIcon: {
21	color: theme.palette.primary.main,
22	margin: '0 7px 0 10px',
23	fontSize: '20px'
24	},
25	devLimitText: {
26	margin: '8px 0',
27	color: theme.palette.grey['900']
28	},
29	devText: {
30	margin: '11px 11px 11px 0'
31	},
32	devLeft: {
33	background: theme.palette.grey['300'],
34	color: theme.palette.grey['900'],
35	borderRadius: '2px',
36	padding: '4px 6px'
37	}
38	}));
NEW 39	export const DeviceCount = (props: DeviceCountProps) => {	×
NEW 40	const { classes } = useStyles();	×
NEW 41	const { current, max, variant } = props;	×
NEW 42	return (	×
43	<div className={`${classes.devLimitProgress} ${variant === 'detailed' ? classes.devLimitDetailed : ''}`}>	×
44	{variant === 'common' && (	×
45	<div className="flexbox centered">
46	<DeveloperBoardIcon className={classes.devIcon} />
47	<p className={classes.devLimitText}>
48	{current} of {max} devices
49	</p>
50	</div>
51	)}
52	{variant === 'detailed' && (	×
53	<div className="flexbox centered space-between">
54	<div className="flexbox centered">
55	<p className={classes.devText}>
56	Devices: {current}/{max}
57	</p>
58	{current / max >= LIMIT_THRESHOLD && <WarningIcon />}	×
59	</div>
60	<div className={classes.devLeft}>{Math.max(0, max - current)} devices left</div>
61	</div>
62	)}
NEW 63	<LinearProgress sx={{ backgroundColor: theme => theme.palette.grey['500'] }} variant="determinate" value={Math.round((current / max) * 100)} />	×
64	</div>
65	);
66	};

mendersoftware / mender-server / 1478528859

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