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

Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

Browse Source
This commit is contained in:
陈劲松
2020-02-21 17:57:26 +08:00
parent 097b6b33f0 b1a426fb36
commit 29179a94bb
21 changed files with 780 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

3
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,6 +20,9 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="duoxuan" unicode="&#59085;" d="M128 768v-768h768V768H128z m682.666667-682.666667H213.333333V682.666667h597.333334v-597.333334zM755.498667 496.896l-60.330667 60.373333L469.333333 331.434667 328.832 471.936l-60.330667-60.373333L469.333333 210.73066700000004z" horiz-adv-x="1024" />
<glyph glyph-name="user" unicode="&#58924;" d="M507.845486 895.42656c185.607314 0 336.0768-150.469486 336.0768-336.0768 0-116.501943-59.274971-219.153554-149.310903-279.446674 153.76384-53.324069 291.986286-174.442789 323.9936-355.854629a43.844754 43.844754 0 0 0-35.55328-50.7904c-2.574629-0.468114-5.143406-0.684617-7.665372-0.684617a43.838903 43.838903 0 0 0-43.125028 36.226194c-40.023771 226.801371-272.582949 312.747154-412.882652 314.444069l-4.224731 0.023406a44.587886 44.587886 0 0 0-1.872457 0.04096l-4.01408-0.029258-1.427749-0.023405c-138.421394 0-371.95776-83.675429-415.837623-307.65056l-1.26976-6.828617c-3.744914-21.240686-22.252983-36.202789-43.125028-36.202789a43.844754 43.844754 0 0 0-43.224503 51.463314c31.691337 179.533531 167.397669 300.020297 319.24224 354.186972C232.155429 338.265234 171.762834 441.7536 171.762834 559.34976c0 185.607314 150.463634 336.0768 336.0768 336.0768z m0-87.666103c-136.981943 0-248.416549-111.440457-248.416549-248.410697S370.863543 310.939063 507.839634 310.939063s248.410697 111.440457 248.410697 248.410697S644.809874 807.760457 507.845486 807.760457z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

16
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

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

