wait for angular2 observable to complete

Question

I have tried to convert the existing subscription to promise by doing the following, however I am still getting vm_payload is devoid of "dtype": "VNC" and it's associated attributes. I am not able to see what I am doing wrong.

I have tried to follow, angular2 - Navigate after observable is complete, which should make this work.

customSubmit(value) {
    const hdd = value.datastore+"/"+value.name.replace(/\s+/g, '-')+"-"+Math.random().toString(36).substring(7);
    const payload = {}
    const vm_payload = {}
    payload["name"] = hdd
    payload["type"] = "VOLUME";
    payload["volsize"] = value.volsize * 1024 * 1000 * 1000;
    payload["volblocksize"] = "512";
    vm_payload["vm_type"]= "Bhyve";
    vm_payload["memory"]= value.memory;
    vm_payload["name"] = value.name;
    vm_payload["vcpus"] = value.vcpus;
    vm_payload["memory"] = value.memory;
    vm_payload["bootloader"] = value.bootloader;
    vm_payload["autoloader"] = value.autoloader;
    vm_payload["devices"] = [
      {"dtype": "NIC", "attributes": {"type": value.NIC_type, "mac": value.NIC_mac, "nic_attach":value.nic_attach}},
      {"dtype": "DISK", "attributes": {"path": hdd, "type": "AHCI", "sectorsize": 0}},
      {"dtype": "CDROM", "attributes": {"path": value.iso_path}},
    ]
    if(value.enable_vnc){
      this.create_vnc_device(vm_payload);
    };
    this.loader.open();
    if( value.hdd_path ){
      for (const device of vm_payload["devices"]){
        if (device.dtype === "DISK"){
          device.attributes.path = '/dev/zvol/'+ value.hdd_path.substring(5);
        };
      };
      console.log("OLD DISK",vm_payload);
      this.ws.call('vm.create', [vm_payload]).subscribe(vm_res => {
        this.loader.close();
        this.router.navigate(['/vm']);
    },(error) => {
      this.loader.close();
    });

    } else {
      this.ws.call('pool.dataset.create', [payload]).subscribe(res => {
        for (const device of vm_payload["devices"]){
          if (device.dtype === "DISK"){
            const orig_hdd = device.attributes.path;
            device.attributes.path = '/dev/zvol/' + orig_hdd
          };
        };
        console.log("NEW DISK",vm_payload);
        this.ws.call('vm.create', [vm_payload]).subscribe(vm_res => {
          this.loader.close();
          this.router.navigate(['/vm']);
        });
      },(error) => {
        this.loader.close();
      });
    }

  }
  create_vnc_device(vm_payload: any) {
    this.ws.call('interfaces.ipv4_in_use').subscribe(res=>{
      vm_payload["devices"].push(
        {
          "dtype": "VNC", "attributes": {
            "wait": true, 
            "vnc_port": String(this.getRndInteger(5553,6553)), 
            "vnc_resolution": "1024x768",
            "vnc_bind": res[0], 
            "vnc_password": "", 
            "vnc_web": true 
          }
        }
    );
    console.log("VM PAYLOAD",vm_payload);
    }); 
  }
}

Answer 1

so I ended up using async-await as described in angular2 - Navigate after observable is complete, I was missing async-await on create_vnc_device and also I needed to use it in

async customSubmit(value) {
...................SNIP..............
       if(value.enable_vnc){
      await this.create_vnc_device(vm_payload);
...................SNIP..............
    };
}


async create_vnc_device(vm_payload: any) {
  await this.ws.call('interfaces.ipv4_in_use').toPromise().then( res=>{
  vm_payload["devices"].push(
    {
      "dtype": "VNC", "attributes": {
        "wait": true, 
        "vnc_port": String(this.getRndInteger(5553,6553)), 
        "vnc_resolution": "1024x768",
        "vnc_bind": res[0], 
        "vnc_password": "", 
        "vnc_web": true 
      }
    }
);
}); 
}

associated git commit.

https://github.com/freenas/webui/pull/423/commits/1d756f43a7fd9efbd84d089d5a322c57b0cc4c8e

Answer 2

Dunno what are you doing here hm, actually you should not return promise, if you are getting it within fucntion.

create_vnc_device(vm_payload: any) {
    this.ws.call('interfaces.ipv4_in_use').toPromise().then(res=>{
      vm_payload["devices"].push(
        {
          "dtype": "VNC", "attributes": {
            "wait": true, 
            "vnc_port": String(this.getRndInteger(5553,6553)), 
            "vnc_resolution": "1024x768",
            "vnc_bind": res[0], 
            "vnc_password": "", 
            "vnc_web": true 
          }
        }
    );
    }); 
  }

it must work like that, and upadate your vm_payload.