From 78c30487a567df9c6017ec3d8c8ac2821aae87bb Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Tue, 28 Apr 2020 17:39:54 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:traffic=20=E9=85=8D=E7=BD=AE=E5=88=9D?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/common.js        |   7 +
 .../src/components/common/language/en.js      |   6 +-
 .../common/rightBox/trafficSetting/subBox.vue | 158 ++++++++
 .../trafficSetting/trafficSettingBox.vue      | 297 ++++++++++++++
 .../trafficSetting/trafficSettingTab.vue      | 372 ++++++++++++++++++
 .../src/components/page/config/dc.vue         |  15 +
 6 files changed, 854 insertions(+), 1 deletion(-)
 create mode 100644 nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
 create mode 100644 nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
 create mode 100644 nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue

diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js
index 4f5179441..805d525ac 100644
--- a/nezha-fronted/src/components/common/js/common.js
+++ b/nezha-fronted/src/components/common/js/common.js
@@ -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());
+}
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index ec3c12a97..f87a398f7 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -554,7 +554,11 @@ const en = {
       cabinetNum: "Cabinet number",
       assets: "Assets",
       remark:'Remark',
-      cabinets: "Cabinets"
+      cabinets: "Cabinets",
+      traffic:{
+        title:'Traffic Setting',
+        add:'Add',
+      }
     },
     model: {
       model: 'Asset model',
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
new file mode 100644
index 000000000..e058be6c3
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
@@ -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>
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
new file mode 100644
index 000000000..aa3c22d9e
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -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>
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
new file mode 100644
index 000000000..047f80fa7
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
@@ -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>
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index fd581bb8b..ffa308352 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -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>
                   &nbsp;
                   <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>
+                  &nbsp;
+                  <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) {

From d6fbf428f01f82828b3ede20cee32eae6d3000d7 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Tue, 28 Apr 2020 19:23:48 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:explore=E6=B7=BB=E5=8A=A0unit=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/chartUnit.vue       | 52 +++++++++++++++++++
 .../src/components/common/pickTime.vue        | 16 ++++++
 .../page/dashboard/explore/explore.vue        | 23 ++++----
 .../page/dashboard/overview/chart.vue         | 12 ++---
 4 files changed, 86 insertions(+), 17 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/chartUnit.vue

diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
new file mode 100644
index 000000000..a3381306b
--- /dev/null
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -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>
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 3538c1c4e..2a129dc96 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -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>&nbsp;
@@ -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>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index a06b4027b..a86e2c80b 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -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>&nbsp;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,6 +253,12 @@ 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(() => {
@@ -391,7 +399,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 +457,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,
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index d031b4998..3c262d99b 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -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,12 +94,12 @@
 
         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)
+        // console.log(this.option)
         this.$set(this.option,'series',this.series);
 
         this.chart.clear();
@@ -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();

From 5343b9f5a1d071b1b5b07c48ae245d086c16170d Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Tue, 28 Apr 2020 19:32:49 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:explore=E4=BF=AE=E5=A4=8D=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E7=9A=84=E5=9B=BE=E8=A1=A8=E6=95=B0=E6=8D=AE=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E6=B2=A1=E6=9C=89label=E7=9A=84=E6=97=B6=EF=BC=8Clege?=
 =?UTF-8?q?nd=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/dashboard/explore/explore.vue        | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index a86e2c80b..1efb154fd 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -265,10 +265,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
           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))
               }
             })
@@ -294,14 +296,19 @@ 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]];
                       })
-                      let metric = Object.assign({}, result.metric);
-                      seriesItem.name += metric.__name__ + '{';
-                      delete metric.__name__;
-                      for (let key in metric) {
-                        seriesItem.name += key + "=" + '"' + metric[key] + '",';
+                      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__;
+                        for (let key in metric) {
+                          seriesItem.name += key + "=" + '"' + metric[key] + '",';
+                        }
+                        seriesItem.name = seriesItem.name.substr(0, seriesItem.name.length - 1);
+                        seriesItem.name += "}";
+                      }else{
+                        seriesItem.name=queryExpression[index]
                       }
-                      seriesItem.name = seriesItem.name.substr(0, seriesItem.name.length - 1);
-                      seriesItem.name += "}";
                       series.push(seriesItem);
                       legend.push({name: seriesItem.name, alias: null, isGray: false});
                     })