feat(ui): ad pool - add view raw data

Author: LHRUN

cmdb-ui/src/modules/cmdb/api/discovery.js

@@ -138,6 +138,14 @@ export function getAdc(params) {
     })
 }
 
+export function getAdcById(id, params) {
+    return axios({
+        url: `v0.1/adc/${id}`,
+        method: 'GET',
+        params
+    })
+}
+
 export function deleteAdc(adc_id) {
     return axios({
         url: `v0.1/adc/${adc_id}`,

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -686,7 +686,8 @@ if __name__ == "__main__":
         tabCustom: 'Custom',
         tabConfig: 'Configured',
         addConfig: 'Add Config',
-        configErrTip: 'Please select config'
+        configErrTip: 'Please select config',
+        viewRawData: 'View Raw Data'
     },
     ci: {
         attributeDesc: 'Attribute Description',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -685,7 +685,8 @@ if __name__ == "__main__":
         tabCustom: '自定义',
         tabConfig: '已有配置',
         addConfig: '添加配置',
-        configErrTip: '请选择配置'
+        configErrTip: '请选择配置',
+        viewRawData: '查看原始数据'
     },
     ci: {
         attributeDesc: '查看属性配置',

cmdb-ui/src/modules/cmdb/views/discoveryCI/components/rawDataModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-modal
+    :title="$t('cmdb.ad.viewRawData')"
+    :visible="visible"
+    wrapClassName="ci-json-editor"
+    width="50%"
+    :footer="null"
+    @cancel="handleCancel"
+  >
+    <vue-json-editor
+      v-model="jsonData"
+      :style="{ '--custom-height': `${windowHeight - 300}px` }"
+      :showBtns="false"
+      :mode="'code'"
+      lang="zh"
+    />
+  </a-modal>
+</template>
+
+<script>
+import vueJsonEditor from 'vue-json-editor'
+
+export default {
+  name: 'RawDataModal',
+  components: { vueJsonEditor },
+  data() {
+    return {
+      visible: false,
+      jsonData: {},
+    }
+  },
+  computed: {
+    windowHeight() {
+      return this.$store.state.windowHeight
+    },
+  },
+  methods: {
+    open(jsonData) {
+      this.visible = true
+      this.jsonData = jsonData
+    },
+    handleCancel() {
+      this.visible = false
+      this.jsonData = {}
+    }
+  },
+}
+</script>
+
+<style lang="less">
+.ci-json-editor {
+  .jsoneditor-outer {
+    height: var(--custom-height) !important;
+    border: 1px solid #2f54eb;
+  }
+  div.jsoneditor-menu {
+    background-color: #2f54eb;
+  }
+}
+</style>

cmdb-ui/src/modules/cmdb/views/discoveryCI/index.vue

@@ -92,15 +92,13 @@
             :width="col.width"
             :sortable="col.sortable"
           >
-            <template v-if="col.value_type === '6' || col.is_password" #default="{row}">
+            <template #default="{row}">
               <PasswordField
                 v-if="col.is_password"
                 :password="row[col.field]"
               />
-              <span
-                v-else-if="col.value_type === '6' && row[col.field]"
-              >
-                {{ row[col.field] }}
+              <span>
+                {{ typeof row[col.field] === 'object' ? JSON.stringify(row[col.field]) : row[col.field] }}
               </span>
             </template>
           </vxe-column>
@@ -137,7 +135,7 @@
           ></vxe-column>
           <vxe-column
             :title="$t('operation')"
-            v-bind="columns.length ? { width: '60px' } : { minWidth: '60px' }"
+            v-bind="columns.length ? { width: '100px' } : { minWidth: '100px' }"
             align="center"
             fixed="right"
           >
@@ -146,6 +144,9 @@
                 <a-tooltip :title="$t('cmdb.ad.accept')">
                   <a v-if="!row.is_accept" @click="accept(row)"><ops-icon type="cmdb-manual_warehousing"/></a>
                 </a-tooltip>
+                <a-tooltip :title="$t('cmdb.ad.viewRawData')">
+                  <a @click="viewADC(row)"><a-icon type="eye"/></a>
+                </a-tooltip>
                 <a :style="{ color: 'red' }" @click="deleteADC(row)"><a-icon type="delete"/></a>
               </a-space>
             </template>
@@ -175,6 +176,8 @@
           </p>
         </a-modal>
       </div>
+
+      <RawDataModal ref="rawDataModalRef" />
     </template>
   </TwoColumnLayout>
 </template>
@@ -185,14 +188,16 @@ import XEUtils from 'xe-utils'
 import TwoColumnLayout from '@/components/TwoColumnLayout'
 import AdcCounter from './components/adcCounter.vue'
 import PasswordField from './components/passwordField.vue'
+import RawDataModal from './components/rawDataModal.vue'
 
 import {
   getADCCiTypes,
   getAdc,
   updateADCAccept,
   getADCCiTypesAttrs,
   deleteAdc,
-  getAdcExecHistories
+  getAdcExecHistories,
+  getAdcById
 } from '../../api/discovery'
 import { getCITableColumns } from '../../utils/helper'
 
@@ -201,7 +206,8 @@ export default {
   components: {
     TwoColumnLayout,
     AdcCounter,
-    PasswordField
+    PasswordField,
+    RawDataModal
   },
   data() {
     return {
@@ -352,6 +358,12 @@ export default {
         onCancel() {},
       })
     },
+
+    async viewADC(row) {
+      const res = await getAdcById(row.id)
+      this.$refs.rawDataModalRef.open(res || {})
+    },
+
     async batchAccept() {
       for (let i = 0; i < this.selectedRowKeys.length; i++) {
         await updateADCAccept(this.selectedRowKeys[i])