1<template> 2 <v-container> 3 <v-flex> 4<v-layout row wrap> 5 <v-autocomplete label="Test:" :items="tests_names" v-model="test_name" menu-props="auto" clearable placeholder="Display only results from a specific test" /> 6 <v-autocomplete label="Branch:" :items="gitrefs" v-model="gitref" menu-props="auto" clearable placeholder="Display only results from a specific branch" /> 7 <v-flex sm4><v-switch label="Plot all tests" v-model="plot_all" /></v-flex> 8</v-layout> 9<v-layout row wrap> 10 <v-flex sm4> 11 <v-menu 12 ref="menu_begin" 13 lazy 14 :close-on-content-click="false" 15 v-model="menu_begin" 16 transition="scale-transition" 17 offset-y 18 full-width 19 :nudge-right="40" 20 min-width="290px" 21 :return-value.sync="date_begin" 22 > 23 <v-text-field 24 slot="activator" 25 label="Start date" 26 v-model="date_begin" 27 prepend-icon="event" 28 readonly 29 ></v-text-field> 30 <v-date-picker v-model="date_begin" no-title scrollable> 31 <v-spacer></v-spacer> 32 <v-btn flat color="primary" @click="menu_begin = false">Cancel</v-btn> 33 <v-btn flat color="primary" @click="$refs.menu_begin.save(date_begin)">OK</v-btn> 34 </v-date-picker> 35 </v-menu> 36 </v-flex> 37 38 <v-flex sm4> 39 <v-menu 40 ref="menu_end" 41 lazy 42 :close-on-content-click="false" 43 v-model="menu_end" 44 transition="scale-transition" 45 offset-y 46 full-width 47 :nudge-right="40" 48 min-width="290px" 49 :return-value.sync="date_end" 50 > 51 <v-text-field 52 slot="activator" 53 label="End date" 54 v-model="date_end" 55 prepend-icon="event" 56 readonly 57 ></v-text-field> 58 <v-date-picker v-model="date_end" no-title scrollable> 59 <v-spacer></v-spacer> 60 <v-btn flat color="primary" @click="menu_end = false">Cancel</v-btn> 61 <v-btn flat color="primary" @click="$refs.menu_end.save(date_end)">OK</v-btn> 62 </v-date-picker> 63 </v-menu> 64 </v-flex> 65 66</v-layout> 67 </v-flex> 68 <line-chart :data="chartdata"></line-chart> 69 <v-data-table v-bind:pagination.sync="pagination" :headers="headers" :items="filtered_items" :loading="loading" class="elevation-1" :rows-per-page-items='[10,25,50,{"text":"All","value":-1}]'> 70 <template slot="items" slot-scope="props"> 71 <td> 72 {{ props.item.meta.ts | formatDate }} 73 </td> 74 <td> 75 {{ props.item.meta.author }} 76 </td> 77 <td> 78 {{ props.item.commit_id | truncate(16) }} 79 </td> 80 <td> 81 {{ props.item.meta.gitref | truncate(32) }} 82 </td> 83 <td> 84 {{ props.item.meta.message | truncate(100) }} 85 </td> 86 <td> 87 {{ props.item.perf | truncateNumber }} 88 </td> 89 </template> 90 </v-data-table> 91 </v-container> 92</template> 93<script> 94import axios from "axios"; 95export default { 96 props: ["loading", "items", "tests_names", "gitrefs"], 97 computed: { 98 filtered_items: function() { 99 let items = this.items; 100 this.gitref && 101 (items = items.filter(item => item.meta.gitref === this.gitref)); 102 let ts_begin = 0, 103 ts_end = Number.MAX_SAFE_INTEGER; 104 this.date_begin && (ts_begin = new Date(this.date_begin).getTime()); 105 this.date_end && (ts_end = new Date(this.date_end).getTime()); 106 if (ts_begin > 0 && ts_end > 0 && ts_begin < ts_end) { 107 items = items.filter( 108 item => item.meta.ts >= ts_begin && item.meta.ts <= ts_end 109 ); 110 } 111 if (this.test_name) { 112 items = items.map(item => { 113 let perf = 0.0; 114 let result = item.results.find( 115 result => result[0] === this.test_name 116 ); 117 if (result) { 118 result = result[1]; 119 perf = result[1][1].mean / result[0][1].mean; 120 } 121 item.perf = perf; 122 return item; 123 }); 124 } 125 return items; 126 }, 127 chartdata: function() { 128 if (this.plot_all) { 129 let chartdata = []; 130 for (let i = 0, j = this.tests_names.length; i < j; i++) { 131 chartdata.push({ name: this.tests_names[i], data: {} }); 132 } 133 for (let i = 0, j = this.tests_names.length; i < j; i++) { 134 let test_name = this.tests_names[i]; 135 this.filtered_items.forEach(function(item) { 136 let perf = 0.0; 137 let result = item.results.find(result => result[0] === test_name); 138 if (result) { 139 result = result[1]; 140 perf = result[1][1].mean / result[0][1].mean; 141 } 142 chartdata[i].data[new Date(item.meta.ts)] = perf; 143 }); 144 } 145 return chartdata; 146 } else { 147 let chartdata = {}; 148 this.filtered_items.forEach(function(item) { 149 chartdata[new Date(item.meta.ts)] = item.perf; 150 }); 151 return chartdata; 152 } 153 } 154 }, 155 data() { 156 return { 157 pagination: { sortBy: "meta.ts", descending: true }, 158 gitref: null, 159 branch: null, 160 test_name: null, 161 plot_all: false, 162 menu_begin: false, 163 date_begin: null, 164 menu_end: false, 165 date_end: null, 166 headers: [ 167 { text: "Date", align: "left", sortable: true, value: "meta.ts" }, 168 { text: "Author", align: "left", sortable: true, value: "meta.author" }, 169 { 170 text: "Commit", 171 align: "left", 172 sortable: true, 173 value: "commit_id" 174 }, 175 { 176 text: "Branch", 177 align: "left", 178 sortable: true, 179 value: "meta.gitref" 180 }, 181 { 182 text: "Message", 183 align: "left", 184 sortable: true, 185 value: "meta.message" 186 }, 187 { 188 text: "Ratio", 189 align: "left", 190 sortable: true, 191 value: "perf" 192 } 193 ] 194 }; 195 } 196}; 197</script>