Modernize web GUI and make it installable on BMC
1. Move from gulp server to webpack. This allows the proper
compression to allow the webui to be embedded in the BMC.
2. Update js paths to use requires, not hardcoded paths. This was
required to make the packaging work correctly.
3. Add babel config to do translation.
4. Update angularjs directive calls to use the angular 1.6 syntax for
promises intead of success and fail.
https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http
5. As a consequence of using NPM/webpack, the versions of angular and
associated modules that were checked in have been updated.
Change-Id: Icb71e2eedb0d9a8943fc914f9dc4be11d0983c00
Signed-off-by: Ed Tanous <ed.tanous@intel.com>
Signed-off-by: Brad Bishop <bradleyb@fuzziesquirrel.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 0ba8607..e5071e4 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -5,7 +5,7 @@
<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" class="header__logo" alt="company logo"/></div>
+ <div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
<!-- <button class="inline header__multi-server" aria-label="multi server select" ng-class="{'active': multi_server_recent}" ng-click="multiRecent();">
<span class="icon icon-angle" aria-hidden="true"></span><span class="accessible-text">Multi server switcher</span>
</button>-->
@@ -31,4 +31,4 @@
</div>
<!-- multi-server recent dropdown -->
-<div ng-include="" src="'multi-server/controllers/multi-server-recent-controller.html'"></div>
\ No newline at end of file
+<div ng-include="" src="'multi-server/controllers/multi-server-recent-controller.html'"></div>
diff --git a/app/common/directives/app-header.js b/app/common/directives/app-header.js
index 6844c9c..69a9c7b 100644
--- a/app/common/directives/app-header.js
+++ b/app/common/directives/app-header.js
@@ -6,7 +6,7 @@
.directive('appHeader', ['APIUtils', function (APIUtils) {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/app-header.html',
+ 'template': require('./app-header.html'),
'scope': {
'path': '='
},
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index daccb2f..2b7ad32 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -6,7 +6,7 @@
.directive('appNavigation', function () {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/app-navigation.html',
+ 'template': require('./app-navigation.html'),
'scope': {
'path': '=',
'showNavigation': '='
diff --git a/app/common/directives/confirm.js b/app/common/directives/confirm.js
index ed8c9dc..5bb699a 100644
--- a/app/common/directives/confirm.js
+++ b/app/common/directives/confirm.js
@@ -6,7 +6,7 @@
.directive('confirm', ['$timeout', function($timeout){
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/confirm.html',
+ 'template': require('./confirm.html'),
'scope': {
'title': '@',
'message': '@',
diff --git a/app/common/directives/firmware-list.js b/app/common/directives/firmware-list.js
index 6cfa3a1..781257e 100644
--- a/app/common/directives/firmware-list.js
+++ b/app/common/directives/firmware-list.js
@@ -6,7 +6,7 @@
.directive('firmwareList', ['APIUtils', function (APIUtils) {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/firmware-list.html',
+ 'template': require('./firmware-list.html'),
'scope': {
'title': '@',
'firmwares': '=',
diff --git a/app/common/directives/loader.js b/app/common/directives/loader.js
index 9a06055..b37a898 100644
--- a/app/common/directives/loader.js
+++ b/app/common/directives/loader.js
@@ -6,11 +6,11 @@
.directive('loader', function () {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/loader.html',
+ 'template': require('./loader.html'),
scope: {
loading: '='
}
};
});
-})(window.angular);
\ No newline at end of file
+})(window.angular);
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 350cc8d..970598d 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -41,7 +41,7 @@
<div>
<div class="event__actions">
<button class="btn-meta-copy" clipboard text="event.additional_data" on-copied="copySuccess(event)" on-error="copyfailed(err)">
- <img class="event__icon" src="assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
+ <img class="event__icon" src="../../assets/images/icon-copy.svg" alt=""/><span ng-if="!event.copied">Copy</span><span ng-if="event.copied">Copied</span>
</button>
<button
class="btn-delete"
@@ -50,10 +50,10 @@
ng-disabled="multiSelected">
<img
class="event__icon"
- src="assets/images/icon-trashcan.svg"
+ src="../../assets/images/icon-trashcan.svg"
alt=""/>Delete
</button>
- <button class="btn-resolve" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected"><img class="event__icon" src="assets/images/icon-check.svg" alt=""/>Mark as resolved</button>
+ <button class="btn-resolve" ng-class="{'disabled': (event.Resolved == 1 || multiSelected)}" ng-click="resolveEvent(event)" ng-disabled="event.Resolved == 1 || multiSelected"><img class="event__icon" src="../../assets/images/icon-check.svg" alt=""/>Mark as resolved</button>
</div>
<div class="event__related" ng-show="event.related_items.length">
<p class="inline event__related-label">Related items:</p>
@@ -62,4 +62,4 @@
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/common/directives/log-event.js b/app/common/directives/log-event.js
index 51bb5dd..e858239 100644
--- a/app/common/directives/log-event.js
+++ b/app/common/directives/log-event.js
@@ -6,7 +6,7 @@
.directive('logEvent', ['APIUtils', function (APIUtils) {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/log-event.html',
+ 'template': require('./log-event.html'),
'scope': {
'event': '=',
'tmz': '=',
diff --git a/app/common/directives/log-filter.js b/app/common/directives/log-filter.js
index 527d347..bc2da0e 100644
--- a/app/common/directives/log-filter.js
+++ b/app/common/directives/log-filter.js
@@ -6,7 +6,7 @@
.directive('logFilter', ['APIUtils', function (APIUtils) {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/log-filter.html',
+ 'template': require('./log-filter.html'),
'controller': ['$rootScope', '$scope','dataService', '$location', function($rootScope, $scope, dataService, $location){
$scope.dataService = dataService;
$scope.toggleSeverityAll = function(){
diff --git a/app/common/directives/log-search-control.js b/app/common/directives/log-search-control.js
index b198f2d..c610c18 100644
--- a/app/common/directives/log-search-control.js
+++ b/app/common/directives/log-search-control.js
@@ -6,7 +6,7 @@
.directive('logSearchControl', ['APIUtils', function (APIUtils) {
return {
'restrict': 'E',
- 'templateUrl': 'common/directives/log-search-control.html',
+ 'template': require('./log-search-control.html'),
'controller': ['$rootScope', '$scope','dataService', '$location', function($rootScope, $scope, dataService, $location){
$scope.dataService = dataService;
$scope.doSearchOnEnter = function (event) {
diff --git a/app/common/services/api-utils.js b/app/common/services/api-utils.js
index a7a6a58..3d0f853 100644
--- a/app/common/services/api-utils.js
+++ b/app/common/services/api-utils.js
@@ -31,11 +31,11 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
callback(content.data.CurrentPowerState);
- }).error(function(error){
+ }, function(error){
console.log(error);
});
},
@@ -48,11 +48,11 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
callback(content.data.CurrentHostState);
- }).error(function(error){
+ }, function(error){
console.log(error);
});
},
@@ -66,8 +66,8 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
var hostname = "";
var macAddress = "";
@@ -139,7 +139,7 @@
mac_address: macAddress,
formatted_data: parseNetworkData(content)
});
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -155,11 +155,11 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content.data.Asserted);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -175,11 +175,11 @@
},
withCredentials: true,
data: JSON.stringify({"data": [username, password]})
- }).success(function(response){
+ }).then(function(response){
if(callback){
- callback(response);
+ callback(response.data);
}
- }).error(function(error){
+ }, function(error){
if(callback){
if(error && error.status && error.status == 'error'){
callback(error);
@@ -200,11 +200,11 @@
},
withCredentials: true,
data: JSON.stringify({"data": []})
- }).success(function(response){
+ }).then(function(response){
if(callback){
callback(response);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(null, error);
}
@@ -221,13 +221,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": []})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.data.CurrentPowerState);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -245,13 +245,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": []})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.data.CurrentPowerState);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -269,13 +269,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": state})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.status);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -293,13 +293,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": "xyz.openbmc_project.State.BMC.Transition.Reboot"})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.status);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -317,13 +317,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": "xyz.openbmc_project.State.Host.Transition.On"})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.status);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -341,13 +341,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": "xyz.openbmc_project.State.Host.Transition.Off"})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content.status);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -365,13 +365,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": []}),
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -389,13 +389,13 @@
},
withCredentials: true,
data: JSON.stringify({"data": []})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
if(callback){
return callback(content);
}
- }).error(function(error){
+ }, function(error){
if(callback){
callback(error);
}else{
@@ -413,8 +413,8 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
var dataClone = JSON.parse(JSON.stringify(content.data));
var data = [];
@@ -455,7 +455,7 @@
}
}
deferred.resolve({data: data, original: dataClone});
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -471,8 +471,8 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
var dataClone = JSON.parse(JSON.stringify(content.data));
var sensorData = [];
@@ -586,7 +586,7 @@
}
callback(sensorData, dataClone);
- }).error(function(error){
+ }, function(error){
console.log(error);
});
},
@@ -600,8 +600,8 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
var data = [];
var active = false;
@@ -681,7 +681,7 @@
bmcActiveVersion: bmcActiveVersion,
hostActiveVersion: hostActiveVersion
});
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -699,11 +699,11 @@
},
withCredentials: true,
data: JSON.stringify({"data": priority})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -721,11 +721,11 @@
},
withCredentials: true,
data: JSON.stringify({"data": []})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -743,11 +743,11 @@
},
withCredentials: true,
data: JSON.stringify({"data": Constants.FIRMWARE.ACTIVATE_FIRMWARE})
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -765,11 +765,11 @@
},
withCredentials: true,
data: file
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -788,13 +788,13 @@
withCredentials: true,
data: JSON.stringify({"data": [host, filename]}),
responseType: 'arraybuffer'
- }).success(function(response, status, headers){
+ }).then(function(response, status, headers){
deferred.resolve({
data: response,
status: status,
headers: headers
});
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -811,11 +811,11 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content.data);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -832,11 +832,11 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
deferred.resolve(content.data);
- }).error(function(error){
+ }, function(error){
console.log(error);
deferred.reject(error);
});
@@ -851,8 +851,8 @@
'Content-Type': 'application/json'
},
withCredentials: true
- }).success(function(response){
- var json = JSON.stringify(response);
+ }).then(function(response){
+ var json = JSON.stringify(response.data);
var content = JSON.parse(json);
var hardwareData = [];
var keyIndexMap = {};
diff --git a/app/common/services/apiInterceptor.js b/app/common/services/apiInterceptor.js
index d1a23ad..8bbb6f4 100644
--- a/app/common/services/apiInterceptor.js
+++ b/app/common/services/apiInterceptor.js
@@ -43,14 +43,19 @@
return response;
},
'responseError': function(rejection){
- dataService.server_unreachable = true;
- dataService.loading = false;
- if(dataService.path != '/login'){
- $rootScope.$emit('timedout-user', {});
+ // If unauthorized, log out
+ if (rejection.status == 401){
+ if (dataService.path != '/login'){
+ $rootScope.$emit('timedout-user', {});
+ }
+ } else if (rejection.status == -1){
+ dataService.server_unreachable = true;
}
+
+ dataService.loading = false;
return $q.reject(rejection);
}
};
}]);
-})(window.angular);
\ No newline at end of file
+})(window.angular);
diff --git a/app/common/services/constants.js b/app/common/services/constants.js
index 76bc590..373fab1 100644
--- a/app/common/services/constants.js
+++ b/app/common/services/constants.js
@@ -12,7 +12,7 @@
'use strict';
angular
- .module('app.common.services')
+ .module('app.common.services', [])
.service('Constants', function () {
return {
LOGIN_CREDENTIALS: {
@@ -122,4 +122,4 @@
};
});
-})(window.angular);
\ No newline at end of file
+})(window.angular);
diff --git a/app/common/services/userModel.js b/app/common/services/userModel.js
index a3fc277..2c9de65 100644
--- a/app/common/services/userModel.js
+++ b/app/common/services/userModel.js
@@ -20,8 +20,9 @@
},
login : function(username, password, callback){
APIUtils.login(username, password, function(response, error){
- if(response &&
- response.status == APIUtils.API_RESPONSE.SUCCESS_STATUS){
+ if(response &&
+ (response.status == APIUtils.API_RESPONSE.SUCCESS_STATUS
+ || response.status === undefined)){
sessionStorage.setItem('LOGIN_ID', username);
callback(true);
}else{
@@ -52,4 +53,4 @@
};
}]);
-})(window.angular);
\ No newline at end of file
+})(window.angular);
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 47523fe..43d3669 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -65,7 +65,7 @@
.icon__warning {
@include status-icon;
- background-image: url(/assets/images/icon-warning.svg);
+ background-image: url(../assets/images/icon-warning.svg);
}
.modal .icon__warning {
@@ -75,32 +75,32 @@
.icon__critical {
@include status-icon;
- background-image: url(/assets/images/icon-critical.svg);
+ background-image: url(../assets/images/icon-critical.svg);
}
.icon__good {
@include status-icon;
- background-image: url(/assets/images/icon-on.svg);
+ background-image: url(../assets/images/icon-on.svg);
}
.icon__off {
@include status-icon;
- background-image: url(/assets/images/icon-off.svg);
+ background-image: url(../assets/images/icon-off.svg);
}
.icon__return {
@include status-icon;
- background-image: url(/assets/images/icon-return.svg);
+ background-image: url(../assets/images/icon-return.svg);
}
.icon__standby {
@include status-icon;
- background-image: url(/assets/images/icon-standby.svg);
+ background-image: url(../assets/images/icon-standby.svg);
}
.icon__plus {
@include status-icon;
- background-image: url(/assets/images/icon-plus.svg);
+ background-image: url(../assets/images/icon-plus.svg);
}
.icon__info{
@@ -115,14 +115,14 @@
.icon__up-arrow {
margin-right: .4em;
margin-bottom: -15px;
- background: url(/assets/images/icon-arrow-blue.svg) center center no-repeat;
+ background: url(../assets/images/icon-arrow-blue.svg) center center no-repeat;
height: 40px;
width: 30px;
&.icon-as-spacer {
- background: url(/assets/images/icon-arrow-gray.svg) center center no-repeat;
+ background: url(../assets/images/icon-arrow-gray.svg) center center no-repeat;
}
}
.icon__down-arrow {
@extend .icon__up-arrow;
transform: rotate(180deg);
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 677a4ba..757ff26 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -10,4 +10,4 @@
@import "tags";
@import "export";
@import "modals";
-@import "quicklinks";
\ No newline at end of file
+@import "quicklinks";
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
index d2fff03..e6f9bc7 100644
--- a/app/common/styles/elements/tags.scss
+++ b/app/common/styles/elements/tags.scss
@@ -104,7 +104,7 @@
&.high-priority {
color: $critical-lightbg;
background-color: rgba( $critical-lightbg, .4 );
- background-image: url(/assets/images/crit-x.svg);
+ background-image: url(../assets/images/crit-x.svg);
border-color: $critical-lightbg;
&:before {
content: '';
@@ -123,7 +123,7 @@
}
&.warn-priority {
border-color: $warning-lightbg;
- background-image: url(/assets/images/warn-slash.svg);
+ background-image: url(../assets/images/warn-slash.svg);
background-color: rgba($thresh-warning, .3);
}
&.normal-priority {
@@ -137,4 +137,4 @@
background: $purple;
padding: 2px 1em;
}
-}
\ No newline at end of file
+}