Move to Bootstrap 4
Bootstrap < 4.1.2 has the following CVE:
https://nvd.nist.gov/vuln/detail/CVE-2018-14041
Removed bootstrap-theme.css due to "Replaced the separate optional
theme with configurable options via SCSS variables
(e.g., $enable-gradients: true)."
Added "width: 100%" to a few places where width 100% was no longer
getting inherited.
Moved a few elements and adjusted styles to get the same look as
before.
See https://getbootstrap.com/docs/4.0/migration/ for more
information.
Tested: Manually on a Witherspoon.
Change-Id: I0a72665ac1ca6eacd0b553a585b1fb15e14ae62c
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/common/directives/log-search-control.html b/app/common/directives/log-search-control.html
index 113e9f0..1184bda 100644
--- a/app/common/directives/log-search-control.html
+++ b/app/common/directives/log-search-control.html
@@ -1,9 +1,11 @@
-<p class="content-label">Filter events</p>
-<div class="content__search">
- <label for="content__search-input">Event Log Search</label>
- <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
- <div class="search-submit__wrapper">
- <button class="clear-input" ng-click="clear()">✕</button>
- <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+<section id="event-search" class="row column" aria-label="event log search">
+ <p class="content-label">Filter events</p>
+ <div class="content__search">
+ <label for="content__search-input">Event Log Search</label>
+ <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+ <div class="search-submit__wrapper">
+ <button class="clear-input" ng-click="clear()">✕</button>
+ <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+ </div>
</div>
-</div>
+</section>
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 84982b3..01c0632 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -18,6 +18,10 @@
width: 100%;
}
+.table__body {
+ width: 100%;
+}
+
.table__row {
display: flex;
width: 100%;
@@ -76,6 +80,7 @@
// Table Head
.table__head {
+ width: 100%;
.table__row {
display: none;
font-weight: 700;
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 6dd7e77..7448827 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -1,9 +1,7 @@
// toggle buttons for filtering
.toggle-filter {
display: inline-block;
- @media (min-width: 1300px) {
- margin-top: -25px;
- }
+
.content-label {
margin-bottom: .4em;
}
@@ -32,4 +30,4 @@
.btn-primary {
border: 2px solid $primebtn__bg;
}
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index ad5e74f..5a58478 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -4,13 +4,14 @@
// Page header
.page-header {
+ width: 100%;
position: relative;
border-bottom: 1px solid $lightbg__grey;
margin: .5em 0 2.2em;
padding-left: 0;
.h4 {
padding: .1em 0 0 0;
- margin: 0 0 .5em 0;
+ margin: 0 0 1em 0;
font-weight: bold;
}
}
@@ -45,4 +46,4 @@
.subhead {
border-bottom: 1px solid $medgrey;
padding-bottom: .5em;
-}
\ No newline at end of file
+}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index d776d13..b194d0d 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -21,6 +21,7 @@
padding-left: 1.8em;
}
.net-config__static-ip-wrap {
+ width: 100%;
padding-left: 0;
padding-top: 1em;
display: block;
diff --git a/app/index.js b/app/index.js
index 3cefde1..9a108a0 100644
--- a/app/index.js
+++ b/app/index.js
@@ -8,7 +8,6 @@
*/
import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap/dist/css/bootstrap-theme.css';
import angular from 'angular';
import angular_animate from 'angular-animate';
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 48ede3e..a548675 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -121,13 +121,6 @@
<a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'-Id'|limitTo : 5">
<div class="row column event-log__single-event">
<div class="row">
- <div class="column small-1 large-1 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
- ng-checked="event.selected"/>
- <span class="control__indicator"></span>
- </label>
- </div>
<div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
<p class="inline event__id">#{{event.Id}}</p>
<p class="inline event__priority high-priority">High</p>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index 0169480..01b7bc9 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -1,3 +1,7 @@
+.row {
+ width: 100%;
+}
+
.overview__server-metadata {
border-bottom: 1px solid $medgrey;
padding: 1.8em 0 0 0;
@@ -46,4 +50,4 @@
text-align: right;
font-size: .8em;
color: $darkgrey;
-}
\ No newline at end of file
+}
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index cb2e190..3228fbd 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -31,6 +31,7 @@
// Power bar indicator
.power__indicator-bar {
font-weight: bold;
+ width: 100%;
padding: 1em 2em .7em;
margin-bottom: 3em;
background-size: 200% 100%;
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 62bd831..7aadc11 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -21,15 +21,10 @@
</div>
</div>
</section>
- <!-- Filters -->
- <section class="row column">
- <!-- search -->
- <log-search-control></log-search-control>
- <!-- filters -->
- <log-filter></log-filter>
- </section>
- <!-- end filter -->
-
+ <!-- search -->
+ <log-search-control></log-search-control>
+ <!-- filters -->
+ <log-filter></log-filter>
<section id="event-log__events" class="row column">
<div id="event__actions-bar" class="row header__actions-bar no-margin">
<div class="column small-1 large-1 event-log__col-check">
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 17030ba..5d510aa 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -19,8 +19,8 @@
<button class="clear-input" ng-click="clear()">✕</button>
<input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
</div>
+ </div> <!-- end search -->
- </div>
<div class="toggle-filter">
<p class="content-label">FILTER BY SEVERITY</p>
<button class="inline first btn-primary" ng-click="toggleSeverityAll()"
@@ -37,7 +37,7 @@
</button>
</div>
- </section> <!-- end search -->
+ </section>
<section class="row column" ng-show="filteredSensorData.length == 0">
<!-- message -->
@@ -69,4 +69,4 @@
<p class="inline sensor__reading"><span class="sensor__label">High critical</span>{{sensor.CriticalHigh}}<span class="content-label">{{sensor.unit}}<span ng-if="sensor.unit == 'C'">°</span></p>
</div>
</section>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index 42de893..cf6f2b4 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -23,6 +23,7 @@
text-decoration: none;
border-left: 1px solid $medgrey;
border-right: 1px solid $medgrey;
+ width: 100%;
border-bottom: 0;
vertical-align: middle;
@include fastTransition-all;
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 50c19b6..6096acb 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -1,6 +1,9 @@
// Event Log SCSS
#event-log {
+ .row {
+ width: 100%;
+ }
// Dropwdowns filter
.dropdown__date.row {
padding: .5em;
@@ -268,7 +271,7 @@
font-weight: 400;
margin-left: 1em;
@include mediaQuery(small) {
- margin-left: 4.5em;
+ margin-left: 1.5em;
margin-right: 1em;
}
word-break: break-all;
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index fa44a46..a2246d7 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -51,6 +51,7 @@
}
.sensor__readings-row {
+ width: 100%;
position: relative;
display: block;
margin: 0;
@@ -137,15 +138,9 @@
#sensors, #sensors-overview {
- .content__search {
- max-width: 100%;
- @media(min-width: 1300px) {
- max-width: 59%;
- }
- }
.toggle-filter {
margin-right: 0;
}
}
-//end sensor details
\ No newline at end of file
+//end sensor details
diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index 914388a..891b3a9 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,7 +1,9 @@
$userInputHeight: 40px;
.user-manage__form {
+ width: 100%;
label {
+ width: 100%;
min-width: 210px;
font-weight: 700;
margin-right: 4em;
diff --git a/package-lock.json b/package-lock.json
index 02b0b65..eef6667 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1691,9 +1691,9 @@
"dev": true
},
"bootstrap": {
- "version": "3.3.7",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
- "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+ "version": "4.1.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+ "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
},
"brace-expansion": {
"version": "1.1.11",
diff --git a/package.json b/package.json
index 9cb77ce..1536539 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
"angular-ui-router": "^1.0.20",
"angular-websocket": "^2.0.1",
"angularUtils": "git+https://github.com/michaelbromley/angularUtils.git#75dd112ff7b71b32f08743c2d0f29434f12dfa5c",
- "bootstrap": "^3.3.7",
+ "bootstrap": "^4.1.3",
"xterm": "^3.7.0"
},
"peerDependencies": {},