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>