Revision c849192b

View differences:

src/sunstone/public/app/tabs/hosts-tab/form-panels/create.js
13 13
  var OpenNebulaHost = require('opennebula/host');
14 14
  var OpenNebulaTemplate = require('opennebula/template');
15 15
  var OpenNebulaVM = require('opennebula/vm');
16
  var OpenNebulaNetwork = require('opennebula/network');
16
  var VCenterNetworks = require('utils/vcenter/networks');
17 17
  
18 18
  /*
19 19
    TEMPLATES
......
43 43
      }
44 44
    }
45 45

  
46
    this.vCenterNetworks = new VCenterNetworks();
47

  
46 48
    BaseFormPanel.call(this);
47 49
  };
48 50

  
......
61 63
   */
62 64

  
63 65
  function _htmlWizard() {
64
    return TemplateWizardHTML({formPanelId: this.formPanelId});
66
    return TemplateWizardHTML({
67
      'formPanelId': this.formPanelId,
68
      'vcenterNetworksHTML': this.vCenterNetworks.html()
69
    });
65 70
  }
66 71

  
67 72
  function _setup(context) {
73
    var that = this;
68 74

  
69 75
    $(".drivers", context).hide();
70 76

  
......
93 99
      }
94 100
    });
95 101

  
102
    $("#host_type_mad", context).change();
103

  
96 104
    $("#get_vcenter_clusters", context).on("click", function() {
97 105
      // TODO notify if credentials empty
98 106
      var container = $(".vcenter_clusters", context);
......
168 176

  
169 177
          var templates_container = $(".vcenter_templates", context);
170 178
          var vms_container = $(".vcenter_vms", context);
171
          var networks_container = $(".vcenter_networks", context);
172 179

  
173 180
          var vcenter_user = $("#vcenter_user", context).val();
174 181
          var vcenter_password = $("#vcenter_password", context).val();
......
181 188
                vcenter_host: vcenter_host
182 189
              });
183 190

  
184
          fillVCenterNetworks({
185
                container: networks_container,
186
                vcenter_user: vcenter_user,
187
                vcenter_password: vcenter_password,
188
                vcenter_host: vcenter_host
189
              });
191
          that.vCenterNetworks.insert({
192
            container: context,
193
            vcenter_user: vcenter_user,
194
            vcenter_password: vcenter_password,
195
            vcenter_host: vcenter_host
196
          });
190 197
        },
191 198
        error: function(response) {
192 199
          $(".vcenter_clusters", context).hide();
......
349 356
        });
350 357
      });
