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

89.19

/src/js/components/deployments/deployment-wizard/rolloutoptions.js

// Copyright 2021 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 { Autocomplete, Checkbox, Collapse, FormControl, FormControlLabel, FormGroup, TextField } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { BENEFITS, TIMEOUTS } from '../../../constants/appConstants';
import { toggle } from '../../../helpers';
import { useDebounce } from '../../../utils/debouncehook';
import { DOCSTIPS, DocsTooltip } from '../../common/docslink';
import EnterpriseNotification from '../../common/enterpriseNotification';
import { InfoHintContainer } from '../../common/info-hint';
import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
import RolloutSteps from './rolloutsteps';

const useStyles = makeStyles()(() => ({
  defaultBox: { marginTop: 0, marginBottom: -15 },
  heading: { marginBottom: 0 },
  retryInput: { maxWidth: 150, minWidth: 130 },
  wrapper: { minHeight: 300 }
}));

export const ForceDeploy = ({ deploymentObject, setDeploymentSettings }) => {
  const [forceDeploy, setForceDeploy] = useState(deploymentObject.forceDeploy ?? false);
  const { classes } = useStyles();

  useEffect(() => {
    setDeploymentSettings({ forceDeploy });
  }, [forceDeploy, setDeploymentSettings]);

  return (
    <div>
      <FormControlLabel
        className={classes.heading}
        control={<Checkbox color="primary" checked={forceDeploy} onChange={() => setForceDeploy(toggle)} size="small" />}
        label={
          <div className="flexbox center-aligned">
            <b className="margin-right-small">Force update</b> (optional)
            <MenderHelpTooltip
              id={HELPTOOLTIPS.forceDeployment.id}
              disableFocusListener={false}
              disableHoverListener={false}
              disableTouchListener={false}
              style={{ marginLeft: 15 }}
            />
          </div>
        }
      />
    </div>
  );
};

export const RolloutOptions = ({ deploymentObject, isEnterprise, setDeploymentSettings }) => {
  const { phases = [], release = {} } = deploymentObject;
  const { classes } = useStyles();

  const { states = {} } = deploymentObject.update_control_map || {};
  const [isPaused, setIsPaused] = useState(!!Object.keys(states).length);

  const onStepChangeClick = step => {
    const { action } = step;
    setDeploymentSettings({ update_control_map: { states: { ...states, [step.state]: { action } } } });
  };

  const onIsPausedClick = () => setIsPaused(toggle);

  return (
    <>
      <FormControlLabel
        className={classes.heading}
        control={<Checkbox color="primary" checked={isPaused} disabled={!isEnterprise} onChange={onIsPausedClick} size="small" />}
        label={
          <div className="flexbox center-aligned">
            <b className="margin-right-small">Add pauses between update steps</b> (optional)
            <InfoHintContainer>
              <EnterpriseNotification id={BENEFITS.pausedDeployments.id} />
              <DocsTooltip id={DOCSTIPS.pausedDeployments.id} />
            </InfoHintContainer>
          </div>
        }
      />
      <Collapse in={isPaused} className={classes.wrapper}>
        <RolloutSteps disabled={phases.length > 1 || !isEnterprise} onStepChange={onStepChangeClick} release={release} steps={states} />
      </Collapse>
    </>
  );
};

