Github Repo: https://github.com/aquasecurity/aqua-dash.git

• Prereqisite
  • Ubuntu setup for nodejs and npm
• Install / Project setup
• Run / Development: compiles and hot-reloads for development
• Build / Production: compiles and minifies for production
  • Lints and fixes files
  • Customize Vuejs configuration
• Deploy / Production: Kubernetes with kubectl
• Introduction
• Project Structure
• Source code
• App.vue
• main.js
• router.js
• store.js (most important code)
• Views
  • Dashboard.vue
• Plugins
  • vuetify.js
• Components
  • AnimatedNumber.vue
  • AttentionCard.vue
  • BottomNav.vue(not displayed on the dashboard)
  • DetailAckCard.vue
  • DetailUnAckCard.vue
  • DetailVshieldCard.vue
  • DetailVulnCard.vue
  • LineChart.vue
  • SelectCard.vue
  • SettingsCard.vue
  • TimeseriesCard.vue
  • TopToolbar.vue
  • VulnCard.vue

NodeJS, and npm is required to run this app. Sample Timeseries API implementation is required for the charts to work properly.

sudo apt update
sudo apt install nodejs
sudo apt install npm

git clone https://github.com/aquasecurity/aqua-dash.git
cd aqua-dash
npm install

npm run serve

npm run build

npm run lint

See Configuration Reference.

Edit Ingress and replace example.com with your domain name.

kubectl apply -f ./k8s

This app is built on Vue and Vuex. The app uses Vuetify Material Design Component Framework which is a direct implementation of Googles Material Design

Rally theme of Material Studies is used because it's great match for any apps that displays a lot of Numbers, Charts and Graphs.

Source code of this project is under `src` directory.

App.vue is the main entry point for displaying the app. This file only uses TopToolbar.vue and router-view. Dashboard is served as a root view for the app. See the router.js for more details.

This file is main entry point for loading the App. This is the file that gets loaded before any file. It contains the logic to load data from the browser local storage.

This is the file where client/browser side route is defined. The root or "/" route defaults to display the Dashboard component. There another route for About page is also defined if one chooses to display the About information.

This file is responsible for the browser state management and is an implementation of Vuex. All the state variable is defined here and is accessible by any component of the App.

All the API Calls are also made from this file. Thus any API calls modification will have to be done in this file. Typically, the api call function is prefixed with fetch keyword and is under action: section of the store. These actions can be called from any component. The app uses axios to make any http api calls.

Source code is further subdivided into views, components and plugin.

The main view Dashboard.vue is in views directory.

If desired, you can change the main layout of GUI here. Dashboard.vue use component architecture to display GUI. The image, repo and project selector pane on the left is displayed by the SelectCard.vue under components folder. Risk Trends(line chart) is rendered by TimeseriesCard.vue. Vulnerabilities are rendered by VulnCard.vue. Attention with timelines are on the right by AttentionCard.vue. TopToolbar is rendered at App.vue level, can be modified to display your logo etc. by modifying TopToolbar.vue.

This app uses only one plugin i.e. Vuetify plugin. Any Theming related or Vuetify related changes can be done in vuetify.js under plugin directory.

This component is responsible for rendering the cosmetic number animation.

This component is responsible for rendering the Attention card on the right. Any display logic can be changed in this file.

If desired, bottom nav can be modified for display logic and uncommented in the App.vue file.

This component is rendered as a Dialog when a user clicks on the Acknowledged button. Acknowledged Dialog display logic can be changed here.

This component is rendered as a Dialog when a user clicks on the Unacknowledged button. Unacknowledged Dialog display logic can be changed here.

This component is rendered as a Dialog when a user clicks on the Vshieded button. Vshieded Dialog display logic can be changed here.

This component is rendered as a Dialog when a user clicks on the Vulnerabilities button. Vulnerabilities Dialog display logic can be changed here.

This component is a Vue implementation of Chart.js. Any timeseries related display logic can be changed here. For example you only want to display critical and high vulnerabilities, you can remove the medium data point here. You can also display the unstacked version of the chart.

This component is responsible for displaying the select section on the left. Any display logic can be changed here.

NOTE: Selecting the Project/Namespace is not implemented yet and does nothing when selected.

This component is responsible for displaying the settings of the app when the drawer on the top left is clicked. The settings hold the aqua console and timeseries API endpoints. It's also used to display login related data and number to days to fix critical and high vulnerabilities.

Note: Settings data is stored in the browser local storage.

This component encapsulates the LineChart.vue and only provides cosmetics to the LineChart like Card title, image and repo name etc.

This component is responsible for displaying the top navigation logo and tools. It contains the display logic (show/hide) for SettingsCard.vue

This is one of the most important components of this app. It contains the display logic and also correlation logic of Image Vulnerabilities and Risk data. This could be the file you might find yourself changing the most.