import React , { FC } from 'react' ; import { Stat , StatsBarStat } from './stat' ; interface Stats { total : StatsBarStat ; failed : StatsBarStat ; } export interface JobStatsBarStats extends Stats { activeNodes : StatsBarStat ; open : StatsBarStat ; closed : StatsBarStat ; activeDatafeeds : StatsBarStat ; } export interface AnalyticStatsBarStats extends Stats { started : StatsBarStat ; stopped : StatsBarStat ; } export interface ModelsBarStats { total : StatsBarStat ; } export type StatsBarStats = JobStatsBarStats | AnalyticStatsBarStats | ModelsBarStats ; type StatsKey = keyof StatsBarStats ; interface StatsBarProps { stats : StatsBarStats ; dataTestSub : string ; } export const StatsBar = ( { stats , dataTestSub } ) => { const statsList = Object . keys ( stats ) . map ( ( k ) => stats [ k as StatsKey ] ) ; return ( < div className = "mlStatsBar" data - test - subj = { dataTestSub } > { statsList . filter ( ( s ) => s . show ) . map ( ( s ) => ( < Stat key = { s . label } stat = { s } / > ) ) } < /div>); } ;