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

80.0

/src/js/components/dashboard/widgets/distribution.js

// Copyright 2020 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, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { Clear as ClearIcon, Settings, Square } from '@mui/icons-material';
import { IconButton, LinearProgress, linearProgressClasses, svgIconClasses } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { VictoryBar, VictoryContainer, VictoryPie, VictoryStack } from 'victory';

import { ensureVersionString } from '../../../actions/deviceActions';
import { TIMEOUTS, chartTypes } from '../../../constants/appConstants';
import { ALL_DEVICES } from '../../../constants/deviceConstants';
import { rootfsImageVersion, softwareTitleMap } from '../../../constants/releaseConstants';
import { isEmpty, toggle } from '../../../helpers';
import { chartColorPalette } from '../../../themes/Mender';
import Loader from '../../common/loader';
import { ChartEditWidget, RemovalWidget } from './chart-addition';

const seriesOther = '__OTHER__';

const createColorClassName = hexColor => `color-${hexColor.slice(1)}`;

const useStyles = makeStyles()(theme => ({
  header: { minHeight: 30, [`.${svgIconClasses.root}`]: { marginLeft: theme.spacing() } },
  indicator: { fontSize: 10, minWidth: 'initial', marginLeft: 4 },
  legendItem: {
    alignItems: 'center',
    display: 'grid',
    gridTemplateColumns: '1fr max-content',
    columnGap: theme.spacing(2),
    '&.indicating': {
      gridTemplateColumns: 'min-content 1fr max-content',
      columnGap: theme.spacing()
    }
  },
  wrapper: {
    display: 'grid',
    gridTemplateColumns: '200px 1fr',
    columnGap: theme.spacing(2),
    marginBottom: theme.spacing(2),
    '&>.flexbox.column > *': {
      height: 20
    },
    '.barchart': {
      [`.${linearProgressClasses.root}`]: {
        backgroundColor: theme.palette.grey[400]
      },
      ...Object.values(chartColorPalette).reduce(
        (accu, color) => ({
          ...accu,
          [`.${createColorClassName(color)} .${linearProgressClasses.barColorPrimary}`]: { backgroundColor: color }
        }),
        {
          [`.${createColorClassName(theme.palette.grey[400])} .${linearProgressClasses.barColorPrimary}`]: { backgroundColor: theme.palette.grey[400] }
        }
      )
    }
  }
}));

const ChartLegend = ({ classes, data, events = [], showIndicators = true }) => {
  const { eventHandlers = {} } = events[0];
  const { onClick } = eventHandlers;
  return (
    <div className="flexbox column">
      {data.map(({ fill, x, title, tip, value }) => (
        <div
          className={`clickable ${classes.legendItem} ${showIndicators ? 'indicating' : ''}`}
          key={x}
          onClick={e => onClick(e, { datum: { x } })}
          title={tip}
        >
          {showIndicators && <Square className={classes.indicator} style={{ fill }} />}
          <div className="text-overflow">{title}</div>
          <div>{value.toLocaleString()}</div>
        </div>
      ))}
    </div>
  );
};

const VictoryBarChart = ({ data, totals, ...remainder }) => (
  <VictoryStack {...remainder} animate={{ duration: 700, onLoad: { duration: 700 } }} horizontal padding={{ left: 0, right: 0, top: 0, bottom: 15 }}>
    <VictoryBar alignment="start" barWidth={16} sortKey={['y']} sortOrder="ascending" data={data} />
    <VictoryBar alignment="start" barWidth={16} sortKey={['y']} sortOrder="descending" data={totals} />
  </VictoryStack>
);

