Feature/datamanager group detail display info (#679)

* Support datamanager group detail display info * update * update readme * update tests * update tests * fix issue
Meituan-Dianping · Aug 12, 2022 · f89d520 · f89d520
1 parent 46606f8
commit f89d520
Show file tree

Hide file tree

Showing 22 changed files with 601 additions and 201 deletions.
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ docker pull overbridge/lyrebird
 
 - macOS/Windows
 
-* Python >= 3.6
+* Python >= 3.7
 
 ```bash
 # macOS系统中推荐使用Homebrew(https://brew.sh/#install)安装Python3

diff --git a/frontend/src/components/DocumentTreeDialogCreate.vue b/frontend/src/components/DocumentTreeDialogCreate.vue
@@ -1,19 +1,34 @@
 <template>
   <v-dialog v-model="shown" width="600">
     <v-card>
-      <v-card-title style="font-size:16px;">Create {{createType}}</v-card-title>
+      <v-card-title style="font-size:16px;">Add</v-card-title>
 
       <v-divider/>
 
       <v-card-text class="overflow-auto py-0 mt-3 mb-2" style="font-size:14px">
-        <v-row>
+        <v-row align="center" class="mt-0">
           <v-col cols="2">
             <p class="text-right"><b>Parent</b></p>
           </v-col>
           <v-col cols="10">
             <p>{{nodeInfo.abs_parent_path}}</p>
           </v-col>
         </v-row>
+
+        <v-row  align="center" class="mt-0">
+          <v-col cols="2">
+            <p class="text-right"><b>Type</b></p>
+          </v-col>
+          <v-col cols="10">
+            <v-select
+              v-model="createType"
+              :items="createTypeItems"
+              dense
+              color="primary"
+            />
+          </v-col>
+        </v-row>
+
         <v-row align="center" class="mt-0">
           <v-col cols="2">
             <p class="text-right"><b>Name</b></p>
@@ -45,6 +60,11 @@ export default {
   data () {
     return {
       createName: null,
+      createTypeItems: [
+        { value: 'group', text: 'Group' },
+        { value: 'data', text: 'Data (HTTP)' },
+        { value: 'json', text: 'Data (JSON)' }
+      ]
     }
   },
   computed: {
@@ -59,8 +79,13 @@ export default {
     nodeInfo () {
       return this.$store.state.dataManager.focusNodeInfo
     },
-    createType () {
-      return this.$store.state.dataManager.createType
+    createType: {
+      get () {
+        return this.$store.state.dataManager.createType
+      },
+      set (val) {
+        this.$store.commit('setCreateType', val)
+      }
     }
   },
   methods: {
@@ -71,12 +96,14 @@ export default {
           groupName: this.createName,
           parentId: this.nodeInfo.id
         })
-      } else if (this.createType === 'data') {
+      } else {
         this.$store.dispatch('createData', {
+          type: this.createType,
           dataName: this.createName,
           parentId: this.nodeInfo.id
         })
-      } else { }
+      }
+      this.createName = ''
       this.shown = false
     },
     onCancel () {

diff --git a/frontend/src/components/DocumentTreeNode.vue b/frontend/src/components/DocumentTreeNode.vue
@@ -10,18 +10,13 @@
     >
 
       <span>
-        <v-btn
-          v-show="data.type === 'group'"
-          icon
-          class="mr-1 my-0"
-          @click.stop="onToggleStatusChange"
-        >
+        <v-btn v-if="data.type === 'group'" icon class="mr-1 my-0" @click.stop="onToggleStatusChange">
           <v-icon small :color="toggleColor">
             {{isNodeOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'}}
           </v-icon>
         </v-btn>
-
-        <v-icon v-show="data.type === 'data'" small color="accent" size="14px" class="mr-1">mdi-file</v-icon>
+        <v-icon v-else-if="data.type === 'json'" small color="accent" size="14px" class="mr-1">mdi-alpha-j-box-outline</v-icon>
+        <v-icon v-else small color="accent" size="14px" class="mr-1">mdi-file</v-icon>
 
         <div class="status-point" v-show="isGroupActivated"/>
 
@@ -44,14 +39,15 @@
           v-show="data.type==='group'"
           icon
           @click="isGroupActivated ? onTreeNodeDeactivate() : onTreeNodeActivate()"
-          :title="isGroupActivated ? 'Activate' : 'Deactivate'"
+          :title="isGroupActivated ? 'Deactivate' : 'Activate'"
         >
           <v-icon size="12px" :color="isGroupActivated ? 'error' : '#19be6b'">
             {{isGroupActivated ? 'mdi-square' : 'mdi-play'}}
           </v-icon>
         </v-btn>
 
         <v-btn
+          v-show="isNodeDeletable"
           icon
           @click.stop="changeDeleteDialogStatus"
         >
@@ -121,16 +117,7 @@
               v-show="data.type==='group'"
               @click="onTreeNodeAddGroup"
             >
-              <v-list-item-title>Add group</v-list-item-title>
-            </v-list-item>
-
-            <v-list-item
-              key="addData"
-              link
-              v-show="data.type==='group'"
-              @click="onTreeNodeAddData"
-            >
-              <v-list-item-title>Add data</v-list-item-title>
+              <v-list-item-title>Add</v-list-item-title>
             </v-list-item>
 
             <v-divider v-show="data.type==='group'"/>
@@ -242,6 +229,9 @@ export default {
     duplicateNodeChildrenCount () {
       return this.countNodeChildren(this.data)
     },
+    isNodeDeletable () {
+      return this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+    },
     isNodeOpen () {
       return this.$store.state.dataManager.groupListOpenNode.indexOf(this.data.id) > -1
     },
@@ -299,6 +289,8 @@ export default {
         this.$store.dispatch('loadGroupDetail', this.data)
       } else if (this.data.type === 'data') {
         this.$store.dispatch('loadDataDetail', this.data)
+      } else if (this.data.type === 'json') {
+        this.$store.dispatch('loadDataDetail', this.data)
       } else { }
     },
     onTreeNodeCut () {
@@ -318,11 +310,6 @@ export default {
       this.$store.dispatch('duplicateGroupOrData', this.data)
     },
     onTreeNodeAddGroup () {
-      this.$store.commit('setCreateType', 'group')
-      this.$store.commit('setIsShownCreateDialog', true)
-    },
-    onTreeNodeAddData () {
-      this.$store.commit('setCreateType', 'data')
       this.$store.commit('setIsShownCreateDialog', true)
     },
     onTreeNodeActivate () {

diff --git a/frontend/src/store/datamanager.js b/frontend/src/store/datamanager.js
@@ -36,7 +36,8 @@ export default {
     undeletableKey: ['id', 'rule', 'name', 'label', 'category', 'super_by'],
     uneditableKey: ['id', 'rule', 'super_by'],
     stickyTopKey: ['id', 'rule', 'super_id', 'name', 'label', 'super_by'],
-    displayCopyKey: ['id']
+    displayCopyKey: ['id'],
+    treeUndeletableId: []
   },
   mutations: {
     setTitle (state, title) {
@@ -169,6 +170,9 @@ export default {
     },
     concatStickyTopKey (state, stickyTopKey) {
       state.stickyTopKey = state.stickyTopKey.concat(stickyTopKey)
+    },
+    concatTreeUndeletableId (state, treeUndeletableId) {
+      state.treeUndeletableId = state.treeUndeletableId.concat(treeUndeletableId)
     }
   },
   actions: {
@@ -180,6 +184,7 @@ export default {
             .then(response => {
               commit('addGroupListOpenNode', response.data.data.id)
               commit('setGroupList', [response.data.data])
+              commit('concatTreeUndeletableId', response.data.data.id)
               commit('setIsLoading', false)
             })
             .catch(error => {
@@ -237,12 +242,21 @@ export default {
       }
     },
     saveGroupDetail ({ state, commit, dispatch }, payload) {
+      bus.$emit('msg.loading', 'Updating group ' + payload.name + ' ...')
       api.updateGroup(payload.id, payload)
         .then(response => {
-          dispatch('loadDataMap')
-          dispatch('loadDataLabel')
+          if (state.isReloadTreeWhenUpdate) {
+            dispatch('loadDataMap')
+            dispatch('loadDataLabel')
+            commit('setIsReloadTreeWhenUpdate', false)
+          }
           dispatch('loadGroupDetail', payload)
-          bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
+          bus.$emit('msg.destroy')
+          if (response.data.message) {
+            bus.$emit('msg.info', response.data.message)
+          } else {
+            bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
+          }
         })
         .catch(error => {
           bus.$emit('msg.error', 'Group ' + payload.name + ' update error: ' + error.data.message)
@@ -265,9 +279,10 @@ export default {
           bus.$emit('msg.error', 'Delete group ' + payload.name + ' error: ' + error.data.message)
         })
     },
-    createData ({ dispatch }, { dataName, parentId }) {
+    createData ({ dispatch }, { type, dataName, parentId }) {
       if (dataName) {
         api.createData(parentId, {
+          type,
           name: dataName
         })
           .then(response => {

diff --git a/frontend/src/store/settings.js b/frontend/src/store/settings.js
@@ -3,6 +3,7 @@ import { bus } from '@/eventbus'
 
 var configCommitMap = [
   {'name': 'mock.data.showLabel', 'commit': 'setIsLabelDisplay'},
+  {'name': 'mock.data.tree.undeletableId', 'commit': 'concatTreeUndeletableId'},
   {'name': 'mock.data.detail.stickyTopKey', 'commit': 'concatStickyTopKey'},
   {'name': 'mock.data.detail.undeletableKey', 'commit': 'concatUndeletableKey'},
   {'name': 'mock.data.detail.undisplayedKey', 'commit': 'concatUndisplayedKey'},

diff --git a/frontend/src/views/datamanager/DataDetail.vue b/frontend/src/views/datamanager/DataDetail.vue
@@ -21,12 +21,14 @@
 
 <script>
 import DataDetailHttpData from '@/views/datamanager/DataDetailHttpData.vue'
+import DataDetailPlainJSON from '@/views/datamanager/DataDetailPlainJSON.vue'
 import DataDetailFolder from '@/views/datamanager/DataDetailFolder.vue'
 import JsonPathBar from '@/views/datamanager/JsonPathBar.vue'
 import { getGroupDetail } from '@/api'
 
 export default {
   components: {
+    DataDetailPlainJSON,
     DataDetailHttpData,
     DataDetailFolder,
     JsonPathBar
@@ -46,6 +48,8 @@ export default {
     getComponentByType (payload) {
       if (payload.type === 'data') {
         return 'DataDetailHttpData'
+      } else if (payload.type === 'json') {
+        return 'DataDetailPlainJSON'
       } else if (payload.type === 'group') {
         return 'DataDetailFolder'
       } else {
@@ -64,6 +68,8 @@ export default {
           })
       } else if (payload.type === 'data') {
         this.$store.dispatch('loadDataDetail', payload)
+      } else if (payload.type === 'json') {
+        this.$store.dispatch('loadDataDetail', payload)
       } else { }
     }
   }

diff --git a/frontend/src/views/datamanager/DataDetailHttpData.vue b/frontend/src/views/datamanager/DataDetailHttpData.vue
@@ -72,7 +72,11 @@ export default {
   computed: {
     currentTab: {
       get () {
-        return this.$store.state.dataManager.dataDetailFocuedTab
+        const dataDetailFocuedTab = this.$store.state.dataManager.dataDetailFocuedTab
+        if (this.editorCache.hasOwnProperty(dataDetailFocuedTab)) {
+          return dataDetailFocuedTab
+        }
+        return 'info'
       },
       set (val) {
         this.$store.commit('setDataDetailFocuedTab', val)