Merge remote-tracking branch 'origin/codeCheck' into codeCheck
This commit is contained in:
陈劲松
52
nezha-fronted/src/components/common/chartUnit.vue
Normal file
52
nezha-fronted/src/components/common/chartUnit.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
|
||||
:options="chartUnits"
|
||||
class="chart-unit"
|
||||
:props="{ expandTrigger: 'click' ,emitPath:false}"
|
||||
:show-all-levels="false"
|
||||
v-model="unit"
|
||||
@change="unitSelected"
|
||||
>
|
||||
</el-cascader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartDataFormat from "../charts/chartDataFormat";
|
||||
export default {
|
||||
name: "chartUnit",
|
||||
model:{
|
||||
event:'change',
|
||||
prop:'postUnit'
|
||||
},
|
||||
props:{
|
||||
postUnit:{}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
chartUnits:chartDataFormat.unitOptions(),
|
||||
visibel:false,
|
||||
unit:0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.unit=this.postUnit;
|
||||
},
|
||||
methods:{
|
||||
unitSelected:function(value){
|
||||
this.unit=value;
|
||||
this.$emit('change',this.unit);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.chart-unit{
|
||||
width: 100px;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
.unit-pop-class .el-cascader-panel{
|
||||
height: 200px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
@@ -8,3 +8,10 @@ export function resetZIndex(e){
|
||||
pop.style.zIndex=999999;
|
||||
},100)
|
||||
}
|
||||
export function getUUID(){
|
||||
function S4() {
|
||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||||
}
|
||||
|
||||
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
|
||||
}
|
||||
|
||||
@@ -555,7 +555,11 @@ const en = {
|
||||
cabinetNum: "Cabinet number",
|
||||
assets: "Assets",
|
||||
remark:'Remark',
|
||||
cabinets: "Cabinets"
|
||||
cabinets: "Cabinets",
|
||||
traffic:{
|
||||
title:'Traffic Setting',
|
||||
add:'Add',
|
||||
}
|
||||
},
|
||||
model: {
|
||||
model: 'Asset model',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="interval-refresh ">
|
||||
<time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
|
||||
<chart-unit v-model="unit" ></chart-unit>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
|
||||
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
|
||||
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
|
||||
@@ -23,10 +24,12 @@
|
||||
<script>
|
||||
import bus from "../../libs/bus";
|
||||
import timePicker from "./timePicker";
|
||||
import chartUnit from "./chartUnit";
|
||||
export default {
|
||||
name: "intervalRefresh",
|
||||
components:{
|
||||
'time-picker':timePicker,
|
||||
'chart-unit':chartUnit,
|
||||
},
|
||||
model:{
|
||||
event:'change',
|
||||
@@ -44,6 +47,10 @@
|
||||
useRefresh:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
useChartUnit:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -71,6 +78,7 @@
|
||||
name: '30m',
|
||||
}],
|
||||
interval: -1,
|
||||
unit:2,
|
||||
}
|
||||
},
|
||||
created(){
|
||||
@@ -116,6 +124,14 @@
|
||||
this.$emit('change',this.searchTime)
|
||||
this.refreshDataFunc();
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
unit:{
|
||||
immediate:true,
|
||||
handler(n,o){
|
||||
this.$emit('unitChange',n);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<transition name="right-sub-box">
|
||||
<div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
|
||||
<div class="param-box" style="height: calc(100% - 25px)">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
|
||||
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
|
||||
<span class="param-box-row-eq">=</span>
|
||||
<el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
|
||||
<span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeTags(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
|
||||
<el-button @click="showEditTagsBox(false)" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-check"></i></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "subBox",
|
||||
data(){
|
||||
return{
|
||||
editTagsBox: {show: false, top: 0, left: 0,},
|
||||
tempTagsObj:[],
|
||||
rowIndex:0,
|
||||
curConfigs:null,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showEditTagsBox:function(show,configs,index,e){
|
||||
if (show) {
|
||||
this.rowIndex=index;
|
||||
this.curConfigs=configs;
|
||||
let position = e.target.getBoundingClientRect();
|
||||
this.editTagsBox.top = position.top + 25;
|
||||
this.editTagsBox.left = position.left - 48;
|
||||
this.tempTagsObj=[];
|
||||
let obj=null;
|
||||
try{
|
||||
obj=JSON.parse(configs[index]['tags'])
|
||||
}catch (e) {
|
||||
|
||||
}
|
||||
if(obj){
|
||||
for(let key in obj){
|
||||
this.tempTagsObj.push({key:key,value:obj[key]})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!this.editTagsBox.show) {
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < this.tempTagsObj.length; i++) {
|
||||
if (!this.tempTagsObj[i].key || !this.tempTagsObj[i].value) {
|
||||
this.tempTagsObj.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
let tagsJson=this.tagsToJson(this.tempTagsObj);
|
||||
this.curConfigs[this.rowIndex]['tags']=tagsJson;
|
||||
}
|
||||
this.editTagsBox.show = show;
|
||||
},
|
||||
tagsToJson(tags) {
|
||||
let tempTags = {};
|
||||
for (let i = 0; i < tags.length; i++) {
|
||||
eval('tempTags["' + tags[i].key + '"]="' + tags[i].value + '"');
|
||||
}
|
||||
let jsonString = JSON.stringify(tempTags);
|
||||
if (jsonString == '{}') {
|
||||
return "";
|
||||
} else {
|
||||
return jsonString;
|
||||
}
|
||||
},
|
||||
addTags:function(){
|
||||
this.tempTagsObj.push({key:'',value:''})
|
||||
},
|
||||
removeTags:function(index){
|
||||
this.tempTagsObj.splice(index,1)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-sub-box {
|
||||
width: 170px;
|
||||
height: 225px;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
}
|
||||
.sub-box .add-btn{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
/* start--param*/
|
||||
.param-btn {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.param-btn-active {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.param-btn-active:hover, .param-btn-active:focus {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear {
|
||||
background-color: #D4D4D4;
|
||||
border: 1px solid #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
||||
background-color: #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.param-box {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
}
|
||||
.param-box-row {
|
||||
padding: 7px 10px 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
.param-box-row:last-of-type {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.param-box-row-key, .param-box-row-value {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
}
|
||||
.param-box-row-eq {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
color: #c4c7cF;
|
||||
}
|
||||
/* end--param*/
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<transition name="right-box">
|
||||
<div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos" >
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
|
||||
<button v-if="!rightBox.isEdit" id="project-edit" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
|
||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{rightBox.title}}</div>
|
||||
<!-- end--标题-->
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
<el-form class="right-box-form" :model="traffic" label-width="100px" label-position="left" :rules="rules" ref="trafficForm">
|
||||
<el-form-item :label="$t('config.dc.dc')" size="small">
|
||||
<el-input :disabled="true" v-model="dcObj.name"></el-input>
|
||||
</el-form-item>
|
||||
<traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" ></traffic-setting-tab>
|
||||
<button @click="addAssetSetting" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" style="margin:5px 1px">{{$t('config.dc.traffic.add')}}</button>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
|
||||
<!--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import trafficSettingTab from "./trafficSettingTab";
|
||||
import {getUUID} from "../../js/common";
|
||||
|
||||
export default {
|
||||
name: "trafficSettingBox",
|
||||
components:{
|
||||
'traffic-setting-tab':trafficSettingTab
|
||||
},
|
||||
props:{
|
||||
dcObj:{
|
||||
type:Object,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
assetList:[],
|
||||
rightBox: {
|
||||
show: false,
|
||||
title: '',
|
||||
isCreate: false,
|
||||
isEdit:false
|
||||
},
|
||||
uuids:[],
|
||||
traffic:{
|
||||
idcId:'',
|
||||
setting:[
|
||||
{
|
||||
assetId:null,
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
rules:{}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
addAssetSetting:function(){
|
||||
let valid=this.validateTabs();
|
||||
if(valid){
|
||||
this.uuids.push(getUUID());
|
||||
this.traffic.setting.push({
|
||||
assetId:null,
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
inputError:false,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
getEmptyTraffic:function(){
|
||||
let obj={
|
||||
assetId:null,
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
}
|
||||
]
|
||||
}
|
||||
return Object.assign({},obj)
|
||||
},
|
||||
validateTabs:function(){
|
||||
let valid=true;
|
||||
for(let i=0;i<this.$refs.trafficSetting.length;i++){
|
||||
let component=this.$refs.trafficSetting[i];
|
||||
valid=component.validateRows();
|
||||
if(!valid){
|
||||
break
|
||||
}
|
||||
}
|
||||
return valid;
|
||||
},
|
||||
delAssetSetting:function(index){
|
||||
this.uuids.splice(index,1);
|
||||
this.traffic.setting.splice(index,1)
|
||||
},
|
||||
show(show,isEdit) {
|
||||
this.rightBox.show = show;
|
||||
this.rightBox.isEdit=isEdit;
|
||||
this.queryTrafficSettings();
|
||||
},
|
||||
|
||||
clickos() {
|
||||
this.esc();
|
||||
},
|
||||
|
||||
/*关闭弹框*/
|
||||
esc() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
/*保存*/
|
||||
save() {
|
||||
let valid=this.validateTabs();
|
||||
if (valid) {
|
||||
//拆解数据
|
||||
let result={
|
||||
idcId:this.dcObj.id,
|
||||
setting:[],
|
||||
}
|
||||
this.traffic.setting.forEach(assetSetting=>{
|
||||
let assetId=assetSetting.assetId;
|
||||
assetSetting.configs.forEach(config=>{
|
||||
let settingItem={
|
||||
assetId:assetId,
|
||||
direction:config.direction.toString(),
|
||||
ifindex:config.ifindex,
|
||||
ifdescr:config.ifdescr,
|
||||
tags:config.tags&&config.tags!=''?JSON.parse(config.tags):{},
|
||||
}
|
||||
result.setting.push(settingItem);
|
||||
})
|
||||
})
|
||||
|
||||
this.$put('/idc/trafficSetting',result).then(response=>{
|
||||
if(response.code == 200){
|
||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
this.rightBox.show = false;
|
||||
}else{
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
saveOrToEdit: function() {
|
||||
if (!this.rightBox.isEdit) {
|
||||
this.rightBox.isEdit = true;
|
||||
this.rightBox.title = this.$t("project.project.editProject") + " ID：" + this.project.id;
|
||||
} else {
|
||||
this.save();
|
||||
}
|
||||
},
|
||||
queryTrafficSettings:function(){
|
||||
this.$get('/idc/trafficSetting?id='+this.dcObj.id).then(response=>{
|
||||
if(response.code == 200){
|
||||
let list=response.data.list;
|
||||
if(list.length>0){
|
||||
let map=new Map();
|
||||
list.forEach(item=>{
|
||||
let arr=map.get(item.asset.id);
|
||||
if(arr){
|
||||
arr.push(item)
|
||||
map.set(item.asset.id,arr);
|
||||
}else{
|
||||
map.set(item.asset.id,[item])
|
||||
}
|
||||
})
|
||||
this.traffic={
|
||||
idcId:this.dcObj.id,
|
||||
setting:[],
|
||||
}
|
||||
let keys=map.keys();
|
||||
for(let key of keys){//settings 为同一asset下的设置集合
|
||||
let settingItem={
|
||||
assetId:key,
|
||||
configs:[],
|
||||
}
|
||||
let configs=map.get(key);
|
||||
configs.forEach(item=>{
|
||||
let config={
|
||||
direction:item.direction&&item.direction!=''?item.direction.split(','):[],
|
||||
ifindex:item.ifindex,
|
||||
ifdescr:item.ifdescr,
|
||||
tags:JSON.stringify(item.tags),
|
||||
edit:false,
|
||||
}
|
||||
settingItem.configs.push(config);
|
||||
})
|
||||
this.traffic.setting.push(settingItem)
|
||||
}
|
||||
}else{
|
||||
this.traffic={
|
||||
idcId:'',
|
||||
setting:[
|
||||
{
|
||||
assetId:null,
|
||||
configs:[
|
||||
{
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
for(let i =0;i<this.traffic.setting.length;i++){
|
||||
this.uuids.push(getUUID())
|
||||
}
|
||||
}else{
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
queryAssetList:function(){
|
||||
let queryParams={
|
||||
pageSize:-1,
|
||||
idcId:this.dcObj.id,
|
||||
}
|
||||
this.assetList=[];
|
||||
this.$get('/asset',queryParams).then(response=>{
|
||||
if(response.code == 200){
|
||||
let temp=response.data.list;
|
||||
this.assetList=temp.map((item,index)=>{
|
||||
item.isOccupy=false;
|
||||
return item;
|
||||
})
|
||||
}else{
|
||||
console.log('query asset informations faild,cause :'+response.msg)
|
||||
this.$message.error(response.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
dcObj:{
|
||||
immediate:true,
|
||||
deep:true,
|
||||
handler(){
|
||||
this.queryAssetList();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="asset-config-tab">
|
||||
<el-form-item :label="$t('asset.asset')" size="small" class="right-box-form-content" ref="assetConfigForm" label-width="90px">
|
||||
<el-select class="right-box-row-with-btn" clearable @clear="clearAssetInput" v-model="assetSetting.assetId" @change="assetChanged" popper-class="no-style-class" :class="{'input-error':assetValidate}">
|
||||
<el-option v-for="(item,index) in assetList" :label="item.host" :disabled="item.isOccupy" :value="item.id" :key="item.host+'-'+item.id"></el-option>
|
||||
</el-select>
|
||||
<div class="right-box-row-btn" @click="delSelf"><i class="el-icon-minus"></i></div>
|
||||
</el-form-item>
|
||||
<div class="endpoints-box-endpoints">
|
||||
<el-table :data="assetSetting.configs"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
max-height="300"
|
||||
height="200"
|
||||
:row-class-name="assetSetting.assetId == null?'not-allowed':''"
|
||||
@row-dblclick="changeRowEditState"
|
||||
@row-click="validateRows"
|
||||
class="taffic-setting-tab"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
label-class-name="endpoints-box-endpoints-title"
|
||||
:resizable="false"
|
||||
show-overflow-tooltip
|
||||
v-for="(item, index) in tableLabels"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
>
|
||||
<template slot="header">
|
||||
<span v-if="item.required == true"><span style="color: red;">*</span>{{item.label}}</span>
|
||||
<span v-else>{{item.label}}</span>
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'tags'">
|
||||
<div v-if="scope.row.edit==false">{{scope.row[item.prop]}}</div>
|
||||
<template v-else>
|
||||
<el-input @click.native.stop="showEditTagsBox(true,scope.$index,$event)" :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" size="mini" :readonly="true" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}"></el-input>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="item.prop == 'ifindex'">
|
||||
<span v-if="scope.row.edit==false">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>
|
||||
<el-select v-model="scope.row[item.prop]" :disabled="assetSetting.assetId == null" size="mini" popper-class="no-style-class" @change="ifIndexChange(scope.row[item.prop],scope.row)" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
|
||||
<el-option v-for="(item,index) in ifIndexList" :label="item.label" :value="item.value" :key="item.value" :disabled="item.isOccupy"></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="item.prop == 'ifdescr'">
|
||||
<span >{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-if="item.prop == 'direction'">
|
||||
<template v-if="scope.row.edit==false">
|
||||
<span v-if="scope.row[item.prop][0]">{{scope.row[item.prop][0]}}</span>
|
||||
<span v-if="scope.row[item.prop][1]">{{scope.row[item.prop][1]}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-checkbox-group :disabled="assetSetting.assetId == null" v-model="scope.row[item.prop]" class="direction-checkbox" :class="{'input-error':isError(item.errRows,scope.$index),'transparent-pop':assetSetting.assetId == null}">
|
||||
<div class="input__inner">
|
||||
<el-checkbox label="rx"></el-checkbox>
|
||||
<el-checkbox label="tx"></el-checkbox>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="" :width="30">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="delTabRow(scope.$index,scope.row.ifindex)" :disabled="assetSetting.assetId == null" style="width: 18px;height: 18px; line-height: 18px; padding:0;" size="mini"><i class="el-icon-minus"></i></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="add-btn">
|
||||
<el-button @click="addTabRow" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<sub-box ref="subBox"></sub-box>
|
||||
<loading ref="loading"></loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import subBox from "./subBox";
|
||||
import loading from "../../loading";
|
||||
export default {
|
||||
name: "assetConfigTab",
|
||||
components:{
|
||||
'sub-box':subBox,
|
||||
'loading':loading,
|
||||
},
|
||||
props:{
|
||||
index:{},
|
||||
postAssetList:{type:Array,required:true},
|
||||
assetSetting:{type:Object},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
assetList:[],
|
||||
assetValidate:false,
|
||||
tableLabels:[
|
||||
{
|
||||
label:'ifindex',
|
||||
prop:'ifindex',
|
||||
width:90,
|
||||
required:true,
|
||||
errRows:[],
|
||||
},
|
||||
{
|
||||
label:'ifdescr',
|
||||
prop:'ifdescr',
|
||||
width:100,
|
||||
required:false,
|
||||
errRows:[],
|
||||
},
|
||||
{
|
||||
label:'direction',
|
||||
prop:'direction',
|
||||
width:100,
|
||||
required:true,
|
||||
errRows:[],
|
||||
},
|
||||
{
|
||||
label:'tags',
|
||||
prop:'tags',
|
||||
required:false,
|
||||
errRows:[],
|
||||
},
|
||||
],
|
||||
ifIndexList:[],
|
||||
ifDescMap:new Map(),
|
||||
editTagsBox: {show: false, top: 0, left: 0,}, //param编辑弹框
|
||||
tempTagsObj:[],
|
||||
showTags:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.assetList=Object.assign([],this.postAssetList);
|
||||
this.showTags=Object.assign([],this.assetSetting.tags)
|
||||
},
|
||||
methods:{
|
||||
clearAssetInput:function(){
|
||||
this.resetComponet();
|
||||
},
|
||||
resetComponet:function(){
|
||||
this.ifIndexList=[];
|
||||
this.assetSetting.assetId=null;
|
||||
this.assetSetting.configs=[];
|
||||
this.assetSetting.configs.push({
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
})
|
||||
this.tableLabels=this.tableLabels.map(item=>{
|
||||
item.errRows=[];
|
||||
return item;
|
||||
})
|
||||
},
|
||||
ifIndexChange:function(ifIndex,row){
|
||||
this.$set(row,'ifdescr',this.ifDescMap.get('ifDescr.'+ifIndex))
|
||||
},
|
||||
assetChanged:function(){
|
||||
if(!this.assetSetting||this.assetSetting.assetId == null){
|
||||
return ;
|
||||
}
|
||||
this.assetValidate=false;
|
||||
this.assetSetting.configs=[
|
||||
{
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
}
|
||||
]
|
||||
this.queryInterfaceInfos(this.assetSetting.assetId,true);
|
||||
},
|
||||
queryInterfaceInfos:function(assetId,skipCommit=false){
|
||||
if(!assetId&&assetId !=''){
|
||||
return;
|
||||
}
|
||||
let asset=this.assetList.find(item=>{
|
||||
return item.id == assetId;
|
||||
})
|
||||
if(asset){
|
||||
this.$refs.loading.startLoading();
|
||||
let queryParams={
|
||||
operation:'walk',
|
||||
host:asset.host,
|
||||
port:161,
|
||||
version:2,
|
||||
community:'public',
|
||||
oid:'1.3.6.1.2.1.2.2.1',
|
||||
}
|
||||
this.$post('/mib/browser',queryParams).then(response=>{
|
||||
this.ifIndexList=[];
|
||||
this.ifDescMap.clear();
|
||||
if(response.code == 200){
|
||||
let resultList=response.data.list;
|
||||
let ifIndexList=resultList.filter(item=>{
|
||||
return /if(?:Index)\.\d+/.test(item.name);
|
||||
})
|
||||
|
||||
this.ifIndexList=ifIndexList.map(item=>{
|
||||
return {label:item.value,value:Number.parseInt(item.value),isOccupy:false};
|
||||
})
|
||||
|
||||
let ifDescrList=resultList.filter(item=>{
|
||||
return /if(?:Descr)\.\d+/.test(item.name);
|
||||
})
|
||||
this.ifDescrList=ifDescrList.filter(item=>{
|
||||
this.ifDescMap.set(item.name,item.value)
|
||||
})
|
||||
this.commitAdd(skipCommit);
|
||||
this.$refs.loading.endLoading();
|
||||
}else{
|
||||
this.$refs.loading.endLoading();
|
||||
console.error(response);
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
changeRowEditState:function(row,column,event){
|
||||
if(this.validateRows()){
|
||||
this.commitAdd(true);
|
||||
if(row.edit == true){
|
||||
this.$set(row,'edit',false)
|
||||
}else{
|
||||
this.$set(row,'edit',true)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
validateRows:function(){
|
||||
let validateFlag=true;
|
||||
validateFlag=this.assetSetting && this.assetSetting.assetId != null ;
|
||||
if(!validateFlag){
|
||||
this.assetValidate=true;
|
||||
return validateFlag;
|
||||
}
|
||||
this.assetValidate=false
|
||||
this.tableLabels.forEach(item=>{
|
||||
item.errRows=[];
|
||||
})
|
||||
this.assetSetting.configs.forEach((config,index)=>{
|
||||
this.tableLabels.forEach(label=>{
|
||||
let value=config[label.prop]
|
||||
let required=label.required
|
||||
if(required &&(!value || (typeof value =='string' && value == '')||(value instanceof Array && value.length<1))){
|
||||
validateFlag=false
|
||||
label.errRows.push(index) //保存有错误的行的index，通过行列唯一定位有错误的输入框
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return validateFlag;
|
||||
},
|
||||
isError:function(columnErrRows,rowIndex){
|
||||
return columnErrRows.includes(rowIndex);
|
||||
},
|
||||
commitAdd:function(skipChangeEditState=false){
|
||||
this.resetIfIndexOccupyState();
|
||||
this.assetSetting.configs=this.assetSetting.configs.map((config)=>{
|
||||
if(!skipChangeEditState){
|
||||
this.$set(config,'edit',false)
|
||||
}
|
||||
this.changeIfIndexOccupyState(config.ifindex,true);
|
||||
return config
|
||||
})
|
||||
},
|
||||
addTabRow:function(){
|
||||
let validateFlag=this.validateRows();
|
||||
if(validateFlag){
|
||||
this.commitAdd();
|
||||
this.assetSetting.configs.push({
|
||||
direction:[],
|
||||
ifindex:null,
|
||||
ifdescr:' ',
|
||||
tags:"",
|
||||
edit:true,
|
||||
})
|
||||
}
|
||||
},
|
||||
delTabRow:function(index,ifindex){
|
||||
if(this.assetSetting.configs.length>1){
|
||||
this.assetSetting.configs.splice(index,1)
|
||||
this.changeIfIndexOccupyState(ifindex,false)
|
||||
}
|
||||
},
|
||||
resetIfIndexOccupyState:function(){
|
||||
this.ifIndexList=this.ifIndexList.map(item=>{
|
||||
item.isOccupy=false;
|
||||
return item;
|
||||
})
|
||||
},
|
||||
changeIfIndexOccupyState:function(ifindex,state){
|
||||
this.ifIndexList=this.ifIndexList.map(item=>{
|
||||
if(item.value == ifindex){
|
||||
item.isOccupy=state;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
},
|
||||
delSelf:function(){
|
||||
this.$emit('delSelf',this.index)
|
||||
},
|
||||
showEditTagsBox:function(show,index,e){
|
||||
if(this.assetSetting.assetId != null){
|
||||
this.$refs.subBox.showEditTagsBox(show,this.assetSetting.configs,index,e);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if(this.assetSetting&&this.assetSetting.assetId){
|
||||
this.queryInterfaceInfos(this.assetSetting.assetId,true);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.asset-config-tab{
|
||||
width: calc(100% - 30px);
|
||||
min-height: 100px;
|
||||
max-height: 400px;
|
||||
border: 1px solid lightgrey;
|
||||
border-radius: 5px;
|
||||
padding:10px 20px 10px 10px;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.asset-config-tab .add-btn{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.taffic-setting-tab .el-table__row:hover{
|
||||
.input__inner{
|
||||
border-color: #F0F0F0;
|
||||
}
|
||||
}
|
||||
.input__inner{
|
||||
border: 1px solid;
|
||||
border-color: white;
|
||||
border-radius: 4px;
|
||||
padding-left: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
.input-error .el-input__inner,.input-error .el-input__inner:hover,.input-error .el-input__inner:focus,
|
||||
.input-error .input__inner,.input-error .input__inner:hover,.input-error .input__inner:focus {
|
||||
border-color: #F56C6C !important;
|
||||
}
|
||||
.direction-checkbox .el-checkbox{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.direction-checkbox .el-checkbox__label{
|
||||
padding-left:0px
|
||||
}
|
||||
.taffic-setting-tab td>.cell , .taffic-setting-tab td{
|
||||
text-align: center !important;
|
||||
padding:0 10px!important;
|
||||
}
|
||||
.taffic-setting-tab th>.cell{
|
||||
text-align: center !important;
|
||||
padding:0 10px!important;
|
||||
}
|
||||
.not-allowed:hover{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -78,6 +78,8 @@
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
|
||||
<span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id" ><i class="el-icon-s-tools"></i></span>
|
||||
</div>
|
||||
<template v-else-if="item.prop == 'principal'">
|
||||
<template v-if="scope.row.principal">
|
||||
@@ -139,13 +141,18 @@
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
<dc-box ref="dcBox" :dc="currentDc" :user-data="userData" @reload="getTableData"></dc-box>
|
||||
<traffic-setting-box :dc-obj="currentDc" ref="trafficBox"></traffic-setting-box>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var vm;
|
||||
import bus from '../../../libs/bus';
|
||||
import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
|
||||
export default {
|
||||
name: "dc",
|
||||
components:{
|
||||
'traffic-setting-box':trafficSettingBox,
|
||||
},
|
||||
data() {
|
||||
vm = this;
|
||||
return {
|
||||
@@ -298,6 +305,14 @@
|
||||
this.currentDc = tempDc;
|
||||
this.$refs.dcBox.show(true, true);
|
||||
},
|
||||
configTraffic: function (u) {
|
||||
let tempDc = JSON.parse(JSON.stringify(u));
|
||||
this.currentDc = tempDc;
|
||||
console.log(this.currentDc)
|
||||
setTimeout(()=>{
|
||||
this.$refs.trafficBox.show(true, true);
|
||||
},200)
|
||||
},
|
||||
detail(obj) {
|
||||
let tempDc = JSON.parse(JSON.stringify(obj));
|
||||
if (!tempDc.area) {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="top-tools" style="z-index: 1">
|
||||
<div class="top-tool-main-right">
|
||||
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
|
||||
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
|
||||
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
|
||||
</pick-time>
|
||||
<button :disabled="saveDisabled" type="button" @click="saveChart"
|
||||
@@ -44,7 +44,7 @@
|
||||
:class="{'shrink-view':!chartVisible || !defaultChartVisible}">
|
||||
<div class="view-title" @click="changeChartVisible" style="float: left"><i class="el-icon-caret-top" ></i> graph</div>
|
||||
<div class="chart-room">
|
||||
<chart ref="exploreChart"></chart>
|
||||
<chart ref="exploreChart" :unit="chartUnit"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-view right-margin" v-show="!showIntroduce"
|
||||
@@ -199,6 +199,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
import chart from "../overview/chart";
|
||||
import axios from 'axios';
|
||||
import chartBox from "../../../page/dashboard/chartBox";
|
||||
import {getUUID} from "../../../common/js/common";
|
||||
|
||||
export default {
|
||||
name: "explore",
|
||||
@@ -233,11 +234,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
tableLoading: false,
|
||||
saveDisabled: true,
|
||||
panelData: [],
|
||||
chartUnit:0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPanelData();
|
||||
this.promqlKeys.push(this.guid());
|
||||
this.promqlKeys.push(getUUID());
|
||||
},
|
||||
methods: {
|
||||
pageNo(val) {
|
||||
@@ -251,16 +253,24 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
filterShowData(source, pageObj) {
|
||||
return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
|
||||
},
|
||||
chartUnitChange:function(unit){
|
||||
this.chartUnit=unit;
|
||||
this.$nextTick(()=>{
|
||||
this.queryChartData();
|
||||
})
|
||||
},
|
||||
queryChartData: function () {
|
||||
this.$refs.exploreChart.startLoading();
|
||||
setTimeout(() => {
|
||||
if (this.expressions.length > 0) {
|
||||
let requestArr = [];
|
||||
let promqlInputIndexs=[];
|
||||
let queryExpression=[];
|
||||
this.expressions.forEach((item, index) => {
|
||||
if (item != '') {
|
||||
let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
|
||||
promqlInputIndexs.push(index);
|
||||
queryExpression.push(item)
|
||||
requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime[0] + '&end=' + this.filterTime[1] + '&step='+step))
|
||||
}
|
||||
})
|
||||
@@ -286,6 +296,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
seriesItem.data = result.values.map((item) => {
|
||||
return [item[0] * 1000, item[1]];
|
||||
})
|
||||
console.log(result)
|
||||
if(result.metric&&Object.keys(result.metric).length>0){
|
||||
let metric = Object.assign({}, result.metric);
|
||||
seriesItem.name += metric.__name__ + '{';
|
||||
delete metric.__name__;
|
||||
@@ -294,6 +306,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
}
|
||||
seriesItem.name = seriesItem.name.substr(0, seriesItem.name.length - 1);
|
||||
seriesItem.name += "}";
|
||||
}else{
|
||||
seriesItem.name=queryExpression[index]
|
||||
}
|
||||
series.push(seriesItem);
|
||||
legend.push({name: seriesItem.name, alias: null, isGray: false});
|
||||
})
|
||||
@@ -391,7 +406,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
},
|
||||
addExpression: function (index) {
|
||||
this.expressions.splice(index + 1, 0, '');
|
||||
this.promqlKeys.splice(index + 1, 0, this.guid());
|
||||
this.promqlKeys.splice(index + 1, 0, getUUID());
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression: function (index) {
|
||||
@@ -449,13 +464,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
|
||||
}
|
||||
});
|
||||
},
|
||||
guid() {
|
||||
function S4() {
|
||||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||||
}
|
||||
|
||||
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
|
||||
},
|
||||
elementsetShow(s, e) {
|
||||
var eventfixed = {
|
||||
shezhi: 0,
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
},
|
||||
props:{
|
||||
name: {type: String,default:'chart'},
|
||||
unit:{type:Number,default:5},
|
||||
chartTitle:{type:String},
|
||||
showToolbox:{type:Boolean,default:true},
|
||||
chartType:{type:String,default:'line'},
|
||||
@@ -93,9 +94,9 @@
|
||||
|
||||
if(this.chartType == 'line'){
|
||||
if(this.yAxisFormatter){
|
||||
this.modifyOption('yAxis','formatter',this.yAxisFormatter)
|
||||
this.option.yAxis.axisLabel.formatter=this.yAxisFormatter;
|
||||
}else{
|
||||
this.modifyOption('yAxis','formatter',this.defaultYAxisFormatter)
|
||||
this.option.yAxis.axisLabel.formatter=this.defaultYAxisFormatter
|
||||
}
|
||||
}
|
||||
// console.log(this.option)
|
||||
@@ -256,7 +257,7 @@
|
||||
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
|
||||
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias?alias:item.seriesName}: </div>`;
|
||||
str += `<div style="padding-left: 10px;">`;
|
||||
str += chartDataFormat.getUnit(5).compute(val,null,2);
|
||||
str += chartDataFormat.getUnit(this.unit).compute(val,null,2);
|
||||
str += `</div>`;
|
||||
str += `</div>`;
|
||||
});
|
||||
@@ -274,7 +275,7 @@
|
||||
return alias;
|
||||
},
|
||||
defaultYAxisFormatter:function(value,index){
|
||||
let unit=chartDataFormat.getUnit(5);
|
||||
let unit=chartDataFormat.getUnit(this.unit);
|
||||
return unit.compute(value,index);
|
||||
},
|
||||
setRandomColors:function(num){//当线条过多，默认颜色数量不够时须使用此方法,num 颜色的数量，通常传递series的length即可
|
||||
@@ -284,7 +285,6 @@
|
||||
}
|
||||
this.colors=Object.assign([],colors)
|
||||
this.$set(this.option,'color',colors)
|
||||
console.log(this.option)
|
||||
},
|
||||
startLoading:function(){
|
||||
this.$refs.loading.startLoading();
|
||||
|
||||
Reference in New Issue
Block a user