import React from 'react';
export default function RequestsBlock(props: any): JSX.Element {
return ( <div className="row requests-block"> { props.state.overviewMetricsList.map((m: any) => m.value).includes('requests_all') && <div className="col-sm alert-secondary rounded"> <div className="request-metric text-center"> <div className="metric-name">ALL</div> <div className="display-4"> <strong> <span className="">{props.data.all}</span> </strong> </div> </div> </div> } { props.state.overviewMetricsList.map((m: any) => m.value).includes('requests_2xx') && <div className="col-sm alert-success rounded"> <div className="request-metric text-center"> <div className="metric-name">2XX</div> <div className="display-4"> <strong> <span className="">{props.data.grouped['2xx']}</span> </strong> </div> </div> </div> } { props.state.overviewMetricsList.map((m: any) => m.value).includes('requests_3xx') && <div className="col-sm alert-info rounded"> <div className="request-metric text-center"> <div className="metric-name">3XX</div> <div className="display-4"> <strong> <span className="">{props.data.grouped['3xx']}</span> </strong> </div> </div> </div> } { props.state.overviewMetricsList.map((m: any) => m.value).includes('requests_4xx') && <div className="col-sm alert-warning rounded"> <div className="request-metric text-center"> <div className="metric-name">4XX</div> <div className="display-4"> <strong> <span className="">{props.data.grouped['4xx']}</span> </strong> </div> </div> </div> } { props.state.overviewMetricsList.map((m: any) => m.value).includes('requests_5xx') && <div className="col-sm alert-danger rounded"> <div className="request-metric text-center"> <div className="metric-name">5XX</div> <div className="display-4"> <strong> <span className="">{props.data.grouped['5xx']}</span> </strong> </div> </div> </div> } </div> );
}