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, pageSize:this.pageObj.pageSize,
pageNo:this.pageObj.pageNo, pageNo:this.pageObj.pageNo,
} }
let chart=null; let chart;
if(chartInfo){ if(chartInfo){
chart=Object.assign({},chartInfo) chart=Object.assign({},chartInfo)
}else{ }else{
chart=Object.assign({},this.chartInfo) 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; let param=chart.param;
if(param.endpointId&&param.endpointId != ''){ if(param.endpointId&&param.endpointId != ''){
queryParam.endpointId=param.endpointId; queryParam.endpointId=param.endpointId;
@@ -729,7 +730,7 @@ export default {
queryParam.state=param.state; queryParam.state=param.state;
} }
} }
console.info(queryParam)
this.startLoading(filterType); this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => { this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) { if (response.code == 200) {

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

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

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

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

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

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

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

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

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

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

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

@@ -654,14 +654,22 @@
} }
}, },
convertToDetail(obj) { convertToDetail(obj) {
let detail = []; let detail = {
detail.push({label: this.$t('project.project.project'), value: obj.project.name}); 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("project.module.module"), value: obj.module.name});
detail.push({label: this.$t("asset.asset"), value: obj.asset.host}); 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.host"), value: obj.host});
detail.push({label: this.$t("project.endpoint.port"), value: obj.port}); 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.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; return detail;
}, },
formatUpdateTime:function(date){ formatUpdateTime:function(date){