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

90.82

/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 { tryMapDeployments } from '../../helpers';
import { getIdAttribute, getIsEnterprise, 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 dispatch = useDispatch();
  const dispatchedSetSnackbar = (...args) => dispatch(setSnackbar(...args));
  const progress = useSelector(
    state => state.deployments.selectionState.inprogress.selection.reduce(tryMapDeployments, { state, deployments: [] }).deployments
  );
  const pending = useSelector(state => state.deployments.selectionState.pending.selection.reduce(tryMapDeployments, { state, deployments: [] }).deployments);
  const { canConfigure, canDeploy } = useSelector(getUserCapabilities);
  const { attribute: idAttribute } = useSelector(getIdAttribute);
  const onboardingState = useSelector(getOnboardingState);
  const isEnterprise = useSelector(getIsEnterprise);
  const pastDeploymentsCount = useSelector(state => state.deployments.byStatus.finished.total);
  const pendingCount = useSelector(state => state.deployments.byStatus.pending.total);
  const progressCount = useSelector(state => state.deployments.byStatus.inprogress.total);
  const selectionState = useSelector(state => state.deployments.selectionState);
  const devices = useSelector(state => state.devices.byId);

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

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

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

  const { classes } = useStyles();

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

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

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

  const setupDeploymentsRefresh = (refreshLength = currentRefreshDeploymentLength) => {
    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(() => {
        const currentRefreshDeploymentLength = Math.min(refreshDeploymentsLength, refreshLength * 2);
        setCurrentRefreshDeploymentLength(currentRefreshDeploymentLength);
        clearTimeout(dynamicTimer.current);
        dynamicTimer.current = setTimeout(setupDeploymentsRefresh, currentRefreshDeploymentLength);
      })
      .finally(() => setDoneLoading(true));
  };

  // 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));
    },
    [pendingPage, pendingPerPage, progressPage, progressPerPage]
  );

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

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

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