From bf07c706e5742b98974780bb74cdd5d118fbd667 Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 1 Sep 2020 19:00:30 +0700
Subject: [PATCH 1/4] vm wizard: add MAC Address validator

---
 src/locales/en.json                           |  2 +
 .../compute/wizard/NetworkConfiguration.vue   | 51 +++++++++++++++----
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index def524e15..66ad43b7e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1252,6 +1252,7 @@
 "label.lun.number": "LUN #",
 "label.lxcnetworklabel": "LXC Traffic Label",
 "label.macaddress": "MAC Address",
+"label.macaddress.example": "The MAC Address. Example: 01:23:45:67:89:ab",
 "label.macaddresschanges": "MAC Address Changes",
 "label.macos": "MacOS",
 "label.make.project.owner": "Make account project owner",
@@ -2755,6 +2756,7 @@
 "message.error.limit.value": "The value must not be less than",
 "message.error.loading.setting": "There was an error loading these settings.",
 "message.error.lun": "Please enter LUN #",
+"message.error.macaddress": "Please enter a valid MAC Address.",
 "message.error.name": "Please enter name",
 "message.error.netmask": "Please enter Netmask",
 "message.error.network.domain": "Please enter Network domain",
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index 823f1b1f3..c856e0a4c 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -26,16 +26,30 @@
     :scroll="{ y: 225 }"
   >
     <template slot="ipAddress" slot-scope="text, record">
-      <a-input
-        style="width: 150px;"
-        :placeholder="$t('label.ipaddress')"
-        @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)" />
+      <a-form-item>
+        <a-input
+          style="width: 150px;"
+          v-decorator="['ipAddress' + record.id]"
+          :placeholder="$t('label.ipaddress')"
+          @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)" />
+      </a-form-item>
     </template>
     <template slot="macAddress" slot-scope="text, record">
-      <a-input
-        style="width: 150px;"
-        :placeholder="$t('label.macaddress')"
-        @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)" />
+      <a-form-item>
+        <a-input
+          style="width: 150px;"
+          :placeholder="$t('label.macaddress')"
+          v-decorator="[`macAddress` + record.id, {
+            rules: [{
+              validator: validatorMacAddress
+            }]
+          }]"
+          @change="($event) => updateNetworkData('macAddress', record.id, $event.target.value)">
+          <a-tooltip slot="suffix" :title="$t('label.macaddress.example')">
+            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+          </a-tooltip>
+        </a-input>
+      </a-form-item>
     </template>
   </a-table>
 </template>
@@ -80,7 +94,8 @@ export default {
         }
       ],
       selectedRowKeys: [],
-      dataItems: []
+      dataItems: [],
+      macRegex: /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/i
     }
   },
   beforeCreate () {
@@ -150,6 +165,15 @@ export default {
           this.$emit('select-default-network-item', this.dataItems[0].id)
         }
       }
+    },
+    validatorMacAddress (rule, value, callback) {
+      if (!value || value === '') {
+        callback()
+      } else if (!this.macRegex.test(value)) {
+        callback(this.$t('message.error.macaddress'))
+      } else {
+        callback()
+      }
     }
   }
 }
@@ -159,4 +183,13 @@ export default {
   .ant-table-wrapper {
     margin: 2rem 0;
   }
+
+  /deep/.ant-table-tbody > tr td {
+    vertical-align: baseline;
+  }
+
+  .ant-form .ant-form-item {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
 </style>

From 2d5b77f2842065da1f7f19d65872ef5f5a3f1b5f Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Thu, 3 Sep 2020 09:15:50 +0700
Subject: [PATCH 2/4] show IP range and check valid IP range

---
 src/locales/en.json                           |  1 +
 .../compute/wizard/NetworkConfiguration.vue   | 51 +++++++++++++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 66ad43b7e..59d5c1059 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2742,6 +2742,7 @@
 "message.error.internallb.name": "Please specify a name for the Internal LB",
 "message.error.internallb.source.port": "Please specify a Source Port",
 "message.error.invalid.range": "Please enter values from {min} to {max}",
+"message.error.ip.range": "Please enter valid range",
 "message.error.ipv4.address": "Please enter a valid IPv4 address",
 "message.error.ipv4.dns1": "Please enter IpV4 DNS 1",
 "message.error.ipv4.dns2": "Please enter IpV4 DNS 2",
diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index c856e0a4c..3b8a1954b 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -29,9 +29,19 @@
       <a-form-item>
         <a-input
           style="width: 150px;"
-          v-decorator="['ipAddress' + record.id]"
+          v-decorator="['ipAddress' + record.id, {
+            rules: [{
+              validator: validatorIpAddress,
+              cidr: record.cidr,
+              networkType: record.type
+            }]
+          }]"
           :placeholder="$t('label.ipaddress')"
-          @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)" />
+          @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)">
+          <a-tooltip v-if="record.type !== 'L2'" slot="suffix" :title="getIpRangeDescription(record)">
+            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+          </a-tooltip>
+        </a-input>
       </a-form-item>
     </template>
     <template slot="macAddress" slot-scope="text, record">
@@ -95,7 +105,8 @@ export default {
       ],
       selectedRowKeys: [],
       dataItems: [],
