diff options
author | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
---|---|---|
committer | Vitalii Lysak <v.lysak@dunice.net> | 2022-07-13 15:46:06 +0300 |
commit | 1272456ab2cb77f29b27f3839563b09a709cbc06 (patch) | |
tree | bb8655fd1dff128355a14f61b50556708e87f4a9 /src/views/_sila/SecurityAndAccess | |
parent | b2bea3021aea8be3d4bc34f965bf58297c358bca (diff) | |
download | webui-vue-sila-fe.tar.xz |
move sila-dev to _silasila-fe
Diffstat (limited to 'src/views/_sila/SecurityAndAccess')
5 files changed, 299 insertions, 294 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> diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue index 5bfb81b4..63258a40 100644 --- a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue +++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue @@ -3,7 +3,6 @@ <b-modal id="generate-csr" ref="modal" - size="lg" no-stacking :title="$t('pageCertificates.modal.generateACertificateSigningRequest')" @ok="onOkGenerateCsrModal" @@ -13,7 +12,88 @@ <b-form id="generate-csr-form" novalidate @submit.prevent="handleSubmit"> <b-container fluid> <b-row> - <b-col lg="9"> + <b-col lg="12"> + <b-row> + <b-col lg="12"> + <p class="col-form-label"> + {{ $t('pageCertificates.modal.privateKey') }} + </p> + <b-form-group + :label="$t('pageCertificates.modal.keyPairAlgorithm')" + label-for="key-pair-algorithm" + > + <b-form-select + id="key-pair-algorithm" + v-model="form.keyPairAlgorithm" + data-test-id="modalGenerateCsr-select-keyPairAlgorithm" + :options="keyPairAlgorithmOptions" + :state="getValidationState($v.form.keyPairAlgorithm)" + @input="$v.form.keyPairAlgorithm.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </b-col> + </b-row> + <b-row> + <b-col lg="12"> + <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'"> + <b-form-group + :label="$t('pageCertificates.modal.keyCurveId')" + label-for="key-curve-id" + > + <b-form-select + id="key-curve-id" + v-model="form.keyCurveId" + data-test-id="modalGenerateCsr-select-keyCurveId" + :options="keyCurveIdOptions" + :state="getValidationState($v.form.keyCurveId)" + @input="$v.form.keyCurveId.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </template> + <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'"> + <b-form-group + :label="$t('pageCertificates.modal.keyBitLength')" + label-for="key-bit-length" + > + <b-form-select + id="key-bit-length" + v-model="form.keyBitLength" + data-test-id="modalGenerateCsr-select-keyBitLength" + :options="keyBitLengthOptions" + :state="getValidationState($v.form.keyBitLength)" + @input="$v.form.keyBitLength.$touch()" + > + <template #first> + <b-form-select-option :value="null" disabled> + {{ $t('global.form.selectAnOption') }} + </b-form-select-option> + </template> + </b-form-select> + <b-form-invalid-feedback role="alert"> + {{ $t('global.form.fieldRequired') }} + </b-form-invalid-feedback> + </b-form-group> + </template> + </b-col> + </b-row> <b-row> <b-col lg="6"> <b-form-group @@ -241,89 +321,6 @@ </b-col> </b-row> </b-col> - <b-col lg="3"> - <b-row> - <b-col lg="12"> - <p class="col-form-label"> - {{ $t('pageCertificates.modal.privateKey') }} - </p> - <b-form-group - :label="$t('pageCertificates.modal.keyPairAlgorithm')" - label-for="key-pair-algorithm" - > - <b-form-select - id="key-pair-algorithm" - v-model="form.keyPairAlgorithm" - data-test-id="modalGenerateCsr-select-keyPairAlgorithm" - :options="keyPairAlgorithmOptions" - :state="getValidationState($v.form.keyPairAlgorithm)" - @input="$v.form.keyPairAlgorithm.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - <b-row> - <b-col lg="12"> - <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'"> - <b-form-group - :label="$t('pageCertificates.modal.keyCurveId')" - label-for="key-curve-id" - > - <b-form-select - id="key-curve-id" - v-model="form.keyCurveId" - data-test-id="modalGenerateCsr-select-keyCurveId" - :options="keyCurveIdOptions" - :state="getValidationState($v.form.keyCurveId)" - @input="$v.form.keyCurveId.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </template> - <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'"> - <b-form-group - :label="$t('pageCertificates.modal.keyBitLength')" - label-for="key-bit-length" - > - <b-form-select - id="key-bit-length" - v-model="form.keyBitLength" - data-test-id="modalGenerateCsr-select-keyBitLength" - :options="keyBitLengthOptions" - :state="getValidationState($v.form.keyBitLength)" - @input="$v.form.keyBitLength.$touch()" - > - <template #first> - <b-form-select-option :value="null" disabled> - {{ $t('global.form.selectAnOption') }} - </b-form-select-option> - </template> - </b-form-select> - <b-form-invalid-feedback role="alert"> - {{ $t('global.form.fieldRequired') }} - </b-form-invalid-feedback> - </b-form-group> - </template> - </b-col> - </b-row> - </b-col> </b-row> </b-container> </b-form> diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue index c594bde5..44493882 100644 --- a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue +++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue @@ -1,122 +1,125 @@ <template> - <b-container fluid="xl"> + <b-container fluid="pt-0 m-0"> <page-title /> - <b-row> - <b-col md="8"> - <b-row v-if="!modifySSHPolicyDisabled" class="setting-section"> - <b-col class="d-flex align-items-center justify-content-between"> - <dl class="mr-3 w-75"> - <dt>{{ $t('pagePolicies.ssh') }}</dt> - <dd> - {{ $t('pagePolicies.sshDescription') }} - </dd> - </dl> - <b-form-checkbox - id="sshSwitch" - v-model="sshProtocolState" - data-test-id="policies-toggle-bmcShell" - switch - @change="changeSshProtocolState" - > - <span class="sr-only"> - {{ $t('pagePolicies.ssh') }} - </span> - <span v-if="sshProtocolState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </b-col> - </b-row> - <b-row class="setting-section"> - <b-col class="d-flex align-items-center justify-content-between"> - <dl class="mt-3 mr-3 w-75"> - <dt>{{ $t('pagePolicies.ipmi') }}</dt> - <dd> - {{ $t('pagePolicies.ipmiDescription') }} - </dd> - </dl> - <b-form-checkbox - id="ipmiSwitch" - v-model="ipmiProtocolState" - data-test-id="polices-toggle-networkIpmi" - switch - @change="changeIpmiProtocolState" - > - <span class="sr-only"> - {{ $t('pagePolicies.ipmi') }} - </span> - <span v-if="ipmiProtocolState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </b-col> - </b-row> - <b-row class="setting-section"> - <b-col class="d-flex align-items-center justify-content-between"> - <dl class="mt-3 mr-3 w-75"> - <dt>{{ $t('pagePolicies.vtpm') }}</dt> - <dd> - {{ $t('pagePolicies.vtpmDescription') }} - </dd> - </dl> - <b-form-checkbox - id="vtpmSwitch" - v-model="vtpmState" - data-test-id="policies-toggle-vtpm" - switch - @change="changeVtpmState" - > - <span class="sr-only"> - {{ $t('pagePolicies.vtpm') }} - </span> - <span v-if="vtpmState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </b-col> - </b-row> - <b-row class="setting-section"> - <b-col class="d-flex align-items-center justify-content-between"> - <dl class="mt-3 mr-3 w-75"> - <dt>{{ $t('pagePolicies.rtad') }}</dt> - <dd> - {{ $t('pagePolicies.rtadDescription') }} - </dd> - </dl> - <b-form-checkbox - id="rtadSwitch" - v-model="rtadState" - data-test-id="policies-toggle-rtad" - switch - @change="changeRtadState" - > - <span class="sr-only"> - {{ $t('pagePolicies.rtad') }} - </span> - <span v-if="rtadState"> - {{ $t('global.status.enabled') }} - </span> - <span v-else>{{ $t('global.status.disabled') }}</span> - </b-form-checkbox> - </b-col> - </b-row> - </b-col> - </b-row> + <page-section class="bootstrap-table__section"> + <b-row> + <b-col md="8"> + <b-row v-if="!modifySSHPolicyDisabled" class="setting-section"> + <b-col class="d-flex align-items-center justify-content-between"> + <dl class="mr-3 w-75"> + <dt>{{ $t('pagePolicies.ssh') }}</dt> + <dd> + {{ $t('pagePolicies.sshDescription') }} + </dd> + </dl> + <b-form-checkbox + id="sshSwitch" + v-model="sshProtocolState" + data-test-id="policies-toggle-bmcShell" + switch + @change="changeSshProtocolState" + > + <span class="sr-only"> + {{ $t('pagePolicies.ssh') }} + </span> + <span v-if="sshProtocolState"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </b-col> + </b-row> + <b-row class="setting-section"> + <b-col class="d-flex align-items-center justify-content-between"> + <dl class="mt-3 mr-3 w-75"> + <dt>{{ $t('pagePolicies.ipmi') }}</dt> + <dd> + {{ $t('pagePolicies.ipmiDescription') }} + </dd> + </dl> + <b-form-checkbox + id="ipmiSwitch" + v-model="ipmiProtocolState" + data-test-id="polices-toggle-networkIpmi" + switch + @change="changeIpmiProtocolState" + > + <span class="sr-only"> + {{ $t('pagePolicies.ipmi') }} + </span> + <span v-if="ipmiProtocolState"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </b-col> + </b-row> + <b-row class="setting-section"> + <b-col class="d-flex align-items-center justify-content-between"> + <dl class="mt-3 mr-3 w-75"> + <dt>{{ $t('pagePolicies.vtpm') }}</dt> + <dd> + {{ $t('pagePolicies.vtpmDescription') }} + </dd> + </dl> + <b-form-checkbox + id="vtpmSwitch" + v-model="vtpmState" + data-test-id="policies-toggle-vtpm" + switch + @change="changeVtpmState" + > + <span class="sr-only"> + {{ $t('pagePolicies.vtpm') }} + </span> + <span v-if="vtpmState"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </b-col> + </b-row> + <b-row class="setting-section"> + <b-col class="d-flex align-items-center justify-content-between"> + <dl class="mt-3 mr-3 w-75"> + <dt>{{ $t('pagePolicies.rtad') }}</dt> + <dd> + {{ $t('pagePolicies.rtadDescription') }} + </dd> + </dl> + <b-form-checkbox + id="rtadSwitch" + v-model="rtadState" + data-test-id="policies-toggle-rtad" + switch + @change="changeRtadState" + > + <span class="sr-only"> + {{ $t('pagePolicies.rtad') }} + </span> + <span v-if="rtadState"> + {{ $t('global.status.enabled') }} + </span> + <span v-else>{{ $t('global.status.disabled') }}</span> + </b-form-checkbox> + </b-col> + </b-row> + </b-col> + </b-row> + </page-section> </b-container> </template> <script> import PageTitle from '@/components/_sila/Global/PageTitle'; +import PageSection from '@/components/_sila/Global/PageSection'; import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; export default { name: 'Policies', - components: { PageTitle }, + components: { PageTitle, PageSection }, mixins: [LoadingBarMixin, BVToastMixin], beforeRouteLeave(to, from, next) { this.hideLoader(); diff --git a/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue index d922c241..5178b180 100644 --- a/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue +++ b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue @@ -35,6 +35,7 @@ no-select-on-click hover show-empty + class="table-rounded" no-border-collapse sort-by="clientID" :busy="isBusy" @@ -289,10 +290,3 @@ export default { }, }; </script> -<style lang="scss"> -#table-session-logs { - td .btn-link { - width: auto !important; - } -} -</style> diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue index 423ce4c1..f5179d46 100644 --- a/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue +++ b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue @@ -1,7 +1,7 @@ <template> - <b-container fluid="xl"> + <b-container fluid class="m-0 p-0"> <page-title /> - <b-row> + <b-row class="bootstrap-table__section"> <b-col xl="9" class="text-right"> <b-button variant="link" @click="initModalSettings"> <icon-settings /> @@ -17,7 +17,7 @@ </b-button> </b-col> </b-row> - <b-row> + <b-row class="bootstrap-table__section"> <b-col xl="9"> <table-toolbar ref="toolbar" @@ -31,8 +31,10 @@ responsive="md" selectable show-empty + class="table-rounded" no-select-on-click hover + no-border-collapse :busy="isBusy" :fields="fields" :items="tableItems" @@ -85,7 +87,7 @@ </b-table> </b-col> </b-row> - <b-row> + <b-row class="bootstrap-table__section"> <b-col xl="8"> <b-button v-b-toggle.collapse-role-table @@ -381,7 +383,6 @@ export default { }, }; </script> - <style lang="scss" scoped> .btn.collapsed { svg { |