runs: rework runs list item presentation

* Add duration and finish time
* Move type (branch/tag/PR) to the left
* Move commit message below run name
* Add run number

src/components/runs.vue

@@ -16,59 +16,74 @@
           :class="runResultClass(run)"
         >
           <div class="pl-4 flex items-center border border-l-0 rounded-r">
+            <!-- TODO(sgotti) add gradient overflow -->
+            <div v-if="projectref" class="w-2/12">
+              <div
+                v-if="run.annotations.ref_type == 'branch'"
+                class="whitespace-no-wrap overflow-x-hidden"
+              >
+                <i class="mdi mdi-source-branch mr-1"></i>
+                <span>{{run.annotations.branch}}</span>
+              </div>
+              <div
+                v-else-if="run.annotations.ref_type == 'tag'"
+                class="whitespace-no-wrap overflow-x-hidden"
+              >
+                <i class="mdi mdi-tag mr-1"></i>
+                <span>{{run.annotations.tag}}</span>
+              </div>
+              <div
+                v-else-if="run.annotations.ref_type == 'pull_request'"
+                class="whitespace-no-wrap overflow-x-hidden"
+              >
+                <i class="mdi mdi-source-pull mr-1"></i>
+                <span>PR #{{run.annotations.pull_request_id}}</span>
+              </div>
+            </div>
+            <div v-else class="w-2/12">
+              <i class="mdi mdi-run-fast mr-1"></i>
+              <span>direct run</span>
+            </div>
             <router-link
               v-if="projectref"
-              class="w-1/3 font-bold"
+              class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
               :to="projectRunLink(ownertype, ownername, projectref, run.id)"
             >
-              <span class>{{run.name}}</span>
+              <span class="font-bold">{{run.name}}</span>
+              <div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
             </router-link>
-            <router-link v-else class="w-1/3 font-bold" :to="userDirectRunLink(ownername, run.id)">
+            <router-link
-              <span>{{run.name}}</span>
+              v-else
+              class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
+              :to="userDirectRunLink(ownername, run.id)"
+            >
+              <span class="font-bold">{{run.name}}</span>
+              <div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
             </router-link>
-            <div class="w-1/3">{{run.annotations.message}}</div>
             <span
               v-if="waitingApproval(run)"
-              class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
+              class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
             >Waiting Approval</span>
-            <span v-if="!waitingApproval(run)" class="w-1/5"></span>
             <span
               v-if="stillRunning(run)"
-              class="w-1/5 inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold mr-2"
+              class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
             >Still running</span>
-            <span v-if="!stillRunning(run)" class="w-1/5"></span>
             <div class="w-32">
+              <span>#{{run.counter}}</span>
               <a :href="run.annotations.commit_link" class="block" target="_blank">
-                <i class="mdi mdi-source-commit mdi-rotate-90"></i>
+                <i class="mdi mdi-source-commit mdi-rotate-90 mr-1"></i>
                 <span>{{run.annotations.commit_sha.substring(0,8)}}</span>
               </a>
-              <a
+            </div>
-                v-if="run.annotations.ref_type == 'branch'"
+            <div class="w-32">
-                :href="run.annotations.branch_link"
+              <div>
-                class="block whitespace-no-wrap overflow-x-hidden"
+                <i class="mdi mdi-clock-fast mr-1"></i>
-                target="_blank"
+                <span class="text-right">{{ duration(run) }}</span>
-              >
+              </div>
-                <i class="mdi mdi-source-branch"></i>
+              <div :title="endTime(run)">
-                <span>{{run.annotations.branch}}</span>
+                <i class="mdi mdi-calendar-month-outline mr-1"></i>
-              </a>
+                <span class="text-right">{{ endTimeHuman(run) }}</span>
-              <a
+              </div>
-                v-else-if="run.annotations.ref_type == 'tag'"
-                :href="run.annotations.tag_link"
-                class="block"
-                target="_blank"
-              >
-                <i class="mdi mdi-tag"></i>
-                <span>{{run.annotations.tag}}</span>
-              </a>
-              <a
-                v-else-if="run.annotations.ref_type == 'pull_request'"
-                :href="run.annotations.pull_request_link"
-                class="block"
-                target="_blank"
-              >
-                <i class="mdi mdi-source-pull"></i>
-                <span>PR #{{run.annotations.pull_request_id}}</span>
-              </a>
             </div>
           </div>
         </li>
@@ -89,6 +104,10 @@
 import { fetchUser, fetchProject, fetchRuns } from "@/util/data.js";
 import { userDirectRunLink, projectRunLink } from "@/util/link.js";
 import { runResultClass } from "@/util/run.js";
+import * as moment from "moment";
+import momentDurationFormatSetup from "moment-duration-format";
+
+momentDurationFormatSetup(moment);
 
 export default {
   components: {},
@@ -101,6 +120,7 @@ export default {
   },
   data() {
     return {
+      now: moment(),
       fetchRunsError: null,
       runs: [],
       wantedRunsNumber: 25,
@@ -212,9 +232,43 @@ export default {
       this.polling = setInterval(() => {
         this.fetchRuns();
       }, 2000);
+    },
+    duration(run) {
+      let formatString = "h:mm:ss[s]";
+      let start = moment(run.start_time);
+      let end = moment(run.end_time);
+
+      if (run.start_time === null) {
+        return moment.duration(0).format(formatString);
+      }
+      if (run.end_time === null) {
+        return moment.duration(this.now.diff(start)).format(formatString);
+      }
+      return moment.duration(end.diff(start)).format(formatString);
+    },
+    endTime(run) {
+      let formatString = "lll";
+      let end = moment(run.end_time);
+
+      if (run.end_time === null) {
+        return "";
+      }
+      return "Finished " + end.format(formatString);
+    },
+    endTimeHuman(run) {
+      let end = moment(run.end_time);
+
+      if (run.end_time === null) {
+        return "";
+      }
+      return end.fromNow();
     }
   },
   created: function() {
+    window.setInterval(() => {
+      this.now = moment();
+    }, 500);
+
     this.update();
   },
   beforeDestroy() {