From e5be9ba5c7523a99394695bbb31a9059ca00ff0e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Thu, 30 Apr 2020 10:13:40 -0700
Subject: 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
---
 .../SslCertificates/SslCertificates.vue            | 30 ++++++++++++++++------
 1 file changed, 22 insertions(+), 8 deletions(-)

(limited to 'src/views')

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);
-- 
cgit v1.2.3