From e2535b7f329b196e95bc60863d20d0af4036f00d Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 14 Jan 2022 19:54:37 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1515=20feat:=20agent=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=20scrape=20endpoint=20=E4=BA=8C=E7=BA=A7=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/bottomBox/bottomBox.scss           |  11 +
 .../common/bottomBox/tabs/scrapeEndpoint.vue  | 231 ++++++++++--------
 .../table/settings/scrapeEndpointTable.vue    |  36 ++-
 3 files changed, 172 insertions(+), 106 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index 46a606200..c4d9dd769 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -114,6 +114,17 @@
         height: 100%;
       }
     }
+    .scrape-endpoint {
+      .el-input-group__append {
+        background-color: $--background-color-empty;
+        padding: 0 10px;
+        border-color: $--border-color-light;
+        color: $--color-text-regular;
+      }
+      .el-input__inner {
+        border-color: $--border-color-light;
+      }
+    }
   }
 }
 .main-and-sub-transition {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue b/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
index 802c43c2e..2e12f47a4 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/scrapeEndpoint.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="scrape-endpoint">
     <nz-bottom-data-list
       :showTitle='showTitle'
       :obj='obj'
@@ -8,17 +8,15 @@
       style="height: 100%"
       :custom-table-title.sync="tools.customTableTitle"
       :layout="['elementSet']"
-      :search-msg="searchMsg"
       :tabs="tabs"
-      @search="search"
       @changeTab="changeTab"
     >
-      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot:title><span :title="obj.name">{{obj.dc.name}}</span></template>
       <template v-slot:top-tool-right>
         <div class="top-tool-right">
           <div style="margin-right: 15px;">
-            <el-input size="small" ref="inputDate" v-model="inputDate" id="inputDate" class="input-with" @focus="focus" @blur="blur">
-              <el-button slot="append" icon="el-icon-search"></el-button>
+            <el-input size="small" ref="inputDate" v-model="inputDateSearch" @clear="clearInput" id="inputDate" class="input-with" @focus="focus" @blur="blur">
+              <el-button slot="append" icon="el-icon-search" @click="focus"></el-button>
             </el-input>
           </div>
         </div>
@@ -33,10 +31,7 @@
           :height="mainTableHeight"
           :table-data="tableData"
           :currentTableData="currentTableData"
-          :inputDate="inputDate"
-          @del="del"
-          @edit="edit"
-          @copy="copy"
+          :inputDateSearch="inputDateSearch"
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
@@ -54,6 +49,8 @@ import dataListMixin from '@/components/common/mixin/dataList'
 import scrapeEndpointTable from '@/components/common/table/settings/scrapeEndpointTable'
 import subDataList from '@/components/common/mixin/subDataList'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import bus from '@/libs/bus'
+import { sameLabels } from '@/components/common/js/constants'
 export default {
   name: 'scrapeEndpoint',
   components: {
@@ -65,69 +62,48 @@ export default {
     return {
       url: '/prom/api/v1/targets',
       tableId: 'promTargetsTable', // 需要分页的table的id，用于记录每页数量
-      searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          name: this.$t('config.scrapeEndpoint.endpoint'),
-          type: 'input',
-          label: 'endpointId',
-          disabled: false
-        }, {
-          name: this.$t('config.scrapeEndpoint.labels'),
-          type: 'input',
-          label: 'labels',
-          disabled: false
-        }, {
-          name: this.$t('config.scrapeEndpoint.lastScrape'),
-          type: 'input',
-          label: 'lastScrape',
-          disabled: false
-        }, {
-          name: this.$t('config.scrapeEndpoint.scrapeDuration'),
-          type: 'input',
-          label: 'lastScrapeDuration',
-          disabled: false
-        }, {
-          name: this.$t('config.scrapeEndpoint.state'),
-          type: 'select',
-          label: 'health',
-          disabled: false
-        }, {
-          name: this.$t('config.scrapeEndpoint.error'),
-          type: 'input',
-          label: 'lastError',
-          disabled: false
-        }]
-      },
       currentTableData: [],
       hideSameLabels: true,
-      inputDate: '',
+      inputDateSearch: '',
       tableDataCopy: '',
       pageObj: {
         pageSize: 20,
         pageNo: 1,
         total: 0
-      }
+      },
+      timer: null,
+      sameLabels: ['endpointLabels', 'labelsType', 'lastScrape', 'lastScrapeDuration', 'health', 'lastError']
     }
   },
   watch: {
-    inputDate (n, o) {
-      this.handleCurrentChange()
+    inputDateSearch (n, o) {
       const temp = this
       setTimeout(function () {
         temp.tableFilter()
       }, 500)
+    },
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        if (n) {
+          this.inputDateSearch = ''
+          this.getTableData()
+        }
+      }
     }
   },
   methods: {
+    // input 获取焦点时触发
     focus () {
       let classVal = document.getElementById('inputDate').parentElement.getAttribute('class')
       classVal = classVal.replace('input-with', 'input-with')
       document.getElementById('inputDate').parentElement.setAttribute('class', classVal)
       this.$refs.inputDate.focus()
     },
+    // input 失去焦点时触发
     blur () {
-      if (!this.inputDate || this.inputDate == '') {
+      if (!this.inputDateSearch || this.inputDateSearch == '') {
         setTimeout(function () {
           let classVal = document.getElementById('inputDate').parentElement.getAttribute('class')
           classVal = classVal.replace('input-with', 'input-with')
@@ -135,66 +111,112 @@ export default {
         }, 100)
       }
     },
-    getTableData () {
-      this.$set(this.searchLabel, 'dcId', this.obj.dcId)
-      this.$set(this.searchLabel, 'agentId', this.obj.id)
-      this.$set(this.searchLabel, 'type', this.obj.type)
-      this.$get(this.url, { ...this.searchLabel }).then(response => {
-        this.tools.loading = false
-        this.tableData = response.data.activeTargets.map(item => {
-          const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'datacenter', 'project', 'parent_asset', 'user']
-          buildIn.forEach(label => {
-            item[label] = {
-              id: item.labels[label + '_id'],
-              position: {},
-              loading: false
-            }
-          })
-          return item
-        })
-        // this.tableData = scrapeEndpoints[0].data.activeTargets
-        this.detailViewRightObj = this.tableData[0]
-        this.inputDateQuery = this.handlerTableData(this.tableData)
-        this.pageObj.total = this.tableData.length
-        if (!this.scrollbarWrap) {
-          this.$nextTick(() => {
-            this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
-            this.toTopBtnHandler(this.scrollbarWrap)
-            this.handleCurrentChange()
-          })
-        }
-      })
+    clearInput () {
+      this.$refs.inputDate.focus()
     },
-    handlerTableData (date) {
+    // 数据请求
+    getTableData () {
+      this.timer = setTimeout(() => {
+        this.$set(this.searchLabel, 'dcId', this.obj.dcId)
+        this.$set(this.searchLabel, 'agentId', this.obj.id)
+        this.$set(this.searchLabel, 'type', this.obj.type)
+        this.$get(this.url, { ...this.searchLabel }).then(response => {
+          this.tools.loading = false
+          this.tableData = response.data.activeTargets.map(item => {
+            const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'dc', 'project', 'parent_asset', 'user']
+            buildIn.forEach(label => {
+              if (label === 'dc') {
+                item[label] = {
+                  id: item.labels['datacenter' + '_id'],
+                  position: {},
+                  loading: false
+                }
+              } else {
+                item[label] = {
+                  id: item.labels[label + '_id'],
+                  position: {},
+                  loading: false
+                }
+              }
+            })
+            return item
+          })
+          this.detailViewRightObj = this.tableData[0]
+          this.inputDateQuery = this.handlerTableData(this.tableData)
+          this.pageObj.total = this.tableData.length
+          if (!this.scrollbarWrap) {
+            this.$nextTick(() => {
+              this.handleCurrentChange()
+            })
+          }
+        })
+      }, 500)
+    },
+    // 搜索字段的处理
+    handlerTableData (dates) {
       const tableDates = []
-      let endpoint = ''
-      let labelsType = ''
-      let lastScrape = ''
-      let lastScrapeDuration = ''
-      let health = ''
-      let lastError = ''
-      let tableDateAll = ''
-      date.map(e => {
-        endpoint = e.discoveredLabels.endpoint || ''
-        labelsType = e.labels.type || ''
-        lastScrape = e.lastScrape || ''
-        lastScrapeDuration = e.lastScrapeDuration || ''
-        health = e.health || ''
-        lastError = e.lastError || ''
-        tableDateAll = endpoint + labelsType + lastScrape + lastScrapeDuration + health + lastError + tableDateAll
-        const tableData = { endpoint, labelsType, lastScrape, lastScrapeDuration, health, lastError, tableDateAll }
-        console.log(tableData)
+      for (const date of dates) {
+        const endpointLabels = date.discoveredLabels.endpoint || ''
+        const labelsType = date.labels.type || ''
+        const lastScrape = bus.timeFormate(date.lastScrape, this.timeFormatMain) || ''
+        const lastScrapeDuration = date.lastScrapeDuration || ''
+        const health = date.health || ''
+        const lastError = date.lastError || ''
+        const asset = date.asset
+        const cpu = date.cpu
+        const dc = date.dc
+        const endpoint = date.endpoint
+        const module = date.module
+        const parent_asset = date.parent_asset
+        const project = date.project
+        const user = date.user
+        const labels = date.labels
+        const discoveredLabels = date.discoveredLabels
+        const tableData = {
+          endpointLabels,
+          endpoint,
+          labelsType,
+          lastScrape,
+          lastScrapeDuration,
+          health,
+          lastError,
+          asset,
+          dc,
+          cpu,
+          module,
+          project,
+          parent_asset,
+          user,
+          labels,
+          discoveredLabels
+        }
+        let simpleTemp = ''
+        const keys = Object.keys(tableData)
+        for (const index in keys) {
+          const key = keys[index]
+          if (this.sameLabels.some((i) => { return i === key })) {
+            if (tableData[key]) {
+              simpleTemp += key + tableData[key]
+            }
+          }
+        }
+        if (simpleTemp.indexOf(',') !== -1) {
+          simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
+        }
+        tableData.tableDateAll = simpleTemp
         tableDates.push(tableData)
-      })
+      }
       return tableDates
     },
+    // 对字段进行匹配
     tableFilter () {
       const temp = this
       const tableDatas = this.inputDateQuery
-      console.log(tableDatas)
       this.tableData = tableDatas.filter((item) => {
-        const element = temp.hideSameLabels ? item.tableDateAll : item.endpoint
-        return element.indexOf(this.inputDate) !== -1
+        if (item.endpoint) {
+          const element = temp.hideSameLabels ? item.tableDateAll : item.endpoint
+          return element.indexOf(this.inputDateSearch) !== -1
+        }
       })
       this.pageObj.pageNo = 1
       this.handleCurrentChange()
@@ -208,6 +230,7 @@ export default {
       localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
       this.handleCurrentChange()
     },
+    // 计算当前分页需要返回数据的条数
     handleCurrentChange () {
       this.pageObj.total = this.tableData.length
       this.currentTableData = this.tableData.slice(
@@ -217,6 +240,14 @@ export default {
     }
   },
   mounted () {
+  },
+  beforeDestroy () {
+    // 移除定时器
+    clearInterval(this.timer)
+  },
+  created () {
+    const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+    this.pageObj.pageSize = pageSize || 20
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue b/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
index bff52bd26..27d82de63 100644
--- a/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/scrapeEndpointTable.vue
@@ -34,10 +34,10 @@
       <div class="col-resize-area"></div>
     </template>
     <template slot-scope="scope" :column="item">
-      <template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint}}</template>
+      <template v-if="item.prop === 'endpoint'">{{scope.row.discoveredLabels.endpoint ? scope.row.discoveredLabels.endpoint : '-'}}</template>
+      <template v-else-if="item.prop === 'lastScrape'">{{scope.row.lastScrape}}</template>
       <template v-else-if="item.prop === 'labels'" class="labels">
           <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
-            <div> {{scope.row[item.prop]}}</div>
             <span
               @mouseenter="labelHover(scope.row, item.label, true, $event)"
               @mouseleave="labelHover(scope.row, item.label, false)">
@@ -63,9 +63,18 @@
               <div class="active-icon green-bg inline-block"></div>UP
           </div>
           <div slot="reference" v-else-if="scope.row[item.prop] === 'down'">
-            <div class="active-icon gray-bg inline-block"></div>DOWN
+            <div class="active-icon red-bg inline-block"></div>DOWN
           </div>
       </template>
+      <template v-else-if="item.prop === 'lastScrapeDuration'">
+        <el-tooltip effect="light" placement="right">
+          <div slot="content">
+            <div><span>Interval:&nbsp;</span>{{ scope.row.discoveredLabels._scrape_interval_ ? scope.row.discoveredLabels._scrape_interval_ + 's' : '0s' }}</div>
+            <div><span>Timeout:&nbsp;</span>{{ scope.row.discoveredLabels._scrape_timeout_ ? scope.row.discoveredLabels._scrape_timeout_ + 's' : '0s'}}</div>
+          </div>
+          <span>{{ lastScrapeDurationTimer(scope.row.lastScrapeDuration) }}</span>
+        </el-tooltip>
+      </template>
       <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
       <template v-else>-</template>
     </template>
@@ -84,9 +93,9 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import { calcDurationByStringTimeB } from '@/components/common/js/tools'
 import nzAlertTag from '@/components/page/alert/nzAlertTag'
 import alertLabel from '@/components/common/alert/alertLabel'
+import bus from '@/libs/bus'
 export default {
   name: 'scrapeEndpointTab',
   props: {
@@ -142,7 +151,19 @@ export default {
       }
     }
   },
+  watch: {
+    currentTableData: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        n.map(e => {
+          e.lastScrape = bus.timeFormate(e.lastScrape, this.timeFormatMain)
+        })
+      }
+    }
+  },
   methods: {
+    // 对于 labels 传入数据做处理
     labelsSort (obj) {
       const buildIn = ['asset', 'endpoint', 'module', 'cpu', 'datacenter', 'project', 'parent_asset', 'user']
       if (typeof obj === 'string') obj = JSON.parse(obj)
@@ -189,14 +210,17 @@ export default {
       if (this.labelToolTipDis(type)) {
         return
       }
-      console.log(item, type, loading, e,type + '_id')
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
-        console.log(type)
         this.$set(item[type], 'position', position)
       }
       this.$set(item[type], 'loading', loading)
+    },
+    // scrape duration
+    lastScrapeDurationTimer (time) {
+      const date = (time * 1000).toFixed(3)
+      return date + 'ms'
     }
   },
   mounted () {