Fix missing expiring/expired icons and warnning messages in certificate table
- Confirmed with backend developer that we should be checking certificate expiration date with bmc date/time set
- Converted both certificate expiration date and bmc date/time to EPOCH time to fix the bug
Tested: Go to Date and Time settings and change BMC time to be after or 30 days before a certificate expiration date.
Then either a warning or expiration icon and message will be displayed next to the date and message on top of the table.
To remove the expiration or warning date, upload a certificate that has an expiration date greater than 30 days after bmc time
set. The icon and warning message should now disappear.
Signed-off-by: Mira Murali <miramurali23@gmail.com>
Change-Id: I9389fe3cce5a555945adf9c56180897a6be047bf
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index 35c2de3..2b7d9b7 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -24,53 +24,39 @@
Valid until:
</div>
<div class="certificate__status-cell">
- <span class="inline"
- ng-class="{'icon__warning' : cert.isExpiring , 'icon__critical' : cert.isExpired}"
+ <span class="inline" ng-class="{'icon__warning certificate__table__icon' : cert.isExpiring , 'icon__critical certificate__table__icon' : cert.isExpired}"
ng-if="cert.isExpired || cert.isExpiring"></span>
</div>
<div class="certificate__date-cell">
{{cert.ValidNotAfter | date:medium}}
</div>
<div class="certificate__buttons-cell">
- <button type="button" ng-click="cert.upload = true" aria-label="Replace certificate"
- class="btn btn-tertiary certificate__button">
+ <button type="button" ng-click="cert.upload = true" aria-label="Replace certificate" class="btn btn-tertiary certificate__button">
<icon file="icon-replace.svg" aria-hidden="true"></icon>
</button>
</div>
<div ng-show="cert.upload === true" class="upload__certificate">
<div class="certificate__upload-chooser row">
<div class="small-1 column">
- <button
- type="button"
- ng-click="cert.upload=false"
- aria-label="close replace certificate upload form">
+ <button type="button" ng-click="cert.upload=false" aria-label="close replace certificate upload form">
<icon file="icon-close.svg" aria-hidden="true"></icon>
</button>
</div>
<div class="small-2 column">
- <label>
- <input
- id="upload_{{cert.Description + cert.Id}}"
- type="file"
- file="cert.file"
- class="input-file" />
- <span class="btn btn-secondary">Choose file</span>
- </label>
- </div>
+ <label>
+ <input id="upload_{{cert.Description + cert.Id}}" type="file" file="cert.file" class="input-file" />
+ <span class="btn btn-secondary">Choose file</span>
+ </label>
+ </div>
<div class="small-6 column">
<span ng-if="!cert.file">No file selected</span>
<span>{{cert.file.name}}</span>
- <button
- type="reset"
- ng-if="cert.file.name"
- ng-click="cert.file = '';"
- aria-label="remove selected file">
+ <button type="reset" ng-if="cert.file.name" ng-click="cert.file = '';" aria-label="remove selected file">
<icon file="icon-close.svg" aria-hidden="true"></icon>
</button>
</div>
<div class="small-3 column">
- <button type="submit" ng-class="{disabled:!cert.file}" class="btn btn-primary"
- ng-click="replaceCertificate(cert)">
+ <button type="submit" ng-class="{disabled:!cert.file}" class="btn btn-primary" ng-click="replaceCertificate(cert)">
Replace
</button>
</div>
diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index 433db6d..fe1082e 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -12,6 +12,9 @@
border-radius: 0;
color: $primary-dark;
text-align: left;
+ .icon {
+ vertical-align: bottom;
+ }
}
.message-container {
@@ -55,4 +58,4 @@
background-image: url(../assets/images/icon-warning.svg);
}
}
-}
\ No newline at end of file
+}
diff --git a/app/configuration/controllers/certificate-controller.html b/app/configuration/controllers/certificate-controller.html
index c388670..4226262 100644
--- a/app/configuration/controllers/certificate-controller.html
+++ b/app/configuration/controllers/certificate-controller.html
@@ -5,8 +5,9 @@
</div>
<div ng-repeat="certificate in certificates | filter:{isExpiring:true}" class="row column">
<div class="small-12 alert alert-warning" role="alert">
- <icon aria-hidden="true" file="icon-warning.svg" /> The uploaded {{certificate.name}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one
- day!' : getDays(certificate.ValidNotAfter) + ' days!'}}. Consider replacing it with a new certificate.
+ <icon file="icon-warning.svg" aria-hidden="true"></icon>
+ The uploaded {{certificate.name}} is expiring in {{getDays(certificate.ValidNotAfter) === 0 ? 'less than one day!' : getDays(certificate.ValidNotAfter)
+ + ' days!'}} Consider replacing it with a new certificate.
</div>
</div>
<div ng-repeat="certificate in certificates|filter:{isExpired:true}" class="row column">
@@ -144,8 +145,7 @@
<select class="add-csr__select" id="cert__type" name="cert__type" ng-model="newCSR.certificateCollection" required>
<option class="courier-bold" ng-value="default" ng-model="selectOption">Select an option</option>
<!-- Do not show CA certificate as an option. Only a certificate authority can generate a CA certificate (known as TrustStore Certificate in Redfish) -->
- <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes"
- ng-if="type.Description !== 'TrustStore Certificate'">
+ <option class="courier-bold" ng-value="type" ng-repeat="type in allCertificateTypes" ng-if="type.Description !== 'TrustStore Certificate'">
{{type.name}}</option>
</select>
<div ng-messages="add__csr__form.cert__type.$error" class="form-error" ng-class="{'visible' : add__csr__form.cert__type.$touched}">
diff --git a/app/configuration/controllers/certificate-controller.js b/app/configuration/controllers/certificate-controller.js
index cb22ac7..06b2fff 100644
--- a/app/configuration/controllers/certificate-controller.js
+++ b/app/configuration/controllers/certificate-controller.js
@@ -30,6 +30,10 @@
$scope.countryList = Constants.COUNTRIES;
+ $scope.$on('$viewContentLoaded', () => {
+ getBmcTime();
+ })
+
$scope.loadCertificates = function() {
$scope.certificates = [];
$scope.availableCertificateTypes = Constants.CERTIFICATE_TYPES;
@@ -97,9 +101,12 @@
};
var isExpiring = function(certificate) {
- // if ValidNotAfter is less than or equal to 30 days from today
+ // convert certificate time to epoch time
+ // if ValidNotAfter is less than or equal to 30 days from bmc time
// (2592000000), isExpiring. If less than or equal to 0, is expired.
- var difference = certificate.ValidNotAfter - new Date();
+ // dividing bmc time by 1000 converts epoch milliseconds to seconds
+ var difference = (new Date(certificate.ValidNotAfter).getTime()) -
+ ($scope.bmcTime) / 1000;
if (difference <= 0) {
certificate.isExpired = true;
} else if (difference <= 2592000000) {
@@ -200,6 +207,14 @@
};
+ var getBmcTime = function() {
+ APIUtils.getBMCTime().then(function(data) {
+ $scope.bmcTime = data.data.Elapsed;
+ });
+
+ return $scope.bmcTime;
+ };
+
var updateAvailableTypes = function(certificate) {
// TODO: at this time only one of each type of certificate is allowed.
// When this changes, this will need to be updated.
@@ -212,7 +227,8 @@
$scope.getDays = function(endDate) {
// finds number of days until certificate expiration
- var ms = endDate - new Date();
+ // dividing bmc time by 1000 converts milliseconds to seconds
+ var ms = (new Date(endDate).getTime()) - ($scope.bmcTime) / 1000;
return Math.floor(ms / (24 * 60 * 60 * 1000));
};
diff --git a/app/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index 650465f..0eaa7c0 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -115,6 +115,10 @@
bottom: 1rem;
left: 2rem;
}
+.certificate__table__icon {
+ margin-left: 1.5em;
+ margin-bottom: .4em;
+}
.add__certificate__modal {
select {