Create new SNMP Settings page

Created new page to display SNMP Managers.
Display the SNMP Manager's IP and port.
https://github.com/openbmc/phosphor-snmp/blob/master/docs/snmp-configuration.md

Future commits will allow the user to add and delete SNMP
managers.

Change-Id: Ia5d633c11728a580c06b25c412e8673925cdc597
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 36a57d5..32797c0 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -101,13 +101,15 @@
 	<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
 		<li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
 			<a href="#/configuration/network" tabindex="14" ng-click="closeSubnav()">Network settings</a></li>
+		<li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
+			<a href="#/configuration/snmp" tabindex="15" ng-click="closeSubnav()">SNMP settings</a></li>
 		<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
-			<a href="#/configuration/firmware" tabindex="15" ng-click="closeSubnav()">Firmware</a></li>
+			<a href="#/configuration/firmware" tabindex="16" ng-click="closeSubnav()">Firmware</a></li>
 		<li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
-			<a href="#/configuration/date-time" tabindex="16" ng-click="closeSubnav()">Date and time settings</a></li>
+			<a href="#/configuration/date-time" tabindex="17" ng-click="closeSubnav()">Date and time settings</a></li>
 	</ul>
 	<ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
 		<li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
-			<a href="#/users/manage-accounts" tabindex="17" ng-click="closeSubnav()">Manage user account</a></li>
+			<a href="#/users/manage-accounts" tabindex="18" ng-click="closeSubnav()">Manage user account</a></li>
 	</ul>
 </nav>
diff --git a/app/common/services/api-utils.js b/app/common/services/api-utils.js
index 284d54e..7f2fe7f 100644
--- a/app/common/services/api-utils.js
+++ b/app/common/services/api-utils.js
@@ -85,6 +85,21 @@
                   });
           return deferred.promise;
         },
+        getSNMPManagers: function() {
+          return $http({
+                   method: 'GET',
+                   url: DataService.getHost() +
+                       '/xyz/openbmc_project/network/snmp/manager/enumerate',
+                   headers: {
+                     'Accept': 'application/json',
+                     'Content-Type': 'application/json'
+                   },
+                   withCredentials: true
+                 })
+              .then(function(response) {
+                return response.data;
+              });
+        },
         getNetworkInfo: function() {
           var deferred = $q.defer();
           $http({
diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
new file mode 100644
index 0000000..001aae6
--- /dev/null
+++ b/app/configuration/controllers/snmp-controller.html
@@ -0,0 +1,19 @@
+<loader loading="loading"></loader>
+<div id="configuration-snmp">
+	<div class="row column">
+		<h1>SNMP settings</h1>
+	</div>
+	<form class="snmp__form" role="form" action="">
+		<section class="row column">
+			<div class="page-header">
+				<h2 class="bold h4">SNMP information</h2>
+			</div>
+			<fieldset>
+				<div class="snmp__managers" ng-repeat="manager in managers track by $index">
+					<label>SNMP Manager {{$index+1}}</label>
+					<field>{{manager.Address}}:{{manager.Port}}</field>
+				</div>
+			</fieldset>
+		</section>
+	</form>
+</div>
diff --git a/app/configuration/controllers/snmp-controller.js b/app/configuration/controllers/snmp-controller.js
new file mode 100644
index 0000000..4b82334
--- /dev/null
+++ b/app/configuration/controllers/snmp-controller.js
@@ -0,0 +1,31 @@
+/**
+ * Controller for SNMP
+ *
+ * @module app/configuration
+ * @exports snmpController
+ * @name snmpController
+ */
+
+window.angular && (function(angular) {
+  'use strict';
+
+  angular.module('app.configuration').controller('snmpController', [
+    '$scope', '$window', 'APIUtils',
+    function($scope, $window, APIUtils) {
+      $scope.managers = {};
+      $scope.loading = true;
+
+      var getSNMPManagers = APIUtils.getSNMPManagers().then(
+          function(data) {
+            $scope.managers = data.data;
+          },
+          function(error) {
+            console.log(JSON.stringify(error));
+          });
+
+      getSNMPManagers.finally(function() {
+        $scope.loading = false;
+      });
+    }
+  ]);
+})(angular);
diff --git a/app/configuration/index.js b/app/configuration/index.js
index e9bab01..b418295 100644
--- a/app/configuration/index.js
+++ b/app/configuration/index.js
@@ -30,6 +30,11 @@
                 'controller': 'networkController',
                 authenticated: true
               })
+              .when('/configuration/snmp', {
+                'template': require('./controllers/snmp-controller.html'),
+                'controller': 'snmpController',
+                authenticated: true
+              })
               .when('/configuration/firmware', {
                 'template': require('./controllers/firmware-controller.html'),
                 'controller': 'firmwareController',
diff --git a/app/configuration/styles/index.scss b/app/configuration/styles/index.scss
index da10ecc..e532583 100644
--- a/app/configuration/styles/index.scss
+++ b/app/configuration/styles/index.scss
@@ -1,3 +1,4 @@
 @import "./network.scss";
+@import "./snmp.scss";
 @import "./date-time.scss";
 @import "./firmware.scss";
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
new file mode 100644
index 0000000..00dd40b
--- /dev/null
+++ b/app/configuration/styles/snmp.scss
@@ -0,0 +1,13 @@
+// SNMP SCSS
+
+.snmp__form {
+
+  fieldset {
+    padding-left: 1.8em;
+    padding-bottom: 1.8em;
+    border-bottom: 1px solid $medgrey;
+  }
+   .snmp__managers {
+    padding-bottom: 1em;
+  }
+}
diff --git a/app/index.js b/app/index.js
index 02ff264..92877cd 100644
--- a/app/index.js
+++ b/app/index.js
@@ -73,6 +73,7 @@
 import configuration_index from './configuration/index.js';
 import date_time_controller from './configuration/controllers/date-time-controller.js';
 import network_controller from './configuration/controllers/network-controller.js';
+import snmp_controller from './configuration/controllers/snmp-controller.js';
 import firmware_controller from './configuration/controllers/firmware-controller.js';
 
 import multi_server_index from './multi-server/index.js';