Skip to content

feat: 自定义指标类型整合（协议块选、类型筛选、指标族） --story=136999577 #11902

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

Open
huazai-free wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: 自定义指标类型整合（协议块选、类型筛选、指标族） --story=136999577 #11902

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
205 changes: 163 additions & 42 deletions bkmonitor/webpack/src/monitor-pc/pages/custom-escalation/custom-escalation-set.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,34 +145,44 @@
:show-validate.sync="rule.protocol"
:validator="{ content: $t('必填项') }"
>
<div class="bk-button-group">
<bk-button
<div class="protocol-block-group">
<div
v-for="(protocol, index) in protocolList"
:key="index"
class="protocol-block"
:class="{ 'is-selected': protocol.id === formData.protocol }"
@click="handleProtocolChange(protocol.id)"
>
{{ protocol.name }}
</bk-button>
<span class="protocol-block-icon-wrap">
<i
class="protocol-block-icon icon-monitor"
:class="protocol.icon"
/>
</span>
<div class="protocol-block-content">
<div class="protocol-block-title">{{ protocol.name }}</div>
<div class="protocol-block-desc">{{ protocol.desc }}</div>
</div>
</div>
</div>
</verify-input>
<span
v-if="protocolDes"
class="description"
>
{{ protocolDes }}
</span>
<bk-alert
v-if="formData.protocol === 'prometheus'"
class="protocol-alert"
type="info"
:title="$t('创建后将自动读取 Prometheus TYPE。未携带 TYPE 的指标仍进入“待分类”，不会根据名称自动确认类型。')"
/>
</bk-form-item>
<!--ID-->
<bk-form-item
ext-cls="content-basic"
ext-cls="content-basic content-scope"
:label="type === 'customEvent' ? $t('是否为平台事件') : $t('作用范围')"
>
<bk-checkbox
v-if="type === 'customEvent'"
v-model="formData.isPlatform"
/>
<div v-else>
<template v-else>
<bk-radio-group
v-model="formData.isPlatform"
class="bk-radio-group"
Expand All @@ -184,16 +194,16 @@
>{{ $t(scope.name) }}</bk-radio
>
</bk-radio-group>
</div>
<div
v-if="type !== 'customEvent' && !!formData.isPlatform"
class="platform-tips"
>
<span class="icon-monitor icon-tixing" />
<span>{{
$t('开启全业务作用范围，全部业务都可见属于自身业务的数据，有平台特定的数据格式要求，请联系平台管理员。')
}}</span>
</div>
<div
v-if="!!formData.isPlatform"
class="platform-tips"
>
<span class="icon-monitor icon-tixing" />
<span>{{
$t('开启全业务作用范围，全部业务都可见属于自身业务的数据，有平台特定的数据格式要求，请联系平台管理员。')
}}</span>
</div>
</template>
</bk-form-item>
<bk-form-item
v-if="type !== 'customEvent'"
Expand Down Expand Up @@ -281,9 +291,9 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
private currentItemIdName = 'bkEventGroupId'; // 当前 ID 字段
private disableSubmit = false; // 是否禁用提交按钮（防止重复点击）
private btnLoadingIcon = ''; // 提交时显示按钮loading效果
private protocolList: Array<{ id: string; name: string }> = [
{ id: 'json', name: 'JSON' },
{ id: 'prometheus', name: 'Prometheus' },
private protocolList: Array<{ id: string; name: string; desc: string; icon: string }> = [
{ id: 'json', name: 'JSON', desc: '首次发现后进入待分类', icon: 'icon-code' },
{ id: 'prometheus', name: 'Prometheus', desc: '自动读取 TYPE 元数据', icon: 'icon-profiling' },
]; // 上报协议字典
private scopeList: Array<{ id: boolean; name: string }> = [
{ id: false, name: '本业务' },
Expand All @@ -298,7 +308,7 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
token: '',
dataLabel: '',
isPlatform: false,
protocol: '',
protocol: 'json',
desc: '',
};

Expand Down Expand Up @@ -334,15 +344,6 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
return this.$t('提交');
}

/** 上报协议提示 */
get protocolDes() {
const des = {
json: this.$t('蓝鲸监控自有的JSON数据格式，创建完后有具体的格式说明'),
prometheus: this.$t('支持Prometheus的标准输出格式'),
};
return des[this.formData.protocol];
}

get type() {
return this.$route.name === 'custom-set-event' ? 'customEvent' : 'customTimeSeries';
}
Expand Down Expand Up @@ -599,17 +600,94 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
padding: 23px 20px 4px 37px;
font-size: 12px;
background: $whiteColor;
border-radius: 2px;
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);

@include border-1px($color: $defaultBorderColor);

.bk-button-group {
.bk-button {
width: 134px;
}
}

.protocol-block-group {
display: flex;
gap: 12px;
width: 100%;
}

.protocol-block {
display: flex;
flex: 1;
gap: 10px;
align-items: center;
box-sizing: border-box;
min-width: 0;
padding: 12px 16px;
cursor: pointer;
background: #fff;
border: 1px solid #dcdee5;
border-radius: 4px;
transition: all 0.15s ease;

&.is-selected {
background: #f0f5ff;
border-color: #3a84ff;

.protocol-block-icon-wrap {
color: #fff;
background: #3a84ff;
}

.protocol-block-title {
color: #3a84ff;
}

.protocol-block-desc {
color: #699df4;
}
}

.protocol-block-icon-wrap {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #4d4f56;
background: #f0f1f5;
border-radius: 4px;
}

.protocol-block-icon {
font-size: 18px;
line-height: 1;
}

.protocol-block-content {
min-width: 0;
}

.protocol-block-title {
font-size: 14px;
font-weight: 700;
line-height: 22px;
color: #111214;
}

.protocol-block-desc {
margin-top: 2px;
font-size: 12px;
line-height: 20px;
color: #979ba5;
}
}