export const Retries = ({
  canRetry,
  commonClasses,
  deploymentObject,
  hasNewRetryDefault = false,
  onSaveRetriesSetting,
  previousRetries,
  setDeploymentSettings
}) => {
  const { retries } = deploymentObject;
  const { classes } = useStyles();

  const [currentAttempts, setCurrentAttempts] = useState(Number(retries ?? previousRetries ?? 0) + 1);
  const debouncedAttempts = useDebounce(currentAttempts, TIMEOUTS.debounceShort);

  useEffect(() => {
    setDeploymentSettings({ retries: Number(debouncedAttempts) - 1 });
  }, [debouncedAttempts, setDeploymentSettings]);

  const formatValue = value => {
    const newValue = Math.max(0, Math.min(value, 100));
    return newValue ? `${newValue}` : '';
  };

  const onInputChange = (e, value, reason) => {
    if (reason === 'clear') {
      return setDeploymentSettings({ retries: 0 });
    } else if ((reason === 'reset' && !e) || reason === 'blur') {
      return;
    }
    setCurrentAttempts(formatValue(value));
  };

  const onSaveRetriesSettingClick = (_, checked) => onSaveRetriesSetting(checked);

  return (
    <>
      <div className="flexbox center-aligned margin-top-small">
        <b className={canRetry ? '' : commonClasses.disabled}>Select the number of times each device will attempt to apply the update</b>
        <InfoHintContainer>
          <EnterpriseNotification id={BENEFITS.retryDeployments.id} />
          <DocsTooltip id={DOCSTIPS.phasedDeployments.id} />
        </InfoHintContainer>
      </div>
      <FormControl className="margin-top-none" disabled={!canRetry}>
        <FormGroup row>
          <Autocomplete
            autoSelect
            autoHighlight
            className={`margin-right ${classes.retryInput}`}
            freeSolo
            disabled={!canRetry}
            getOptionLabel={formatValue}
            handleHomeEndKeys
            id="deployment-retries-selection"
            options={[1, 2, 3, 4]}
            onInputChange={onInputChange}
            renderInput={params => (
              <TextField
                {...params}
                className={classes.retryInput}
                inputProps={{ ...params.inputProps, value: formatValue(params.inputProps.value) }}
                InputProps={{ ...params.InputProps }}
                type="number"
              />
            )}
            value={currentAttempts}
          />
          <FormControlLabel
            className={classes.defaultBox}
            control={<Checkbox checked={hasNewRetryDefault} onChange={onSaveRetriesSettingClick} />}
            label="Save as default"
          />
        </FormGroup>
      </FormControl>
    </>
  );
};

