NEZ-2199 feat : asset network 二级页面开发

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

@@ -43,6 +43,7 @@
         <log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
         <process-bottom-tab v-if="from === fromRoute.asset && targetTab === 'process' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></process-bottom-tab>
         <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
+        <network-bottom-tab v-if="from === fromRoute.asset && targetTab === 'network'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></network-bottom-tab>
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
         <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -94,6 +95,7 @@ import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import processBottomTab from '@/components/common/bottomBox/tabs/processBottomTab'
+import networkBottomTab from '@/components/common/bottomBox/tabs/networkBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
@@ -106,6 +108,7 @@ export default {
     scrapeEndpoint,
     LogBottomTab,
     processBottomTab,
+    networkBottomTab,
     cabinetTab,
     alertMessageTab,
     endpointTab,
@@ -261,6 +264,7 @@ export default {
       if (hasProcess) {
         tabs.push({ prop: 'process', name: this.$t('overall.process') })
       }
+      tabs.push({ prop: 'network', name: this.$t('overall.network') })
       return tabs
     },
     endpointTabs () {

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

@@ -0,0 +1,192 @@
+<template>
+  <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+    :api="url"
+    :custom-table-title.sync="tools.customTableTitle"
+    :layout="['elementSet']"
+    :search-msg="searchMsg"
+    :tabs="tabs"
+    :targetTab="targetTab"
+    :showPagination="false"
+    @search="search"
+    @changeTab="changeTab"
+  >
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+    <template v-slot:top-tool-right>
+        <div class="top-tool-right">
+         <div class="top-tool-search margin-r-20">
+           <el-input ref="elementQuery"  @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
+              <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
+            </el-input>
+         </div>
+         <pick-time
+              ref="pickTime"
+              v-model="searchTime"
+              :refresh-data-func="dateChange"
+              :showTimePicker="false"
+              :use-chart-unit="false"
+              class="pickTime margin-r-10">
+            </pick-time>
+        </div>
+    </template>
+    <template v-slot>
+      <assetNetworkTable
+        ref="dataTable"
+        :orderByFa="'id'"
+        v-my-loading="tools.loading"
+        :loading="tools.loading"
+        :api="url"
+        :custom-table-title="tools.customTableTitle"
+        :height="subTableHeight"
+        :filterTime="filterTime"
+        :table-data="tableData"
+        :terminaLogTab="true"
+        :queryExpression="queryExpression"
+        @del="del"
+        @edit="edit"
+        @orderBy="tableDataSort"
+        @reload="getTableData"
+        @selectionChange="selectionChange"></assetNetworkTable>
+    </template>
+    <template v-slot:pagination>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+    </template>
+  </nz-bottom-data-list>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import assetNetworkTable from '@/components/common/table/asset/assetNetworkTable'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+
+export default {
+  name: 'networkBottomTab',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    assetNetworkTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    obj (n) {
+      this.searchLabel = { id: n.id }
+      this.getTableData()
+    },
+    queryExpression (n) {
+      const temp = this
+      setTimeout(function () {
+        temp.tableFilter()
+      }, 500)
+    }
+  },
+  data () {
+    return {
+      url: 'asset/oshi/netstat/',
+      tableId: 'assetNetworkTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: []
+      },
+      searchLabel: { id: this.obj.id },
+      tableData: [],
+      // 搜索组件数据
+      queryExpression: '',
+      tableDataCopy: '',
+      // 刷新组件数据
+      searchTime: bus.getTimezontDateRange(),
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
+      ]
+    }
+  },
+  methods: {
+    async getTableData () {
+      this.tableDataCopy = ''
+      const response = await this.$get('asset/oshi/netstat?id=' + this.obj.id)
+      this.tools.loading = false
+      if (response.code === 200) {
+        this.tableData = response.data.list
+        this.tableDataCopy = JSON.stringify(this.tableData)
+        if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+          this.$nextTick(() => {
+            this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+            this.toTopBtnHandler(this.scrollbarWrap)
+          })
+        }
+      }
+    },
+    // 搜索组件事件
+    clearInput () {
+      this.$refs.elementQuery.focus()
+    },
+    focusInput () {
+      let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+      classVal = classVal.replace('query-input-inactive', 'query-input-active')
+      document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+      this.$refs.elementQuery.focus()
+    },
+    blurInput () {
+      if (!this.queryExpression || this.queryExpression == '') {
+        setTimeout(function () {
+          let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
+          classVal = classVal.replace('query-input-active', 'query-input-inactive')
+          document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
+        }, 100)
+      }
+    },
+    // 搜索数据过滤
+    tableFilter () {
+      const tableDatas = JSON.parse(this.tableDataCopy)
+      this.tableData = tableDatas.filter((item) => {
+        const element = item.processCmd ? item.processCmd : item.processName
+        return element.indexOf(this.queryExpression) !== -1
+      })
+    },
+    // 刷新组件事件
+    async dateChange () {
+      this.tools.loading = true
+      this.searchTime = bus.getTimezontDateRange()
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
+      await this.getTableData()
+      if (this.queryExpression != '') {
+        this.tableFilter()
+      }
+      this.filterShowData(this.tableData, this.orderBy)
+    },
+    // 数据排序
+    tableDataSort (item) {
+      this.orderBy = item
+      this.filterShowData(this.tableData, item)
+    },
+    filterShowData (source, ord) {
+      let orderBy = null
+      let sourceData = null
+      orderBy = ord
+      sourceData = JSON.parse(this.tableDataCopy)
+      if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
+        source = Object.assign([], sourceData)
+      } else { // 排序之后的顺序
+        if (orderBy.order === 'ascending') {
+          source = source.sort(this.$tableSet.asce(orderBy.prop))
+        }
+        if (orderBy.order === 'descending') {
+          source = source.sort(this.$tableSet.desc(orderBy.prop))
+        }
+      }
+      return source
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -26,6 +26,7 @@
       <log-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
       <assetSubTab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab="targetTab" @changeTab="changeTab"></assetSubTab>
       <process-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'process' && obj.clientState == '1'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab="targetTab" @changeTab="changeTab"></process-bottom-tab>
