Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(statistics-report): 统计报表体验问题修复 #1075

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+139 −73
Open

fix(statistics-report): 统计报表体验问题修复 #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/dashboard-front/src/language/lang.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1529,6 +1529,7 @@ const lang: ILANG = {
'非 200 请求数趋势': ['Non-200 Request Count Trend'],
'总请求数趋势': ['Total Request Count Trend'],
'总请求数': ['Total Requests'],
'资源 90th 响应耗时分布': ['Resource 90th Response Time Distribution'],
'去发布': ['Go to Publish'],
'生成版本并发布': ['Build the version and publish it'],
'API 网关 1.13 版本现已发布，为避免插件、后端服务等信息在页面修改后但实际并未生效的问题，请尽快生成并发布新版本至所有环境。': ['API Gateway version 1.13 has been released. In order to avoid the problem that plug-ins, back-end services and other information are modified on the page but do not take effect, please generate and release the new version to all environments as soon as possible.'],
Expand Down
23 changes: 20 additions & 3 deletions src/dashboard-front/src/views/operate-data/statistics-report/components/line-chart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const getChartOption = () => {
boundaryGap: false,
axisLabel: { // 坐标轴刻度标签的相关设置
color: '#666666',
rotate: 35,
},
axisLine: { // 坐标轴轴线相关设置
lineStyle: {
Expand Down Expand Up @@ -168,8 +169,12 @@ const getChartOption = () => {
show: true,
type: 'scroll',
orient: 'vertical', // 垂直排列
right: 24,
right: 10,
top: 30, // 垂直居中
height: 302,
pageIconSize: 12, // 翻页按钮的大小
pageIconColor: '#63656E', // 翻页按钮的颜色
pageIconInactiveColor: '#C4C6CC', // 翻页按钮不激活时（即翻页到头时）的颜色
textStyle: { // 图例文字的样式设置
fontSize: 12,
color: '#63656E',
Expand Down Expand Up @@ -201,7 +206,7 @@ const getChartOption = () => {
let datapoints = item.datapoints || [];
datapoints = datapoints.filter((value: Array<number>) => !isNaN(Math.round(value[0])));
chartOption.series.push(merge({}, baseOption.series[0], {
name: props.instanceId !== 'app_requests' ? item.target : item.target?.split(',')[1],
name: (item.target?.split('=')[1])?.replace(/"/g, ''),
data: datapoints.map((item) => {
if (props.instanceId === 'ingress' || props.instanceId === 'egress') {
return [
Expand All @@ -219,14 +224,26 @@ const getChartOption = () => {
});
if (props.instanceId === 'requests') {
chartOption.legend.show = false;
chartOption.grid.right = '10%';
chartOption.grid.left = '14%';
chartOption.grid.right = '8%';
}

if (props.instanceId === 'non_200_status') {
chartOption.grid.left = '14%';
chartOption.grid.right = 80;
}

if (props.instanceId === 'ingress' || props.instanceId === 'egress') {
chartOption.yAxis.axisLabel = {
formatter: '{value} KB',
};
}

if (props.instanceId === 'response_time_90th') {
chartOption.yAxis.axisLabel = {
formatter: '{value} ms',
};
}
} else {
const datapoints = [
(props.chartData?.response_time_90th?.series[0] || {})?.datapoints || [],
Expand Down
5 changes: 3 additions & 2 deletions src/dashboard-front/src/views/operate-data/statistics-report/components/top.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
v-for="option in resourceList"
:key="option.id"
:id="option.id"
:name="`${option.method} ${option.path}`">
:name="option.name">
</bk-option>
</bk-select>
</div>
Expand Down Expand Up @@ -306,7 +306,7 @@ defineExpose({
display: flex;
align-items: center;
justify-content: space-between;
min-width: 1280px;
// min-width: 1280px;
.top-left-wrapper {
display: flex;
align-items: center;
Expand Down Expand Up @@ -357,6 +357,7 @@ defineExpose({
display: flex;
align-items: center;
.source-choose {
width: 280px;
.label {
font-size: 12px;
color: #63656E;
Expand Down
171 changes: 103 additions & 68 deletions src/dashboard-front/src/views/operate-data/statistics-report/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,112 @@
<top ref="topRef" @search-change="handleSearchChange" @refresh-change="handleRefreshChange" />
<div class="statistics">
<div class="requests line-container">
<div class="total-requests">
<div class="title">
{{ t('总请求数') }}
<bk-loading :loading="chartLoading.requests_total">
<div class="total-requests">
<div class="title">
{{ t('总请求数') }}
</div>
<div class="number">
{{ statistics?.requests_total?.instant || 0 }}
</div>
</div>
<div class="number">
{{ statistics?.requests_total?.instant || 0 }}
</bk-loading>
<bk-loading :loading="chartLoading.health_rate">
<div class="total-requests">
<div class="title">
{{ t('健康率') }}
</div>
<div class="number">
{{ statistics?.health_rate?.instant || 0 }}%
</div>
</div>
</div>
<div class="total-requests">
<div class="title">
{{ t('健康率') }}
</div>
<div class="number">
{{ statistics?.health_rate?.instant || 0 }}%
</div>
</div>
</bk-loading>

<div class="success-requests">
<line-chart
ref="requestsRef"
:title="t('总请求数趋势')"
:chart-data="chartData['requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="requests" />
<bk-loading class="full-box" :loading="chartLoading.requests">
<line-chart
ref="requestsRef"
:title="t('总请求数趋势')"
:chart-data="chartData['requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="requests" />
</bk-loading>
</div>
<div class="error-requests">
<line-chart
ref="statusRef"
:title="t('非 200 请求数趋势')"
:chart-data="chartData['non_200_status']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="non_200_status" />
<bk-loading class="full-box" :loading="chartLoading.non_200_status">
<line-chart
ref="statusRef"
:title="t('非 200 请求数趋势')"
:chart-data="chartData['non_200_status']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="non_200_status" />
</bk-loading>
</div>
</div>

<div class="secondary-panel line-container">
<div class="secondary-lf">
<line-chart
ref="appRequestsRef"
:title="t('top10 app_code 请求数趋势')"
:chart-data="chartData['app_requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="app_requests" />
<bk-loading class="full-box" :loading="chartLoading.app_requests">
<line-chart
ref="appRequestsRef"
:title="t('top10 app_code 请求数趋势')"
:chart-data="chartData['app_requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="app_requests" />
</bk-loading>
</div>

<div class="secondary-rg">
<line-chart
ref="resourceRequestsRef"
:title="t('top10 资源请求数趋势')"
:chart-data="chartData['resource_requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="resource_requests" />
<bk-loading class="full-box" :loading="chartLoading.resource_requests">
<line-chart
ref="resourceRequestsRef"
:title="t('top10 资源请求数趋势')"
:chart-data="chartData['resource_requests']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="resource_requests" />
</bk-loading>
</div>
</div>

<div class="secondary-panel line-container">
<div class="secondary-lf">
<line-chart
ref="ingressRef"
:title="t('top10 资源 ingress 带宽占用')"
:chart-data="chartData['ingress']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="ingress" />
<bk-loading class="full-box" :loading="chartLoading.ingress">
<line-chart
ref="ingressRef"
:title="t('top10 资源 ingress 带宽占用')"
:chart-data="chartData['ingress']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="ingress" />
</bk-loading>
</div>
<div class="secondary-rg">
<line-chart
ref="egressRef"
:title="t('top10 资源 egress 带宽占用')"
:chart-data="chartData['egress']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="egress" />
<bk-loading class="full-box" :loading="chartLoading.egress">
<line-chart
ref="egressRef"
:title="t('top10 资源 egress 带宽占用')"
:chart-data="chartData['egress']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="egress" />
</bk-loading>
</div>
</div>

<div class="full-line">
<line-chart
ref="responseTimeRef"
:title="t('资源响应耗时分布')"
:chart-data="chartData['response_time_90th']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="response_time_90th" />
<bk-loading class="full-box" :loading="chartLoading.response_time_90th">
<line-chart
ref="responseTimeRef"
:title="t('资源 90th 响应耗时分布')"
:chart-data="chartData['response_time_90th']"
@clear-params="handleClearParams"
@report-init="handleReportInit"
instance-id="response_time_90th" />
</bk-loading>
</div>
</div>
</template>
Expand All @@ -97,7 +117,7 @@ import { ref } from 'vue';
import { useCommon } from '@/store';
import { getApigwMetrics, getApigwMetricsInstant } from '@/http';
import { useI18n } from 'vue-i18n';
import { SearchParamsType, ChartDataType, StatisticsType } from './type';
import { SearchParamsType, ChartDataType, StatisticsType, ChartDataLoading } from './type';
import Top from './components/top.vue';
import LineChart from './components/line-chart.vue';

Expand Down Expand Up @@ -132,12 +152,18 @@ const resourceRequestsRef = ref<InstanceType<typeof LineChart>>();
const ingressRef = ref<InstanceType<typeof LineChart>>();
const egressRef = ref<InstanceType<typeof LineChart>>();
const responseTimeRef = ref<InstanceType<typeof LineChart>>();
const chartLoading = ref<ChartDataLoading>({});

// 请求数据
const getData = async (searchParams: SearchParamsType, type: string) => {
searchParams.metrics = type;
const data = await getApigwMetrics(apigwId, searchParams);
chartData.value[type] = data;
chartLoading.value[type] = true;
try {
const data = await getApigwMetrics(apigwId, searchParams);
chartData.value[type] = data;
} finally {
chartLoading.value[type] = false;
}
};

const getPageData = () => {
Expand All @@ -148,8 +174,13 @@ const getPageData = () => {

const getInstantData = () => {
statisticsTypes.value.forEach(async (type: string) => {
const response = await getApigwMetricsInstant(apigwId, { ...params, metrics: type });
statistics.value[type] = response;
chartLoading.value[type] = true;
try {
const response = await getApigwMetricsInstant(apigwId, { ...params, metrics: type });
statistics.value[type] = response;
} finally {
chartLoading.value[type] = false;
}
});
};

Expand Down Expand Up @@ -287,4 +318,8 @@ const handleReportInit = () => {
border-radius: 2px;
}
}
.full-box {
width: 100%;
height: 100%;
}
</style>
12 changes: 12 additions & 0 deletions src/dashboard-front/src/views/operate-data/statistics-report/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,15 @@ export interface ChartDataType {
response_time?: ChartsSires;
response_time_90th?: ChartsSires;
}

export interface ChartDataLoading {
requests_total?: boolean;
health_rate?: boolean;
requests?: boolean;
non_200_status?: boolean;
app_requests?: boolean;
resource_requests?: boolean;
ingress?: boolean;
egress?: boolean;
response_time_90th?: boolean;
}