Skip to content

Commit

Permalink
fix: bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
d-koppenhagen committed Dec 19, 2024
1 parent 31d8b0a commit 774a4de
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 431 deletions.
319 changes: 3 additions & 316 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 1 addition & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,10 @@
},
"dependencies": {
"@mdi/font": "7.4.47",
"@uppy/core": "4.3.1",
"@uppy/dashboard": "4.1.3",
"@uppy/drag-drop": "4.0.5",
"@uppy/file-input": "4.0.4",
"@uppy/progress-bar": "4.1.0",
"@uppy/vue": "2.0.3",
"@vueuse/core": "12.0.0",
"core-js": "3.39.0",
"roboto-fontface": "0.10.0",
"v-clipboard": "3.0.0-next.0",
"v-clipboard": "^3.0.0-next.0",
"vue": "3.5.13",
"vuetify": "3.7.6"
},
Expand Down
5 changes: 2 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
</div>

<v-app-bar app color="primary" dark>
<div class="d-flex align-center">Trivy Vulnerability Explorer</div>
<v-spacer></v-spacer>
<v-app-bar-title>Trivy Vulnerability Explorer</v-app-bar-title>
</v-app-bar>

<v-main>
Expand All @@ -20,7 +19,7 @@
</template>

<script lang="ts" setup>
//
//
</script>

<style scoped>
Expand Down
1 change: 1 addition & 0 deletions src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
DataInput: typeof import('./components/DataInput.vue')['default']
DataTable: typeof import('./components/DataTable.vue')['default']
ReportUrlFetcher: typeof import('./components/ReportUrlFetcher.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
Expand Down
44 changes: 24 additions & 20 deletions src/components/DataInput.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,26 @@
<template>
<v-toolbar class="mt-5">
<v-btn-toggle v-model="reportSource" mandatory>
<v-btn :value="ReportSource.File"> File</v-btn>
<v-btn :value="ReportSource.Url"> URL</v-btn>
<v-toolbar class="mt-3">
<v-btn-toggle
v-model="reportSource"
mandatory
color="primary"
variant="outlined"
class="mx-3"
>
<v-btn :value="ReportSource.File">File</v-btn>
<v-btn :value="ReportSource.Url">URL</v-btn>
</v-btn-toggle>

<Dashboard
<v-file-upload
v-if="reportSource === ReportSource.File"
:uppy="uppy"
:props="{ proudlyDisplayPoweredByUppy: false }"
density="compact"
browse-text="Local Filesystem"
divider-text="or choose locally"
icon="mdi-upload"
title="Drag and Drop Here"
file-type="application/json"
:multiple="false"
@update:model-value="handleFileUpload($event)"
/>

<ReportUrlFetcher
Expand All @@ -30,14 +42,12 @@
: 'Select Target'
"
hide-details
></v-autocomplete>
/>
</v-toolbar>
</template>

<script setup lang="ts">
import { ref, computed, watch, defineProps, defineEmits, onMounted } from "vue"
import { Dashboard } from "@uppy/vue"
import Uppy from "@uppy/core"
import type {
Version1OrVersion2,
VulnerabilityReportFile,
Expand All @@ -57,23 +67,17 @@ const selectedTarget = ref("")
const reportSource = ref(ReportSource.File)
const vulnerabilityReport = ref<VulnerabilityReportTarget[]>([])
const uppy = new Uppy({
restrictions: {
maxNumberOfFiles: 1,
allowedFileTypes: ["application/json"],
},
})
uppy.on("file-added", (file) => {
const handleFileUpload = (files: File[] | File) => {
const file = Array.isArray(files) ? files[0] : files
const reader = new FileReader()
const temp = reader.readAsText(file)
reader.onload = (e) => {
const vulnerabilityTargets = parseFile(e)
if (vulnerabilityTargets) {
handleNewReport(vulnerabilityTargets)
}
}
reader.readAsText(file.data)
})
}
onMounted(() => {
if (props.presetUrl) {
Expand Down
139 changes: 63 additions & 76 deletions src/components/ReportUrlFetcher.vue
Original file line number Diff line number Diff line change
@@ -1,81 +1,68 @@
<template>
<Teleport to="body">
<v-text-field
v-model="url"
label="Url"
class="mx-2"
hide-details
></v-text-field>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="activatorProps">
<v-btn color="primary" icon v-bind="activatorProps">
<v-icon aria-label="Add Authorization Header"
>mdi-shield-lock
</v-icon>
<v-text-field v-model="url" label="Url" hide-details></v-text-field>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ props: activatorProps }">
<v-btn color="primary" icon v-bind="activatorProps">
<v-icon aria-label="Add Authorization Header">mdi-shield-lock </v-icon>
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Authorization</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="headerName"
label="Header Name"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="headerValue"
label="Header Value"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
The data will be stored in the localStorage of your Browser and is
added as a header to the fetch call. If you want to fetch a report
from a
<a
href="https://docs.gitlab.com/ee/api/job_artifacts.html#download-a-single-artifact-file-by-job-id"
target="_blank"
>GitLab Job</a
>
, you need to add the PRIVATE-TOKEN header and set it to a
<a
href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
>personal access token</a
>
with the scope read_api.
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" variant="text" @click="saveAuthorization">
Save&Close
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Authorization</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="headerName"
label="Header Name"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="headerValue"
label="Header Value"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
The data will be stored in the localStorage of your Browser and
is added as a header to the fetch call. If you want to fetch a
report from a
<a
href="https://docs.gitlab.com/ee/api/job_artifacts.html#download-a-single-artifact-file-by-job-id"
target="_blank"
>GitLab Job</a
>
, you need to add the PRIVATE-TOKEN header and set it to a
<a
href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html"
>personal access token</a
>
with the scope read_api.
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
variant="text"
@click="saveAuthorization"
>
Save&Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-btn
:loading="state === 'loading'"
:disabled="state === 'loading' || !url"
@click="fetchReportFromUrl"
class="mx-2"
:color="state === 'error' ? 'error' : 'primary'"
>
Fetch
</v-btn>
</Teleport>
</v-card-actions>
</v-card>
</v-dialog>
<v-btn
:loading="state === 'loading'"
:disabled="state === 'loading' || !url"
@click="fetchReportFromUrl"
class="mx-2"
:color="state === 'error' ? 'error' : 'primary'"
>
Fetch
</v-btn>
</template>

<script setup lang="ts">
Expand Down
3 changes: 0 additions & 3 deletions src/plugins/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import router from "../router"
import vuetify from "./vuetify"
import Clipboard from "v-clipboard"

Check failure on line 11 in src/plugins/index.ts

View workflow job for this annotation

GitHub Actions / build-and-test

Could not find a declaration file for module 'v-clipboard'. '/home/runner/work/trivy-vulnerability-explorer/trivy-vulnerability-explorer/node_modules/v-clipboard/dist/v-clipboard.es.js' implicitly has an 'any' type.

import "@uppy/core/dist/style.css"
import "@uppy/dashboard/dist/style.css"

// Types
import type { App } from "vue"

Expand Down
16 changes: 10 additions & 6 deletions src/plugins/vuetify.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
// Composables
import { createVuetify } from "vuetify"

/**
* plugins/vuetify.ts
*
* Framework documentation: https://vuetifyjs.com`
*/

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { VFileUpload } from "vuetify/labs/VFileUpload"

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
theme: {
defaultTheme: 'dark',
defaultTheme: "light",
},
components: {
VFileUpload,
},
})

0 comments on commit 774a4de

Please sign in to comment.