NEZ-956 feat： panel 添加logs

2021-09-03 16:30:55 +08:00
parent 9a37341d0b
commit de502fa4d9
6 changed files with 165 additions and 33 deletions
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -80,6 +80,21 @@
                          :chart-data="item"
        ></line-chart-block>

+        <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
+              :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
+              :startTime="filter.start_time" :endTime="filter.end_time"
+              @on-refresh-data="refreshChart"
+              @on-remove-chart-block="removeChart"
+              @on-duplicate-chart-block="duplicateChart"
+              @on-drag-chart="editChartForDrag"
+              @on-edit-chart-block="editData"
+              @sync="()=>{chartBySync(item)}"
+              :panel-id="filter.panelId"
+              :is-lock="panelLock"
+              :chart-index="item.id"
+              @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+              :chart-data="item"></logs>
+
        <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
                     @on-refresh-data="refreshChart"
                     @on-search-data="searchData"
@@ -225,6 +240,7 @@ import textChart from './text-chart'
 import diagramChart from './diagram-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
+import logs from './logs'
 import { fromRoute } from '@/components/common/js/constants'
 import chartTempData from '@/components/charts/chartTempData'
 // import visNetwork from './visNetwork'
@@ -254,7 +270,8 @@ export default {
    textChart,
    chartPie,
    chartBarStatis,
-    diagramChart
+    diagramChart,
+    logs
    // visNetwork,
  },
  watch: {
@@ -605,6 +622,14 @@ export default {
              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
                panelId, filter, null, '')
            }
+          } else if (chartItem.type == 'logs') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
          }
        }
      } else {
@@ -653,6 +678,18 @@ export default {
        }
        return
      }
+      if (chartItem.type == 'logs') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }

      if (this.isModel) {
        this.modelStaticData(chartInfo, filterType)
@@ -704,6 +741,9 @@ export default {
              if (this.from === fromRoute.chartTemp) {
                return new Promise(resolve => resolve(chartTempData))
              }
+              if (chartInfo.type == 'logs') {
+                return chartTempData
+              }
              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
            })
            // 一个图表的所有element单独获取数据
@@ -971,6 +1011,14 @@ export default {
                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
                        this.filter.panelId, this.filter, '', errorMsg)
                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
                  }
                }
              } else {
@@ -1000,6 +1048,14 @@ export default {
                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
                        this.filter.panelId, this.filter)
                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
                  }
                }
              }
@@ -1143,6 +1199,14 @@ export default {
            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
              this.filter.panelId, this.filter, '', errorMsg)
          }
+        } else if (chartInfo.type === 'logs') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/charts/logs.vue
+++ b/nezha-fronted/src/components/charts/logs.vue
@@ -66,14 +66,19 @@
          </el-dropdown>
        </div>
        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content"  >
-            <div v-if="showTab.indexOf('1') > -1" name="1" title="Graph" style="height: 100%">
+          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content" >
+            <div v-if="showTab.length==2" class="show-tab-icon">
+              <i class="nz-icon nz-icon-Metrics" :class="showTabActive == '1'?'is-active-icon':''" @click="showTabActive = '1'"/>
+              <i class="nz-icon nz-icon-logs" :class="showTabActive == '2'?'is-active-icon':''" @click="showTabActive = '2'"/>
+            </div>
+            <div v-show="showTab.indexOf('1') > -1 && showTabActive == '1'" name="1" title="Graph" style="height: 100%">
              <div class="chart-room" style="height: 100%">
                <chart ref="logChart" :unit="chartUnit"></chart>
              </div>
            </div>
-            <div v-show="showTab.indexOf('2') > -1" name="2" title="Logs">
-              <log-tab ref="logDetail" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+            <div v-show="showTab.indexOf('2') > -1 && showTabActive == '2'" name="2" title="Logs" class="logs-box">
+              <log-tab ref="logDetail" v-show="!noData" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+              <div class="chart-no-data" v-show="noData">No Data</div>
            </div>
          </div>
        </div>
@@ -110,13 +115,18 @@
            <!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
          </div>
          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content"  >
-            <div v-if="showTab.indexOf('1') > -1" name="1" title="Graph" style="height: 100%">
+            <div v-if="showTabScreen.length==2" class="show-tab-icon">
+              <i class="nz-icon nz-icon-Metrics" :class="showTabScreenActive == '1'?'is-active-icon':''" @click="showTabScreenActive = '1'"/>
+              <i class="nz-icon nz-icon-logs" :class="showTabScreenActive == '2'?'is-active-icon':''" @click="showTabScreenActive = '2'"/>
+            </div>
+            <div v-show="showTabScreen.indexOf('1') > -1 && showTabScreenActive == '1'" name="1" title="Graph" style="height: 100%">
              <div class="chart-room" style="height: 100%">
                <chart ref="logChartScreen" :unit="chartUnit"></chart>
              </div>
            </div>
