diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-03-27 01:23:34 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-08 22:42:16 +0300 |
commit | e45f54ba1e5aa26fbdf42dcd907e9f4e777d7b7e (patch) | |
tree | 79c9d36c8737b79212da80a1a53b3b211baf0f62 /src/views | |
parent | 37393810fa1ed2ae69ec05d0b19887e27760d48e (diff) | |
download | webui-vue-e45f54ba1e5aa26fbdf42dcd907e9f4e777d7b7e.tar.xz |
Add SSL Certificate expiration warnings
Adds status icons in data table and alert banners for
expiring and expired certificates.
Warning will be visible within 30 days of certificate
expiration.
Critical/danger indicators will be visible when certificate
is expired.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6f8c27d4ba1563a79b46eec7b869366ecee42f75
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/AccessControl/SslCertificates/SslCertificates.vue | 77 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 5 |
2 files changed, 81 insertions, 1 deletions
diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue index ae28271f..313b3218 100644 --- a/src/views/AccessControl/SslCertificates/SslCertificates.vue +++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue @@ -2,6 +2,36 @@ <b-container fluid> <page-title /> <b-row> + <b-col xl="9"> + <!-- Expired certificates banner --> + <alert :show="expiredCertificateTypes.length > 0" variant="danger"> + <template v-if="expiredCertificateTypes.length > 1"> + {{ $t('pageSslCertificates.alert.certificatesExpiredMessage') }} + </template> + <template v-else> + {{ + $t('pageSslCertificates.alert.certificateExpiredMessage', { + certificate: expiredCertificateTypes[0] + }) + }} + </template> + </alert> + <!-- Expiring certificates banner --> + <alert :show="expiringCertificateTypes.length > 0" variant="warning"> + <template v-if="expiringCertificateTypes.length > 1"> + {{ $t('pageSslCertificates.alert.certificatesExpiringMessage') }} + </template> + <template v-else> + {{ + $t('pageSslCertificates.alert.certificateExpiringMessage', { + certificate: expiringCertificateTypes[0] + }) + }} + </template> + </alert> + </b-col> + </b-row> + <b-row> <b-col xl="9" class="text-right"> <b-button variant="primary" @@ -21,6 +51,10 @@ </template> <template v-slot:cell(validUntil)="{ value }"> + <status-icon + v-if="getDaysUntilExpired(value) < 31" + :status="getIconStatus(value)" + /> {{ value | formatDate }} </template> @@ -56,17 +90,21 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import ModalUploadCertificate from './ModalUploadCertificate'; import PageTitle from '../../../components/Global/PageTitle'; import TableRowAction from '../../../components/Global/TableRowAction'; +import StatusIcon from '../../../components/Global/StatusIcon'; +import Alert from '../../../components/Global/Alert'; import BVToastMixin from '../../../components/Mixins/BVToastMixin'; export default { name: 'SslCertificates', components: { + Alert, IconAdd, IconReplace, IconTrashcan, ModalUploadCertificate, PageTitle, + StatusIcon, TableRowAction }, mixins: [BVToastMixin], @@ -127,10 +165,32 @@ export default { }, certificatesForUpload() { return this.$store.getters['sslCertificates/availableUploadTypes']; + }, + bmcTime() { + return this.$store.getters['global/bmcTime']; + }, + expiredCertificateTypes() { + return this.certificates.reduce((acc, val) => { + const daysUntilExpired = this.getDaysUntilExpired(val.validUntil); + if (daysUntilExpired < 1) { + acc.push(val.certificate); + } + return acc; + }, []); + }, + expiringCertificateTypes() { + return this.certificates.reduce((acc, val) => { + const daysUntilExpired = this.getDaysUntilExpired(val.validUntil); + if (daysUntilExpired < 31 && daysUntilExpired > 0) { + acc.push(val.certificate); + } + return acc; + }, []); } }, created() { this.$store.dispatch('sslCertificates/getCertificates'); + this.$store.dispatch('global/getBmcTime'); }, methods: { onTableRowAction(event, rowItem) { @@ -203,6 +263,23 @@ export default { }) .then(success => this.successToast(success)) .catch(({ message }) => this.errorToast(message)); + }, + getDaysUntilExpired(date) { + if (this.bmcTime) { + const validUntilMs = date.getTime(); + const currentBmcTimeMs = this.bmcTime.getTime(); + const oneDayInMs = 24 * 60 * 60 * 1000; + return Math.round((validUntilMs - currentBmcTimeMs) / oneDayInMs); + } + return null; + }, + getIconStatus(date) { + const daysUntilExpired = this.getDaysUntilExpired(date); + if (daysUntilExpired < 1) { + return 'danger'; + } else if (daysUntilExpired < 31) { + return 'warning'; + } } } }; diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index 9f3ba52e..3a0b9cfe 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -3,7 +3,10 @@ <div> <dl> <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt> - <dd>{{ bmcTime | formatDate }} {{ bmcTime | formatTime }}</dd> + <dd v-if="bmcTime"> + {{ bmcTime | formatDate }} {{ bmcTime | formatTime }} + </dd> + <dd v-else>--</dd> </dl> </div> <div> |