diff options
Diffstat (limited to 'src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue')
| -rw-r--r-- | src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue | 192 |
1 files changed, 101 insertions, 91 deletions
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue index 27950b76..8aee85cf 100644 --- a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue +++ b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue @@ -1,98 +1,101 @@ <template> - <b-container fluid="xl"> + <b-container fluid="pt-0 m-0"> <page-title /> - <b-row> - <b-col xl="11"> - <!-- Expired certificates banner --> - <alert :show="expiredCertificateTypes.length > 0" variant="danger"> - <template v-if="expiredCertificateTypes.length > 1"> - {{ $t('pageCertificates.alert.certificatesExpiredMessage') }} - </template> - <template v-else> - {{ - $t('pageCertificates.alert.certificateExpiredMessage', { - certificate: expiredCertificateTypes[0], - }) - }} - </template> - </alert> - <!-- Expiring certificates banner --> - <alert :show="expiringCertificateTypes.length > 0" variant="warning"> - <template v-if="expiringCertificateTypes.length > 1"> - {{ $t('pageCertificates.alert.certificatesExpiringMessage') }} - </template> - <template v-else> - {{ - $t('pageCertificates.alert.certificateExpiringMessage', { - certificate: expiringCertificateTypes[0], - }) - }} - </template> - </alert> - </b-col> - </b-row> - <b-row> - <b-col xl="11" class="text-right"> - <b-button - v-b-modal.generate-csr - data-test-id="certificates-button-generateCsr" - variant="link" - > - <icon-add /> - {{ $t('pageCertificates.generateCsr') }} - </b-button> - <b-button - variant="primary" - :disabled="certificatesForUpload.length === 0" - @click="initModalUploadCertificate(null)" - > - <icon-add /> - {{ $t('pageCertificates.addNewCertificate') }} - </b-button> - </b-col> - </b-row> - <b-row> - <b-col xl="11"> - <b-table - responsive="md" - show-empty - hover - :busy="isBusy" - :fields="fields" - :items="tableItems" - :empty-text="$t('global.table.emptyMessage')" - > - <template #cell(validFrom)="{ value }"> - {{ value | formatDate }} - </template> + <page-section class="bootstrap-table__section"> + <b-row class="margin-bottom--16px"> + <b-col xl="11"> + <!-- Expired certificates banner --> + <alert :show="expiredCertificateTypes.length > 0" variant="danger"> + <template v-if="expiredCertificateTypes.length > 1"> + {{ $t('pageCertificates.alert.certificatesExpiredMessage') }} + </template> + <template v-else> + {{ + $t('pageCertificates.alert.certificateExpiredMessage', { + certificate: expiredCertificateTypes[0], + }) + }} + </template> + </alert> + <!-- Expiring certificates banner --> + <alert :show="expiringCertificateTypes.length > 0" variant="warning"> + <template v-if="expiringCertificateTypes.length > 1"> + {{ $t('pageCertificates.alert.certificatesExpiringMessage') }} + </template> + <template v-else> + {{ + $t('pageCertificates.alert.certificateExpiringMessage', { + certificate: expiringCertificateTypes[0], + }) + }} + </template> + </alert> + </b-col> + </b-row> + <b-row class="margin-bottom--16px"> + <b-col xl="11" class="text-right"> + <b-button + v-b-modal.generate-csr + data-test-id="certificates-button-generateCsr" + variant="link" + > + <icon-add /> + {{ $t('pageCertificates.generateCsr') }} + </b-button> + <b-button + variant="primary" + :disabled="certificatesForUpload.length === 0" + @click="initModalUploadCertificate(null)" + > + <icon-add /> + {{ $t('pageCertificates.addNewCertificate') }} + </b-button> + </b-col> + </b-row> + <b-row> + <b-col xl="11"> + <b-table + responsive="md" + show-empty + hover + class="table-rounded" + no-border-collapse + :busy="isBusy" + :fields="fields" + :items="tableItems" + :empty-text="$t('global.table.emptyMessage')" + > + <template #cell(validFrom)="{ value }"> + {{ value | formatDate }} + </template> - <template #cell(validUntil)="{ value }"> - <status-icon - v-if="getDaysUntilExpired(value) < 31" - :status="getIconStatus(value)" - /> - {{ value | formatDate }} - </template> - - <template #cell(actions)="{ value, item }"> - <table-row-action - v-for="(action, index) in value" - :key="index" - :value="action.value" - :title="action.title" - :enabled="action.enabled" - @click-table-action="onTableRowAction($event, item)" - > - <template #icon> - <icon-replace v-if="action.value === 'replace'" /> - <icon-trashcan v-if="action.value === 'delete'" /> - </template> - </table-row-action> - </template> - </b-table> - </b-col> - </b-row> + <template #cell(validUntil)="{ value }"> + <status-icon + v-if="getDaysUntilExpired(value) < 31" + :status="getIconStatus(value)" + /> + {{ value | formatDate }} + </template> + <template #cell(actions)="{ value, item }"> + <table-row-action + v-for="(action, index) in value" + :key="index" + :value="action.value" + :title="action.title" + :enabled="action.enabled" + @click-table-action="onTableRowAction($event, item)" + > + <template #icon> + <icon-replace v-if="action.value === 'replace'" /> + <icon-trashcan v-if="action.value === 'delete'" /> + </template> + </table-row-action> + </template> + </b-table> + </b-col> + </b-row> + </page-section> <!-- Modals --> <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" /> <modal-generate-csr /> @@ -107,6 +110,7 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import ModalGenerateCsr from './ModalGenerateCsr'; import ModalUploadCertificate from './ModalUploadCertificate'; import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageSection from '@/components/_sila/Global/PageSection'; import TableRowAction from '@/components/_sila/Global/TableRowAction'; import StatusIcon from '@/components/_sila/Global/StatusIcon'; import Alert from '@/components/_sila/Global/Alert'; @@ -124,6 +128,7 @@ export default { ModalGenerateCsr, ModalUploadCertificate, PageTitle, + PageSection, StatusIcon, TableRowAction, }, @@ -320,3 +325,8 @@ export default { }, }; </script> +<style lang="scss" scoped> +.margin-bottom--16px { + margin-bottom: 16px; +} +</style> |