[ui] Add visual cues for the job view progress

ui/src/components/LogContainer.vue

@@ -1,9 +1,17 @@
 <template>
-  <code>
-    <p v-for="log in logs" :key="log.created">
-      {{ formattedDate(log) }} [{{ log.module }}] {{ log.msg }}
-    </p>
-  </code>
+  <div class="log-container">
+    <code>
+      <div v-for="(log, index) in logs" :key="log.created" class="d-flex">
+        <div class="log-line-number mr-2">
+          {{ index + 1 }}
+        </div>
+        <div class="log-line-text">[{{ log.module }}] {{ log.msg }}</div>
+      </div>
+    </code>
+    <div v-if="loading" class="loading-container">
+      <div v-for="i in 3" class="loading-dot" :key="i" />
+    </div>
+  </div>
 </template>
 <script>
 import { formatDate } from '@/utils/dates'
@@ -14,6 +22,11 @@ export default {
     logs: {
       type: Array,
       required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   methods: {
@@ -24,17 +37,67 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-code {
-  display: block;
+.log-container {
   background-color: rgb(var(--v-theme-on-surface));
-  color: rgb(var(--v-theme-surface));
-  padding: 1rem;
+  line-height: 1.6em;
   border-radius: 4px;
-  font-size: 0.8rem;
-  white-space: pre-wrap;
 
-  p {
-    padding: 4px;
+  code {
+    display: block;
+    background-color: rgb(var(--v-theme-on-surface));
+    color: rgb(var(--v-theme-surface));
+    padding: 1rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+  }
+
+  .log-line-number {
+    text-align: right;
+    color: rgb(var(--v-theme-surface), 0.5);
+    min-width: 1rem;
+    width: 2ch;
+    flex-grow: 0;
+  }
+
+  .log-line-text {
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+}
+
+.loading-container {
+  padding: 0 0 1rem 1rem;
+
+  .loading-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    border-radius: 50%;
+    animation: loading-animation 1.35s linear infinite;
+    background: rgb(var(--v-theme-surface));
+
+    &:nth-child(2) {
+      animation-delay: 0.45s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.9s;
+    }
+  }
+}
+
+@keyframes loading-animation {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0.1;
   }
 }
 </style>

ui/src/stories/Logcontainer.stories.js

@@ -24,3 +24,17 @@ export const Default = {
     ]
   }
 }
+
+export const Loading = {
+  args: {
+    logs: [
+      {
+        created: 1712929398.9828506,
+        msg: "Fetching latest commits: 'https://github.com/chaoss/grimoirelab.git' git repository",
+        module: 'git',
+        level: 0
+      }
+    ],
+    loading: true
+  }
+}

ui/src/views/Job/DetailView.vue

@@ -9,7 +9,12 @@
       :ended-at="job.finished_at"
       class="mt-4"
     />
-    <log-container v-if="logs?.length > 0" :logs="logs" class="mt-4" />
+    <log-container
+      v-if="logs?.length > 0"
+      :logs="logs"
+      :loading="job.status === 'running'"
+      class="mt-4"
+    />
   </div>
 </template>
 <script>
@@ -19,10 +24,12 @@ import LogContainer from '@/components/LogContainer.vue'
 
 export default {
   components: { JobCard, LogContainer },
+  emits: ['update:task'],
   data() {
     return {
       job: {},
-      logs: []
+      logs: [],
+      pollID: null
     }
   },
   methods: {
@@ -37,11 +44,25 @@ export default {
       if (response.data) {
         this.logs = response.data.logs
       }
+    },
+    async pollJob(taskId, jobId) {
+      clearTimeout(this.pollID)
+      try {
+        await this.fetchJob(taskId, jobId)
+        await this.fetchJobLogs(taskId, jobId)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        if (this.job.status === 'running') {
+          this.pollID = setTimeout(() => this.pollJob(taskId, jobId), 10000)
+        } else {
+          this.$emit('update:task')
+        }
+      }
     }
   },
   mounted() {
-    this.fetchJob(this.$route.params.id, this.$route.params.jobid)
-    this.fetchJobLogs(this.$route.params.id, this.$route.params.jobid)
+    this.pollID = this.pollJob(this.$route.params.id, this.$route.params.jobid)
   }
 }
 </script>

ui/src/views/Task/DetailView.vue

@@ -16,7 +16,7 @@
       :scheduled-date="task.scheduled_at"
       class="mt-4"
     />
-    <router-view :task="task"></router-view>
+    <router-view :task="task" @update:task="fetchTask($route.params.id)"></router-view>
   </v-container>
 </template>
 <script>