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

95.45

/src/js/components/deployments/inprogressdeployments.js

// Copyright 2015 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, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { Refresh as RefreshIcon } from '@mui/icons-material';
import { makeStyles } from 'tss-react/mui';

import { setSnackbar } from '../../actions/appActions';
import { getDeploymentsByStatus, setDeploymentsState } from '../../actions/deploymentActions';
import { DEPLOYMENT_STATES } from '../../constants/deploymentConstants';
import { onboardingSteps } from '../../constants/onboardingConstants';
import {
  getDeploymentsByStatus as getDeploymentsByStatusSelector,
  getDeploymentsSelectionState,
  getDevicesById,
  getIdAttribute,
  getIsEnterprise,
  getMappedDeploymentSelection,
  getOnboardingState,
  getUserCapabilities
} from '../../selectors';
import { getOnboardingComponentFor } from '../../utils/onboardingmanager';
import useWindowSize from '../../utils/resizehook';
import { clearAllRetryTimers, clearRetryTimer, setRetryTimer } from '../../utils/retrytimer';
import LinedHeader from '../common/lined-header';
import Loader from '../common/loader';
import { defaultRefreshDeploymentsLength as refreshDeploymentsLength } from './deployments';
import DeploymentsList from './deploymentslist';

export const minimalRefreshDeploymentsLength = 2000;

const useStyles = makeStyles()(theme => ({
  deploymentsPending: {
    borderColor: 'rgba(0, 0, 0, 0.06)',
    backgroundColor: theme.palette.background.light,
    color: theme.palette.text.primary,
    ['.dashboard-header span']: {
      backgroundColor: theme.palette.background.light,
      color: theme.palette.text.primary
    },
    ['.MuiButtonBase-root']: {
      color: theme.palette.text.primary
    }
  }
}));

