v2.23.0 - feature/inspector-temp-mock (#805)

* Inspector support temprory mock; DataManager support custom tab

* remove inspector save button hover

frontend/src/api/datamanager.js

@@ -49,6 +49,18 @@ export const updateGroup = (id, data) => {
   })
 }
 
+export const updateByQuery = (ids, data, tab) => {
+  const query = {
+    id: ids,
+    tab
+  }
+  return axios({
+    url: '/api/group',
+    method: 'PUT',
+    data: { query, data }
+  })
+}
+
 export const getDataDetail = (dataId) => {
   return axios({
     url: '/api/data/' + dataId
@@ -164,9 +176,10 @@ export const getSnapShotDetail = (id) => {
   })
 }
 
-export const deleteByQuery = (ids) => {
+export const deleteByQuery = (ids, parentId) => {
   const query = {
-    id: ids
+    id: ids,
+    'parent_id': parentId
   }
   return axios({
     url: '/api/group',

frontend/src/components/DocumentTree.vue

@@ -23,7 +23,7 @@
           :options="{threshold: 0.5}"
           transition="fade-transition"
         >
-          <DocumentTreeNode :data="item" :selected="selected"/>
+          <DocumentTreeNode :data="item" :selected="selected" :editable="editable" :deletable="deletable"/>
         </v-lazy>
       </template>
     </v-treeview>
@@ -37,7 +37,16 @@ export default {
   components: {
     DocumentTreeNode
   },
-  props: ['treeData', 'searchStr'],
+  props: {
+    'treeData': Array,
+    'searchStr': String,
+    'editable': {
+      default: true
+    },
+    'deletable': {
+      default: true
+    }
+  },
   data() {
     return {
       searchRefreshDataListTimer: null,

frontend/src/components/DocumentTreeNode.vue

@@ -60,7 +60,7 @@
           icon
           @click="changeMenuStatus"
           class="mr-1"
-          v-show="data.type !== 'config'"
+          v-show="isNodeEditable"
         >
           <v-icon
             size="12px" 
@@ -79,7 +79,7 @@
 import { getGroupChildren } from '@/api'
 
 export default {
-  props: ['data', 'selected'],
+  props: ['data', 'selected', 'editable', 'deletable'],
   data () {
     return {
       isMouseOver: false,
@@ -136,7 +136,10 @@ export default {
       return this.$store.state.dataManager.focusNodeInfo && this.data.id === this.$store.state.dataManager.focusNodeInfo.id
     },
     isNodeDeletable () {
-      return this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+      return this.deletable && this.$store.state.dataManager.treeUndeletableId.indexOf(this.data.id) === -1
+    },
+    isNodeEditable () {
+      return this.editable && this.data.type !== 'config'
     },
     isNodeOpen () {
       return this.$store.state.dataManager.groupListOpenNode.indexOf(this.data.id) > -1
@@ -201,6 +204,9 @@ export default {
         })
     },
     onTreeNodeClick () {
+      if (!this.editable) {
+        return
+      }
       this.$store.commit('setFocusNodeInfo', this.data)
       if (this.data.type === 'group') {
         this.$store.dispatch('loadGroupDetail', this.data)
@@ -279,10 +285,6 @@ export default {
 }
 .toggle-icon-status {
   transform:rotate(-90deg);
-  /* animation-name: loading-icon-rotate;
-  animation-duration: 800ms;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite; */
 }
 .loading-icon {
   animation-name: loading-icon-rotate;

frontend/src/store/datamanager.js

@@ -5,9 +5,8 @@ import { bus } from '@/eventbus'
 export default {
   state: {
     title: 'Mock Data',
-    searchStr: '',
+    treeSearchStr: '',
     groupList: [],
-    jsonPath: null,
     conflictInfo: null,
     isLoadConflictInfo: false,
     groupListOpenNode: [],
@@ -41,21 +40,20 @@ export default {
     uneditableKey: ['id', 'rule', 'super_by'],
     stickyTopKey: ['id', 'rule', 'super_id', 'name', 'label', 'super_by'],
     displayCopyKey: ['id'],
-    treeUndeletableId: []
+    treeUndeletableId: [],
+    temporaryMockDataList: [],
+    tempGroupId: 'tmp_group',
   },
   mutations: {
     setTitle (state, title) {
       state.title = title
     },
-    setSearchStr (state, searchStr) {
-      state.searchStr = searchStr
+    setTreeSearchStr (state, treeSearchStr) {
+      state.treeSearchStr = treeSearchStr
     },
     setGroupList (state, groupList) {
       state.groupList = groupList
     },
-    setJsonPath (state, jsonPath) {
-      state.jsonPath = jsonPath
-    },
     setConflictInfo (state, conflictInfo) {
       state.conflictInfo = conflictInfo
     },
@@ -189,7 +187,10 @@ export default {
     },
     concatTreeUndeletableId (state, treeUndeletableId) {
       state.treeUndeletableId = state.treeUndeletableId.concat(treeUndeletableId)
-    }
+    },
+    setTemporaryMockDataList (state, val) {
+      state.temporaryMockDataList = val
+    },
   },
   actions: {
     loadDataMap ({ state, commit }) {
@@ -295,7 +296,7 @@ export default {
           }
           dispatch('loadGroupDetail', payload)
           bus.$emit('msg.destroy')
-          if (response.data.message) {
+          if (response.data.message && response.data.message.length > 0) {
             bus.$emit('msg.info', response.data.message)
           } else {
             bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
@@ -305,6 +306,22 @@ export default {
           bus.$emit('msg.error', 'Group ' + payload.name + ' update error: ' + error.data.message)
         })
     },
+    sendGroupDetail ({ state }, payload) {
+      bus.$emit('msg.loading', `Sending ${payload.tab} ...`)
+      let ids = state.isSelectableStatus ? state.selectedLeaf : [state.groupDetail.id]
+      api.updateByQuery(ids, state.groupDetail, payload.tab)
+        .then(response => {
+          bus.$emit('msg.destroy')
+          if (response.data.message && response.data.message.length > 0) {
+            bus.$emit('msg.info', response.data.message)
+          } else {
+            bus.$emit('msg.success', `Group ${payload.tab} send success!`)
+          }
+        })
+        .catch(error => {
+          bus.$emit('msg.error', `Group ${payload.tab} send error: ${error.data.message}`)
+        })
+    },
     deleteGroup ({ state, commit, dispatch }, payload) {
       bus.$emit('msg.loading', 'Deleting group ' + payload.name + ' ...')
       api.deleteGroup(payload.id)
@@ -467,6 +484,36 @@ export default {
         .catch(error => {
           bus.$emit('msg.error', 'Delete error: ' + error.data.message)
         })
+    },
+    // Temp mock
+    loadTempMockData ({ state, commit }) {
+      api.getGroupDetail(state.tempGroupId)
+        .then(response => {
+          commit('setTemporaryMockDataList', [response.data.data])
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Load Temporary mock data error: ' + error.data.message)
+        })
+    },
+    createTempMockData ({ state, dispatch }, payload ) {
+      api.createData(state.tempGroupId, payload)
+        .then(_ => {
+          dispatch('loadTempMockData')
+          bus.$emit('msg.success', 'Save temporary mock data success!')
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Save temporary mock error: ' + error.data.message)
+        })
+    },
+    deleteTempMockData ({ state, dispatch }, payload) {
+      api.deleteByQuery([payload.id], state.tempGroupId)
+        .then(_ => {
+          dispatch('loadTempMockData')
+          bus.$emit('msg.success', `Delete temporary mock data ${payload.name} success!`)
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Delete temporary mock data error: ' + error.data.message)
+        })
     }
   }
 }

frontend/src/views/Main.vue

@@ -270,6 +270,11 @@ export default {
 .side-navgation {
   z-index: 4;
 }
+.ivu-split-trigger-con {
+  /* vuetify drawer z-index is 4 */
+  /* iview drawer z-index is 4 */
+  z-index: 3; 
+}
 .ivu-split-pane {
   overflow: hidden;
 }

frontend/src/views/datamanager/DataDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Row class="button-bar">
-      <Col span="15" class="button-bar-line">
+      <Col class="button-bar-line">
         <span v-for="(value, index) in nodeParents" :key="value.id">
           <v-icon v-if="!value.parent_id" small color="accent" @click="showNode(value)">mdi-home</v-icon>
           <a v-else @click="showNode(value)">{{value.name}}</a>
@@ -10,9 +10,6 @@
           </v-icon>
         </span>
       </Col>
-      <Col span="8" offset="1" align="right" class="button-bar-line">
-        <JsonPathBar/>
-      </Col>
     </Row>
     <component v-if="nodeInfo.type" :is="getComponentByType(nodeInfo)" />
     <div v-else class="data-detail-empty">No selected data</div>
@@ -24,16 +21,14 @@ import DataDetailHttpData from '@/views/datamanager/DataDetailHttpData.vue'
 import DataDetailPlainJSON from '@/views/datamanager/DataDetailPlainJSON.vue'
 import DataDetailPlainConfig from '@/views/datamanager/DataDetailPlainConfig.vue'
 import DataDetailFolder from '@/views/datamanager/DataDetailFolder.vue'
-import JsonPathBar from '@/views/datamanager/JsonPathBar.vue'
 import { getGroupDetail } from '@/api'
 
 export default {
   components: {
     DataDetailPlainConfig,
     DataDetailPlainJSON,
     DataDetailHttpData,
-    DataDetailFolder,
-    JsonPathBar
+    DataDetailFolder
   },
   computed: {
     groupDetail () {