Feature/convert response data format (#739)

* Add 'tojson' to flow's response data to adapt flow parameter value's multiplexing

* 更改目标字符串的匹配方式,改用re.sub实现

* 增加对配置config.value.tojsonKey的遍历,优化正则匹配规则

* 简化匹配规则

* 功能代码调整;增加单测用例;修改版本号;调整日志输出

* 修改注释,去除单测用例中的真实数据

* 修改注释

* 修改注释

* 解决版本冲突

* 修改单测用例

* flow详情页展示增加responseData的diff入口

* resolve conflict

* The DataManager supports displaying the template data and rendered data of flow's response data in diff form

* correct pylint

* Correct pylint

* Modify the code according to the review comments

* Modify the code according to the review comments

* Modify code according to the pylint

* Modify the code according the review

* Modify front-end display error

frontend/src/api/datamanager.js

@@ -152,7 +152,7 @@ export const importSnapshot = (parentId, snapshotName, snapshotId) => {
   })
 }
 
-export const getSnapShotDetail = (id) => { 
+export const getSnapShotDetail = (id) => {
   return axios({
     url: '/api/snapshot/' + id
   })
@@ -168,3 +168,4 @@ export const deleteByQuery = (ids) => {
     data: { query }
   })
 }
+

frontend/src/components/CodeDiffEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="code-diff-editor" style="width:100%;height:100%;border:1px solid grey"></div>
+    <div id="code-diff-editor" class="pa-3" style="width:100%;height:100%;border-top:1px solid grey"></div>
   </div>
 </template>
 
@@ -29,12 +29,12 @@ export default {
     }
   },
   watch: {
-    content: function () {
+    diffContent: function () {
       console.debug("Code diff editor: content change");
       if ((this.editor)) {
         this.editor.setModel({
-        original: monaco.editor.createModel(this.content,this.language),
-        modified: monaco.editor.createModel(this.diffContent,this.language)
+        original: monaco.editor.createModel(this.content, this.language),
+        modified: monaco.editor.createModel(this.diffContent, this.language)
         });
       }
     }
@@ -48,9 +48,9 @@ export default {
       }
     )
     this.editor.setModel({
-        original: monaco.editor.createModel(this.content,this.language),
-        modified: monaco.editor.createModel(this.diffContent,this.language)
-        });
+      original: monaco.editor.createModel(this.content, this.language),
+      modified: monaco.editor.createModel(this.diffContent, this.language)
+    })
   }
 };
 </script>

frontend/src/store/datamanager.js