export const Progress = ({ abort, createClick, ...remainder }) => {
  const { canConfigure, canDeploy } = useSelector(getUserCapabilities);
  const { attribute: idAttribute } = useSelector(getIdAttribute);
  const onboardingState = useSelector(getOnboardingState);
  const isEnterprise = useSelector(getIsEnterprise);
  const {
    finished: { total: pastDeploymentsCount },
    pending: { total: pendingCount },
    inprogress: { total: progressCount }
  } = useSelector(getDeploymentsByStatusSelector);
  const progress = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.inprogress));
  const pending = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.pending));
  const selectionState = useSelector(getDeploymentsSelectionState);
  const devices = useSelector(getDevicesById);
  const dispatch = useDispatch();
  const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);

  const { page: progressPage, perPage: progressPerPage } = selectionState.inprogress;
  const { page: pendingPage, perPage: pendingPerPage } = selectionState.pending;

  const [doneLoading, setDoneLoading] = useState(!!(progressCount || pendingCount));
  // eslint-disable-next-line no-unused-vars
  const size = useWindowSize();

  const currentRefreshDeploymentLength = useRef(refreshDeploymentsLength);
  const inprogressRef = useRef();
  const dynamicTimer = useRef();

  const { classes } = useStyles();

  // deploymentStatus = <inprogress|pending>
  const refreshDeployments = useCallback(
    deploymentStatus => {
      const { page, perPage } = selectionState[deploymentStatus];
      return dispatch(getDeploymentsByStatus(deploymentStatus, page, perPage))
        .then(deploymentsAction => {
          clearRetryTimer(deploymentStatus, dispatchedSetSnackbar);
          const { total, deploymentIds } = deploymentsAction[deploymentsAction.length - 1];
          if (total && !deploymentIds.length) {
            return refreshDeployments(deploymentStatus);
          }
        })
        .catch(err => setRetryTimer(err, 'deployments', `Couldn't load deployments.`, refreshDeploymentsLength, dispatchedSetSnackbar))
        .finally(() => setDoneLoading(true));
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [dispatch, dispatchedSetSnackbar, pendingPage, pendingPerPage, progressPage, progressPerPage]
  );

  const setupDeploymentsRefresh = useCallback(
    (refreshLength = currentRefreshDeploymentLength.current) => {
      let tasks = [refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)];
      if (!onboardingState.complete && !pastDeploymentsCount) {
        // retrieve past deployments outside of the regular refresh cycle to not change the selection state for past deployments
        dispatch(getDeploymentsByStatus(DEPLOYMENT_STATES.finished, 1, 1, undefined, undefined, undefined, undefined, false));
      }
      return Promise.all(tasks)
        .then(() => {
          currentRefreshDeploymentLength.current = Math.min(refreshDeploymentsLength, refreshLength * 2);
          clearTimeout(dynamicTimer.current);
          dynamicTimer.current = setTimeout(setupDeploymentsRefresh, currentRefreshDeploymentLength.current);
        })
        .finally(() => setDoneLoading(true));
    },
    [dispatch, onboardingState.complete, pastDeploymentsCount, refreshDeployments]
  );

  useEffect(() => {
    return () => {
      clearTimeout(dynamicTimer.current);
    };
  }, []);

  useEffect(() => {
    return () => {
      clearAllRetryTimers(dispatchedSetSnackbar);
    };
  }, [dispatchedSetSnackbar]);

  useEffect(() => {
    clearTimeout(dynamicTimer.current);
    setupDeploymentsRefresh(minimalRefreshDeploymentsLength);
    return () => {
      clearTimeout(dynamicTimer.current);
    };
  }, [pendingCount, setupDeploymentsRefresh]);

  useEffect(() => {
    clearTimeout(dynamicTimer.current);
    setupDeploymentsRefresh();
    return () => {
      clearTimeout(dynamicTimer.current);
    };
  }, [progressPage, progressPerPage, pendingPage, pendingPerPage, setupDeploymentsRefresh]);

  const abortDeployment = id =>
    abort(id).then(() => Promise.all([refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)]));

  const onChangePage = state => page => dispatch(setDeploymentsState({ [state]: { page } }));
  const onChangeRowsPerPage = state => perPage => dispatch(setDeploymentsState({ [state]: { page: 1, perPage } }));

  let onboardingComponent = null;
  if (!onboardingState.complete && inprogressRef.current) {
    const anchor = {
      left: inprogressRef.current.offsetLeft + (inprogressRef.current.offsetWidth / 100) * 90,
      top: inprogressRef.current.offsetTop + inprogressRef.current.offsetHeight
    };
    onboardingComponent = getOnboardingComponentFor(onboardingSteps.DEPLOYMENTS_INPROGRESS, onboardingState, { anchor });
  }
  const props = { ...remainder, canDeploy, canConfigure, devices, idAttribute, isEnterprise };
  return doneLoading ? (
    <div className="fadeIn">
      {!!progress.length && (
        <div className="margin-left">
          <LinedHeader className="margin-top-large  margin-right" heading="In progress now" />
          <DeploymentsList
            {...props}
            abort={abortDeployment}
            count={progressCount}
            items={progress}
            listClass="margin-right-small"
            page={progressPage}
            pageSize={progressPerPage}
            rootRef={inprogressRef}
            onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES.inprogress)}
            onChangePage={onChangePage(DEPLOYMENT_STATES.inprogress)}
            type={DEPLOYMENT_STATES.inprogress}
          />
        </div>
      )}
      {!!onboardingComponent && onboardingComponent}
      {!!pending.length && (
        <div className={`deployments-pending margin-top margin-bottom-large ${classes.deploymentsPending}`}>
          <LinedHeader className="margin-small margin-top" heading="Pending" />
          <DeploymentsList
            {...props}
            abort={abortDeployment}
            componentClass="margin-left-small"
            count={pendingCount}
            items={pending}
            page={pendingPage}
            pageSize={pendingPerPage}
            onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES)}
            onChangePage={onChangePage(DEPLOYMENT_STATES.pending)}
            type={DEPLOYMENT_STATES.pending}
          />
        </div>
      )}
      {!(progressCount || pendingCount) && (
        <div className="dashboard-placeholder">
          <p>Pending and ongoing deployments will appear here. </p>
          {canDeploy && (
            <p>
              <a onClick={createClick}>Create a deployment</a> to get started
            </p>
          )}
          <RefreshIcon className="flip-horizontal" style={{ fill: '#e3e3e3', width: 111, height: 111 }} />
        </div>
      )}
    </div>
  ) : (
    <Loader show={doneLoading} />
  );
};

export default Progress;

