Change navigation structure
Change-Id: I12c819293ce1eda188dc9f257ae9370f1b73cb18
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 5b2de3d..e9e3f2c 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -1,17 +1,16 @@
<div id="header__wrapper">
<!-- HEADER -->
<!-- Class of status-light__good has 3 states: status-light__good, status-light__error, status-light__disabled -->
-<!-- Server Power buttton links to 'server power operations' page; Server Status may link to event log page. TBD.-->
<header id="header">
<span class="app__version float-left">{{dataService.app_version}}</span>
<a href="" class="header__logout" ng-click="logout()">Log out</a>
</header>
<div class="header__functions-wrapper" role="heading">
<div class="logo__wrapper"><img src="assets/images/logo.svg" id="header__logo" alt="company logo"/></div>
- <button id="header__server-name">{{dataService.server_id}}</button>
+ <button id="header__server-name">Server {{dataService.server_id}}</button>
<div class="header__functions">
- <a href="" id="header__server-health">Server health<span class="status-light__error">{{dataService.server_health}}</span></a>
- <a href="#/overview/power-operations" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__warn': dataService.server_state == 'Quiesced'}">{{dataService.server_state}}</span></a>
+ <a href="#/server-health/event-log" id="header__server-health">Server health<span class="status-light__error">{{dataService.server_health}}</span></a>
+ <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__warn': dataService.server_state == 'Quiesced'}">{{dataService.server_state}}</span></a>
<p class="header__refresh">Page last refreshed <span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span></p>
<button class="header__page-refresh" ng-click="refresh()"><img src="assets/images/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
</div>
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 6a0fb14..ce7e5c6 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -1,65 +1,64 @@
<nav>
<ul id="nav__top-level" ng-style="navStyle">
<li>
- <button class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" ng-click="firstLevel = 'overview';" tabindex="1">
+ <button class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" ng-click="change('overview')" tabindex="1">
- <span class="">Server overview</span></button>
+ <span class="">Server Overview</span></button>
</li>
<li>
- <button class="btn-health" ng-class="{opened: firstLevel == 'health'}" ng-click="firstLevel = 'health';" tabindex="9">
+ <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="9">
- <span>Server health</span></button>
+ <span>Server Health</span></button>
</li>
<li>
- <button class="btn-control" ng-class="{opened: firstLevel == 'control'}" ng-click="firstLevel = 'control';">
+ <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
- <span>Server control</span></button>
+ <span>Server Control</span></button>
</li>
<li>
- <button class="btn-config" ng-class="{opened: firstLevel == 'config'}" ng-click="firstLevel = 'config';">
+ <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
<span>Configuration</span></button>
</li>
<li>
- <button class="btn-firmware" ng-class="{opened: firstLevel == 'firmware'}" ng-click="firstLevel = 'firmware';">
+ <button class="btn-firmware" ng-class="{opened: firstLevel == 'firmware'}" ng-click="change('firmware')">
<span>Firmware</span></button>
</li>
<li>
- <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="firstLevel = 'users';">
+ <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
<span>Users</span></button>
</li>
</ul>
<ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: firstLevel == 'overview'}">
- <li ng-class="{'active': (path == '/overview/system')}" tabindex="2"><a href="#/system-overview">System overview</a></li>
-
+ <li ng-class="{'active': (path == '/overview' || path == '/overview/system')}" tabindex="2"><a href="#/overview/system">System Overview</a></li>
</ul>
- <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: firstLevel == 'health'}">
- <li ng-class="{'active': (path == '/overview/log')}"><a href="#/overview/log" tabindex="7">Event log</a></li>
- <li ng-class="{'active': (path == '/overview/inventory-overview')}"><a href="#/overview/inventory-overview">Hardware Inventory</a></li>
- <li ng-class="{'active': (path == '/overview/sensors-overview') || (path == '/overview/sensors')}"><a href="#/overview/sensors-overview">Sensor data</a></li>
- <li ng-class="{'active': (path == '/overview/power-consumption')}"><a href="" tabindex="4">Power consumption</a></li>
- <li ng-class="{'active': (path == '/overview/unit-id')}"><a href="#/overview/unit-id" tabindex="6">Unit id</a></li>
- <li><a href="">Diagnostics</a></li>
+ <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-health'}">
+ <li ng-class="{'active': (path == '/server-health' || path == '/server-health/event-log')}"><a href="#/server-health/event-log" tabindex="7">Event Log</a></li>
+ <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}"><a href="#/server-health/inventory-overview">Hardware Inventory</a></li>
+ <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}"><a href="#/server-health/sensors-overview">Sensor Data</a></li>
+ <li ng-class="{'active': (path == '/server-health/power-consumption')}"><a href="#/server-health/power-consumption" tabindex="4">Power consumption</a></li>
+ <li ng-class="{'active': (path == '/server-health/unit-id')}"><a href="#/server-health/unit-id" tabindex="6">Unit ID</a></li>
+ <li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics">Diagnostics</a></li>
</ul>
- <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: firstLevel == 'control'}">
- <li ng-class="{'active': (path == '/overview/power-operations')}" tabindex="3"><a href="#/overview/power-operations">Server power operations</a></li>
- <li ng-class="{'active': (path == '/overview/bmc-reboot')}"><a href="#/overview/bmc-reboot" tabindex="8">Reboot BMC</a></li>
- <li ng-class="{'active': (path == '/overview/remote-console')}"><a href="" tabindex="5">Remote console</a></li>
+ <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: firstLevel == 'server-control'}">
+ <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}" tabindex="3"><a href="#/server-control/power-operations">Server power operations</a></li>
+ <li ng-class="{'active': (path == '/server-control/bmc-reboot')}"><a href="#/server-control/bmc-reboot" tabindex="8">Reboot BMC</a></li>
+ <li ng-class="{'active': (path == '/server-control/remote-console')}"><a href="#/server-control/remote-console" tabindex="5">Remote console</a></li>
</ul>
- <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'config'}">
- <li><a href="">Network Configuration</a></li>
- <li><a href="">Date & Time</a></li>
- <li><a href="">Security</a></li>
- <li><a href="">Configuration File</a></li>
+ <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'configuration'}">
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}"><a href="#/configuration/network">Network Configuration</a></li>
+ <li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time">Date & Time</a></li>
+ <li ng-class="{'active': (path == '/configuration/security')}"><a href="#/configuration/security">Security</a></li>
+ <li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file">Configuration File</a></li>
</ul>
<ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: firstLevel == 'firmware'}">
- <li><a href="">BMC Firmawre</a></li>
- <li><a href="">Server Firmware</a></li>
+ <li ng-class="{'active': (path == '/firmware' || path == '/firmware/bmc')}"><a href="#/firmware/bmc">BMC Firmawre</a></li>
+ <li ng-class="{'active': (path == '/firmware/server')}"><a href="#/firmware/server">Server Firmware</a></li>
</ul>
<ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: firstLevel == 'users'}">
- <li><a href="">Manage User Account</a></li>
+ <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}"><a href="#/users/manage-accounts">Manage User Account</a></li>
</ul>
</nav>
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index d09588a..6939a3c 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -11,11 +11,20 @@
'path': '=',
'showNavigation': '='
},
- 'controller': ['$scope', 'dataService', function($scope, dataService){
+ 'controller': ['$scope', '$location', 'dataService', function($scope, $location, dataService){
+ $scope.change = function(firstLevel){
+ $scope.firstLevel = firstLevel;
+ $location.path('/'+firstLevel);
+ }
$scope.$watch('showNavigation', function(){
var paddingTop = 0;
- $scope.firstLevel = 'overview';
- $scope.secondLevel = 'system_overview';
+ var urlRoot = $location.path().split("/")[1];
+ if(urlRoot != ""){
+ $scope.firstLevel = urlRoot;
+ }else{
+ $scope.firstLevel = 'overview';
+ }
+
if($scope.showNavigation){
paddingTop = document.getElementById('header__wrapper').offsetHeight;
}
diff --git a/app/common/directives/dirPagination.tpl.html b/app/common/directives/dirPagination.tpl.html
new file mode 100644
index 0000000..d3c0e41
--- /dev/null
+++ b/app/common/directives/dirPagination.tpl.html
@@ -0,0 +1,18 @@
+<ul class="pagination" ng-if="1 < pages.length || !autoHide">
+ <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
+ <a href="" ng-click="setCurrent(1)">First</a>
+ </li>
+ <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
+ <a href="" ng-click="setCurrent(pagination.current - 1)">Previous</a>
+ </li>
+ <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
+ <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
+ </li>
+
+ <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
+ <a href="" ng-click="setCurrent(pagination.current + 1)">Next</a>
+ </li>
+ <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }">
+ <a href="" ng-click="setCurrent(pagination.last)">Last</a>
+ </li>
+</ul>
\ No newline at end of file
diff --git a/app/common/directives/toggle-flag.js b/app/common/directives/toggle-flag.js
new file mode 100644
index 0000000..aca09ca
--- /dev/null
+++ b/app/common/directives/toggle-flag.js
@@ -0,0 +1,31 @@
+window.angular && (function (angular) {
+ 'use strict';
+
+ angular
+ .module('app.common.directives')
+ .directive('toggleFlag', function ($document) {
+ return {
+ restrict: 'A',
+ link: function (scope, element, attrs) {
+
+ function elementClick(e) {
+ e.stopPropagation();
+ }
+
+ function documentClick(e) {
+ scope[attrs.toggleFlag] = false;
+ scope.$apply();
+ }
+
+ element.on('click', elementClick);
+ $document.on('click', documentClick);
+
+ // remove event handlers when directive is destroyed
+ scope.$on('$destroy', function () {
+ element.off('click', elementClick);
+ $document.off('click', documentClick);
+ });
+ }
+ };
+ });
+})(window.angular);
\ No newline at end of file