signoz/frontend/src/components/metrics/ServiceMetrics.tsx

import React,{useEffect} from 'react';
import { Tabs, Card, Row, Col} from 'antd';
import { connect } from 'react-redux';
import { useParams, RouteComponentProps } from "react-router-dom";
import { withRouter } from "react-router";

import { getServicesMetrics, metricItem, getTopEndpoints, topEndpointListItem, GlobalTime, updateTimeInterval } from '../../actions';
import { StoreState } from '../../reducers'
import LatencyLineChart from "./LatencyLineChart"
import RequestRateChart from './RequestRateChart'
import ErrorRateChart from './ErrorRateChart'
import TopEndpointsTable from './TopEndpointsTable';

const { TabPane } = Tabs;

interface ServicesMetricsProps extends RouteComponentProps<any>{
  serviceMetrics: metricItem[],
  getServicesMetrics: Function,
  topEndpointsList: topEndpointListItem[],
  getTopEndpoints: Function,
  globalTime: GlobalTime,
  updateTimeInterval: Function,
}


const _ServiceMetrics = (props: ServicesMetricsProps) => {

  const params = useParams<{ servicename?: string; }>();

  useEffect( () => {
    props.getServicesMetrics(params.servicename,props.globalTime);
    props.getTopEndpoints(params.servicename,props.globalTime);
  }, [props.globalTime,params.servicename]);
  
  const onTracePopupClick = (timestamp:number) => {

    props.updateTimeInterval('custom',[(timestamp/1000000)-5*60*1000,(timestamp/1000000)])// updateTimeInterval takes second range in ms -- give -5 min to selected time, 
    props.history.push('/traces')
  }
    return (
      <Tabs defaultActiveKey="1">
        <TabPane tab="Application Metrics" key="1">

        <Row gutter={32} style={{ margin: 20 }}>
              <Col span={12} >
                  <Card  bodyStyle={{padding:10}}>
                      <LatencyLineChart data={props.serviceMetrics} popupClickHandler={onTracePopupClick} />        
                  </Card>
              </Col>

              <Col span={12}>
                  <Card  bodyStyle={{padding:10}}>
                       <RequestRateChart data={props.serviceMetrics} />        
                  </Card>
              </Col>
        </Row>

        <Row gutter={32} style={{ margin: 20 }}>
            <Col span={12}>
                <Card bodyStyle={{padding:10}}>
                    <ErrorRateChart data={props.serviceMetrics} />       
                </Card>      
            </Col>

            <Col span={12}>
                <Card bodyStyle={{padding:10}}>
                    <TopEndpointsTable data={props.topEndpointsList} />       
                </Card>     
            </Col>
        </Row>
        </TabPane>

        <TabPane tab="External Calls" key="2">
          <div style={{ margin: 20 }}> Coming Soon.. </div>
          <div className="container" style={{ display: 'flex', flexFlow: 'column wrap' }}>
          
                <div className='row'>
                    <div className='col-md-6 col-sm-12 col-12'>
                        
                        {/* <ChartJSLineChart data={this.state.graphData} />       */}
                    </div>
                    <div className='col-md-6 col-sm-12 col-12'>
                        {/* <ChartJSLineChart data={this.state.graphData} />        */}
                    </div>
                </div>
          </div>
        </TabPane>
      </Tabs>
    );
}

const mapStateToProps = (state: StoreState): { serviceMetrics: metricItem[], topEndpointsList: topEndpointListItem[],globalTime: GlobalTime} => {

  return {  serviceMetrics : state.serviceMetrics, topEndpointsList: state.topEndpointsList, globalTime:state.globalTime};
};

export const ServiceMetrics  = withRouter(connect(mapStateToProps, {
  getServicesMetrics: getServicesMetrics,
  getTopEndpoints: getTopEndpoints,
  updateTimeInterval: updateTimeInterval,
  
})(_ServiceMetrics));