Merge remote-tracking branch 'origin/surverytelemetry-frontend-featur…

…e' into telemetry-consent-api

docs/README.md

@@ -2,10 +2,16 @@
 The documentation is generated using [Sphinx](http://www.sphinx-doc.org/en/master/).
 
 If you want to generate the documentation, you can run:
+Linux:
 ```
     make html
 ```
 
+Windows:
+```
+sphinx-build -b html . _build
+```
+
 # Installation
 The following packages are required to generate the documentation:
 ```

docs/changelog.rst

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 This project adheres to `Semantic Versioning <http://semver.org/>`_.
 Please note that the changes before version 1.10.0 have not been documented.
 
+v3.2.1
+----------
+Changed
+
+- Upgraded multiple frontend packages for enhanced security and performance.
+- Upgraded 'bootstrap' from '^4.5.0' to '^5.3.2'.
+- Updated 'd3' from '^4.13.0' to '^7.8.5'.
+- Added '@babel/plugin-transform-class-properties' version '^7.22.5'.
+- Upgraded 'webpack' from '^4.43.0' to '^5.89.0' and 'webpack-cli' from '^3.3.12' to '^5.1.4'.
+- Integrated 'mini-css-extract-plugin' at version '^2.7.6' and 'node-gyp' at '^10.0.0' for enhanced build processes.
+- Miscellaneous package updates.
+- Added survey alert
+- Added telemetry alert and functionality
+
+
 v3.1.2
 ----------
 - Compatibility with Flask>=2.x Removed the call to `before_app_first_request` and replaced it with `record_once` as per the PR of [@FlorianRhiem](https://github.com/FlorianRhiem).

docs/developing.rst

@@ -102,6 +102,31 @@ language, and contains 2 directories: static and templates.
   - pages: HTML files for building the web interface.
 
 
+Frontend environment
+~~~~~~~~~~~~~~~~~~~
+
+To run the frontend, these versions of Node and NPM are known to work:
+-NPM v10.1.0
+-Node v20.9.0
+
+*Use the commands while being in the frontend folder (Flask-MonitoringDashboard/flask_monitoringdashboard/frontend).*
+
+To install the packages:
+
+.. code-block:: bash
+
+    npm i
+     
+To run the testing environment:
+
+.. code-block:: bash
+
+    npm run dev
+
+Any changes made in the code will now be reflected on the dashboard. 
+A flask project with the dashboard already installed can be found at `<https://github.com/wielas/fmd_weather>`_.
+
+
 Tools
 --------------
 
@@ -138,6 +163,7 @@ The following tools are used for helping the development of the Dashboard:
    - **Development**: The development is deployed at: `<https://fmd-development.herokuapp.com>`_.
    - **Pull requests**: Pull requests are also automatically build with a unique URL.
 
+
 - **Unit testing**: The code is tested before a Pull Request is accepted. If you want to run the unit
   tests locally, you can use the following command from the root of Flask-MonitoringDashboard
   directory:
@@ -160,9 +186,16 @@ The following tools are used for helping the development of the Dashboard:
 
   .. code-block:: bash
 
+     linux:
      pip install -r requirements.txt
      make html
 
+  .. code-block:: bash
+
+     windows:
+     pip install -r requirements.txt
+     sphinx-build -b html . _build
+
   The generated html files can be found in the following folder: Flask-MonitoringDashboard/docs/build.
 
   Using the make command, you can build more, than only HTML-files. For a list of all possible options,

docs/functionality.rst

@@ -309,6 +309,21 @@ Finally, the implementation of the scheduler in the FMD
 is based on the appscheduler.schedulers.Background schedulers
 about which you can read more `in the corresponding documentation page <apscheduler.schedulers>`_.
 
+Telemetry
+----------------------
+
+The Dashboard is setup to be able to collect telemetric-data. 
+This data-collection can be configured under the "Configuration" route. 
+
+You can find detailed information about what and how data is collected below.
+
+1. **Endpoint** We collect the number of endpoints
+
+2. **Blueprint** We collect the number of blueprints
+
+3. **Monitoring level** We collect the amount of monitoring levels of the endpoints
+
+
 Need more information?
 ----------------------
 Check out the `contact page <contact.html>`_ to see how you can get in touch with us.

flask_monitoringdashboard/frontend/js/controllers/configuration.js

@@ -27,18 +27,18 @@ export function ConfigurationController($scope, $http, menuService, endpointServ
         $scope.config = response.data;
     });
 
-    $scope.openModal = function(name, user){
+    $scope.openModal = function (name, user) {
         $scope.user = user;
         $(`#${name}Modal`).modal();
     }
 
-    function fetchUsers(){
+    function fetchUsers() {
         $http.get('api/users').then(function (response) {
             $scope.userData = response.data;  // reload user data
         });
     }
 
-    function createUser(){
+    function createUser() {
         $http.post(
             'api/user/create',
             $.param({
@@ -48,16 +48,16 @@ export function ConfigurationController($scope, $http, menuService, endpointServ
                 'is_admin': $('#create-admin')[0].checked,
             }),
             HEADERS
-        ).then(function(successResponse){
-                fetchUsers();
-                $('#createModal').modal('hide');
-                modalService.setErrorMessage('create', null); // remove error message.
-        }, function(errorResponse){
-                modalService.setErrorMessage('create', errorResponse.data.message);
+        ).then(function (successResponse) {
+            fetchUsers();
+            $('#createModal').modal('hide');
+            modalService.setErrorMessage('create', null); // remove error message.
+        }, function (errorResponse) {
+            modalService.setErrorMessage('create', errorResponse.data.message);
         });
     }
 
-    function editUser(){
+    function editUser() {
         $http.post(
             'api/user/edit',
             $.param({
@@ -68,12 +68,12 @@ export function ConfigurationController($scope, $http, menuService, endpointServ
                 'is_admin': $('#edit-admin')[0].checked,
             }),
             HEADERS
-        ).then(function(successResponse){
-                fetchUsers();
-                $('#editModal').modal('hide');
-                modalService.setErrorMessage('edit', null); // remove error message.
-        }, function(errorResponse){
-                modalService.setErrorMessage('edit', errorResponse.data.message);
+        ).then(function (successResponse) {
+            fetchUsers();
+            $('#editModal').modal('hide');
+            modalService.setErrorMessage('edit', null); // remove error message.
+        }, function (errorResponse) {
+            modalService.setErrorMessage('edit', errorResponse.data.message);
         });
     }
 
@@ -84,12 +84,34 @@ export function ConfigurationController($scope, $http, menuService, endpointServ
                 'user_id': user.id
             }),
             HEADERS
-        ).then(function(successResponse){
-                fetchUsers();
-                $('#deleteModal').modal('hide');
-                modalService.setErrorMessage('delete', null); // remove error message.
-        }, function(errorResponse){
-                modalService.setErrorMessage('delete', errorResponse.data.message);
+        ).then(function (successResponse) {
+            fetchUsers();
+            $('#deleteModal').modal('hide');
+            modalService.setErrorMessage('delete', null); // remove error message.
+        }, function (errorResponse) {
+            modalService.setErrorMessage('delete', errorResponse.data.message);
         });
     }
+
+    $scope.telemetryConsent;
+
+    $scope.fetchTelemetryConsent = function () {
+        $http.post(`/dashboard/get_is_telemetry_answered`)
+            .then(function (response) {
+                $scope.telemetryConsent = response.data;
+            }, function (error) {
+                console.error('Error fetching telemetry consent:', error);
+            });
+    };
+
+    $scope.handleTelemetry = function (consent) {
+        $http.post('/dashboard/telemetry/accept_telemetry_consent', { 'consent': consent })
+            .then(function (response) {
+            }, function (error) {
+                console.error('Error updating telemetry consent:', error);
+            });
+    };
+
+    $scope.fetchTelemetryConsent();
+
 }

flask_monitoringdashboard/frontend/js/controllers/surveyController.js

@@ -1,27 +1,52 @@
-export function SurveyController($scope, $http) {
-    $scope.surveyShow = true;
-    $scope.reasons = {
-        privacy: false,
-        performance: false,
-        trust: false,
-        other: false
+export function SurveyController($scope, $http, $sce) {
+    $scope.surveyShow = false;
+    $scope.surveyCompleted = false;
+
+    // Fetch local storage variation index
+    const storedIndex = localStorage.getItem('surveyVariationIndex');
+    $scope.surveyVariationIndex = storedIndex && !isNaN(parseInt(storedIndex)) ? parseInt(storedIndex) : 0;
+
+    // Variations of the survey prompt
+    $scope.surveyVariations = [
+        'Please take a moment to <a href="https://forms.gle/kWD5mqcibS2V5f3Y6" target="_blank">fill out our survey</a>.',
+        'Your feedback is valuable! <a href="https://forms.gle/kWD5mqcibS2V5f3Y6" target="_blank">Take our quick survey.</a>',
+        'We value your opinion! Click <a href="https://forms.gle/kWD5mqcibS2V5f3Y6" target="_blank">here</a> to share your thoughts.',
+        'Help us improve! Participate in our <a href="https://forms.gle/kWD5mqcibS2V5f3Y6" target="_blank">short survey</a>.'
+    ];
+
+    // Mark as trusted HTML
+    $scope.surveyVariations = $scope.surveyVariations.map(variation =>
+        $sce.trustAsHtml(variation)
+    );
+
+    // Fetches the survey from database
+    $scope.fetchSurveyFilled = function () {
+        $http.post('/dashboard/get_is_survey_filled')
+            .then(function (response) {
+                $scope.surveyCompleted = response.data.is_survey_filled;
+            }, function (error) {
+                console.error('Error fetching survey status:', error);
+            });
+        $scope.surveyShow = !$scope.surveyCompleted && ($scope.surveyVariationIndex < $scope.surveyVariations.length);
     };
+    $scope.fetchSurveyFilled();
 
-    $scope.submitFollowUp = function() {
-        $scope.followUpShow = false;
-
-        var feedback = [];
-        for (var key in $scope.reasons) {
-            if ($scope.reasons[key]) {
-                feedback.push(key !== 'other' ? key : { other: $scope.customReason });
-            }
+    // Increment surveyVariation in localStorage
+    $scope.closeSurvey = function () {
+        if (!$scope.surveyCompleted) {
+            $scope.surveyVariationIndex++;
+            localStorage.setItem('surveyVariationIndex', $scope.surveyVariationIndex.toString());
         }
-
-        $http.post('/api/feedback', { reasons: feedback })
-            .then(function(response) {
-                console.log('Feedback sent:', response.data);
-            }, function(error) {
-                console.error('Error sending feedback:', error);
+    };
+
+    // Mark survey as filled in database
+    $scope.surveyFilled = function () {
+        $http.post('/dashboard/survey_has_been_filled')
+            .then(function (response) {
+            }, function (error) {
+                console.error('Error:', error);
             });
+        $scope.surveyCompleted = true;
+        $scope.surveyShow = false;
     };
-}
+}