-            <div v-show="showTab.indexOf('2') > -1" name="2" title="Logs">
-              <log-tab ref="logDetailScreen" :log-data="logDataScreen" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+            <div v-show="showTabScreen.indexOf('2') > -1 && showTabScreenActive == '2'" name="2" title="Logs" class="logs-box">
+              <log-tab ref="logDetailScreen" v-show="!noDataScreen" :log-data="logDataScreen" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+              <div class="chart-no-data" v-show="noDataScreen">No Data</div>
            </div>
          </div>
          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -167,6 +177,7 @@ export default {
    return {
      data: {}, // 该图表信息,chartItem
      noData: false,
+      noDataScreen: false,
      unit: {},
      text: '', // 保存信息
      screenText: '', // 全屏数据
@@ -180,6 +191,9 @@ export default {
      dropdownMenuShow: false,
      divFirstShow: false,
      showTab: ['1', '2'],
+      showTabActive: '1',
+      showTabScreen: ['1', '2'],
+      showTabScreenActive: '1',
      chartUnit: 2,
      logData: [],
      logDataScreen: [],
@@ -190,7 +204,7 @@ export default {
      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
      oldSearchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
      filter: {},
-      stableFilter: {},
+      stableFilter: {}
    }
  },
  created () {
@@ -277,6 +291,7 @@ export default {
      this.isGreyScreen = []
      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
      this.seriesItemScreen = this.seriesItem
+      this.showTabScreenActive = '1'
      this.screenModal = true
    },
    resize (chartItem) {
@@ -291,7 +306,6 @@ export default {
        this.oldSearchTime[0] = this.searchTime[0]
        this.oldSearchTime[1] = this.searchTime[1]
      }
-      console.log(chartItem, this.$refs.logDetail)
      this.$nextTick(() => {
        this.resize(chartItem)
      })
@@ -353,11 +367,18 @@ export default {
              if (logTabIndex === -1) {
                this.showTab.push('2')
              }
+              this.noData = true
+              logData.forEach(item => {
+                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
+                  this.noData = false
+                }
+              })
            } else {
              if (logTabIndex > -1) {
                this.showTab.splice(logTabIndex, 1)
              }
            }
+            this.showTabActive = this.showTab[0]
            this.$nextTick(() => {
              if (this.$refs.logDetail) {
                this.$refs.logDetail.time = this.chartData.param.time
@@ -412,26 +433,33 @@ export default {
            const logData = res.map(r => r.data)
            const hasGraph = logData.some(d => d.resultType === 'matrix')
            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTab.indexOf('1')
+            const graphTabIndex = this.showTabScreen.indexOf('1')
            if (hasGraph) {
              if (graphTabIndex === -1) {
-                this.showTab.push('1')
+                this.showTabScreen.push('1')
              }
            } else {
              if (graphTabIndex > -1) {
-                this.showTab.splice(graphTabIndex, 1)
+                this.showTabScreen.splice(graphTabIndex, 1)
              }
            }
-            const logTabIndex = this.showTab.indexOf('2')
+            const logTabIndex = this.showTabScreen.indexOf('2')
            if (hasLog) {
              if (logTabIndex === -1) {
-                this.showTab.push('2')
+                this.showTabScreen.push('2')
              }
+              this.noDataScreen = true
+              logData.forEach(item => {
+                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
+                  this.noDataScreen = false
+                }
+              })
            } else {
              if (logTabIndex > -1) {
-                this.showTab.splice(logTabIndex, 1)
+                this.showTabScreen.splice(logTabIndex, 1)
              }
            }
+            this.showTabScreenActive = JSON.stringify(this.showTabScreen[0])
            this.$nextTick(() => {
              if (this.$refs.logDetail) {
                this.$refs.logDetail.time = this.chartData.param.time
@@ -448,9 +476,10 @@ export default {
            })
          }
        }).catch(e => {
+          console.log(e)
          this.isError = true
          this.errorContent = this.$t('terminallog.statusItem.unknownError')
-          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
+          // this.$message.error(this.$t('terminallog.statusItem.unknownError'))
        })
      }
    },
@@ -459,7 +488,7 @@ export default {
      if (graphData && graphData.length > 0) {
        this.$refs.logChart.startLoading()
        const queryExpression = []
-        const series = []
+        let series = []
        const legend = []
        this.expressions.forEach((item, index) => {
          if (item !== '') {
@@ -468,7 +497,6 @@ export default {
        })
        this.logData.forEach((response, index) => {
          if (response.resultType === 'matrix') {
-            console.log(12312313123)
            const data = response.result
            if (!data || data.length < 1) {
              return
@@ -516,17 +544,17 @@ export default {
              } else {
                alias = queryExpression[index]
              }
-              console.log(this.chartData, this.chartData.elements[index].legend)
              seriesItem.name = alias + '-' + index
              series.push(seriesItem)
              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-              console.log()
            })
          }
        })
        this.$refs.logChart.setLegend(legend)
        this.$refs.logChart.setRandomColors(series.length)
-        console.log(series)
+        if (!series.length) {
+          series = ''
+        }
        this.$refs.logChart.setSeries(series)
        this.defaultChartVisible = true
        this.$nextTick(() => {
@@ -539,7 +567,7 @@ export default {
      if (graphData && graphData.length > 0) {
        this.$refs.logChartScreen.startLoading()
        const queryExpression = []
-        const series = []
+        let series = []
        const legend = []
        this.expressions.forEach((item, index) => {
          if (item !== '') {
@@ -548,7 +576,6 @@ export default {
        })
        this.logDataScreen.forEach((response, index) => {
          if (response.resultType === 'matrix') {
-            console.log(12312313123)
            const data = response.result
            if (!data || data.length < 1) {
              return
@@ -596,17 +623,17 @@ export default {
              } else {
                alias = queryExpression[index]
              }
-              console.log(this.chartData, this.chartData.elements[index].legend)
              seriesItem.name = alias + '-' + index
              series.push(seriesItem)
              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-              console.log()
            })
          }
        })
        this.$refs.logChartScreen.setLegend(legend)
        this.$refs.logChartScreen.setRandomColors(series.length)
-        console.log(series)
+        if (!series.length) {
+          series = ''
+        }
        this.$refs.logChartScreen.setSeries(series)
        this.defaultChartVisible = true
        this.$nextTick(() => {
@@ -702,9 +729,36 @@ export default {
    z-index: 1;
  }
  .logs-content{
-    overflow-y: auto;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;
+    position: relative;
+  }
+  .show-tab-icon{
+    position: absolute;
+    top: 0;
+    left: 10px;
+    display: none;
+    z-index: 10;
+  }
+  .show-tab-icon .nz-icon{
+    cursor: pointer;
+  }
+  .show-tab-icon .nz-icon.is-active-icon{
+    /*color: #FA901C;*/
+    color: #BDE3FD;
+  }
+  .logs-content:hover .show-tab-icon{
+    display: block;
+    z-index: 10;
+  }
+  /deep/ .chart-no-data{
+    width: calc(100% - 30px);
+  }
+  /deep/ .log-detail .log-table .nz-table2 {
+    padding: 0;
+  }
+  .logs-box{
+    overflow-y: auto;height: calc(100% - 15px);margin-top: 10px
  }
 </style>
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -1731,7 +1731,6 @@ export default {
            imgArr.push({ ...item })
          })
          Promise.all(promiseArr).then((res2, header) => {
-            // console.log(res2)
            this.iconArray = [...res.data.list]
            this.iconArray.forEach((item, index) => {
              item.image = res2[index].data
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -531,7 +531,7 @@ export default {
        this.$refs.logChart.startLoading()
        const promqlInputIndexs = []
        const queryExpression = []
-        const series = []
+        let series = []
        const legend = []
        this.expressions.forEach((item, index) => {
          if (item !== '') {
@@ -589,6 +589,9 @@ export default {
        this.$nextTick(() => {
          this.$refs.logChart.setLegend(legend)
          this.$refs.logChart.setRandomColors(series.length)
+          if (!series.length) {
+            series = ''
+          }
          this.$refs.logChart.setSeries(series)
          this.$refs.logChart.endLoading()
        })
@@ -614,7 +617,7 @@ export default {
            this.saveDisabled = false
          }
          axios.all(requestArr).then(res => {
-            const series = []
+            let series = []
            const legend = []
            if (res.length > 0) {
              res.forEach((response, index) => {
@@ -670,6 +673,9 @@ export default {

              this.$refs.exploreChart.setLegend(legend)
              this.$refs.exploreChart.setRandomColors(series.length)
+              if (!series.length) {
+                series = ''
+              }
              this.$refs.exploreChart.setSeries(series)
              this.defaultChartVisible = true
            }
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -48,6 +48,7 @@
        ref="logTable"
        class="nz-table2"
        size="mini"
+        v-if="tableData.length"
      >
        <el-table-column
          type="expand"
@@ -68,13 +69,16 @@
          prop="legend"
          width="140"
        >
-          <template slot-scope="{ row }">{{aliasLegend(row)}}</template>
+          <template slot-scope="{ row }">
+            <div style="width: 100%;" class="text-ellipsis" :title="aliasLegend(row)">{{aliasLegend(row)}}</div>
+          </template>
        </el-table-column>
        <el-table-column
          prop="message"
        >
        </el-table-column>
      </el-table>
+      <div v-else class="chart-no-data">No Data</div>
    </div>
  </div>
 </template>
@@ -588,5 +592,10 @@ export default {
      }
    }
  }
+  .text-ellipsis{
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
+  }
 }
 </style>
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}
+{"baseUrl":"/", "version": "21.04"}