添加日志搜索功能

frontend/src/components/ScrollView/LogItem.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="log-item">
     <div class="line-no">{{index}}</div>
-    <div class="line-content" ><span v-if="isAnsi" v-html="data">{{data}}</span><span v-else="">{{data}}</span></div>
+    <div class="line-content">
+      <span v-if="isAnsi" v-html="dataHtml"></span>
+      <span v-else="" v-html="dataHtml"></span>
+    </div>
   </div>
 </template>
 
@@ -20,6 +23,16 @@ export default {
     isAnsi: {
       type: Boolean,
       default: false
+    },
+    searchString: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    dataHtml () {
+      if (!this.searchString) return this.data
+      return this.data.replace(new RegExp(`(${this.searchString})`, 'gi'), '<mark>$1</mark>')
     }
   }
 }

frontend/src/components/ScrollView/LogView.vue

@@ -1,13 +1,22 @@
 <template>
-  <virtual-list
-    class="log-view"
-    :size="6"
-    :remain="100"
-    :item="item"
-    :itemcount="logData.length"
-    :itemprops="getItemProps"
-  >
-  </virtual-list>
+  <div class="log-view-wrapper">
+    <div class="filter-wrapper">
+      <el-input
+        v-model="searchString"
+        suffix-icon="el-icon-search"
+        :placeholder="$t('Search Log')"
+        style="width: 240px"
+      />
+    </div>
+    <virtual-list
+      class="log-view"
+      :size="6"
+      :remain="100"
+      :item="item"
+      :itemcount="filteredLogData.length"
+      :itemprops="getItemProps"
+    />
+  </div>
 </template>
 
 <script>
@@ -15,6 +24,7 @@ import LogItem from './LogItem'
 import VirtualList from 'vue-virtual-scroll-list'
 import Convert from 'ansi-to-html'
 import hasAnsi from 'has-ansi'
+
 const convert = new Convert()
 export default {
   name: 'LogView',
@@ -29,7 +39,8 @@ export default {
   },
   data () {
     return {
-      item: LogItem
+      item: LogItem,
+      searchString: ''
     }
   },
   computed: {
@@ -41,11 +52,22 @@ export default {
             data: d
           }
         })
+    },
+    filteredLogData () {
+      return this.logData.filter(d => {
+        if (!this.searchString) return true
+        return !!d.data.toLowerCase().match(this.searchString.toLowerCase())
+      })
+    }
+  },
+  watch: {
+    searchString () {
+      this.$st.sendEv('任务详情', '日志', '搜索日志')
     }
   },
   methods: {
     getItemProps (index) {
-      const logItem = this.logData[index]
+      const logItem = this.filteredLogData[index]
       const isAnsi = hasAnsi(logItem.data)
       return {
         // <item/> will render with itemProps.
@@ -53,6 +75,7 @@ export default {
         props: {
           index: logItem.index,
           data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
+          searchString: this.searchString,
           isAnsi
         }
       }
@@ -65,12 +88,14 @@ export default {
 
 <style scoped>
   .log-view {
-    margin-top: 0!important;
-    min-height: 100%;
-    overflow-y: scroll!important;
+    margin-top: 0 !important;
+    overflow-y: scroll !important;
     list-style: none;
     color: #A9B7C6;
     background: #2B2B2B;
   }
 
+  .filter-wrapper {
+    margin-bottom: 10px;
+  }
 </style>

frontend/src/i18n/zh.js

@@ -208,6 +208,7 @@ export default {
   'Run Type': '运行类型',
   'Random': '随机',
   'Selected Nodes': '指定节点',
+  'Search Log': '搜索日志',
 
   // 任务列表
   'Node': '节点',