iam: Account Cert Tab (#66)

Fixes #46

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

Author: Hoang Nguyen

ui/docs/api/apis.remaining

@@ -51,7 +51,6 @@ deletePrivateGateway
 deleteProjectInvitation
 deleteSecondaryStagingStore
 deleteSnapshotPolicies
-deleteSslCert
 deleteStaticRoute
 deleteStorageNetworkIpRange
 deleteVlanIpRange
@@ -101,7 +100,6 @@ listResourceLimits
 listSamlAuthorization
 listSecondaryStagingStores
 listSnapshotPolicies
-listSslCerts
 listStaticRoutes
 listStorageNetworkIpRange
 listStorageProviders
@@ -138,4 +136,3 @@ updateResourceLimit
 updateTrafficType
 updateVmNicIp
 updateVpnCustomerGateway
-uploadSslCert

ui/src/components/view/DetailSettings.vue

@@ -41,7 +41,7 @@
     <a-list size="large">
       <a-list-item :key="index" v-for="(item, index) in details">
         <a-list-item-meta>
-          <span slot="title">{{ item.name }}</span>
+          <span slot="title"><strong>{{ item.name }}</strong></span>
           <span slot="description" style="word-break: break-all">
             <span v-if="item.edit" style="display: flex">
               <a-auto-complete
@@ -51,7 +51,7 @@
                 @change="val => handleInputChange(val, index)"
                 @pressEnter="e => updateDetail(index)" />
             </span>
-            <span v-else>{{ item.value }}</span>
+            <span v-else @click="showEditDetail(index)">{{ item.value }}</span>
           </span>
         </a-list-item-meta>
         <div slot="actions">

ui/src/components/view/ResourceView.vue

@@ -37,7 +37,7 @@
             :tab="$t(tab.name)"
             :key="tab.name"
             v-if="'show' in tab ? tab.show(resource, $route) : true">
-            <component :is="tab.component" :resource="resource" :loading="loading" />
+            <component :is="tab.component" :resource="resource" :loading="loading" :tab="activeTab" />
           </a-tab-pane>
         </a-tabs>
       </a-card>
@@ -76,6 +76,11 @@ export default {
       }
     }
   },
+  data () {
+    return {
+      activeTab: ''
+    }
+  },
   methods: {
     onTabChange (key) {
       this.activeTab = key

ui/src/components/view/SettingsTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-list size="large" class="list" :loading="loading">
+  <a-list size="large" class="list" :loading="loading || tabLoading">
     <a-list-item :key="index" v-for="(item, index) in items" class="item">
       <a-list-item-meta>
         <span slot="title" style="word-break: break-all"><strong>{{ item.name }}</strong></span>
@@ -15,7 +15,7 @@
           @keydown.esc="editableValueKey = null"
           @pressEnter="updateData(item)">
         </a-input>
-        <span v-else class="value">
+        <span v-else class="value" @click="setEditableSetting(item, index)">
           {{ item.value }}
         </span>
       </div>
@@ -64,7 +64,8 @@ export default {
       items: [],
       scopeKey: '',
       editableValueKey: null,
-      editableValue: ''
+      editableValue: '',
+      tabLoading: false
     }
   },
   beforeMount () {
@@ -95,14 +96,15 @@ export default {
     this.fetchData()
   },
   watch: {
-    resource: newItem => {
+    resource: function (newItem, oldItem) {
       if (!newItem.id) return
+      this.resource = newItem
       this.fetchData()
     }
   },
   methods: {
     fetchData (callback) {
-      this.loading = true
+      this.tabLoading = true
       api('listConfigurations', {
         [this.scopeKey]: this.resource.id,
         listAll: true
@@ -112,13 +114,13 @@ export default {
         console.error(error)
         this.$message.error('There was an error loading these settings.')
       }).finally(() => {
-        this.loading = false
+        this.tabLoading = false
         if (!callback) return
         callback()
       })
     },
     updateData (item) {
-      this.loading = true
+      this.tabLoading = true
       api('updateConfiguration', {
         [this.scopeKey]: this.resource.id,
         name: item.name,
@@ -133,7 +135,7 @@ export default {
           description: 'There was an error saving this setting. Please try again later.'
         })
       }).finally(() => {
-        this.loading = false
+        this.tabLoading = false
         this.fetchData(() => {
           this.editableValueKey = null
         })

ui/src/config/section/iam.js

@@ -90,13 +90,20 @@ export default {
         title: 'Users',
         param: 'account'
       }],
-      tabs: [{
-        name: 'details',
-        component: () => import('@/components/view/DetailsTab.vue')
-      }, {
-        name: 'Settings',
-        component: () => import('@/components/view/SettingsTab.vue')
-      }],
+      tabs: [
+        {
+          name: 'details',
+          component: () => import('@/components/view/DetailsTab.vue')
+        },
+        {
+          name: 'certificate',
+          component: () => import('@/views/iam/SSLCertificateTab.vue')
+        },
+        {
+          name: 'Settings',
+          component: () => import('@/components/view/SettingsTab.vue')
+        }
+      ],
       actions: [
         {
           api: 'createAccount',
@@ -161,6 +168,14 @@ export default {
             }
           }
         },
+        {
+          api: 'uploadSslCert',
+          icon: 'safety-certificate',
+          label: 'Add certificate',
+          dataView: true,
+          args: ['name', 'certificate', 'privatekey', 'certchain', 'password'],
+          show: (record) => { return record.state === 'enabled' }
+        },
         {
           api: 'deleteAccount',
           icon: 'delete',

ui/src/locales/en.json

@@ -99,6 +99,7 @@
 "capacityiops": "IOPS Total",
 "certchain": "Chain",
 "certificate": "Certificate",
+"certificateid": "Certificate ID",
 "chassis": "Chassis",
 "checksum": "checksum",
 "cidr": "Super CIDR for Guest Networks",
@@ -133,6 +134,7 @@
 "current": "isCurrent",
 "date": "Date",
 "dedicated": "Dedicated",
+"deleteconfirm": "Please confirm that you would like to delete this {name}",
 "deleteprofile": "Delete Profile",
 "deploymentPlanner": "Deployment planner",
 "deploymentplanner": "Deployment planner",
@@ -435,6 +437,7 @@
 "label.add.isolated.network": "Add Isolated Network",
 "label.add.l2.guest.network": "Add L2 Guest Network",
 "label.add.ldap.account": "Add LDAP account",
+"label.add.ldap.list.users": "List LDAP users",
 "label.add.netScaler.device": "Add Netscaler device",
 "label.add.network.offering": "Add network offering",
 "label.add.new.tier": "Add new tier",
@@ -734,6 +737,7 @@
 "publicport": "Public Port",
 "purpose": "Purpose",
 "qosType": "QoS Type",
+"quickview": "Quick view",
 "quiescevm": "Quiesce VM",
 "quietTime": "Quiet Time (in sec)",
 "quota": "Quota Value",

ui/src/views/AutogenView.vue

@@ -177,6 +177,15 @@
                   :placeholder="field.description"
                 />
               </span>
+              <span v-else-if="field.name==='certificate' || field.name==='privatekey' || field.name==='certchain'">
+                <a-textarea
+                  rows="2"
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please enter input' }]
+                  }]"
+                  :placeholder="field.description"
+                />
+              </span>
               <span v-else>
                 <a-input
                   v-decorator="[field.name, {