.protocol-alert {
width: 100%;
margin-top: 12px;
}

.description {
padding-top: 9px;
font-size: 12px;
Expand All @@ -618,27 +696,62 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
}

.bk-radio-group {
padding-top: 6px;
display: flex;
align-items: center;
height: 32px;
padding-top: 0;
line-height: 32px;

.bk-form-radio {
display: inline-flex;
align-items: center;
height: 32px;
margin-right: 24px;
margin-top: 0;
font-size: 12px;
line-height: 32px;

:deep(.bk-radio-text) {
font-size: 12px;
line-height: 32px;
}
}
}

&-title {
font-weight: bold;
font-size: 14px;
font-weight: 700;
line-height: 22px;
color: #111214;
}

&-content {
margin-top: 25px;

:deep(.bk-label),
:deep(.bk-form-item > label),
:deep(.bk-label-text) {
font-size: 12px;
}

.content-basic {
width: 576px;
margin-bottom: 20px;

&.content-scope {
:deep(.bk-label) {
line-height: 32px;
}

:deep(.bk-form-content) {
line-height: 32px;
}
}

.platform-tips {
display: flex;
width: max-content;
width: 100%;
box-sizing: border-box;
padding: 6px 9px;
margin-top: 6px;
line-height: 20px;
Expand All @@ -647,10 +760,18 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
border-radius: 2px;

.icon-tixing {
flex-shrink: 0;
margin-right: 9px;
font-size: 16px;
color: #ff9c01;
}

> span:last-child {
flex: 1;
min-width: 0;
word-break: break-word;
white-space: normal;
}
}
}

Expand All @@ -660,7 +781,7 @@ export default class CustomEscalationSet extends Vue<MonitorVue> {
}

.form-content-select {
width: 240px;
width: 100%;
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion bkmonitor/webpack/src/monitor-pc/pages/custom-escalation/custom-report.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

.custom-report-page {
position: relative;
background: #f5f7fa;

@include layout-flex(row, stretch, flex-start);

Expand Down Expand Up @@ -131,7 +132,7 @@

.content-left {
flex-basis: 680px;
background: $whiteColor;
background: #f5f7fa;
border-radius: 2px;
.content-left-header {
padding: 16px 24px;
Expand Down
7 changes: 6 additions & 1 deletion .../components/view-main/components/metrics-select/components/render-metrics-group/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { makeMap } from 'monitor-common/utils/make-map';
import customEscalationViewStore from 'monitor-pc/store/modules/custom-escalation-view';

import RenderMetric from './render-metric';
import { ensureDemoMetricTreeIfNeeded } from '../../../../../../../metric-manage/metric-type';

import type { RequestHandlerMap } from '../../../../../../type';

Expand Down Expand Up @@ -214,7 +215,11 @@ export default class RenderMetricsGroup extends tsc<IProps, IEmit> {
});
}
const result = await this.requestHandlerMap.getCustomTsMetricGroups(params);
customEscalationViewStore.updateMetricGroupList(result.metric_groups);
const metricGroups = (result.metric_groups || []).map(group => ({
...group,
metrics: ensureDemoMetricTreeIfNeeded(group.metrics || []),
}));
customEscalationViewStore.updateMetricGroupList(metricGroups);
} finally {
this.isLoading = false;
}
Expand Down
8 changes: 7 additions & 1 deletion ...bpack/src/monitor-pc/pages/custom-escalation/metric-detail/components/view-main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
getSceneView, // 详情页
modifyCustomTsFields, // 详情页
} from '../../../service';
import { ensureDemoMetricTreeIfNeeded } from '../../../metric-manage/metric-type';
import HeaderBox from './components/header-box';
import MetricsSelect from './components/metrics-select';
import PanelChartView from './components/panel-chart-view';
Expand Down Expand Up @@ -184,7 +185,12 @@ export default class ViewContent extends tsc<IProps, IEmit> {
});
}
const result = await this.requestHandlerMap.getCustomTsMetricGroups(params);
customEscalationViewStore.updateMetricGroupList(result.metric_groups);
const metricGroups = (result.metric_groups || []).map(group => ({
...group,
// Histogram 只展示聚合指标名称，不再显示子指标（Mock 收敛）
metrics: ensureDemoMetricTreeIfNeeded(group.metrics || []),
}));
customEscalationViewStore.updateMetricGroupList(metricGroups);
} finally {
this.handleCustomTsMetricGroups();
}
Expand Down
4 changes: 2 additions & 2 deletions ...bpack/src/monitor-pc/pages/custom-escalation/metric-manage/components/help-info/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export default class HelpInfo extends tsc<IProps> {
/** 用于复制Python Prometheus SDK代码的隐藏文本域引用 */
@Ref('pythonCopy') readonly pythonCopy!: HTMLTextAreaElement;

/** 是否显示右侧帮助栏 */
isShowHelpPanel = true;
/** 是否显示右侧帮助栏（默认收起，由 isShow prop 同步） */
isShowHelpPanel = false;
/** 云区域分类数据，包含各云区域的IP和ID信息 */
proxyInfo: ServiceReturnType<typeof proxyHostInfo> = [];
/** 数据上报格式样例（JSON协议） */
Expand Down
Loading
Loading