feat(fe): add component TaskLink

Author: fiftin

web2/package-lock.json

@@ -372,20 +372,14 @@
   <v-app v-else></v-app>
 </template>
 <style lang="scss">
+
 .v-data-table a {
   text-decoration-line: none;
   &:hover {
     text-decoration-line: underline;
   }
 }
 
-.breadcrumbs {
-
-}
-
-.breadcrumbs__item {
-}
-
 .breadcrumbs__item--link {
   text-decoration-line: none;
   &:hover {

web2/src/App.vue

@@ -0,0 +1,68 @@
+<template>
+  <span>
+    <v-icon
+        v-if="status != null"
+        small
+        class="mr-1"
+        :color="status === 'success' ? 'success' : 'red'"
+    >mdi-{{ status === 'success' ? 'check' : 'close' }}
+    </v-icon>
+    <span v-if="disabled">{{ label }}</span>
+    <v-tooltip
+        v-else
+        color="black"
+        right
+        max-width="350"
+        transition="fade-transition"
+        :disabled="!tooltip"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <a
+            v-bind="attrs"
+            v-on="on"
+            @click="showTaskLog()"
+            :class="{'task-link-with-tooltip': tooltip}"
+        >{{ label }}</a>
+      </template>
+      <span>{{ tooltip }}</span>
+    </v-tooltip>
+  </span>
+</template>
+<style lang="scss">
+
+@import '~vuetify/src/styles/settings/_colors.scss';
+
+.task-link-with-tooltip {
+  text-decoration: underline !important;
+  text-decoration-style: dashed !important;
+  text-decoration-color: gray !important;
+}
+
+a.task-link-with-tooltip {
+  &:hover {
+    text-decoration-style: solid !important;
+    text-decoration-color: map-deep-get($blue, 'darken-2') !important;
+  }
+}
+
+</style>
+<script>
+import EventBus from '@/event-bus';
+
+export default {
+  props: {
+    label: String,
+    tooltip: String,
+    taskId: Number,
+    disabled: Boolean,
+    status: String,
+  },
+  methods: {
+    showTaskLog() {
+      EventBus.$emit('i-show-task', {
+        taskId: this.taskId,
+      });
+    },
+  },
+};
+</script>

web2/src/components/TaskLink.vue

@@ -28,20 +28,29 @@
           '/templates/' + item.template_id"
           >{{ item.tpl_alias }}</a>
           <v-icon small class="ml-1 mr-1">mdi-arrow-right</v-icon>
-          <a @click="showTaskLog(item.id)">#{{ item.id }}</a>
-          <div class="ml-2" v-if="item.version != null">
-            <v-icon
-                v-if="item.status === 'success'"
-                small
-                color="success"
-            >mdi-check</v-icon>
-            <v-icon
-                v-else
-                small
-                color="red"
-            >mdi-close</v-icon>
-            <span class="ml-1">{{ item.version }}</span>
-          </div>
+          <TaskLink
+              :task-id="item.id"
+              :tooltip="item.message"
+              :label="'#' + item.id"
+          />
+          <TaskLink
+              :disabled="item.tpl_type === 'build'"
+              class="ml-2"
+              v-if="item.tpl_type !== ''"
+              :status="item.status"
+
+              :task-id="item.tpl_type === 'build'
+              ? item.id
+              : item.build_task.id"
+
+              :label="item.tpl_type === 'build'
+              ? item.version
+              : item.build_task.version"
+
+              :tooltip="item.tpl_type === 'build'
+              ? item.message
+              : item.build_task.message"
+          />
         </div>
       </template>
 
@@ -64,6 +73,7 @@
 import ItemListPageBase from '@/components/ItemListPageBase';
 import EventBus from '@/event-bus';
 import TaskStatus from '@/components/TaskStatus.vue';
+import TaskLink from '@/components/TaskLink.vue';
 import socket from '@/socket';
 import { TEMPLATE_TYPE_ICONS } from '@/lib/constants';
 
@@ -74,7 +84,7 @@ export default {
     return { TEMPLATE_TYPE_ICONS };
   },
 
-  components: { TaskStatus },
+  components: { TaskStatus, TaskLink },
 
   watch: {
     async projectId() {