351 358

  
352
      $.each($(".network_name:checked", context), function() {
353
        var network_context = $(this).closest(".vcenter_network");
354

  
355
        $(".vcenter_network_result:not(.success)", network_context).html(
356
            '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
357
              '<i class="fa fa-cloud fa-stack-2x"></i>' +
358
              '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
359
            '</span>');
360

  
361
        var network_size = $(".netsize", network_context).val();
362
        var network_tmpl = $(this).data("one_network");
363
        var netname      = $(this).data("network_name");
364
        var type         = $('.type_select', network_context).val();
365

  
366
        var ar_array = [];
367
        ar_array.push("TYPE=" + type);
368
        ar_array.push("SIZE=" + network_size);
369

  
370
        switch (type) {
371
          case 'ETHER':
372
            var mac = $('.eth_mac_net', network_context).val();
373

  
374
            if (mac) {
375
              ar_array.push("MAC=" + mac);
376
            }
377

  
378
            break;
379
          case 'IP4':
380
            var mac = $('.four_mac_net', network_context).val();
381
            var ip = $('.four_ip_net', network_context).val();
382

  
383
            if (mac) {
384
              ar_array.push("MAC=" + mac);
385
            }
386
            if (ip) {
387
              ar_array.push("IP=" + ip);
388
            }
389

  
390
            break;
391
          case 'IP6':
392
            var mac = $('.six_mac_net', network_context).val();
393
            var gp = $('.six_global_net', network_context).val();
394
            var ula = $('.six_mac_net', network_context).val();
395

  
396
            if (mac) {
397
              ar_array.push("MAC=" + mac);
398
            }
399
            if (gp) {
400
              ar_array.push("GLOBAL_PREFIX=" + gp);
401
            }
402
            if (ula) {
403
              ar_array.push("ULA_PREFIX=" + ula);
404
            }
405

  
406
            break;
407
        }
408

  
409
        network_tmpl += "\nAR=[" 
410
        network_tmpl += ar_array.join(",\n")
411
        network_tmpl += "]"
412

  
413
        if ($(".vlaninfo", network_context)) {
414
          network_tmpl += "VLAN=\"YES\"\n";
415
          network_tmpl += "VLAN_ID=" + $(".vlaninfo", network_context).val() + "\n";
416
        }
417

  
418
        var vnet_json = {
419
          "vnet": {
420
            "vnet_raw": network_tmpl
421
          }
422
        };
423

  
424
        OpenNebulaNetwork.create({
425
          timeout: true,
426
          data: vnet_json,
427
          success: function(request, response) {
428
            $(".vcenter_network_result", network_context).addClass("success").html(
429
                '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
430
                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
431
                  '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
432
                '</span>');
433

  
434
            $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="running-color">' +
435
                  Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID +
436
                '</p>');
437
          },
438
          error: function (request, error_json) {
439
            $(".vcenter_network_result", network_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
440
                  '<i class="fa fa-cloud fa-stack-2x"></i>' +
441
                  '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
442
                '</span>');
443

  
444
            $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="error-color">' +
445
                  (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
446
                '</p>');
447
          }
448
        });
449
      });
359
      that.vCenterNetworks.import();
450 360

  
451 361
      return false;
452 362
    });
......
619 529

  
620 530
    return false;
621 531
  }
622

  
623
  /*
624
    Retrieve the list of networks from vCenter and fill the container with them
625
    
626
    opts = {
627
      datacenter: "Datacenter Name",
628
      cluster: "Cluster Name",
629
      container: Jquery div to inject the html,
630
      vcenter_user: vCenter Username,
631
      vcenter_password: vCenter Password,
632
      vcenter_host: vCenter Host
633
    }
634
   */
