Adding angular support
Change-Id: I88c1211d661b2c77bcf6b99ceb1fbf2c2eae139c
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/package.json b/package.json
index b62fee4..1b5f55a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"prebuild": "npm run clean -s",
"scss": "node-sass --output-style compressed -o dist/css src/scss/",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
- "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.min.js && mkdir -p dist/js/vendor && uglifyjs node_modules/zepto/dist/zepto.js -m -o dist/js/vendor/vendor.min.js",
+ "uglify": "mkdir -p dist/js && cat src/js/*.js > dist/js/app.min.js && uglifyjs dist/js/app.min.js -m -o dist/js/app.min.js && mkdir -p dist/js/vendor && cat node_modules/angular/angular.js node_modules/angular-route/angular-route.js node_modules/zepto/dist/zepto.js > dist/js/vendor/vendor.min.js && uglifyjs dist/js/vendor/vendor.min.js -m -o dist/js/vendor/vendor.min.js",
"imagemin": "imagemin src/img/* --out-dir=dist/img/",
"serve": "browser-sync start --server 'dist' --files 'dist/css/*.css, dist/js/*.js, dist/*.html'",
"build:css": "npm run scss && npm run autoprefixer",
@@ -24,6 +24,8 @@
"gzip": "tar -czf openBMC.tar.gz dist"
},
"devDependencies": {
+ "angular": "^1.5.6",
+ "angular-route": "^1.5.6",
"autoprefixer": "^6.6.1",
"browser-sync": "^2.18.6",
"html-minifier": "^3.3.0",
diff --git a/src/confirm.html b/src/confirm.html
new file mode 100644
index 0000000..24674d3
--- /dev/null
+++ b/src/confirm.html
@@ -0,0 +1,11 @@
+<!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row -->
+<div class="power__confirm" ng-class="{active: confirm}">
+ <div class="power__confirm-message">
+ <p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
+ <p>{{message}}</p>
+ </div>
+ <div class="power__confirm-buttons">
+ <button class="btn-primary" ng-click="accept()">Yes</button>
+ <button class="btn-primary" ng-click="cancel()">No</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/header.html b/src/header.html
index 73cb837..2a67741 100644
--- a/src/header.html
+++ b/src/header.html
@@ -1,18 +1,19 @@
+<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">openBMC V.0.0.1</span>
- <a href="index.html" class="header__logout">Log out</a>
+ <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">
- <div class="logo__wrapper"></div>
- <button id="header__server-name">Server BLZ_109284.209.01</button>
+<div class="header__functions-wrapper" role="heading">
+ <div class="logo__wrapper"><img src="img/logo.svg" id="header__logo" alt="company logo"/></div>
+ <button id="header__server-name">{{dataService.server_id}}</button>
<div class="header__functions">
- <a href="" id="header__server-health">Server health<span class="status-light__error">Error</span></a>
- <a href="power-operations.html" class="header__server-power" role="button">Server power<span class="status-light__good">On</span></a>
- <p class="header__refresh">Page last refreshed <span>3:20:12 Feb 12 2017</span></p>
- <button class="header__page-refresh"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
+ <a href="" id="header__server-health">Server health<span class="status-light__error">{{dataService.server_health}}</span></a>
+ <a href="power-operations.html" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': server_status == -1, 'status-light__disabled': server_status == 0, 'status-light__good': server_status == 1}">{{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="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
</div>
-</div>
\ No newline at end of file
+</div>
+</div>
diff --git a/src/index.html b/src/index.html
index c18a53c..e623cd9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,153 +1,21 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="app">
<head>
+ <base href="/">
<meta charset="UTF-8">
<title>openBMC</title>
<link rel="icon" href="favicon.ico?v=2"/>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/vendor.min.js"></script>
- <script>
-
-// var user = 'root';
-// var password = '0penBmc';
-// var ip = 'https://9.3.164.147';
-
- function getList(){
-
- $.ajax({
- type: "GET",
- url: ip + "/xyz/openbmc_project/list",
- dataType: "json",
- async: true,
- xhrFields: {
- withCredentials: true
- },
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- success: function(response){
- var json = JSON.stringify(response);
- var content = JSON.parse(json);
- //console.log(content.data);
-
- for (var i = 0; i < content.data.length; i++) {
- var item = content.data[i];
- console.log(item);
- $('.container').append('<p>' + item + '</p>');
- }
- },
- error: function(xhr, textStatus, errorThrown){
- console.log("not a successful request!");
- console.log(xhr, textStatus, errorThrown)
- }
- });
- }
-
- function getPowerStatus(){
-
- $.ajax({
- type: "GET",
- url: ip + "/xyz/openbmc_project/state/host0",
- dataType: "json",
- async: true,
- xhrFields: {
- withCredentials: true
- },
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- success: function(response){
- var json = JSON.stringify(response);
- var content = JSON.parse(json);
- //console.log(content.data);
- var currentHostState = content.data.CurrentHostState;
- if(currentHostState == "xyz.openbmc_project.State.Host.HostState.Off"){
- $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-off');
- }else{
- $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-on');
- }
- },
- error: function(xhr, textStatus, errorThrown){
- console.log("not a successful request!");
- console.log(xhr, textStatus, errorThrown)
- }
- });
- }
-
- function login() {
- console.log('login!');
-
- var user = 'root';
- var password = '0penBmc';
- var ip = 'https://9.3.164.147';
-
- $.ajax({
- "type": "POST",
- "url": ip + "/login",
- "dataType": "json",
- "async": true,
- "headers": {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- "xhrFields": {
- withCredentials: true
- },
- "data": JSON.stringify({"data": [user, password]}),
- "success": function (response) {
- console.log(response);
- //getList();
- //getPowerStatus();
- alert(JSON.stringify(response));
- window.location.replace("system-overview.html");
-
- },
- "error": function (xhr, textStatus, errorThrown) {
- console.log("not a successful request!");
- console.log(xhr, textStatus, errorThrown)
- }
- });
- }
- </script>
</head>
-<body id="login">
-<div class="login__wrapper">
- <div class="row">
- <div class="columns large-6">
- <img src="img/logo.svg" class="login__logo" alt="IBM logo" role="img"/>
- </div>
- <div class="columns large-6">
- </div>
- </div>
- <div class="row">
- <div class="columns large-6 login__desc">
- <h1>OpenBMC Advanced System Management</h1>
- <ul class="login__server-info">
- <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
- <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
- <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
- <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were display via local JS. -->
- <li><p class="login__info-label">Server power</p><p class="status-light__good">On</p></li>
- <li><p class="login__info-label">Status message</p><!--<p>BMC was reset by user</p>--></li>
- </ul>
- </div>
- <div class="columns large-6">
- <form id="login__form" role="form" action="" >
- <label for="username">Username</label>
- <input type="text" id="username" name="username" required>
+<body ng-style="dataService.bodyStyle" ng-attr-id="{{dataService.path == '/login' ? 'login': ''}}">
- <label for="password">Password</label>
- <input type="password" id="password" name="password" class="" required>
+<app-header ng-if="dataService.showNavigation" path="dataService.path"></app-header>
+<app-navigation ng-if="dataService.showNavigation" path="dataService.path" show-navigation="dataService.showNavigation"></app-navigation>
- <input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button" onclick="login();">
+<main ng-view ng-class="{'content__container': dataService.path != '/login', 'login__wrapper': dataService.path == '/login'}">
+</main>
- <p class="login__error-msg" role="alert">Incorrect username or password</p>
- </form>
- </div>
- </div>
-</div>
<script src="js/app.min.js"></script>
</body>
</html>
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;
+ }]);
diff --git a/src/login.html b/src/login.html
new file mode 100644
index 0000000..ed6f949
--- /dev/null
+++ b/src/login.html
@@ -0,0 +1,36 @@
+<div>
+ <div class="row">
+ <div class="columns large-6">
+ <img src="img/logo.svg" class="login__logo" alt="IBM logo" role="img"/>
+ </div>
+ <div class="columns large-6">
+ </div>
+ </div>
+ <div class="row">
+ <div class="columns large-6 login__desc">
+ <h1>OpenBMC Advanced System Management</h1>
+ <ul class="login__server-info">
+ <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
+ <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
+ <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
+Add a comment to this line
+ <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were isplay via local JS. -->
+ <li><p class="login__info-label">Server power</p><p class="status-light__good">On</p></li>
+ <li><p class="login__info-label">Status message</p><!--<p>BMC was reset by user</p>--></li>
+ </ul>
+ </div>
+ <div class="columns large-6">
+ <form id="login__form" role="form" action="" >
+ <label for="username">Username</label>
+ <input type="text" id="username" name="username" required ng-model="username" ng-class="{error: error}">
+
+ <label for="password">Password</label>
+ <input type="password" id="password" name="password" class="" required ng-model="password">
+
+ <input id="login__submit" class="btn-primary submit" type="button" value="Log in" role="button" ng-click="login(username, password)" ng-class="{error: error}">
+
+ <p class="login__error-msg" role="alert" ng-if="error">Incorrect username or password</p>
+ </form>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/logo.html b/src/logo.html
deleted file mode 100644
index ec78a36..0000000
--- a/src/logo.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="img/logo.svg" id="header__logo" alt="company logo"/>
\ No newline at end of file
diff --git a/src/navigation.html b/src/navigation.html
index e15f82a..aff9329 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -1,8 +1,7 @@
-
-<nav role="navigation">
- <ul id="nav__top-level">
+<nav>
+ <ul id="nav__top-level" ng-style="navStyle">
<li>
- <button class="btn-overview opened" tabindex="1">
+ <button class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" ng-click="firstLevel = 'overview';" tabindex="1">
<svg version="1.1" class="nav__icon" x="0px" y="0px"
viewBox="0 0 20 20">
<g>
@@ -19,24 +18,24 @@
</g>
</svg>
- <span class="" >Overview</span></button>
+ <span class="">Overview</span></button>
</li>
<li>
- <button class="btn-settings" tabindex="6">
+ <button class="btn-settings" ng-class="{opened: firstLevel == 'settings'}" ng-click="firstLevel = 'settings';" tabindex="6">
<svg class="nav__icon" viewBox="0 0 20 20">
<path d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
</svg>
<span>Settings</span></button>
</li>
<li>
- <button class="btn-multi">
+ <button class="btn-multi" ng-class="{opened: firstLevel == 'multi_system'}" ng-click="firstLevel = 'multi_system';">
<svg class="nav__icon" viewBox="0 0 20 20">
<path d="M10,1.529c-4.679,0-8.471,3.792-8.471,8.471c0,4.68,3.792,8.471,8.471,8.471c4.68,0,8.471-3.791,8.471-8.471C18.471,5.321,14.68,1.529,10,1.529 M10,17.579c-4.18,0-7.579-3.399-7.579-7.579S5.82,2.421,10,2.421S17.579,5.82,17.579,10S14.18,17.579,10,17.579 M14.348,10c0,0.245-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.201-0.446-0.446s0.2-0.446,0.446-0.446h5C14.146,9.554,14.348,9.755,14.348,10 M14.348,12.675c0,0.245-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.201-0.446-0.446s0.2-0.445,0.446-0.445h5C14.146,12.229,14.348,12.43,14.348,12.675 M7.394,10c0,0.245-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.201-0.446-0.446s0.201-0.446,0.446-0.446h0.849C7.194,9.554,7.394,9.755,7.394,10 M7.394,12.675c0,0.245-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.201-0.446-0.446s0.201-0.445,0.446-0.445h0.849C7.194,12.229,7.394,12.43,7.394,12.675 M14.348,7.325c0,0.246-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.2-0.446-0.446c0-0.245,0.2-0.446,0.446-0.446h5C14.146,6.879,14.348,7.08,14.348,7.325 M7.394,7.325c0,0.246-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.2-0.446-0.446c0-0.245,0.201-0.446,0.446-0.446h0.849C7.194,6.879,7.394,7.08,7.394,7.325"></path>
</svg>
<span>Multi System</span></button>
</li>
<li>
- <button class="btn-help">
+ <button class="btn-help" ng-class="{opened: firstLevel == 'help'}" ng-click="firstLevel = 'help';">
<svg class="nav__icon" viewBox="0 0 20 20">
<path class="nav__icon-help__outer" d="M10,0.9c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S14.9,0.9,10,0.9"/>
<path class="nav__icon-help__inner" d="M9.2,5.4V3.7h1.5v1.8H9.2z M9.2,16.1v-9h1.5v9H9.2z"/>
@@ -44,25 +43,25 @@
<span>Help</span></button>
</li>
</ul>
- <ul class="nav__second-level btn-overview">
- <li tabindex="2"><a href="system-overview.html">System Overview</a></li>
- <li tabindex="3"><a href="power-operations.html">Server power operations </a></li>
- <li tabindex="4"><a href="power-consumption.html">Power consumption</a></li>
- <li tabindex="5"><a href="remote-console.html">Remote console</a></li>
+ <ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: firstLevel == 'overview'}">
+ <li ng-class="{'active': (path == '/system-overview')}" tabindex="2"><a href="#/system-overview">System Overview</a></li>
+ <li ng-class="{'active': (path == '/power-operations')}" tabindex="3"><a href="#/power-operations">Server power operations</a></li>
+ <li ng-class="{'active': (path == '/power-consumption')}"><a href="" tabindex="4">Power consumption</a></li>
+ <li ng-class="{'active': (path == '/remote-console')}"><a href="" tabindex="5">Remote console</a></li>
</ul>
- <ul class="nav__second-level btn-settings">
+ <ul class="nav__second-level btn-settings" ng-style="navStyle" ng-class="{opened: firstLevel == 'settings'}">
<li><a href="">2nd level 4</a></li>
<li><a href="">2nd level 5</a></li>
<li><a href="">2nd level 6</a></li>
</ul>
- <ul class="nav__second-level btn-multi">
+ <ul class="nav__second-level btn-multi" ng-style="navStyle" ng-class="{opened: firstLevel == 'multi_system'}">
<li><a href="">2nd level 7</a></li>
<li><a href="">2nd level 8</a></li>
<li><a href="">2nd level 9</a></li>
</ul>
- <ul class="nav__second-level btn-help">
+ <ul class="nav__second-level btn-help" ng-style="navStyle" ng-class="{opened: firstLevel == 'help'}">
<li><a href="">2nd level 10</a></li>
<li><a href="">2nd level 212</a></li>
- <li><a href="">2nd level 312</a></li>
+ <li><a href="">2nd level 312</a></li>
</ul>
</nav>
diff --git a/src/power-operations.html b/src/power-operations.html
index d793678..f2db772 100644
--- a/src/power-operations.html
+++ b/src/power-operations.html
@@ -1,20 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>openBMC</title>
- <link rel="icon" href="favicon.ico?v=2"/>
- <link rel="stylesheet" href="css/main.css">
- <script src="js/vendor/vendor.min.js"></script>
-</head>
-<body>
+<div id="power-operations">
-<!-- Header & Navigation includes -->
-<div id="header__wrapper"></div>
-<div id="navigation"></div>
-
-<!-- Power Operations Content -->
-<main id="power-operations" class="content__container" role="main">
<div class="row column">
<h1>Server power operation</h1>
</div>
@@ -23,13 +8,13 @@
<div class="row column">
<div class="power__current-status ">
<h2 class="inline h4">Current status</h2>
- <span class="power__status-log inline float-right">Server last reset at 01:41:24 on 02/17/17</span>
+ <span class="power__status-log inline float-right">Server last reset at {{dataService.last_updated |date:'h:mm:ss on MM/dd/yyyy'}}</span>
</div>
</div>
<div class="row column">
- <div id="power-indicator-bar" class="power__indicator-bar power__state-on">
- <p class="inline">Server BLZ_109284.209.01</p>
- <h3 class="power__state inline float-right"><span>On</span></h3>
+ <div id="power-indicator-bar" class="power__indicator-bar" ng-class="{'power__state-on': dataService.server_state == 'On', 'power__state-off': dataService.server_state == 'Off'}">
+ <p class="inline">{{dataService.server_id}}</p>
+ <h3 class="power__state inline float-right h3"><span>{{dataService.server_state}}</span></h3>
</div>
</div>
<div class="row column">
@@ -38,105 +23,33 @@
</div>
<!-- Power on displays only when server is shutdown -->
- <div class="row column power-option">
- <button id="power__power-on" class="btn-secondary" role="button">Power On</button>
+ <div class="row column power-option" ng-hide="dataService.server_state == 'On'" ng-class="{disabled: confirm && !power_confirm, transitionAll: confirm && power_confirm}">
+ <button id="power__power-on" class="btn-secondary" ng-click="powerOnConfirm()" role="button">Power On</button>
<p>Attempts to power on the server</p>
+
+ <confirm title="power off" message="Power off the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>
</div>
<!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
- <div class="row column power-option">
- <button id="power__warm-boot" class="btn-secondary" role="button">Warm reboot</button>
+ <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !warmboot_confirm, transitionAll: confirm && warmboot_confirm}">
+ <button id="power__warm-boot" class="btn-secondary" ng-click="warmRebootConfirm()" role="button">Warm reboot</button>
<p>Attempts to perform an orderly shutdown before restarting the server</p>
+ <confirm title="Warm Reboot" message="perform an orderly shutdown" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
</div>
- <div class="row column power-option">
- <button id="power__cold-boot" class="btn-secondary" role="button">Cold reboot</button>
+ <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !coldboot_confirm, transitionAll: confirm && coldboot_confirm}">
+ <button id="power__cold-boot" class="btn-secondary" ng-click="coldRebootConfirm()" role="button">Cold reboot</button>
<p>Shuts down the server immediately, then restarts it</p>
+ <confirm title="Cold Reboot" message="Shutdown server immediately." confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="toggleState"></confirm>
</div>
- <div class="row column power-option">
- <button id="power__soft-shutdown" class="btn-secondary" role="button">Orderly shutdown</button>
+ <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !orderly_confirm, transitionAll: confirm && orderly_confirm}">
+ <button id="power__soft-shutdown" class="btn-secondary" ng-click="orderlyShutdownConfirm()" role="button">Orderly shutdown</button>
<p>Attempts to stop all software on the server before removing power</p>
+ <confirm title="Orderly shutdown" message="Attempts to stop all software orderly." confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="toggleState"></confirm>
</div>
- <div class="row column power-option">
- <button id="power__hard-shutdown" class="btn-secondary" role="button">Immediate shutdown</button>
+ <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !immediately_confirm, transitionAll: confirm && immediately_confirm}">
+ <button id="power__hard-shutdown" class="btn-secondary" ng-click="immediateShutdownConfirm()" role="button">Immediate shutdown</button>
<p>Removes power from the server without waiting for software to stop</p>
-
- <!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row
-
- var msgheight = $(this).parent().find('.power__confirm').height();
- $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
- -->
-
- <div class="power__confirm">
- <div class="power__confirm-message">
- <p class="h3"><i></i>Are you sure you want to <strong>immediate shutdown?</strong></p>
- <p>Removes power from the server without waiting for software to stop</p>
- </div>
- <div class="power__confirm-buttons">
- <button class="btn-primary">Yes</button>
- <button class="btn-primary">No</button>
- </div>
- </div>
+ <confirm title="Immediate shutdown" message="Removes power from the server immediately." confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="toggleState"></confirm>
</div>
</div>
-</main>
-
-</body>
-<script src="js/app.min.js"></script>
-
-<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
-<script>
-
- var pwrOn = $("#power__power-on"),
- endTransition = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
- pwrOps = '#power-operations';
-
- pwrOn.parent().hide();
-
- $('#power__hard-shutdown').on('click', function () {
-
- var msgheight = $(this).parent().find('.power__confirm').height();
- $(this).addClass('disabled');
- $(this).parents(pwrOps).find('.power__confirm').addClass('active');
- $(this).parents(pwrOps).find('.power-option, .btn-secondary').addClass('disabled');
- $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
- $(this).parents(pwrOps).find('.power-option.disabled button').attr("disabled", true).addClass('disabled');
- });
-
- pwrOn.on('click', function () {
- var srvrPwr = $(".header__server-power");
-
- $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
- $(this).parents(pwrOps).find('.power-option').show();
- $(this).parents(".power-option").hide();
- $(".power__state span").one(endTransition,
- function() {
- $(this).parents(pwrOps).find('.power__state span').html('On');
- $(this).parents(pwrOps).find('.power-option.disabled').show();
- $(this).parents(pwrOps).find('.power-option.disabled button').removeAttr("disabled", true).removeClass('disabled');
- $(".power-option, .power__confirm-buttons").removeClass("disabled");
- srvrPwr.find(".status-light__disabled").removeClass("status-light__disabled").addClass("status-light__good");
- srvrPwr.find("span").text('On');
- });
- });
-
- $('.btn-primary').on('click', function(){
-
- var srvrPwr = $(".header__server-power"),
- pwrOnDisabl = $("#power__power-on.disabled");
-
- $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
- $(this).parents(pwrOps).find('.power__confirm').removeClass('active');
- $(this).parent().addClass('disabled');
- $(this).parents('.power-option').addClass('disabled');
- $(".power__state span").one(endTransition,
- function(e) {
- $(this).parents(pwrOps).find('.power__state span').html('Off');
- $(this).parents(pwrOps).find('.power-option.disabled').hide();
- pwrOnDisabl.parent().show().removeClass('disabled');
- pwrOnDisabl.removeAttr("disabled").removeClass('disabled');
- srvrPwr.find(".status-light__good").removeClass("status-light__good").addClass("status-light__disabled");
- srvrPwr.find("span").text('Off');
- });
- });
-</script>
-</html>
+</div>
\ No newline at end of file
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
index 5cc38d4..5f239df 100644
--- a/src/scss/base/_buttons.scss
+++ b/src/scss/base/_buttons.scss
@@ -1,4 +1,4 @@
-button, .button, input[type="submit"] {
+button, .button, input[type="submit"], .submit {
font-weight: bold;
font-size: 1em;
text-transform: none;
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 074ba14..134537d 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -40,7 +40,7 @@
textarea { padding: .2em;
height: auto;}
-input[type="submit"] {
+input[type="submit"], .submit {
margin: 1em 0;
width: 100%;
}
diff --git a/src/system-overview.html b/src/system-overview.html
index ae2368d..9f6a126 100644
--- a/src/system-overview.html
+++ b/src/system-overview.html
@@ -1,26 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>openBMC</title>
- <link rel="icon" href="favicon.ico?v=2"/>
- <link rel="stylesheet" href="css/main.css">
- <script src="js/vendor/vendor.min.js"></script>
-</head>
-<body>
-
-<!-- Header & Navigation includes -->
-<div id="header__wrapper"></div>
-<div id="navigation"></div>
-
-<!-- Power Operations Content -->
-<main id="power-operations" class="content__container" role="main">
- <div class="row column">
- <h1>System Overview</h1>
- <p>System overview will be here.</p>
- </div>
-</main>
-
-</body>
-<script src="js/app.min.js"></script>
-</html>
+<div class="row column">
+ <h1>System Overview</h1>
+ <p>System overview will be here.</p>
+</div>
\ No newline at end of file