trace.data.ts

import { BasicColumn } from '/@/components/Table';
import dayjs from 'dayjs';
import _get from 'lodash.get';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

export const columns: BasicColumn[] = [
  {
    title: '请求时间',
    dataIndex: 'timestamp',
    width: 50,
    customRender({ text }) {
      return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  {
    title: '请求方法',
    dataIndex: 'request.method',
    width: 20,
    customRender({ record, column }) {
      let value = _get(record, column.dataIndex!);
      let color = '';
      if (value === 'GET') {
        color = '#87d068';
      }
      if (value === 'POST') {
        color = '#2db7f5';
      }
      if (value === 'PUT') {
        color = '#ffba5a';
      }
      if (value === 'DELETE') {
        color = '#ff5500';
      }
      return h(Tag, { color }, () => value);
    },
  },
  {
    title: '请求URL',
    dataIndex: 'request.uri',
    width: 200,
    customRender({ record, column }) {
      return _get(record, column.dataIndex!);
    },
  },
  {
    title: '响应状态',
    dataIndex: 'response.status',
    width: 50,
    customRender({ record, column }) {
      let value = _get(record, column.dataIndex!);
      let color = '';
      if (value < 200) {
        color = 'pink';
      } else if (value < 201) {
        color = 'green';
      } else if (value < 399) {
        color = 'cyan';
      } else if (value < 403) {
        color = 'orange';
      } else if (value < 501) {
        color = 'red';
      }
      return h(Tag, { color }, () => value);
    },
  },
  {
    title: '请求耗时',
    dataIndex: 'timeTaken',
    width: 50,
    customRender({ record, column }) {
      let value = _get(record, column.dataIndex!);
      let color = 'red';
      if (value < 500) {
        color = 'green';
      } else if (value < 1000) {
        color = 'cyan';
      } else if (value < 1500) {
        color = 'orange';
      }
      return h(Tag, { color }, () => `${value} ms`);
    },
    sorter: true,
  },
];