635
  function fillVCenterNetworks(opts) {
636
    var path = '/vcenter/networks';
637

  
638
    opts.container.show();
639

  
640
    $(".accordion_advanced_toggle", opts.container).trigger("click");
641

  
642
    $.ajax({
643
      url: path,
644
      type: "GET",
645
      data: {timeout: false},
646
      dataType: "json",
647
      headers: {
648
        "X_VCENTER_USER": opts.vcenter_user,
649
        "X_VCENTER_PASSWORD": opts.vcenter_password,
650
        "X_VCENTER_HOST": opts.vcenter_host
651
      },
652
      success: function(response){
653
        $(".content", opts.container).html("");
654

  
655
        $('<div class="row">' +
656
            '<div class="large-12 columns">' +
657
              '<p style="color: #999">' + Locale.tr("Please select the vCenter Networks to be imported to OpenNebula.") + '</p>' +
658
            '</div>' +
659
          '</div>').appendTo($(".content", opts.container))
660

  
661
        $.each(response, function(datacenter_name, networks){
662
          $('<div class="row">' +
663
              '<div class="large-12 columns">' +
664
                '<h5>' +
665
                  datacenter_name + ' ' + Locale.tr("DataCenter") +
666
                '</h5>' +
667
              '</div>' +
668
            '</div>').appendTo($(".content", opts.container))
669

  
670
          if (networks.length == 0) {
671
            $('<div class="row">' +
672
                '<div class="large-12 columns">' +
673
                  '<label>' +
674
                    Locale.tr("No new networks found in this DataCenter") +
675
                  '</label>' +
676
                '</div>' +
677
              '</div>').appendTo($(".content", opts.container))
678
          } else {
679
            $.each(networks, function(id, network){
680
              var netname   = network.name.replace(" ","_");
681
              var vlan_info = ""
682

  
683
              if (network.vlan) {
684
                var vlan_info = '<div class="vlan_info">' +
685
                      '<div class="large-4 columns">'+
686
                        '<label>' + Locale.tr("VLAN") + 
687
                           '<input type="text" class="vlaninfo" value="'+network.vlan+'" disabled/>' +
688
                        '</label>'+
689
                      '</div>'+
690
                    '</div>';
691
              }
692

  
693
              var trow = $('<div class="vcenter_network">' +
694
                  '<div class="row">' +
695
                    '<div class="large-10 columns">' +
696
                      '<div class="large-12 columns">' +
697
                        '<label>' +
698
                          '<input type="checkbox" class="network_name" checked/> ' +
699
                          network.name + '&emsp;<span style="color: #999">' + network.type + '</span>' + 
700
                        '</label>' +
701
                      '</div>'+
702
                      '<div class="large-2 columns">'+
703
                        '<label>' + Locale.tr("SIZE") +
704
                          '<input type="text" class="netsize" value="255"/>' +
705
                        '</label>' +
706
                      '</div>'+
707
                      '<div class="large-2 columns">'+
708
                        '<label>' + Locale.tr("TYPE") +
709
                          '<select class="type_select">'+
710
                            '<option value="ETHER">eth</option>' +
711
                            '<option value="IP4">ipv4</option>'+
712
                            '<option value="IP6">ipv6</option>' + 
713
                          '</select>' + 
714
                        '</label>' +
715
                      '</div>'+
716
                      '<div class="net_options">' +
717
                        '<div class="large-4 columns">'+
718
                          '<label>' + Locale.tr("MAC") + 
719
                            '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
720
                          '</label>'+
721
                        '</div>'+
722
                      '</div>'+ 
723
                      vlan_info +
724
                      '<div class="large-12 columns vcenter_network_response">'+
725
                      '</div>'+
726
                    '</div>' +
727
                    '<div class="large-2 columns vcenter_network_result">'+
728
                    '</div>'+
729
                  '</div>'+
730
                '</div>').appendTo($(".content", opts.container))
731

  
732

  
733
              $('.type_select', trow).on("change",function(){
734
                var network_context = $(this).closest(".vcenter_network");
735
                var type = $(this).val();
736

  
737
                var net_form_str = ''
738

  
739
                switch(type) {
740
                  case 'ETHER':
741
                    net_form_str = 
742
                      '<div class="large-4 columns">'+
743
                        '<label>' + Locale.tr("MAC") + 
744
                          '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
745
                        '</label>'+
746
                      '</div>';
747
                    break;
748
                  case 'IP4':
749
                    net_form_str = 
750
                      '<div class="large-4 columns">'+
751
                        '<label>' + Locale.tr("IP START") + 
752
                          '<input type="text" class="four_ip_net"/>' + 
753
                        '</label>'+
754
                      '</div>'+
755
                      '<div class="large-4 columns">'+
756
                        '<label>' + Locale.tr("MAC") + 
757
                          '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
758
                        '</label>'+
759
                      '</div>';
760
                    break;
761
                  case 'IP6':
762
                    net_form_str = 
763
                      '<div class="large-4 columns">'+
764
                        '<label>' + Locale.tr("MAC") + 
765
                          '<input type="text" class="eth_mac_net"/>' + 
766
                        '</label>'+
767
                      '</div>'+
768
                      '<div class="large-6 columns">'+
769
                        '<label>' + Locale.tr("GLOBAL PREFIX") + 
770
                          '<input type="text" class="six_global_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
771
                        '</label>'+
772
                      '</div>'+
773
                      '<div class="large-6 columns">'+
774
                        '<label>' + Locale.tr("ULA_PREFIX") + 
775
                          '<input type="text" class="six_ula_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
776
                        '</label>'+
777
                      '</div>';
778
                    break;
779
                }
780

  
781
                $('.net_options', network_context).html(net_form_str);
782
              });
783

  
784
              $(".network_name", trow).data("network_name", netname)
785
              $(".network_name", trow).data("one_network", network.one)
786
            });
787
          };
788
        });
789
      },
790
      error: function(response){
791
        opts.container.hide();
792
        Notifier.onError({}, OpenNebulaError(response));
793
      }
794
    });
795

  
796
    return false;
797
  }