-      macRegex: /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/i
+      macRegex: /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/i,
+      ipV4Regex: /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i
     }
   },
   beforeCreate () {
@@ -174,6 +185,40 @@ export default {
       } else {
         callback()
       }
+    },
+    validatorIpAddress (rule, value, callback) {
+      if (!value || value === '') {
+        callback()
+      } else if (!this.ipV4Regex.test(value)) {
+        callback(this.$t('message.error.ipv4.address'))
+      } else if (rule.networkType !== 'L2' && !this.isIp4InCidr(value, rule.cidr)) {
+        const rangeIps = this.calculateCidrRange(rule.cidr)
+        const message = `${this.$t('message.error.ip.range')} ${this.$t('label.from')} ${rangeIps[0]} ${this.$t('label.to')} ${rangeIps[1]}`
+        callback(message)
+      } else {
+        callback()
+      }
+    },
+    getIpRangeDescription (network) {
+      const rangeIps = this.calculateCidrRange(network.cidr)
+      const rangeIpDescription = [`${this.$t('label.ip.range')}:`, rangeIps[0], '-', rangeIps[1]].join(' ')
+      return rangeIpDescription
+    },
+    isIp4InCidr (ip, cidr) {
+      const [range, bits = 32] = cidr.split('/')
+      const mask = ~(2 ** (32 - bits) - 1)
+      return (this.ip4ToInt(ip) & mask) === (this.ip4ToInt(range) & mask)
+    },
+    calculateCidrRange (cidr) {
+      const [range, bits = 32] = cidr.split('/')
+      const mask = ~(2 ** (32 - bits) - 1)
+      return [this.intToIp4(this.ip4ToInt(range) & mask), this.intToIp4(this.ip4ToInt(range) | ~mask)]
+    },
+    ip4ToInt (ip) {
+      return ip.split('.').reduce((int, oct) => (int << 8) + parseInt(oct, 10), 0) >>> 0
+    },
+    intToIp4 (int) {
+      return [(int >>> 24) & 0xFF, (int >>> 16) & 0xFF, (int >>> 8) & 0xFF, int & 0xFF].join('.')
     }
   }
 }

From 86ca0d69589e232aa775ea15267404762203ec4c Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Tue, 8 Sep 2020 14:31:14 +0700
Subject: [PATCH 3/4] add CIDR into expanding of network selection &
 configuration

---
 src/views/compute/wizard/NetworkConfiguration.vue | 11 ++++++++---
 src/views/compute/wizard/NetworkSelection.vue     |  9 ++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index 3b8a1954b..c8a504792 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -25,6 +25,10 @@
     size="middle"
     :scroll="{ y: 225 }"
   >
+    <template slot="name" slot-scope="text, record">
+      <div>{{ text }}</div>
+      <small>{{ $t('label.cidr') + ': ' + record.cidr }}</small>
+    </template>
     <template slot="ipAddress" slot-scope="text, record">
       <a-form-item>
         <a-input
@@ -36,7 +40,7 @@
               networkType: record.type
             }]
           }]"
-          :placeholder="$t('label.ipaddress')"
+          :placeholder="record.cidr"
           @change="($event) => updateNetworkData('ipAddress', record.id, $event.target.value)">
           <a-tooltip v-if="record.type !== 'L2'" slot="suffix" :title="getIpRangeDescription(record)">
             <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
@@ -88,7 +92,8 @@ export default {
         {
           dataIndex: 'name',
           title: this.$t('label.defaultnetwork'),
-          width: '30%'
+          width: '30%',
+          scopedSlots: { customRender: 'name' }
         },
         {
           dataIndex: 'ip',
@@ -229,7 +234,7 @@ export default {
     margin: 2rem 0;
   }
 
-  /deep/.ant-table-tbody > tr td {
+  /deep/.ant-table-tbody > tr td:not(:first-child) {
     vertical-align: baseline;
   }
 
diff --git a/src/views/compute/wizard/NetworkSelection.vue b/src/views/compute/wizard/NetworkSelection.vue
index 9b7dd12a4..cf8df5a18 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -237,7 +237,7 @@ export default {
   inject: ['vmFetchNetworks'],
   methods: {
     getDetails (network) {
-      return [
+      const detail = [
         {
           title: this.$t('label.description'),
           description: network.displaytext
@@ -247,6 +247,13 @@ export default {
           description: network.networkofferingdisplaytext
         }
       ]
+      if (network.type !== 'L2') {
+        detail.push({
+          title: this.$t('label.cidr'),
+          description: network.cidr
+        })
+      }
+      return detail
     },
     handleSearch (value) {
       this.filter = value

From 5d129aff4d91964d3bda3893fee7f4c0cc11466f Mon Sep 17 00:00:00 2001
From: utchoang <hoangnm@unitech.vn>
Date: Wed, 9 Sep 2020 12:51:10 +0700
Subject: [PATCH 4/4] hide element when network type !== L2

---
 src/views/compute/wizard/NetworkConfiguration.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/compute/wizard/NetworkConfiguration.vue b/src/views/compute/wizard/NetworkConfiguration.vue
index c8a504792..d19cec9a7 100644
--- a/src/views/compute/wizard/NetworkConfiguration.vue
+++ b/src/views/compute/wizard/NetworkConfiguration.vue
@@ -27,10 +27,10 @@
   >
     <template slot="name" slot-scope="text, record">
       <div>{{ text }}</div>
-      <small>{{ $t('label.cidr') + ': ' + record.cidr }}</small>
+      <small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small>
     </template>
     <template slot="ipAddress" slot-scope="text, record">
-      <a-form-item>
+      <a-form-item v-if="record.type!=='L2'">
         <a-input
           style="width: 150px;"
           v-decorator="['ipAddress' + record.id, {