export default function NetworkTab()

in helper/src/components/networkTab.js [13:142]


export default function NetworkTab ({ defaults, tabValues, updateFn, invalidArray, featureFlag }) {

    const [callout1, setCallout1] = useState(false)

    const { net, addons, cluster } = tabValues
    var _calloutTarget1 = React.createRef()


    function UpdateDynamicIpAllocation(v) {
        //update the Dynamic IP Allocation property, where this fn was called from
        updateFn("cniDynamicIpAllocation", v)

        //update max pods to 250 if dynamic IP allocation is enabled
        if (v) {
            updateFn("maxPods", 250)
         } else {
            updateFn("maxPods", defaults.net.maxPods)
         }

        //update pod cidr
        if (v) {
            updateFn("podCidr", defaults.net.podCidr.replace("/22","/24"))
         } else {
            updateFn("podCidr", defaults.net.podCidr)
         }
    }

    function UpdateCniOverlay(v) {
        //update the networkPluginMode property, where this fn was called from
        updateFn("networkPluginMode", v)

        //update node subnet to a nice small /24 if overlay is enabled, otherwise use the default
        if (v) {
            updateFn("vnetAksSubnetAddressPrefix", "10.240.0.0/24")
         } else {
            updateFn("vnetAksSubnetAddressPrefix", defaults.net.vnetAksSubnetAddressPrefix)
         }

        if (v) {
            updateFn("podCidr", '10.244.0.0/16')
        } else {
            updateFn("podCidr", defaults.net.podCidr)
        }
    }

    return (
        <Stack tokens={{ childrenGap: 15 }} styles={adv_stackstyle}>

            <Stack.Item>
                <Label required={true}>Network Plugin</Label>
                <MessageBar>Typically, only use "kubenet" networking if you need to limit your non-routable IP usage on your network (use network calculator)</MessageBar>
                {hasError(invalidArray, 'networkPlugin') &&
                    <MessageBar messageBarType={MessageBarType.error}>{getError(invalidArray, 'networkPlugin')}</MessageBar>
                }
                <ChoiceGroup
                    styles={{ root: { marginLeft: '50px' } }}
                    selectedKey={net.networkPlugin}
                    options={[
                        { key: 'kubenet', text: 'Use "kubenet" basic networking, so your PODs DO NOT receive VNET IPs', disabled:cluster.osType==='Windows' },
                        { key: 'azure', text: 'Use "CNI" for fastest container networking, but using more IPs' }

                    ]}
                    onChange={(ev, { key }) => updateFn("networkPlugin", key)}
                    errorMessage={getError(invalidArray, 'networkPlugin')}
                />
            </Stack.Item>

            <Separator className="notopmargin" />

            <Stack.Item>
                <Label>CNI Features</Label>
                {hasError(invalidArray, 'cniFeatures') &&
                    <MessageBar messageBarType={MessageBarType.error}>{getError(invalidArray, 'cniFeatures')}</MessageBar>
                }
                <Stack horizontal tokens={{ childrenGap: 15 }} >
                    <Stack.Item>
                        <MessageBar messageBarType={MessageBarType.info}>Dynamic IP allocation separates node IP's and Pod IP's by subnet allowing dynamic allocation of Pod IPs <a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/configure-azure-cni#dynamic-allocation-of-ips-and-enhanced-subnet-support">docs</a> </MessageBar>
                        <Checkbox
                            styles={{ root: { marginLeft: '50px', marginTop: '10px !important' } }}
                            disabled={net.vnet_opt === 'default' || net.networkPlugin!=='azure' || net.networkPluginMode}
                            checked={net.cniDynamicIpAllocation}
                            onChange={(ev, v) => UpdateDynamicIpAllocation(v)}
                            label="Implement Dynamic Allocation of IPs" />
                    </Stack.Item>
                    <Stack.Item>
                        <MessageBar messageBarType={MessageBarType.info}>Overlay is a feature that leverages a private CIDR for Pod IP's. See if it's right for you:<a target="_new" href="https://learn.microsoft.com/azure/aks/azure-cni-overlay">docs</a> </MessageBar>
                        <Checkbox
                            styles={{ root: { marginLeft: '50px', marginTop: '10px !important' } }}
                            disabled={net.networkPlugin!=='azure' || net.cniDynamicIpAllocation}
                            checked={net.networkPluginMode}
                            onChange={(ev, v) => UpdateCniOverlay(v)}
                            label="CNI Overlay Network" />
                    </Stack.Item>
                    <Stack.Item>
                        <MessageBar messageBarType={MessageBarType.info}>Powered by Cilium is a <a target="_new" href="https://learn.microsoft.com/en-us/azure/aks/azure-cni-powered-by-cilium#prerequisites">preview feature</a> that leverages more efficient use of the linux kernel and other networking features.</MessageBar>
                        <Checkbox
                            styles={{ root: { marginLeft: '50px', marginTop: '10px !important' } }}
                            disabled={net.networkPlugin!=='azure' || net.networkPluginMode===false}
                            checked={net.networkDataplane}
                            onChange={(ev, v) => updateFn("networkDataplane", v)}
                            label="Cilium powered dataplane" />
                            {
                                net.networkDataplane &&
                                (
                                    <PreviewDialog previewLink={"https://learn.microsoft.com/en-us/azure/aks/azure-cni-powered-by-cilium#prerequisites"} />
                                )
                            }
                    </Stack.Item>
                </Stack>
            </Stack.Item>

            <Separator className="notopmargin" />

            <Stack.Item>
            <Label>Pods</Label>
                <MessageBar messageBarType={MessageBarType.info}>When using Azure CNI with Dynamic IP allocation also allows customers to set up clusters that consume fewer IPs. <br/ >This means Pods per Node can be maximised which simplifies sizing the cluster.</MessageBar>
                <Slider
                    buttonProps={{ "data-testid": "network-maxpods-slider"}}
                    styles={{ root: { marginLeft: '50px', width: 450 } }}
                    label={'Maximum Pods per node'} min={10}  max={250} step={1}
                    value={net.maxPods} showValue={true}
                    onChange={(val, range) => updateFn("maxPods", val)}
                />
            </Stack.Item>

            <Separator className="notopmargin" />

            <Stack.Item>
                <Label>Uses a private IP address from your VNet to access your dependent Azure service, such as Azure KeyVault, Azure Container Registry etc</Label>
                <Checkbox styles={{ root: { marginLeft: '50px', marginTop: '0 !important' } }} disabled={false} checked={net.vnetprivateend} onChange={(ev, v) => updateFn("vnetprivateend", v)} label="Enable Private Link" />