CN-1173 fix: 检测功能UI开发与接口对接

2023-10-16 17:53:46 +08:00
parent 85db8cd745
commit 0e82bebaac
19 changed files with 725 additions and 437 deletions
--- a/src/components/table/detection/GeneralSettings.vue
+++ b/src/components/table/detection/GeneralSettings.vue
@@ -18,7 +18,7 @@
        </div>
      </div>

-      <div class="block-mode">
+      <div class="block-mode" style="cursor: no-drop;">
        <!--todo 图标没有，后期换-->
        <div class="block-mode-left">
          <i class="cn-icon cn-icon-setting2 block-mode-icon"></i>
@@ -29,40 +29,44 @@
          <div class="block-mode-content">
            Aggregate query results to detect when number of matches exceeds threshold.
          </div>
-          <div :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"
-               @click="selectMode(detectionRuleType.threshold)">select
+          <!--todo 当前版本暂时不可选择-->
+          <div style="cursor: no-drop;" :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"
+               >select
          </div>
+<!--          <div :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"-->
+<!--               @click="selectMode(detectionRuleType.threshold)">select-->
+<!--          </div>-->
        </div>
      </div>
    </div>

    <!--category-->
    <el-form ref="form" :model="settingObj" label-position="top" :rules="rules">
-      <el-form-item label="Category" prop="category" class="form-setting__block margin-b-20">
-        <el-select v-model="settingObj.category" class="form-setting__select" placeholder=" " size="mini" @change="changeEditFlag">
+      <el-form-item :label="$t('overall.category')" prop="category" class="form-setting__block margin-b-20">
+        <el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " size="mini" @change="changeEditFlag">
          <el-option
              v-for="item in categoryList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
          />
        </el-select>
      </el-form-item>

      <!--type-->
-      <el-form-item label="Type" prop="eventType" class="form-setting__block margin-b-20">
+      <el-form-item :label="$t('overall.type')" prop="eventType" class="form-setting__block margin-b-20">
        <el-select v-model="settingObj.eventType" placeholder=" " size="mini" class="form-setting__select" @change="changeEditFlag">
          <el-option
-              v-for="item in typeList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in eventTypeList"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name"
          />
        </el-select>
      </el-form-item>

      <!--name-->
-      <el-form-item label="Name" prop="name" class="form-setting__block margin-b-20">
+      <el-form-item :label="$t('overall.name')" prop="name" class="form-setting__block margin-b-20">
        <el-input
            maxlength="64"
            show-word-limit
@@ -74,7 +78,7 @@

      <!--Description-->
      <div class="form-setting__block margin-b-20">
-        <div class="block-title">Description</div>
+        <div class="block-title">{{ $t('config.dataSet.description') }}</div>
        <el-input
            maxlength="255"
            show-word-limit
@@ -87,7 +91,7 @@
    </el-form>

    <div class="form-setting__block margin-b-20">
-      <div class="block-title">Policy Status</div>
+      <div class="block-title">{{ $t('detection.create.policyStatus') }}</div>
      <el-switch
          v-model="settingObj.status"
          @change="changeEditFlag"
@@ -95,11 +99,11 @@
          inactive-color="#C0CEDB"
          :active-value="1"
          :inactive-value="0"
-          :active-text="switchStatus(settingObj.status)"/>
+          :active-text="$t(switchStatus(settingObj.status))"/>
    </div>

    <div class="form-setting__btn">
-      <el-button @click="onContinue">Continue</el-button>
+      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
    </div>
  </div>
 </template>
@@ -107,18 +111,24 @@
 <script>
 import { detectionRuleType } from '@/utils/constants'
 import { switchStatus } from '@/utils/tools'
