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

temp: 临时提交代码，周末在家办公用

Browse Source
This commit is contained in:
chenjinsong
2020-06-12 21:06:56 +08:00
parent 067c442a0e
commit 656105261c
3 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/components/charts/chart-endpoint-info.vue
View File

@@ -39,9 +39,11 @@
<div class="content-item-key item-tip" :id="'basicKey' + index">
<span>{{item.label}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
</div><div class="content-item-value item-tip" :id="'basicValue' + index">
<span>{{item.value}}</span>
</div><div v-if="item.label != $t('alert.list.state')" class="content-item-value item-tip" :id="'basicValue' + index">
<span>{{item.value ? item.value : '&nbsp;'}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
</div><div v-else class="content-item-value item-tip" :id="'basicValue' + index">
<span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
</div>
</div>
</div>
@@ -68,6 +70,8 @@
</div>
</div>
</div>
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
</div>
</template>
@@ -76,13 +80,16 @@
import {Loading} from 'element-ui';
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
import timePicker from '../common/timePicker'
import timePicker from '../common/timePicker';
import chartPreview from './chartPreview';
export default {
name: 'chartEndpointInfo',
components: {
'loading': loading,
'time-picker':timePicker
'time-picker': timePicker,
'chart-preview': chartPreview,
},
props: {
// 看板id
@@ -105,11 +112,13 @@
data: {}, // 该图表信息,chartItem
unit:{},
detail: [],
state: [],
alerts: [],
unfold: ["basic"],
isError:false,
errorContent:'',
assetInfos:{},
showState: false,
//toolbox: false,
loading:Object,
@@ -192,6 +201,9 @@
this.$refs.scrollbar && this.$refs.scrollbar.update();
},400);
},
preview() {
this.$refs.chartsPreview.show(this.data);
},
replaceSplit(key){
if(key){
return key.replace(/\$_\$/g,' ')
@@ -239,18 +251,19 @@
},
// 设置数据, filter区分
setData(chartItem, data, alerts) {
setData(chartItem, endpointDetail, alerts) {
this.resize(chartItem);
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.data = chartItem;
this.detail = data;
this.detail = endpointDetail;
this.alerts = alerts;
this.detail.push({label: this.$t("alert.list.state"), value: ""});
this.$nextTick(()=>{
this.$refs.scrollbar.update();
})
});
this.endLoading();
},
},

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

@@ -600,13 +600,17 @@
this.dataList.push({
id: -10,
panelId: 0,
dataId: this.additionalInfo.id,
title: this.$t("project.chart.endpointInfo"),
span: 4,
height: 350,
type: "endpointInfo",
prev: 0,
next: -9,
buildIn: 1
buildIn: 1,
elements: [{
expression: `up{endpoint="${this.additionalInfo.id}"}`
}]
});
this.dataList.push({
id: -9,
@@ -1228,17 +1232,59 @@
}
},
getEndpointInfoChartData(chartInfo) {
let req = new Promise((resolve, reject) => {
this.$get('/alert/message?endpointId='+this.detail.id).then(response=>{
let endpointId = this.additionalInfo.id;
let alertMsg = new Promise((resolve, reject) => {
this.$get('/alert/message?endpointId='+endpointId).then(response=>{
if(response.code == 200){
console.info(response)
resolve(response.data);
} else {
reject(false);
}
});
});
req.then(data => {
/*let endpointState = new Promise((resolve, reject) => {
let query = `up{endpoint="${endpointId}"}`;
this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(this.filter.start_time) + "&end=" + this.$stringTimeParseToUnix(this.filter.end_time) + '&step=' + bus.getStep(this.filter.start_time, this.filter.end_time)).then(response=>{
if(response.status == "success"){
resolve(response.data);
} else {
reject(false);
}
});
});*/
Promise.all([alertMsg]).then(result => {
//endpointInfo的告警信息
let alerts = [];
let data = result[0];
if (data.list) {
data.list.forEach(item => {
let index = -1;
let hasLabel = alerts.some((alert, i) => {
if (alert.label == item.alertRule.alertName) {
index = i;
}
return alert.label == item.alertRule.alertName;
});
if (hasLabel) {
alerts[index].value++;
} else {
alerts.push({label: item.alertRule.alertName, value: 1});
}
});
}
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
//endpointInfo的state
/*data = result[1];
let state = [];
if (data.result && data.result[0] && data.result[0].values) {
state = data.result[0].values;
}
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts, state);*/
}, err => {
});
/*req.then(data => {
let alerts = [];
if (data && data.list) {
data.list.forEach(item => {
@@ -1257,12 +1303,13 @@
});
}
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
});
});*/
},
getAssetInfoChartData(chartInfo){
if(!this.isModel){
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
let assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id;
this.$get('/asset/info?id=' + assetId).then(response=>{
if(response.code == 200){
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
}else{

23
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -75,7 +75,7 @@
</div>
</div>
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
<template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo'">
<div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
@@ -130,9 +130,7 @@
</div>
</template>
<template v-if="chart.type === 'alertList'">
<chart-alert-list ref="alertListChart" id="chartAlertListPreview"></chart-alert-list>
</template>
<chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview"></chart-alert-list>
<loading ref="loadingPreview"></loading>
</el-dialog>
@@ -231,7 +229,7 @@
if(chartType==='table'){
this.tableShow = false;
chartContainerId = 'chartTablePreview';
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
this.isGreyScreen=[];
this.showLegend = false;
chartContainerId = 'chartEchartPreview';
@@ -306,7 +304,7 @@
let chartType= this.chart.type;
if(chartType==='table'){
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
if(this.echartModalStore){
this.echartModalStore.clear();
}
@@ -350,7 +348,7 @@
this.$nextTick(() => {
if (chartItem.type === 'table') {//表格
this.setTableData([]);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo") {
this.setData(chartItem, []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
@@ -424,7 +422,7 @@
},
metric_name: '',
};
if (chartItem.type === 'stackArea') {
if (chartItem.type === 'stackArea' || chartItem.type === "endpointInfo") {
seriesItem.theData.type = 'line';
seriesItem.theData.stack = chartItem.title;
seriesItem.theData.areaStyle = {"opacity": 0.3};
@@ -477,6 +475,7 @@
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
console.info(seriesItem.theData)
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
@@ -507,7 +506,7 @@
//if(this.$refs.editChart&&this.$refs.editChart[index]) {
if (chartItem.type === 'table') {//表格
this.setTableData(tableData);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == "endpointInfo") {
if (series.length && chartItem.type === 4) {//曲线汇总
}
if(series.length<1){
@@ -515,7 +514,11 @@
}else{
this.noData=false;
}
this.setData(chartItem, series, legend);
let _chartItem = JSON.parse(JSON.stringify(chartItem));
if (chartItem.type == "endpointInfo") {
_chartItem.type = "line";
}
this.setData(_chartItem, series, legend);
}else if(chartItem.type ==='singleStat'){
if(Number(singleStatRlt)){
let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));