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

feat: endpoint suspended相关

Browse Source
This commit is contained in:
陈劲松
2020-11-22 18:26:12 +08:00
committed by chenjinsong
parent 82a4c75d3c
commit 125a1340f8
13 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/.gitignore vendored
View File

@@ -1,6 +1,7 @@
.DS_Store
node_modules/
/dist/
static/Tiles/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

1
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -43,6 +43,7 @@ $dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
$danger-color: #DE5D3F; //全局警告色红色
$success-color: #23BF9A; //全局正常色绿色
$suspended-color: #71706D; //全局停用色灰色
$left-menu-bgcolor:#FFF;

16
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -888,6 +888,18 @@ li{
padding:2px 5px;
border-radius: 4px;
}
.nz-table td.suspended .cell>span {
background-color: $suspended-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.nz-table td.success .cell>span {
background-color: $success-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.nz-table th {
padding: 0;
}
@@ -1733,8 +1745,8 @@ li{
//background-color:#50d050 !important;
background-color:$success-color !important;
}
.grey {
background-color:lightGrey;
.gray {
background-color: $suspended-color !important;
}
.dark-red {
background-color: #aa0000 !important;

12
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -103,7 +103,7 @@
<span v-else-if="item.prop == 'state'" >
<el-popover placement="right" trigger="hover" :content="getStateContent(scope.row)" popper-class="small-pop">
<div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
</div>
</el-popover>
</span>
@@ -411,13 +411,13 @@
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
getStateContent:function(row){
if(row){
if(row.state == 1){
if (row) {
if (row.state == 1) {
return 'up';
//return 'up'+'['+this.formatUpdateTime(row.lastUpdate)+']';
}else{
} else if (row.state == 0){
return 'down';
//return 'down'+'['+this.getStateErrorMsg(row)+']';
} else if (row.state == 2) {
return 'suspended';
}
}
},

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -546,6 +546,7 @@ const cn = {
endpointNum:'代表总的数量',
active:"Alive",// "存活",
total:"Total", // "总数",
down: "Down",
},
config: {
config: "设置",

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -548,6 +548,7 @@ const en = {
},
active:"Alive",// "存活",
total:"Total",// "总数",
down: "Down"
},
config: {
config: 'Settings',//"设置"

16
nezha-fronted/src/components/common/project/popData/Main.vue
View File

@@ -20,6 +20,7 @@
<div class="legend-value">
<div>{{moduleInfo.endpointStat.up}}</div>
<div>{{moduleInfo.endpointStat.down}}</div>
<div>{{moduleInfo.endpointStat.suspended}}</div>
</div>
<div class="tooltip-chart" id="chart--endpoint"></div>
</div>
@@ -116,10 +117,11 @@
endpointOption.series[0].label.formatter = this.moduleInfo.endpointStat.down+this.moduleInfo.endpointStat.up + "";
endpointOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.endpointStat.up ? this.moduleInfo.endpointStat.up : 0},
{name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0}
{name: this.$t("dashboard.overview.asset.pingDown"), value: this.moduleInfo.endpointStat.down ? this.moduleInfo.endpointStat.down : 0},
{name: this.$t("asset.suspended"), value: this.moduleInfo.endpointStat.suspended ? this.moduleInfo.endpointStat.suspended : 0}
];
endpointOption.title.show = false;
endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown")];
endpointOption.legend.data = [this.$t("dashboard.overview.asset.pingUp"), this.$t("dashboard.overview.asset.pingDown"), this.$t("asset.suspended")];
assetOption.series[0].label.formatter = this.moduleInfo.assetStat.up+this.moduleInfo.assetStat.down + "";
assetOption.series[0].data = [
{name: this.$t("dashboard.overview.asset.pingUp"), value: this.moduleInfo.assetStat.up ? this.moduleInfo.assetStat.up : 0},
@@ -144,13 +146,13 @@
.tooltip--row {
position: relative;
height: 50px;
height: 70px;
.legend-value {
font-size: 12px;
color: #333333;
position: absolute;
left: 125px;
left: 150px;
top: 6px;
}
@@ -227,7 +229,7 @@
.main-box{
background: #FFFFFF;
border: 1px solid #E7EAED;
width: 180px;
width: 190px;
margin-bottom: 15px;
}
.main-box-title{
@@ -258,7 +260,7 @@
margin-right: 5px;
line-height: 1;
}
.bg23BF9A{
/* .bg23BF9A{
background: #23BF9A;
}
.bgEC7F66{
@@ -266,6 +268,6 @@
}
.bg3C92F1{
background: #3C92F1;
}
}*/
</style>

11
nezha-fronted/src/components/common/project/popData/endpointTable.vue
View File

@@ -20,10 +20,6 @@
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="true"></search-input>
</div>
<!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
<!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
<!--<i class="nz-icon nz-icon-download1"></i>-->
<!--</button>-->
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
@@ -73,11 +69,12 @@
<span v-else-if="item.prop == 'state'" >
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
<div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0','active-icon gray':scope.row.state == '2'}"></div>
</div>
<div >
<div v-if="scope.row.state == '1'">up</div>
<div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
<div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
<div v-else-if="scope.row.state == '2'">suspended</div>
</div>
</el-popover>
</span>
@@ -98,8 +95,6 @@
</template>
<script>
import bus from '@/libs/bus';
import axios from 'axios';
import nzAlertTag from '@/components/page/alert/nzAlertTag';
import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
import alertLabel from '@/components/common/alert/alertLabel'

8
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -102,9 +102,9 @@
<template v-if="item.prop=='Module'">
<el-tooltip placement="right" effect="light">
<div slot="content">
{{$t('asset.active')}} / {{$t('asset.total')}}
{{$t('asset.down')}} / {{$t('asset.total')}}
</div>
<span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointNum-scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
<span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
</el-tooltip>
</template>
<template v-if="item.prop=='Alert'">
@@ -504,12 +504,16 @@
}
}
if(e.column.label == 'Module' || e.column.label == this.$t("asset.tableTitle.modules")){
if (e.row.state == 3) {
return 'suspended';
} else {
if (e.row.endpointDownNum > 0) {
return 'danger';
} else {
return 'success';
}
}
}
return '';
},
edit(asset) {

14
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -418,7 +418,7 @@
series: null,
};
const tooltipPieOption = {
color: ["#60C6B4", "#EEA694"],
color: ["#60C6B4", "#EEA694", "#71706D"],
title: {
show: true,
textStyle: {
@@ -432,7 +432,7 @@
data: [],
show: true,
left: 70,
top: 44,
top: 35,
icon: "circle",
itemHeight: 4,
orient: "vertical",
@@ -459,15 +459,15 @@
]
};
const topoPieOption = {
color: ["#60C6B4", "#EEA694"],
color: ["#60C6B4", "#EEA694", "#71706D"],
title: {
show: false,
},
legend: {
data: [],
show: true,
left: 60,
top: 6,
left: 62,
top: 7,
icon: "circle",
itemHeight: 4,
orient: "vertical",
@@ -481,8 +481,8 @@
{
type: "pie",
animation: false,
center: [30, 25],
radius: [14, 22],
center: [30, 35],
radius: [18, 26],
data: [],
label: {
show: true,

20
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -373,7 +373,7 @@
border-radius: 2px;
padding: 10px 20px;
box-sizing: border-box;
width: 390px;
width: 420px;
height: 320px;
}
.content-bottom-box .tooltip{
@@ -409,16 +409,16 @@
font-size: 12px;
color: #333333;
position: absolute;
left: 132px;
top: 45px;
left: 155px;
top: 35px;
}
.legend-value + .legend-value {
left: 310px;
left: 356px;
}
.tooltip-asset {
width: 240px;
width: 260px;
height: 150px;
border: 1px solid #DEDEDE;
border-radius: 2px;
@@ -493,7 +493,7 @@
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 0;
left: 15px;
}
.red-sign {
@@ -504,16 +504,20 @@
background-color: $success-color;
}
.gray-sign {
background-color: #010101;
opacity: 0.35;
}
span {
position: absolute;
left: 11px;
left: 26px;
}
}
}
}
.tooltip-alert {
width: 96px;
width: 106px;
height: 150px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);

8
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -866,10 +866,11 @@
endpointOption.series[0].label.formatter = data.endpointTotal + "";
endpointOption.series[0].data = [
{name: vm.$t("dashboard.overview.asset.pingUp"), value: data.endpointUp ? data.endpointUp : 0},
{name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0}
{name: vm.$t("dashboard.overview.asset.pingDown"), value: data.endpointDown ? data.endpointDown : 0},
{name: vm.$t("asset.suspended"), value: data.endpointSuspended ? data.endpointSuspended : 0}
];
endpointOption.title.text = vm.$t("project.endpoint.endpoint");
endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown")];
endpointOption.legend.data = [vm.$t("dashboard.overview.asset.pingUp"), vm.$t("dashboard.overview.asset.pingDown"), vm.$t("asset.suspended")];
prometheusOption.series[0].label.formatter = data.promTotal + "";
prometheusOption.series[0].data = [
{name: vm.$t("dashboard.overview.asset.pingUp"), value: data.promUp ? data.promUp : 0},
@@ -1293,7 +1294,7 @@
</div>
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("asset.suspended")}</div>
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetSuspended}</span></div>
<div class="sub-row--value"><div class="sign gray-sign"></div><span>${dcStat.assetSuspended}</span></div>
</div>
</div>
</div>
@@ -1328,6 +1329,7 @@
<div class="legend-value">
<div>${dcStat.endpointUp}</div>
<div>${dcStat.endpointDown}</div>
<div>${dcStat.endpointSuspended}</div>
</div>
<div class="legend-value">
<div>${dcStat.promUp}</div>

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

@@ -142,12 +142,12 @@
<el-popover placement="right" width="50" trigger="hover"
:popper-class="scope.row.state == '1'?'small-pop':''">
<div slot="reference" style="width: 20px">
<div
:class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
<div :class="{'active-icon green':scope.row.state == '1', 'active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
</div>
<div>
<div v-if="scope.row.state == '1'">up</div>
<div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
<div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
<div v-else-if="scope.row.state == '2'">suspended</div>
</div>
</el-popover>
</span>