@@ -404,7 +404,7 @@ export default {
         .then((res) => {
           commit('setSnapshotName', res.data.data.name)
         })
-        .catch((err) => { 
+        .catch((err) => {
           bus.$emit('msg.error', 'Load snapshot information error: ' + err.data.message)
         })
     },

frontend/src/views/datamanager/DataDetailHttpData.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="small-tab">
-    <tabs v-model="currentTab" :animated="false" size="small">
+    <tabs v-model="currentTab" @on-click="onTabClick" :animated="false" size="small">
       <tab-pane label="Information" name="info" />
       <tab-pane label="Request" name="req" />
       <tab-pane label="RequestData" name="reqData" />
@@ -9,27 +9,58 @@
     </tabs>
     <div>
       <CodeEditor
+        v-if="!isShowCodeDiffEditor"
         class="data-detail"
         :language="currentTabContentType"
         v-model="editorContent"
-        v-on:on-jsonpath-change="onJsonPathChange"
-      ></CodeEditor>
+        v-on:on-jsonpath-change="onJsonPathChange" />
+      <CodeDiffEditor
+        v-else
+        class="data-detail"
+        :language="currentTabContentType"
+        :content="editorContent"
+        :diffContent="editorDiffContent"
+        :readOnly="true" />
     </div>
-    <div class="save-btn" v-if="dataDetail">
+    <div
+      class="show-diff-btn"
+      v-if="this.currentTab==='respData' && !this.isEditorContentEquals"
+    >
       <v-tooltip top>
         <template v-slot:activator="{ on, attrs }">
           <v-btn
             v-bind="attrs"
             v-on="on"
-            fab
+            color="primary"
             dark
+            fab
+            class="save-btn-detail"
+            @click="diffButtonClick"
+          >
+          <v-icon v-if="isShowDiffButton">mdi-eye-off-outline</v-icon>
+          <v-icon v-else>mdi-eye-outline</v-icon>
+          </v-btn>
+        </template>
+        <span v-if="!isShowDiffButton">Show the diff</span>
+        <span v-else>Hide the diff</span>
+      </v-tooltip>
+    </div>
+    <div class="save-btn" v-if="dataDetail">
+      <v-tooltip top>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            v-bind="attrs"
+            v-on="on"
             color="primary"
+            dark
+            fab
             class="save-btn-detail"
             @click="save"
           >
-            <v-icon 
-            class="save-btn-icon"
-            dark>
+            <v-icon
+              class="save-btn-icon"
+              dark
+            >
               mdi-content-save-outline
             </v-icon>
           </v-btn>
@@ -44,11 +75,14 @@
 import DataDetailInfo from '@/views/datamanager/DataDetailInfo.vue'
 import CodeEditor from '@/components/CodeEditor.vue'
 import Icon from 'vue-svg-icon/Icon.vue'
+import CodeDiffEditor from '@/components/CodeDiffEditor.vue'
+import { render } from '@/api'
 
 export default {
   components: {
     DataDetailInfo,
     CodeEditor,
+    CodeDiffEditor,
     'svg-icon': Icon
   },
   data () {
@@ -59,7 +93,11 @@ export default {
         reqData: null,
         resp: null,
         respData: null
-      }
+      },
+      isShowDiffButton: false,
+      isEditorContentEquals: true,
+      isTreeNodeClicked: false,
+      renderedRespData: ''
     }
   },
   mounted () {
@@ -109,12 +147,34 @@ export default {
       set (val) {
         this.editorCache[this.currentTab] = val
       }
+    },
+    editorDiffContent: {
+      get () {
+        const content = this.renderedRespData
+        if (!content) {
+          return ''
+        }
+        return content
+      },
+      set (val) {
+        this.renderedRespData = val
+      }
+    },
+    isShowCodeDiffEditor () {
+      if (this.currentTab === 'respData') {
+        if (this.isShowDiffButton) {
+          return true
+        }
+        return false
+      }
+      return false
     }
   },
   watch: {
     dataDetail (val) {
       this.setDataDetailEditorCache(val)
-    }
+      this.updateDiffButtonStatus()
+    },
   },
   methods: {
     save () {
@@ -166,6 +226,42 @@ export default {
         headers: val.response.headers
       })
       this.editorCache.respData = typeof (val.response.data) == 'object' ? JSON.stringify(val.response.data) : val.response.data
+    },
+    loadEditorDiffContent () {
+      const data = this.editorCache['respData']
+      render(data)
+        .then(response => {
+          this.renderedRespData = response.data.data
+          if (data != response.data.data) {
+            this.isEditorContentEquals = false
+          } else {
+            this.isEditorContentEquals = true
+          }
+          if (this.isTreeNodeClicked) {
+            this.isShowDiffButton = false
+          }
+        }).catch(error => {
+            bus.$emit('msg.error', 'Load rendered data error: ' + error.data.message)
+        })
+    },
+    onTabClick () {
+      if (this.currentTab === 'respData') {
+        this.isTreeNodeClicked = false
+        this.loadEditorDiffContent()
+      }
+    },
+    diffButtonClick () {
+      this.isTreeNodeClicked = false
+      this.isShowDiffButton = !this.isShowDiffButton
+      if (this.isShowDiffButton) {
+        this.loadEditorDiffContent()
+      }
+    },
+    updateDiffButtonStatus() {
+      if (this.currentTab === 'respData') {
+        this.isTreeNodeClicked = true
+        this.loadEditorDiffContent()
+      }
     }
   }
 }
@@ -175,4 +271,17 @@ export default {
 .small-tab > .ivu-tabs > .ivu-tabs-bar {
   margin-bottom: 0;
 }
+.show-diff-btn {
+  color: #fff;
+  font-size: 0.6rem;
+  text-align: center;
+  line-height: 3rem;
+  width: 3rem;
+  height: 3rem;
+  position: fixed;
+  right: 60px;
+  bottom: 140px;
+  border-radius: 50%;
+  z-index: 2;
+}
 </style>

lyrebird/mock/blueprints/apis/common.py

@@ -60,5 +60,6 @@ class Render(Resource):
 
     def put(self):
         origin_data = request.json.get('data')
-        data = utils.render(origin_data)
+        enable_tojson = request.json.get('enable_tojson')
+        data = utils.render(origin_data, enable_tojson)
         return context.make_ok_response(data=data)

lyrebird/mock/dm/__init__.py

@@ -295,12 +295,6 @@ def _format_respose_data(flow):
         # TODO render mock data before response, support more functions
         origin_response_data = flow['response']['data']
 
-        try:
-            flow['response']['data'] = utils.render_data_with_tojson(flow['response']['data'])
-        except Exception:
-            flow['response']['data'] = origin_response_data
-            logger.warning(f'Format response string to json error! {flow["request"]["url"]}\n {traceback.format_exc()}')
-
         try:
             flow['response']['data'] = utils.render(flow['response']['data'])
         except Exception:

lyrebird/utils.py

@@ -218,7 +218,7 @@ def handle_jinja2_keywords(data, params=None):
     return after_data
 
 
-def render(data):
+def render(data, enable_tojson=True):
     if not isinstance(data, str):
         logger.warning(f'Format error! Expected str, found {type(data)}')
         return
@@ -231,13 +231,16 @@ def render(data):
         'now':  datetime.datetime.now()
     }
 
+    if enable_tojson:
+        data = render_data_with_tojson(data)
     data = handle_jinja2_keywords(data, params)
 
     try:
         template_data = Template(data, keep_trailing_newline=True)
         return template_data.render(params)
     except Exception:
         logger.error(f'Format error!\n {traceback.format_exc()}')
+        return data
 
 
 def get_query_array(url):

lyrebird/version.py

@@ -1,3 +1,3 @@
-IVERSION = (2, 11, 3)
+IVERSION = (2, 12, 0)
 VERSION = ".".join(str(i) for i in IVERSION)
 LYREBIRD = "Lyrebird " + VERSION