test-scheduler/ui/src/components/environment.vue

   1 <template>
   2 <div class="wrapper wrapper-content">
   3     <div class="row">
   4         <div class="col-lg-offset-2 col-lg-8">
   5             <div class="ibox">
   6                 <div class="ibox-content">
   7                     <h1>CONTEXT <i class="fa fa-question-circle"></i></h1>
   8                     <div class="row">
   9                         <div class="col-md-offset-1 col-md-10">
  10                             <textarea v-model="context" id="context-content" style="white-space:nowrap; overflow:scroll; font-size: 16px; padding: 4px; width: 100%; min-height: 300px; max-height: 300px;">
  11                             </textarea>
  12                             <button type="button" class="btn btn-primary pull-right" v-on:click="saveContext()">Save</button>
  13                         </div>
  14                     </div>
  15                 </div>
  16             </div>
  17         </div>
  18     </div>
  19     <div class="row">
  20         <div class="col-lg-offset-2 col-lg-8">
  21             <div class="ibox">
  22                 <div class="ibox-content">
  23                     <h1>Service</h1>
  24                     <div class="service-table">
  25                         <table id="serviceList" class="table table-bordered table-hover text-center">
  26                             <thead>
  27                                 <tr>
  28                                     <th class="text-center">No</th>
  29                                     <th class="text-center">Service</th>
  30                                     <th class="text-center">Time</th>
  31                                     <th class="text-center">Operation</th>
  32                                 </tr>
  33                             </thead>
  34                             <tbody>
  35                                 <tr v-for="service in serviceList" v-on:click="editService(service.name)" style="cursor: pointer;">
  36                                     <td style="vertical-align: middle;">{{ service.id }}</td>
  37                                     <td style="vertical-align: middle;">{{ service.name }}</td>
  38                                     <td style="vertical-align: middle;">{{ service.time }}</td>
  39                                     <td style="vertical-align: middle;"><button type="button" class="btn btn-white" v-on:click.stop="deleteService(service.name)"><i class="fa fa-trash"></i></button>
  40                                     </td>
  41                                 </tr>
  42                             </tbody>
  43                         </table>
  44                         <div>
  45                             <button class="btn btn-lg btn-success" style="float:right;" v-on:click="addNewService()">  Add  </button>
  46                         </div>
  47                     </div>
  48                     <!-- modal of one service -->
  49                     <div class="row">
  50                         <service-modal v-bind:type="type" v-on:service-creation="plusAService" v-on:service-edition="editAServiceName" v-on:creation-fail="creationFailHandler"></service-modal>
  51                     </div>
  52                 </div>
  53             </div>
  54         </div>
  55     </div>
  56 </div>
  57 </template>
  58 <script>
  59 import Vue from 'vue'
  60 import service_modal from "./env_component/service_modal.vue"
  61 import showMessage from './message/showMessage.js'
  62 export default {
  63     name: 'environment',
  64     data: function() {
  65         return {
  66             serviceList: [],
  67             type: {
  68                 edit: true,
  69                 service: "ansible",
  70                 tag: "default"
  71             },
  72             context: ''
  73         }
  74     },
  75     components: {
  76         'service-modal': service_modal
  77     },
  78     created: function() {
  79         var self = this;
  80         var msgTitle = "GET -- SERVICE LIST";
  81         var errorInfo = 'Unable to get the service list';
  82         $.ajax({
  83             url: this.global.SERVER_ADDR + "env/getAllServices",
  84             method: "GET",
  85             success: function(data) {
  86                 if(data['code'] == 200) {
  87                     self.serviceList = data['result'];
  88                 } else {
  89                     showMessage(data['code'], msgTitle, errorInfo, data['error']);
  90                 }
  91             },
  92             error: function(obj, status, msg) {
  93                 showMessage("error", msgTitle, errorInfo, msg);
  94             }
  95         });
  96         $.ajax({
  97             url: this.global.SERVER_ADDR + "env/getContext",
  98             method: "GET",
  99             success: function(data) {
 100                 if(data['code'] == 200) {
 101                     self.context = data['result']['context'];
 102                 } else {
 103                     showMessage(data['code'], msgTitle, errorInfo, data['error']);
 104                 }
 105             },
 106             error: function(obj, status, msg) {
 107                 showMessage("error", msgTitle, errorInfo, msg);
 108             }
 109         });
 110     },
 111     methods: {
 112         addNewService: function(){
 113             this.type.edit = false;
 114             this.type.tag = "abc";
 115             this.type.service = null;
 116             this.type.originName = null;
 117             if(this.type.content){
 118                 this.type.content = null;
 119             }
 120             $("#myModal").modal("show");
 121         },
 122         plusAService: function(serviceName){
 123             var item = {'id': '', 'name': '', 'time': ''};
 124             item['id'] = this.serviceList[this.serviceList.length - 1]['id'] + 1;
 125             item['name'] = serviceName;
 126             item['time'] = this.getFormatDate(new Date());
 127             this.serviceList.push(item);
 128         },
 129         editAServiceName: function(edition) {
 130             for(var i = 0;i < this.serviceList.length; i++) {
 131                 if(edition['oldName'] == this.serviceList[i]['name']) {
 132                     this.serviceList[i]['name'] = edition['newName'];
 133                 }
 134             }
 135         },
 136         editService: function(serviceName){
 137             this.type.edit = true;
 138             this.type.tag = "abc";
 139             this.type.service = serviceName;
 140             this.type.originName = serviceName;
 141             if(this.type.content){
 142                 this.type.content = null;
 143             }
 144             console.log(this.type);
 145             var self = this;
 146             var msgTitle = "GET -- SERVICE";
 147             var errorInfo = "Unable to get the service: <strong>" + self.type.service + "</strong>";
 148             $.ajax({
 149                 url: this.global.SERVER_ADDR + "env/getService",
 150                 method: "GET",
 151                 data: {
 152                     "serviceName": serviceName
 153                 },
 154                 success: function(data) {
 155                     if(data['code'] == 200) {
 156                         self.type.tag = "hhh";
 157                         self.type.content = data['result'];
 158                         self.type.originName = self.type.service;
 159                     } else {
 160                         showMessage(data['code'], msgTitle, errorInfo, data['error']);
 161                     }
 162                 },
 163                 error: function(obj, status, msg) {
 164                     showMessage("error", msgTitle, errorInfo, msg);
 165                 }
 166             });
 167             $("#myModal").modal("show");
 168         },
 169         deleteService: function(serviceName){
 170             var msgTitle = "DELETE -- SERVICE";
 171             $.ajax({
 172                 url: this.global.SERVER_ADDR + "env/deleteService",
 173                 method: "POST",
 174                 data: {
 175                     "serviceName": serviceName
 176                 },
 177                 success: function(data) {
 178                     if(data['code'] == 200) {
 179                         showMessage(data['code'], msgTitle, "Delete <strong>" + serviceName + "</strong> successfully.");
 180                     } else {
 181                         showMessage(data['code'], msgTitle,  "Failed to delete <strong>" + serviceName + "</strong>", data['error']);
 182                     }
 183                 },
 184                 error: function(obj, status, msg) {
 185                     showMessage("error", msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", msg);
 186                 }
 187             });
 188             for(var i = 0;i < this.serviceList.length; i++) {
 189                 if(serviceName == this.serviceList[i]['name']) {
 190                     this.serviceList.splice(i, 1);
 191                 }
 192             }
 193         },
 194         creationFailHandler: function(serviceName) {
 195             for(var i = 0; i < this.serviceList.length; i++) {
 196                 if(serviceName == this.serviceList[i].name) {
 197                     this.serviceList.splice(i, 1);
 198                 }
 199             }
 200         },
 201         getFormatDate: function(date) {
 202             var year = date.getFullYear();
 203             var month = date.getMonth() + 1;
 204             var strDate = date.getDate();
 205             var seperator = "-";
 206             if(month >= 1 && month <= 9) {
 207                 month = "0" + month;
 208             }
 209             if(strDate >= 1 && strDate <= 9) {
 210                 strDate = "0" + strDate;
 211             }
 212             var formatDate = year + seperator + month + seperator + strDate;
 213             return formatDate;
 214         },
 215         saveContext: function() {
 216             var self = this;
 217             var msgTitle = "SAVE -- CONTEXT";
 218             var errorInfo = "Failed to save context!";
 219             $.ajax({
 220                 url: this.global.SERVER_ADDR + "env/editContext",
 221                 method: "POST",
 222                 data: {
 223                     context: self.context
 224                 },
 225                 success: function(data) {
 226                     if(data['code'] == 200) {
 227                         showMessage(data['code'], msgTitle, "Save context successfully!");
 228                     } else {
 229                         showMessage(data['code'], msgTitle, errorInfo, data['error']);
 230                     }
 231                 },
 232                 error: function(obj, status, msg) {
 233                     showMessage("error", msgTitle, errorInfo, msg);
 234                 }
 235             });
 236         }
 237     }
 238 }
 239 </script>