Feature - Integrate System API to view logs in UI

client/app/admin/admin.controller.js

@@ -2,9 +2,36 @@
 
 export default class AdminController {
   /*@ngInject*/
-  constructor(User) {
+  constructor($scope, $sce, User, system, ansi2html) {
+    'ngInject';
+    const admin_ctrl = this;
+
     // Use the User $resource to fetch all users
     this.users = User.query();
+
+    /**
+     * Fetch Server Logs
+     */
+    this.fetchServerLogs = function(){
+      system.getLogs('server', (response) => {
+        admin_ctrl.logsServer = $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data).replace(/\n/g, "<br>"));
+      }, (response) => {
+        admin_ctrl.logsServer = $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data).replace(/\n/g, "<br>"));
+      });
+    };
+
+
+    /**
+     * Fetch API Logs
+     */
+    this.fetchAPILogs = function(){
+      system.getLogs('api', (response) => {
+        admin_ctrl.logsAPI = $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data).replace(/\n/g, "<br>"));
+      }, (response) => {
+        admin_ctrl.logsAPI = $scope.result = $sce.trustAsHtml(ansi2html.toHtml(response.data).replace(/\n/g, "<br>"));
+      })
+    }
+
   }
 
   delete(user) {

client/app/admin/admin.html

@@ -1,12 +1,36 @@
 <div class="container">
-  <p>The delete user and user index api routes are restricted to users with the 'admin' role.</p>
-  <ul class="list-group user-list">
-    <li class="list-group-item" ng-repeat="user in admin.users">
-	    <div class="user-info">
-	        <strong>{{user.name}}</strong><br>
-	        <span class="text-muted">{{user.email}}</span>
-	    </div>
-        <a ng-click="admin.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
-    </li>
-  </ul>
+
+  <uib-tabset active="active">
+    <uib-tab index="0" heading="Users">
+      <p>The delete user and user index api routes are restricted to users with the 'admin' role.</p>
+      <ul class="list-group user-list">
+        <li class="list-group-item" ng-repeat="user in admin.users">
+          <div class="user-info">
+            <strong>{{user.name}}</strong><br>
+            <span class="text-muted">{{user.email}}</span> | <span class="text-muted">{{user.role}}</span>
+          </div>
+          <a ng-click="admin.delete(user)" class="trash"><span class="fa fa-trash fa-2x"></span></a>
+        </li>
+      </ul>
+    </uib-tab>
+    <uib-tab index="1" heading="Logs">
+
+      <uib-tabset active="active" >
+        <uib-tab index="0" heading="Server" select="admin.fetchServerLogs()">
+          <div style="background:black;color:lightgrey;width:100%;padding:20px;">
+            <p class="logconsole" ng-bind-html="admin.logsServer"></p>
+          </div>
+        </uib-tab>
+        <uib-tab index="1" heading="API" select="admin.fetchAPILogs()">
+          <div style="background:black;color:lightgrey;width:100%;padding:20px;">
+            <p class="logconsole" ng-bind-html="admin.logsAPI"></p>
+          </div>
+        </uib-tab>
+      </uib-tabset>
+
+
+    </uib-tab>
+
+  </uib-tabset>
+
 </div>

client/app/app.js

@@ -54,6 +54,7 @@ import Projects from './services/projects/projects.service';
 import ansible from './services/ansible/ansible.service';
 import YAML from './providers/yaml/yaml.service';
 import yamlFile from './services/yamlFile/yamlFile.service';
+import system from './services/system/system.service';
 
 import customModules from './custom_modules/custom_modules.service';
 
@@ -101,7 +102,7 @@ angular.module('app2App', [ngCookies, ngResource, ngSanitize, uiRouter, uiBootst
   // Components
   DesignerComponent, ProjectComponent, InventoryComponent, PlaybookComponent, FileBrowserComponent, RolesComponent, RunsComponent, CustomModulesComponent,
   // Services
-  YAML, yamlFile, Projects, ansible, ansi2html, editor, customModules,
+  YAML, yamlFile, Projects, ansible, ansi2html, editor, customModules, system,
   // Controllers
   NewInventoryController, NewGroupController, NewHostController, ComplexVarController, NewPlaybookController, ExecutionController, NewPlayController, NewTaskController, ComplexVarModalController,
   NewFileController, NewRoleController, SearchRoleController, NewModuleController,

client/app/services/system/system.service.js

@@ -0,0 +1,19 @@
+'use strict';
+const angular = require('angular');
+
+/*@ngInject*/
+export function systemService($http) {
+	// AngularJS will instantiate a singleton by calling "new" on this function
+
+  const api_system = '/api/system';
+  const api_get_logs = api_system + '/logs';
+
+  this.getLogs = function(type, successCallback, errorCallback){
+    $http.get(api_get_logs + '/' + type).then(successCallback, errorCallback);
+  }
+
+}
+
+export default angular.module('webAppApp.system', [])
+  .service('system', systemService)
+  .name;

client/app/services/system/system.service.spec.js

@@ -0,0 +1,16 @@
+'use strict';
+
+describe('Service: system', function() {
+  // load the service's module
+  beforeEach(module('webAppApp.system'));
+
+  // instantiate service
+  var system;
+  beforeEach(inject(function(_system_) {
+    system = _system_;
+  }));
+
+  it('should do something', function() {
+    expect(!!system).to.be.true;
+  });
+});