+      <network-bottom-tab :showTitle="false" v-if="from === fromRoute.asset && targetTab === 'network'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="assetTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></network-bottom-tab>
       <!--module列表的tab-->
       <endpointTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
       <alertMessageTabNew :showTitle="false" v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
@@ -65,6 +66,7 @@ import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import processBottomTab from '@/components/common/bottomBox/tabs/processBottomTab'
+import networkBottomTab from '@/components/common/bottomBox/tabs/networkBottomTab'
 import detailRightTop from './detailRightTop/detailRightTop'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 
@@ -89,7 +91,8 @@ export default {
     assetSubTab,
     'detail-right-top': detailRightTop,
     alertRuleEvalLog,
-    processBottomTab
+    processBottomTab,
+    networkBottomTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -223,6 +226,7 @@ export default {
       if (hasProcess) {
         tabs.push({ prop: 'process', name: this.$t('overall.process') })
       }
+      tabs.push({ prop: 'network', name: this.$t('overall.network') })
       return tabs
     },
     endpointTabs () {

nezha-fronted/src/components/common/table/asset/assetNetworkTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-table
+    id="assetNetworkTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    tooltip-effect="light"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+    @row-dblclick="(row)=>{queryMessage(row)}"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      :show-overflow-tooltip="item.prop === 'description'"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'processCmd'">
+          <div :title="scope.row[item.prop] || scope.row.processName">{{scope.row[item.prop] || scope.row.processName}}</div>
+        </template>
+        <template v-else-if="item.prop === 'processId'">
+          {{scope.row[item.prop]}}
+        </template>
+        <template v-else-if="item.prop === 'transmitQueue'">
+          {{scope.row[item.prop]}}
+        </template>
+         <template v-else-if="item.prop === 'receiveQueue'">
+          {{scope.row[item.prop]}}
+        </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <template slot="empty">
+      <div  v-if="!loading"  class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'assetNetworkTable',
+  mixins: [table],
+  props: {
+    loading: Boolean,
+    filterTime: {}
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('overall.process'),
+          prop: 'processCmd',
+          show: true,
+          minWidth: 300,
+          sortable: 'custom'
+        }, {
+          label: this.$t('asset.process.PID'),
+          prop: 'processId',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.type'),
+          prop: 'type',
+          show: true,
+          minWidth: 100,
+          sortable: 'custom'
+        }, {
+          label: this.$t('asset.network.localAddress'),
+          prop: 'localAddress',
+          show: true,
+          minWidth: 150,
+          sortable: 'custom'
+        }, {
+          label: this.$t('asset.network.foreignAddress'),
+          prop: 'foreignAddress',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          show: true,
+          minWidth: 120
+        }, {
+          label: this.$t('asset.network.transmitQueue'),
+          prop: 'transmitQueue',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('asset.network.receiveQueue'),
+          prop: 'receiveQueue',
+          show: true,
+          minWidth: 120,
+          sortable: 'custom'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 数据排序
+    tableDataSort (item) {
+      const orderBy = { order: item.order, prop: item.prop }
+      this.$emit('orderBy', orderBy)
+    }
+  }
+}
+</script>
+<style>
+</style>
+<style>
+</style>