完善分页组件，日志页面分页，支持历史返回

web/job_log.go

@@ -69,7 +69,7 @@ func (jl *JobLog) GetList(w http.ResponseWriter, r *http.Request) {
 		query["beginTime"] = bson.M{"$gte": begin}
 	}
 	if !end.IsZero() {
-		query["endTime"] = bson.M{"$lte": end}
+		query["endTime"] = bson.M{"$lt": end.Add(time.Hour * 24)}
 	}
 
 	var pager struct {
@@ -83,6 +83,7 @@ func (jl *JobLog) GetList(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	pager.Total /= pageSize
 	outJSON(w, pager)
 }
 

web/ui/package.json

@@ -13,7 +13,7 @@
     "jquery": "^3.1.1",
     "semantic-ui": "^2.2.7",
     "vue": "^2.1.0",
-    "vue-router": "^2.1.1"
+    "vue-router": "^2.2.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

web/ui/src/App.vue

@@ -5,7 +5,7 @@
       <router-link class="item" to="/" v-bind:class="{active: this.$route.path == '/'}"><i class="dashboard icon"></i> 仪表盘</router-link>
       <router-link class="item" to="/log" v-bind:class="{active: this.$route.path.indexOf('/log') === 0}"><i class="file text icon"></i> 日志</router-link>
       <router-link class="item" to="/job" v-bind:class="{active: this.$route.path.indexOf('/job') === 0}"><i class="calendar icon"></i> 任务</router-link>
-      <router-link class="item" to="/nodes" v-bind:class="{active: this.$route.path.indexOf('/nodes') === 0}"><i class="server icon"></i> 节点</router-link>
+      <router-link class="item" to="/node" v-bind:class="{active: this.$route.path.indexOf('/nodes') === 0}"><i class="server icon"></i> 节点</router-link>
     </div>
     <div style="height: 55px;"></div>
     <div class="ui container">

web/ui/src/components/Job.vue

@@ -155,7 +155,7 @@ export default {
 
     // i > 0
     _formatNumber: function(i, len){
-      var n = Math.ceil(Math.log10(i+1));
+      var n = i == 0 ? 1 : Math.ceil(Math.log10(i+1));
       if (n >= len) return i.toString();
       return '0'.repeat(len-n) + i.toString(); 
     }

web/ui/src/components/Log.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <form class="ui form" v-bind:class="{loading:loading}" v-on:submit.prevent>
+    <form class="ui form" method="GET" v-bind:class="{loading:loading}" v-on:submit.prevent>
       <div class="field">
         <label>任务名称</label>
         <input type="text" ref="name" v-model="names"  placeholder="多个名称用英文逗号分隔">
@@ -29,22 +29,27 @@
           <th class="center aligned">任务名称</th>
           <th class="center aligned">运行节点</th>
           <th class="center aligned">执行时间</th>
-          <th class="center aligned">状态码</th>
+          <th class="center aligned">运行结果</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="log in list">
-          <td><router-link class="item" :to="/log/+log.id">{{log.name}}</router-link></td>
+          <td><router-link class="item" :to="'/job/edit/'+log.jobGroup+'/'+log.jobId">{{log.name}}</router-link></td>
           <td>{{log.node}}</td>
           <td :class="{warning: durationAttention(log.beginTime, log.endTime)}"><i class="attention icon" v-if="durationAttention(log.beginTime, log.endTime)"></i> {{formatTime(log.beginTime, log.endTime)}}，{{formatDuration(log.beginTime, log.endTime)}}</td>
-          <td :class="{error: log.exitCode != 0}">{{log.exitCode}}</td>
+          <td :class="{error: !log.success}">
+            <router-link :to="'/log/'+log.id">{{log.success ? '成功' : '失败'}}</router-link>
+          </td>
         </tr>
       </tbody>
     </table>
+    <Pager v-if="list && list.length>0" :total="total" :length="5"/>
   </div>
 </template>
 
 <script>
+import Pager from './basic/Pager.vue';
+
 export default {
   name: 'log',
   data: function(){
@@ -56,35 +61,60 @@ export default {
       end: '',
       list: [],
       total: 0,
-      currPage: 1
+      page: 1
     }
   },
 
-  mounted: function(){
-    this.names = this.$route.query.names || '';
-    this.nodes = this.$route.query.nodes || '';
-    this.begin = this.$route.query.begin || '';
-    this.end = this.$route.query.end || '';
+  mounted: function(to, from, next){
+      this.names = this.$route.query.names || '';
+      this.nodes = this.$route.query.nodes || '';
+      this.begin = this.$route.query.begin || '';
+      this.end = this.$route.query.end || '';
+      this.page = this.$route.query.page || 1;
+      this.fetchList(this.buildQuery());
+  },
 
-    if (this.names || this.nodes || this.begin || this.end) this.submit();
+  watch: {
+    '$route': function(){
+      this.names = this.$route.query.names || '';
+      this.nodes = this.$route.query.nodes || '';
+      this.begin = this.$route.query.begin || '';
+      this.end = this.$route.query.end || '';
+      this.page = this.$route.query.page || 1;
+      
+      this.fetchList(this.buildQuery());
+    }
   },
 
   methods: {
-    submit: function(){
+    fetchList(query){
       this.loading = true;
       var vm = this;
-      var params = [];
-      if (this.name) params.push('names='+this.name);
-      if (this.nodes) params.push('nodes='+this.nodes);
-      if (this.begin) params.push('begin='+this.begin);
-      if (this.end) params.push('end='+this.end);
-      this.$rest.GET('logs?'+params.join('&'))
-        .onsucceed(200, (resp)=>{vm.list = resp})
+      this.$rest.GET('/logs?'+query)
+        .onsucceed(200, (resp)=>{
+          vm.list = resp.list;
+          vm.total = resp.total;
+        })
         .onfailed((resp)=>{console.log(resp)})
         .onend(()=>{vm.loading=false})
         .do();
     },
 
+    buildQuery(){
+      var params = [];
+      if (this.names) params.push('names='+this.names);
+      if (this.nodes) params.push('nodes='+this.nodes);
+      if (this.begin) params.push('begin='+this.begin);
+      if (this.end) params.push('end='+this.end);
+      if (this.page == 0) this.page = 1;
+      params.push('page='+this.page);
+      return params.join('&');
+    },
+
+    submit: function(){
+      this.$router.push('/log?'+this.buildQuery());
+    },
+
     durationAttention: function(beginTime, endTime){
       var d = new Date(endTime) - new Date(beginTime);
       return d > 3600000*6;
@@ -134,10 +164,13 @@ export default {
 
     // i > 0
     _formatNumber: function(i, len){
-      var n = Math.ceil(Math.log10(i+1));
+      var n = i == 0 ? 1 : Math.ceil(Math.log10(i+1));
       if (n >= len) return i.toString();
       return '0'.repeat(len-n) + i.toString(); 
     }
+  },
+  components: {
+    Pager
   }
 }
 </script>

web/ui/src/components/basic/Pager.vue

@@ -1,9 +1,16 @@
 <template>
-  <div style="text-align: center;">
+  <div style="text-align: center; margin-bottom: 1em;">
     <div class="ui icon buttons">
-      <router-link :to="pageURL(startPage-1)" class="ui button" :class="{disabled: startPage<=1}"><i class="angle left icon"></i></router-link>
-      <router-link :to="pageURL(startPage + n - 1)" v-for="n in pageBtnNum" class="ui button" :class="{blue: startPage+n-1 == _current}">{{startPage + n-1}}</router-link>
-      <router-link :to="pageURL(startPage+length)" class="ui button" :class="{disabled: startPage+length>total}"><i class="angle right icon"></i></router-link>
+      <router-link :to="pageURL(_startPage-1)" class="ui button" :class="{disabled: _startPage<=1}"><i class="angle left icon"></i></router-link>
+      <router-link :to="pageURL(_startPage + n - 1)" v-for="n in _pageBtnNum" class="ui button" :class="{blue: _startPage+n-1 == _current}">{{_startPage + n-1}}</router-link>
+      <a class="ui button disabled">共 {{_current}}/{{total}} 页</a>
+      <router-link :to="pageURL(_startPage+length)" class="ui button" :class="{disabled: _startPage+length>total}"><i class="angle right icon"></i></router-link>
+    </div>
+    <div class="ui action input">
+      <input type="text" ref="gopage" style="width: 70px;" placeholder="跳转">
+      <button class="ui icon button" v-on:click="go">
+        <i class="arrow right icon"></i>
+      </button>
     </div>
   </div>
 </template>
@@ -11,48 +18,48 @@
 <script>
 export default {
   name: 'pager',
-  props: ['total', 'length', 'pageVar'],
+  props: {
+    total: {type: Number, default: 1, required: true},
+    length: {type: Number, default: 5}
+  },
   data: function(){
     return {
       _pagevar: '',
       _current: 1,
+      _startPage: 1,
+      _pageBtnNUm: 5
     }
   },
+
   created: function(){
     this._pagevar = this.pageVar || 'page';
     this._current = this.$route.query[this._pagevar] || 1;
-  },
-
-  mounted: function(){
-    console.log('mounted');
+    this._startPage = Math.floor((this._current-1)/this.length) * this.length + 1;
+    this._pageBtnNum = this.total - this._startPage - this.length <= 0 ? this.total - this._startPage + 1 : this.length;
   },
 
   methods: {
     pageURL: function(page){
       return this.url + this._pagevar + '=' + page;
+    },
+
+    go: function(){
+      var page = +this.$refs.gopage.value;
+      if (page < 1 || page > this.total) return;
+      this.$router.push(this.pageURL(page));
     }
   },
 
   watch: {
     '$route': function(){
       this._current = this.$route.query[this._pagevar] || 1;
+      this._startPage = Math.floor((this._current-1)/this.length) * this.length + 1;
+      this._pageBtnNum = this.total - this._startPage - this.length <= 0 ? this.total - this._startPage + 1 : this.length;
     }
   },
 
   computed: {
-    pageBtnNum: function(){
-      console.log('pageBtnNum');
-      var remainingPage = this.total - this.startPage;
-      return remainingPage <= this.length ? this.total - this.startPage + 1 : this.length;
-    },
-
-    startPage: function(){
-      console.log('startPage');
-      return Math.floor((this._current-1)/this.length) * this.length+1;
-    },
-
     url: function(){
-      console.log('url');
       var query = [];
       for (var  k in this.$route.query) {
         if (this._pagevar === k) continue;

web/ui/src/main.js

@@ -35,7 +35,7 @@ var routes = [
   {path: '/job', component: Job},
   {path: '/job/create', component: JobEdit},
   {path: '/job/edit/:group/:id', component: JobEdit},
-  {path: '/nodes', component: Node}
+  {path: '/node', component: Node}
 ];
 
 var router = new VueRouter({