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

feat: 【产品功能】策略详情监控目标异步loading --story=121147579 #4352

Merged
merged 3 commits into from
Dec 25, 2024
+61 −14
Merged

feat: 【产品功能】策略详情监控目标异步loading --story=121147579 #4352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6376921
feat: 【产品功能】策略详情监控目标异步loading --Story=121147579
goodGai Dec 11, 2024
5e79332
feat: 【产品功能】策略详情监控目标异步loading --Story=121147579
goodGai Dec 24, 2024
1fac05a
feat: Loading切换为骨架屏
goodGai Dec 25, 2024
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
4 changes: 4 additions & 0 deletions ...onitor-pc/pages/strategy-config/strategy-config-detail/strategy-config-detail-common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,10 @@ $levelColor: #ea3636 #ff9c01 #699df4;
}
}

.skeleton-element {
width: 180px;
}

.targets-desc {
display: flex;
align-items: center;
Expand Down
71 changes: 57 additions & 14 deletions ...monitor-pc/pages/strategy-config/strategy-config-detail/strategy-config-detail-common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,8 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
refleshKey: '',
};

targetDetailLoading = false;

/** 预览图描述文档 智能检测算法 | 时序预测 需要展示算法说明 */
get aiopsModelDescMdGetter() {
const needMdDesc = this.detectionConfig.data.some(item =>
Expand Down Expand Up @@ -443,6 +445,7 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
promiseList.push(SetMealAddStore.getNoticeWay());
}
promiseList.push(this.getStrategyConfigDetail(this.id));
this.getTargetsTableData();
Promise.all(promiseList)
.then(() => {
this.handleDisplaybackDetail();
Expand Down Expand Up @@ -519,8 +522,6 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
this.checkedTarget.node_count,
this.checkedTarget.instance_count
);
/** 监控目标数据 */
this.targetsTableData = this.targetDetail.detail ? transformDataKey(this.targetDetail.detail) : null;
/** 同级别算法关系 */
const {
detects: [{ connector, level }],
Expand Down Expand Up @@ -670,6 +671,55 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
this.scenarioList = data;
});
}

async getTargetsTableData() {
// 获取策略目标详情
this.targetDetailLoading = true;
const targetDetail =
(await getTargetDetail({ strategy_ids: [this.strategyId] }).finally(() => {
this.targetDetailLoading = false;
})) || {};
const strategyTarget = targetDetail[this.strategyId] || {};

// 提取目标列表和字段名称，提供默认值
let targetList = this.detailData?.items?.[0]?.target?.[0]?.[0]?.value || [];
const field = this.detailData?.items?.[0]?.target?.[0]?.[0]?.field || '';
const targetType = strategyTarget.node_type || '';

// 对旧版策略的特殊处理
if (targetType === 'INSTANCE' && field === 'bk_target_ip') {
targetList = targetList.map(item => ({
...item,
ip: item.bk_target_ip,
bk_cloud_id: item.bk_target_cloud_id,
}));
}

// 设置第一个目标的实例计数
if (targetList.length) {
targetList[0].instances_count = strategyTarget.instance_count || 0;
}

// 更新目标详情
this.targetDetail = {
...strategyTarget,
detail: strategyTarget.target_detail || [],
target_detail: targetList,
};

// 更新目标描述
const { targetType: metricTargetType = '', objectType: metricObjectType = '' } = this.metricData[0] || {};
this.targetsDesc = handleSetTargetDesc(
this.targetDetail.target_detail,
metricTargetType || this.targetDetail.node_type || '',
metricObjectType || this.targetDetail.instance_type || '',
this.checkedTarget.node_count,
this.checkedTarget.instance_count
);
/** 监控目标数据 */
this.targetsTableData = this.targetDetail.detail ? transformDataKey(this.targetDetail.detail) : null;
}

/**
* @description 策略详情数据获取
* @param id
Expand All @@ -688,23 +738,14 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
}
this.strategyId = snapshotRes?.id || id;
// 策略快照end
const targetDetail = await getTargetDetail({ strategy_ids: [this.strategyId] }).catch(() => ({}));
const strategyDetail = snapshotRes.name
? snapshotRes
: await getStrategyV2({ id: this.strategyId }).catch(() => ({}));
this.detailData = strategyDetail;
this.detectionConfig.data = strategyDetail?.items?.[0]?.algorithms?.filter(item => !!item.type) || [];
this.detectionConfig.unit = strategyDetail?.items?.[0]?.algorithms?.[0]?.unit_prefix || '';
const strategyTarget = targetDetail?.[this.strategyId];
const filed = strategyDetail?.items?.[0]?.target?.[0]?.[0]?.field || '';
const targetType = strategyTarget?.node_type || '';
let targetList = strategyDetail?.items?.[0]?.target?.[0]?.[0]?.value || [];
// 对旧版的策略target进行特殊处理
if (targetType === 'INSTANCE' && filed === 'bk_target_ip') {
targetList = targetList.map(item => ({ ...item, ip: item.bk_target_ip, bk_cloud_id: item.bk_target_cloud_id }));
}
targetList.length && (targetList[0].instances_count = strategyTarget?.instance_count || 0);
this.targetDetail = { ...strategyTarget, detail: strategyTarget?.target_detail, target_detail: targetList };
const targetList = strategyDetail?.items?.[0]?.target?.[0]?.[0]?.value || [];
this.targetDetail = { target_detail: targetList };
await this.handleQueryConfigData();
await this.handleProcessData({
...strategyDetail,
Expand Down Expand Up @@ -1143,7 +1184,9 @@ export default class StrategyConfigDetailCommon extends tsc<object> {
);
})()}
</div>
{this.targetsDesc.message || this.targetsDesc.subMessage ? (
{this.targetDetailLoading ? (
<div class='targets-desc skeleton-element' />
) : this.targetsDesc.message || this.targetsDesc.subMessage ? (
<div class='targets-desc'>
<span onClick={this.handleShowTargetTable}>
<i class='icon-monitor icon-mc-tv' />
Expand Down