User Manual

This page will give an overview of the development of the OPA Dashboard implemented for Dstny Engage's 2023 internship program. I will list the technologies used, the libraries I have used and possible alternatives I have discovered, and finally do my best to guide any future developers on how to continue the development of this project if Dstny decides to.

Overview

This repository is part of the OPA project proposed by Dstny Engage in their 2023 internship program and is mainly for the frontend. You can find the other repository involved with this project's backend here. You can also find all our documents hosted on the wiki page there as well.

The Open Policy Agent is an open-source, general-purpose policy engine that unifies policy enforcement across the stack. OPA decouples policy decision-making from policy enforcement and application logic. At Dstny Engage, making changes to permissions in the OPA service is a cumbersome and time-consuming process that requires modifying code and deploying it. This is due to the deployment of several microservices and the need for the open policy agent to authorize the interactions between them.

This project aims to develop a centralized dashboard and a server that acts as a middleware between Dstny's services and the open policy agent, allowing for user-friendly policy modifications in real-time.

Used Technologies

The dashboard is mainly built using Vue3, specifically the Options API, Typescript, and Figma for the UI design.

Used Libraries

Throughout the project I have used various Vue libraries. Aside from the libraries normally used at Dstny, such as Axios, the following is a list documenting them and their possible alternatives.

1. Vue Styleguidist

Used for rendering the functional documentation for the vue components. You can run the style guide by navigating to the OPA-Dashboard/opa-dashboard directory and running npm run styleguide command

2. Vue3-notification

This library was used to display notification after most of the network requests. The library's documentation clearly shows the steps to using it in a project. You may find a snippet like this throughout the code this.$notify({ title: 'Title', text: 'Request Successful', type: 'success' }) which is the library's method to display notifications.

Another possible library is vue-toastification

3. epic-spinners

Used to display loading spinners whenever a network request is sent

4. vue3-treeview

This library was used to display the directory structure retrieved from the backend in the Editor Page, for its simplicity and ease of use. Another possible alternative is vuejs-tree and vue-tree

5. vue-codemirror

Used in the Editor Page to display the code editor the user uses to modify the files in the backend. I chose this library because it appeared to be the easiest to enhance and add extensions to. For example, importing custom editor themes or oprogramming languages, and the ability to crete custom syntax highlighting rules. It is based on the original library CodeMirror used to render code editors.

I have found other several libraries that may be used:

1. Vue Simple Code Editor
2. Vue Prism
3. Monaco Editor The code editor used in VSCode. This was the first option I tried to use, but had trouble finding a library the ported Monaco Editor to Vue3 and the Options API

Please also check the package.json file for a list of all the used libraries

Directory Structure

For components that would be used in more than one view like the Sidebar.vue component, I added it to the src\components directory. All other components have their own directories in the src\views directory.