ui: expose the custom DHCP range on isolated networks

Show the start/end IP fields on the isolated network create form once a
gateway is set, and surface the range on the network details tab so an
operator can see and set the guest IP allocation window without the API.

Author: nagaboinaramgopal

ui/src/config/section/network.js

@@ -50,7 +50,7 @@ export default {
         return fields
       },
       details: () => {
-        const fields = ['name', 'id', 'description', 'type', 'traffictype', 'vpcid', 'vlan', 'cidr', 'ip6cidr', 'netmask', 'gateway', 'asnumber',
+        const fields = ['name', 'id', 'description', 'type', 'traffictype', 'vpcid', 'vlan', 'cidr', 'ip6cidr', 'netmask', 'gateway', 'startip', 'endip', 'asnumber',
           'aclname', 'ispersistent', 'restartrequired', 'reservediprange', 'redundantrouter', 'networkdomain', 'egressdefaultpolicy', 'zonename',
           'account', 'domainpath', 'associatednetwork', 'associatednetworkid', 'ip4routing', 'ip6firewall', 'ip6routing', 'ip6routes',
           'dns1', 'dns2', 'ip6dns1', 'ip6dns2', 'publicmtu', 'privatemtu', 'dnszone', 'dnssubdomain']

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -229,15 +229,15 @@
               v-model:value="form.cidrsize"
               :placeholder="apiParams.cidrsize.description"/>
           </a-form-item>
-          <a-form-item v-if="selectedNetworkOffering && selectedNetworkOffering.specifyipranges" name="startip" ref="startip">
+          <a-form-item v-if="selectedNetworkOffering && (selectedNetworkOffering.specifyipranges || form.gateway)" name="startip" ref="startip">
             <template #label>
               <tooltip-label :title="$t('label.startipv4')" :tooltip="apiParams.startip.description"/>
             </template>
             <a-input
               v-model:value="form.startip"
               :placeholder="apiParams.startip.description"/>
           </a-form-item>
-          <a-form-item v-if="selectedNetworkOffering && selectedNetworkOffering.specifyipranges" name="endip" ref="endip">
+          <a-form-item v-if="selectedNetworkOffering && (selectedNetworkOffering.specifyipranges || form.gateway)" name="endip" ref="endip">
             <template #label>
               <tooltip-label :title="$t('label.endip')" :tooltip="apiParams.endip.description"/>
             </template>