iam: roles rules tab (#55)

This adds the rules tab for IAM/roles.

Fixes #45

Signed-off-by: Rohit Yadav <[email protected]>

Author: rohityadavcloud

ui/package-lock.json

@@ -38,50 +38,53 @@
     "@fortawesome/free-regular-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
-    "ant-design-vue": "~1.4.6",
+    "ant-design-vue": "~1.4.8",
     "axios": "^0.19.0",
-    "core-js": "^3.4.2",
+    "core-js": "^3.4.7",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.1",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "moment": "^2.24.0",
     "node-emoji": "^1.10.0",
-    "npm-check-updates": "^3.2.1",
+    "npm-check-updates": "^3.2.2",
     "nprogress": "^0.2.0",
     "viser-vue": "^2.4.7",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.1",
     "vue-cropper": "0.4.9",
-    "vue-i18n": "^8.15.0",
+    "vue-i18n": "^8.15.1",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.1.3",
     "vue-svg-component-runtime": "^1.0.1",
+    "vuedraggable": "^2.23.2",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
     "@kazupon/vue-i18n-loader": "^0.4.1",
-    "@vue/cli": "^4.0.5",
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
-    "@vue/eslint-config-standard": "^5.0.0",
+    "@vue/cli": "^4.1.1",
+    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-eslint": "^4.1.1",
+    "@vue/cli-plugin-unit-jest": "^4.1.1",
+    "@vue/cli-service": "^4.1.1",
+    "@vue/eslint-config-standard": "^5.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "babel-plugin-import": "^1.12.2",
-    "eslint": "^6.6.0",
+    "babel-plugin-import": "^1.13.0",
+    "eslint": "^6.7.2",
     "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-vue": "^6.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.0.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
     "vue-cli-plugin-i18n": "^0.6.0",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.6.10",

ui/package.json

@@ -17,11 +17,25 @@
 
 import { axios } from '@/utils/request'
 
-export function api (command, args = {}) {
+export function api (command, args = {}, method = 'GET', data = {}) {
+  let params = {}
   args.command = command
   args.response = 'json'
-  return axios.get('/', {
-    params: args
+
+  if (data) {
+    params = new URLSearchParams()
+    Object.entries(data).forEach(([key, value]) => {
+      params.append(key, value)
+    })
+  }
+
+  return axios({
+    params: {
+      ...args
+    },
+    url: '/',
+    method,
+    data: params || {}
   })
 }
 

ui/src/api/index.js

@@ -23,12 +23,14 @@
     <div v-show="showAddDetail">
       <a-auto-complete
         style="width: 100%"
+        :filterOption="filterOption"
         :value="newKey"
         :dataSource="Object.keys(detailOptions)"
         placeholder="Name"
         @change="e => onAddInputChange(e, 'newKey')" />
       <a-auto-complete
         style="width: 100%"
+        :filterOption="filterOption"
         :value="newValue"
         :dataSource="detailOptions[newKey]"
         placeholder="Value"
@@ -112,6 +114,11 @@ export default {
     this.updateResource(this.resource)
   },
   methods: {
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
+      )
+    },
     updateResource (resource) {
       if (!resource) {
         return

ui/src/components/view/DetailSettings.vue

@@ -224,7 +224,7 @@ export default {
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
       }, {
-        name: 'rules',
+        name: 'Rules',
         component: () => import('@/views/iam/RolePermissionTab.vue')
       }],
       actions: [

ui/src/config/section/iam.js

@@ -0,0 +1,42 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-select
+    :value="defaultValue"
+    @change="handleChange">
+    <a-select-option value="allow">Allow</a-select-option>
+    <a-select-option value="deny">Deny</a-select-option>
+  </a-select>
+</template>
+
+<script>
+export default {
+  props: {
+    defaultValue: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    handleChange (e) {
+      this.$emit('change', e)
+    }
+  }
+
+}
+</script>