diff options
Diffstat (limited to 'test-scheduler/ui/src/components/env_component')
4 files changed, 388 insertions, 0 deletions
diff --git a/test-scheduler/ui/src/components/env_component/api_param.vue b/test-scheduler/ui/src/components/env_component/api_param.vue new file mode 100644 index 00000000..55eb913e --- /dev/null +++ b/test-scheduler/ui/src/components/env_component/api_param.vue @@ -0,0 +1,63 @@ +<template> + <div class="row"> + <div class="form-group"> + <label class="col-lg-3 control-label">Params</label> + <div class="col-lg-2"> + <button type="button" class="btn btn-primary btn-sm" v-on:click="addNewParam()">New</button> + </div> + </div> + <div class="form-group"> + <div class="col-lg-offset-2 col-lg-8"> + <div class="table-responsive"> + <table class="table table-bordered text-center"> + <thead> + <tr> + <th>name</th> + <th class="text-center">description</th> + <th class="text-center">operation</th> + </tr> + </thead> + <tbody> + <tr v-for="param in params"> + <td><input type="text" class="form-control text-center" style="border: 0px" v-model="param['name']"></td> + <td><input type="text" class="form-control text-center" style="border: 0px" v-bind:title="param['description']" v-model="param['description']"></td> + <td> + <button type="button" class="btn btn-white" v-on:click="deleteParam(param['name'])"> + <i class="fa fa-trash"></i> + </button> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> +</template> +<script> +export default { + props: ["params"], + data: function() { + return { + paramArr: this.params + } + }, + watch: { + paramArr: function(){ + this.$emit("params", this.paramArr); + } + }, + methods: { + addNewParam: function() { + this.params.push({'name': '', 'description': ''}); + }, + deleteParam: function(paramName) { + for(var i = 0;i < this.params.length; i++) { + if(paramName == this.params[i]['name']) { + this.params.splice(i, 1); + } + } + } + } +} +</script> diff --git a/test-scheduler/ui/src/components/env_component/base_input.vue b/test-scheduler/ui/src/components/env_component/base_input.vue new file mode 100644 index 00000000..f4bbde5c --- /dev/null +++ b/test-scheduler/ui/src/components/env_component/base_input.vue @@ -0,0 +1,20 @@ +<template> + <div class="form-group"> + <label class="col-lg-3 control-label">{{ name }}</label> + <div class="col-lg-7"> + <input type="text" class="form-control" v-bind:value="value" v-on:input="$emit('input', $event.target.value)"> + </div> + </div> +</template> +<script> +export default { + props: ['name', 'value'], + data: function() { + return { + inputName: this.name, + inputValue: this.value, + fake: "abc" + } + } +} +</script> diff --git a/test-scheduler/ui/src/components/env_component/service_api.vue b/test-scheduler/ui/src/components/env_component/service_api.vue new file mode 100644 index 00000000..f6f58d2c --- /dev/null +++ b/test-scheduler/ui/src/components/env_component/service_api.vue @@ -0,0 +1,112 @@ +<template> + <div class="panel panel-success"> + <div class="panel-heading"> + <button type="button" class="btn btn-xs btn-danger pull-right" v-on:click="deleteApi(name)">Delete</button> + <h5 class="panel-title"> + <a data-toggle="collapse" data-parent="panelParent" v-bind:href="'#' + name + '-collapse'" style="display:block;">{{ name }}</a> + </h5> + </div> + <div v-bind:id="name + '-collapse'" class="panel-collapse collapse fade"> + <div class="panel-body"> + <base-input name="name" v-model="name"></base-input> + <base-input name="method" v-model="method"></base-input> + <base-input name="baseuri" v-model="baseuri"></base-input> + <api-param v-bind:params="params"></api-param> + <div class="form-group" v-bind:class="{ 'has-error': jsonSyntaxError}"> + <label class="col-lg-3 control-label" id="templateLabel"> + Template <i class="fa fa-question-circle"></i> + </label> + <div class="col-lg-7"> + <!-- help text --> + <span id="tempHelp">Json格式文本，用于定义发送http请求的报文内容。示例如下：<br>( 其中 ((<variable>)) 为占位符，用于替换实际值 )<br>GET方式：<br>{<br> "uri" : "((baseuri))?name=((name))"<br>}<br>POST方式:<br>{<br> "uri" : "((baseuri))",<br> "body" : {<br> "name" : "((name))",<br> "account" : {<br> "id" : "((user_name))",<br> "addr" : "SH"<br> }<br> }<br>}</span> + <textarea class="form-control" style="min-height: 200px;" v-model="templateStr"></textarea> + <span class="help-block" v-show="jsonSyntaxError">Json语法错误，请检查！</span> + </div> + </div> + </div> + </div> + </div> +</template> +<script> +import base_input from "./base_input.vue" +import api_param from "./api_param.vue" +import Vue from "vue" +export default { + props: ['panelParent', 'name', 'method', 'baseuri', 'params', 'template'], + watch: { + name: function(val) { + this.$emit("name", val); + }, + method: function(val) { + this.$emit("method", val); + }, + baseuri: function(val) { + this.$emit("baseuri", val); + }, + params: function(val) { + this.$emit("params", val); + }, + templateStr: function(val) { + try { + console.log(JSON.parse(val)); + this.jsonSyntaxError = false; + this.$emit("template", JSON.parse(val)); + } catch(err) { + console.log("catch the exception templateStr"); + this.jsonSyntaxError = true; + } + } + }, + components: { + 'base-input': base_input, + 'api-param': api_param + }, + data: function() { + return { + jsonSyntaxError: false, + templateStr: JSON.stringify(this.template, null, 2) + }; + }, + methods: { + deleteApi: function(apiName) { + this.$emit("delete", apiName); + } + } +} +</script> +<style scoped> +#templateLabel:hover+div #tempHelp{ + display: block; +} +#tempHelp { + display: none; + position: absolute; + width: 90%; + min-height: 150px; + background-color: #ab2d2d; + color: white; + transition: display 1s; + text-align: left; + padding: 10px 16px; + z-index: 2; + font-size: 10px; + opacity: 0.9; +} +#tempHelp::after { + content: ''; + position: absolute; + bottom: 92%; + right: 100%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent #ab2d2d transparent transparent; +} +@media(max-width:1200px) { + #tempHelp::after { + bottom: 100%; + left: 5%; + border-color: transparent transparent #ab2d2d transparent; + } +} +</style> diff --git a/test-scheduler/ui/src/components/env_component/service_modal.vue b/test-scheduler/ui/src/components/env_component/service_modal.vue new file mode 100644 index 00000000..ea2f0cbb --- /dev/null +++ b/test-scheduler/ui/src/components/env_component/service_modal.vue @@ -0,0 +1,193 @@ +<template> + <div class="modal inmodal fade" id="myModal"> + <div class="modal-dialog modal-lg"> + <div class="modal-content animated"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"> + <span aria-hidden="true">×</span><span class="sr-only">Close</span> + </button> + <h3 class="modal-title">{{type.service}}</h3> + </div> + <div class="modal-body"> + <div class="row"> + <form method="get" class="form-horizontal"> + <div id="service-address"> + <button class="btn btn-default">Basic</button> + <div class="form-group"> + <label class="col-sm-3 control-label">name</label> + <div class="col-sm-7"> + <input type="text" class="form-control service-title" v-model="type.service" placeholder="please input service name."> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label">ip</label> + <div class="col-sm-7"><input type="text" class="form-control" v-model="ip"></div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label">port</label> + <div class="col-sm-7"><input type="text" class="form-control" v-model="port"></div> + </div> + </div> + <div class="hr-line-dashed"></div> + <div id="service-apis"> + <div id="apis-nav"> + <button class="btn btn-default">Apis</button> + </div> + <br /> + <div id="api-panels" class="api col-sm-offset-1 col-sm-10"> + <div class="panel-group" id="accordion"> + <service-api v-for="api in apis" panel-parent="#accordion" v-bind="api" v-on:name="api.name = $event" v-on:method="api.method = $event" v-on:baseuri="api.baseuri = $event" v-on:params="api.params = $event" v-on:template="api.template = $event" v-on:delete="removeApi"></service-api> + </div> + <button type="button" class="btn btn-primary pull-right" v-on:click="addNewApi()">New</button> + </div> + </div> + </form> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-white" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" v-on:click="save()">Save changes</button> + </div> + </div> + </div> + </div> +</template> +<script> +import service_api from "./service_api.vue"; +import showMessage from '../message/showMessage.js' +export default { + props: ['type'], + data: function() { + return { + typeTag: this.type.tag, + ip: "", + port: "", + apis: [] + } + }, + created: function() { + }, + watch: { + type: { + handler: function(newVal, oldVal) { + console.log("###########type is changed!"); + if(newVal.content) { + var content = newVal.content; + this.ip = content.ip; + this.port = content.port; + this.apis = content.apis; + console.log(this.apis); + } else { + this.resetModalData(); + } + console.log("end!"); + }, + deep: true + } + }, + methods: { + addNewApi: function() { + var newApi = {'name': 'new', 'method': 'GET', 'baseuri': '', 'params': [], 'template': {"uri": "((baseuri))"}}; + this.apis.push(newApi); + }, + removeApi: function(name) { + for(var i = 0; i < this.apis.length; i++) { + if(name == this.apis[i]['name']) { + this.apis.splice(i, 1); + } + } + }, + save: function() { + if(this.ip == "") { + showMessage("warning", "SERVICE", "ip is not filled!"); + return; + } else if (this.port == "") { + showMessage("warning", "SERVICE", "port is not filled!"); + return; + } else if (this.type.service == "") { + showMessage("warning", "SERVICE", "service name is not filled!"); + return; + } + if(this.type.edit == true) { + this.saveEdition(); + } else { + this.saveCreation(); + } + this.resetModalData(); + $("#myModal").modal("hide"); + }, + saveEdition: function() { + var self = this; + var msgTitle = "SAVE -- SERVICE"; + $.ajax({ + url: this.global.SERVER_ADDR + "env/editService", + method: "post", + data: { + "oldName": self.type.originName, + "newName": self.type.service, + "ip": self.ip, + "port": self.port, + "apis": JSON.stringify(self.apis), + }, + success: function(data) { + if(data['code'] == 200) { + showMessage("success", msgTitle, "Save service <strong>" + self.type.service + "</strong> successfully!"); + } else { + showMessage(data['code'], msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", data['error']); + } + }, + error: function() { + showMessage("error", msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", msg); + } + }); + var edition = { + 'oldName': this.type.originName, + 'newName': this.type.service + }; + this.$emit("service-edition", edition); + }, + saveCreation: function() { + console.log("save creation!!!"); + var self = this; + var msgTitle = "CREATE -- SERVICE"; + $.ajax({ + url: this.global.SERVER_ADDR + "env/createService", + method: "post", + data: { + "name": self.type.service, + "ip": self.ip, + "port": self.port, + "apis": JSON.stringify(self.apis) + }, + success: function(data) { + if(data['code'] == 200) { + showMessage("success", msgTitle, "Create <strong>"+ self.type.service + "</strong> successfully!"); + } else { + showMessage(data['code'], msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", data['error']); + self.$emit("creation-fail", self.type.service); + } + }, + error: function() { + showMessage("error", msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", msg); + self.$emit("creation-fail", self.type.service); + } + }); + this.$emit("service-creation", this.type.service); + }, + resetModalData: function() { + this.ip = ""; + this.port = ""; + this.apis = []; + }, + getData: function() { + console.log("apis:"); + for(i in this.apis) { + console.log(this.apis[i]); + } + } + }, + components: { + 'service-api': service_api + } +} +</script> |