1	// Copyright 2015 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, useRef, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	import { Refresh as RefreshIcon } from '@mui/icons-material';
18	import { makeStyles } from 'tss-react/mui';
19
20	import { setSnackbar } from '../../actions/appActions';
21	import { getDeploymentsByStatus, setDeploymentsState } from '../../actions/deploymentActions';
22	import { DEPLOYMENT_STATES } from '../../constants/deploymentConstants';
23	import { onboardingSteps } from '../../constants/onboardingConstants';
24	import {
25	getDeploymentsByStatus as getDeploymentsByStatusSelector,
26	getDeploymentsSelectionState,
27	getDevicesById,
28	getIdAttribute,
29	getIsEnterprise,
30	getMappedDeploymentSelection,
31	getOnboardingState,
32	getUserCapabilities
33	} from '../../selectors';
34	import { getOnboardingComponentFor } from '../../utils/onboardingmanager';
35	import useWindowSize from '../../utils/resizehook';
36	import { clearAllRetryTimers, clearRetryTimer, setRetryTimer } from '../../utils/retrytimer';
37	import LinedHeader from '../common/lined-header';
38	import Loader from '../common/loader';
39	import { defaultRefreshDeploymentsLength as refreshDeploymentsLength } from './deployments';
40	import DeploymentsList from './deploymentslist';
41
42	export const minimalRefreshDeploymentsLength = 2000;	6✔
43
44	const useStyles = makeStyles()(theme => ({	8✔
45	deploymentsPending: {
46	borderColor: 'rgba(0, 0, 0, 0.06)',
47	backgroundColor: theme.palette.background.light,
48	color: theme.palette.text.primary,
49	['.dashboard-header span']: {
50	backgroundColor: theme.palette.background.light,
51	color: theme.palette.text.primary
52	},
53	['.MuiButtonBase-root']: {
54	color: theme.palette.text.primary
55	}
56	}
57	}));
58
59	export const Progress = ({ abort, createClick, ...remainder }) => {	6✔
60	const { canConfigure, canDeploy } = useSelector(getUserCapabilities);	323✔
61	const { attribute: idAttribute } = useSelector(getIdAttribute);	323✔
62	const onboardingState = useSelector(getOnboardingState);	323✔
63	const isEnterprise = useSelector(getIsEnterprise);	323✔
64	const {
65	finished: { total: pastDeploymentsCount },
66	pending: { total: pendingCount },
67	inprogress: { total: progressCount }
68	} = useSelector(getDeploymentsByStatusSelector);	323✔
69	const progress = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.inprogress));	565✔
70	const pending = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.pending));	565✔
71	const selectionState = useSelector(getDeploymentsSelectionState);	323✔
72	const devices = useSelector(getDevicesById);	323✔
73	const dispatch = useDispatch();	323✔
74	const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);	323✔
75
76	const { page: progressPage, perPage: progressPerPage } = selectionState.inprogress;	323✔
77	const { page: pendingPage, perPage: pendingPerPage } = selectionState.pending;	323✔
78
79	const [doneLoading, setDoneLoading] = useState(!!(progressCount \|\| pendingCount));	323✔
80	// eslint-disable-next-line no-unused-vars
81	const size = useWindowSize();	323✔
82
83	const currentRefreshDeploymentLength = useRef(refreshDeploymentsLength);	323✔
84	const inprogressRef = useRef();	323✔
85	const dynamicTimer = useRef();	323✔
86
87	const { classes } = useStyles();	323✔
88
89	// deploymentStatus = <inprogress\|pending>
90	const refreshDeployments = useCallback(	323✔
91	deploymentStatus => {
92	const { page, perPage } = selectionState[deploymentStatus];	58✔
93	return dispatch(getDeploymentsByStatus(deploymentStatus, page, perPage))	58✔
94	.then(deploymentsAction => {
95	clearRetryTimer(deploymentStatus, dispatchedSetSnackbar);	54✔
96	const { total, deploymentIds } = deploymentsAction[deploymentsAction.length - 1];	54✔
97	if (total && !deploymentIds.length) {	54!
98	return refreshDeployments(deploymentStatus);	×
99	}
100	})
101	.catch(err => setRetryTimer(err, 'deployments', `Couldn't load deployments.`, refreshDeploymentsLength, dispatchedSetSnackbar))	×
102	.finally(() => setDoneLoading(true));	54✔
103	},
104	// eslint-disable-next-line react-hooks/exhaustive-deps
105	[dispatch, dispatchedSetSnackbar, pendingPage, pendingPerPage, progressPage, progressPerPage]
106	);
107
108	const setupDeploymentsRefresh = useCallback(	323✔
109	(refreshLength = currentRefreshDeploymentLength.current) => {	11✔
110	let tasks = [refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)];	29✔
111	if (!onboardingState.complete && !pastDeploymentsCount) {	29✔
112	// retrieve past deployments outside of the regular refresh cycle to not change the selection state for past deployments
113	dispatch(getDeploymentsByStatus(DEPLOYMENT_STATES.finished, 1, 1, undefined, undefined, undefined, undefined, false));	10✔
114	}
115	return Promise.all(tasks)	29✔
116	.then(() => {
117	currentRefreshDeploymentLength.current = Math.min(refreshDeploymentsLength, refreshLength * 2);	27✔
118	clearTimeout(dynamicTimer.current);	27✔
119	dynamicTimer.current = setTimeout(setupDeploymentsRefresh, currentRefreshDeploymentLength.current);	27✔
120	})
121	.finally(() => setDoneLoading(true));	27✔
122	},
123	[dispatch, onboardingState.complete, pastDeploymentsCount, refreshDeployments]
124	);
125
126	useEffect(() => {	323✔
127	return () => {	8✔
128	clearTimeout(dynamicTimer.current);	8✔
129	};
130	}, []);
131
132	useEffect(() => {	323✔
133	return () => {	8✔
134	clearAllRetryTimers(dispatchedSetSnackbar);	8✔
135	};
136	}, [dispatchedSetSnackbar]);
137
138	useEffect(() => {	323✔
139	clearTimeout(dynamicTimer.current);	18✔
140	setupDeploymentsRefresh(minimalRefreshDeploymentsLength);	18✔
141	return () => {	18✔
142	clearTimeout(dynamicTimer.current);	18✔
143	};
144	}, [pendingCount, setupDeploymentsRefresh]);
145
146	useEffect(() => {	323✔
147	clearTimeout(dynamicTimer.current);	11✔
148	setupDeploymentsRefresh();	11✔
149	return () => {	11✔
150	clearTimeout(dynamicTimer.current);	11✔
151	};
152	}, [progressPage, progressPerPage, pendingPage, pendingPerPage, setupDeploymentsRefresh]);
153
154	const abortDeployment = id =>	323✔
155	abort(id).then(() => Promise.all([refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)]));	×
156
157	const onChangePage = state => page => dispatch(setDeploymentsState({ [state]: { page } }));	615✔
158	const onChangeRowsPerPage = state => perPage => dispatch(setDeploymentsState({ [state]: { page: 1, perPage } }));	615✔
159
160	let onboardingComponent = null;	323✔
161	if (!onboardingState.complete && inprogressRef.current) {	323✔
162	const anchor = {	196✔
163	left: inprogressRef.current.offsetLeft + (inprogressRef.current.offsetWidth / 100) * 90,
164	top: inprogressRef.current.offsetTop + inprogressRef.current.offsetHeight
165	};
166	onboardingComponent = getOnboardingComponentFor(onboardingSteps.DEPLOYMENTS_INPROGRESS, onboardingState, { anchor });	196✔
167	}
168	const props = { ...remainder, canDeploy, canConfigure, devices, idAttribute, isEnterprise };	323✔
169	return doneLoading ? (	323✔
170	<div className="fadeIn">
171	{!!progress.length && (	618✔
172	<div className="margin-left">
173	<LinedHeader className="margin-top-large margin-right" heading="In progress now" />
174	<DeploymentsList
175	{...props}
176	abort={abortDeployment}
177	count={progressCount}
178	items={progress}
179	listClass="margin-right-small"
180	page={progressPage}
181	pageSize={progressPerPage}
182	rootRef={inprogressRef}
183	onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES.inprogress)}
184	onChangePage={onChangePage(DEPLOYMENT_STATES.inprogress)}
185	type={DEPLOYMENT_STATES.inprogress}
186	/>
187	</div>
188	)}
189	{!!onboardingComponent && onboardingComponent}	309!
190	{!!pending.length && (	615✔
191	<div className={`deployments-pending margin-top margin-bottom-large ${classes.deploymentsPending}`}>
192	<LinedHeader className="margin-small margin-top" heading="Pending" />
193	<DeploymentsList
194	{...props}
195	abort={abortDeployment}
196	componentClass="margin-left-small"
197	count={pendingCount}
198	items={pending}
199	page={pendingPage}
200	pageSize={pendingPerPage}
201	onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES)}
202	onChangePage={onChangePage(DEPLOYMENT_STATES.pending)}
203	type={DEPLOYMENT_STATES.pending}
204	/>
205	</div>
206	)}
207	{!(progressCount \|\| pendingCount) && (	618!
208	<div className="dashboard-placeholder">
209	<p>Pending and ongoing deployments will appear here. </p>
210	{canDeploy && (	×
211	<p>
212	<a onClick={createClick}>Create a deployment</a> to get started
213	</p>
214	)}
215	<RefreshIcon className="flip-horizontal" style={{ fill: '#e3e3e3', width: 111, height: 111 }} />
216	</div>
217	)}
218	</div>
219	) : (
220	<Loader show={doneLoading} />
221	);
222	};
223
224	export default Progress;

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