gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-324: feat: detail类型chart基本完成，还剩一点

Browse Source
This commit is contained in:
陈劲松
2020-06-15 22:23:56 +08:00
parent b6723f8af6
commit be1b0eef8e
7 changed files with 75 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -699,13 +699,14 @@ export default {
pageSize:this.pageObj.pageSize,
pageNo:this.pageObj.pageNo,
}
let chart=null;
let chart;
if(chartInfo){
chart=Object.assign({},chartInfo)
}else{
chart=Object.assign({},this.chartInfo)
}
if(chart&&chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
console.info(chart)
if(chart && chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
let param=chart.param;
if(param.endpointId&&param.endpointId != ''){
queryParam.endpointId=param.endpointId;
@@ -729,7 +730,7 @@ export default {
queryParam.state=param.state;
}
}
console.info(queryParam)
this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {

62
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -79,14 +79,26 @@
<!-- project的projectInfo的project详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<template v-if="item.type == 'project'">
<span>{{projectKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-if="item.type == 'module'">
<span v-else-if="projectKey[key]">{{value ? value : "&nbsp;"}}</span>
</div>
</div>
<!-- project的projectInfo的module详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{moduleKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
</template>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
@@ -103,40 +115,29 @@
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp;
</template>
<span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
<span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
<span v-else-if="moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
</div>
</div>
<!-- endpoint-detail的endpointInfo的endpoint详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && projectKey[key]">
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<template v-if="item.type == 'project'">
<span>{{projectKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
</template>
<template v-if="item.type == 'module'">
<span>{{moduleKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
</template>
<span>{{endpointKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="key == 'endpointStat'">
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
<span>{{value[0]}}</span>&nbsp;&nbsp;
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp;
</template>
<span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
<span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
<template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
<span v-else-if="endpointKey[key]">{{value ? value : "&nbsp;"}}</span>
</div>
</div>
<!-- endpoint-detail的endpointInfo的alert详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span>{{value ? value : "&nbsp;"}}</span>
</div>
</div>
</template>
@@ -359,7 +360,6 @@
this.panelIdInner = panelId;
this.data = chartItem;
this.detail = detail;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});

47
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -101,13 +101,6 @@
:chart-data="item"
:chart-index="index"></chart-url>
<!--<chart-asset-info v-if="item.type === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@on-drag-chart="editChartForDrag"
:panel-id="filter.panelId"
:chart-index="index"
:chart-data="item"
:editChartId="'editChartId' + item.id"
></chart-asset-info>-->
<chart-detail v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
:panel-id="filter.panelId"
:chart-index="index"
@@ -116,32 +109,6 @@
:editChartId="'editChartId' + item.id"
></chart-detail>
<!--<chart-endpoint-info v-if="item.type === 'endpointInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@on-drag-chart="editChartForDrag"
:panel-id="filter.panelId"
:chart-index="index"
:chart-data="item"
:detail="detail"
:editChartId="'editChartId' + item.id"
></chart-endpoint-info>-->
<!--<chart-alert-rule-info v-if="item.type === 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@on-drag-chart="editChartForDrag"
:panel-id="filter.panelId"
:chart-index="index"
:chart-data="item"
:detail="detail"
:editChartId="'editChartId' + item.id"
></chart-alert-rule-info>-->
<!--<chart-project-info v-if="item.type === 'projectInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@on-drag-chart="editChartForDrag"
:panel-id="filter.panelId"
:chart-index="index"
:chart-data="item"
:editChartId="'editChartId' + item.id"
></chart-project-info>-->
<chart-alert-list :ref="'editChart'+item.id"
:panel-id="filter.panelId"
:chart-index="index"
@@ -182,7 +149,7 @@
isModel: {type: Boolean, default: false},
additionalInfo:{},
draggable: {type: Boolean, default: true},
detail: Array
detail: Object
},
components: {
chartAlertList,
@@ -1234,14 +1201,8 @@
let detail = [];
this.$refs['editChart'+chartInfo.id][0].showLoad();
chartInfo.title = this.$t("project.chart.endpointInfo");
detail.push({title: this.$t("project.chart.basicTitle"), data: function() {
let data = {};
vm.detail.forEach(item => {
data[item.label] = item.value;
});
data[vm.$t("alert.list.state")] = "";
return data;
}()});
this.$set(this.detail, "state", "");
detail.push({title: this.$t("project.chart.basicTitle"), data: this.detail});
let endpointId = this.additionalInfo.id;
let alertMsg = new Promise((resolve, reject) => {
this.$get('/alert/message?endpointId=' + endpointId).then(response => {
@@ -1269,6 +1230,7 @@
});
});
alertMsg.then(result => {
console.info(detail);
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
}, err => {
@@ -1399,6 +1361,7 @@
}
},
getAlertListChartData:function(chartInfo,filterType){
this.$set(chartInfo, "param", {endpointId: this.additionalInfo.id});
this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
},
getAlertRuleChartData(chartInfo) {

2
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -72,7 +72,7 @@
from: String, //来自哪个页面
tabList: Array, //动态页签列表
targetTab: String, //展示哪个页签
detail: Array, //对象详情内容
detail: Object, //对象详情内容
detailList: Array, //多个对象详情内容
assetDetail: Array, //endpoint页的asset详情

2
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -83,7 +83,7 @@
from: String,
obj: Object,
draggable: {type: Boolean, default: true},
detail: Array
detail: Object
},
data() {
return {

26
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -502,10 +502,14 @@
this.viewAsset = false;
},
convertToDetail(obj) {
let detail = [];
detail.push({label: "ID", value: obj.id});
let detail = {
id: obj.id,
alertName: obj.alertName,
expr: obj.expr
};
/*detail.push({label: "ID", value: obj.id});
detail.push({label: this.$t("alert.alertName"), value: obj.alertName});
detail.push({label: this.$t("alert.config.expr"), value: obj.expr});
detail.push({label: this.$t("alert.config.expr"), value: obj.expr});*/
let type = "";
for (let i = 0; i < this.typeData.length; i++) {
if (obj.type == this.typeData[i].key) {
@@ -513,21 +517,27 @@
break;
}
}
detail.push({label: this.$t("alert.list.type"), value: type});
detail.type = type;
//detail.push({label: this.$t("alert.list.type"), value: type});
let link = "";
if (obj.type == 1 || obj.type == 2) {
link = obj.linkObject.name;
} else if (obj.type == 3) {
link = obj.linkObject.host;
}
detail.push({label: this.$t("alert.config.link"), value: link});
detail.push({label: this.$t("alert.config.for"), value: obj.last});
detail.link = link;
detail.last = obj.last;
/*detail.push({label: this.$t("alert.config.link"), value: link});
detail.push({label: this.$t("alert.config.for"), value: obj.last});*/
let severity = this.severityData.filter((item, index) => {
return obj.severity == item.key;
})[0].value;
detail.push({label: this.$t("alert.severity"), value: severity});
detail.severity = severity;
detail.alertNum = obj.alertNum;
detail.description = obj.description;
/*detail.push({label: this.$t("alert.severity"), value: severity});
detail.push({label: this.$t("alert.description"), value: obj.description});
detail.push({label: this.$t("alert.message"), value: obj.alertNum});
detail.push({label: this.$t("alert.message"), value: obj.alertNum});*/
return detail;
},
},

14
nezha-fronted/src/components/page/project/project.vue
View File

@@ -654,14 +654,22 @@
}
},
convertToDetail(obj) {
let detail = [];
detail.push({label: this.$t('project.project.project'), value: obj.project.name});
let detail = {
project: obj.project.name,
module: obj.module.name,
asset: obj.asset.host,
host: obj.host,
port: obj.port,
path: obj.path,
param: obj.param
};
/*detail.push({label: this.$t('project.project.project'), value: obj.project.name});
detail.push({label: this.$t("project.module.module"), value: obj.module.name});
detail.push({label: this.$t("asset.asset"), value: obj.asset.host});
detail.push({label: this.$t("project.endpoint.host"), value: obj.host});
detail.push({label: this.$t("project.endpoint.port"), value: obj.port});
detail.push({label: this.$t("project.endpoint.path"), value: obj.path});
detail.push({label: this.$t("project.endpoint.param"), value: obj.param});
detail.push({label: this.$t("project.endpoint.param"), value: obj.param});*/
return detail;
},
formatUpdateTime:function(date){