the environment page in frontend of testing-scheduler

[bottlenecks.git] / testing-scheduler / ui / src / components / env_component / service_api.vue

diff --git a/testing-scheduler/ui/src/components/env_component/service_api.vue b/testing-scheduler/ui/src/components/env_component/service_api.vue
new file mode 100644 (file)
index 0000000..2acd499
--- /dev/null
+++ b/testing-scheduler/ui/src/components/env_component/service_api.vue
@@ -0,0 +1,112 @@
+<template>\r
+    <div class="panel panel-success">\r
+            <div class="panel-heading">\r
+                <button type="button" class="btn btn-xs btn-danger pull-right" v-on:click="deleteApi(name)">Delete</button>\r
+                <h5 class="panel-title">\r
+                    <a data-toggle="collapse" data-parent="panelParent" v-bind:href="'#' + name + '-collapse'" style="display:block;">{{ name }}</a>\r
+                </h5>\r
+            </div>\r
+            <div  v-bind:id="name + '-collapse'" class="panel-collapse collapse fade">\r
+                <div class="panel-body">\r
+                    <base-input name="name" v-model="name"></base-input>\r
+                    <base-input name="method" v-model="method"></base-input>\r
+                    <base-input name="baseuri" v-model="baseuri"></base-input>\r
+                    <api-param v-bind:params="params"></api-param>\r
+                    <div class="form-group" v-bind:class="{  'has-error': jsonSyntaxError}">\r
+                        <label class="col-lg-3 control-label" id="templateLabel">\r
+                            Template <i class="fa fa-question-circle"></i>\r
+                        </label>\r
+                        <div class="col-lg-7">\r
+                            <!-- help text -->\r
+                            <span id="tempHelp">Json格式文本，用于定义发送http请求的报文内容。示例如下：<br>( 其中 ((&lt;variable&gt;)) 为占位符，用于替换实际值 )<br>GET方式：<br>{<br> &nbsp;"uri" : "((baseuri))?name=((name))"<br>}<br>POST方式:<br>{<br> &nbsp;"uri" : "((baseuri))",<br> &nbsp;"body" : {<br>&nbsp;&nbsp;&nbsp;"name" : "((name))",<br>&nbsp;&nbsp;&nbsp;"account" : {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : "((user_name))",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"addr" : "SH"<br>&nbsp;&nbsp;&nbsp;}<br>&nbsp;}<br>}</span>\r
+                            <textarea class="form-control" style="min-height: 200px;" v-model="templateStr"></textarea>\r
+                            <span class="help-block" v-show="jsonSyntaxError">Json语法错误，请检查！</span>\r
+                        </div>\r
+                    </div>\r
+                </div>\r
+            </div>\r
+        </div>\r
+</template>\r
+<script>\r
+import base_input from "./base_input.vue"\r
+import api_param from "./api_param.vue"\r
+import Vue from "vue"\r
+export default {\r
+    props: ['panelParent', 'name', 'method', 'baseuri', 'params', 'template'],\r
+    watch: {\r
+        name: function(val) {\r
+            this.$emit("name", val);\r
+        },\r
+        method: function(val) {\r
+            this.$emit("method", val);\r
+        },\r
+        baseuri: function(val) {\r
+            this.$emit("baseuri", val);\r
+        },\r
+        params: function(val) {\r
+            this.$emit("params", val);\r
+        },\r
+        templateStr: function(val) {\r
+            try {\r
+                console.log(JSON.parse(val));\r
+                this.jsonSyntaxError = false;\r
+                this.$emit("template", JSON.parse(val));\r
+            } catch(err) {\r
+                console.log("catch the exception templateStr");\r
+                this.jsonSyntaxError = true;\r
+            }\r
+        }\r
+    },\r
+    components: {\r
+        'base-input': base_input,\r
+        'api-param': api_param\r
+    },\r
+    data: function() {\r
+        return {\r
+            jsonSyntaxError: false,\r
+            templateStr: JSON.stringify(this.template, null, 2)\r
+        };\r
+    },\r
+    methods: {\r
+        deleteApi: function(apiName) {\r
+            this.$emit("delete", apiName);\r
+        }\r
+    }\r
+}\r
+</script>\r
+<style scoped>\r
+#templateLabel:hover+div #tempHelp{\r
+    display: block;\r
+}\r
+#tempHelp {\r
+    display: none;\r
+    position: absolute;\r
+    width: 90%;\r
+    min-height: 150px;\r
+    background-color: #ab2d2d;\r
+    color: white;\r
+    transition: display 1s;\r
+    text-align: left;\r
+    padding: 10px 16px;\r
+    z-index: 2;\r
+    font-size: 10px;\r
+    opacity: 0.9;\r
+}\r
+#tempHelp::after {\r
+    content: '';\r
+    position: absolute;\r
+    bottom: 92%;\r
+    right: 100%;\r
+    margin-left: -5px;\r
+    border-width: 5px;\r
+    border-style: solid;\r
+    border-color: transparent #ab2d2d transparent transparent;\r
+}\r
+@media(max-width:1200px) {\r
+    #tempHelp::after {\r
+        bottom: 100%;\r
+        left: 5%;\r
+        border-color: transparent transparent #ab2d2d transparent;\r
+    }\r
+}\r
+</style>
\ No newline at end of file