frontend/components/metrics/MetricsTable.tsx

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import {
  Text,
  Table,
  TableContainer,
  Tbody,
  Th,
  Thead,
  Tr,
  Td,
  Box,
} from '@chakra-ui/react';
import axios from 'axios';
import React, { useContext, useEffect, useState } from 'react';
import { AppContext } from '../../context/context';

interface EventMeshMetrics {
  maxHTTPTPS: number,
  avgHTTPTPS: number,
  maxHTTPCost: number,
  avgHTTPCost: number,
  avgHTTPBodyDecodeCost: number,
  httpDiscard: number,
  maxBatchSendMsgTPS: number,
  avgBatchSendMsgTPS: number,
  sendBatchMsgNumSum: number,
  sendBatchMsgFailNumSum: number,
  sendBatchMsgFailRate: number,
  sendBatchMsgDiscardNumSum: number,
  maxSendMsgTPS: number,
  avgSendMsgTPS: number,
  sendMsgNumSum: number,
  sendMsgFailNumSum: number,
  sendMsgFailRate: number,
  replyMsgNumSum: number,
  replyMsgFailNumSum: number,
  maxPushMsgTPS: number,
  avgPushMsgTPS: number,
  pushHTTPMsgNumSum: number,
  pushHTTPMsgFailNumSum: number,
  pushHTTPMsgFailRate: number,
  maxHTTPPushLatency : number,
  avgHTTPPushLatency : number,
  batchMsgQueueSize : number,
  sendMsgQueueSize : number,
  pushMsgQueueSize : number,
  retryHTTPQueueSize : number,
  avgBatchSendMsgCost : number,
  avgSendMsgCost : number,
  avgReplyMsgCost : number,

  // TCP Metrics
  retryTCPQueueSize: number,
  client2eventMeshTCPTPS : number,
  eventMesh2mqTCPTPS : number,
  mq2eventMeshTCPTPS : number,
  eventMesh2clientTCPTPS : number,
  allTCPTPS : number,
  allTCPConnections : number,
  subTopicTCPNum : number
}

