From 2207165b68a9da78fc1e42567143f99d6f6ac56b Mon Sep 17 00:00:00 2001
From: Carsten Hoffmann <carsten.c.hoffmann@deutschebahn.com>
Date: Sun, 10 Oct 2021 17:54:13 +0200
Subject: [PATCH] feat: adds a query parameter to load a file from an url on
 startup

---
 README.adoc                         |  6 ++---
 src/components/DataInput.vue        | 30 +++++++++++++++++-----
 src/components/ReportUrlFetcher.vue | 40 +++++++++++++++++++----------
 src/router/index.ts                 |  1 +
 src/views/Home.vue                  |  8 ++++--
 5 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/README.adoc b/README.adoc
index 22888ca3..0aec4972 100644
--- a/README.adoc
+++ b/README.adoc
@@ -23,13 +23,13 @@ The data never leaves your browser, because all processing is handled inside you
 
 If you are using a GitLab Job to generate the Trivy report, you can supply a direct URL to the json file. The app will fetch the report and display the results without the hassle to first download the file. You might need to provide a token for authentication, you can do that by clicking the shield symbol next to the URL field. Make sure to create a personal access token with the scope `read_api`. The token will be persisted in the local storage, so that you can reuse it the next time you want to load a report from the same GitLab instance.
 
-It is a good idea to print the URL of the artifact at the end of the job log, so that it can be grabbed easily. If the name of the report is `trivy-results.json`, the url schema would look like this:
+You can pass a query parameter `url` to the app, and it will load a file from this url on startup. It is a good idea to print the URL of the vulnerability explorer at the end of the job log, so that the user can jump directly to the vulnerability report. If the name of the report is `trivy-results.json`, the url schema would look like this:
 
 ----
-https://$CI_SERVER_URL/api/v4/projects/$CI_PROJECT_ID/jobs/$CI_JOB_ID/artifacts/trivy-results.json
+https://dbsystel.github.io/trivy-vulnerability-explorer?url=https://$CI_SERVER_URL/api/v4/projects/$CI_PROJECT_ID/jobs/$CI_JOB_ID/artifacts/trivy-results.json
 ----
 
-NOTE: While the feature was built having GitLab in mind, it should work for every artifact storage, where the json can be downloaded with a GET http request that needs at most a single HTTP header for authentication.
+NOTE: While the feature was built having GitLab in mind, it should work for every artifact storage, where the json can be downloaded with a GET HTTP request that needs at most a single HTTP header for authentication.
 
 == Contribute
 
diff --git a/src/components/DataInput.vue b/src/components/DataInput.vue
index 8cfe8104..2f8bb3cb 100644
--- a/src/components/DataInput.vue
+++ b/src/components/DataInput.vue
@@ -1,13 +1,13 @@
 <template>
   <v-toolbar class="mt-5">
     <v-btn-toggle v-model="reportSource" mandatory>
-      <v-btn> File</v-btn>
-      <v-btn> URL</v-btn>
+      <v-btn :value="ReportSource.File"> File</v-btn>
+      <v-btn :value="ReportSource.Url"> URL</v-btn>
     </v-btn-toggle>
 
     <VueFileAgent
       ref="fileAgent"
-      v-if="reportSource === 0"
+      v-if="reportSource === ReportSource.File"
       class="upload-block ma-2"
       :multiple="false"
       :deletable="true"
@@ -21,7 +21,11 @@
       }"
     />
 
-    <ReportUrlFetcher :onNewReport="onNewReport" v-if="reportSource === 1" />
+    <ReportUrlFetcher
+      :onNewReport="onNewReport"
+      v-if="reportSource === ReportSource.Url"
+      :presetUrl="this.presetUrl"
+    />
 
     <v-autocomplete
       v-model="selectedTarget"
@@ -38,7 +42,7 @@
 <script lang="ts">
 import Vue from "vue"
 import VueFileAgent, { FileRecord } from "vue-file-agent"
