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/main.js b/src/main.js
index 16687c5..742b991 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,10 @@
NavPlugin,
CollapsePlugin,
LinkPlugin,
- NavbarPlugin
+ NavbarPlugin,
+ TablePlugin,
+ LayoutPlugin,
+ ModalPlugin
} from "bootstrap-vue";
Vue.use(ButtonPlugin);
@@ -16,6 +19,9 @@
Vue.use(CollapsePlugin);
Vue.use(LinkPlugin);
Vue.use(NavbarPlugin);
+Vue.use(TablePlugin);
+Vue.use(LayoutPlugin);
+Vue.use(ModalPlugin);
Vue.prototype.$http = Axios;
diff --git a/src/store/index.js b/src/store/index.js
index fb6015f..3b86bfe 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,11 +1,15 @@
import Vue from "vue";
import Vuex from "vuex";
+import LocalUserManagementStore from "./modules/AccessControl/LocalUserMangementStore";
+
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
- modules: {}
+ modules: {
+ localUsers: LocalUserManagementStore
+ }
});
diff --git a/src/store/modules/AccessControl/LocalUserMangementStore.js b/src/store/modules/AccessControl/LocalUserMangementStore.js
new file mode 100644
index 0000000..dddfd2c
--- /dev/null
+++ b/src/store/modules/AccessControl/LocalUserMangementStore.js
@@ -0,0 +1,56 @@
+import Axios from "axios";
+
+const LocalUserManagementStore = {
+ namespaced: true,
+ state: {
+ allUsers: []
+ },
+ getters: {
+ allUsers(state) {
+ return state.allUsers;
+ }
+ },
+ mutations: {
+ setUsers(state, allUsers) {
+ state.allUsers = allUsers;
+ }
+ },
+ actions: {
+ getUsers({ commit }) {
+ let base;
+ let username;
+ let password;
+ if (base && username && password) {
+ Axios.defaults.baseURL = base;
+ Axios.defaults.auth = {};
+ Axios.defaults.auth.username = username;
+ Axios.defaults.auth.password = password;
+ Axios.get("redfish/v1/AccountService/Accounts")
+ .then(response => {
+ return response.data.Members.map(user => user["@odata.id"]);
+ })
+ .then(userIds => {
+ return Axios.all(userIds.map(user => Axios.get(user)));
+ })
+ .then(users => {
+ const userData = users.map(user => user.data);
+ commit("setUsers", userData);
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ } else {
+ // Faking async call with timeout
+ setTimeout(() => {
+ const users = [
+ { UserName: "root", RoleId: "Admin", Locked: false, Enabled: true },
+ { UserName: "user1", RoleId: "user", Locked: false, Enabled: false }
+ ];
+ commit("setUsers", users);
+ }, 3000);
+ }
+ }
+ }
+};
+
+export default LocalUserManagementStore;
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>