diff --git a/nezha-fronted/src/components/charts/chart-endpoint-info.vue b/nezha-fronted/src/components/charts/chart-endpoint-info.vue
new file mode 100644
index 000000000..4c6e03fed
--- /dev/null
+++ b/nezha-fronted/src/components/charts/chart-endpoint-info.vue
@@ -0,0 +1,270 @@
+
+
+
+
+
+
+
+
+
+ {{errorContent}}
+
+
+
+
+
+
+ {{data.title}}
+
+
+
+
+
+
+
No Data
+
+
+
+ {{$t('project.endpoint.endpoint')}}
+
+
+
+
+
{{item.label}}
+
{{item.label}}
+
+
{{item.value}}
+
{{item.value}}
+
+
+
+
+
+
+
+ {{$t('alert.alert')}}
+
+
+
+
+
{{item.label}}
+
{{item.label}}
+
+ {{item.value}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 99eb44b52..579f15dd3 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -108,12 +108,21 @@
:editChartId="'editChartId' + item.id"
>
+
+
@@ -152,6 +161,7 @@
import chartUrl from './chart-url';
import chartSingleStat from './chart-single-stat';
import chartAssetInfo from './chart-asset-info'
+ import chartEndpointInfo from './chart-endpoint-info'
import chartAlertRuleInfo from './chart-alert-rule-info'
import chartProjectInfo from './chart-project-info'
import draggable from 'vuedraggable'
@@ -163,7 +173,7 @@
isModel: {type: Boolean, default: false},
additionalInfo:{},
draggable: {type: Boolean, default: true},
- alertRuleDetail: Array
+ detail: Array
},
components: {
chartAlertList,
@@ -175,6 +185,7 @@
chartSingleStat,
chartAlertRuleInfo,
draggable,
+ chartEndpointInfo
},
data() {
return {
@@ -570,7 +581,7 @@
buildIn: 1,
elements: [{
id: '',
- expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`,
+ expression: `nz_alert_nums{id="${this.detail[0].value}"}`,
type: ''
}]
});
@@ -583,6 +594,51 @@
});
return;
}
+ //endpoint单独处理
+ if (param.from == "endpoint") {
+ this.dataList = [];
+ this.dataList.push({
+ id: -10,
+ panelId: 0,
+ title: this.$t("project.chart.endpointInfo"),
+ span: 4,
+ height: 350,
+ type: "endpointInfo",
+ prev: 0,
+ next: -9,
+ buildIn: 1
+ });
+ this.dataList.push({
+ id: -9,
+ panelId: 0,
+ title: this.$t("asset.createAssetTab.assetInfo"),
+ span: 4,
+ height: 350,
+ type: "assetInfo",
+ prev: -10,
+ next: -8,
+ buildIn: 1
+ });
+ this.dataList.push({
+ id: -8,
+ panelId: 0,
+ title: this.$t("alert.alertList"),
+ span: 4,
+ height: 350,
+ type: "alertList",
+ prev: -9,
+ next: -1,
+ buildIn: 1
+ });
+ this.$nextTick(() => {
+ this.dataList.forEach((item,index) => {
+ this.setChartSize(item, index);//设置该图表宽度
+ let chartBox = document.getElementById('chart-' + item.id);
+ this.handleElementInViewport(chartBox, 0, item, index);
+ });
+ });
+ return;
+ }
if (!param.query) delete param.query;
//根据panelId获得panel下的所有图表
this.$get('panel/'+ params.panelId+'/charts').then(response => {
@@ -712,6 +768,10 @@
this.getAssetInfoChartData(chartItem);
return;
}
+ if(chartItem.type === 'endpointInfo'){
+ this.getEndpointInfoChartData(chartItem);
+ return;
+ }
if(chartItem.type == 'projectInfo'){
this.getProjectInfoChartData(chartItem);
return;
@@ -1167,43 +1227,43 @@
}
}
},
+ getEndpointInfoChartData(chartInfo) {
+ let req = new Promise((resolve, reject) => {
+ this.$get('/alert/message?endpointId='+this.detail.id).then(response=>{
+ if(response.code == 200){
+ console.info(response)
+ resolve(response.data);
+ } else {
+ reject(false);
+ }
+ });
+ });
+ req.then(data => {
+ let alerts = [];
+ if (data && 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);
+ });
+ },
getAssetInfoChartData(chartInfo){
if(!this.isModel){
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
if(response.code == 200){
- let data={
- Basic:{
- sn:'assetInfo Test',
- host:'192.168.40.42',
- host1:'192.168.40.42',
- host2:'192.168.40.42',
- host3:'192.168.40.42',
- host4:'192.168.40.42',
- host5:'192.168.40.42',
- host6:'192.168.40.42',
- host7:'192.168.40.42',
- host8:'192.168.40.42',
- host9:'192.168.40.42',
- host10:'192.168.40.42',
- pingStatus:1,
- pingRtt:80,
- cpuNum:'8',
- memery:'12GB',
- memery$_$free:'3GB'
- },
- Feature:{
- CPU:"Intel E500",
- Memory:"256GB",
- NetworkInterface:["eth0","eth1"],
- Disk:[{
- mount:"/",
- total:"256GB",
- free:"128GB",
- usageRate:"50%"
- }]
- }
- }
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
}else{
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 36db177d6..99f1b82e1 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -39,8 +39,8 @@
-
+
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 62e0e1018..e023336c4 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -15,9 +15,8 @@