963002358

pending completion

Build # 963002358

Build Type

Pull #3870

gitlab-ci

Committed by

mzedel

Commit Message

chore: cleaned up left over onboarding tooltips & aligned with updated design

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #3870: MEN-5413

Run Details

4348 of 6319 branches covered (68.81%)

95 of 122 new or added lines in 24 files covered. (77.87%)

1734 existing lines in 160 files now uncovered.

8174 of 9951 relevant lines covered (82.14%)

178.12 hits per line

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

90.22

/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 () => {
      clearAllRetryTimers(dispatchedSetSnackbar);
    };
  }, [dispatchedSetSnackbar]);

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

  useEffect(() => {
    clearTimeout(dynamicTimer.current);
    setupDeploymentsRefresh();
    return () => {
      clearInterval(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;	7✔
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 }) => {	7✔
60	const { canConfigure, canDeploy } = useSelector(getUserCapabilities);	329✔
61	const { attribute: idAttribute } = useSelector(getIdAttribute);	329✔
62	const onboardingState = useSelector(getOnboardingState);	329✔
63	const isEnterprise = useSelector(getIsEnterprise);	329✔
64	const {
65	finished: { total: pastDeploymentsCount },
66	pending: { total: pendingCount },
67	inprogress: { total: progressCount }
68	} = useSelector(getDeploymentsByStatusSelector);	329✔
69	const progress = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.inprogress));	572✔
70	const pending = useSelector(state => getMappedDeploymentSelection(state, DEPLOYMENT_STATES.pending));	572✔
71	const selectionState = useSelector(getDeploymentsSelectionState);	329✔
72	const devices = useSelector(getDevicesById);	329✔
73	const dispatch = useDispatch();	329✔
74	const dispatchedSetSnackbar = useCallback((...args) => dispatch(setSnackbar(...args)), [dispatch]);	329✔
75
76	const { page: progressPage, perPage: progressPerPage } = selectionState.inprogress;	329✔
77	const { page: pendingPage, perPage: pendingPerPage } = selectionState.pending;	329✔
78
79	const [doneLoading, setDoneLoading] = useState(!!(progressCount \|\| pendingCount));	329✔
80	// eslint-disable-next-line no-unused-vars
81	const size = useWindowSize();	329✔
82
83	const currentRefreshDeploymentLength = useRef(refreshDeploymentsLength);	329✔
84	const inprogressRef = useRef();	329✔
85	const dynamicTimer = useRef();	329✔
86
87	const { classes } = useStyles();	329✔
88
89	// deploymentStatus = <inprogress\|pending>
90	const refreshDeployments = useCallback(	329✔
91	deploymentStatus => {
92	const { page, perPage } = selectionState[deploymentStatus];	56✔
93	return dispatch(getDeploymentsByStatus(deploymentStatus, page, perPage))	56✔
94	.then(deploymentsAction => {
95	clearRetryTimer(deploymentStatus, dispatchedSetSnackbar);	52✔
96	const { total, deploymentIds } = deploymentsAction[deploymentsAction.length - 1];	52✔
97	if (total && !deploymentIds.length) {	52!
UNCOV 98	return refreshDeployments(deploymentStatus);	×
99	}
100	})
UNCOV 101	.catch(err => setRetryTimer(err, 'deployments', `Couldn't load deployments.`, refreshDeploymentsLength, dispatchedSetSnackbar))	×
102	.finally(() => setDoneLoading(true));	52✔
103	},
104	// eslint-disable-next-line react-hooks/exhaustive-deps
105	[dispatch, dispatchedSetSnackbar, pendingPage, pendingPerPage, progressPage, progressPerPage]
106	);
107
108	const setupDeploymentsRefresh = useCallback(	329✔
109	(refreshLength = currentRefreshDeploymentLength.current) => {	11✔
110	let tasks = [refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)];	28✔
111	if (!onboardingState.complete && !pastDeploymentsCount) {	28✔
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)	28✔
116	.then(() => {
117	currentRefreshDeploymentLength.current = Math.min(refreshDeploymentsLength, refreshLength * 2);	26✔
118	clearTimeout(dynamicTimer.current);	26✔
119	dynamicTimer.current = setTimeout(setupDeploymentsRefresh, currentRefreshDeploymentLength.current);	26✔
120	})
121	.finally(() => setDoneLoading(true));	26✔
122	},
123	[dispatch, onboardingState.complete, pastDeploymentsCount, refreshDeployments]
124	);
125
126	useEffect(() => {	329✔
127	return () => {	8✔
128	clearAllRetryTimers(dispatchedSetSnackbar);	8✔
129	};
130	}, [dispatchedSetSnackbar]);
131
132	useEffect(() => {	329✔
133	clearTimeout(dynamicTimer.current);	17✔
134	setupDeploymentsRefresh(minimalRefreshDeploymentsLength);	17✔
135	return () => {	17✔
136	clearTimeout(dynamicTimer.current);	17✔
137	};
138	}, [pendingCount, setupDeploymentsRefresh]);
139
140	useEffect(() => {	329✔
141	clearTimeout(dynamicTimer.current);	10✔
142	setupDeploymentsRefresh();	10✔
143	return () => {	10✔
144	clearInterval(dynamicTimer.current);	10✔
145	};
146	}, [progressPage, progressPerPage, pendingPage, pendingPerPage, setupDeploymentsRefresh]);
147
148	const abortDeployment = id =>	329✔
UNCOV 149	abort(id).then(() => Promise.all([refreshDeployments(DEPLOYMENT_STATES.inprogress), refreshDeployments(DEPLOYMENT_STATES.pending)]));	×
150
151	const onChangePage = state => page => dispatch(setDeploymentsState({ [state]: { page } }));	623✔
152	const onChangeRowsPerPage = state => perPage => dispatch(setDeploymentsState({ [state]: { page: 1, perPage } }));	623✔
153
154	let onboardingComponent = null;	329✔
155	if (!onboardingState.complete && inprogressRef.current) {	329✔
156	const anchor = {	306✔
157	left: inprogressRef.current.offsetLeft + (inprogressRef.current.offsetWidth / 100) * 90,
158	top: inprogressRef.current.offsetTop + inprogressRef.current.offsetHeight
159	};
160	onboardingComponent = getOnboardingComponentFor(onboardingSteps.DEPLOYMENTS_INPROGRESS, onboardingState, { anchor });	306✔
161	}
162	const props = { ...remainder, canDeploy, canConfigure, devices, idAttribute, isEnterprise };	329✔
163	return doneLoading ? (	329✔
164	<div className="fadeIn">
165	{!!progress.length && (	626✔
166	<div className="margin-left">
167	<LinedHeader className="margin-top-large margin-right" heading="In progress now" />
168	<DeploymentsList
169	{...props}
170	abort={abortDeployment}
171	count={progressCount}
172	items={progress}
173	listClass="margin-right-small"
174	page={progressPage}
175	pageSize={progressPerPage}
176	rootRef={inprogressRef}
177	onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES.inprogress)}
178	onChangePage={onChangePage(DEPLOYMENT_STATES.inprogress)}
179	type={DEPLOYMENT_STATES.inprogress}
180	/>
181	</div>
182	)}
183	{!!onboardingComponent && onboardingComponent}	313!
184	{!!pending.length && (	623✔
185	<div className={`deployments-pending margin-top margin-bottom-large ${classes.deploymentsPending}`}>
186	<LinedHeader className="margin-small margin-top" heading="Pending" />
187	<DeploymentsList
188	{...props}
189	abort={abortDeployment}
190	componentClass="margin-left-small"
191	count={pendingCount}
192	items={pending}
193	page={pendingPage}
194	pageSize={pendingPerPage}
195	onChangeRowsPerPage={onChangeRowsPerPage(DEPLOYMENT_STATES)}
196	onChangePage={onChangePage(DEPLOYMENT_STATES.pending)}
197	type={DEPLOYMENT_STATES.pending}
198	/>
199	</div>
200	)}
201	{!(progressCount \|\| pendingCount) && (	626!
202	<div className="dashboard-placeholder">
203	<p>Pending and ongoing deployments will appear here. </p>
204	{canDeploy && (	×
205	<p>
206	<a onClick={createClick}>Create a deployment</a> to get started
207	</p>
208	)}
209	<RefreshIcon className="flip-horizontal" style={{ fill: '#e3e3e3', width: 111, height: 111 }} />
210	</div>
211	)}
212	</div>
213	) : (
214	<Loader show={doneLoading} />
215	);
216	};
217
218	export default Progress;

mendersoftware / gui / 963002358

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