@@ -3,12 +3,15 @@
</style>
<template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>
</div>
</div>
-->
<div class="clearfix">
<div class="table-title" v-show="firstShow">
{{data.title}}
@@ -46,12 +49,15 @@
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
<!--
<div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>
</div>
</div>
-->
</el-dialog>
</div>
</template>
@@ -59,10 +65,13 @@
<script>
import bus from '../../libs/bus';
import {Loading} from 'element-ui';
import loading from "../common/loading";
export default {
name: 'chartTable',
components: {},
components: {
'loading': loading,
},
props: {
// 看板id
panelId: {
@@ -93,8 +102,8 @@ export default {
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
showLoading:true,
showLoadingScreen:false,
//showLoading:true,
//showLoadingScreen:false,
//showTable:true,
chartType: 'table', // 图表类型
screenModal: false,
@@ -218,9 +227,11 @@ export default {
methods: {
startLoading(area){
if(area==='screen'){
this.showLoadingScreen = true;
//this.showLoadingScreen = true;
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
this.showLoading = true;
//this.showLoading = true;
this.$refs['localLoading'+this.chartIndex].startLoading();
}
/*
//this.loading = this.$loading({
@@ -236,9 +247,11 @@ export default {
},
endLoading(area){
if(area==='screen'){
this.showLoadingScreen = false;
//this.showLoadingScreen = false;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
this.showLoading = false;
//this.showLoading = false;
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){

19
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -243,6 +243,9 @@
},
watch: {},
methods: {
setDivFirstShow(showDiv){
this.divFirstShow = showDiv;
},
clickLegend(legendName,index){
if (this.echartStore) {
this.echartStore.dispatchAction({
@@ -654,7 +657,7 @@
this.echartStore.setOption(option);//创建图表
//this.echartStore.hideLoading();
this.$refs['localLoading'+this.chartIndex].endLoading();
if(legend && legend.length>0){
if(legend){
this.legendList = [];
legend.forEach((item, i) => {
const legend = {
@@ -721,14 +724,16 @@
});
*/
// eslint-disable-next-line
if(this.echartModalStore){
this.echartModalStore.clear();
}
option.title = {};
this.echartModalStore.setOption(option);//显示全屏界面
//this.echartModalStore.hideLoading();
this.showLegend = true;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
//this.echartModalStore.resize({height:chartInfo.height});
if(legend && legend.length>0){
if(legend){
this.screenLegendList = [];
legend.forEach((item, i) => {
const legend = {
@@ -950,6 +955,9 @@
visible: true,
threshold: null,
};
if(!this.data.type){
this.data.type='line';
}
res.forEach((response) => {
if (response.status === 'success') {
if (response.data.result) {
@@ -1029,10 +1037,7 @@
}
}).catch((error) => {
if (error) {
this.$message.warning({
content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
duration: 3,
});
this.$message.error(error.toString());
}
});
});
@@ -1050,6 +1055,8 @@
// const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
//tableBox.style.height = `${height-75}px`;
});
this.clearData();
this.firstShow = false;
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;

32
nezha-fronted/src/components/common/header.vue
View File

@@ -57,15 +57,16 @@
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="'3-' + index">
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
<!-- <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">-->
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
<idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">
<template v-slot:optionZone>
<div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">
<i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
</div>
</template>
</idc-config-box>
<!-- <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">-->
<!-- <template v-slot:optionZone>-->
<!-- <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">-->
<!-- <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>-->
<!-- </div>-->
<!-- </template>-->
<!-- </idc-config-box>-->
</div>
</el-menu-item>
</template>
@@ -109,6 +110,9 @@
<div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
</el-menu-item>
<el-menu-item index="6-3">
<div @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
</el-menu-item>
<el-menu-item index="6-4">
<div @click="logout">{{$t('overall.signOut')}}</div>
</el-menu-item>
</el-submenu>
@@ -124,13 +128,16 @@
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
@sendStateData="closeAsset"></asset-add-unit>
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
<change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
</div>
</template>
<script>
import bus from '../../libs/bus';
import changePwd from "../page/config/changePwd";
export default {
name: "Header",
components: {'change-password':changePwd},
data() {
return {
username: sessionStorage.getItem("nz-username"),
@@ -216,7 +223,8 @@
idcUserData: '',
IDCOptionData: [],
addUnitShow: false,
userDatas:[]
userDatas:[],
showChangePwd:false,
}
},
methods: {
@@ -421,6 +429,12 @@
refreshLang() {
this.language = localStorage.getItem("nz-language-" + this.username);
this.$i18n.locale = this.language;
},
showPwdDialog:function(){
this.showChangePwd=true;
},
dialogClosed:function(){
this.showChangePwd=false;
}
},
created() {

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

@@ -34,7 +34,8 @@ const en = {
query: 'Query', //查询
back: 'Back', //返回
unavailable: 'Unavailable',
available: 'Available'
available: 'Available',
changePwd:'Change Password',//修改密码
},
dashboard:{
title:'Dashboard',
@@ -157,7 +158,7 @@ const en = {
refreshLater:'Refresh later'//'请稍后刷新'
},
asset:{
asset: 'Asset',//'资产'
asset: 'Assets',//'资产'
EditAsset:'Edit asset',//'编辑资产'
pingActive: 'active',//可ping通
pingInactive:'inactive',
@@ -340,7 +341,16 @@ const en = {
createAccount: 'New account',//"新增用户"
editAccount: 'Edit account',//"编辑用户"
notCurrentlySupport: 'Not available',//'暂不支持'
password: 'Password'//'密码'
password: 'Password',//'密码'
oldPwd:'Old Password',
inputOldPwd:'Please input old password',
newPwd:'New password',
inputNewPwd:'Please input new password',
confirmPwd:'Confirm Password',
inputConfirmPwd:'Please input confirm password',
invalidPwd:'invalide password,the length at least 6',
confirmPwdErr:'The two passwords are inconsistent',
reinputPwd:'Enter password again'
},
promServer: {
promServerList: 'Prometheus server',//"Prometheus Server"
@@ -357,10 +367,10 @@ const en = {
}
},
alert: {
alert: 'Alert',//"告警"
alert: 'Alerts',//"告警"
message: 'Message',//'信息'
rule: 'Rule',//'规则'
alertList: 'Alert information',//"告警信息"
alertList: 'Alert message',//"告警信息"
alertConfig: 'Alert rule',//"告警规则"
alertName: 'Alert name',//"告警名称"
severity: 'Level',//"等级"

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

@@ -1,7 +1,7 @@
<template>
<div class="asset" ref="asset">
<div class="content-left">
<div class="sidebar-title">Asset</div>
<div class="sidebar-title">{{$t('asset.asset')}}</div>
<div class="sidebar-info">
<!--<div class="sidebar-info-header">ALL</div>-->
<el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
@@ -17,13 +17,13 @@
<span v-else>{{item.name}}</span>
</div>
<idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">
<template v-slot:optionZone>
<span @click="closeAllPop">
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>
</span>
</template>
</idc-config-box>
<!-- <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
<!-- <template v-slot:optionZone>-->
<!-- <span @click="closeAllPop">-->
<!-- <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
<!-- </span>-->
<!-- </template>-->
<!-- </idc-config-box>-->
</el-checkbox>
</el-checkbox-group>
</div>
@@ -107,20 +107,22 @@
<span v-else class="unclickable">{{scope.row.alertNum}}</span>
</template>
<div v-if="item.prop=='dataCenter'">
<idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">
<template v-slot:optionZone>
<!-- <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
<span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>
</template>
</idc-config-box>
<!-- <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
<!-- <template v-slot:optionZone>-->
<!--&lt;!&ndash; <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>&ndash;&gt;-->
<!-- <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
<!-- </template>-->
<!-- </idc-config-box>-->
<span >{{scope.row.idc.name}}</span>
</div>
<template v-if="item.prop=='cabinet'">
<cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">
<!-- <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>-->
<span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>
</cabinet-config-box>
<span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>
<!-- <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='&#45;&#45;'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">-->
<!--&lt;!&ndash; <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>&ndash;&gt;-->
<!-- <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>-->
<!-- </cabinet-config-box>-->
<span v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
<!-- <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>-->
<span v-else >{{returnData(scope.row.cabinet)}}</span>
</template>
<div v-if="item.prop=='model'">
<span>{{scope.row.model.name}}</span>

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

@@ -256,7 +256,8 @@
<div class="line-100 asset-line"></div>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
<!-- <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
<el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" placeholder="">
<el-option
:id="'asset-add-idc-op'+item.key"
v-for="item in IDCOptionData"
@@ -265,22 +266,22 @@
:value="item.id"
>
<span class="config-dropdown-label-txt">{{ item.name }}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i
class="el-icon-delete"></i></span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
</div>
<!-- <div class="config-dropdown-label-icons">-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i-->
<!-- class="el-icon-delete"></i></span>-->
<!-- <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
<!-- <template v-slot:optionZone>-->
<!-- <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
<!-- </template>-->
<!-- </idc-config-box>-->
<!-- </div>-->
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
</div>
<!-- </div>-->
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.location')">
<span>{{idcSelectedData.location}}</span>
@@ -294,7 +295,8 @@
<div class="line-100 asset-line"></div>
<!------------------------------------------cabinet---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
<el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
<!-- <el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
<el-select v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
:disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
@change="getSingleCabinetData">
<el-option
@@ -305,21 +307,21 @@
:value="item.id"
>
<span class="config-dropdown-label-txt">{{ item.name }}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"
@click.stop="deleteData('cabinet',item.id)">
<i class="el-icon-delete"></i>
</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="nz-icon nz-icon-edit"></i>
</cabinet-config-box>
</div>
<!-- <div class="config-dropdown-label-icons">-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"-->
<!-- @click.stop="deleteData('cabinet',item.id)">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- </span>-->
<!-- <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
<!-- <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
<!-- </cabinet-config-box>-->
<!-- </div>-->
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
</div>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
<!-- </div>-->
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.uSize')">
<span>{{cabinetSelectedData.uSize}}</span>

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

@@ -297,7 +297,8 @@
<!------------------------------------------IDC---------------------------------------------->
<el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<template v-if="!tabView">
<el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
<!-- <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
<el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" placeholder="">
<el-option
:id="'asset-edit-idc-op-'+item.id"
v-for="item in IDCOptionData"
@@ -306,21 +307,21 @@
:value="item.id"
>
<span class="config-dropdown-label-txt">{{ item.name }}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
class="el-icon-delete"></i></span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
</div>
<!-- <div class="config-dropdown-label-icons">-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i-->
<!-- class="el-icon-delete"></i></span>-->
<!-- <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
<!-- <template v-slot:optionZone>-->
<!-- <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
<!-- </template>-->
<!-- </idc-config-box>-->
<!-- </div>-->
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
</div>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
<!-- </div>-->
</template>
<span v-if="tabView">{{assetViewData.idcName}}</span>
</el-form-item>
@@ -339,7 +340,8 @@
<!------------------------------------------cabinet---------------------------------------------->
<el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
<template v-if="!tabView">
<el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
<!-- <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
<el-select clearable v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
:disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
@change="getSingleCabinetData">
<el-option
@@ -350,21 +352,21 @@
:value="item.id"
>
<span class="config-dropdown-label-txt">{{ item.name }}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">
<i class="el-icon-delete"></i>
</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="nz-icon nz-icon-edit"></i>
</cabinet-config-box>
</div>
<!-- <div class="config-dropdown-label-icons">-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- </span>-->
<!-- <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
<!-- <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
<!-- </cabinet-config-box>-->
<!-- </div>-->
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
<cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
</div>
<!-- <div class="right-box-row-btn right-box-row-btn-small">-->
<!-- <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
<!-- </div>-->
</template>
<span v-if="tabView">{{assetViewData.cabinetName}}</span>
</el-form-item>

124
nezha-fronted/src/components/page/config/changePwd.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div>
<el-dialog :title="$t('overall.changePwd')" :visible.sync="visible" @open="dialogOpened" :modal-append-to-body='false' @closed="dialogClosed" width="600px" :show-close="false" >
<el-form :model="user" label-position="right" label-width="135px" :rules="rules" ref="changePwdForm" size="mini">
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input type="text" autocomplete="false" v-model="user.username" disabled></el-input>
</el-form-item>
<el-form-item :label="$t('config.account.oldPwd')" prop="pwd">
<el-input type="password" autocomplete="false" :show-password="true" v-model="user.pwd" maxlength="20" :placeholder="$t('config.account.inputOldPwd')"></el-input>
</el-form-item>
<el-form-item :label="$t('config.account.newPwd')" prop="newPwd">
<el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPwd" maxlength="20" :placeholder="$t('config.account.inputNewPwd')"></el-input>
</el-form-item>
<el-form-item :label="$t('config.account.confirmPwd')" prop="confirmPwd">
<el-input type="password" autocomplete="false" :show-password="true" v-model="user.confirmPwd" maxlength="20" :placeholder="$t('config.account.inputConfirmPwd')"></el-input>
</el-form-item>
</el-form>
<!--底部按钮-->
<template slot="footer">
<div class="right-box-bottom-btns" >
<button @click="close" id="account-esc"
class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="changePwd" id="account-save"
class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "changePwd",
props:{
curUser:{type:String},
showDialog:{type:Boolean,default:false}
},
data(){
let temp=this;
var validatePass = (rule, value, callback) => {
if(value && value != '' && value.length >= 6){
callback();
}else{
callback(new Error(temp.$t('config.account.invalidPwd')))
}
};
var validateConfirmPass=(rule,value,callback) => {
if(value && value != '' && value == temp.user.newPwd){
callback();
}else{
callback(new Error(temp.$t('config.account.confirmPwdErr')))
}
}
return {
user:{
username:'',
pwd:'',
newPwd:'',
confirmPwd:''
},
rules:{
pwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'}],
newPwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'},{validator:validatePass,trigger: 'blur'}],
confirmPwd:[{required:true,message: this.$t('config.account.reinputPwd'), trigger: 'blur'},{validator:validateConfirmPass,trigger: 'blur'}]
},
visible:false,
}
},
created() {
this.user.username=this.curUser && this.curUser != ''?this.curUser:sessionStorage.getItem("nz-username");
},
methods:{
dialogOpened:function(){
if(this.$refs.changePwdForm){
this.$refs.changePwdForm.resetFields();
}
},
dialogClosed:function(){
this.$emit('dialogClosed')
},
close:function(){
this.visible=false;
},
changePwd:function(){
this.$refs.changePwdForm.validate((valid)=>{
if(valid){
let paramObj={
password:this.user.pwd,
newPassword:this.user.newPwd
}
this.$get('/sys/user/password?password='+paramObj.password+"&newPassword="+paramObj.newPassword).then(response=>{
if(response && response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.close();
}else{
this.$message.error(response.msg);
}
})
}
})
}
},
watch:{
showDialog:function(n,o){
this.visible=n;
}
}
}
</script>
<style >
.el-dialog__footer {
margin-top: 30px;
padding: 10px 20px 20px;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>

47
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -44,7 +44,8 @@
}
/*metric样式--end*/
.label-center{
margin-top:6px;
vertical-align: middle;
line-height: 34px;
}
.z-top {
@@ -52,7 +53,7 @@
}
</style>
<template key="chartBox">
<div>
<div>
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<transition name="right-box">
@@ -99,13 +100,13 @@
</el-form-item>
<el-row :gutter="10">
<el-col :span="3" >
<el-col :span="2" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
</el-col>
<el-col :span="5">
<el-col :span="6" style="margin-left:-7px;">
<div class="grid-content ">
<el-form-item prop="type">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown" v-model="chart.type" placeholder="" size="mini">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -113,10 +114,10 @@
</el-form-item>
</div>
</el-col>
<el-col :span="3">
<el-col :span="2" style="margin-left: 7px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
</el-col>
<el-col :span="5">
<el-col :span="6" style="margin-left:0px;">
<div class="grid-content ">
<el-form-item prop="span">
<el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
@@ -127,12 +128,13 @@
</el-form-item>
</div>
</el-col>
<el-col :span="3">
<el-col :span="2" style="padding-left: 10px;">
<div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
</el-col><el-col :span="5">
<div class="grid-content ">
</el-col>
<el-col :span="6" style="margin-left: 0px;">
<div class="grid-content" >
<el-form-item prop="heigh">
<!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
<!-- <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
<el-autocomplete
v-model="chart.height"
:fetch-suggestions="querySearch"
@@ -185,7 +187,7 @@
</div>
</transition>
</div>
</div>
</template>
<script>
@@ -447,7 +449,6 @@
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单
let panel = this.panelData.find(p => p.id === this.panelId);
//console.info("panel", panel)
this.$emit('on-create-success', 'create', response.data,params, panel);
} else {
this.$message.error(response.msg);
@@ -525,14 +526,17 @@
// 获取metric列表
getSuggestMetric() {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
//this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
this.$get('/prom/api/v1/label/__name__/values').then(response => {
//if (response.code === 200) {
if (response.status === 'success') {
this.metricList = response.data;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let arr = [];
let par = '';//父value
let metricTmp = item.metric;//子value
//let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
@@ -552,7 +556,7 @@
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index,
value: index+"_par",
label: index,
children:value,
};
@@ -567,7 +571,6 @@
},
// 创建打开
createData(panelId, elementInfo) {
//console.info('bbb', elementInfo)
if (panelId == -1) {
this.panelId = this.panelData[0].id;
} else {
@@ -584,7 +587,6 @@
let dSet = this.$refs.chartTag;
this.$nextTick(() => {
dSet.forEach((item, index) => {
//console.info('bbb', elementInfo.elements[index])
item.setMdata(elementInfo.elements[index]);
});
});
@@ -653,10 +655,9 @@
/*metric部分相关方法--end*/
querySearch(queryString, cb) {
console.log(queryString)
var suggestions = this.heightSuggestions;
var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
console.log(results)
// var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
var results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];
// 调用 callback 返回建议列表的数据
cb(results);
},

132
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -48,10 +48,12 @@
color: #666;
}
.li-list-part-label-val-list {
height: 176px;
border: 1px solid #dcdfe6;
height: 248px;
/* border: 1px solid #dcdfe6;*/
border-radius: 4px;
padding: 0px 0 10px 15px;
margin-bottom:0px !important;
width:100%;
}
.li-cursor{
cursor: pointer;
@@ -66,7 +68,7 @@
}
.metric-title-position{
margin-bottom: 2px;
margin-bottom: 8px;
}
.metric-title-row-position{
margin-top:-10px;
@@ -91,8 +93,9 @@
width: 100px;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px) !important;
width: calc(100% - 15px) ;
}
.nz-tab-chart-item-box{
padding:0;
display: inline-block;
@@ -146,7 +149,7 @@
<!-- create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="8">
<div class="li-list-part">
<el-scrollbar style="height: 100%">
@@ -161,11 +164,16 @@
</el-col>
<el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col :span="14">
<div class="li-list-part-label-val-list" >
-->
<el-col :span="24">
<div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
<el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row :gutter="10" >
<el-col :span="4" >
<div style="text-align:right;padding-right:5px;">{{item.name}}</div>
</el-col>
<el-col :span="20" >
<el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder=""
collapse-tags
@@ -174,7 +182,11 @@
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item>
</el-scrollbar>
</div>
@@ -281,7 +293,19 @@ export default {
});
}
},
setLabelDivHeight(count){
if (count === 0) {
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${10}px`;
} else if (count < 6) {//小于6个需要调整容器的高度
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${(248 / 6) * count + 10}px`;
} else {
const chartBox = document.getElementById('scrollDiv' + this.pointer);
chartBox.style.height = `${248}px`;
}
},
// 选择metric
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
@@ -289,6 +313,7 @@ export default {
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];
this.setLabelDivHeight(0);
}
},
// 选择主机
@@ -310,31 +335,25 @@ export default {
*/
// 获取tags列表
getSuggestTags(metric) {
this.$get('metric/labelName?metric='+metric).then(response => {
//this.$get('metric/labelName?metric='+metric).then(response => {
this.$get('/metric/series?match[]='+metric).then(response => {
this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
if(response.data.list){
//this.elementInfo.tagList = response.data.list;
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.tagList.push(tagObj);
this.elementInfo.selectedTagList.push(tagObj);
});
}else{
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
},
@@ -367,41 +386,51 @@ export default {
}else {
this.elementInfo.metric = expression;
}
//alert(this.elementInfo.metric);
//this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
//this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
//this.elementInfo.tagList = response.data.list;
if(response.data.list){
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.tagList.push(tagObj);
let labelName = item[0];
let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
let labArr = labelValList.split(',');
labArr.forEach((item, index) => {//b=~'1|2|3'
let labNameTmp = item.substring(0,item.indexOf('='));
if(labNameTmp===labelName){
let labVal = item.substring(item.indexOf('=')+1,item.length);
if(labVal.indexOf('~')!=-1){
labVal = labVal.substring(2,labVal.length-1);
let valArr = labVal.split('|');
valArr.forEach((labItem, labIndex) => {
tagObj.value.push(labItem);
});
}else {
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
labVal = labVal.substring(1,labVal.length-1);
tagObj.value.push(labVal);
}
}
});
}
if(expression.indexOf('{')>-1){
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr);
}
this.elementInfo.selectedTagList.push(tagObj);
});
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
}
},
/*
//字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
stringToTags(str) {
let labArr = str.split(',');
@@ -452,6 +481,7 @@ export default {
});
});
},
*/
clearHistory() {
this.elementInfo.metric = '';

91
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -45,11 +45,12 @@
width:90%;
}
.li-list-part-label-val-list {
height: 218px;
border: 1px solid #dcdfe6;
height: 280px;
/*border: 1px solid #dcdfe6;*/
border-radius: 4px;
box-sizing:border-box;
padding: 15px 0 10px 15px;
padding: 7px 0 10px 15px;
margin-bottom:0px !important;
}
.no-list-style{
@@ -103,6 +104,7 @@
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
margin-bottom:0px !important;
}
.el-input .el-input__inner{
/* width:80%; */
@@ -133,7 +135,7 @@
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
width: calc(100% - 15px);/*calc(100% - 45px);*/
margin:0 auto;
}
@@ -149,7 +151,13 @@
width: 100px;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
width: calc(100% - 15px);
}
.li-list-part-label-val-list .el-scrollbar__wrap{
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
margin-bottom:0px !important;
}
.nz-tab-chart-item-box{
padding:0;
@@ -195,7 +203,7 @@
</el-row>
<el-row v-if="tableShow == 1">
<el-col :span="24" >
<el-form-item label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-form-item style="margin-bottom:0px;" label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<!--
<el-select ref="metricSelect" class="full-width" filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -214,6 +222,7 @@
</el-row>
<!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!--
<el-col :span="9" style="margin-bottom: 20px;">
<div class="li-list-part">
<el-scrollbar style="height: 100%">
@@ -228,20 +237,28 @@
</el-col>
<el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col :span="14">
<div class="li-list-part-label-val-list" >
-->
<el-col :span="24">
<div class="li-list-part-label-val-list" id="scrollDiv">
<el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row :gutter="10" >
<el-col :span="4" >
<div style="text-align:right;padding-right:5px;">{{item.name}}</div>
</el-col>
<el-col :span="20" >
<el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder=""
collapse-tags
filterable
@change="changeTag"
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
</el-col>
<!--
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-->
</el-row>
</el-form-item>
</el-scrollbar>
</div>
@@ -309,10 +326,6 @@ export default {
}
});
},
// 删除该选项,第一步,传递要删除的参数
deleteTarget() {
//alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
@@ -349,43 +362,51 @@ export default {
}
},
setLabelDivHeight(count){
if(count===0){
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${10}px`;
}else if(count<6){//小于6个需要调整容器的高度
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${(280 / 6) * count+10}px`;
}else {
const chartBox = document.getElementById('scrollDiv');
chartBox.style.height = `${280}px`;
}
},
// 选择metric
selectMetric() {
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric);
} else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
this.$emit('on-change-condition');
},
// 获取tags列表
getSuggestTags(metric) {
this.$get('metric/labelName?metric='+metric).then(response => {
//this.$get('metric/labelName?metric='+metric).then(response => {
this.$get('/metric/series?match[]='+metric).then(response => {
this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = [];
//this.elementInfo.tagList = [];
if (response.code === 200) {
if(response.data.list){
//this.elementInfo.tagList = response.data.list;
response.data.list.forEach((item) => {
const objList = Object.entries(response.data);
objList.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.tagList.push(tagObj);
this.elementInfo.selectedTagList.push(tagObj);
});
}else{
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false //当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
//this.elementInfo.tagList = response.data.list;
let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum);
}else {
this.elementInfo.tagList = [];
this.elementInfo.selectedTagList = [];
this.setLabelDivHeight(0);
}
});
},

4
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -214,6 +214,7 @@ export default {
end.setSeconds(59);
this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
this.$refs.editChartSingle.setDivFirstShow(true);
},
dateChange(time) {
this.filter.start_time = `${time[0]}:00`;
@@ -263,6 +264,9 @@ export default {
if (response.data.result.length === 1) {
this.chartCount = 'single';
}
if (response.data.result.length === 0) {
this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
}
}
this.getChartData(response, params);
}else {

1
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -24,6 +24,7 @@
// border-top: 1px solid #dfe7f2;
// border-bottom: 1px solid #dfe7f2;
padding-bottom: 20px;
padding-top:20px;
text-align: right;
.operate-area-title {
padding: 5px 0;

13
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -551,14 +551,17 @@ export default {
*/
// 获取metric列表
getSuggestMetric(id) {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
//this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => {
//if (response.code === 200) {
if (response.status === 'success') {
this.metricList = response.data;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
let arr = [];
let par = '';//父value
let metricTmp = item.metric;//子value
//let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
@@ -578,7 +581,7 @@ export default {
let metricCascaderArr = [];
cascaderMap.forEach(function(value,index){
const option = {
value: index,
value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容
label: index,
children:value,
};

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

@@ -158,8 +158,8 @@
</div>
<!--endpoint query-->
<div class="content-right" v-show="tableShow == 3">
<div class="top-tools">
<div class="content-right" v-show="tableShow == 3" style="position: relative">
<div class="top-tools" >
<div>
<div @click="backToEdpTab">
<button class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
@@ -193,11 +193,12 @@
<button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-right"></i></button>
</div>
<button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
<button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled':selectedEndpoints.length<1}">
<span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>
</button>
</div>
</div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i class="nz-icon nz-icon-duoxuan " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<el-table
v-loading="queryEdpLoading"
:data="showTableData"
@@ -205,7 +206,8 @@
class="nz-table"
:header-cell-class-name="cellClass"
height="calc(100% - 110px)"
@select="selectRow"
@selection-change="selectChange"
ref="metricInfoTab"
style="width: 100%;">
<el-table-column
type="selection"
@@ -222,10 +224,10 @@
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
<div>
<ul>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric}}</span></li>
<li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit}}</span></li>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
<li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
</ul>
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
@@ -249,10 +251,11 @@
ref="elementset"
></element-set>
<el-dialog class="line-chart-block-modal"
<el-dialog class="line-chart-block-modal nz-dialog"
:title="$t('project.endpoint.dialogTitle')"
:visible.sync="graphShow"
width="90%"
id="viewGraphDialog"
@close="dialogClose"
@opened="initDialog">
<div slot="title">
@@ -272,7 +275,13 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div>
</div>
<div class="line-area " ref="viewGraphChart" id="viewGraphChart"></div>
<div class="line-area " style="height: 300px" ref="viewGraphChart" id="viewGraphChart"></div>
<div class="legend-container" id="legendArea" ref="legendArea">
<div v-for="(item, index) in legend" :title="item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
<br/>
</div>
</div>
<div class="line-100 margin-t-20 margin-b-30"></div>
<div class="chart-bottom">
<button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
@@ -422,7 +431,7 @@
formatTime:'',//查询endpoint的时间，
selectedEndpoints:[],//选中的metric{label='value'}
chartDatas:[],//从query_range查询到的数据
lenged:[],//echart lenged
legend:[],//echart legend
graphChart:null,//图标对象
graphShow:false,
searchTime:[],
@@ -509,6 +518,7 @@
}]
},
chartOptions:{
color: this.bgColorList,
title: {
text: ""
},
@@ -516,9 +526,9 @@
trigger: 'axis',
},
legend: {
show:false,
type:'scroll',
height:80,
show:true,
icon:"roundRect",
itemHeight:5,
itemWidth:15,
@@ -570,7 +580,7 @@
//height:"50%",
//top: '13%',
containLabel: false,
bottom:156
bottom:70,//156
},
dataZoom: [{
type: 'slider',
@@ -579,7 +589,7 @@
start: 0,
end: 100,
height:25,
bottom:96
bottom:10//96
}],
xAxis: {
@@ -636,10 +646,64 @@
useUTC: false,//使用本地时间
series: []
},
legendList:[],
screenLegendList:[],
isGrey:[],
isGreyScreen:[],
bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
'#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
'#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
'#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
'#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
],
panelData: [], //chart-box的panel下拉框数据
}
},
methods: {
clickLegend(legendName,index){
if (this.graphChart) {
this.graphChart.dispatchAction({
type: 'legendToggleSelect',
name: legendName
});
let isGreyTmp = this.isGrey[index];
this.$set(this.isGrey, index, !isGreyTmp);
}
},
formatLegend(name,chartWidth){
if(!name){
return '';
}
if(!chartWidth){
this.$refs.viewGraphChart.clientWidth;
}
//计算宽度
var span = document.createElement("span");
var result = {};
result.width = span.offsetWidth;
result.height = span.offsetHeight;
span.style.visibility = "hidden";
span.style.fontSize = 14;
span.style.fontFamily = "Arial";
span.style.display = "inline-block";
document.body.appendChild(span);
if(typeof span.textContent != "undefined"){
span.textContent = name;
}else{
span.innerText = name;
}
var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
document.body.removeChild(span);
if(txtWidth < chartWidth){
return name;
}else {
var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
return name.slice(0,charNum)+'...';
}
},
saveChart() { //新增chart
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
@@ -947,12 +1011,14 @@
for (let result of results){
// {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
let temp=result.metric.__name__;
let metricTip=null;
let metricTip={};
let queryInfos=(this.elementMetricDatas.filter((item)=>{
return item.metric===temp;
}));
if(queryInfos&&queryInfos.length>0){
metricTip=queryInfos[0];
}else{
metricTip.metric=temp;
}
delete result.metric.__name__;
temp+="{";
@@ -1029,7 +1095,7 @@
let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
return current;
},
selectRow:function(selection, row){//selection 选中的row的数组 row 选中的当前行
selectChange:function(selection){//selection 选中的row的数组
this.selectedEndpoints=selection;
},
selectable:function(row,index){
@@ -1039,13 +1105,19 @@
return true;
}
},
clearSelectedMetrics:function(){
this.$refs.metricInfoTab.clearSelection();
},
viewGraph:function(){
if(this.selectedEndpoints.length<1){
return ;
}
if(this.graphChart){
this.graphChart.clear();
}
this.chartDatas=[];
this.lenged=[];
this.legend=[];
this.queryChartDate();
this.graphShow=true;
@@ -1093,7 +1165,13 @@
})
chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name;
chartData.name+="}";
this.lenged.push(chartData.name);
let legend={
name:chartData.name,
showText:this.formatLegend(chartData.name)
}
this.legend.push(legend);
this.screenLegendList.push(legend);
this.isGreyScreen.push(false);
chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])];
});
@@ -1107,15 +1185,24 @@
this.graphChart.clear();
}
this.queryChartDate();
this.chartOptions.legend.data=this.lenged;
// this.chartOptions.legend.data=this.legend;
this.chartOptions.series=this.chartDatas;
this.graphChart.setOption(this.chartOptions);//创建图表
},
initDialog:function(){
this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
this.chartOptions.legend.data=this.lenged;
// this.chartOptions.legend.data=this.legend;
this.chartOptions.series=this.chartDatas;
this.graphChart.setOption(this.chartOptions);//创建图表
// let legendHeight = this.$refs.legendArea.offsetHeight;
// let dialogDom=document.getElementById('viewGraphDialog');
// let dialogWidth=dialogDom.offsetWidth
// let dialogHeight=dialogDom.offsetHeight
// console.log(legendHeight+":"+dialogWidth+":"+dialogHeight)
// let chartWidth=dialogWidth-130;
// let chartHeight=dialogHeight-58-legendHeight-60;
// console.log(chartWidth + ":"+chartHeight)
// this.graphChart.resize({height:300,width:chartWidth})
},
cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’
if (row.columnIndex === 0) {
@@ -1275,6 +1362,7 @@
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
},
computed: {
currentProjectChange() {
@@ -1549,7 +1637,8 @@
display: none !important;
}
.el-table .disabledCheck .cell::before{
content: '';
/*content: '\e627';*/
/*font-family: 'nz-icon';*/
text-align: center;
line-height: 37px;
}
@@ -1585,4 +1674,27 @@
line-height: 26px;
font-weight: bold;
}
.table-header-inner{
position: absolute;
z-index: 1;
top: 60px;
left: 25px;
}
.control-icon-unchecked{
color: #e5e5e5;
}
.control-icon-checked{
color:#666;
}
.legend-container{
width: calc(100% - 335px);
max-height:80px;
min-height:40px;
overflow-y: auto;
font-size:12px;
text-align:left;
margin:0 auto;
line-height: 18px;
font-family: Roboto,Helvetica Neue,Arial,sans-serif;
}
</style>