New mock group selector

frontend/src/api/activate.js

@@ -0,0 +1,27 @@
+import axios from 'axios'
+
+/**
+Get activated data group ID
+*/
+export const getActivatedGroup = () => {
+    return axios({
+        url: '/api/mock/activated'
+    })
+}
+
+/**
+Activate data group by ID
+*/
+export const activateGroup = (groupId) => {
+    return axios({
+        url: '/api/mock/' + groupId + '/activate',
+        method: 'PUT'
+    })
+}
+
+export const deactivateGroup = () => {
+    return axios({
+        url: '/api/mock/groups/deactivate',
+        method: 'PUT'
+    })
+}

frontend/src/api/index.js

@@ -1,4 +1,7 @@
 import axios from 'axios'
+export * from '@/api/search.js'
+export * from '@/api/activate.js'
+
 
 const successHandler = (response) => {
   if (!response.data.hasOwnProperty('code')) {
@@ -232,32 +235,6 @@ export const getConflict = (dataId) => {
   })
 }
 
-/**
-Get activated data group ID
-*/
-export const getActivatedGroup = () => {
-  return axios({
-    url: '/api/mock/activated'
-  })
-}
-
-/**
-Activate data group by ID
-*/
-export const activateGroup = (groupId) => {
-  return axios({
-    url: '/api/mock/' + groupId + '/activate',
-    method: 'PUT'
-  })
-}
-
-export const deactivateGroup = () => {
-  return axios({
-    url: '/api/mock/groups/deactivate',
-    method: 'PUT'
-  })
-}
-
 //------Checker manager------
 /**
 Get checkers list

frontend/src/api/search.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+export const searchGroupByName = (name) => {
+    return axios({
+        url: '/api/search/group/name/' + name
+    })
+}

frontend/src/store/inspector.js

@@ -2,7 +2,7 @@ import * as api from '@/api'
 
 export default {
   state: {
-    activatedGroupId: null,
+    activatedGroup: null,
     showDataButtons: false,
     searchStr: '',
     selectedIds: [],
@@ -12,8 +12,8 @@ export default {
     groupTree: null
   },
   mutations: {
-    setActivitedGroupId (state, groupId) {
-      state.activatedGroupId = groupId
+    setActivitedGroup (state, group) {
+      state.activatedGroup = group
     },
     showDataButtons: function (state, val) {
       state.showDataButtons = val
@@ -38,7 +38,7 @@ export default {
     loadActivatedGroup ({ commit }) {
       api.getActivatedGroup()
         .then(response => {
-          commit('setActivitedGroupId', response.data.id)
+          commit('setActivitedGroup', response.data.data)
         })
         .catch(error => console.log(error))
     },

frontend/src/views/inspector/ButtonBar.vue

@@ -32,20 +32,18 @@
       <Divider type="vertical"></Divider>
     </div>
 
-    <label style="padding-right:5px">
-      <b @click="togalMockDataSelector">Activated Data:</b>
+    <label>
+      <b style="padding-right:5px">Activated Mock Group:</b>
+      <ButtonGroup>
+        <Button @click="showMockDataSelector" size="small">{{activateBtnText}}</Button>
+        <Button size="small" @click="resetActivatedData">
+          <Icon type="ios-backspace-outline" color="red" />
+        </Button>
+      </ButtonGroup>
     </label>
 
-    <div class="inline">
-      <Select v-model="activatedGroupId" filterable clearable style="width: 15vw">
-        <OptionGroup label="DataGroup">
-          <Option v-for="item in dataGroups" :key="item.id" :value="item.id">{{item.name}}</Option>
-        </OptionGroup>
-      </Select>
-    </div>
-
     <div class="inline inspector-searchbox">
-      <Input search clearable v-model="searchStr"></Input>
+      <Input search clearable size="small" v-model="searchStr"></Input>
     </div>
 
     <Modal
@@ -111,17 +109,22 @@ export default {
     dataGroups () {
       return this.$store.state.inspector.groupList
     },
-    activatedGroupId: {
-      get () {
-        return this.$store.state.inspector.activatedGroupId
-      },
-      set (groupId) {
-        if (groupId) {
-          this.$store.dispatch('activateGroup', groupId)
-        } else {
-          this.$store.dispatch('deactivateGroup')
-        }
+    activatedGroups () {
+      return this.$store.state.inspector.activatedGroup
+    },
+    activateBtnText () {
+      const activatedGroups = this.$store.state.inspector.activatedGroup
+      if (activatedGroups === null) {
+        return 'None'
+      }
+      if (Object.keys(activatedGroups).length === 0) {
+        return 'None'
+      }
+      let text = ''
+      for (const groupId in activatedGroups) {
+        text = text + activatedGroups[groupId].name
       }
+      return text
     },
     searchStr: {
       get () {
@@ -140,8 +143,8 @@ export default {
     }
   },
   methods: {
-    togalMockDataSelector () {
-      this.$refs.dataSelector.togal()
+    showMockDataSelector () {
+      this.$refs.dataSelector.toggal()
     },
     switchRecord: function () {
       if (this.recordingBtn.recording) {
@@ -189,13 +192,7 @@ export default {
       this.selectedFlow = null;
     },
     resetActivatedData: function () {
-      this.$http.put("/api/mock/group/deactivate").then(
-        response => {
-          console.log("reset group");
-          this.updateActivatedDataGroup();
-        },
-        errpr => { }
-      );
+      this.$store.dispatch('deactivateGroup')
     },
     filterMethod: function (value, option) {
       return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;

frontend/src/views/inspector/MockDataSelector.vue

@@ -1,21 +1,86 @@
 <template>
   <Modal v-model="shown" title="Mock data selector">
-    <Input search clearable v-model="searchStr"></Input>
+    <div v-if="activatedGroups">
+      <label style="padding-right:5px">Activated Mock Group:</label>
+      <Tag v-for="group in activatedGroups">{{group.name}}</Tag>
+    </div>
+    <Input search enter-button v-model="searchStr" @on-search="searchGroup"></Input>
+    <div class="searchlist">
+      <div v-for="item in searchResults" class="searchitem">
+        <Row type="flex" justify="center" align="middle">
+          <Col span="20">
+            <label class="searchitem-title">{{item.name}}</label>
+            <p class="searchitem-path">{{item.abs_parent_path}}</p>
+          </Col>
+          <Col span="4">
+            <Button style="float: right" @click="onActivateClick(item.id)">
+              <Icon type="ios-play" color="green" />
+            </Button>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    <div slot="footer"></div>
   </Modal>
 </template>
 
 <script>
+import { searchGroupByName, getActivatedGroup } from '@/api'
+
 export default {
   data () {
     return {
       searchStr: '',
-      shown: false
+      shown: false,
+      searchResults: []
+    }
+  },
+  computed: {
+    activatedGroups () {
+      return this.$store.state.inspector.activatedGroup
     }
   },
   methods: {
-    togal () {
+    toggal () {
       this.shown = !this.shown
+    },
+    searchGroup () {
+      searchGroupByName(this.searchStr)
+        .then(response => {
+          this.searchResults = response.data.data
+        }).catch(error => { })
+    },
+    onActivateClick (groupId) {
+      this.$store.dispatch('activateGroup', groupId)
     }
   },
 }
 </script>
+
+<style>
+.searchlist {
+  margin-top: 5px;
+  padding: 5px 0 5px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.searchitem {
+  border: 1px solid gainsboro;
+  border-radius: 3px;
+  padding: 1px 5px 1px;
+  margin: 1px 0px 1px;
+}
+.searchitem-title {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.searchitem-path {
+  color: gray;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

lyrebird/mock/blueprints/apis/__init__.py

@@ -11,6 +11,7 @@
 from .event import Event, Channel
 from .conflict_check import ConflictCheck, ActivatedDataConflictCheck
 from .mock_editor import Cut, Copy, Paste
+from .search import SearchMockDataByName
 from lyrebird.log import get_logger
 from lyrebird import application
 from flask import got_request_exception
@@ -48,6 +49,7 @@ def on_500(error):
 api_source.add_resource(Paste, '/paste/<string:_id>')
 api_source.add_resource(MockGroup, '/group', '/group/<string:group_id>')
 api_source.add_resource(MockData, '/data/<string:_id>')
+api_source.add_resource(SearchMockDataByName, '/search/group/name/<string:search_str>')
 api_source.add_resource(ConflictCheck, '/conflict/id/<string:group_id>')
 api_source.add_resource(ActivatedDataConflictCheck, '/conflict/activated')
 api_source.add_resource(ActivatedMockGroup, '/mock/activated', '/mock/<string:group_id>/<string:action>')

lyrebird/mock/blueprints/apis/mock.py

@@ -86,7 +86,7 @@ def put(self):
         group_name = request.json.get('group_name')
         action = request.json.get('action', 'activate')
         for _id in context.application.data_manager.id_map:
-            group = context.application.data_manager.id_map(_id)
+            group = context.application.data_manager.id_map.get(_id)
             if group['name'] == group_name:
                 if action == 'activate':
                     context.application.data_manager.deactivate()

lyrebird/mock/blueprints/apis/search.py

@@ -0,0 +1,21 @@
+from flask_restful import Resource
+from lyrebird.mock import context
+from lyrebird import application
+
+
+class SearchMockDataByName(Resource):
+
+    def get(self, search_str):
+        _matched_group = []
+        for _id in context.application.data_manager.id_map:
+            group = context.application.data_manager.id_map.get(_id)
+            if search_str in group.get('name', '') and group.get('type') == 'group':
+                _matched_group.append({
+                    'id': group['id'],
+                    'name': group['name'],
+                    'parent_id': group['parent_id']
+                })
+        for _group in _matched_group:
+            _abs_path = context.application.data_manager._get_abs_parent_path(_group)
+            _group['abs_parent_path'] = _abs_path
+        return application.make_ok_response(data=_matched_group)

lyrebird/mock/dm.py

@@ -106,6 +106,7 @@ def deactivate(self):
         Clear activated data
         """
         self.activated_data = {}
+        self.activated_group = {}
 
     def get_matched_data(self, flow):
         """