perf:系统设置及asset界面调整 & overview map tooltip调整 &其他修改

1.系统设置界面调整
2.overview map tooltip样式调整
3.endpoint 查询metric接口调整
4.asset 左侧菜单调整

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -563,7 +563,7 @@
         this.queryData = [];
         this.tableData = [];
         this.tableDataCopy = '';
-        this.$get("/prom/api/v1/query?query={job='ed_" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
+        this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
           if(response.status==="success"){
             let results = response.data.result;
             this.queryData=JSON.parse(JSON.stringify(results));

nezha-fronted/src/components/common/language/en.js

@@ -210,7 +210,7 @@ const en = {
           type:'type',
           model:'model',
           dc:'dataCenter'
-        }
+        },
       },
       project:{
         project:'Project',
@@ -233,8 +233,26 @@ const en = {
         top:'Top',
         chart:{
           chartTitle:'Alert Trend'
-        }
+        },
       },
+      mapTooltip:{
+        asset:'asset',
+        state:'state',
+        ping:'ping',
+        inStock:'in stock',
+        outStock:'out stock',
+        active:'active',
+        inactive:'inactive',
+        alert:'alert',
+        high:'high',
+        medium:'medium',
+        low:'low',
+        endpoint:'endpoint',
+        total:'total',
+        up:'up',
+        down:'down',
+        prometheus:'prometheus',
+      }
     }
   },
   validate: { //校验规则
@@ -271,7 +289,8 @@ const en = {
     testSuccess:'Test success',
     downloadSuccess : 'Download Success',
     uploadSuccess: 'Upload Success',
-    pressEnterToAdd: 'Press enter to add new line'
+    pressEnterToAdd: 'Press enter to add new line',
+    resetSuccess:'Reset success',
   },
   asset:{
     asset: 'Asset',
@@ -281,6 +300,12 @@ const en = {
     assetStatPre:'Last reply:',
     assetStatDown:'Never',
     pingInactive:'inactive',
+    left:{
+      dataCenter:'DataCenter',
+      assetType:'Asset Type',
+      vendor:'Vendor',
+      ping:'Ping',
+    },
     createAssetTab:{
       title:'New asset',//'新增资产'
       sn:'SN',//SN
@@ -506,35 +531,6 @@ const en = {
       remark: 'Remark',
       type: 'Type'
     },
-    terminallog: {
-      terminallog: 'TerminalLog',
-      status: 'Status',//"状态"
-      option: 'Operation',//"操作",
-      host: 'Host',
-      cmd: 'CMD',
-      port: 'Port',
-      userId: 'UserID',
-      protocol: 'Protocol',
-      user: 'User',
-      detail: 'Terminal Log Detail',
-      resize: 'Terminal Resize',
-      download: 'Terminal Download',
-      upload: 'Terminal Upload',
-      selectFile: 'Select File',
-      SSH: 'SSH',
-      TELNET: 'TELNET',
-      id: 'ID',
-      time: 'Time',
-      width: 'Width',
-      height: 'Height',
-      cols: 'Cols',
-      rows: 'Rows',
-      uuid: 'UUID',
-      path: 'Path',
-      file: 'File',
-      success: 'Success',
-      fail: 'Fail'
-    },
     mib:{
       mib:'Mib',
       fileName:'FileName',
@@ -670,17 +666,6 @@ const en = {
       editModule: 'Edit module',//"编辑组件"
       description: 'Description',//"描述"
       createModule: 'New module',//"新增组件"
-      version: 'Version',
-      walk: 'Walk',
-      maxRepetitions: 'Max repetitions',
-      retries: 'Retries',
-      timeout: 'Timeout',
-      community: 'Community',
-      securityLevel: 'Security level',
-      authProtocol: 'Auth protocol',
-      privProtocol: 'Priv protocol',
-      contextName: 'Context name',
-      privPassword: 'Priv password',
       tip: {
         defaultEndpointSet: 'Default endpoint settings',//"默认的Endpoint设置"
         relation: 'Module associated Endpoint will configure the following ports/paths/parameters by default'//"组件关联的Endpoint将默认配置以下端口/路径/参数"

nezha-fronted/src/components/page/asset/asset.vue

@@ -5,7 +5,7 @@
         <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">
+          <!--<el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
             <div class="sidebar-info-item-txt" style="font-weight: bold;">All</div>
           </el-checkbox>
           <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
@@ -16,7 +16,7 @@
                   <span slot="reference">{{item.name}}</span>
                 </el-popover>
                 <span v-else>{{item.name}}</span>
-              </div>
+              </div>-->
 
   <!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
   <!--              <template v-slot:optionZone>-->
@@ -25,70 +25,128 @@
   <!--                </span>-->
   <!--              </template>-->
   <!--            </idc-config-box>-->
-            </el-checkbox>
+            <!--</el-checkbox>
-          </el-checkbox-group>
+          </el-checkbox-group>-->
+          <el-collapse v-model="activeType">
+            <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
+              <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
+                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
+                             v-for="(item,key) in checkListData" :key="key" :label=item.id>
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
+                      <span slot="reference">{{item.name}}</span>
+                    </el-popover>
+                    <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>-->
+                  </el-checkbox>
+              </el-checkbox-group>
+            </el-collapse-item>
+            <el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
+              <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
+                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item,key) in assetTypeCheckListData" :key="key" :label=item.id>
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
+                      <span slot="reference">{{item.value}}</span>
+                    </el-popover>
+                    <span v-else>{{item.value}}</span>
+                  </div>
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-collapse-item>
+            <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
+              <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
+                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item,key) in vendorCheckListData" :key="key" :label=item.id>
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
+                      <span slot="reference">{{item.value}}</span>
+                    </el-popover>
+                    <span v-else>{{item.value}}</span>
+                  </div>
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-collapse-item>
+            <el-collapse-item name="ping" :title="$t('asset.left.ping')">
+              <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
+                <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
+                      <span slot="reference">{{item.label}}</span>
+                    </el-popover>
+                    <span v-else>{{item.label}}</span>
+                  </div>
+                </el-checkbox>
+              </el-checkbox-group>
+            </el-collapse-item>
+          </el-collapse>
         </div>
       </el-scrollbar>
     </div>
 
-    <div class="content-right">
+          <div class="content-right">
-      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+            <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
-        <div class="top-tools" v-show="mainResizeShow">
+              <div class="top-tools" v-show="mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
+                <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
-            <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
+                  <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
-            <export-excel
+                  <export-excel
-              export-file-name="asset"
+                    export-file-name="asset"
-              export-url="/asset/export"
+                    export-url="/asset/export"
-              :params="searchLabel"
+                    :params="searchLabel"
-              @afterImport="getAssetData"
+                    @afterImport="getAssetData"
-              style="width: 59px;"
+                    style="width: 59px;"
-              class="float-right">
+                    class="float-right">
-              <template slot="optionZone">
+                    <template slot="optionZone">
-                  <i class="nz-icon nz-icon-create-square" @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" ></i>
+                        <i class="nz-icon nz-icon-create-square" @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" ></i>
-              </template>
+                    </template>
-            </export-excel>
+                  </export-excel>
-          </div>
+                </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
+                <div class="pagination-top pagination-top-hide display-none"></div>
-        </div>
+              </div>
 
-        <el-table
+              <el-table
-          class="nz-table"
+                class="nz-table"
-          :height="mainTableHeight"
+                :height="mainTableHeight"
-          style="width: 100%;"
+                style="width: 100%;"
-          :data="tableData"
+                :data="tableData"
-          v-scrollBar:el-table
+                v-scrollBar:el-table
-          v-show="mainResizeShow"
+                v-show="mainResizeShow"
-          border
+                border
-          tooltip-effect="light"
+                tooltip-effect="light"
-          ref="assetTable"
+                ref="assetTable"
-        >
+              >
-          <el-table-column
+                <el-table-column
-            :resizable="false"
+                  :resizable="false"
-            v-for="(item, index) in tablelable"
+                  v-for="(item, index) in tablelable"
-            v-if="item.show"
+                  v-if="item.show"
-            :width="item.width"
+                  :width="item.width"
-            :key="`col_${index}`"
+                  :key="`col_${index}`"
-            :label="item.label"
+                  :label="item.label"
-            :fixed="item.fixed"
+                  :fixed="item.fixed"
-            :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
+                  :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
-            min-width="110px"
+                  min-width="110px"
-            :class-name="item.prop == 'option' ? 'content-right-options' : ''"
+                  :class-name="item.prop == 'option' ? 'content-right-options' : ''"
-          >
+                >
-            <template slot-scope="scope" :column="item">
+                  <template slot-scope="scope" :column="item">
-              <div v-if="item.prop=='ID'">
+                    <div v-if="item.prop=='ID'">
-                <span>{{scope.row.id}}</span>
+                      <span>{{scope.row.id}}</span>
-              </div>
+                    </div>
-              <div v-if="item.prop=='assetType'">
+                    <div v-if="item.prop=='assetType'">
-                <span>{{scope.row.model.type.value}}</span>
+                      <span>{{scope.row.model.type.value}}</span>
-              </div>
+                    </div>
-              <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
+                    <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
-              <div v-if="item.prop=='HOST'">
+                    <div v-if="item.prop=='HOST'">
-                <span>{{scope.row.host}}</span>
+                      <span>{{scope.row.host}}</span>
-              </div>
+                    </div>
-              <div v-if="item.prop=='state'">
+                    <div v-if="item.prop=='state'">
-                <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
+                      <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
-              </div>
+                    </div>
-  <!--            :content="scope.row.pingRtt ? (scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'['+ scope.row.pingRtt+'ms'+']':(scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'[unreachable]'"-->
+        <!--            :content="scope.row.pingRtt ? (scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'['+ scope.row.pingRtt+'ms'+']':(scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'[unreachable]'"-->
               <div v-if="item.prop == 'pingStatus'">
                 <el-popover
                   placement="right"
@@ -273,7 +331,11 @@
         },
         showTopBtn: false,
         searchLabel: {}, //搜索参数
+        activeType:'dataCenter',
         checkList: [],
+        assetTypeCheckList:[],
+        vendorCheckList:[],
+        pingCheckList:[],
         tablelable: [],
         dropCol: [],
         tableTitle: [
@@ -354,6 +416,9 @@
           }],
         tableData: [],
         checkListData: [],
+        assetTypeCheckListData:[],
+        vendorCheckListData:[],
+        pingCheckListData:[],
         IDCData: '',
         IDCOptionData: [],
         cabinetData: '',
@@ -421,6 +486,7 @@
       getData: {
         handler(newVal) {
           if (newVal.type == 1) {
+            this.activeType='dataCenter'
             this.checkList = newVal.selectedData;
             this.assetClick = false;
           }
@@ -580,6 +646,26 @@
           }
         })
       },
+      getAssetTypeData:function(){
+        this.$get('sys/dict/all?type=assetType').then(response => {
+          if (response.code === 200) {
+            this.assetTypeCheckListData = response.data
+          }
+        })
+      },
+      getVendorData:function(){
+        this.$get('sys/dict/all?type=vendor').then(response => {
+          if (response.code === 200) {
+            this.vendorCheckListData = response.data
+          }
+        })
+      },
+      getPingData:function(){
+        this.pingCheckListData=[
+          {label:'up',value:1},
+          {label:'down',value:2},
+        ]
+      },
       getUserData() {
         this.$get('sys/user/list').then(response => {
           if (response.code === 200) {
@@ -729,6 +815,33 @@
         this.assetClick = true;
         this.getSingleAsset();
       },
+      changeAssetTypeCheckBox:function(){
+        if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
+          let assetTypeIds=this.assetTypeCheckList.join(',');
+          this.pageObj.typeIds=assetTypeIds;
+          this.getAssetData();
+        }else{
+          this.pageObj.typeIds='';
+        }
+      },
+      changeVendorCheckBox:function(){
+        if(this.vendorCheckList && this.vendorCheckList.length > 0){
+          let vendorIds=this.vendorCheckList.join(',');
+          this.pageObj.vendorIds=vendorIds;
+          this.getAssetData();
+        }else{
+          this.pageObj.vendorIds='';
+        }
+      },
+      changePingCheckBox:function(){
+        if(this.pingCheckList && this.pingCheckList.length > 0){
+          let pingStates=this.pingCheckList.join(',');
+          this.pageObj.pingStates=pingStates;
+          this.getAssetData();
+        }else{
+          this.pageObj.pingStates='';
+        }
+      },
       getSingleAsset() {
         let checkedCount = this.checkList.length;
         let allCount = this.checkListData.length;
@@ -844,6 +957,9 @@
     created() {
       this.getUserData();
       this.getIDCOptionData();
+      this.getAssetTypeData();
+      this.getVendorData();
+      this.getPingData();
     },
     mounted() {
       //是否存在分页缓存

nezha-fronted/src/components/page/config/mib.vue

@@ -78,8 +78,8 @@
               </div>
             </template>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
-              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+<!--              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
-              &nbsp;
+<!--              &nbsp;-->
               <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-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="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>

nezha-fronted/src/components/page/config/system.vue

@@ -157,7 +157,7 @@
 <!--                  <el-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>-->
 <!--                </el-select>-->
                 <el-checkbox-group v-model="reset.type">
-                  <el-checkbox v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-checkbox>
+                  <div v-for="(item,index) in resetOptions" :key="item.value+index"><el-checkbox  :label="item.label" :value="item.value"  ></el-checkbox></div>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item>
@@ -347,19 +347,20 @@
             });
           },
           resetSys:function(){
+            let $temp=this;
             this.$prompt(this.$t('config.system.reset.pwdTip'), this.$t('config.system.reset.promptTitle'), {
               confirmButtonText: this.$t('config.system.reset.yes'),
               cancelButtonText: this.$t('config.system.reset.no'),
               inputType:'password',
             }).then(({ value }) => {
-              this.reset.password=value
+              $temp.reset.password=value
-              this.$refs['resetForm'].validate(valid=>{
+              $temp.$refs['resetForm'].validate(valid=>{
                 if(valid){
-                  this.$delete('/sysConfig/reset',this.reset).then(response=>{
+                  $temp.$put('/sysConfig/reset',$temp.reset).then(response=>{
                     if(response.code == 200){
-                      this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
+                      $temp.$message({duration: 2000, type: 'success', message: this.$t("tip.resetSuccess")});
                     }else{
-                      this.$message.error(response.msg);
+                      $temp.$message.error(response.msg);
                     }
                   })
                 }

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

@@ -94,7 +94,7 @@
         trigger: 'item',
         type:'cross',
         alwaysShowContent: false,
-        backgroundColor:'#6E6E6E',
+        // backgroundColor: 'rgba(0,0,0,0.7)',
         borderColor:'#ffffff',
         borderRadius: 4,
         borderWidth: 1,

nezha-fronted/src/components/page/dashboard/overview/overview.scss

@@ -129,3 +129,4 @@
 }
 
 
+

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -806,7 +806,7 @@
                   }else{
                     areaName=areaInfo.name;
                   }
-                  seriesDatas.push({name:areaName,value:[areaInfo.longitude,areaInfo.latitude,dcStat.assetTotal,dcStat.alertTotal]})
+                  seriesDatas.push({name:areaName,value:[areaInfo.longitude,areaInfo.latitude,dcStat]})
                 }
               }
             }
@@ -836,14 +836,80 @@
       },
       /*加载数据 end*/
       mapTooltipFormatter(params){
-        var color = "orange";
+        let dcStat=params.data.value[2];
-        var a = "<div style='background-color:"+color+";padding: 5px 10px;text-align:center;color:white;font-size: 16px;'>" + params.data.name + "</div>";
+        let tooltip=`
-        a += "<div style='padding:3px;text-align: center'>";
+            <div class="tooltip">
-        a +=this.$t('dashboard.overview.asset.title')+': '+params.data.value[2] + "<br>";
+                <div>${dcStat.name}</div>
-        a +=this.$t('dashboard.overview.asset.alert')+': '+params.data.value[3] + "<br>";
+                <div class="flex-box">
-        a += "</div>";
+                   <div style="width: 60%;">
+                        <table  style="width: 100%;" class="tooltip-table">
+                            <tr ><td colspan="3"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.asset')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.assetTotal}</div></div></td></tr>
+                            <tr>
+                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.state')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.inStock')}</td>
+                                <td >${dcStat.assetInStock}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.outStock')}</td>
+                                <td >${dcStat.assetOutStock}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="2">${this.$t('dashboard.overview.mapTooltip.ping')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.active')}</td>
+                                <td >${dcStat.assetPingUp}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.inactive')}</td>
+                                <td >${dcStat.assetPingDown}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="3">${this.$t('dashboard.overview.mapTooltip.alert')}</td>
+                                <td >${this.$t('dashboard.overview.mapTooltip.high')}</td>
+                                <td >${dcStat.alertHigh}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.medium')}</td>
+                                <td >${dcStat.alertMedium}</td>
+                            </tr>
+                            <tr>
+                                <td >${this.$t('dashboard.overview.mapTooltip.low')}</td>
+                                <td >${dcStat.alertLow}</td>
+                            </tr>
+                        </table>
+                   </div>
+                   <div style="width: 30%;" class="flex-box column-box">
+                      <div  >
+                        <table style="width: 100%;" class="tooltip-table">
+                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.endpoint')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.endpointTotal}</div></div></td></tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
+                                <td>${dcStat.endpointUp}</td>
+                            </tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
+                                <td>${dcStat.endpointDown}</td>
+                            </tr>
+                        </table>
+                      </div>
+                       <div >
+                           <table style="width: 100%;" class="tooltip-table">
+                            <tr><td colspan="2"><div style="display: flex;justify-content: space-between"><div>${this.$t('dashboard.overview.mapTooltip.prometheus')}</div><div>${this.$t('dashboard.overview.mapTooltip.total')}: ${dcStat.promTotal}</div></div></td></tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.up')}</td>
+                                <td>${dcStat.promUp}</td>
+                            </tr>
+                            <tr>
+                                <td>${this.$t('dashboard.overview.mapTooltip.down')}</td>
+                                <td>${dcStat.promDown}</td>
+                            </tr>
+                           </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
 
-        return a;
+        return tooltip;
       },
       tooltipPosition:function(point,params,dom,rect,size){
         dom.style.transform = "translateZ(0)";
@@ -1139,4 +1205,36 @@
     flex-direction: column;
     height: 100%;
   }
+  .tooltip{
+    padding:5px;
+    min-width: 500px;
+  }
+  .tooltip-table{
+    border-spacing: 0px;
+    border-collapse:collapse;
+  }
+  .tooltip-table tr{
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+  }
+  .tooltip-table td{
+    min-width: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    text-align: left;
+    border: 1px solid #EBEEF5;
+    display: table-cell;
+    padding:0px 5px ;
+  }
+  .flex-box{
+    display: flex;
+    justify-content: space-around;
+  }
+  .column-box{
+    flex-direction: column;
+    justify-content: space-between !important;
+  }
 </style>