First iteration of FE changes for docker reporFirst iteration of FE changes for docker reportt

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -18,9 +18,11 @@ export default {
       isLoadingCodequality: false,
       isLoadingPerformance: false,
       isLoadingSecurity: false,
+      isLoadingDocker: false,
       loadingCodequalityFailed: false,
       loadingPerformanceFailed: false,
       loadingSecurityFailed: false,
+      loadingDockerFailed: false,
     };
   },
   computed: {
@@ -38,6 +40,9 @@ export default {
     shouldRenderSecurityReport() {
       return this.mr.sast;
     },
+    shouldRenderDockerReport() {
+      return this.mr.clair;
+    },
     codequalityText() {
       const { newIssues, resolvedIssues } = this.mr.codeclimateMetrics;
       const text = [];
@@ -116,34 +121,68 @@ export default {
       return 'No security vulnerabilities detected';
     },
 
-    codequalityStatus() {
-      if (this.isLoadingCodequality) {
-        return 'loading';
-      } else if (this.loadingCodequalityFailed) {
-        return 'error';
+    dockerText() {
+      const { vulnerabilities, approved, unapproved } = this.mr.dockerReport;
+      const text = [];
+
+      if (vulnerabilities.length) {
+        text.push(n__(
+          '%d vulnerability.',
+          '%d vulnerabilities.',
+          vulnerabilities.length,
+        ));
       }
-      return 'success';
+
+      if (approved.length) {
+        text.push(n__(
+          '%d of those was approved.',
+          '%d of those were approved.',
+          approved.length,
+        ));
+      }
+
+      if (approved.length > 0 && unapproved.length > 0) {
+        text.push('and');
+      }
+
+      if (unapproved.length) {
+        text.push(n__(
+          '%d of those was unapproved.',
+          '%d of those were unapproved.',
+          unapproved.length,
+        ));
+      }
+
+      return text.join(' ');
+    },
+
+    codequalityStatus() {
+      return this.checkStatus(this.isLoadingCodequality, this.loadingCodequalityFailed);
     },
 
     performanceStatus() {
-      if (this.isLoadingPerformance) {
-        return 'loading';
-      } else if (this.loadingPerformanceFailed) {
-        return 'error';
-      }
-      return 'success';
+      return this.checkStatus(this.isLoadingPerformance, this.loadingPerformanceFailed);
     },
 
     securityStatus() {
-      if (this.isLoadingSecurity) {
+      return this.checkStatus(this.isLoadingSecurity, this.loadingSecurityFailed);
+    },
+
+    dockerStatus() {
+      return this.checkStatus(this.isLoadingDocker, this.loadingDockerFailed);
+    },
+  },
+  methods: {
+    checkStatus(loading, error) {
+      if (loading) {
         return 'loading';
-      } else if (this.loadingSecurityFailed) {
+      } else if (error) {
         return 'error';
       }
+
       return 'success';
     },
-  },
-  methods: {
+
     fetchCodeQuality() {
       const { head_path, head_blob_path, base_path, base_blob_path } = this.mr.codeclimate;
 
@@ -196,6 +235,21 @@ export default {
           this.loadingSecurityFailed = true;
         });
     },
+
+    fetchDockerReport() {
+      const { path } = this.mr.clair;
+      this.isLoadingDocker = true;
+
+      this.service.fetchReport(path)
+        .then((data) => {
+          this.mr.setDockerReport(data);
+          this.isLoadingDocker = false;
+        })
+        .catch(() => {
+          this.isLoadingDocker = false;
+          this.loadingDockerFailed = true;
+        });
+    },
   },
   created() {
     if (this.shouldRenderCodeQuality) {
@@ -209,6 +263,10 @@ export default {
     if (this.shouldRenderSecurityReport) {
       this.fetchSecurity();
     }
+
+    if (this.shouldRenderDockerReport) {
+      this.fetchDockerReport();
+    }
   },
   template: `
     <div class="mr-state-widget prepend-top-default">
@@ -260,6 +318,17 @@ export default {
         :success-text="securityText"
         :unresolvedIssues="mr.securityReport"
         />
+      <collapsible-section
+        class="js-docker-widget"
+        v-if="shouldRenderDockerReport"
+        type="codequality"
+        :status="dockerStatus"
+        loading-text="Loading clair report"
+        error-text="Failed to load clair report"
+        :success-text="dockerText"
+        :unresolvedIssues="mr.dockerReport.unapproved"
+        :resolvedIssues="mr.dockerReport.approved"
+        />
       <div class="mr-widget-section">
         <component
           :is="componentName"

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -6,6 +6,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.initCodeclimate(data);
     this.initPerformanceReport(data);
     this.initSecurityReport(data);
+    this.initDockerReport(data);
   }
 
   setData(data) {
@@ -71,10 +72,26 @@ export default class MergeRequestStore extends CEMergeRequestStore {
     this.securityReport = [];
   }
 
+  initDockerReport(data) {
+    this.clair = data.clair;
+    this.dockerReport = {
+      approved: [],
+      unapproved: [],
+      vulnerabilities: [],
+    };
+  }
+
   setSecurityReport(issues, path) {
     this.securityReport = MergeRequestStore.parseIssues(issues, path);
   }
 
+  setDockerReport(data) {
+    // Set data - TODO parse the data
+    this.dockerReport.approved = data.approved || [];
+    this.dockerReport.unapproved = data.unapproved || [];
+    this.dockerReport.vulnerabilities = data.vulnerabilities || [];
+  }
+
   compareCodeclimateMetrics(headIssues, baseIssues, headBlobPath, baseBlobPath) {
     const parsedHeadIssues = MergeRequestStore.parseIssues(headIssues, headBlobPath);
     const parsedBaseIssues = MergeRequestStore.parseIssues(baseIssues, baseBlobPath);