Merge pull request #473 from AlbertRossJoh/feature/exn-api-to-frontend

Dashboard with Exceptions as json

flask_monitoringdashboard/controllers/exceptions.py

@@ -0,0 +1,17 @@
+from flask_monitoringdashboard.database.exception_info import get_exceptions_with_timestamps
+
+def get_exceptions_with_timestamp(session):
+    """
+    :param session: session for the database
+    :param endpoints: a list of endpoints, encoded by their name
+    :return: for every endpoint in endpoints, a list with the performance
+    """
+
+    return [
+        {
+            'type': exception.exception_type, 
+            'message': exception.exception_msg, 
+            'timestamp': exception.time_requested 
+        }
+        for exception in get_exceptions_with_timestamps(session)
+    ]

flask_monitoringdashboard/database/exception_info.py

@@ -2,7 +2,7 @@
 Contains all functions that access an ExceptionInfo object.
 """
 
-from flask_monitoringdashboard.database import CodeLine, ExceptionInfo, ExceptionStackLine
+from flask_monitoringdashboard.database import CodeLine, ExceptionInfo, ExceptionStackLine, Request
 from flask_monitoringdashboard.database.code_line import get_code_line
 
 def get_exception_info(session, request_id: int):
@@ -48,3 +48,12 @@ def add_exception_stack_line(session, request_id, position, code_line: CodeLine)
             code_id=db_code_line.id,
         )
     )
+
+def get_exceptions_with_timestamps(session):
+    results = session.query(
+        ExceptionInfo.exception_type,
+        ExceptionInfo.exception_msg,
+        Request.time_requested
+    ).join(Request, ExceptionInfo.request_id == Request.id).all()
+
+    return results

flask_monitoringdashboard/frontend/js/app.js

@@ -23,6 +23,7 @@ import moment from 'moment';
 window.moment = moment;
 
 import { OverviewController } from "./controllers/OverviewController";
+import { ExceptionController } from "./controllers/exceptionInfo";
 import { HourlyLoadController } from "./controllers/hourlyLoad";
 import { MultiVersionController } from "./controllers/multiVersion";
 import { DailyUtilizationController } from "./controllers/dailyUtilization";
@@ -95,6 +96,12 @@ app.config(['$locationProvider', '$routeProvider', function ($locationProvider,
             templateUrl: 'static/pages/overview.html',
             controller: ['$scope', '$http', '$location', 'menuService', 'endpointService', OverviewController]
         })
+        // Natalie -->
+        .when('/new_dashboard', {
+            templateUrl: 'static/pages/new_dashboard.html',
+            controller: ['$scope', '$http', 'menuService', 'endpointService', ExceptionController]
+        })
+        // <--
         .when('/hourly_load', {
             templateUrl: 'static/pages/plotly_graph.html',
             controller: ['$scope', '$http', 'menuService', 'plotlyService', 'infoService',

flask_monitoringdashboard/frontend/js/controllers/exceptionInfo.js

@@ -0,0 +1,32 @@
+// dette er frontend, husk "npm run build" fra frontend/ for at kunne se dine ændringer
+// Opsætning første gang: npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
+
+export function ExceptionController ($scope, $http, menuService, endpointService) {
+    endpointService.reset();
+    // Hvis værdien 'new_dashboard' nedenfor ændres skal den også ændres i menuService, men den bruges ingen andre steder
+    menuService.reset('new_dashboard'); // Fokus når man klikker på den i menuen (den bliver hvid og de andre bliver grå)
+
+    // Route http://127.0.0.1:4200/dashboard/new_dashboard sættes i frontend/app.js
+
+    $scope.message = "Welcome to the New Dashboard!"; // scope bruges i static/pages/new_dashboard.html
+    $scope.table = [];
+    // Hvis static/pages/new_dashboard.html filen skal renames, skal frontend/app.js lige opdateres
+
+    /* 
+        API og frontend virker til at køre på samme port så vidt jeg har forstået, og API routing specificeres i view layer
+
+        API specificeres lige nu i views/endpoint.py som bruger metoder fra database/ core/ og controllers/
+        vi bør rykke API ud i en views/excpetion.py i stedet, men da jeg selv forsøgte dette kunne http://127.0.0.1:4200/dashboard/api/exception_info ikke findes
+
+        filer der muliggør API lige nu (fra bunden og op):
+            database/exception_info -> controllers/exceptions -> views/endpoint.py --api--> frontend/js/controllers/exceptionInfo.js
+       
+    */
+    $http.get('api/exception_info').then(function (response) {
+        console.log("DATA START");
+        console.log(response.data);
+        console.log("DATA SLUT");
+        $scope.table = response.data;
+    });
+
+};

flask_monitoringdashboard/frontend/js/services/menu.js

@@ -12,7 +12,7 @@ export default function ($http, endpointService) {
             $('#collapseCustomGraphs').collapse('hide');
         }
 
-        var dashboardPages = ['overview', 'hourly_load', 'multi_version', 'daily_load', 'api_performance', 'reporting'];
+        var dashboardPages = ['overview', 'new_dashboard', 'hourly_load', 'multi_version', 'daily_load', 'api_performance', 'reporting'];
 
         if (dashboardPages.includes(page)) {
             $('#collapseDashboard').collapse('show');

flask_monitoringdashboard/static/elements/menu.html

@@ -11,6 +11,11 @@
             <li ng-class="{'active': menu.page=='hourly_load'}">
                 <a href="hourly_load">Hourly API Utilization</a>
             </li>
+            <!-- Natalie -->
+            <li ng-class="{'active': menu.page=='new_dashboard'}">
+                <a href="new_dashboard">Exception Monitoring</a>
+            </li>
+            <!-- Natalie -->
             <li ng-class="{'active': menu.page=='multi_version'}">
                 <a href="multi_version">Multi Version API Utilization</a>
             </li>

flask_monitoringdashboard/static/pages/new_dashboard.html

@@ -0,0 +1,5 @@
+<div>
+    <h1>New Dashboard</h1>
+    <p>{{ message }}</p>
+    <p>{{ table }}</p>
+</div>

flask_monitoringdashboard/views/endpoint.py

@@ -22,8 +22,21 @@
     get_endpoints,
     get_endpoints_hits,
 )
+from flask_monitoringdashboard.controllers.exceptions import get_exceptions_with_timestamp
 
-
+@blueprint.route('/api/exception_info')
+@secure
+def get_exception_info():
+    """
+    Get information about all the exceptions that have occured for all endpoint
+    :return: A JSON-list with a JSON-object per endpoint
+    """
+    post_to_back_if_telemetry_enabled(**{'name': 'exception_info'}) # Ved ikke 100% hvorfor, tror det er business behov, ikke et funktionelt behov som sådan
+    with session_scope() as session:
+        exceptions = get_exceptions_with_timestamp(session)
+
+        return jsonify(exceptions)
+
 @blueprint.route('/api/overview', methods=['GET', 'POST'])
 @secure
 def get_overview():