Add loading bar to SSL certificates page

- Return new Date() instead of null when calculating expiring
  time. Expired certificates banner is sometimes visible if
  the certificates are returned before the bmc time

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I3a2b8ac8a639f464856472013be14878151e7289

2 files changed, 24 insertions, 10 deletions

diff --git a/src/store/modules/AccessControl/SslCertificatesStore.js b/src/store/modules/AccessControl/SslCertificatesStore.js
index ef4afdbb..71304b5a 100644
--- a/src/store/modules/AccessControl/SslCertificatesStore.js
+++ b/src/store/modules/AccessControl/SslCertificatesStore.js
@@ -48,8 +48,8 @@ const SslCertificatesStore = {
     }
   },
   actions: {
-    getCertificates({ commit }) {
-      api
+    async getCertificates({ commit }) {
+      return await api
         .get('/redfish/v1/CertificateService/CertificateLocations')
         .then(({ data: { Links: { Certificates } } }) =>
           Certificates.map(certificate => certificate['@odata.id'])
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue
index 6f74c81a..7dcb4dd9 100644
--- a/src/views/AccessControl/SslCertificates/SslCertificates.vue
+++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue
@@ -100,6 +100,7 @@ import StatusIcon from '../../../components/Global/StatusIcon';
 import Alert from '../../../components/Global/Alert';
 
 import BVToastMixin from '../../../components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 
 export default {
   name: 'SslCertificates',
@@ -114,7 +115,7 @@ export default {
     StatusIcon,
     TableRowAction
   },
-  mixins: [BVToastMixin],
+  mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
       modalCertificate: null,
@@ -195,9 +196,16 @@ export default {
       }, []);
     }
   },
-  created() {
-    this.$store.dispatch('sslCertificates/getCertificates');
-    this.$store.dispatch('global/getBmcTime');
+  async created() {
+    this.startLoader();
+    await this.$store.dispatch('global/getBmcTime');
+    this.$store
+      .dispatch('sslCertificates/getCertificates')
+      .finally(() => this.endLoader());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
   },
   methods: {
     onTableRowAction(event, rowItem) {
@@ -242,12 +250,15 @@ export default {
       }
     },
     addNewCertificate(file, type) {
+      this.startLoader();
       this.$store
         .dispatch('sslCertificates/addNewCertificate', { file, type })
         .then(success => this.successToast(success))
-        .catch(({ message }) => this.errorToast(message));
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
     },
     replaceCertificate(file, type, location) {
+      this.startLoader();
       const reader = new FileReader();
       reader.readAsBinaryString(file);
       reader.onloadend = event => {
@@ -259,17 +270,20 @@ export default {
             location
           })
           .then(success => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message));
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
       };
     },
     deleteCertificate({ type, location }) {
+      this.startLoader();
       this.$store
         .dispatch('sslCertificates/deleteCertificate', {
           type,
           location
         })
         .then(success => this.successToast(success))
-        .catch(({ message }) => this.errorToast(message));
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
     },
     getDaysUntilExpired(date) {
       if (this.bmcTime) {
@@ -278,7 +292,7 @@ export default {
         const oneDayInMs = 24 * 60 * 60 * 1000;
         return Math.round((validUntilMs - currentBmcTimeMs) / oneDayInMs);
       }
-      return null;
+      return new Date();
     },
     getIconStatus(date) {
       const daysUntilExpired = this.getDaysUntilExpired(date);