Vulnerability dashboard: Add new homepage

ee/vulnerability-dashboard/api/models/VulnerabilityInstall.js

@@ -15,6 +15,7 @@ module.exports = {
     installedAt: {
       example: 1670152500000,
       description: 'JS timestamp representing when this installation began on the host.',
+      extendedDescription: 'This JS timestamp represents when the vulnerabiltiy dashboard first saw this vulnerable software on a host',
       type: 'number',
       isInteger: true,
       required: true,

ee/vulnerability-dashboard/assets/js/pages/dashboard.page.js

@@ -0,0 +1,156 @@
+parasails.registerPage('dashboard', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    //…
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    Chart.defaults.color = '#d4d4d8';
+    Chart.defaults.borderColor = '#21262d';
+    new Chart(document.getElementById('severityChart'), {
+      type: 'doughnut',
+      data: {
+        labels: ['Critical', 'High', 'Medium', 'Low'],
+        datasets: [{
+          data: [this.totalUniqueCounts.critical, this.totalUniqueCounts.high, this.totalUniqueCounts.medium, this.totalUniqueCounts.low],
+          backgroundColor: ['#dc2626', '#ea580c', '#ca8a04', '#16a34a'],
+          borderWidth: 2,
+          borderColor: '#010409'
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 20,
+              usePointStyle: true,
+              color: '#d4d4d8'
+            }
+          }
+        }
+      }
+    });
+    new Chart(document.getElementById('trendsChart'), {
+      type: 'line',
+      data: {
+        // labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
+        labels: _.pluck(this.activityTrendsTimeline, 'timelineLabel'),
+        datasets: [{
+          label: 'New CVEs',
+          data: _.pluck(this.activityTrendsTimeline, 'newCves'),
+          borderColor: '#dc2626',
+          backgroundColor: 'rgba(220, 38, 38, 0.1)',
+          tension: 0.4,
+          borderWidth: 2,
+          pointBackgroundColor: '#dc2626',
+          pointBorderColor: '#ffffff',
+          pointBorderWidth: 2,
+          pointRadius: 5
+        }, {
+          label: 'Remediated CVEs',
+          data: _.pluck(this.activityTrendsTimeline, 'remediatedCves'),
+          borderColor: '#16a34a',
+          backgroundColor: 'rgba(22, 163, 74, 0.1)',
+          tension: 0.4,
+          borderWidth: 2,
+          pointBackgroundColor: '#16a34a',
+          pointBorderColor: '#ffffff',
+          pointBorderWidth: 2,
+          pointRadius: 5
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            beginAtZero: true,
+            grid: { color: '#21262d' },
+            ticks: { color: '#7d8590' }
+          },
+          x: {
+            grid: { color: '#21262d' },
+            ticks: { color: '#7d8590' }
+          }
+        },
+        plugins: {
+          legend: {
+            labels: {
+              color: '#d4d4d8',
+              usePointStyle: true,
+              padding: 20
+            }
+          }
+        }
+      }
+    });
+
+    new Chart(document.getElementById('totalTrendChart'), {
+      type: 'line',
+      data: {
+        labels: _.pluck(this.activityTrendsTimeline, 'timelineLabel'),
+        datasets: [{
+          label: 'Total CVEs',
+          data: _.pluck(this.activityTrendsTimeline, 'totalNumberOfCves'),
+          borderColor: '#8b5cf6',
+          backgroundColor: 'rgba(139, 92, 246, 0.1)',
+          tension: 0.4,
+          borderWidth: 3,
+          pointBackgroundColor: '#8b5cf6',
+          pointBorderColor: '#ffffff',
+          pointBorderWidth: 2,
+          pointRadius: 6,
+          fill: true
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            beginAtZero: false,
+            min: 25000,
+            grid: { color: '#21262d' },
+            ticks: {
+              color: '#7d8590',
+              callback: function(value) {
+                return (value / 1000).toFixed(1) + 'k';
+              }
+            }
+          },
+          x: {
+            grid: { color: '#21262d' },
+            ticks: { color: '#7d8590' }
+          }
+        },
+        plugins: {
+          legend: {
+            labels: {
+              color: '#d4d4d8',
+              usePointStyle: true,
+              padding: 20
+            }
+          }
+        }
+      }
+    });
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});

ee/vulnerability-dashboard/assets/styles/importer.less

@@ -44,3 +44,4 @@
 @import 'pages/500.less';
 @import 'pages/498.less';
 @import 'pages/patch-progress.less';
+@import 'pages/dashboard.less';

ee/vulnerability-dashboard/assets/styles/layout.less

@@ -40,7 +40,11 @@ html, body {
   // ^^The above is to disable "importantRule" and "duplicateProperty" rules.
   min-height: 100%;
   position: relative;
+
   padding-bottom: @footer-height;
+  &.header-hidden {
+    padding-bottom: 0px;
+  }
   background-color: #f8f9fa;
   color: #292b2d;
   a {