completed the UI and docker-compose.yaml basic app

MalwareMultiScan.Ui/pages/_id/index.vue

@@ -1,24 +1,37 @@
 <template>
-  <div class="d-flex results align-content-stretch flex-wrap">
-    <scan-result-component v-for="(result, id) in data.results"
-                           v-bind:key="id" v-bind:id="id" v-bind:result="result" />
-  </div>
+  <b-table :fields="fields" :items="flattenedData" class="m-0" striped>
+    <template #cell(completed)="data">
+      <div class="h5 m-0">
+        <b-icon-check-circle-fill v-if="data.item.succeeded === true" variant="success"/>
+        <b-icon-exclamation-circle-fill v-if="data.item.succeeded === false" variant="danger"/>
+
+        <b-icon-bug-fill v-if="!data.item.completed" animation="spin-pulse"
+                         class="rounded-circle bg-primary text-white" scale="0.7"/>
+      </div>
+    </template>
+
+    <template #cell(threats)="data">
+      <div class="text-success" v-if="data.item.succeeded && !data.item.threats.length">No threats have been detected</div>
+      <div class="text-danger" v-if="data.item.succeeded === false">Scanning failed to complete due to the error or timeout</div>
+      <div v-if="!data.item.completed">Scanning is in progress</div>
+
+      <ul v-if="data.item.completed && data.item.threats.length" class="list-inline m-0">
+        <li class="text-danger" v-for="threat in data.item.threats" v-bind:key="threat">{{ threat }}</li>
+      </ul>
+    </template>
+  </b-table>
 </template>
 
-<style>
-  .results {
-    margin: -0.5rem;
-  }
-</style>
 
 <script lang="ts">
 import Vue from 'vue';
 
 import ScanResult from '~/models/scan-result';
+import ScanResultEntryFlattened from '~/models/scan-result-entry-flattened';
 
 export default Vue.extend({
   async asyncData({params, $axios}) {
-    return { data: await $axios.$get<ScanResult>(`results/${params.id}`) }
+    return {data: await $axios.$get<ScanResult>(`results/${params.id}`)}
   },
 
   created() {
@@ -35,10 +48,25 @@ export default Vue.extend({
     }
   },
 
+  computed: {
+    flattenedData(): ScanResultEntryFlattened[] {
+      return Object
+          .entries((this.data as ScanResult).results)
+          .map(([k, v]) => new ScanResultEntryFlattened(k, v.completed, v.succeeded, v.threats))
+    }
+  },
+
   data() {
     return {
-      data: null as ScanResult | null,
-      timer: 0 as any
+      data: {} as ScanResult,
+
+      fields: [
+        {key: 'id', label: 'Backend'},
+        {key: 'completed', label: 'Completed'},
+        {key: 'threats', label: 'Threats'},
+      ],
+
+      timer: 0 as any // otherwise it conflicts with SSR / Type Checking
     }
   }
 });