[feature](webapp) upgrade agent

This commit is contained in:
williamhliu
2023-09-04 11:46:36 +08:00
parent 559ef974b0
commit d5c5c63a75
50 changed files with 1334 additions and 1897 deletions

View File

@@ -1,18 +1,20 @@
import { PREFIX_CLS } from '../../../common/constants';
import { formatMetric, formatNumberWithCN } from '../../../utils/utils';
import { AggregateInfoType } from '../../../common/type';
import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
import { AggregateInfoType, ColumnType } from '../../../common/type';
import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
import { SwapOutlined } from '@ant-design/icons';
import { useState } from 'react';
type Props = {
aggregateInfo: AggregateInfoType;
currentMetricField: ColumnType;
};
const MetricInfo: React.FC<Props> = ({ aggregateInfo }) => {
const MetricInfo: React.FC<Props> = ({ aggregateInfo, currentMetricField }) => {
const { metricInfos } = aggregateInfo || {};
const metricInfo = metricInfos?.[0] || {};
const { date, value, statistics } = metricInfo || {};
const { dataFormatType, dataFormat } = currentMetricField;
const prefixCls = `${PREFIX_CLS}-metric-info`;
@@ -26,11 +28,20 @@ const MetricInfo: React.FC<Props> = ({ aggregateInfo }) => {
<div className={`${prefixCls}-indicator`}>
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<div className={`${prefixCls}-indicator-value`}>
{isNumber ? formatMetric(value) : formatNumberWithCN(+value)}
</div>
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
{dataFormatType === 'percent' || dataFormatType === 'decimal'
? `${formatByDecimalPlaces(
dataFormat?.needMultiply100 ? +value * 100 : value,
dataFormat?.decimalPlaces || 2
)}${dataFormatType === 'percent' ? '%' : ''}`
: isNumber
? formatMetric(value)
: formatNumberWithCN(+value)}
</div>
{!isNaN(+value) && +value >= 10000 && (
<div className={`${prefixCls}-indicator-switch`}>
<SwapOutlined onClick={handleNumberClick} />
</div>
)}
</div>
<div className={`${prefixCls}-bottom-section`}>
<div className={`${prefixCls}-date`}>

View File

@@ -147,11 +147,12 @@ const MetricTrendChart: React.FC<Props> = ({
}</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
item.value === ''
? '-'
: metricField.dataFormatType === 'percent'
: metricField.dataFormatType === 'percent' ||
metricField.dataFormatType === 'decimal'
? `${formatByDecimalPlaces(
item.value,
metricField.dataFormat?.decimalPlaces || 2
)}%`
)}${metricField.dataFormatType === 'percent' ? '%' : ''}`
: getFormattedValue(item.value)
}</span></div>`
)
@@ -176,7 +177,8 @@ const MetricTrendChart: React.FC<Props> = ({
smooth: true,
data: data.map((item: any) => {
const value = item[valueColumnName];
return metricField.dataFormatType === 'percent' &&
return (metricField.dataFormatType === 'percent' ||
metricField.dataFormatType === 'decimal') &&
metricField.dataFormat?.needMultiply100
? value * 100
: value;

View File

@@ -177,7 +177,10 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
<Spin spinning={loading}>
<div className={`${prefixCls}-content`}>
{!isMobile && aggregateInfoValue?.metricInfos?.length > 0 && (
<MetricInfo aggregateInfo={aggregateInfoValue} />
<MetricInfo
aggregateInfo={aggregateInfoValue}
currentMetricField={currentMetricField}
/>
)}
<div className={`${prefixCls}-date-options`}>
{dateOptions.map((dateOption: { label: string; value: number }, index: number) => {

View File

@@ -92,7 +92,7 @@
display: flex;
flex-direction: column;
width: 100%;
row-gap: 4px;
row-gap: 8px;
}
&-metric-fields {
@@ -198,7 +198,7 @@
&-indicator-value {
color: var(--text-color);
font-weight: 500;
font-size: 36px;
font-size: 28px;
line-height: 40px;
margin-top: 2px;
color: var(--text-color-secondary);