1	// Copyright 2021 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
16	import { Autocomplete, Checkbox, Collapse, FormControl, FormControlLabel, FormGroup, TextField } from '@mui/material';
17	import { makeStyles } from 'tss-react/mui';
18
19	import { BENEFITS, TIMEOUTS } from '../../../constants/appConstants';
20	import { toggle } from '../../../helpers';
21	import { useDebounce } from '../../../utils/debouncehook';
22	import { DOCSTIPS, DocsTooltip } from '../../common/docslink';
23	import EnterpriseNotification from '../../common/enterpriseNotification';
24	import { InfoHintContainer } from '../../common/info-hint';
25	import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
26	import RolloutSteps from './rolloutsteps';
27
28	const useStyles = makeStyles()(() => ({	18✔
29	defaultBox: { marginTop: 0, marginBottom: -15 },
30	heading: { marginBottom: 0 },
31	retryInput: { maxWidth: 150, minWidth: 130 },
32	wrapper: { minHeight: 300 }
33	}));
34
35	export const ForceDeploy = ({ deploymentObject, setDeploymentSettings }) => {	11✔
36	const [forceDeploy, setForceDeploy] = useState(deploymentObject.forceDeploy ?? false);	242✔
37	const { classes } = useStyles();	242✔
38
39	useEffect(() => {	242✔
40	setDeploymentSettings({ forceDeploy });	6✔
41	}, [forceDeploy, setDeploymentSettings]);
42
43	return (	242✔
44	<div>
45	<FormControlLabel
46	className={classes.heading}
47	control={<Checkbox color="primary" checked={forceDeploy} onChange={() => setForceDeploy(toggle)} size="small" />}	×
48	label={
49	<div className="flexbox center-aligned">
50	<b className="margin-right-small">Force update</b> (optional)
51	<MenderHelpTooltip
52	id={HELPTOOLTIPS.forceDeployment.id}
53	disableFocusListener={false}
54	disableHoverListener={false}
55	disableTouchListener={false}
56	style={{ marginLeft: 15 }}
57	/>
58	</div>
59	}
60	/>
61	</div>
62	);
63	};
64
65	export const RolloutOptions = ({ deploymentObject, isEnterprise, setDeploymentSettings }) => {	11✔
66	const { phases = [], release = {} } = deploymentObject;	242✔
67	const { classes } = useStyles();	242✔
68
69	const { states = {} } = deploymentObject.update_control_map \|\| {};	242✔
70	const [isPaused, setIsPaused] = useState(!!Object.keys(states).length);	242✔
71
72	const onStepChangeClick = step => {	242✔
73	const { action } = step;	×
74	setDeploymentSettings({ update_control_map: { states: { ...states, [step.state]: { action } } } });	×
75	};
76
77	const onIsPausedClick = () => setIsPaused(toggle);	242✔
78
79	return (	242✔
80	<>
81	<FormControlLabel
82	className={classes.heading}
83	control={<Checkbox color="primary" checked={isPaused} disabled={!isEnterprise} onChange={onIsPausedClick} size="small" />}
84	label={
85	<div className="flexbox center-aligned">
86	<b className="margin-right-small">Add pauses between update steps</b> (optional)
87	<InfoHintContainer>
88	<EnterpriseNotification id={BENEFITS.pausedDeployments.id} />
89	<DocsTooltip id={DOCSTIPS.pausedDeployments.id} />
90	</InfoHintContainer>
91	</div>
92	}
93	/>
94	<Collapse in={isPaused} className={classes.wrapper}>
95	<RolloutSteps disabled={phases.length > 1 \|\| !isEnterprise} onStepChange={onStepChangeClick} release={release} steps={states} />	441✔
96	</Collapse>
97	</>
98	);
99	};
100
101	export const Retries = ({	11✔
102	canRetry,
103	commonClasses,
104	deploymentObject,
105	hasNewRetryDefault = false,	2✔
106	onSaveRetriesSetting,
107	previousRetries,
108	setDeploymentSettings
109	}) => {
110	const { retries } = deploymentObject;	244✔
111	const { classes } = useStyles();	244✔
112
113	const [currentAttempts, setCurrentAttempts] = useState(Number(retries ?? previousRetries ?? 0) + 1);	244!
114	const debouncedAttempts = useDebounce(currentAttempts, TIMEOUTS.debounceShort);	244✔
115
116	useEffect(() => {	244✔
117	setDeploymentSettings({ retries: Number(debouncedAttempts) - 1 });	7✔
118	}, [debouncedAttempts, setDeploymentSettings]);
119
120	const formatValue = value => {	244✔
121	const newValue = Math.max(0, Math.min(value, 100));	530✔
122	return newValue ? `${newValue}` : '';	530✔
123	};
124
125	const onInputChange = (e, value, reason) => {	244✔
126	if (reason === 'clear') {	7!
127	return setDeploymentSettings({ retries: 0 });	×
128	} else if ((reason === 'reset' && !e) \|\| reason === 'blur') {	7✔
129	return;	6✔
130	}
131	setCurrentAttempts(formatValue(value));	1✔
132	};
133
134	const onSaveRetriesSettingClick = (_, checked) => onSaveRetriesSetting(checked);	244✔
135
136	return (	244✔
137	<>
138	<div className="flexbox center-aligned margin-top-small">
139	<b className={canRetry ? '' : commonClasses.disabled}>Select the number of times each device will attempt to apply the update</b>	244✔
140	<InfoHintContainer>
141	<EnterpriseNotification id={BENEFITS.retryDeployments.id} />
142	<DocsTooltip id={DOCSTIPS.phasedDeployments.id} />
143	</InfoHintContainer>
144	</div>
145	<FormControl className="margin-top-none" disabled={!canRetry}>
146	<FormGroup row>
147	<Autocomplete
148	autoSelect
149	autoHighlight
150	className={`margin-right ${classes.retryInput}`}
151	freeSolo
152	disabled={!canRetry}
153	getOptionLabel={formatValue}
154	handleHomeEndKeys
155	id="deployment-retries-selection"
156	options={[1, 2, 3, 4]}
157	onInputChange={onInputChange}
158	renderInput={params => (
159	<TextField	250✔
160	{...params}
161	className={classes.retryInput}
162	inputProps={{ ...params.inputProps, value: formatValue(params.inputProps.value) }}
163	InputProps={{ ...params.InputProps }}
164	type="number"
165	/>
166	)}
167	value={currentAttempts}
168	/>
169	<FormControlLabel
170	className={classes.defaultBox}
171	control={<Checkbox checked={hasNewRetryDefault} onChange={onSaveRetriesSettingClick} />}
172	label="Save as default"
173	/>
174	</FormGroup>
175	</FormControl>
176	</>
177	);
178	};

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