Update file manager configuration page (#54)

* Changed API for list of subnet_Ids and changed front end to send list of subnet id. This is pushed to the branch

* update file manager configuration page

Co-authored-by: Eddie Goynes <[email protected]>

Author: brandold

source/api/app.py

@@ -49,19 +49,19 @@ def proxy_operation_to_efs_lambda(filesystem_id, event):
         return response
 
 
-def create_filesystem_access_point(filesystem_id):
+def create_filesystem_access_point(filesystem_id, uid, gid, path):
     try:
         response = efs.create_access_point(
         FileSystemId=filesystem_id,
         PosixUser={
-            'Uid': 1000,
-            'Gid': 1000
+            'Uid': uid,
+            'Gid': gid
         },
         RootDirectory={
-            'Path': '/efs',
+            'Path': path,
             'CreationInfo': {
-                'OwnerUid': 1000,
-                'OwnerGid': 1000,
+                'OwnerUid': uid,
+                'OwnerGid': gid,
                 'Permissions': '777'
             }
         }
@@ -309,21 +309,22 @@ def create_filesystem_lambda(filesystem_id):
     json_body = request.json_body
 
     try:
-        subnet_id = json_body['subnetId']
+        subnet_ids = json_body['subnetIds']
         security_groups = json_body['securityGroups']
+        uid = int(json_body['uid'])
+        gid = int(json_body['gid'])
+        path = json_body['path']
     except KeyError as error:
         app.log.error(error)
         raise BadRequestError("Check API logs")
     else:
         vpc_config = {
-            'SubnetIds': [
-                subnet_id,
-            ],
+            'SubnetIds': subnet_ids,
             'SecurityGroupIds': security_groups
         }
 
     try:
-        access_point_arn = create_filesystem_access_point(filesystem_id)
+        access_point_arn = create_filesystem_access_point(filesystem_id, uid, gid, path)
     except Exception as error:
         app.log.error(error)
         raise ChaliceViewError('Check API Logs')

source/web/src/components/filesystems.vue

@@ -10,11 +10,11 @@
             </div>
         </template>
         <template v-slot:cell(managed)="data">
-            <div v-if=data.value>
+            <div v-if="data.value === true">
                 <p>{{data.value}}</p>
             </div>
             <div v-else-if="data.value === 'Creating'">
-                <p>{{data.value}}</p>
+                <b-link href="/" v-b-tooltip.hover title="Lambda creation can take several minutes. Click to refresh.">{{data.value}}</b-link>
             </div>
             <div v-else>
                 <a :href="`/configure/${data.item.file_system_id}`">{{ data.value }}</a>

source/web/src/routes/Configure.vue

@@ -8,22 +8,34 @@
         </div>
         <div v-else>
         <b-row>
-            <b-col>
-                <br>
-                <br>
-                <br>
-                <br>
-                <h3> Mount Target Network Information</h3>
-                <p>{{netinfo}}</p>
-            </b-col>
             <b-col align-self="center">
                 <b-form @submit="onSubmit">
                         <h3> Create file manager lambda</h3>
-                        <p> Select a mount point to attach to:</p>
-                        <b-form-select v-model="selected" :options="options"></b-form-select>
-                        <br>
-                        <br>
-                        <b-button type="submit">
+                        <b-form-group
+                            label="User ID:"
+                            description="The numeric POSIX user ID that lambda will use to make file system requests as"
+                        >
+                            <b-form-input v-model="uid" :state="valid" placeholder="Enter a custom UID or leave default (1000)"></b-form-input>
+                        </b-form-group>
+
+                        <b-form-group
+                            label="Group ID:"
+                            description="The numeric POSIX group ID that lambda will use to make file system requests as"
+                        >
+                            <b-form-input v-model="gid" :state="valid" placeholder="Enter a custom GID or leave default (1000)"></b-form-input>
+                        </b-form-group>
+
+                        <b-form-group
+                            label="Path:"
+                            description="The file system directory that lambda will use as the root directory"
+                        >
+                            <b-form-input v-model="path" :state="valid" placeholder="Enter a custom path or leave default (/efs)"></b-form-input>
+                        </b-form-group>
+                        
+                        <b-form-invalid-feedback :state="valid">
+                            UID, GID, and Path must not be empty. The path must begin with a forward slash: /
+                        </b-form-invalid-feedback>
+                        <b-button :disabled='!valid' type="submit">
                             Submit
                         <b-icon icon="Hammer" aria-hidden="true"></b-icon>
                 </b-button>
@@ -45,44 +57,59 @@ export default {
   data () {
     return {
         processing: false,
-        netinfo: null,
-        form: {
-            mountTarget: null
-        },
-        selected: null
+        uid: '1000',
+        gid: '1000',
+        path: '/efs'
     }
   },
-  created: function () {
-      this.getFilesystemNetinfo()
-  },
   computed: {
-      options: function () {
-          let mountTargetNames = Object.keys(this.netinfo)
-          return mountTargetNames
+      valid() {
+          return this.uid != "" && this.gid != "" && this.path != "" && this.path.charAt(0) == '/'
       }
   },
   methods: {
-      onSubmit(evt) {
-        evt.preventDefault()
-        let mountTarget = this.selected
-        let mountTargetNetinfo = this.netinfo[mountTarget]
-        this.createManagerLambda(mountTargetNetinfo)
+      async onSubmit(evt) {
+        evt.preventDefault();
+
+        if (this.valid) {
+            let mountTargetNetinfo = await this.getFilesystemNetinfo()
+        
+            mountTargetNetinfo['uid'] = this.uid
+            mountTargetNetinfo['gid'] = this.gid
+            mountTargetNetinfo['path'] = this.path
+
+            console.log(mountTargetNetinfo)
+
+            this.createManagerLambda(mountTargetNetinfo)
+        }
+        else {
+            alert("Form Validation Error. Check the form input and try again.")
+        }
       },
       formatNetinfo (netinfo) {
-          let tmpNetinfo = {}
+          let subnets = []
+          let securityGroups = []
+        
           for (var i=0, n=netinfo.length; i < n; ++i ) {
-              let netinfoKeys = Object.keys(netinfo[i])
-              let mountTargetName = netinfoKeys[0]
-              tmpNetinfo[mountTargetName] = netinfo[i][mountTargetName]
-              
+              if (i === 5) { break; }
+              let mountTarget = Object.keys(netinfo[i])[0]
+
+              let subnet = netinfo[i][mountTarget]['subnet_id']
+              let securityGroup = netinfo[i][mountTarget]['security_groups']
+
+              subnets.push(subnet)
+              securityGroups.push.apply(securityGroups, securityGroup)
           }
+          
+          let tmpNetinfo = {'subnetIds': subnets, 'securityGroups': securityGroups}
+          
           return tmpNetinfo
       },
       async getFilesystemNetinfo () {
           try {
               let response = await API.get('fileManagerApi', '/api/filesystems/' + this.$route.params.id + '/netinfo')
               let formattedNetinfo = this.formatNetinfo(response)
-              this.netinfo = formattedNetinfo
+              return formattedNetinfo
           }
           catch (error) {
               alert('Unable to retrieve filesystem netinfo, check api logs')
@@ -91,7 +118,7 @@ export default {
       },
       async createManagerLambda (netinfo) {
           const params = {
-              body: {"subnetId": netinfo.subnet_id, "securityGroups": netinfo.security_groups},
+              body: {"subnetIds": netinfo.subnetIds, "securityGroups": netinfo.securityGroups, "uid": netinfo.uid, "gid": netinfo.gid, "path": netinfo.path},
               headers: {"Content-Type": "application/json"}
          }
           try {