[UI] Policy Reporter UI V2

[fjogeleit]

Rewrite Policy Reporter UI based on modern frontend stack

• Upgrade from VueJS 2 to VueJS 3
• Upgrade from NuxtJS 2 to NuxtJS 3
• Upgrade from Vuetify 2 to Vuetify 3
• Switch from Webpack to Vite

Improved structure for PolicyReportResults

Ideas:

• Resolve splitting between PolicyReport and ClusterPolicyReport pages

  • Create Pages based on sources [Kyverno, Falco, Kube Bench, etc...]
  • Splitt between Categories (?)

• New subpages for a single resource with all available information from different sources

• Timeline charts for Logs page

[fjogeleit]

@sherifkayad I am working on a new Policy Reporter UI v2 feature called "Custom Boards". Its a way to configure customized dashboards based on filter like namespace selector, polr labels or sources:

custom-boards.mov

customBoards:
  - name: Team A
    namespaces:
      selector:
        team: team-a
    sources:
      list:
        - kyverno

  - name: Team B
    sources:
      list:
        - trivy configaudit
    namespaces:
      list:
        - trivy-system
    policyReports:
      selector:
        app: adapter

Would this be a better solution as the current approach with the custom filter selection based on labels?