--- /dev/null
+<template>\r
+ <div class="wrapper wrapper-content animated fadeIn">\r
+ <div class="row" style="margin-bottom: 20px;">\r
+ <div class="col-md-8">\r
+ <ol class="breadcrumb" style="padding-left: 20px; font-size: 17px;">\r
+ <li>\r
+ <router-link to="/" >root</router-link>\r
+ </li>\r
+ </ol>\r
+ </div>\r
+ </div>\r
+ <div id="page-content" class="row">\r
+ <div class="col-lg-8">\r
+ <div class="ibox">\r
+ <div class="ibox-title">\r
+ <h5 style="font-size:26px;margin-top: -3px;">Test Suite</h5>\r
+ <div class="ibox-tools">\r
+ <button class="btn btn-info btn-sm my-button-sm" type="button" v-on:click="runTestsuites()">Run</button>\r
+ <button class="btn btn-success btn-sm my-button-sm" type="button" v-on:click="createSuite()">Create</button>\r
+ <button class="btn btn-danger btn-sm my-button-sm" v-on:click="deleteSuites()" type="button">Delete</button>\r
+ <a class="collapse-link">\r
+ <i class="fa fa-chevron-up"></i>\r
+ </a>\r
+ <a class="fullscreen-link">\r
+ <i class="fa fa-expand"></i>\r
+ </a>\r
+ </div>\r
+ </div>\r
+ <div class="ibox-content" style="text-align:center;">\r
+ <table class="my-table table table-bordered" cellspacing="0" cellpadding="0" style="text-align: center;">\r
+ <thead>\r
+ <tr>\r
+ <td style="width:20px"><input type="checkbox" v-model="selectAll"> All</td>\r
+ <td class="smallbox" style="with:250px;">TestSuite Name</td>\r
+ </tr>\r
+ </thead>\r
+ <tbody>\r
+ <tr v-for="testsuite in testsuites">\r
+ <td><input style="width:20px" type="checkbox" v-model="selected" :value="testsuite.testsuite"> </td>\r
+ <td class="smallbox" style="with:250px;"><router-link :to="{ path: '/testcase', query: { name: testsuite.testsuite }}" >{{testsuite.testsuite}}</router-link></td>\r
+ </tr>\r
+ </tbody>\r
+ <tfoot id="create-box" style="display: none">\r
+ <tr>\r
+ <td style="width:20px"><input type="checkbox"> </td>\r
+ <td class="smallbox" style="with:250px;"><input type="text" v-model="newSuite" @keydown.enter="addItem" ></td>\r
+ </tr>\r
+ </tfoot>\r
+ </table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <hr />\r
+ <div class="row">\r
+ <div class="col-lg-12">\r
+ <div class="ibox">\r
+ <div class="ibox-title">\r
+ <h5 style="font-size:26px;margin-top: -3px;">Workflow</h5>\r
+ <div class="ibox-tools">\r
+ <a class="collapse-link">\r
+ <i class="fa fa-chevron-up"></i>\r
+ </a>\r
+ <a class="fullscreen-link">\r
+ <i class="fa fa-expand"></i>\r
+ </a>\r
+ </div>\r
+ </div>\r
+ <div class="ibox-content" style="padding-top: 30px;">\r
+ <div id="executing" class="row" style="padding: 0 30px 60px;">\r
+ <div class="col-md-offset-2 col-md-8">\r
+ <div class="table-responsive">\r
+ <table class="table text-center" style="margin-top: 30px;">\r
+ <thead>\r
+ <tr>\r
+ <th class="text-center">#</th>\r
+ <th class="text-center">testcase</th>\r
+ <th class="text-center">status</th>\r
+ <th class="text-center">operation</th>\r
+ </tr>\r
+ </thead>\r
+ <tbody>\r
+ <tr v-for="testcase in casesInSuite">\r
+ <td>{{ testcase.id }}</td>\r
+ <td>{{ testcase.testcase }}</td>\r
+ <td><span class="badge" v-bind:class="'badge-' + statusClass(testcase.status)">{{ testcase.status }}</span></td>\r
+ <td>\r
+ <div style="display: inline-block;min-width: 130px;">\r
+ <button class="btn btn-primary btn-outline btn-xs fadeIn" v-on:click="runTestcase()" v-show="testcase.status == 'failed'">rerun</button>\r
+ <button class="btn btn-primary btn-outline btn-xs fadeIn" v-on:click="runNextCase($event.target)" v-show="testcase.status == 'failed'">run next one</button>\r
+ </div>\r
+ </td>\r
+ </tr>\r
+ </tbody>\r
+ </table>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ <hr class="hr-line-solid">\r
+ <div class="row" style="margin-top: 60px;">\r
+ <wfresult v-bind:workflowId="workflowId" v-bind:wfloading='wfloading' v-bind:wfJson='wfJson' v-on:wfComplete="wfComplete = $event"></wfresult>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
+</template>\r
+<script>\r
+import wfresult from './workflow_graph/wfresult.vue'\r
+import showMessage from './message/showMessage.js'\r
+export default {\r
+ name: 'testsuite',\r
+ data () {\r
+ return {\r
+ newSuite : '',\r
+ testsuites : '',\r
+ service_selected : '',\r
+ workflowId: '',\r
+ wfloading: false,\r
+ wfJson: '',\r
+ selected: [],\r
+ casesInSuite: [],\r
+ running: {\r
+ suiteName: "",\r
+ caseName: ""\r
+ },\r
+ curRunningId: 0,\r
+ wfComplete: false\r
+ }\r
+ },\r
+ created: function() {\r
+ var self = this;\r
+ var msgTitle = "GET -- TESTSUITES";\r
+ var errorInfo = "Failed to get testsuite list.";\r
+ $.ajax({\r
+ url: this.global.SERVER_ADDR + "testsuite/list",\r
+ method:"GET",\r
+ data:{},\r
+ success:function (data) {\r
+ if(data['code'] == 200) {\r
+ self.testsuites = data['result'];\r
+ } else {\r
+ showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ showMessage(status, msgTitle, errorInfo, msg);\r
+ }\r
+ });\r
+ },\r
+ computed: {\r
+ selectAll: {\r
+ get: function () {\r
+ return this.testsuites ? this.selected.length == this.testsuites.length : false;\r
+ },\r
+ set: function (value) {\r
+ var selected = [];\r
+ if (value) {\r
+ this.testsuites.forEach(function (story) {\r
+ selected.push(story.testsuite);\r
+ });\r
+ }\r
+ this.selected = selected;\r
+ }\r
+ }\r
+},\r
+ methods:{\r
+ createSuite: function () {\r
+ var cbox = document.getElementById("create-box");\r
+ cbox.style.display = "table-footer-group";\r
+ },\r
+ addItem: function () {\r
+ var self = this;\r
+ const suiteName = self.newSuite.trim();\r
+ if(suiteName)\r
+ {\r
+ var msgTitle = "CREATE -- TESTSUITE";\r
+ $.ajax({\r
+ url: this.global.SERVER_ADDR + "testsuite/new",\r
+ method:"POST",\r
+ data:{\r
+ suiteName:suiteName\r
+ },\r
+ success:function(data){\r
+ if(data['code'] == 200){\r
+ self.testsuites.push({\r
+ id: self.testsuites.length + 1 ,\r
+ testsuite: suiteName,\r
+ });\r
+ showMessage(data['code'], msgTitle, "Create <strong>" + suiteName + "</strong> succesfully!");\r
+ } else {\r
+ showMessage(data['code'], msgTitle, "Failed to create <strong>" + suiteName + "</strong>!", data['error']);\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ showMessage(status, msgTitle, "Failed to create <strong>" + suiteName + "</strong>!", msg);\r
+ }\r
+ })\r
+ }\r
+ var cbox = document.getElementById("create-box");\r
+ cbox.style.display = "none";\r
+ this.newSuite = '';\r
+ },\r
+ deleteSuites:function () {\r
+ var self = this;\r
+ var msgTitle = "DELETE -- TESTSUITE";\r
+ var deleteArr = self.selected.slice(0);\r
+ self.testsuites = self.testsuites.filter(item => {\r
+ for(var i in deleteArr) {\r
+ if(item.testsuite == deleteArr[i]) {\r
+ return false;\r
+ }\r
+ }\r
+ return true;\r
+ });\r
+ self.selected = [];\r
+ for(var i in deleteArr)\r
+ {\r
+ $.ajax({\r
+ url: this.global.SERVER_ADDR + "testsuite/delete",\r
+ method:"POST",\r
+ data:{\r
+ suiteName: deleteArr[i]\r
+ },\r
+ success:function (data) {\r
+ if(data['code'] == 200){\r
+ showMessage(data['code'], msgTitle, "Delete <strong>" + deleteArr[i] + "</strong> succesfully!");\r
+ } else {\r
+ showMessage(data['code'], msgTitle, "Failed to delete <strong>" + deleteArr[i] + "</strong>!", data['error']);\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ showMessage(status, msgTitle, "Failed to delete <strong>" + deleteArr[i] + "</strong>!", msg);\r
+ }\r
+ });\r
+ }\r
+ },\r
+ runTestsuites: function() {\r
+ var self = this;\r
+ var msgTitle = "RUN -- TESTSUITE";\r
+ if(self.selected.length == 0) {\r
+ showMessage("warning", msgTitle, "please select one!");\r
+ return;\r
+ } else if(self.selected.length != 1) {\r
+ showMessage("warning", msgTitle, "sorry, one suite at a time!");\r
+ return;\r
+ }\r
+ self.running.suiteName = self.selected[0];\r
+ $.ajax({\r
+ url: this.global.SERVER_ADDR + "testsuite/content",\r
+ method: "GET",\r
+ data: {\r
+ "suiteName": self.running.suiteName\r
+ },\r
+ success: function(data) {\r
+ if (data['code'] == 200) {\r
+ var caseList = data['result'];\r
+ if(caseList.length == 0) {\r
+ showMessage("info", msgTitle, "<strong>" + self.running.suiteName + "</strong> is empty!");\r
+ return;\r
+ }\r
+ for(var i=0; i < caseList.length; i++) {\r
+ caseList[i]['status'] = "waiting";\r
+ }\r
+ self.casesInSuite = caseList;\r
+ showMessage(data['code'], msgTitle, "Start to run <strong>" + self.running.suiteName + "</strong>");\r
+ self.runTestcase();\r
+ } else {\r
+ showMessage(data['code'], msgTitle, "Failed to run <strong>" + self.running.suiteName + "</strong>", data['error']);\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ showMessage(status, msgTitle, "Failed to run <strong>" + self.running.suiteName + "</strong>", msg);\r
+ }\r
+ });\r
+ },\r
+ runTestcase: function() {\r
+ var self = this;\r
+ var msgTitle = "RUN -- TESTCASE";\r
+ if (self.curRunningId == self.casesInSuite.length) {\r
+ self.curRunningId = 0;\r
+ return;\r
+ }\r
+ self.wfComplete = false;\r
+ var i = self.curRunningId;\r
+ self.casesInSuite[i]['status'] = "running";\r
+ self.running.caseName = self.casesInSuite[i]['testcase'];\r
+ $.ajax({\r
+ url: self.global.SERVER_ADDR + "execute/testcase",\r
+ method: "POST",\r
+ data: {\r
+ "suiteName": self.running.suiteName,\r
+ "caseName": self.running.caseName\r
+ },\r
+ beforeSend: function(XHR) {\r
+ self.wfloading = true;\r
+ },\r
+ success: function(data) {\r
+ if(data['code'] == 200) {\r
+ self.workflowId = data['result']['workflowId'];\r
+ $.ajax({\r
+ url: self.global.SERVER_ADDR + "story-content",\r
+ method: "GET",\r
+ data: {\r
+ "service": self.running.suiteName,\r
+ "story": self.running.caseName\r
+ },\r
+ success: function(data) {\r
+ if(data['code'] == 200) {\r
+ self.wfJson = data['result']['content'];\r
+ } else {\r
+ showMessage(data['code'], msgTitle, "workflow.json get failed!");\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ showMessage(status, msgTitle, msg);\r
+ }\r
+ });\r
+ } else {\r
+ var i = self.curRunningId;\r
+ self.casesInSuite[i]['status'] = "failed";\r
+ self.wfloading = false;\r
+ showMessage(data['code'], msgTitle, "Failed to run <strong>" + self.running.caseName + "</strong>", data['error']);\r
+ }\r
+ },\r
+ error: function(obj, status, msg) {\r
+ var i = self.curRunningId;\r
+ self.casesInSuite[i]['status'] = "failed";\r
+ self.wfloading = false;\r
+ showMessage(status, msgTitle, "Failed to run <strong>" + self.running.caseName + "</strong>", msg);\r
+ }\r
+ });\r
+ },\r
+ statusClass: function(status) {\r
+ if(status == "waiting") {\r
+ return "success";\r
+ }\r
+ if(status == "running") {\r
+ return "warning";\r
+ }\r
+ if(status == "pass") {\r
+ return "primary";\r
+ }\r
+ if(status == "failed") {\r
+ return "danger";\r
+ }\r
+ },\r
+ runNextCase: function(obj) {\r
+ $(obj).parent().css({"display": "none"});\r
+ var i = this.curRunningId++;\r
+ this.runTestcase();\r
+ }\r
+ },\r
+ watch: {\r
+ wfComplete: function(val) {\r
+ if(val == false) return;\r
+ this.wfloading = false;\r
+ var i = this.curRunningId++;\r
+ this.casesInSuite[i]['status'] = "pass";\r
+ // run the next testcase.\r
+ this.runTestcase();\r
+ }\r
+ },\r
+ components: {\r
+ wfresult\r
+ }\r
+}\r
+</script>
\ No newline at end of file
Code Review / bottlenecks.git / blobdiff