-import { Component, Ref, Watch } from "vue-property-decorator"
+import { Component, Prop, Ref, Watch } from "vue-property-decorator"
 import {
   Version1OrVersion2,
   Vulnerability,
@@ -47,18 +51,30 @@ import {
 } from "@/types"
 import ReportUrlFetcher from "@/components/ReportUrlFetcher.vue"
 
+enum ReportSource {
+  File,
+  Url,
+}
+
 Vue.use(VueFileAgent)
 @Component({
   components: { ReportUrlFetcher },
 })
 export default class DataInput extends Vue {
   private selectedTarget = ""
-  private reportSource = 0
-
+  private reportSource = ReportSource.File
+  private ReportSource = ReportSource
+  @Prop() private presetUrl?: string
   @Ref() readonly fileAgent!: {
     deleteFileRecord: (fileRecordOrRaw: FileRecord) => void
   }
 
+  mounted(): void {
+    if (this.presetUrl) {
+      this.reportSource = ReportSource.Url
+    }
+  }
+
   get selectedVulnerabilities(): Vulnerability[] {
     if (this.selectedTarget) {
       return this.vulnerabilityReport.find(
diff --git a/src/components/ReportUrlFetcher.vue b/src/components/ReportUrlFetcher.vue
index 13582fcc..20a31b84 100644
--- a/src/components/ReportUrlFetcher.vue
+++ b/src/components/ReportUrlFetcher.vue
@@ -63,10 +63,11 @@
       </v-card>
     </v-dialog>
     <v-btn
-      :loading="loading"
-      :disabled="loading || !url"
+      :loading="this.state === 'loading'"
+      :disabled="this.state === 'loading' || !url"
       @click="fetchReportFromUrl"
       class="mx-2"
+      :color="this.state === 'error' ? 'error' : 'primary'"
     >
       Fetch
     </v-btn>
@@ -82,6 +83,7 @@ import { Fragment } from "vue-frag"
 const ReportUrlFetcherProps = Vue.extend({
   props: {
     onNewReport: Function,
+    presetUrl: String,
   },
 })
 Vue.use(VueFileAgent)
@@ -90,12 +92,16 @@ Vue.use(VueFileAgent)
 })
 export default class ReportUrlFetcher extends ReportUrlFetcherProps {
   private url = ""
-  private loading = false
+  private state = "ready"
   private dialog = false
   private headerName = ""
   private headerValue = ""
   mounted(): void {
     this.loadAuthorization()
+    if (this.presetUrl) {
+      this.url = this.presetUrl
+      this.fetchReportFromUrl()
+    }
   }
   public loadAuthorization(): void {
     this.headerName = localStorage.getItem("headerName") || ""
@@ -109,22 +115,28 @@ export default class ReportUrlFetcher extends ReportUrlFetcherProps {
 
   public async fetchReportFromUrl(): Promise<void> {
     if (this.url) {
-      this.loading = true
+      this.state = "loading"
       const headers: Record<string, string> = {}
       if (this.headerName && this.headerValue) {
         headers[this.headerName] = this.headerValue
       }
-      const response = await fetch(this.url, { headers })
-      this.loading = false
-      const contentType = response.headers.get("content-type")
-      if (
-        response.ok &&
-        contentType &&
-        contentType.indexOf("application/json") !== -1
-      ) {
-        const report = await response.json()
-        this.onNewReport(report)
+      try {
+        const response = await fetch(this.url, { headers })
+        this.state = "ready"
+        const contentType = response.headers.get("content-type")
+        if (
+          response.ok &&
+          contentType &&
+          contentType.indexOf("application/json") !== -1
+        ) {
+          const report = await response.json()
+          this.onNewReport(report)
+          return
+        }
+      } catch (ignored) {
+        //no-op
       }
+      this.state = "error"
     }
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 1f0e7bbf..14de152f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,6 +9,7 @@ const routes: Array<RouteConfig> = [
     path: "/",
     name: "Home",
     component: Home,
+    props: (route) => ({ presetUrl: route.query.url }),
   },
   {
     path: "/about",
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d9879283..d5d65940 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,7 +20,10 @@
           </v-card>
         </v-col>
       </v-row>
-      <DataInput @inputChanged="reactivelySetNewVulnerabilities" />
+      <DataInput
+        @inputChanged="reactivelySetNewVulnerabilities"
+        :presetUrl="this.presetUrl"
+      />
       <DataTable :selectedVulnerabilities="selectedVulnerabilities"></DataTable>
     </v-container>
   </div>
@@ -31,7 +34,7 @@ import Vue from "vue"
 import DataInput from "@/components/DataInput.vue" // @ is an alias to /src
 import { Vulnerability } from "@/types"
 import DataTable from "@/components/DataTable.vue"
-import { Component } from "vue-property-decorator"
+import { Component, Prop } from "vue-property-decorator"
 
 @Component({
   components: {
@@ -40,6 +43,7 @@ import { Component } from "vue-property-decorator"
   },
 })
 export default class Home extends Vue {
+  @Prop() private presetUrl?: string
   private selectedVulnerabilities: Vulnerability[] = []
 
   private reactivelySetNewVulnerabilities(newVulnerabilities: Vulnerability[]) {