const BarChart = ({ data, events }) => {
  const [chartData, setChartData] = useState([]);
  const timer = useRef();

  useEffect(() => {
    setChartData(data.map(item => ({ ...item, y: 0 })));
    clearTimeout(timer.current);
    timer.current = setTimeout(() => setChartData(data), TIMEOUTS.debounceDefault);
    return () => {
      clearTimeout(timer.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(data)]);

  const { eventHandlers = {} } = events[0];
  const { onClick } = eventHandlers;
  return (
    <div className="flexbox column">
      {chartData.map(({ fill, x, y, tip }) => (
        <div className="clickable flexbox column barchart" key={x} onClick={e => onClick(e, { datum: { x } })} title={tip} style={{ justifyContent: 'center' }}>
          <LinearProgress className={createColorClassName(fill)} variant="determinate" value={y} style={{ height: 8 }} />
        </div>
      ))}
    </div>
  );
};

const ChartContainer = ({ className, children, innerRef, style = {} }) => (
  <div className={className} ref={innerRef} style={style}>
    {children}
  </div>
);

const BarChartContainer = ({ classes = {}, data, events, ...remainder }) => (
  <ChartContainer className={classes.wrapper}>
    <ChartLegend classes={classes} data={data} events={events} showIndicators={false} />
    <BarChart {...remainder} data={data} events={events} />
  </ChartContainer>
);

const PieChart = props => <VictoryPie {...props} padding={{ left: 0, right: 0, top: 0, bottom: 15 }} />;

const padding = 10;
const PieChartContainer = ({ classes = {}, ...chartProps }) => {
  const ref = useRef();
  let height;
  if (ref.current) {
    // use the widget height, remove the space the header takes up and account for widget padding (top + padding) + own padding for the chart
    height = ref.current.parentElement.offsetHeight - ref.current.parentElement.children[0].offsetHeight - 3 * padding;
  }
  return (
    <ChartContainer className={classes.wrapper} innerRef={ref} style={{ height }}>
      <ChartLegend {...chartProps} classes={classes} />
      {height && <PieChart {...chartProps} containerComponent={<VictoryContainer style={{ height }} />} />}
    </ChartContainer>
  );
};

const VictoryBarChartContainer = ({ classes = {}, ...chartProps }) => (
  <ChartContainer className={classes.wrapper}>
    <ChartLegend {...chartProps} classes={classes} />
    <VictoryBarChart {...chartProps} />
  </ChartContainer>
);

const chartTypeComponentMap = {
  [chartTypes.bar.key]: BarChartContainer,
  [`${chartTypes.bar.key}-alternative`]: VictoryBarChartContainer,
  [chartTypes.pie.key]: PieChartContainer
};

const initDistribution = ({ data, theme }) => {
  const { items, otherCount, total } = data;
  const numberOfItems = items.length > chartColorPalette.length ? chartColorPalette.length - 1 : items.length;
  const colors = chartColorPalette.slice(0, numberOfItems).reverse();
  let distribution = items.slice(0, colors.length).reduce(
    (accu, { key, count }, index) => [
      {
        x: key || '-',
        y: (count / total) * 100, //value,
        title: key || '-',
        tip: key || '-',
        fill: chartColorPalette[index],
        value: count
      },
      ...accu
    ],
    []
  );
  if (items.length > chartColorPalette.length || otherCount) {
    distribution.splice(0, 0, {
      x: seriesOther,
      title: 'Other',
      tip: 'Other',
      y: (otherCount / total) * 100,
      fill: chartColorPalette[chartColorPalette.length - 1],
      value: otherCount
    });
  }
  distribution.sort((pairA, pairB) => pairB.y - pairA.y);
  // y: formatValue(item.y, total)
  const totals = distribution.map(({ x, y }) => ({ value: total, x, y: 100 - y, fill: theme.palette.grey[400] }));
  return { distribution, totals };
};

export const Header = ({ chartType }) => {
  const { classes } = useStyles();
  const { Icon } = chartTypes[chartType];
  return (
    <div className={`flexbox center-aligned ${classes.header}`}>
      Software distribution
      <Icon />
    </div>
  );
};

export const DistributionReport = ({ data, getGroupDevices, groups, onClick, onSave, selection = {}, software: softwareTree }) => {
  const {
    attribute: attributeSelection,
    group: groupSelection = '',
    chartType: chartTypeSelection = chartTypes.bar.key,
    software: softwareSelection = rootfsImageVersion
  } = selection;
  const [editing, setEditing] = useState(false);
  const [removing, setRemoving] = useState(false);
  const [chartType, setChartType] = useState(chartTypes.bar.key);
  const [software, setSoftware] = useState('');
  const [group, setGroup] = useState('');
  const navigate = useNavigate();
  const { classes, theme } = useStyles();

  useEffect(() => {
    setSoftware(softwareSelection || attributeSelection);
    setGroup(groupSelection);
    setChartType(chartTypeSelection);
    setRemoving(false);
    getGroupDevices(groupSelection, { page: 1, perPage: 1 });
  }, [attributeSelection, groupSelection, chartTypeSelection, softwareSelection, getGroupDevices]);

  const { distribution, totals } = useMemo(() => {
    if (isEmpty(data)) {
      return { distribution: [], totals: [] };
    }
    return initDistribution({ data, theme });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(data), JSON.stringify(selection)]);

  const onSliceClick = useCallback(
    (e, { datum: { x: target } }) => {
      if (target === seriesOther) {
        return;
      }
      navigate(`/devices/accepted?inventory=${group ? `group:eq:${group}&` : ''}${ensureVersionString(software, attributeSelection)}:eq:${target}`);
    },
    [attributeSelection, group, navigate, software]
  );

  const toggleRemoving = () => setRemoving(toggle);

  const onToggleEditClick = () => setEditing(toggle);

  const onSaveClick = selection => {
    setChartType(selection.chartType);
    setSoftware(selection.software);
    setGroup(selection.group);
    onSave(selection);
    setEditing(false);
  };

  const Chart = chartTypeComponentMap[chartType];
  const chartProps = {
    classes,
    data: distribution,
    domainPadding: 0,
    events: [{ target: 'data', eventHandlers: { onClick: onSliceClick } }],
    standalone: true,
    style: { data: { fill: ({ datum }) => datum.fill } },
    labels: () => null
  };
  const couldHaveDevices = !group || groups[group]?.deviceIds.length;
  if (removing) {
    return <RemovalWidget onCancel={toggleRemoving} onClick={onClick} />;
  }
  if (editing) {
    return (
      <ChartEditWidget
        groups={groups}
        onSave={onSaveClick}
        onCancel={onToggleEditClick}
        selection={{ ...selection, chartType, group, software }}
        software={softwareTree}
      />
    );
  }
  return (
    <div className="widget chart-widget">
      <div className="margin-bottom-small">
        <div className="flexbox space-between margin-bottom-small">
          <Header chartType={chartType} />
          <div className="flexbox center-aligned" style={{ zIndex: 1 }}>
            <IconButton onClick={onToggleEditClick} size="small">
              <Settings fontSize="small" />
            </IconButton>
            <IconButton onClick={toggleRemoving} size="small">
              <ClearIcon fontSize="small" />
            </IconButton>
          </div>
        </div>
        <div className="flexbox space-between slightly-smaller">
          <div>{softwareTitleMap[software] ? softwareTitleMap[software].title : software}</div>
          <div>{group || ALL_DEVICES}</div>
        </div>
      </div>
      {distribution.length || totals.length ? (
        <Chart {...chartProps} totals={totals} />
      ) : couldHaveDevices ? (
        <div className="muted flexbox centered">There are no devices that match the selected criteria.</div>
      ) : (
        <Loader show={true} />
      )}
    </div>
  );
};

export default DistributionReport;

1	// Copyright 2020 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, useMemo, useRef, useState } from 'react';
15	import { useNavigate } from 'react-router-dom';
16
17	import { Clear as ClearIcon, Settings, Square } from '@mui/icons-material';
18	import { IconButton, LinearProgress, linearProgressClasses, svgIconClasses } from '@mui/material';
19	import { makeStyles } from 'tss-react/mui';
20
21	import { VictoryBar, VictoryContainer, VictoryPie, VictoryStack } from 'victory';
22
23	import { ensureVersionString } from '../../../actions/deviceActions';
24	import { TIMEOUTS, chartTypes } from '../../../constants/appConstants';
25	import { ALL_DEVICES } from '../../../constants/deviceConstants';
26	import { rootfsImageVersion, softwareTitleMap } from '../../../constants/releaseConstants';
27	import { isEmpty, toggle } from '../../../helpers';
28	import { chartColorPalette } from '../../../themes/Mender';
29	import Loader from '../../common/loader';
30	import { ChartEditWidget, RemovalWidget } from './chart-addition';
31
32	const seriesOther = '__OTHER__';	6✔
33
34	const createColorClassName = hexColor => `color-${hexColor.slice(1)}`;	73✔
35
36	const useStyles = makeStyles()(theme => ({	6✔
37	header: { minHeight: 30, [`.${svgIconClasses.root}`]: { marginLeft: theme.spacing() } },
38	indicator: { fontSize: 10, minWidth: 'initial', marginLeft: 4 },
39	legendItem: {
40	alignItems: 'center',
41	display: 'grid',
42	gridTemplateColumns: '1fr max-content',
43	columnGap: theme.spacing(2),
44	'&.indicating': {
45	gridTemplateColumns: 'min-content 1fr max-content',
46	columnGap: theme.spacing()
47	}
48	},
49	wrapper: {
50	display: 'grid',
51	gridTemplateColumns: '200px 1fr',
52	columnGap: theme.spacing(2),
53	marginBottom: theme.spacing(2),
54	'&>.flexbox.column > *': {
55	height: 20
56	},
57	'.barchart': {
58	[`.${linearProgressClasses.root}`]: {
59	backgroundColor: theme.palette.grey[400]
60	},
61	...Object.values(chartColorPalette).reduce(
62	(accu, color) => ({	30✔
63	...accu,
64	[`.${createColorClassName(color)} .${linearProgressClasses.barColorPrimary}`]: { backgroundColor: color }
65	}),
66	{
67	[`.${createColorClassName(theme.palette.grey[400])} .${linearProgressClasses.barColorPrimary}`]: { backgroundColor: theme.palette.grey[400] }
68	}
69	)
70	}
71	}
72	}));
73
74	const ChartLegend = ({ classes, data, events = [], showIndicators = true }) => {	6!
75	const { eventHandlers = {} } = events[0];	12!
76	const { onClick } = eventHandlers;	12✔
77	return (	12✔
78	<div className="flexbox column">
79	{data.map(({ fill, x, title, tip, value }) => (
80	<div	35✔
81	className={`clickable ${classes.legendItem} ${showIndicators ? 'indicating' : ''}`}	35!
82	key={x}
83	onClick={e => onClick(e, { datum: { x } })}	×
84	title={tip}
85	>
86	{showIndicators && <Square className={classes.indicator} style={{ fill }} />}	35!
87	<div className="text-overflow">{title}</div>
88	<div>{value.toLocaleString()}</div>
89	</div>
90	))}
91	</div>
92	);
93	};
94
95	const VictoryBarChart = ({ data, totals, ...remainder }) => (	6✔
96	<VictoryStack {...remainder} animate={{ duration: 700, onLoad: { duration: 700 } }} horizontal padding={{ left: 0, right: 0, top: 0, bottom: 15 }}>	×
97	<VictoryBar alignment="start" barWidth={16} sortKey={['y']} sortOrder="ascending" data={data} />
98	<VictoryBar alignment="start" barWidth={16} sortKey={['y']} sortOrder="descending" data={totals} />
99	</VictoryStack>
100	);
101
102	const BarChart = ({ data, events }) => {	6✔
103	const [chartData, setChartData] = useState([]);	14✔
104	const timer = useRef();	14✔
105
106	useEffect(() => {	14✔
107	setChartData(data.map(item => ({ ...item, y: 0 })));	5✔
108	clearTimeout(timer.current);	2✔
109	timer.current = setTimeout(() => setChartData(data), TIMEOUTS.debounceDefault);	2✔
110	return () => {	2✔
111	clearTimeout(timer.current);	2✔
112	};
113	// eslint-disable-next-line react-hooks/exhaustive-deps
114	}, [JSON.stringify(data)]);
115
116	const { eventHandlers = {} } = events[0];	14!
117	const { onClick } = eventHandlers;	14✔
118	return (	14✔
119	<div className="flexbox column">
120	{chartData.map(({ fill, x, y, tip }) => (
121	<div className="clickable flexbox column barchart" key={x} onClick={e => onClick(e, { datum: { x } })} title={tip} style={{ justifyContent: 'center' }}>	38✔
122	<LinearProgress className={createColorClassName(fill)} variant="determinate" value={y} style={{ height: 8 }} />
123	</div>
124	))}
125	</div>
126	);
127	};
128
129	const ChartContainer = ({ className, children, innerRef, style = {} }) => (	6✔
130	<div className={className} ref={innerRef} style={style}>	12✔
131	{children}
132	</div>
133	);
134
135	const BarChartContainer = ({ classes = {}, data, events, ...remainder }) => (	6!
136	<ChartContainer className={classes.wrapper}>	12✔
137	<ChartLegend classes={classes} data={data} events={events} showIndicators={false} />
138	<BarChart {...remainder} data={data} events={events} />
139	</ChartContainer>
140	);
141
142	const PieChart = props => <VictoryPie {...props} padding={{ left: 0, right: 0, top: 0, bottom: 15 }} />;	6✔
143
144	const padding = 10;	6✔
145	const PieChartContainer = ({ classes = {}, ...chartProps }) => {	6!
146	const ref = useRef();	×
147	let height;
148	if (ref.current) {	×
149	// use the widget height, remove the space the header takes up and account for widget padding (top + padding) + own padding for the chart
150	height = ref.current.parentElement.offsetHeight - ref.current.parentElement.children[0].offsetHeight - 3 * padding;	×
151	}
152	return (	×
153	<ChartContainer className={classes.wrapper} innerRef={ref} style={{ height }}>
154	<ChartLegend {...chartProps} classes={classes} />
155	{height && <PieChart {...chartProps} containerComponent={<VictoryContainer style={{ height }} />} />}	×
156	</ChartContainer>
157	);
158	};
159
160	const VictoryBarChartContainer = ({ classes = {}, ...chartProps }) => (	6!
161	<ChartContainer className={classes.wrapper}>	×
162	<ChartLegend {...chartProps} classes={classes} />
163	<VictoryBarChart {...chartProps} />
164	</ChartContainer>
165	);
166
167	const chartTypeComponentMap = {	6✔
168	[chartTypes.bar.key]: BarChartContainer,
169	[`${chartTypes.bar.key}-alternative`]: VictoryBarChartContainer,
170	[chartTypes.pie.key]: PieChartContainer
171	};
172
173	const initDistribution = ({ data, theme }) => {	6✔
174	const { items, otherCount, total } = data;	2✔
175	const numberOfItems = items.length > chartColorPalette.length ? chartColorPalette.length - 1 : items.length;	2!
176	const colors = chartColorPalette.slice(0, numberOfItems).reverse();	2✔
177	let distribution = items.slice(0, colors.length).reduce(	2✔
178	(accu, { key, count }, index) => [	4✔
179	{
180	x: key \|\| '-',	4!
181	y: (count / total) * 100, //value,
182	title: key \|\| '-',	4!
183	tip: key \|\| '-',	4!
184	fill: chartColorPalette[index],
185	value: count
186	},
187	...accu
188	],
189	[]
190	);
191	if (items.length > chartColorPalette.length \|\| otherCount) {	2✔
192	distribution.splice(0, 0, {	1✔
193	x: seriesOther,
194	title: 'Other',
195	tip: 'Other',
196	y: (otherCount / total) * 100,
197	fill: chartColorPalette[chartColorPalette.length - 1],
198	value: otherCount
199	});
200	}
201	distribution.sort((pairA, pairB) => pairB.y - pairA.y);	4✔
202	// y: formatValue(item.y, total)
203	const totals = distribution.map(({ x, y }) => ({ value: total, x, y: 100 - y, fill: theme.palette.grey[400] }));	5✔
204	return { distribution, totals };	2✔
205	};
206
207	export const Header = ({ chartType }) => {	6✔
208	const { classes } = useStyles();	16✔
209	const { Icon } = chartTypes[chartType];	16✔
210	return (	16✔
211	<div className={`flexbox center-aligned ${classes.header}`}>
212	Software distribution
213	<Icon />
214	</div>
215	);
216	};
217
218	export const DistributionReport = ({ data, getGroupDevices, groups, onClick, onSave, selection = {}, software: softwareTree }) => {	6✔
219	const {
220	attribute: attributeSelection,
221	group: groupSelection = '',	2✔
222	chartType: chartTypeSelection = chartTypes.bar.key,	2✔
223	software: softwareSelection = rootfsImageVersion	2✔
224	} = selection;	14✔
225	const [editing, setEditing] = useState(false);	14✔
226	const [removing, setRemoving] = useState(false);	14✔
227	const [chartType, setChartType] = useState(chartTypes.bar.key);	14✔
228	const [software, setSoftware] = useState('');	14✔
229	const [group, setGroup] = useState('');	14✔
230	const navigate = useNavigate();	14✔
231	const { classes, theme } = useStyles();	14✔
232
233	useEffect(() => {	14✔
234	setSoftware(softwareSelection \|\| attributeSelection);	2✔
235	setGroup(groupSelection);	2✔
236	setChartType(chartTypeSelection);	2✔
237	setRemoving(false);	2✔
238	getGroupDevices(groupSelection, { page: 1, perPage: 1 });	2✔
239	}, [attributeSelection, groupSelection, chartTypeSelection, softwareSelection, getGroupDevices]);
240
241	const { distribution, totals } = useMemo(() => {	14✔
242	if (isEmpty(data)) {	3✔
243	return { distribution: [], totals: [] };	1✔
244	}
245	return initDistribution({ data, theme });	2✔
246	// eslint-disable-next-line react-hooks/exhaustive-deps
247	}, [JSON.stringify(data), JSON.stringify(selection)]);
248
249	const onSliceClick = useCallback(	14✔
250	(e, { datum: { x: target } }) => {
251	if (target === seriesOther) {	×
252	return;	×
253	}
254	navigate(`/devices/accepted?inventory=${group ? `group:eq:${group}&` : ''}${ensureVersionString(software, attributeSelection)}:eq:${target}`);	×
255	},
256	[attributeSelection, group, navigate, software]
257	);
258
259	const toggleRemoving = () => setRemoving(toggle);	14✔
260
261	const onToggleEditClick = () => setEditing(toggle);	14✔
262
263	const onSaveClick = selection => {	14✔
264	setChartType(selection.chartType);	×
265	setSoftware(selection.software);	×
266	setGroup(selection.group);	×
267	onSave(selection);	×
268	setEditing(false);	×
269	};
270
271	const Chart = chartTypeComponentMap[chartType];	14✔
272	const chartProps = {	14✔
273	classes,
274	data: distribution,
275	domainPadding: 0,
276	events: [{ target: 'data', eventHandlers: { onClick: onSliceClick } }],
277	standalone: true,
278	style: { data: { fill: ({ datum }) => datum.fill } },	×
279	labels: () => null	×
280	};
281	const couldHaveDevices = !group \|\| groups[group]?.deviceIds.length;	14!
282	if (removing) {	14!
283	return <RemovalWidget onCancel={toggleRemoving} onClick={onClick} />;	×
284	}
285	if (editing) {	14!
286	return (	×
287	<ChartEditWidget
288	groups={groups}
289	onSave={onSaveClick}
290	onCancel={onToggleEditClick}
291	selection={{ ...selection, chartType, group, software }}
292	software={softwareTree}
293	/>
294	);
295	}
296	return (	14✔
297	<div className="widget chart-widget">
298	<div className="margin-bottom-small">
299	<div className="flexbox space-between margin-bottom-small">
300	<Header chartType={chartType} />
301	<div className="flexbox center-aligned" style={{ zIndex: 1 }}>
302	<IconButton onClick={onToggleEditClick} size="small">
303	<Settings fontSize="small" />
304	</IconButton>
305	<IconButton onClick={toggleRemoving} size="small">
306	<ClearIcon fontSize="small" />
307	</IconButton>
308	</div>
309	</div>
310	<div className="flexbox space-between slightly-smaller">
311	<div>{softwareTitleMap[software] ? softwareTitleMap[software].title : software}</div>	14✔
312	<div>{group \|\| ALL_DEVICES}</div>	28✔
313	</div>
314	</div>
315	{distribution.length \|\| totals.length ? (	30✔
316	<Chart {...chartProps} totals={totals} />
317	) : couldHaveDevices ? (	2!
318	<div className="muted flexbox centered">There are no devices that match the selected criteria.</div>
319	) : (
320	<Loader show={true} />
321	)}
322	</div>
323	);
324	};
325
326	export default DistributionReport;

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