Create "Date and time settings" page
There was a Date and time page in the GUI. Enhanced it to
display the BMC time and added it to the menu so users
could navigate to it.
Future things planned for this page:
Setting the time, time mode, and time owner.
Adding a NTP server.
More information can be found in the time manager README:
https://github.com/openbmc/phosphor-time-manager/blob/master/README.md
Tested: See the BMC time.
Change-Id: Ia3ac2385cb45ec8009ed6df0899c3410fe18ef64
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 8c8f88a..36a57d5 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -103,9 +103,11 @@
<a href="#/configuration/network" tabindex="14" ng-click="closeSubnav()">Network settings</a></li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
<a href="#/configuration/firmware" tabindex="15" 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>
</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="16" ng-click="closeSubnav()">Manage user account</a></li>
+ <a href="#/users/manage-accounts" tabindex="17" ng-click="closeSubnav()">Manage user account</a></li>
</ul>
</nav>
diff --git a/app/configuration/controllers/date-time-controller.html b/app/configuration/controllers/date-time-controller.html
index cd760b4..33fc953 100644
--- a/app/configuration/controllers/date-time-controller.html
+++ b/app/configuration/controllers/date-time-controller.html
@@ -1,5 +1,19 @@
+<loader loading="loading"></loader>
<div id="configuration-date-time">
- <div class="row column">
- <h1>Date time</h1>
- </div>
-</div>
\ No newline at end of file
+ <div class="row column">
+ <h1>Date time settings</h1>
+ </div>
+ <div class="page-header">
+ <h2 class="bold h4">Time information</h2>
+ </div>
+ <fieldset>
+ <div class="column large-8">
+ <ul class="date-time__metadata-wrapper">
+ <li class="date-time__metadata-block">
+ <p class="content-label">BMC Time</p>
+ <p class="courier-bold">{{bmc_time | date:'medium'}}</p>
+ </li>
+ </ul>
+ </div>
+ </fieldset>
+</div>
diff --git a/app/configuration/controllers/date-time-controller.js b/app/configuration/controllers/date-time-controller.js
index f743b6a..9eab295 100644
--- a/app/configuration/controllers/date-time-controller.js
+++ b/app/configuration/controllers/date-time-controller.js
@@ -10,9 +10,22 @@
'use strict';
angular.module('app.configuration').controller('dateTimeController', [
- '$scope', '$window', 'APIUtils', 'dataService',
- function($scope, $window, APIUtils, dataService) {
- $scope.dataService = dataService;
+ '$scope', '$window', 'APIUtils',
+ function($scope, $window, APIUtils) {
+ $scope.bmc_time = '';
+ $scope.loading = true;
+
+ var getBMCTimePromise = APIUtils.getBMCTime().then(
+ function(data) {
+ $scope.bmc_time = data.data.Elapsed / 1000;
+ },
+ function(error) {
+ console.log(JSON.stringify(error));
+ });
+
+ getBMCTimePromise.finally(function() {
+ $scope.loading = false;
+ });
}
]);
})(angular);
diff --git a/app/configuration/styles/date-time.scss b/app/configuration/styles/date-time.scss
index e69de29..670e549 100644
--- a/app/configuration/styles/date-time.scss
+++ b/app/configuration/styles/date-time.scss
@@ -0,0 +1,19 @@
+// Date Time SCSS
+
+.date-time__metadata-wrapper {
+ margin: 0;
+ padding: 0;
+}
+
+.date-time__metadata-block {
+ list-style-type: none;
+ width: 47%;
+ margin-bottom: 1.8em;
+ margin-right: .7em;
+ display: inline-block;
+ white-space: normal;
+ word-break: break-all;
+ @include mediaQuery(small) {
+ float: left;
+ }
+}