798

  
799 532
});
src/sunstone/public/app/tabs/hosts-tab/form-panels/create/wizard.hbs
141 141
      <br>
142 142
      <div class="vcenter_vms"></div>
143 143
      <br>
144
      <div class="vcenter_networks hidden">
145
        {{#advancedSection (tr "Networks") }}
146
        <span class="fa-stack fa-2x" style="color: #dfdfdf">
147
          <i class="fa fa-cloud fa-stack-2x"></i>
148
          <i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
149
        </span>
150
        {{/advancedSection}}
144
      <div>
145
        {{{vcenterNetworksHTML}}}
151 146
      </div>
152 147
      <div class="row import_vcenter_clusters_div hidden">
153 148
        <div class="large-12 columns">
src/sunstone/public/app/tabs/vnets-tab.js
21 21
  ];
22 22

  
23 23
  var _formPanels = [
24
    require('./vnets-tab/form-panels/create')
25
  ]
24
    require('./vnets-tab/form-panels/create'),
25
    require('./vnets-tab/form-panels/import')
26
  ];
26 27

  
27 28
  var VNetsTab = {
28 29
    tabId: TAB_ID,
src/sunstone/public/app/tabs/vnets-tab/actions.js
12 12
  var ADD_AR_DIALOG_ID = require('./dialogs/add-ar/dialogId');
13 13
  var UPDATE_AR_DIALOG_ID = require('./dialogs/update-ar/dialogId');
14 14
  var RESERVE_DIALOG_ID = require('./dialogs/reserve/dialogId');
15
  var IMPORT_DIALOG_ID = require('./form-panels/import/formPanelId');
15 16

  
16 17
  var _actions = {
17 18
    "Network.create" : {
......
36 37
      }
37 38
    },
38 39

  
39
    // TODO
40
    /*
41 40
    "Network.import_dialog" : {
42
      type: "create",
43
      call: function(){
44
        popUpNetworkImportDialog();
41
      type: "custom",
42
      call: function() {
43
        Sunstone.showFormPanel(TAB_ID, IMPORT_DIALOG_ID, "import");
45 44
      }
46 45
    },
47
    */
48 46

  
49 47
    "Network.list" : {
50 48
      type: "list",
src/sunstone/public/app/tabs/vnets-tab/form-panels/import.js
1
define(function(require) {
2
  /*
3
    DEPENDENCIES
4
   */
5
  
6
  require('foundation.tab');
7
  var BaseFormPanel = require('utils/form-panels/form-panel');
8
  var Sunstone = require('sunstone');
9
  var Locale = require('utils/locale');
10
  var VCenterNetworks = require('utils/vcenter/networks');
11

  
12
  /*
13
    TEMPLATES
14
   */
15

  
16
  var TemplateHTML = require('hbs!./import/html');
17
  
18
  /*
19
    CONSTANTS
20
   */
21
  
22
  var FORM_PANEL_ID = require('./import/formPanelId');
23
  var TAB_ID = require('../tabId');
24

  
25
  /*
26
    CONSTRUCTOR
27
   */
28

  
29
  function FormPanel() {
30
    this.formPanelId = FORM_PANEL_ID;
31
    this.tabId = TAB_ID;
32
    this.actions = {
33
      'import': {
34
        'title': Locale.tr("Import vCenter Networks"),
35
        'buttonText': Locale.tr("Import"),
36
        'resetButton': true
37
      }
38
    };
39

  
40
    this.vCenterNetworks = new VCenterNetworks();
41

  
42
    BaseFormPanel.call(this);
43
  }
44

  
45
  FormPanel.FORM_PANEL_ID = FORM_PANEL_ID;
46
  FormPanel.prototype = Object.create(BaseFormPanel.prototype);
47
  FormPanel.prototype.constructor = FormPanel;
48
  FormPanel.prototype.htmlWizard = _htmlWizard;
49
  FormPanel.prototype.submitWizard = _submitWizard;
50
  FormPanel.prototype.onShow = _onShow;
51
  FormPanel.prototype.setup = _setup;
52

  
53
  return FormPanel;
54
  
55
  /*
56
    FUNCTION DEFINITIONS
57
   */
58

  
59
  function _htmlWizard() {
60
    return TemplateHTML({
61
      'formPanelId': this.formPanelId,
62
      'vcenterNetworksHTML': this.vCenterNetworks.html()
63
    });
64
  }
65

  
66
  function _setup(context) {
67
    var that = this;
68

  
69
    Sunstone.disableFormPanelSubmit(TAB_ID);
70

  
71
    $("#get_vcenter_networks", context).on("click", function(){
72
      Sunstone.enableFormPanelSubmit(TAB_ID);
73

  
74
      var vcenter_user = $("#vcenter_user", context).val();
75
      var vcenter_password = $("#vcenter_password", context).val();
76
      var vcenter_host = $("#vcenter_host", context).val();
77

  
78
      that.vCenterNetworks.insert({
79
        container: context,
80
        vcenter_user: vcenter_user,
81
        vcenter_password: vcenter_password,
82
        vcenter_host: vcenter_host
83
      });
84

  
85
      return false;
86
    });
87

  
88
    return false;
89
  }
90

  
91
  function _submitWizard(context) {
92
    var that = this;
93

  
94
    Sunstone.hideFormPanelLoading(TAB_ID);
95
    Sunstone.disableFormPanelSubmit(TAB_ID);
96

  
97
    this.vCenterNetworks.import();
98

  
99
    return false;
100
  }
101

  
102
  function _onShow(context) {
103
  }
104
});
src/sunstone/public/app/tabs/vnets-tab/form-panels/import/advanced.hbs
1
<form data-abide="ajax" id="{{formPanelId}}Advanced" class="custom creation">
2
  <div class="row">
3
    <div class="large-12 columns">
4
      <p>{{tr "Write the Virtual Network template here"}}</p>
5
    </div>
6
  </div>
7
  <div class="row">
8
    <div class="large-12 columns">
9
      <textarea id="template" rows="15" required></textarea>
10
    </div>
11
  </div>
12
</form>
src/sunstone/public/app/tabs/vnets-tab/form-panels/import/formPanelId.js
1
define(function(require){
2
  return 'importVNetForm';
3
});
src/sunstone/public/app/tabs/vnets-tab/form-panels/import/html.hbs
1
<form data-abide="ajax" id="{{formPanelId}}Wizard" class="custom creation">
2
  <div class="row collapse vcenter_credentials">
3
    <div class="row">
4
      <div class="large-6 columns">
5
        <label for="vcenter_user">{{tr "User"}}</label>
6
        <input type="text" name="vcenter_user" id="vcenter_user" />
7
      </div>
8
      <div class="large-6 columns">
9
        <label for="vcenter_host">{{tr "Hostname"}}</label>
10
        <input type="text" name="vcenter_host" id="vcenter_host" />
11
      </div>
12
    </div>
13
    <div class="row">
14
      <div class="large-6 columns">
15
        <label for="vcenter_password">{{tr "Password"}}</label>
16
        <input type="password" name="vcenter_password" id="vcenter_password" />
17
      </div>
18
      <div class="large-6 columns">
19
        <br>
20
        <a class="button radius small right" id="get_vcenter_networks">
21
          {{tr "Get Networks"}}
22
        </a>
23
      </div>
24
    </div>
25
  </div>
26
  <div class="row collapse">
27
    {{{vcenterNetworksHTML}}}
28
  </div>
29
</form>
src/sunstone/public/app/utils/vcenter/networks.js
1
define(function(require) {
2
  // Dependencies
3
  var Locale = require('utils/locale');
4
  var OpenNebulaNetwork = require('opennebula/network');
5
  var OpenNebulaError = require('opennebula/error');
6

  
7
  var TemplateHTML = require('hbs!./networks/html');
8

  
9
  function VCenterNetworks() {
10
    return this;
11
  }
12

  
13
  VCenterNetworks.prototype = {
14
    'html': _html,
15
    'insert': _fillVCenterNetworks,
16
    'import': _import
17
  };
18
  VCenterNetworks.prototype.constructor = VCenterNetworks;
19

  
20
  return VCenterNetworks;
21

  
22
  function _html() {
23
    return '<div class="vcenter_networks hidden"></div>';
24
  }
25

  
26
  /*
27
    Retrieve the list of networks from vCenter and fill the container with them
28
    
29
    opts = {
30
      datacenter: "Datacenter Name",
31
      cluster: "Cluster Name",
32
      container: Jquery div to inject the html,
33
      vcenter_user: vCenter Username,
34
      vcenter_password: vCenter Password,
35
      vcenter_host: vCenter Host
36
    }
37
   */
38
  function _fillVCenterNetworks(opts) {
39
    var path = '/vcenter/networks';
40

  
41
    var context = $(".vcenter_networks", opts.container);
42

  
43
    context.html( TemplateHTML({}) );
44

  
45
    context.show();
46

  
47
    $(".accordion_advanced_toggle", context).trigger("click");
48

  
49
    $.ajax({
50
      url: path,
51
      type: "GET",
52
      data: {timeout: false},
53
      dataType: "json",
54
      headers: {
55
        "X_VCENTER_USER": opts.vcenter_user,
56
        "X_VCENTER_PASSWORD": opts.vcenter_password,
57
        "X_VCENTER_HOST": opts.vcenter_host
58
      },
59
      success: function(response){
60
        $(".content", context).html("");
61

  
62
        $('<div class="row">' +
63
            '<div class="large-12 columns">' +
64
              '<p style="color: #999">' + Locale.tr("Please select the vCenter Networks to be imported to OpenNebula.") + '</p>' +
65
            '</div>' +
66
          '</div>').appendTo($(".content", context))
67

  
68
        $.each(response, function(datacenter_name, networks){
69
          $('<div class="row">' +
70
              '<div class="large-12 columns">' +
71
                '<h5>' +
72
                  datacenter_name + ' ' + Locale.tr("DataCenter") +
73
                '</h5>' +
74
              '</div>' +
75
            '</div>').appendTo($(".content", context))
76

  
77
          if (networks.length == 0) {
78
            $('<div class="row">' +
79
                '<div class="large-12 columns">' +
80
                  '<label>' +
81
                    Locale.tr("No new networks found in this DataCenter") +
82
                  '</label>' +
83
                '</div>' +
84
              '</div>').appendTo($(".content", context))
85
          } else {
86
            $.each(networks, function(id, network){
87
              var netname   = network.name.replace(" ","_");
88
              var vlan_info = ""
89

  
90
              if (network.vlan) {
91
                var vlan_info = '<div class="vlan_info">' +
92
                      '<div class="large-4 columns">'+
93
                        '<label>' + Locale.tr("VLAN") + 
94
                           '<input type="text" class="vlaninfo" value="'+network.vlan+'" disabled/>' +
95
                        '</label>'+
96
                      '</div>'+
97
                    '</div>';
98
              }
99

  
100
              var trow = $('<div class="vcenter_network">' +
101
                  '<div class="row">' +
102
                    '<div class="large-10 columns">' +
103
                      '<div class="large-12 columns">' +
104
                        '<label>' +
105
                          '<input type="checkbox" class="network_name" checked/> ' +
106
                          network.name + '&emsp;<span style="color: #999">' + network.type + '</span>' + 
107
                        '</label>' +
108
                      '</div>'+
109
                      '<div class="large-2 columns">'+
110
                        '<label>' + Locale.tr("SIZE") +
111
                          '<input type="text" class="netsize" value="255"/>' +
112
                        '</label>' +
113
                      '</div>'+
114
                      '<div class="large-2 columns">'+
115
                        '<label>' + Locale.tr("TYPE") +
116
                          '<select class="type_select">'+
117
                            '<option value="ETHER">eth</option>' +
118
                            '<option value="IP4">ipv4</option>'+
119
                            '<option value="IP6">ipv6</option>' + 
120
                          '</select>' + 
121
                        '</label>' +
122
                      '</div>'+
123
                      '<div class="net_options">' +
124
                        '<div class="large-4 columns">'+
125
                          '<label>' + Locale.tr("MAC") + 
126
                            '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
127
                          '</label>'+
128
                        '</div>'+
129
                      '</div>'+ 
130
                      vlan_info +
131
                      '<div class="large-12 columns vcenter_network_response">'+
132
                      '</div>'+
133
                    '</div>' +
134
                    '<div class="large-2 columns vcenter_network_result">'+
135
                    '</div>'+
136
                  '</div>'+
137
                '</div>').appendTo($(".content", context))
138

  
139

  
140
              $('.type_select', trow).on("change",function(){
141
                var network_context = $(this).closest(".vcenter_network");
142
                var type = $(this).val();
143

  
144
                var net_form_str = ''
145

  
146
                switch(type) {
147
                  case 'ETHER':
148
                    net_form_str = 
149
                      '<div class="large-4 columns">'+
150
                        '<label>' + Locale.tr("MAC") + 
151
                          '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
152
                        '</label>'+
153
                      '</div>';
154
                    break;
155
                  case 'IP4':
156
                    net_form_str = 
157
                      '<div class="large-4 columns">'+
158
                        '<label>' + Locale.tr("IP START") + 
159
                          '<input type="text" class="four_ip_net"/>' + 
160
                        '</label>'+
161
                      '</div>'+
162
                      '<div class="large-4 columns">'+
163
                        '<label>' + Locale.tr("MAC") + 
164
                          '<input type="text" class="eth_mac_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
165
                        '</label>'+
166
                      '</div>';
167
                    break;
168
                  case 'IP6':
169
                    net_form_str = 
170
                      '<div class="large-4 columns">'+
171
                        '<label>' + Locale.tr("MAC") + 
172
                          '<input type="text" class="eth_mac_net"/>' + 
173
                        '</label>'+
174
                      '</div>'+
175
                      '<div class="large-6 columns">'+
176
                        '<label>' + Locale.tr("GLOBAL PREFIX") + 
177
                          '<input type="text" class="six_global_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
178
                        '</label>'+
179
                      '</div>'+
180
                      '<div class="large-6 columns">'+
181
                        '<label>' + Locale.tr("ULA_PREFIX") + 
182
                          '<input type="text" class="six_ula_net" placeholder="'+Locale.tr("Optional")+'"/>' + 
183
                        '</label>'+
184
                      '</div>';
185
                    break;
186
                }
187

  
188
                $('.net_options', network_context).html(net_form_str);
189
              });
190

  
191
              $(".network_name", trow).data("network_name", netname)
192
              $(".network_name", trow).data("one_network", network.one)
193
            });
194
          };
195
        });
196
      },
197
      error: function(response){
198
        context.hide();
199
        Notifier.onError({}, OpenNebulaError(response));
200
      }
201
    });
202
  }
203

  
204
  function _import(context) {
205
    $.each($(".network_name:checked", context), function() {
206
      var network_context = $(this).closest(".vcenter_network");
207

  
208
      $(".vcenter_network_result:not(.success)", network_context).html(
209
          '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
210
            '<i class="fa fa-cloud fa-stack-2x"></i>' +
211
            '<i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>' +
212
          '</span>');
213

  
214
      var network_size = $(".netsize", network_context).val();
215
      var network_tmpl = $(this).data("one_network");
216
      var netname      = $(this).data("network_name");
217
      var type         = $('.type_select', network_context).val();
218

  
219
      var ar_array = [];
220
      ar_array.push("TYPE=" + type);
221
      ar_array.push("SIZE=" + network_size);
222

  
223
      switch (type) {
224
        case 'ETHER':
225
          var mac = $('.eth_mac_net', network_context).val();
226

  
227
          if (mac) {
228
            ar_array.push("MAC=" + mac);
229
          }
230

  
231
          break;
232
        case 'IP4':
233
          var mac = $('.four_mac_net', network_context).val();
234
          var ip = $('.four_ip_net', network_context).val();
235

  
236
          if (mac) {
237
            ar_array.push("MAC=" + mac);
238
          }
239
          if (ip) {
240
            ar_array.push("IP=" + ip);
241
          }
242

  
243
          break;
244
        case 'IP6':
245
          var mac = $('.six_mac_net', network_context).val();
246
          var gp = $('.six_global_net', network_context).val();
247
          var ula = $('.six_mac_net', network_context).val();
248

  
249
          if (mac) {
250
            ar_array.push("MAC=" + mac);
251
          }
252
          if (gp) {
253
            ar_array.push("GLOBAL_PREFIX=" + gp);
254
          }
255
          if (ula) {
256
            ar_array.push("ULA_PREFIX=" + ula);
257
          }
258

  
259
          break;
260
      }
261

  
262
      network_tmpl += "\nAR=[" 
263
      network_tmpl += ar_array.join(",\n")
264
      network_tmpl += "]"
265

  
266
      if ($(".vlaninfo", network_context)) {
267
        network_tmpl += "VLAN=\"YES\"\n";
268
        network_tmpl += "VLAN_ID=" + $(".vlaninfo", network_context).val() + "\n";
269
      }
270

  
271
      var vnet_json = {
272
        "vnet": {
273
          "vnet_raw": network_tmpl
274
        }
275
      };
276

  
277
      OpenNebulaNetwork.create({
278
        timeout: true,
279
        data: vnet_json,
280
        success: function(request, response) {
281
          $(".vcenter_network_result", network_context).addClass("success").html(
282
              '<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
283
                '<i class="fa fa-cloud fa-stack-2x"></i>' +
284
                '<i class="fa  fa-check fa-stack-1x fa-inverse"></i>' +
285
              '</span>');
286

  
287
          $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="running-color">' +
288
                Locale.tr("Virtual Network created successfully") + ' ID:' + response.VNET.ID +
289
              '</p>');
290
        },
291
        error: function (request, error_json) {
292
          $(".vcenter_network_result", network_context).html('<span class="fa-stack fa-2x" style="color: #dfdfdf">' +
293
                '<i class="fa fa-cloud fa-stack-2x"></i>' +
294
                '<i class="fa  fa-warning fa-stack-1x fa-inverse"></i>' +
295
              '</span>');
296

  
297
          $(".vcenter_network_response", network_context).html('<p style="font-size:12px" class="error-color">' +
298
                (error_json.error.message || Locale.tr("Cannot contact server: is it running and reachable?")) +
299
              '</p>');
300
        }
301
      });
302
    });
303

  
304
  }
305
});
src/sunstone/public/app/utils/vcenter/networks/html.hbs
1
{{#advancedSection (tr "Networks") }}
2
<span class="fa-stack fa-2x" style="color: #dfdfdf">
3
  <i class="fa fa-cloud fa-stack-2x"></i>
4
  <i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
5
</span>
6
{{/advancedSection}}

Also available in: Unified diff