|
|
|
Welcome to the VM4SEC Dashboard repository. The dashboard is currently based on a free online template available at <https://mdbootstrap.com>.
|
|
|
|
|
|
|
|
The dashboard relies on [React](https://reactjs.org/) for building dynamic web pages with shareable elements among different pages.
|
|
|
|
|
|
|
|
Charts and plots will be visualized with [highcharts](https://www.highcharts.com/blog/posts/frameworks/react/) which provides support for React and a series of other programming languages.
|
|
|
|
|
|
|
|
Documentation for these frameworks can be found directly on their site.
|
|
|
|
|
|
|
|
All of these libraries are provided under MIT License and thus free to use in the VM4SEC project.
|
|
|
|
|
|
|
|
# Repository organization
|
|
|
|
Directories and files:
|
|
|
|
|
|
|
|
- `.` contains the license, the README, and some project-level configuration files used by NodeJS.
|
|
|
|
- `node_modules` after installing them through `nvm`, it will contain the modules needed to deploy the application.
|
|
|
|
- `src` Contains the source code of the dashboard organized as follows:
|
|
|
|
- `.` The root contains the main application files.
|
|
|
|
- `components` contains the React components and pages of the dashboard.
|
|
|
|
- `assets` contains artefacts like icons and images that are used within the components.
|
|
|
|
- `apis` contains the API calls to the backend services.
|
|
|
|
- `public` contains the files that are actually visible to everyone with access on the server.
|
|
|
|
|
|
|
|
# Installation of VM4SEC Dashboard
|
|
|
|
- **Step 1**: Clone the latest VM4SEC Dashboard version that can be found in the present Gitlab repository and navigate to the root directory.
|
|
|
|
- **Step 2**: To deploy the application you have to first install all the dependencies used. Open cmd and run the following command:
|
|
|
|
```bash
|
|
|
|
npm install
|
|
|
|
```
|
|
|
|
- **Step 3**: Next, you must create an empty `.env` file in the root directory of the application. Then, copy the contents of the `.env-default` file (also found in root directory) inside the `.env` file. The `.env` file contains all environment variables that hold host configurations for each backend server, so you should modify environment variables accordingly. Remember to restart the application each time you modify this file.
|
|
|
|
- **Step 4**: Finally, you can start the VM4SEC Dashboard server and a web page should open on your favorite browser. Open cmd and run the following command:
|
|
|
|
```bash
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
- **Step 5**: Visit http://localhost:3004/ to navigate to the VM4SEC dashboard. You should be able to access the dashboard home page.
|
|
|
|
|
|
|
|
# Installation of SDK4ED Dashboard using Docker
|
|
|
|
Alternatively, you can install the VM4SEC Dashboard using Docker.
|
|
|
|
- **Step 1**: Download and install [Docker](https://www.docker.com/).
|
|
|
|
- **Step 2**: Clone the latest VM4SEC Dashboard version that can be found in the present Gitlab repository and navigate to the root directory.
|
|
|
|
- **Step 3**: Open cmd and copy `.env-default` to `.env`:
|
|
|
|
```
|
|
|
|
cp ./.env-default ./.env
|
|
|
|
```
|
|
|
|
- **Step 4**: Open cmd and run:
|
|
|
|
```
|
|
|
|
sudo docker run -it \
|
|
|
|
--publish 3004:3000 \
|
|
|
|
--name vm4sec-dashboard \
|
|
|
|
--mount src=<path_to_vm4sec-dashboard_folder>,target=/mounted_folder,type=bind \
|
|
|
|
node
|
|
|
|
```
|
|
|
|
- **Step 5**: Open cmd and run:
|
|
|
|
```
|
|
|
|
sudo docker exec -it vm4sec-dashboard bash
|
|
|
|
```
|
|
|
|
This command will generate and run a Docker Container named vm4sec-dashboard in interactive session mode, i.e. it will open a command promt inside the Container.
|
|
|
|
- **Step 5**: While in interactive session mode run:
|
|
|
|
```
|
|
|
|
cd mounted_folder
|
|
|
|
npm install
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
- **Step 6**: Visit http://localhost:3004/ to navigate to the VM4SEC dashboard. You should be able to access the dashboard home page. |
