www/manager6/tree/DhcpTree.js

   1 Ext.define('PVE.sdn.DhcpTree', {
   2     extend: 'Ext.tree.Panel',
   3     xtype: 'pveDhcpTree',
   4
   5     layout: 'fit',
   6     rootVisible: false,
   7     animate: false,
   8
   9     store: {
  10         sorters: ['ip', 'name'],
  11     },
  12
  13     controller: {
  14         xclass: 'Ext.app.ViewController',
  15
  16         reload: function() {
  17             let me = this;
  18
  19             Proxmox.Utils.API2Request({
  20                 url: `/cluster/sdn/ipams/pve/status`,
  21                 method: 'GET',
  22                 success: function(response, opts) {
  23                     let root = {
  24                         name: '__root',
  25                         expanded: true,
  26                         children: [],
  27                     };
  28
  29                     let zones = {};
  30                     let vnets = {};
  31                     let subnets = {};
  32
  33                     response.result.data.forEach((element) => {
  34                         element.leaf = true;
  35
  36                         if (!(element.zone in zones)) {
  37                             let zone = {
  38                                 name: element.zone,
  39                                 type: 'zone',
  40                                 iconCls: 'fa fa-th',
  41                                 expanded: true,
  42                                 children: [],
  43                             };
  44
  45                             zones[element.zone] = zone;
  46                             root.children.push(zone);
  47                         }
  48
  49                         if (!(element.vnet in vnets)) {
  50                             let vnet = {
  51                                 name: element.vnet,
  52                                 zone: element.zone,
  53                                 type: 'vnet',
  54                                 iconCls: 'fa fa-network-wired x-fa-treepanel',
  55                                 expanded: true,
  56                                 children: [],
  57                             };
  58
  59                             vnets[element.vnet] = vnet;
  60                             zones[element.zone].children.push(vnet);
  61                         }
  62
  63                         if (!(element.subnet in subnets)) {
  64                             let subnet = {
  65                                 name: element.subnet,
  66                                 zone: element.zone,
  67                                 vnet: element.vnet,
  68                                 type: 'subnet',
  69                                 iconCls: 'x-tree-icon-none',
  70                                 expanded: true,
  71                                 children: [],
  72                             };
  73
  74                             subnets[element.subnet] = subnet;
  75                             vnets[element.vnet].children.push(subnet);
  76                         }
  77
  78                         element.type = 'mapping';
  79                         element.iconCls = 'x-tree-icon-none';
  80                         subnets[element.subnet].children.push(element);
  81                     });
  82
  83                     me.getView().setRootNode(root);
  84                 },
  85             });
  86         },
  87
  88         init: function(view) {
  89             let me = this;
  90             me.reload();
  91         },
  92
  93         onDelete: function(table, rI, cI, item, e, { data }) {
  94             let me = this;
  95             let view = me.getView();
  96
  97             Ext.Msg.show({
  98                 title: gettext('Confirm'),
  99                 icon: Ext.Msg.WARNING,
 100                 message: Ext.String.format(gettext('Are you sure you want to remove DHCP mapping {0}'), `${data.mac} / ${data.ip}`),
 101                 buttons: Ext.Msg.YESNO,
 102                 defaultFocus: 'no',
 103                 callback: function(btn) {
 104                     if (btn !== 'yes') {
 105                         return;
 106                     }
 107
 108                     let params = {
 109                         zone: data.zone,
 110                         mac: data.mac,
 111                         ip: data.ip,
 112                     };
 113
 114                     let encodedParams = Ext.Object.toQueryString(params);
 115
 116                     let url = `/cluster/sdn/vnets/${data.vnet}/ips?${encodedParams}`;
 117
 118                     Proxmox.Utils.API2Request({
 119                         url,
 120                         method: 'DELETE',
 121                         waitMsgTarget: view,
 122                         failure: function(response, opts) {
 123                             Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 124                         },
 125                         callback: me.reload.bind(me),
 126                     });
 127                 },
 128             });
 129         },
 130
 131         editAction: function(_grid, _rI, _cI, _item, _e, rec) {
 132             this.edit(rec);
 133         },
 134
 135         editDblClick: function() {
 136             let me = this;
 137
 138             let view = me.getView();
 139             let selection = view.getSelection();
 140
 141             if (!selection || selection.length < 1) {
 142                 return;
 143             }
 144
 145             me.edit(selection[0]);
 146         },
 147
 148         edit: function(rec) {
 149             let me = this;
 150
 151             if (rec.data.type === 'mapping' && !rec.data.gateway) {
 152                 me.openEditWindow(rec.data);
 153             }
 154         },
 155
 156         openEditWindow: function(data) {
 157             let me = this;
 158
 159             Ext.create('PVE.sdn.IpamEdit', {
 160                 autoShow: true,
 161                 mapping: data,
 162                 extraRequestParams: {
 163                     vmid: data.vmid,
 164                     mac: data.mac,
 165                     zone: data.zone,
 166                     vnet: data.vnet,
 167                 },
 168                 listeners: {
 169                     destroy: () => me.reload(),
 170                 },
 171             });
 172         },
 173     },
 174
 175     listeners: {
 176         itemdblclick: 'editDblClick',
 177     },
 178
 179     tbar: [
 180         {
 181             xtype: 'proxmoxButton',
 182             text: gettext('Reload'),
 183             handler: 'reload',
 184         },
 185     ],
 186
 187     columns: [
 188         {
 189             xtype: 'treecolumn',
 190             text: gettext('Name / VMID'),
 191             dataIndex: 'name',
 192             width: 200,
 193             renderer: function(value, meta, record) {
 194                 if (record.get('gateway')) {
 195                     return gettext('Gateway');
 196                 }
 197
 198                 return record.get('name') ?? record.get('vmid') ?? ' ';
 199             },
 200         },
 201         {
 202             text: gettext('IP Address'),
 203             dataIndex: 'ip',
 204             width: 200,
 205         },
 206         {
 207             text: 'MAC',
 208             dataIndex: 'mac',
 209             width: 200,
 210         },
 211         {
 212             text: gettext('Gateway'),
 213             dataIndex: 'gateway',
 214             width: 200,
 215         },
 216         {
 217             header: gettext('Actions'),
 218             xtype: 'actioncolumn',
 219             dataIndex: 'text',
 220             width: 150,
 221             items: [
 222                 {
 223                     handler: function(table, rI, cI, item, e, { data }) {
 224                         let me = this;
 225
 226                         Ext.create('PVE.sdn.IpamEdit', {
 227                             autoShow: true,
 228                             mapping: {},
 229                             isCreate: true,
 230                             extraRequestParams: {
 231                                 vnet: data.name,
 232                                 zone: data.zone,
 233                             },
 234                             listeners: {
 235                                 destroy: () => {
 236                                     me.up('pveDhcpTree').controller.reload();
 237                                 },
 238                             },
 239                         });
 240                     },
 241                     getTip: (v, m, rec) => gettext('Add'),
 242                     getClass: (v, m, { data }) => {
 243                         if (data.type === 'vnet') {
 244                             return 'fa fa-plus-square';
 245                         }
 246
 247                         return 'pmx-hidden';
 248                     },
 249                 },
 250                 {
 251                     handler: 'editAction',
 252                     getTip: (v, m, rec) => gettext('Edit'),
 253                     getClass: (v, m, { data }) => {
 254                         if (data.type === 'mapping' && !data.gateway) {
 255                             return 'fa fa-pencil fa-fw';
 256                         }
 257
 258                         return 'pmx-hidden';
 259                     },
 260                 },
 261                 {
 262                     handler: 'onDelete',
 263                     getTip: (v, m, rec) => gettext('Delete'),
 264                     getClass: (v, m, { data }) => {
 265                         if (data.type === 'mapping' && !data.gateway) {
 266                             return 'fa critical fa-trash-o';
 267                         }
 268
 269                         return 'pmx-hidden';
 270                     },
 271                 },
 272             ],
 273         },
 274     ],
 275 });