Adding angular support
Change-Id: I88c1211d661b2c77bcf6b99ceb1fbf2c2eae139c
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 0000000..6469860
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1,45 @@
+angular
+ .module('app', [
+ 'ngRoute',
+ 'app.directives',
+ 'app.services',
+ 'app.controllers'
+ ])
+ .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
+ $locationProvider.hashPrefix('');
+ $routeProvider
+ .when('/login', {
+ 'templateUrl': 'login.html',
+ 'controller': 'loginController'
+ })
+ .when('/dashboard', {
+ 'templateUrl': 'dashboard.html',
+ 'controller': 'dashboardController'
+ })
+ .when('/power-operations', {
+ 'templateUrl': 'power-operations.html',
+ 'controller': 'powerOperationsController'
+ })
+ .when('/system-overview', {
+ 'templateUrl': 'system-overview.html',
+ 'controller': 'systemOverviewController'
+ })
+ .otherwise({
+ 'redirectTo': '/login'
+ });
+ }])
+ .run(['$rootScope', '$location', 'dataService',
+ function($rootScope, $location, dataService){
+ $rootScope.dataService = dataService;
+ dataService.path = $location.path();
+ $rootScope.$on('$locationChangeSuccess', function(event){
+ var path = $location.path();
+ dataService.path = path;
+ if(['/','/login','/logout'].indexOf(path) == -1){
+ dataService.showNavigation = true;
+ }else{
+ dataService.showNavigation = false;
+ }
+ });
+ }
+ ]);
diff --git a/src/js/controllers.js b/src/js/controllers.js
new file mode 100644
index 0000000..a197ab2
--- /dev/null
+++ b/src/js/controllers.js
@@ -0,0 +1,155 @@
+ angular
+ .module('app.controllers', [])
+ .controller('loginController', ['$scope', '$window', 'APIUtils', 'dataService', function($scope, $window, APIUtils, dataService){
+ $scope.login = function(username, password){
+ $scope.error = false;
+ $scope.dataService = dataService;
+ if(!username || username == "" ||
+ !password || password == ""){
+ return false;
+ }else{
+ //@TODO: service should handle
+ if(username == APIUtils.LOGIN_CREDENTIALS.username &&
+ password == APIUtils.LOGIN_CREDENTIALS.password){
+ $window.location.hash = '#/dashboard';
+ }else{
+ $scope.error = true;
+ //@TODO: show error message
+ }
+ }
+ }
+ }])
+ .controller('dashboardController', ['$scope', 'dataService', function($scope, dataService){
+ $scope.dataService = dataService;
+ }])
+ .controller('systemOverviewController', ['$scope', 'dataService', function($scope, dataService){
+ $scope.dataService = dataService;
+ }])
+ .controller('powerOperationsController', ['$scope', 'APIUtils', 'dataService', function($scope, APIUtils, dataService){
+ $scope.dataService = dataService;
+ $scope.confirm = false;
+ $scope.power_confirm = false;
+ $scope.warmboot_confirm = false;
+ $scope.coldboot_confirm = false;
+ $scope.orderly_confirm = false;
+ $scope.immediately_confirm = false;
+
+ //@TODO: call api and get proper state
+ $scope.toggleState = function(){
+ dataService.server_state = (dataService.server_state == 'On') ? 'Off': 'On';
+ }
+
+ $scope.togglePower = function(){
+ var method = (dataService.server_state == 'On') ? 'chassisPowerOff' : 'chassisPowerOn';
+ //@TODO: show progress or set class orange
+ APIUtils[method](function(response){
+ //update state based on response
+ //error case?
+ if(response == null){
+ console.log("Failed request.");
+ }else{
+ dataService.server_state = response;
+ }
+ });
+ }
+ $scope.powerOnConfirm = function(){
+ if($scope.confirm) {
+ return;
+ }
+ $scope.confirm = true;
+ $scope.power_confirm = true;
+ };
+ $scope.warmReboot = function(){
+ //@TODO:show progress
+ APIUtils.hostPowerOff(function(response){
+ if(response){
+ APIUtils.hostPowerOn(function(response){
+ if(response){
+
+ }else{
+ //@TODO:show error message
+ }
+ //@TODO:hide progress, set proper server state
+ });
+ }else{
+ //@TODO:hide progress & show error message
+ }
+ });
+ };
+ $scope.warmRebootConfirm = function(){
+ if($scope.confirm) {
+ return;
+ }
+ $scope.confirm = true;
+ $scope.warmboot_confirm = true;
+ };
+
+ $scope.coldReboot = function(){
+ //@TODO:show progress
+ APIUtils.chassisPowerOff(function(response){
+ if(response){
+ APIUtils.chassisPowerOn(function(response){
+ if(response){
+
+ }else{
+ //@TODO:show error message
+ }
+ //@TODO:hide progress, set proper server state
+ });
+ }else{
+ //@TODO:hide progress & show error message
+ }
+ });
+ };
+ $scope.coldRebootConfirm = function(){
+ if($scope.confirm) {
+ return;
+ }
+ $scope.confirm = true;
+ $scope.coldboot_confirm = true;
+ };
+
+ $scope.orderlyShutdown = function(){
+ //@TODO:show progress
+ APIUtils.hostPowerOff(function(response){
+ if(response){
+ APIUtils.chassisPowerOff(function(response){
+ if(response){
+
+ }else{
+ //@TODO:show error message
+ }
+ //@TODO:hide progress, set proper server state
+ });
+ }else{
+ //@TODO:hide progress & show error message
+ }
+ });
+ };
+ $scope.orderlyShutdownConfirm = function(){
+ if($scope.confirm) {
+ return;
+ }
+ $scope.confirm = true;
+ $scope.orderly_confirm = true;
+ };
+
+ $scope.immediateShutdown = function(){
+ //@TODO:show progress
+ APIUtils.chassisPowerOff(function(response){
+ if(response){
+ //@TODO: set proper server state
+ }else{
+ //@TODO:show error message
+ }
+ //@TODO:hide progress
+ });
+ };
+ $scope.immediateShutdownConfirm = function(){
+ if($scope.confirm) {
+ return;
+ }
+ $scope.confirm = true;
+ $scope.immediately_confirm = true;
+ };
+ }]);
\ No newline at end of file
diff --git a/src/js/directives.js b/src/js/directives.js
new file mode 100644
index 0000000..af78ae7
--- /dev/null
+++ b/src/js/directives.js
@@ -0,0 +1,90 @@
+
+
+angular
+ .module('app.directives', [])
+ .directive('appHeader', ['APIUtils', function(APIUtils){
+
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'header.html',
+ 'scope': {
+ 'path': '='
+ },
+ 'controller': ['$scope','dataService', function($scope, dataService){
+ $scope.server_status = 01;
+ $scope.dataService = dataService;
+ APIUtils.login(function(){
+ APIUtils.getHostState(function(status){
+ if(status == 'xyz.openbmc_project.State.Host.HostState.Off'){
+ $scope.server_status = -1;
+ }else if(status == 'xyz.openbmc_project.State.Host.HostState.Running'){
+ $scope.server_status = 1;
+ }else{
+ $scope.server_status = 0;
+ }
+ });
+ });
+
+ $scope.refresh = function(){
+ console.log("--refresh status--");
+ }
+ }]
+ };
+ }])
+ .directive('appNavigation', function(){
+
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'navigation.html',
+ 'scope': {
+ 'path': '=',
+ 'showNavigation': '='
+ },
+ 'controller': ['$scope', 'dataService', function($scope, dataService){
+ $scope.$watch('showNavigation', function(){
+ var padingTop = 0;
+ $scope.firstLevel = 'overview';
+ $scope.secondLevel = 'system_overview';
+ if($scope.showNavigation){
+ paddingTop = document.getElementById('header__wrapper').offsetHeight;
+ }
+ dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
+ $scope.navStyle = {'top': paddingTop + 'px'};
+ });
+ }]
+ };
+ })
+ .directive('confirm', ['$timeout', function($timeout){
+
+ return {
+ 'restrict': 'E',
+ 'templateUrl': 'confirm.html',
+ 'scope': {
+ 'title': '@',
+ 'message': '@',
+ 'confirm': '=',
+ 'callback': '='
+ },
+ 'controller': ['$scope',function($scope){
+ $scope.cancel = function(){
+ $scope.confirm = false;
+ $scope.$parent.confirm = false;
+ };
+ $scope.accept = function(){
+ $scope.callback();
+ $scope.cancel();
+ }
+ }],
+ link: function(scope, e) {
+ scope.$watch('confirm', function(){
+ if(scope.confirm){
+ $timeout(function(){
+ angular.element(e[0].parentNode).css({'min-height': e[0].querySelector('.power__confirm').offsetHeight + 'px'});
+ }, 0);
+ }else{
+ angular.element(e[0].parentNode).css({'min-height': 0+ 'px'});
+ }
+ });
+ }
+ };
+ }]);
diff --git a/src/js/main.js b/src/js/main.js
deleted file mode 100755
index cc96a73..0000000
--- a/src/js/main.js
+++ /dev/null
@@ -1,106 +0,0 @@
-(function () {
-
- // Init functions
- header();
- nav();
-
- // Load logo
- function loadLogo() {
- $('.logo__wrapper').load('logo.html', function () {
-
- // Grab logo if has ID or not
- var logoID = document.getElementById("header__logo");
- var logo = document.querySelectorAll("img, svg");
-
- // Has ID - call header height
- if (logoID && logoID !== null) {
- getHeaderHeight();
-
- // If logo exists but no ID - call header height
- } else if (logo !== null && logo.length == 1) {
- $('img, svg').on('load', function () {
- getHeaderHeight();
- });
-
- // If no logo at all - call header height
- } else {
- getHeaderHeight();
- }
- });
- }
-
- // Get header height
- function getHeaderHeight() {
- // Get header height after logo is loaded
- var header = document.getElementById("header__wrapper");
- var headerHeight = header.offsetHeight;
-
- // Add body padding to compensate for fixed header
- document.body.style.paddingTop = headerHeight + 'px';
-
- nav(headerHeight);
- }
-
- // Include header
- function header() {
- $('#header__wrapper').load('header.html', function () {
-
- // include logo into header
- loadLogo();
- });
- }
-
- // load navigation - pass in header height
- function nav(height) {
- $('#navigation').load('navigation.html', function (headerHeight) {
-
- var nav = document.getElementById("nav__top-level");
- var subnav = document.getElementsByClassName("nav__second-level");
- var navBtn = document.querySelectorAll('#nav__top-level button');
-
- // Bump down nav to compensate for fixed header
- nav.style.top = height + 'px';
-
- // Bump second level nav down for fixed header
- for (var i = 0; i < subnav.length; i++) {
- subnav[i].style.top = height + 'px';
-
- }
-
- // Set link that matches page url to active
- var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
- $('.nav__second-level li a').each(function() {
- if (this.href === path) {
- $(this).parent().addClass('active');
- }
- });
-
- //Loop over nav buttons
- for (var i = 0, len = navBtn.length; i < len; i++) {
-
- // Click event for each nav button
- navBtn[i].addEventListener('click', function () {
-
- var parent = $(this).parents("#navigation");
- var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
- var subnavClass = $('.nav__second-level.' + btnId);
-
- if(this && this.classList.contains("opened")){
- parent.find(subnavClass).removeClass("opened");
- }
-
- //Remove opened class from buttons
- parent.find('.opened').removeClass('opened');
-
- // Add opened class to clicked button
- this.classList.add("opened");
-
- // add opened class
- parent.find(subnavClass).toggleClass('opened');
-
- });
- }
- });
- }
-
-}());
diff --git a/src/js/services.js b/src/js/services.js
new file mode 100644
index 0000000..38b4b85
--- /dev/null
+++ b/src/js/services.js
@@ -0,0 +1,244 @@
+/**
+chassis
+/org/openbmc/control/chassis0 —> PowerOn ..PowerOff
+
+host reboot
+/org/openbmc/control/host0 —>reboot
+
+shutdown
+/org/openbmc/control/host0 —> shutdown
+**/
+angular
+ .module('app.services', [])
+ .service('dataService', function(){
+ this.app_version = "openBMC V.0.0.1";
+ this.server_health = 'Error';
+ this.server_state = 'On';
+ this.chassis_state = 'On';
+ this.server_id = "Server BLZ_109284.209.01";
+ this.last_updated = new Date();
+
+ this.showNavigation = false;
+ this.bodyStyle = {};
+ this.path = '';
+
+ })
+ .factory('APIUtils', ['$http', function($http){
+ var SERVICE = {
+ LOGIN_CREDENTIALS: {
+ username: "test",
+ password: "testpass",
+ },
+ API_CREDENTIALS: {
+ user: 'root',
+ password: '0penBmc',
+ host: 'https://9.3.164.147'
+ },
+ CHASSIS_POWER_STATE: {
+ on: 'On',
+ off: 'Off'
+ },
+ HOST_STATE: {
+ on: 'Running',
+ off: 'Off',
+ booting: 'Quiesced'
+ },
+ getChassisState: function(callback){
+ $http({
+ method: 'GET',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/chassis0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ callback(content.data.CurrentPowerState);
+ }).error(function(error){
+ console.log(error);
+ });
+ },
+ getHostState: function(callback){
+ $http({
+ method: 'GET',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ callback(content.data.CurrentHostState);
+ }).error(function(error){
+ console.log(error);
+ });
+ },
+ login: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/login",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": [SERVICE.API_CREDENTIALS.user, SERVICE.API_CREDENTIALS.password]})
+ }).success(function(response){
+ if(callback){
+ callback(response);
+ }
+ }).error(function(error){
+ console.log(error);
+ });
+ },
+ chassisPowerOn: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": []})
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content.data.CurrentPowerState);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ },
+ chassisPowerOff: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": []})
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content.data.CurrentPowerState);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ },
+ hostPowerOn: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "xyz/openbmc_project/state/host0/attr/RequestedHostTransition",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": "xyz.openbmc_project.State.Host.Transition.Off"})
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content.data.CurrentHostState);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ },
+ hostPowerOff: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": []}),
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content.data.CurrentHostState);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ },
+ hostReboot: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": []}),
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ },
+ hostShutdown: function(callback){
+ $http({
+ method: 'POST',
+ url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true,
+ data: JSON.stringify({"data": []})
+ }).success(function(response){
+ var json = JSON.stringify(response);
+ var content = JSON.parse(json);
+ if(callback){
+ return callback(content);
+ }
+ }).error(function(error){
+ if(callback){
+ callback(error);
+ }else{
+ console.log(error);
+ }
+ });
+ }
+ };
+ return SERVICE;
+ }]);