Add local user page
- Add Bootstrap out of box table component
- Import layout plugin
- Add user role privilege table
- Add local user modals
- Add inline table actions
- Add local user store
- Add Axios requests
Initial setup to use Vuex store for local user
management page. For now using a timeout to
fake fetching async data. Data flow is working
between store and component.
Using Axios in very unrefined way, just to get some
API requests going. Simple user request working if
base, username, password variables defined.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I3b0d757857268feff32c6bec1c3fd95c302a568f
diff --git a/src/views/AccessControl/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement.vue
index 3233aec..cca068d 100644
--- a/src/views/AccessControl/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement.vue
@@ -1,3 +1,120 @@
<template>
- <h1>Local user management</h1>
+ <b-container fluid>
+ <b-row>
+ <b-col lg="8">
+ <h1>Local user management</h1>
+ </b-col>
+ </b-row>
+ <b-row>
+ <b-col lg="8" md="10">
+ <b-button v-b-modal.modal-settings variant="secondary"
+ >Account policy settings</b-button
+ >
+ <b-button v-b-modal.modal-add-user variant="primary">Add user</b-button>
+ </b-col>
+ </b-row>
+ <b-row>
+ <b-col lg="8" md="10">
+ <b-table bordered head-variant="dark" :items="tableItems" show-empty>
+ <template v-slot:head(actions)="data"></template>
+ <template v-slot:cell(actions)="data">
+ <b-button
+ :disabled="!data.value.edit"
+ v-b-modal.modal-user-settings
+ >
+ <Edit20 />
+ </b-button>
+ <b-button
+ :disabled="!data.value.delete"
+ v-b-modal.modal-user-delete
+ >
+ <TrashCan20 />
+ </b-button>
+ </template>
+ </b-table>
+ </b-col>
+ </b-row>
+ <b-row>
+ <b-col lg="6" md="8">
+ <b-button v-b-toggle.collapse-role-table variant="info" class="mt-3"
+ >View privilege role descriptions</b-button
+ >
+ <b-collapse id="collapse-role-table" class="mt-3">
+ <role-table />
+ </b-collapse>
+ </b-col>
+ </b-row>
+ <!-- Modals -->
+ <b-modal id="modal-add-user" title="Add user" ref="modal">
+ <template v-slot:modal-footer="{ ok, cancel, hide }">
+ <b-button
+ size="sm"
+ variant="secondary"
+ @click="$bvModal.hide('modal-add-user')"
+ >Cancel</b-button
+ >
+ <b-button
+ size="sm"
+ variant="primary"
+ @click="$bvModal.hide('modal-add-user')"
+ >Add user</b-button
+ >
+ </template>
+ </b-modal>
+ <b-modal id="modal-settings" title="Account policy settings"></b-modal>
+ <b-modal id="modal-user-delete" title="Delete user"></b-modal>
+ <b-modal id="modal-user-settings" title="User settings"></b-modal>
+ </b-container>
</template>
+
+<script>
+import LocalUserManagementRoleTable from "./LocalUserMangementRoleTable";
+import TrashCan20 from "@carbon/icons-vue/es/trash-can/20";
+import Edit20 from "@carbon/icons-vue/es/edit/20";
+
+export default {
+ name: "local-users",
+ components: {
+ TrashCan20,
+ Edit20,
+ roleTable: LocalUserManagementRoleTable
+ },
+ created() {
+ this.getUsers();
+ },
+ computed: {
+ allUsers() {
+ return this.$store.getters["localUsers/allUsers"];
+ },
+ tableItems() {
+ // transform user data to table data
+ return this.allUsers.map(user => {
+ return {
+ username: user.UserName,
+ privilege: user.RoleId,
+ status: user.Locked
+ ? "Locked"
+ : user.Enabled
+ ? "Enabled"
+ : "Disabled",
+ actions: {
+ edit: true,
+ delete: user.UserName === "root" ? false : true
+ }
+ };
+ });
+ }
+ },
+ methods: {
+ getUsers() {
+ this.$store.dispatch("localUsers/getUsers");
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+ margin-bottom: 2rem;
+}
+</style>
diff --git a/src/views/AccessControl/LocalUserMangementRoleTable.vue b/src/views/AccessControl/LocalUserMangementRoleTable.vue
new file mode 100644
index 0000000..41dcdf7
--- /dev/null
+++ b/src/views/AccessControl/LocalUserMangementRoleTable.vue
@@ -0,0 +1,116 @@
+<template>
+ <b-table bordered small head-variant="dark" :items="items" :fields="fields">
+ <template v-slot:cell(admin)="data">
+ <template v-if="data.value">
+ <Checkmark20 />
+ </template>
+ </template>
+ <template v-slot:cell(operator)="data">
+ <template v-if="data.value">
+ <Checkmark20 />
+ </template>
+ </template>
+ <template v-slot:cell(user)="data">
+ <template v-if="data.value">
+ <Checkmark20 />
+ </template>
+ </template>
+ <template v-slot:cell(noaccess)="data">
+ <template v-if="data.value">
+ <Checkmark20 />
+ </template>
+ </template>
+ </b-table>
+</template>
+
+<script>
+import Checkmark20 from "@carbon/icons-vue/es/checkmark/20";
+
+export default {
+ components: {
+ Checkmark20
+ },
+ data() {
+ return {
+ items: [
+ {
+ description: "Configure components managed by this service",
+ admin: true,
+ operator: false,
+ user: false,
+ noaccess: false
+ },
+ {
+ description: "Configure manager resources",
+ admin: true,
+ operator: false,
+ user: false,
+ noaccess: false
+ },
+ {
+ description: "Update password for current user account",
+ admin: true,
+ operator: true,
+ user: true,
+ noaccess: false
+ },
+ {
+ description: "Configure users and their accounts",
+ admin: true,
+ operator: false,
+ user: false,
+ noaccess: false
+ },
+ {
+ description: "Log in to the service and read resources",
+ admin: true,
+ operator: true,
+ user: true,
+ noaccess: false
+ },
+ {
+ description: "IPMI access point",
+ admin: true,
+ operator: true,
+ user: true,
+ noaccess: true
+ },
+ {
+ description: "Redfish access point",
+ admin: true,
+ operator: true,
+ user: true,
+ noaccess: false
+ },
+ {
+ description: "SSH access point",
+ admin: true,
+ operator: false,
+ user: false,
+ noaccess: false
+ },
+ {
+ description: "WebUI access point",
+ admin: true,
+ operator: true,
+ user: true,
+ noaccess: false
+ }
+ ],
+ fields: [
+ { key: "description", label: "" },
+ { key: "admin", label: "Admin", class: "text-center" },
+ { key: "operator", label: "Operator", class: "text-center" },
+ { key: "user", label: "User", class: "text-center" },
+ { key: "noaccess", label: "NoAccess", class: "text-center" }
+ ]
+ };
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+td:not(.role-description) {
+ text-align: center;
+}
+</style>