import * as React from 'react' ; import convertToDisplayTime from '../../../common/convertToDisplayTime' ; interface ISimulationSummaryProps { duration : number ; longestChainLength : number ; longestChainSize : number ; longestChainNumberTransactions : number ; timesWithOutliers10 : number | null ; timesWithOutliers50 : number | null ; timesWithOutliers90 : number | null ; timesNoOutliers10 : number | null ; timesNoOutliers50 : number | null ; timesNoOutliers90 : number | null ; firstBlockNumberOfRecipients : number ; lastBlockNumberOfRecipients : number ; totalNumberOfNodes : number ; staleBlocks : number ; strategy : string ; avgBlockTime : number ; } export default class SimulationSummary extends React . Component < ISimulationSummaryProps , { } > { public render ( ) { const { duration , longestChainLength , staleBlocks , longestChainSize , firstBlockNumberOfRecipients , lastBlockNumberOfRecipients , totalNumberOfNodes , timesWithOutliers10 , timesWithOutliers50 , timesWithOutliers90 , timesNoOutliers10 , timesNoOutliers50 , timesNoOutliers90 , strategy , avgBlockTime , } = this . props ; if ( strategy === 'BITCOIN_LIKE_BLOCKCHAIN' ) { return ( < div className = "simulation-summary" > < ul className = "simulation-summary__list" > < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Simulation duration < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( duration ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Blockchain length < /div> < div className = "simulation-summary__result" > { longestChainLength } Blocks < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Average block time < /div> < div className = "simulation-summary__result" > { avgBlockTime } seconds < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Total number of stale blocks < /div> < div className = "simulation-summary__result" > { staleBlocks } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Total number of nodes < /div> < div className = "simulation-summary__result" > { totalNumberOfNodes } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > First block received by < /div> < div className = "simulation-summary__result" > { firstBlockNumberOfRecipients } nodes < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Last block received by < /div> < div className = "simulation-summary__result" > { lastBlockNumberOfRecipients } nodes < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 10 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers10 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 50 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers50 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 90 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers90 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 10 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers10 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 50 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers50 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 90 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers90 ) } < /div> < /li> < /ul> < /div>); } return ( < div className = "simulation-summary" > < ul className = "simulation-summary__list" > < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Simulation duration < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( duration ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Blockchain length < /div> < div className = "simulation-summary__result" > { longestChainLength } Blocks < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Blockchain size < /div> < div className = "simulation-summary__result" > { longestChainSize } KB < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Total number of nodes < /div> < div className = "simulation-summary__result" > { totalNumberOfNodes } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > First block received by < /div> < div className = "simulation-summary__result" > { firstBlockNumberOfRecipients } nodes < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Last block received by < /div> < div className = "simulation-summary__result" > { lastBlockNumberOfRecipients } nodes < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 10 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers10 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 50 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers50 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay 90 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesWithOutliers90 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 10 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers10 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 50 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers50 ) } < /div> < /li> < li className = "simulation-summary__list-item" > < div className = "simulation-summary__text" > Propagation delay ( NOOUTL . ) 90 % < /div> < div className = "simulation-summary__result" > { convertToDisplayTime ( timesNoOutliers90 ) } < /div> < /li> < /ul> < /div>); } }