import React from 'react' ; import { DockerStreamComponent } from '../shared/DockerStreamComponent' ; import { observable } from 'mobx/lib/mobx' ; import { observer } from 'mobx-react/index' ; import { FormattedMessage , FormattedNumber } from 'react-intl' ; import { parseBytes } from '../../utils/Helper' ; import { ContainerModel , CONTAINER_RUN_STATE } from '../../models/ContainerModel' ; import { TwoColumnCardRow } from '../shared/TwoColumnCardRow' ; interface StatsStreamData { read : string ; memory_stats : { limit : number ; max_usage : number ; usage : number ; } ; cpu_stats : { cpu_usage : { total_usage : number ; } ; system_cpu_usage : number ; } ; } interface StatsProps { container : ContainerModel ; } @ observer export class Stats extends DockerStreamComponent < StatsStreamData , StatsProps , { } > { @ observable private totalMemory : number = 0 ; @ observable private usedMemory : number = 0 ; @ observable private cpuUsage : number = 0 ; private oldTotalCpuUsage : number = 0 ; private oldSystemCpuUsage : number = 1 ; componentWillMount ( ) { return this . loadStream ( this . props ) ; } componentWillReceiveProps ( nextProps ) { return this . loadStream ( nextProps ) ; } private async loadStream ( props ) { if ( props . container == null || ( props . container != null && props . container . state . runState !== CONTAINER_RUN_STATE . RUNNING ) ) { this . destroyStream ( ) ; return ; } if ( props . container . state . runState === CONTAINER_RUN_STATE . RUNNING ) { this . attachStream ( await this . props . container . stats ( ) ) ; } } render ( ) { const { container } = this . props ; const usedMemory = parseBytes ( this . usedMemory ) ; const totalMemory = parseBytes ( this . totalMemory ) ; if ( container == null || container . state . runState !== CONTAINER_RUN_STATE . RUNNING ) { return < p > < FormattedMessage id = "no-data-available" / > < /p>; } return ( < div > < TwoColumnCardRow left = { < FormattedMessage id = "stats.cpu" / > } right = { < strong > < FormattedNumber value = { this . cpuUsage } style = 'percent' / > < /strong>}/ > < TwoColumnCardRow left = { < FormattedMessage id = "stats.memory" / > } right = { < strong > < FormattedNumber value = { usedMemory . size } />{' ' + usedMemory.unit} / < FormattedNumber value = { totalMemory . size } / > { ' ' + totalMemory . unit } < /strong>}/ > < /div>); } onData ( data ) { this . cpuUsage = ( ( data . cpu_stats . cpu_usage . total_usage - this . oldTotalCpuUsage ) / ( data . cpu_stats . system_cpu_usage - this . oldSystemCpuUsage ) ) ; this . oldSystemCpuUsage = data . cpu_stats . system_cpu_usage ; this . oldTotalCpuUsage = data . cpu_stats . cpu_usage . total_usage ; this . totalMemory = data . memory_stats . limit ; this . usedMemory = data . memory_stats . usage ; } onError ( err ) { } }