-import axios from 'axios'
+import { detectionUnitList } from '@/utils/static-data'
+import axios from '_axios@0.21.4@axios'
 import { api } from '@/utils/api'

 export default {
  name: 'GeneralSettings',
+  props: {
+    editObj: {
+      type: Object
+    }
+  },
  data () {
    return {
      detectionRuleType,
      categoryList: [],
-      typeList: [],
+      eventTypeList: [],
      settingObj: {
-        ruleType: detectionRuleType.threshold,
+        ruleType: detectionRuleType.indicator,
        category: '',
        eventType: '',
        name: '',
@@ -152,20 +162,46 @@ export default {
      }
    }
  },
+  watch: {
+    editObj (newVal) {
+      if (newVal.ruleId) {
+        this.settingObj = JSON.parse(JSON.stringify({ ...newVal }))
+        this.settingObj.editFlag = false
+        this.settingObj.saveFlag = true
+      }
+    }
+  },
  mounted () {
    this.initData()
  },
  methods: {
    switchStatus,
    initData () {
-      axios.get(api.detection.statistics, { params: { pageSize: -1 } }).then(response => {
+      this.categoryList = detectionUnitList.categoryList || []
+      this.eventTypeList = detectionUnitList.eventTypeList || []
+      axios.get(api.detection.statistics).then(response => {
        if (response.status === 200) {
-          this.categoryList = response.data.data.categoryList || []
-          this.typeList = response.data.data.typeList || []
+          const data = response.data.data
+          if (data.categoryList) {
+            this.categoryList = data.categoryList
+          } else {
+            this.categoryList = []
+          }
+
+          if (data.eventTypeList) {
+            this.eventTypeList = data.eventTypeList
+          } else {
+            this.eventTypeList = []
+          }
        } else {
          console.error(response.data)
+          this.categoryList = []
+          this.eventTypeList = []
        }
-      }).finally(() => {
+      }).catch((e) => {
+        console.error(e)
+        this.categoryList = []
+        this.eventTypeList = []
      })
    },
    selectMode (ruleType) {
@@ -188,7 +224,3 @@ export default {
  }
 }
 </script>
-
-<style lang="scss">
-
-</style>
--- a/src/components/table/detection/HistoryTopKeys.vue
+++ b/src/components/table/detection/HistoryTopKeys.vue
@@ -9,8 +9,7 @@
      <div class="key-search">
        <el-input v-model="searchKey" @keyup.enter="onSearch" size="mini" placeholder="Search for">
          <template #prefix>
-            <!--todo 该图标名称错误，已在iconfont修改，后续记得改过来-->
-            <i class="cn-icon cn-icon-serach key-search-icon"></i>
+            <i class="cn-icon cn-icon-search key-search-icon"></i>
          </template>
        </el-input>

@@ -24,7 +23,7 @@
      <div class="key-table">
        <loading :loading="loading"></loading>

-        <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
+        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @row-click="rowClick">
          <el-table-column
              v-for="(item, index) in tableTitle"
              :key="`col-${index}`"
@@ -73,6 +72,9 @@ export default {
    showDrawer: {
      type: Boolean,
      default: false
+    },
+    delKeyId: {
+      type: String
    }
  },
  components: {
@@ -116,6 +118,16 @@ export default {
    this.myDrawer = this.showDrawer
    this.getTopKeysData()
  },
+  watch: {
+    delKeyId (newVal) {
+      if (newVal) {
+        const obj = this.tableData.find(d => d.keyId === newVal)
+        if (obj) {
+          obj.filterKey = false
+        }
+      }
+    }
+  },
  methods: {
    unitConvert,
    dateFormatByAppearance,
@@ -150,6 +162,7 @@ export default {
    },
    /** 单击topKeys弹窗某一项 */
    rowClick (data) {
+      data.filterKey = true
      this.$emit('keyRowClick', data)
    },
    onRefresh () {
@@ -161,6 +174,11 @@ export default {
    httpError (e) {
      this.showError = true
      this.errorMsg = this.errorMsgHandler(e)
+    },
+    tableRowClassName (row) {
+      if (row.row.filterKey) {
+        return 'key-click-row'
+      }
    }
  }
 }
@@ -231,4 +249,8 @@ export default {
    margin-left: 4px;
  }
 }
+
+.el-table .key-click-row {
+  background: #F5F7FA !important;
+}
 </style>
--- a/src/components/table/detection/RuleDefinition.vue
+++ b/src/components/table/detection/RuleDefinition.vue
@@ -4,7 +4,7 @@
      <div>
        <el-form ref="form" :model="thresholdRuleObj" label-position="top" :rules="rules">
          <!--source-->
-          <el-form-item label="Source" prop="dataSource" class="form-setting__block margin-b-20">
+          <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
            <el-select v-model="thresholdRuleObj.dataSource" placeholder=" " size="mini" class="form-setting__select">
              <el-option
                  v-for="item in sourceList"
@@ -18,7 +18,7 @@

        <!--Dimensions-->
        <div class="form-setting__block margin-b-20">
-          <div class="block-title">Dimensions</div>
+          <div class="block-title">{{ $t('detection.create.dimensions') }}</div>
          <div class="block-dimension">
            <div class="block-dimension-tag" v-for="(ite, ind) in dimensionList" :key="ind">{{ ite.label }}</div>
          </div>
@@ -52,7 +52,7 @@
                  size="mini"
                  oninput="value=value.replace(/[^\d]/g,'')"
                  v-model="item.value"></el-input>
-              <i class="cn-icon cn-icon-close" @click="delFilterItem(index)"></i>
+              <i class="cn-icon cn-icon-close" @click="delFilterItem(index, item)"></i>
            </div>

            <div style="height: 10px;"></div>
@@ -65,7 +65,7 @@

        <!--Condition模块-->
        <div class="form-setting__block margin-b-20">
-          <div class="block-title">Condition</div>
+          <div class="block-title">{{ $t('detection.create.condition') }}</div>

          <el-form ref="form2" :model="thresholdRuleObj" label-position="top">
          <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="index">
@@ -97,7 +97,7 @@
                          v-for="item in metricList"
                          :key="item.label"
                          :label="item.label"
-                          :value="item.value"
+                          :value="item.label"
                      />
                    </el-select>
                  </el-form-item>
@@ -144,7 +144,7 @@
          </el-form>

          <div class="condition-add" @click="addCondition">
-            <i class="cn-icon cn-icon-add"></i>Add Condition
+            <i class="cn-icon cn-icon-add"></i>{{ $t('detection.create.addCondition') }}
          </div>
        </div>
      </div>
@@ -154,6 +154,7 @@
        <history-top-keys
            v-if="showDrawer"
            :showDrawer="showDrawer"
+            :delKeyId="delKeyId"
            @closeDrawer="onCloseDrawer"
            @keyRowClick="getRowClick"
        ></history-top-keys>
@@ -163,7 +164,7 @@
    <div v-if="mySettingObj.ruleType===detectionRuleType.indicator">
      <el-form ref="form" :model="indicatorRuleObj" label-position="top" :rules="rules">
        <!--Source-->
-        <el-form-item label="Source" prop="dataSource" class="form-setting__block margin-b-20">
+        <el-form-item :label="$t('config.user.source')" prop="dataSource" class="form-setting__block margin-b-20">
          <el-select v-model="indicatorRuleObj.dataSource" class="form-setting__select" placeholder=" " size="mini">
            <el-option
                v-for="item in sourceList"
@@ -175,13 +176,13 @@
        </el-form-item>

        <!--Library-->
-        <el-form-item label="Library" prop="knowledgeId" class="form-setting__block margin-b-20">
-          <el-select v-model="indicatorRuleObj.knowledgeId" class="form-setting__select" placeholder=" " size="mini">
+        <el-form-item :label="$t('detection.library')" prop="knowledgeId" class="form-setting__block margin-b-20">
+          <el-select v-model="indicatorRuleObj.name" class="form-setting__select" placeholder=" " size="mini">
            <el-option
                v-for="item in libraryList"
-                :key="item.knowledgeId"
-                :label="item.label"
-                :value="item.knowledgeId"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
            />
          </el-select>
        </el-form-item>
@@ -207,22 +208,27 @@
    </div>

    <div class="form-setting__btn">
-      <el-button @click="onContinue">Continue</el-button>
+      <el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
    </div>
  </div>
 </template>

 <script>
-import axios from 'axios'
-import { api } from '@/utils/api'
 import HistoryTopKeys from '@/components/table/detection/HistoryTopKeys'
 import { eventSeverityColor, detectionRuleType } from '@/utils/constants'
+import { detectionUnitList } from '@/utils/static-data'
+import axios from '_axios@0.21.4@axios'
+import _ from 'lodash'
+import { api } from '@/utils/api'

 export default {
  name: 'RuleDefinition',
  props: {
    settingObj: {
      type: Object
+    },
+    editObj: {
+      type: Object
    }
  },
  components: {
@@ -232,11 +238,26 @@ export default {
    settingObj: {
      immediate: true,
      deep: true,
-      handler (newVal, oldVal) {
+      handler (newVal) {
        if (!newVal.editFlag && newVal.saveFlag) {
          this.mySettingObj = JSON.parse(JSON.stringify(newVal))
        }
      }
+    },
+    editObj: {
+      immediate: true,
+      deep: true,
+      handler (newVal) {
+        if (newVal) {
+          if (newVal.ruleType === detectionRuleType.indicator) {
+            this.indicatorRuleObj = this.$_.cloneDeep(newVal.ruleConfigObj)
+            this.indicatorRuleObj.knowledgeId = newVal.ruleConfigObj.knowledgeBase.knowledgeId
+          }
+          if (newVal.ruleType === detectionRuleType.threshold) {
+            this.thresholdRuleObj = this.$_.cloneDeep(newVal.ruleConfigObj)
+          }
+        }
+      }
    }
  },
  data () {
@@ -244,7 +265,7 @@ export default {
      eventSeverityColor,
      detectionRuleType,
      mySettingObj: {
-        ruleType: detectionRuleType.threshold
+        ruleType: detectionRuleType.indicator
      },
      dimensionList: [], // Dimensions数据
      // ruleType为Indicator时表单数据
@@ -327,7 +348,8 @@ export default {
        than: '>',
        less: '<',
        equal: '='
-      }
+      },
+      delKeyId: '' // 删除的keyId
    }
  },
  mounted () {
@@ -341,18 +363,28 @@ export default {
  },
  methods: {
    initData () {
-      axios.get(api.detection.statistics, { params: { pageSize: -1 } }).then(response => {
-        if (response.status === 200) {
-          this.sourceList = response.data.data.sourceList || []
-          this.levelList = response.data.data.levelList || []
-          this.conditionList = response.data.data.conditionList || []
-          this.metricList = response.data.data.metricList || []
-          this.libraryList = response.data.data.libraryList || []
-        } else {
-          console.error(response.data)
-        }
-      }).finally(() => {
-      })
+      this.sourceList = detectionUnitList.sourceList || []
+      this.levelList = detectionUnitList.levelList || []
+      // threshold模式还没确定，所以数据暂时静态数据，后续根据需要修改
+      this.conditionList = detectionUnitList.conditionList || []
+      this.metricList = detectionUnitList.metricList || []
+
+      if (this.mySettingObj.ruleType === this.detectionRuleType.indicator) {
+        axios.get(api.knowledgeBaseList, { params: this.searchLabel }).then(response => {
+          if (response.status === 200) {
+            this.libraryList = _.get(response, 'data.data.list', [])
+          } else {
+            this.libraryList = []
+            if (response.data.message) {
+              this.$message.error(response.data.message)
+            } else {
+              this.$message.error(this.$t('tip.somethingWentWrong'))
+            }
+          }
+        }).catch(() => {
+          this.libraryList = []
+        })
+      }
    },
    /** 单击History Top Keys列表某行，filter添加数据 */
    getRowClick (data) {
@@ -364,6 +396,7 @@ export default {
    },
    /** filter模块点击add按钮 */
    addFilter (data) {
+      this.delKeyId = ''
      this.showFilter = true
      if (this.selectList.length === 0) {
        this.getFilterList()
@@ -445,7 +478,8 @@ export default {
      ]
    },
    /** 删除filter某一项 */
-    delFilterItem (i) {
+    delFilterItem (i, item) {
+      this.delKeyId = item.keyId
      this.thresholdRuleObj.filterList.splice(i, 1)
    },
    /** 点击继续，展开第三步 */