multi-server changes and prototype additions
Change-Id: Icfdf19205bc4123ebd1bea086f01323ec41b4685
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 3258968..54b09f9 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -1,21 +1,34 @@
-<div id="header__wrapper" role="banner">
-<!-- HEADER -->
-<header id="header">
- <span class="app__version float-left">OpenBMC for IBM Power Systems {{dataService.app_version}}</span>
- <a href="" class="header__logout" ng-click="logout()">Log out</a>
-</header>
-<div class="header__functions-wrapper" aria-label="header">
- <div class="logo__wrapper"><img src="assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
- <div class="header__server-name">
- <p class="header__hostname">{{dataService.hostname}}</p>
- <p class="header__server-ip courier-bold">BMC IP address {{dataService.server_id}}</p>
+<div id="header__wrapper">
+ <!-- HEADER -->
+ <header id="header">
+ <span class="app__version float-left">OpenBMC for IBM Power Systems {{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" 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>
+ <div class="inline header__server-name">
+ <p class="header__hostname">{{dataService.hostname}}</p>
+ <p class="header__server-ip courier-bold">BMC IP address {{dataService.server_id}}</p>
+ </div>
+ <div class="header__functions" ng-class="{'active' : toggle}">
+ <a class="header__info" ng-click="toggle = !toggle"><span>Server Info</span><i class="icon icon-angle" aria-hidden="true"></i></a>
+ <a href="#/server-health/event-log" class="header__server-health">Server health
+ <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
+ <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power
+ <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': 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">Data last refreshed<span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span>
+ </p>
+ <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
+ <span>Refresh</span>
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91">
+ <path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/>
+ </button>
+ </div>
</div>
- <div class="header__functions" ng-class="{'active' : toggle}">
- <a class="header__info" ng-click="toggle = !toggle"><span>Server Info</span><i class="icon icon-angle" aria-hidden="true"></i></a>
- <a href="#/server-health/event-log" class="header__server-health">Server health <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
- <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': 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">Data last refreshed<span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span></p>
- <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data"><span>Refresh</span><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91"><path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/></button>
- </div>
</div>
-</div>
+
+<!-- multi-server recent dropdown -->
+<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 cb4704e..6844c9c 100644
--- a/app/common/directives/app-header.js
+++ b/app/common/directives/app-header.js
@@ -80,6 +80,10 @@
$scope.$on('$destroy', function(){
loginListener();
});
+
+ $scope.multiRecent = function(){
+ $scope.multi_server_recent = !$scope.multi_server_recent;
+ };
}]
};
}]);
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index c2c6f67..3be698b 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -65,7 +65,7 @@
</span>
</li>
<li class="btn-multi-server">
- <a ng-class="{opened: firstLevel == 'multi-server'}" href="#/multi-server/overview" ng-click="change('multi-server')">
+ <a ng-class="{opened: firstLevel == 'multi-server'}" href="#/multi-server/overview" ng-click="change('multi-server')" tabindex="6">
<span>
<svg class="nav-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve">
<path d="M12.8,7.3h4c0.2,1.5,1.5,2.8,3.1,2.8c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.5,0-2.7,1-3,2.4h-4C12.4,3.3,9.9,1,6.9,1
@@ -74,7 +74,7 @@
c0-1.7-1.4-3.1-3.1-3.1c-0.6,0-1.3,0.2-1.8,0.6l-4.7-4.7C12.2,9.7,12.7,8.5,12.8,7.3z M2.2,6.9c0-2.6,2.1-4.7,4.7-4.7
s4.7,2.1,4.7,4.7s-2.1,4.7-4.7,4.7S2.2,9.5,2.2,6.9z"/>
</svg>
- Multi Server</span></a>
+ All Servers</span></a>
</li>
</ul>
<ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index b2d90bc..e2d5260 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -133,22 +133,42 @@
}
}
- .header__functions {
- .header__server-power,
- .header__page-refresh,
- .header__server-health,
- .header__info {
- background: $lightgrey;
- @include round-corners;
- margin: 0 .3em;
- height: 100%;
- border: 1px solid $medgrey;
- opacity: 1;
+ .header__server-power,
+ .header__page-refresh,
+ .header__server-health,
+ .header__info,
+ .header__multi-server {
+ background: $lightgrey;
+ @include round-corners;
+ margin: 0 .3em;
+ height: 100%;
+ border: 1px solid $medgrey;
+ opacity: 1;
+ @include fastTransition-all;
+ &:hover {
+ background: rgba(255, 255, 255, 1);
+ }
+ }
+
+ .header__multi-server {
+ padding: .5em;
+ padding-top: .8em;
+ float: left;
+ margin-top: 10px;
+ margin-right: -10px;
+ .icon-angle::before {
+ margin-left: 0;
+ transform: rotate(90deg);
@include fastTransition-all;
- &:hover {
- background: rgba(255, 255, 255, 1);
+ }
+ &.active {
+ .icon-angle::before {
+ transform: rotate(266deg);
+ @include fastTransition-all;
}
}
+ }
+ .header__functions {
.header__info {
padding: .3em;
min-width: 60px;
@@ -176,8 +196,8 @@
}
&.active > .header__info > .icon-angle::before {
- transform: rotate(-360deg);
- @include fastTransition-all;
+ transform: rotate(-360deg);
+ @include fastTransition-all;
}
.header__refresh {
@@ -189,7 +209,6 @@
}
}
}
-
.header__page-refresh {
padding-top: 0;
position: relative;