const MetricsTable = () => {
  const { state } = useContext(AppContext);
  const [metrics, setMetrics] = useState<Partial<EventMeshMetrics>>({});

  useEffect(() => {
    const fetch = async () => {
      try {
        const { data } = await axios.get<EventMeshMetrics>(`${state.endpoint}/metrics`);
        setMetrics(data);
      } catch (error) {
        setMetrics({});
      }
    };

    fetch();
  }, []);

  type MetricRecord = Record<string, number | undefined>;
  const httpMetrics: MetricRecord = {
    'Max HTTP TPS': metrics.maxHTTPTPS,
    'Avg HTTP TPS': metrics.avgHTTPTPS,
    'Max HTTP Cost': metrics.maxHTTPCost,
    'Avg HTTP Cost': metrics.avgHTTPCost,
    'Avg HTTP Body Decode Cost': metrics.avgHTTPBodyDecodeCost,
    'HTTP Discard': metrics.httpDiscard,
  };
  const batchMetrics: MetricRecord = {
    'Max Batch Send Msg TPS': metrics.maxBatchSendMsgTPS,
    'Avg Batch Send Msg TPS': metrics.avgBatchSendMsgTPS,
    'Send Batch Msg Num Sum': metrics.sendBatchMsgNumSum,
    'Send Batch Msg Fail Num Sum': metrics.sendBatchMsgFailNumSum,
    'Send Batch Msg Fail Rate': metrics.sendBatchMsgFailRate,
    'Send Batch Msg Discard Num Sum': metrics.sendBatchMsgDiscardNumSum,
  };
  const sendMetrics: MetricRecord = {
    'Max Send Msg TPS': metrics.maxSendMsgTPS,
    'Avg Send Msg TPS': metrics.avgSendMsgTPS,
    'Send Msg Num Sum': metrics.sendMsgNumSum,
    'Send Msg Fail Num Sum': metrics.sendMsgFailNumSum,
    'Send Msg Fail Rate': metrics.sendMsgFailRate,
    'Reply Msg Num Sum': metrics.replyMsgNumSum,
    'Reply Msg Fail Num Sum': metrics.replyMsgFailNumSum,
  };
  const pushMetrics: MetricRecord = {
    'Max Push Msg TPS': metrics.maxPushMsgTPS,
    'Avg Push Msg TPS': metrics.avgPushMsgTPS,
    'Push HTTP Msg Num Sum': metrics.pushHTTPMsgNumSum,
    'Push HTTP Msg Fail Num Sum': metrics.pushHTTPMsgFailNumSum,
    'Push HTTP Msg Fail Rate': metrics.pushHTTPMsgFailRate,
    'Max HTTP Push Latency': metrics.maxHTTPPushLatency,
    'Avg HTTP Push Latency': metrics.avgHTTPPushLatency,
  };
  const tcpMetrics: MetricRecord = {
    'Retry TCP Queue Size': metrics.retryTCPQueueSize,
    'Client2eventMesh TCP TPS': metrics.client2eventMeshTCPTPS,
    'EventMesh2mq TCP TPS': metrics.eventMesh2mqTCPTPS,
    'MQ2eventMesh TCP TPS': metrics.mq2eventMeshTCPTPS,
    'EventMesh2client TCP TPS': metrics.eventMesh2clientTCPTPS,
    'All TCP TPS': metrics.allTCPTPS,
    'All TCP Connections': metrics.allTCPConnections,
    'Sub Topic TCP Num': metrics.subTopicTCPNum,
  };

  const convertConfigurationToTable = (
    metricRecord: Record<string, string | number | boolean | undefined>,
  ) => Object.entries(metricRecord).map(([key, value]) => {
    if (value === undefined) {
      return (
        <Tr>
          <Td>{key}</Td>
          <Td>Undefined</Td>
        </Tr>
      );
    }

    return (
      <Tr>
        <Td>{key}</Td>
        <Td>{value.toString()}</Td>
      </Tr>
    );
  });

  if (Object.keys(metrics).length === 0) {
    return (
      <Box
        maxW="full"
        bg="white"
        borderWidth="2px"
        borderRadius="md"
        borderColor="rgb(211,85,25)"
        overflow="hidden"
        p="4"
        mt="4"
        opacity="0.8"
      >
        <Text fontSize="l" fontWeight="semibold" color="rgb(211,85,25)" textAlign={['left', 'center']}>
          EventMesh Daemon Not Connected
        </Text>
      </Box>
    );
  }
  return (
    <>
      <Box
        maxW="full"
        bg="white"
        borderWidth="1px"
        borderRadius="md"
        overflow="hidden"
        p="4"
        mt="4"
      >
        <Text
          w="full"
        >
          EventMesh HTTP Metrics
        </Text>

        <TableContainer mt="4">
          <Table variant="simple">
            <Thead>
              <Tr>
                <Th>Metric</Th>
                <Th>Value</Th>
              </Tr>
            </Thead>
            <Tbody>
              {convertConfigurationToTable(httpMetrics)}
            </Tbody>
          </Table>
        </TableContainer>

        <Text
          w="full"
          mt="4"
        >
          HTTP Batch Metrics
        </Text>

        <TableContainer mt="4">
          <Table variant="simple">
            <Thead>
              <Tr>
                <Th>Metric</Th>
                <Th>Value</Th>
              </Tr>
            </Thead>
            <Tbody>
              {convertConfigurationToTable(batchMetrics)}
            </Tbody>
          </Table>
        </TableContainer>

        <Text
          w="full"
          mt="4"
        >
          HTTP Send Metrics
        </Text>

        <TableContainer mt="4">
          <Table variant="simple">
            <Thead>
              <Tr>
                <Th>Metric</Th>
                <Th>Value</Th>
              </Tr>
            </Thead>
            <Tbody>
              {convertConfigurationToTable(sendMetrics)}
            </Tbody>
          </Table>
        </TableContainer>

        <Text
          w="full"
          mt="4"
        >
          HTTP Push Metrics
        </Text>

        <TableContainer mt="4">
          <Table variant="simple">
            <Thead>
              <Tr>
                <Th>Metric</Th>
                <Th>Value</Th>
              </Tr>
            </Thead>
            <Tbody>
              {convertConfigurationToTable(pushMetrics)}
            </Tbody>
          </Table>
        </TableContainer>
      </Box>
      <Box
        maxW="full"
        bg="white"
        borderWidth="1px"
        borderRadius="md"
        overflow="hidden"
        p="4"
        mt="4"
      >

        <Text
          w="full"
          mt="4"
        >
          TCP Metrics
        </Text>

        <TableContainer mt="4">
          <Table variant="simple">
            <Thead>
              <Tr>
                <Th>Metric</Th>
                <Th>Value</Th>
              </Tr>
            </Thead>
            <Tbody>
              {convertConfigurationToTable(tcpMetrics)}
            </Tbody>
          </Table>
        </TableContainer>

      </Box>
    </>
  );
};

export default MetricsTable;