mendersoftware / gui / 951400782

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

78.79
/src/js/components/deployments/deployment-report/rolloutschedule.js
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 from 'react';
15 









16



import { ArrowForward } from '@mui/icons-material';










17



import { Chip } from '@mui/material';










18



import { makeStyles } from 'tss-react/mui';










19












20



import moment from 'moment';










21



import momentDurationFormatSetup from 'moment-duration-format';










22



import pluralize from 'pluralize';










23












24



import { DEPLOYMENT_STATES } from '../../../constants/deploymentConstants';










25



import { formatTime, getPhaseDeviceCount, getRemainderPercent } from '../../../helpers';










26



import { TwoColumnData } from '../../common/configurationobject';










27



import LinedHeader from '../../common/lined-header';










28



import Time from '../../common/time';










29



import { getPhaseStartTime } from '../createdeployment';










30



import { ProgressChartComponent, getDeploymentPhasesInfo, getDisplayablePhases } from '../progressChart';










31



import { defaultColumnDataProps } from '../report';










32



import PhaseProgress from './phaseprogress';










33












34



const useStyles = makeStyles()(theme => ({




11✔





35



  currentPhaseInfo: { backgroundColor: theme.palette.grey[400] },










36



  phaseInfo: { maxWidth: maxPhaseWidth, borderRadius: 5, paddingTop: theme.spacing(), paddingBottom: theme.spacing(3) },










37



  phaseIndex: { alignSelf: 'flex-start', margin: theme.spacing(2), marginLeft: theme.spacing(2.5) },










38



  phasesOverviewArrow: { marginLeft: theme.spacing(4), marginRight: theme.spacing(4) }










39



}));










40












41



momentDurationFormatSetup(moment);




11✔





42












43



const maxPhaseWidth = 270;




11✔





44












45



const PhaseLabel = ({ index }) => <div className="capitalized progress-step-number muted">Phase {index + 1}</div>;




11✔





46












47



export const RolloutSchedule = ({ deployment, headerClass, innerRef, onAbort, onUpdateControlChange }) => {




11✔





48



  const { classes } = useStyles();




5✔





49



  const now = moment();




5✔





50



  const { created: creationTime = now.toISOString(), filter = {}, finished, status, update_control_map } = deployment;





5✔





51



  const { id: filterId } = filter;




5✔





52












53



  const { phases, reversedPhases, totalDeviceCount, ...remainder } = getDeploymentPhasesInfo(deployment);




5✔





54












55



  const start_time = phases[0].start_ts || creationTime;





5✔





56



  const currentPhase = reversedPhases.find(phase => now.isAfter(phase.start_ts)) || phases[0];





5✔





57



  const currentPhaseIndex = phases.findIndex(phase => phase.id === currentPhase.id);




5✔





58



  const currentPhaseStartTime = getPhaseStartTime(phases, currentPhaseIndex, start_time);




5✔





59



  let currentPhaseTime = 'N/A';




5✔





60



  if (now.isSameOrAfter(currentPhaseStartTime)) {





5!





61



    currentPhaseTime = currentPhaseIndex + 1;




5✔





62



  }










63



  const endTime = finished ? <Time value={formatTime(finished)} /> : filterId ? 'N/A' : '-';





5!





64












65



  const displayablePhases = getDisplayablePhases({ currentPhase, phases, totalDeviceCount, ...remainder });




5✔





66



  return (




5✔





67



    <>










68



      <LinedHeader className={`margin-top-large ${headerClass}`} heading="Schedule details" innerRef={innerRef} />










69



      {phases.length > 1 || !update_control_map ? (





15!





70



        <>










71



          <div className="flexbox">










72



            <TwoColumnData










73



              {...defaultColumnDataProps}










74



              config={{










75



                'Start time': <Time value={formatTime(creationTime)} />,










76



                'Current phase': currentPhaseTime










77



              }}










78



            />










79



            <ArrowForward className={classes.phasesOverviewArrow} />










80



            <TwoColumnData {...defaultColumnDataProps} config={{ 'End time': endTime }} />










81



          </div>










82



          <ProgressChartComponent className="margin-top no-background" phases={displayablePhases} PhaseLabel={PhaseLabel} />










83



        </>










84



      ) : (










85



        <PhaseProgress deployment={deployment} onAbort={onAbort} onUpdateControlChange={onUpdateControlChange} />










86



      )}










87



      <div className="deployment-phases-report margin-top margin-bottom" style={{ gridTemplateColumns: `repeat(auto-fit, ${maxPhaseWidth}px)` }}>










88



        {phases.map((phase, index) => {










89



          phase.batch_size = phase.batch_size || getRemainderPercent(phases);





5✔





90



          const deviceCount = getPhaseDeviceCount(totalDeviceCount, phase.batch_size, phase.batch_size, index === phases.length - 1);




5✔





91



          const deviceCountText = !filterId ? ` (${deviceCount} ${pluralize('device', deviceCount)})` : '';





5!





92



          const startTime = phase.start_ts ?? getPhaseStartTime(phases, index, start_time);





5✔





93



          const phaseObject = {




5✔





94



            'Start time': <Time value={startTime} />,










95



            'Batch size': <div className="muted">{`${phase.batch_size}%${deviceCountText}`}</div>










96



          };










97



          let phaseTitle = status !== DEPLOYMENT_STATES.scheduled ? <div className="muted">Complete</div> : null;





5!





98



          let isCurrentPhase = false;




5✔





99



          if (now.isBefore(startTime)) {





5!





100



            const duration = moment.duration(moment(startTime).diff(now));




×







101



            phaseTitle = <div>{`Begins in ${duration.format('d [days] hh [h] mm [m]')}`}</div>;




×







102



          } else if (status === DEPLOYMENT_STATES.inprogress && phase.id === currentPhase.id) {





5!





103



            phaseTitle = <div className="muted">Current phase</div>;




×







104



            isCurrentPhase = true;




×







105



          }










106



          return (




5✔





107



            <div className={`flexbox column centered ${classes.phaseInfo} ${isCurrentPhase ? classes.currentPhaseInfo : ''}`} key={startTime}>





5!





108



              {phaseTitle}










109



              <Chip className={classes.phaseIndex} size="small" label={`Phase ${index + 1}`} />










110



              <TwoColumnData {...defaultColumnDataProps} style={{ ...defaultColumnDataProps.style, alignSelf: 'initial' }} config={phaseObject} />










111



            </div>










112



          );










113



        })}










114



      </div>










115



    </>










116



  );










117



};










118












119



export default RolloutSchedule;
























    

  • 

    •