Compliance Monitoring AKA Risk Based Assessment is a tool for analysis and generating risk scores from compliance data of pharmaceutical industries. The product itself on a much larger scales takes time in debugging and altering stored procedures as per business requirements. This Logs Screen acts as an admin panel for the product itself and presents interactive tables for the Developer, Quality Assurance, and Business Analysts for adjusting algorithm weights, the algorithms being executed themselves and a quick overview for the last execution of the ETL or risk engine. All the current customers, product releases and servers avalable can accessed via a single page application and edited.
On accessing the designated IP and port on the QA server the application has been deployed to you'll be presented with a log in screen. If you're new to the CC/CM team please create a new user login password and proceed accorsingly. You'll be presented with the Harry Potter oath of "I solemnly swear that I'm upto no good" since you'll be accessing sensitive information of the selected customer's database and configuration. And the username and password are upside down just to keep things different ?? Select the database server and the client database you'd like to access and click Fetch Data which will inturn populate all the tables, the list of which can be accessed from the Hamburger menu on the top left of the screen.
An awesome logging screen for your projects!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
This admin panel screen has been developed for the ease and use of developers, quality management team and business analysts in mind. Configuration and debugging tables are presented on the home screen of the application. The single page application uses Vue as the frontend framework of choice which is connected to a Microsoft SQL Server 2019 database at the back and fetches the relied information. Changes can be commited, ETL job can be executed and dynamic lists can be refreshed. A side hamburger menu can be used for the ease of traversal. The list of servers is predetermined for the which can be selected from the select database dropdown. After selecting the sever the list of database will be populated and the desired one can be selected from the second drop down. This drop down is a multiselect component of Vue and can be installed seperately. On selecting a database the disabled buttons will become available along with the Reset Defer List and Reset Workbench button becomes visible. Once the complete data has been fetched from the selected database a GIF will appear along the logo of the application which will basically summarize the results of the last execution and state its status. The status are:
- All Good!
- All Good! See some warnings
- Crash!
- Risky Transaction is empty!
The GIF are randomly fetched from a predetermined list which can be found in the assets directory. Make ample adjustments to the risk engine and its parameters, hit enter and your query will be saved, but not yet executed. To make the visible adjustments to the database itself click on Commit Changes and Execute Job afterwards to start the ETL process. Each table data, button action, and user sessions are maintained via Flask server which has been served using Waitress due to a windows environment. Flask RESTful also utilzes a TinyDB database for storing user login credentials and maintaining session using Basic HTTP authentication using flask's own HTTP auth library. Both the frontend and the backend are hosted on a local server by creating a separate Windows Service for each. An Express server was created to run the Vue app and was converted into a windows server using node-windows. Whilst the Flask server was hosted via server script running waitress and made into a Windows Service via NSSM (Non-Sucking Service Manager). Please Log Out once your purpose of visiting the app is achieved.
This section lists the technological stack that was utilized for the purpose of creating this application along with the specific purpose they serve.
- Microsoft SQL Server | Database Server
- Vuetify | Vue's very own material design framework
- Vue.js | The goto choice for a progresive Frontend design
- Flask | Flask RESTful for backend
- NSSM | For creating windows services in the nicest way possible
- Express.js | Fast minimalist Node.js server
- TinyDB | A NoSQL database developed in Python
- Waitress | Production grade WSGI for Flask
In this section you can get the idea of to setup your own logs screen.
Environment setting required:
-
npm
npm install npm@latest -g
-
Python
Below are the instructions for installing the required libraries and frameworks required for the proper functioning of the application.
- Clone the repo
git clone https://github.com/Bill-Klay/Vue-Logs-Screen.git
- Install NPM packages
npm install
- Install Python packages
pip install -r requirements.txt
- Create Windows Service for the frontend
node winsw.js
The usage is pretty mainstream and has been stated at the start of this ReadMe. Besides the viewing functionality of the application we can also edit data across the tables. All the flags are presented in color chips which can be flipped. On clicking an editable field a dialogue box appears which has been made persistant to avoid accidental confirmations. What this means is that the edit box can be cancelled by hitting the ESC key, any changes made will be neglected. On striking the Enter key any changes made to the current cell will be reflected, saved and converted into a query for execution, but not yet commited to the database. To do so, click the Commit Changes button which will return the status of the changes moved.
For more examples, please refer to the Documentation at the start.
- Add Files_Specs table
- Add Reset Workbench
- Add Reset Defer List
- Adjust tables according to business needs
- More tables?
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Thank you for visiting 💚
Distributed under the MIT License. See LICENSE.txt for more information.
I've used this space to give credits to a few of my favourite links I had fun visiting while creating this ❤️